/*--------------------------------------------------------------
15. Media queries
--------------------------------------------------------------*/

@media (max-width: 1470px) {
    .mb-60 {
        margin-bottom: 50px;
    }
    .p-footer {
        border-radius: 25px;
        padding: 40px 0px 50px;
    }
    .f-logo {
        margin-bottom: 30px;
    }
    .title {
        font-size: 40px;
    }
    .sec-pad {
        padding: 65px 0;
    }
    .footer, 
    .horizontal-pad{
        padding: 0px 40px;
    }
    .big-title {
        font-size: 50px;
        margin-bottom: 30px;
    }
    .sub-title {
        font-size: 30px;
    }
    .cream-box {
        border-radius: 25px;
        padding: 25px;
    }
    .blue-box {
        border-radius: 25px;
        padding: 30px;
    }
    .box001{
        height: 350px;
        margin-bottom: 25px;
    }
    .content-box{
        padding: 35px;
    }
    .workshops .box002 .content-box{
        padding: 25px 35px;
    }
    .content-box .icon-box{
        margin-bottom: 20px;
    }
    .cust-ul {
        margin-bottom: 30px;
    }
    .content-sec .title {
        margin-bottom: 25px;
    }
    .content-sec {
        margin-top: 25px;
        margin-left: 30px;
    }
    .green-box {
        padding: 50px;
        border-radius: 25px;
    }
    .green-box .big-title{
        margin-bottom: 30px;
    }
    .hero-title {
        font-size: 55px;
        margin-bottom: 30px;
    }
    .hero-text {
        font-size: 22px;
        line-height: 36px;
        margin-bottom: 35px;
    }
    .hero-shape {
        width: 600px;
    }
    .inner-hero-sec{
        padding: 50px 40px;
    }
    .hero-sec{
        padding: 50px 40px 12px;
    }
    .hero-main {
        border-radius: 25px;
    }
    .hero-sec .hero-main{
        border-radius: 25px 25px 0 0;
    }
    .hero-content {
        padding-bottom: 140px;
    }
    .navbar-nav {
        gap: 25px;
    }
    .top-nav {
        padding: 8px 90px;
    }
    .inner-hero-sec .hero-content{
        padding: 150px 0px 65px;
    }
    .mlc-box {
        border-radius: 25px;
        padding: 25px;
    }
    .mcl-profile {
        width: 225px;
        height: 225px;
    }
    .workshops .box002{
        margin-bottom: 35px;
    }
    .timeline-item .dot {
        top: 40px;
    }
    .btn-theme {
        font-size: 16px;
        padding: 10px 30px;
    }
    .h-btn.btn-theme {
        padding-left: 50px;
        padding-right: 50px;
    }
    .navbar-nav .nav-link {
        font-size: 16px;
    }
}

@media (max-width: 1400px) {
    /* Homepage hero: less space above copy; center block so flex-end gap does not read as huge top padding */
    .hero-sec .hero-content-stack {
        justify-content: center;
        padding-top: calc(env(safe-area-inset-top, 0px) + clamp(44px, 6vh, 68px));
        padding-bottom: clamp(16px, 4vh, 32px);
    }

.bottom-head {
    padding: 50px 90px 0px;
}
.offcanvas {
    background-color: #F8F3ED;
}
.navbar-nav {
    align-items: flex-start;
    gap: 20px;
}
.btn-close.text-reset svg line{
    stroke: #262626;
}
.header.scrolled .bottom-head {
    padding-top: 0px;
}
}


@media (max-width: 1350px) {

}


@media (max-width: 1200px) {
    .mb-60 {
        margin-bottom: 35px;
    }
    p {
        line-height: 22px;
    }
    .mb-40 {
        margin-bottom: 30px;
    }
    .p-footer {
        border-radius: 20px;
        padding: 30px 0px 40px;
    }
    .f-logo{
        margin-bottom: 20px;
    }
    .logo{
        width: 180px;
    }
    .title {
        font-size: 30px;
    }
    .form-control {
        padding: 13px 20px;
    }
    .btn-theme {
        padding: 10px 35px;
    }
    .mb-30 {
        margin-bottom: 20px;
    }
    .blur-shape01{
        min-width: 125px;
        height: 125px;
    }
    .sec-pad {
        padding: 50px 0;
    }
    .footer, 
    .horizontal-pad{
        padding: 0px 30px;
    }
    .big-title {
        font-size: 35px;
        margin-bottom: 25px;
    }
    .sub-title {
        font-size: 25px;
    }
    .cream-box {
        border-radius: 20px;
        padding: 20px;
    }
    .blue-box {
        border-radius: 20px;
        padding: 25px;
    }
    .box001{
        height: 300px;
        margin-bottom: 20px;
    }
    .box001.left{
        border-radius: 190px 15px 15px 15px;
    }
    .box001.center{
        border-radius: 190px 190px 15px 15px;
    }
    .box001.right{
        border-radius: 15px 190px 15px 15px;
    }    
    .who-we-are-box {
        border-radius: 25px 25px 0 0;
    }
    .weekly-engagement{
        border-radius: 0px 0px 25px 25px;
    }
    .br-30{
        border-radius: 25px;
    }
    .content-box{
        padding: 25px;
    }
    .workshops .box002 .content-box{
        padding: 20px 25px;
    }
    .content-box .icon-box{
        margin-bottom: 5px;
    }
    .content-box .icon-box svg{
        width: 80px;
        height: 80px;
    }
    .blur-shape02{
        width: 100px;
        height: 100px;
        right: 200px;
    }
    .cust-ul {
        margin-bottom: 20px;
        gap: 15px;
    }
    .content-sec .title {
        margin-bottom: 20px;
    }
    .content-sec {
        margin-top: 5px;
        margin-left: 10px;
    }
    .cust-ul li {
        line-height: 26px;
        gap: 10px;
    }
    .cust-ul li::before {
        min-width: 9px;
        height: 9px;
        margin-top: 8px;
    }
    .green-box {
        padding: 40px;
        border-radius: 20px;
    }
    .green-box .big-title{
        margin-bottom: 25px;
    }
    .hero-title {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .hero-text {
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 25px;
        max-width: 410px;
    }
    .hero-shape {
        width: 550px;
    }
    .inner-hero-sec{
        padding: 40px 30px;
    }
    .hero-sec{
        padding: 40px 30px 10px;
    }
    .hero-main {
        border-radius: 20px;
    }
    .hero-sec .hero-main{
        border-radius: 20px 20px 0 0;
    }
    .hero-content {
        padding-bottom: 140px;
    }
    .bottom-head {
        padding: 40px 70px 0px;
    }
    .navbar {
        padding: 10px 0px;
    }
    .header.scrolled .bottom-head .navbar-brand img {
        width: 160px;
    }
    .inner-hero-sec .hero-content{
        padding: 110px 0px 50px;
    }
    .mlc-box {
        border-radius: 20px;
        padding: 20px;
        gap: 15px;
    }
    .mcl-profile {
        width: 200px;
        height: 200px;
        margin-bottom: 15px;
    }
    .workshops .box002{
        margin-bottom: 30px;
    }
    .timeline-item {
        padding: 20px 30px;
    }
    .timeline-item .dot {
        top: 26px;
    }
    .accordion-button {
        padding: 15px 0px 15px 35px;
        font-size: 22px;
    }
    .accordion-button::after {
        top: 29px;
    }
    .accordion-button::before {
        top: 23px;
    }
    .accordion-body {
        padding: 0px 0px 20px 35px;
    }
}


@media (max-width: 992px) {
    .mb-100{
        margin-bottom: 50px;
    }
    .f-ul {
        gap: 25px;
    }
    .s-footer {
        gap: 15px;
        flex-direction: column-reverse;
    }
    .copyright-text{
        text-align: center;
    }
    .sec-pad {
        padding: 40px 0;
    }
    .box001{
        height: 250px;
    }
    .content-sec {
        margin-top: 0px;
        margin-left: 0px;
    }
    .green-box {
        padding: 30px;
    }
    .teachings-practices-sec .box001 {
        border-radius: 15px !important;
    }
}


@media (max-width: 768px) {
    .mb-60 {
        margin-bottom: 30px;
    }
    p {
        line-height: 20px;
    }
    body {
        font-size: 14px;
    }
    .mb-40 {
        margin-bottom: 20px;
    }
    .f-ul {
        gap: 25px;
        row-gap: 7px;
        flex-wrap: wrap;
    }
    .f-ul li a {
        font-size: 16px;
    }
    .f-logo{
        margin-bottom: 10px;
    }
    .logo{
        width: 150px;
    }
    .p-footer {
        border-radius: 15px;
        padding: 20px 0px 25px;
    }
    .s-footer {
        padding: 15px 0;
        gap: 10px;
    }
    .copyright-text {
        font-size: 14px;
    }
    .social-box {
        min-width: 28px;
        height: 28px;
    }
    .facebook-icon{
        width: 8px;
    }
    .insta-icon{
        width: 14px;
    }
    .youtube-icon{
        width: 16px;
    }
    .twitter-x-icon{
        width: 12px;
    }    
    .title {
        font-size: 25px;
    }
    .form-control {
        padding: 13px 20px;
    }
    .btn-theme {
        font-size: 14px;
        padding: 8px 30px;
    }
    .mb-30 {
        margin-bottom: 10px;
    }
    .form-label {
        font-size: 14px;
        line-height: 22px;
    }
    .form-control {
        padding: 10px 15px;
    }
    .contact-form-img {
        border-radius: 250px 250px 15px 15px;
    }
    .sec-pad {
        padding: 30px 0;
    }
    .footer, 
    .horizontal-pad{
        padding: 0px 20px;
    }
    .big-title {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .sub-title {
        font-size: 22px;
    }
    .cream-box {
        border-radius: 15px;
        padding: 15px;
    }
    .blue-box {
        border-radius: 15px;
        padding: 20px;
    }
    .cream-box iframe{
        height: 216px;
    }
    .box001{
        height: 200px;
        margin-bottom: 10px;
    }
    .who-we-are-box {
        border-radius: 20px 20px 0 0;
    }
    .weekly-engagement{
        border-radius: 0px 0px 20px 20px;
    }
    .br-30{
        border-radius: 20px;
    }
    .box002{
        flex-direction: column;
        align-items: center;
    }
    .content-box{
        padding: 15px 0px;
        border-left: 0px;
        border-top: 1px solid #FFFFFF;
        width: 100%;
    }
    .workshops .box002 .content-box{
        padding: 15px 0px !important;
        border-top: 1px solid #000000 !important;
    }
    .workshops .box002:first-child .content-box:first-child{
        border-top: 0px !important;
        padding-top: 0px !important;
    }
    .workshops .box002:last-child .content-box:last-child{
        padding-bottom: 0px !important;
    }
    .box002 .content-box:first-child{
        padding-left: 0px;
        border-top: 0px;
        padding-top: 0px;
    }
    .box002 .content-box:last-child{
        padding-right: 0px;
    }
    .content-box .icon-box{
        margin-bottom: 0px;
    }
    .content-box .icon-box svg{
        width: 65px;
        height: 65px;
    }
    .blur-shape02{
        width: 80px;
        height: 80px;
        right: 50px;
    }
    .cust-ul {
        margin-bottom: 15px;
        gap: 10px;
    }
    .content-sec .title {
        margin-bottom: 15px;
    }
    .cust-ul li {
        font-size: 14px;
        line-height: 24px;
    }
    .cust-ul li::before {
        min-width: 9px;
        height: 9px;
        margin-top: 8px;
    }
    .green-box {
        padding: 20px;
        border-radius: 15px;
    }
    .green-box .big-title{
        margin-bottom: 20px;
    }
    .hero-title {
        font-size: 40px;
        margin-bottom: 15px;
    }
    .hero-text {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 15px;
        max-width: 350px;
    }
    .hero-shape {
        width: 450px;
        bottom: 40px;
    }
    .inner-hero-sec{
        padding: 20px;
    }
    .hero-sec{
        padding: 20px 20px 6px;
        height: min(68vh, 500px);
    }
    .hero-main {
        border-radius: 15px;
    }
    .hero-sec .hero-main{
        border-radius: 15px 15px 0 0;
    }
    .btn-sec {
        gap: 10px;
    }
    .hero-content {
        padding-bottom: 100px;
    }
    .hero-sec .hero-content{
        padding-bottom: 64px;
    }
    .navbar-nav .nav-link {
        font-size: 14px;
    }
    .navbar-nav {
        gap: 15px;
    }
    .navbar {
        padding: 0px;
    }
    .menu_toggle {
        width: 21px !important;
        height: 21px;
    }
    .bottom-head {
        padding: 25px 50px 0px;
    }
    .btn-close.text-reset svg{
        width: 25px;
        height: 25px;
    }
    .header.scrolled .bottom-head .navbar-brand img {
        width: 130px;
    }
    .inner-hero-sec .hero-content{
        padding: 90px 0px 30px;
    }
    .content-sec p{
        margin-bottom: 10px;
    }

    .mlc-box {
        border-radius: 15px;
        padding: 15px;
        gap: 10px;
    }
    .mcl-profile {
        width: 180px;
        height: 180px;
        margin-bottom: 10px;
    }
    .designation {
        font-size: 16px;
        line-height: 22px;
    }
    .mlc-contact-sec{
        gap: 7px;
    }
    .mcl-contact-box {
        min-width: 35px;
        height: 35px;
    }
    .mcl-contact-box .mail-icon{
        width: 17px;
    }
    .mcl-contact-box .call-icon{
        width: 15px;
    }
    .special-services-sec .content-box .icon-box{
        text-align: center;
    }
    .special-services-sec .content-box, 
    .special-services-sec .content-box .icon-box{
        text-align: center;
    }
    .workshops .box002{
        margin-bottom: 0px;
    }
    .teachings-practices-sec .box001 {
        height: 300px;
    }
    .timeline::before {
        left: 0px;
        transform: none;
    }
    .timeline-item {
        width: 100%;
        padding: 15px 0px 15px 30px !important;
        text-align: left;
        left: 0 !important;
    }
    .timeline-item.left,
    .timeline-item.right {
        text-align: left;
    }
    .timeline-item .dot {
        left: -5px !important;
        right: auto;
        top: 21px;
        width: 16px;
        height: 16px;
        border: 2px solid #FFF;
    }
    .accordion-button {
        padding: 10px 0px 10px 30px;
        font-size: 20px;
    }
    .accordion-button::after {
        top: 23px;
    }
    .accordion-button::before {
        top: 17px;
    }
    .accordion-body {
        padding: 0px 0px 15px 30px;
    }
}


@media (max-width: 576px) {
    .mb-60 {
        margin-bottom: 25px;
    }
    .mb-40 {
        margin-bottom: 15px;
    }
    .f-ul {
        row-gap: 7px;
        flex-direction: column;
    }
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .box001{
        border-radius: 20px !important;
    }
    .hero-shape{
        display: none;
    }
    .hero-sec{
        height: min(58vh, 420px);
    }
    .hero-content{
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 75px;
    }
    .hero-sec .hero-content{
        padding-bottom: 52px;
    }
    .mcl-profile {
        width: 150px;
        height: 150px;
    }
    .teachings-practices-sec .box001 {
        height: 250px;
    }
}


@media (max-width: 400px) {
    .btn-sec{
        flex-direction: column;
    }
}

/* Homepage: first content band sits closer to hero (must load after .sec-pad breakpoints) */
.sec-pad.sec-pad-after-hero{
    padding-top: clamp(18px, 3.2vw, 40px);
}