/* ============================================================
   RESPONSIVE LAYOUTS FOR MY CONTAINER
   ============================================================ */

/* ================= EXTRA SMALL (Mobile ≤575px) ================= */
@media (max-width: 575.98px) {

    .darshan-page .container {
        padding: 0 16px;
        max-width: 100% !important;
    }

    .faq .faq_content {
        padding: 16px;
    }

    h2.faq-title {
        font-family: 'Poppins Bold';
        font-size: 18px;
        line-height: 140%;
        display: flex;
        gap: 10px;
    }

    h2.faq-title img {
        width: 22px;
    }

    .Darshan-section .top-logo {
        top: -22px;
        right: 10px;
    }
	.why-card .icon {
        width: 50px;
        height: 50px;
        margin: unset;
		margin-bottom: 15px;
    }
	.banner-carousel .item{
	    min-height: unset;

	}
	
	.modal-open .banner-section {
    position: relative;
    z-index: -1;
}
.modal-open .Darshan-section {
        z-index: -1;
    }
	.modal-open .darshan-section{
    z-index: -1;
}

.modal-open .Top-Trending-Group-Darshan-Yatras .container.yatra-wrapper{
    position:relative;
    z-index:-1;
}
.modal-open .darshan-form-section{
    z-index:-1;
}

.modal-open .darshan-why{
    z-index:-1;
}

.modal-open .discover-what-our-travelers-have-to-say-section{
    position:relative;
    z-index:-1;
}

.modal-open .Frequently-Asked-Questions {
    position:relative;
    z-index:-1;
}

.modal-open .page_footer{
     position:relative;
    z-index:-1;
}
.darshan-page .container, .darshan-page .SOTC_Container {
    padding: 0 16px;
}
.darshan-form-box::after {
        background-image: url('/images/Darshan/form-mobile.png');

        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 150px;

        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
    }
}


/* ================= SMALL DEVICES (576px - 767px) ================= */
@media (min-width: 576px) and (max-width: 767.98px) {

    .darshan-page .container {
        padding: 0 24px;
        max-width: 100% !important;
    }
	
	.banner-carousel .item{
	    min-height: unset;

	}
	
	.modal-open .banner-section {
    position: relative;
    z-index: -1;
}
.modal-open .Darshan-section {
        z-index: -1;
    }
	.modal-open .darshan-section{
    z-index: -1;
}

.modal-open .Top-Trending-Group-Darshan-Yatras .container.yatra-wrapper{
    position:relative;
    z-index:-1;
}
.modal-open .darshan-form-section{
    z-index:-1;
}

.modal-open .darshan-why{
    z-index:-1;
}

.modal-open .discover-what-our-travelers-have-to-say-section{
    position:relative;
    z-index:-1;
}

.modal-open .Frequently-Asked-Questions {
    position:relative;
    z-index:-1;
}

.modal-open .page_footer{
     position:relative;
    z-index:-1;
}

    .faq .faq_content {
        padding: 16px;
    }

    h2.faq-title {
        font-family: 'Poppins Bold';
        font-size: 18px;
        line-height: 140%;
        display: flex;
        gap: 10px;
    }

    h2.faq-title img {
        width: 22px;
    }

    .Darshan-section .top-logo {
        width: 60px;
        top: -10px;
        right: 10px;
    }
	
	    .why-card .icon {
        width: 50px;
        height: 50px;
        margin: unset;
		margin-bottom: 15px;
    }
.darshan-page .container, .darshan-page .SOTC_Container {
    padding: 0 16px;
}
.darshan-form-box::after {
        background-image: url('/images/Darshan/form-mobile.png');

        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 150px;

        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
    }
}


/* ================= MOBILE COMMON (≤768px) ================= */
@media (max-width: 768px) {

    /* darshan-region */
    .darshan-region .bottom {
        flex-direction: column;
        gap: 10px;
        align-items: start;
    }

    /* darshan-ui */
    .darshan-ui {
        padding: 40px 15px;
    }

    .darshan-ui .tips-title {
        font-size: 25px;
    }

    .darshan-ui .left {
        font-size: 15px;
    }

    /* darshan-why */
    .darshan-why {
        padding: 50px 15px;
    }

    .darshan-why .decor-left {
        left: 16px;
        width: 117.19596099853516px;
        height: 110px;
    }

    .darshan-why .decor-right {
        right: 16px;
        width: 117.19596099853516px;
        height: 110px;
    }

    /* darshan-form */
    .darshan-form-box {
        flex-direction: column;
    }

    .darshan-form-left {
        width: 100%;
        transform: scaleX(-1);
    }

    .decor-left,
    .decor-right {
        width: 120px;
    }

    /* owl */
    .owl-nav {
        display: none;
    }

    /* yatra */
    .yatra-wrapper .yatra-img {
        height: 150px;
    }

    .yatra-wrapper .yatra-title {
        max-width: 90%;
    }

    .Darshan-section {
        padding: 24px 0;
    }

    .About-Darshan-section {
        padding-top: 16px;
    }

    .yatra-wrapper .yatra-tabs {
        padding-top: 16px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 5px;
    }

    .yatra-wrapper .yatra-btn {
        min-width: unset;
    }

    .Top-Darshan-Trails .darshan-card {
        max-width: 270px;
        min-width: 270px;
    }

    .Top-Darshan-Trails .owl-item.active {
        max-width: 270px;
        min-width: 270px;
        width: unset !important;
    }

    .Top-Darshan-Trails .owl-item {
        max-width: 270px;
        min-width: 270px;
        width: unset !important;
    }

    .Top-Trending-Group-Darshan-Yatras .container.yatra-wrapper {
        padding-right: 0;
    }

    .Top-Darshan-Trails .container.darshan-wrapper {
        padding-right: 0;
    }

    .darshan-form-right form#darshanForm .col-md-4 {
        max-width: unset;
    }

    .yatra-wrapper .yatra-tabs {
        padding-top: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .yatra-wrapper .yatra-tabs::-webkit-scrollbar {
        display: none;
    }

    .darshan-region .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .darshan-region .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* ✅ enable horizontal scroll */
        overflow-y: hidden;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        /* smooth mobile scroll */
        scrollbar-width: none;
        /* hide scrollbar (Firefox) */
        gap: 8px;
    }

    /* hide scrollbar (Chrome/Safari) */
    .darshan-region .tabs::-webkit-scrollbar {
        display: none;
    }

    .darshan-region .tabs button {
        flex: 0 0 auto;
        /* 🔥 IMPORTANT: don't shrink */
        white-space: nowrap;
        border: 1px solid #333333;
    }

    .Region-wise-Yatras .d-flex.justify-content-between.flex-wrap {
        align-items: start;
    }

    .Region-wise-Yatras .container {
        padding-right: 0;
    }

    .Region-wise-Yatras .sub-heading.read-more-content {
        padding-right: 16px;
    }

    .darshan-region .btn-view {
        color: #fff;
        padding: 16px 16px;
        border-radius: 8px;
        text-decoration: none;
        width: 100%;
        text-align: center;
        background: #EB1C23;
    }

    .darshan-region .Explore.text-center {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .why-choose-sotc-section .text-center.header {
        text-align: start !important;
        margin-top: 80px;
    }

    .why-choose-sotc-section .read-more-content {
        text-align: start !important;
    }

    .darshan-why .row.cards {
        padding-top: 24px;
        gap: 16px;
    }

    .darshan-review h2.heding.text-center {
        text-align: start !important;
    }

    .darshan-review .container {
        padding-right: 0;
    }

    .darshan-review .bottom-decor.left {
        left: 5px;
        z-index: 0;
    }

    .darshan-review .bottom-decor {
        position: absolute;
        bottom: 0;
        width: 420px;
        height: 320px;
    }

    .darshan-review .bottom-decor.right {
        display: none;
    }

    .darshan-review .text-center {
        margin-top: 48px;
        position: relative;
        z-index: 1;
    }

    .darshan-form-section {
        background: linear-gradient(to bottom,
                rgba(156, 45, 0, 0.95) 30%,
                #F5DECB 30%);
    }

    .darshan-ui .left {
        gap: 12px;
    }

    .darshan-ui span {
        font-family: 'Poppins Medium';
        font-size: 14px;
    }

    .darshan-ui .left .icon {
        width: auto;
        height: auto;
    }
}


/* ================= MEDIUM DEVICES (768px - 991px) ================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .darshan-page .container {
        padding: 0 32px;
        max-width: 100% !important;
    }
}


/* ================= LARGE DEVICES (992px - 1199px) ================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .darshan-page .container {
        padding: 0 48px;
        max-width: 100% !important;
    }
}




@media only screen and (max-width: 767px) {
.banner-carousel img.img-fluid{min-height: auto;}
.Darshan-section {
        padding: 12px 0;
    }
	
	.About-Darshan-section {
        padding-top: 0px;
    }
.About-Darshan-section .description.read-more-content{margin-bottom: 1.5rem !important;}
body, .yatra-wrapper .yatra-title, .About-Darshan-section .heading.mb-3{line-height:normal;}
.yatra-wrapper .yatra-tab {
    min-width: 58px;}
	
	.darshan-why .header h2{font-size: 25px;}
.darshan-review .top-decor{background-size: cover;}
}