@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');


body {
    font-family: "Montserrat", system-ui;
    font-size: clamp(15px, 2vw, 18px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-family: "Aboreto", system-ui;
    font-size: clamp(29px, 3.125vw, 50px);
    font-weight: 400;
    line-height: 1.2em;
}

h2 {
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 500;
    line-height: 1.1em;
    font-family: "Aboreto", system-ui;
}

h3 {
    font-size: clamp(24px, 4vw, 28px);
    line-height: 1.2em;
    font-weight: 600;
    font-family: "Aboreto", system-ui;
}

h4,
.h4 {
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.2em;
    font-family: "Aboreto", system-ui;
}

h5 {
    font-size: clamp(18px, 2.5vw, 23px);
    line-height: 1.2em;
    font-family: "Montserrat", sans-serif;
    color: #464646;
}

h6 {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.4em;
    font-family: "Aboreto", system-ui;
}

p,
a {
    font-style: normal;
    font-weight: 400;
    font-size: clamp(15px, 2vw, 16px) !important;
    font-family: "Montserrat", sans-serif;
    color: #464646;
}

.text-aboreto {
    font-family: "Aboreto", system-ui !important;
}

.text-Montserrat {
    font-family: "Montserrat", sans-serif !important;
}

.text-afacad {
    font-family: "Afacad", sans-serif !important;
}

/*@font-face {
    font-family: 'SurendraBold';
    src: url('assets/font/9surendra-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.text-surendra {
    font-family: 'SurendraBold', sans-serif !important;
}*/
.home-font {
    line-height: 72px;
}


ul {
    margin: 0;
    padding: 0;
}

footer li,
header li {
    list-style: none;
}

a,
a:hover,
a:focus {
    text-decoration: none !important;
}

img {
    border-style: none;
}

.btn-pink {
    background: #E6196E;
    padding: 10px 19px 10px 19px;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .btn-pink::before {
        content: "";
        position: absolute;
        color: #fff !important;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        /*background: url("../img/lotus-small-img.svg") no-repeat center;*/
        background-size: contain;
        transition: transform 0.3s ease;
    }

    .btn-pink:hover {
        background: #E6196E;
        box-shadow: 0 6px 15px rgba(200, 81, 159, 0.4);
        transform: translateY(-3px);
        color: #fff !important;
    }

        .btn-pink:hover::before {
            transform: translateY(-50%) rotate(10deg) scale(1.1);
        }

    .btn-pink:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(200, 81, 159, 0.3);
    }

.padding-100 {
    padding: 80px 0px;
}

.padding-top {
    padding-top: 80px;
}

.padding-bottom {
    padding-bottom: 80px;
}

.text-brown {
    color: #7C551A;
}

.text-orange {
    color: #CD7B0F;
}

.bg-pink {
    background: #FFF0DB;
}

#benefits .text-font {
    color: #464646 !important;
}

.text-font {
    color: #CD7B0F;
}

.font-aboreto {
    font-family: "Aboreto", system-ui;
}

/* header */
#header ul li a {
    font-family: "Aboreto", system-ui;
}

    #header ul li a:hover {
        color: #7C551A !important;
    }

.satyasatta-img img {
    width: 201px !important;
}

@media(max-width: 1400px) and (min-width: 992px) {
    #header ul li a {
        font-size: clamp(12px, 2vw, 12px) !important;
    }
}

/*home*/
#home-banner {
    background: url('../img/dattatreya-temple-of-girnar-img.png'), url('../img/dattatreya-temple-of-girnar-img.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 103px;
}

@media(max-width: 992px) {
    #home-banner {
        margin-top: 117px;
    }
}

.home-heading-content {
    padding-top: 189px;
    padding-bottom: 189px;
}

@media(max-width: 768px) {
    .home-heading-content {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .home-font {
        line-height: 50px;
    }
}

.flower-bg {
    background: url('../img/blessings-of-sadguru-design-img.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

@media(max-width: 992px) {
    .res-img {
        width: 400px;
        margin: auto;
    }
}

#satyadatta-gurukul-team {
    background: url('../img/satyadatta-gurukul-team-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-font {
    list-style: none;
    padding-left: 0;
}

    .text-font li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 25px;
    }

        .text-font li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            width: 18px;
            height: 18px;
            background: url('../img/lotus-bullet.svg') no-repeat center;
            background-size: contain;
        }

@media(max-width: 992px) {
    .text-font li {
        margin-bottom: 8px;
    }
}

#satyadatta-founder {
    background: url('../img/woman-practicing-yoga-by-lake.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -140px;
}

.founder-space {
    padding-top: 230px;
    padding-bottom: 100px;
}

.bg-brown {
    background: url('../img/bg-brown.png');
    background-repeat: no-repeat;
    background-size: 77% 100%;
    z-index: 2;
    position: relative;
}

@media(max-width: 1600px) and (min-width: 1200px) {
    .bg-brown {
        background-size: 81% 100%;
    }
}

@media(max-width: 1200px) and (min-width: 992px) {
    .bg-brown {
        background-size: 85% 100%;
    }
}

@media(max-width: 992px) {
    .bg-brown {
        background-size: 100% 100%;
    }
}

#religious-practices-at-gurukul {
    background: url('../img/satyadatta-gurukul-team-bg.png');
    background-repeat: no-repeat;
    background-size: 67% 100%;
}


@media(max-width: 992px) {
    #religious-practices-at-gurukul {
        background-size: unset !important;
    }
}

.margin-content {
    margin-top: 80px;
    margin-bottom: 80px;
}

.donation-bg {
    background: url('../img/donation-bg-img.png');
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
}

.bg-light-brown {
    background: #E9DBC2;
    padding: 45px 45px;
}

#get-in-touch input,
#get-in-touch label {
    font-family: "Montserrat", sans-serif;
}

#get-in-touch label {
    color: #aaaaaa !important;
}


#get-in-touch input,
#get-in-touch textarea {
    border: 1px solid #D05E26;
}

#get-in-touch label {
    color: #aaaaaa !important;
}

#get-in-touch {
    background: url(../img/donations-for-building-development-img.png);
    background-position: -8% 100%;
    background-repeat: no-repeat;
    background-size: 42%;
    margin-bottom: 95px;
}

@media(max-width: 992px) {
    #get-in-touch {
        background: unset;
        background-position: -8% 100%;
        background-repeat: no-repeat;
        background-size: 42%;
    }
}

/* footer */
#footer {
    background: url('../img/footer-bg-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text-small {
    font-size: 15px !important;
}

.border-lines {
    border: 1px solid #7C551A !important;
    opacity: unset !important;
}

#footer p a:hover {
    color: #C8519F !important;
}

.icons-hover i:hover {
    color: #C8519F !important;
}

#sattyadatta-inner-banner {
    background: url('../img/inner-banner-img.png'), url('../img/inner-banner-img.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 104px;
}

.inner-page-heading {
    padding-top: 55px;
    padding-bottom: 55px;
}

    .inner-page-heading h1 {
        position: relative;
        display: inline-block;
        font-size: 36px;
        letter-spacing: 2px;
        font-weight: 400;
    }

        .inner-page-heading h1::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
            width: 55px;
            height: 2px;
            background-color: #CD7B0F;
            opacity: 0.9;
        }

.bg-browns {
    background: #AB7225;
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

/*#several-spiritual-workshops {
    background: url('../img/bg-design.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}*/


.theme-txt {
    color: #CD7B0F;
}

.bg-theme-color {
    background: #E9DBC2;
}

.img-bg-wrap {
    position: relative;
    display: inline-block;
    z-index: 1;
    min-height: 300px;
}

    .img-bg-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--bg-image);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
        transform: scale(1.2);
    }

    .img-bg-wrap img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: auto;
        display: block;
    }

.contact-container {
    position: relative;
}

.contact-img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 430px;
    margin-top: 220px;
    object-fit: cover;
    z-index: 1;
}

.contact-form-wrapper {
    position: absolute;
    top: 0px;
    right: -30px;
    z-index: 2;
}

.donation-content {
    padding-left: 120px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    border: 1px solid #D05E26;
    border-radius: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.img-bg-wrap-large {
    min-height: 400px;
}

    .img-bg-wrap-large::before {
        transform: scale(1.6);
    }

@media (max-width: 992px) {
    .dattatreya-temple-img {
        height: 500px;
    }

    .contact-img {
        width: 100%;
        height: auto;
        margin-top: 0;
        object-fit: contain;
        position: relative;
        z-index: 1;
    }

    .contact-form-wrapper {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        margin-top: 20px;
        z-index: 2;
    }

    .donation-content {
        padding-left: 0;
    }

    .img-bg-wrap-large {
        min-height: 300px;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
    }

        .img-bg-wrap-large::before,
        .img-bg-wrap-story::before {
            transform: scale(1);
        }
}


#team-behind .card .text-box {
    position: absolute;
    bottom: 0;
    height: 122px;
    left: 0;
    padding: 12px 22px;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-image: url("data:image/svg+xml,%3Csvg width='456' height='184' viewBox='0 0 456 184' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='456' height='183.186' fill='url(%23g)'/%3E%3Cdefs%3E%3ClinearGradient id='g' x1='190.155' y1='172.353' x2='190.155' y2='35.3642' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23000000'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
}

#team-behind .card .image-box {
    overflow: hidden;
}

    #team-behind .card .image-box img {
        transform: scale(1.1);
        transition: all 1s ease-in-out;
    }

#team-behind .card:hover .image-box img {
    transform: scale(1);
}

.yoga-card {
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
    min-height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .yoga-card img {
        max-height: 260px;
    }

.guide-step-txt {
    font-size: 15px !important;
}

.gurudev-guide-col-one {
    background: #CD7B0F;
}

.gurudev-guide-col-two {
    background-image: url('../img/yoga-meditation.png');
}

.gurudev-guide-col-three {
    background: #AB7225;
}

@media (max-width: 992px) {
    .yoga-card {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .yoga-card {
        min-height: 350px;
    }

    .yoga-meditation {
        display: flex;
        align-items: center !important;
        justify-content: center;
    }
}

.active {
    position: relative;
    display: inline-block;
    color: #CD7B0F !important;
    font-weight: 700 !important;
}

.dropdown-item.active, .dropdown-item:active {
    background: #f1f1f1 !important;
}


.text-hover-orange:hover {
    color: #D05E26 !important;
}

.map {
    width: 100% !important;
    height: 100% !important;
}

@media(max-width: 992px) {
    .map {
        height: 300px !important;
    }
}

.text-sizes {
    font-size: clamp(20px, 3vw, 20px) !important;
}



/* HOMEPAGE INTRODUCTION OVERLAY */

#overlay-intro {
    background: url(../img/introduction-of-satyadatta-gurukul-trust.png);
    background-size: cover;
    background-position: center;
    background-repeat: initial;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: end;
    opacity: 1;
    transition: opacity 2s ease-in-out, visibility 2s ease-in-out, transform 2s ease-in-out;
    transform: translateY(0%);
}

html.lock-scroll {
    overflow: hidden;
}


/* --- ANIMATION: fade + slide-left --- */
#overlay-intro.fade-slide {
    opacity: 0;
    transform: translateY(-100%) scale(1.15);
}

#footer img {
    box-shadow: unset !important;
    padding-inline: 102px;
}

#mountain-temple {
    background: #CD7B0F;
    color: #fff !important
}

p.gratitude {
    width: fit-content;
    margin-left: auto;
    color: #fff !important;
    font-weight: 500;
    margin-block: 0;
}

/*shop*/

.product-card .product-name {
    margin: 0
}

.product-card .img-box img {
    border: 10px solid #F2F2F2;
    background: #F2F2F2;
    width: 100%;
    /* padding: 10px; */
    height: 204px;
    object-fit: contain;
}

.product-card .img-box .overlay-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -24%);
    transition: all 0.5s ease-in-out;
    opacity: 0;
    box-shadow: rgba(50, 50, 93, 0.00) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.product-card .img-box:hover .overlay-btn {
    color: #464646 !important;
    transform: translate(-50%, -100%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    opacity: 1;
}

.product-tabs .nav-link {
    background-color: #FFF0DB;
    color: #464646 !important;
    margin-right: 10px;
    border-radius: 0px;
    font-size: 14px;
    padding: 6px 16px;
    border: 1px solid transparent;
    transition: .3s ease;
}

    .product-tabs .nav-link.active,
    .product-tabs .nav-link:hover {
        background-color: #FFF0DB;
        box-shadow: 0 -3px 0 #E6196E inset;
    }

.products-section .tab-pane.fade.active.show::after,
.product-tabs button::after {
    display: none
}

#workshop .workshop-item {
    background: url(../img/bg-brown.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
}

    #workshop .workshop-item .workshop-title {
        color: #fff !important
    }

    #workshop .workshop-item .date {
        background: #fff;
        width: fit-content;
        margin-inline: auto;
        padding: 7px 54px;
    }

    #workshop .workshop-item.lite {
        background: #FFF0DB;
    }

        #workshop .workshop-item.lite .workshop-title {
            color: #CD7B0F !important;
        }

    #workshop .workshop-item img {
        width: 100%;
        height: 247px;
        object-fit: cover;
    }

.course-card {
    overflow: hidden;
}

    .course-card img {
        transform: scale(1);
        transition: all 2.5s ease-in-out;
    }

    .course-card:hover img {
        transform: scale(1.1);
    }

    .course-card .text-box {
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
    }

    .course-card .image-box img {
        object-fit: cover;
        width: 100%;
        height: 300px;
    }

    .course-card .text-font li::before {
        background: url(../img/lotus-bullet-orange.svg) no-repeat center;
        background-size: cover;
    }

.owl-carousel .owl-item.active::after {
    display: none;
}

#sattyadatta-events .img-box img {
    object-fit: cover;
    width: 100%;
    height: 280px;
}




/* --------------------------------
   CONNECTIVITY BOX
-------------------------------- */
.connect-box {
    background: #FFF0DB;
    border-radius: 10px;
}

.connect-list {
    padding-left: 18px;
}

    .connect-list li {
        margin-bottom: 8px;
        list-style: disc;
        color: #333;
    }

.program-list {
    padding-left: 18px;
}

    .program-list li {
        margin-bottom: 10px;
        color: #333;
    }

/* RESPONSIVE */
@media(max-width:767px) {
    .sec-title {
        font-size: 1.5rem;
    }
}

.connectivity-bg {
    background: url(../img/satyadatta-gurukul-connectivity.png)
}


/* ---------- MODAL BOX ---------- */
.membership-box {
    border-radius: 8px;
    background: #f7e4c9;
    padding: 20px 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
}

.modal-title {
    font-size: 1.4rem;
    color: #c03a63;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.form-control,
.form-select {
    height: 45px;
    border-radius: 4px;
}

textarea.form-control {
    height: auto;
}

/* ---------- Custom Upload UI ---------- */
.upload-wrap {
    border: 2px solid #d39c53;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
    margin-top: 3px;
}

.fake-input {
    padding: 10px 12px;
    background: #fff;
    font-size: 15px;
    color: #777;
}

.upload-btn {
    background: #444;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .upload-btn:hover {
        background: #222;
    }

.real-file {
    display: none;
}

/* ---------- BUTTON ---------- */
.btn-theme {
    background: #c03a63;
    color: #fff;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: bold;
    border: none;
}

    .btn-theme:hover {
        background: #a52f54;
    }

/* ---------- Mobile Responsive ---------- */
@media(max-width: 575px) {
    .membership-box {
        padding: 15px;
    }

    .modal-title {
        font-size: 1.2rem;
    }
}

.overlay-button {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%)
}

#membershipModal {
    backdrop-filter: blur(4px);
}

@media(min-width: 1400px) {
    .content-shift-down, .content-shift-downs {
        margin-top: 130px !important;
    }
}

@media(min-width: 1200px) and (max-width: 1400px) {
    .content-shift-down, .content-shift-downs {
        margin-top: 95px !important;
    }
}


@media(min-width: 992px) and (max-width: 1200px) {
    .content-shift-down, .content-shift-downs {
        margin-top: 62px !important;
    }
}