:root {
    --masala: rgba(69, 64, 61, 1);
    --white: #ffffff;
    --questrial: "Questrial", sans-serif;
    --lightBgImg: linear-gradient(rgba(255, 255, 255, 0.2)), url('/themeimage/Brown/footerBg.jpg');
    --darkBgImg: linear-gradient(rgba(69, 64, 61, 0.8)), url(/themeimage/Brown/footerBg.jpg);
}

.templateContainer {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important;
    background-position: center top;
    background-size: cover;
    min-height: 750px;
}

.templateMainColumn {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important
}

.linkBtnTemplate {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: white !important;
    font-family: var(--questrial) !important;
    padding: 5px 15px !important;
    box-shadow: rgba(61, 43, 31,1) 0px 5px 2px;
    border: none !important;
    text-shadow: 1px 1.5px 1px black !important
}

    .linkBtnTemplate:hover {
        transform: scale(1.1);
        box-shadow: rgba(61, 43, 31,1) 0px 5px 2px;
    }

.templateGreeting {
    color: ghostwhite !important;
    text-shadow: black 1px 2px 2px !important;
    letter-spacing: 3px !important
}

.templateTitle {
    color: wheat !important;
    font-size: 40px !important;
    text-shadow: black 2px 3px 1px !important
}

.templateInfo {
    color: ghostwhite !important;
    text-shadow: black 1px 1px 2px !important;
    letter-spacing: 2px !important
}

.templateQuote {
    color: wheat !important;
    text-shadow: black 1px 2px 2px !important;
    letter-spacing: 2px !important
}

.templateCtaBtn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: white !important;
    font-family: var(--questrial) !important;
    padding: 10px 40px !important;
    box-shadow: rgba(61, 43, 31,1) 0px 6px 1px;
    border: none !important;
    text-shadow:1px 2px 1px black!important
}

    .templateCtaBtn:hover {
        transform:scale(1.1);
        color:wheat!important;
    }

.templateSubContentTitleGallery {
    font-weight: 400;
    font-style: normal;
    font-size: 32px !important;
    text-shadow: black 1px 2px 1px !important;
    color: ghostwhite !important;
    background-image: var(--darkBgImg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important
}

.templateSubContentTitle {
    font-weight: 400;
    font-style: normal;
    font-size: 32px !important;
    text-shadow: black 1px 2px 1px !important;
    color: ghostwhite !important;
    background-image: var(--darkBgImg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important
}

.templateCardContainer {
    background-image: var(--lightBgImg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important
}

.templateCard {
    background-image: var(--darkBgImg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important
}

.templateCardBg {
    background-image: var(--lightBgImg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important
}

.templateCardRibbon {
    background-color: wheat;
}

.templateCardRibbon p, span {
    color: saddlebrown!important;
}

    .templateCardRibbon span {
        color: saddlebrown !important;
    }

    .templateCardRibbon::before, .templateCardRibbon::after {
        content: "";
        position: absolute;
        top: 25px;
        left: 0px;
        width: 8px;
        height: 16px;
        border-bottom-left-radius: 8px;
    }

    .templateCardRibbon::before {
        background-color: wheat;
    }

    .templateCardRibbon::after {
        background-color: rgb(0, 0, 0);
        border-top-left-radius: 8px;
    }

.templateCardDescription {
    color:ghostwhite!important;
    text-shadow: 1px 1px 2px black!important
}

.templateEmptySubContent {
    background-image: var(--darkBgImg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: none !important;
    color:white!important
}

.templateEmptySubContent p {
    color: white !important
}

#tempInfoDesc p {
    color: ghostwhite !important;
    text-shadow:1px 1px 1px black !important;
}