@media only screen and (min-width: 1850px) {
.col-img-wrapper { height: 550px !important; }
.col-content-wrapper{ height: 550px !important; }
.footer-divider {
  padding: 0px 75px;
}
}

@media (max-width:1199px) {
html { font-size: 9px; }
.nav-item .nav-link { padding: 0.5rem 1rem !important; }
.Contact_Us_RHS {
padding: 10px 30px 0;
}
}
@media (max-width:1199px) {
html { font-size: 9px; }
.nav-item .nav-link { padding: 0.5rem 0.5rem !important; }
.Contact_Us_RHS {
padding: 10px 30px 0;
}
}

@media (max-width:991px) {
.container { max-width: unset; width: 100%; }
#Home {
position: relative;
margin-top: 75px;
}
#Home .carousel-inner {
overflow: hidden;
top: unset;
}
/* ---------------------------------------------------------
Destination End
--------------------------------------------------------- */
.inner-Destination h3 {
font-size: 1.6rem;
line-height: 30px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem
}
.inner-Destination h2 {
font-size: 2.6rem;
line-height: 35px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem
}
/* ---------------------------------------------------------
Destination End
--------------------------------------------------------- */


/* ---------------------------------------------------------
Whykasara Start
--------------------------------------------------------- */

#whykasara { padding-top: 0px; }

.swiper-section { position: relative; padding: 0 0 32px; }
.swiper { overflow: visible; padding: 10px 4px 10px; }

.card { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--black);
transition: transform 0.4s cubic-bezier(.22,.68,0,1.2), box-shadow 0.4s ease; cursor: pointer; box-shadow: 0 5px 60px
rgba(0,0,0,0.5), 0 0 0 1px rgba(232,201,122,0.2); }
.card-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.5s ease; }
.card:hover .card-image { transform: scale(1.04); }
.card-image-wrap { overflow: hidden; position: relative; }
.card-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background:
linear-gradient(transparent, var(--card-bg)); pointer-events: none; }
.card-body { padding: 10px 18px 10px; background: #00000040; color: #fff; position: absolute; bottom: 0;
backdrop-filter: blur(3px); width: 100%; }
.card-heading { font-family: 'Playfair Display', serif; font-size: clamp(17px, 2vw, 21px); font-weight: 700; color:
var(--text-primary); margin-bottom: 10px; line-height: 1.3; text-align: center; }

.nav-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid #000;
  background: var(--surface);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.nav-btn:hover { background: var(--accent); border-color: var(--accent); color: #0d0d0d; transform: scale(1.08);
box-shadow: 0 8px 24px rgba(232,201,122,0.3); }
.nav-btn svg { width: 20px; height: 20px; }
.nav-counter { font-family: 'Playfair Display', serif; font-size: 15px; color: var(--black); min-width: 60px; text-align: center; }
.nav-counter span { color: var(--accent); font-size: 20px; }

.swiper-pagination { bottom: -36px !important; }
.swiper-pagination-bullet { background: var(--text-muted); opacity: 0.4; width: 6px; height: 6px; }
.swiper-pagination-bullet-active { background: var(--accent); opacity: 1; width: 20px; border-radius: 3px; }

.swiper-slide { transition: opacity 0.3s ease; }
.nav-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 0; }

/* ---------------------------------------------------------
Whykasara Start
--------------------------------------------------------- */
/* ---------------------------------------------------------
Construction Update Start
--------------------------------------------------------- */

/* ---------------------------------------------------------
Construction Update End
--------------------------------------------------------- */
/* ---------------------------------------------------------
key heighligh Start
--------------------------------------------------------- */
.inner-KeyHighlights .swiper-pagination { bottom: -3px !important; }
.kh-slide { grid-template-columns: 1fr; }
.kh-content { padding: 44px 20px 60px; gap: 28px; }
/* ---------------------------------------------------------
key heighligh End
--------------------------------------------------------- */
/* ---------------------------------------------------------
Location Start
--------------------------------------------------------- */
#location { min-height: auto; height: auto; padding: 60px 0;}
#location .locationmap { display: none;}
#location .mobilemap { display: block; }
/* ---------------------------------------------------------
Location End
--------------------------------------------------------- */

	/* ---------------------------------------------------------
Contact Us
--------------------------------------------------------- */

.Inner_Contact_Us {
  margin-bottom: -25px;

}
.Contact_Us_RHS {
        padding: 20px 30px 20px;
    }
/* ---------------------------------------------------------
Contact Us end
--------------------------------------------------------- */
/* ---------------------------------------------------------
Footer Start
--------------------------------------------------------- */
.mobilehide { display: none; }
.mobileshow { display: block; }
.footer-divider { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-left: 10px; padding-top:
15px; margin-top: 15px;}
.footer-logo {text-align: center;margin-top: 15px;}
.maharera {align-items: center;text-align: left; justify-content: center; }
.qr { margin-bottom: 10px; }
.kasara_next_content {
position: absolute;
z-index: 2;
max-width: 800px;
padding: 20px;
}
.background_image {
height: 40vh !important;
background-color: #000;
}
#footer {
background: var(--primary-dark);
color: var(--black);
padding: 50px 0 60px;
position: static;
}
.site_address h6 {
margin-bottom: 5px;
font-size: 1.5rem;
}
/* ---------------------------------------------------------
Footer End
--------------------------------------------------------- */
}

@media (max-width: 767px) {
.section-heading { font-size: 4rem !important; }
.inner-Destination .clip-reveal-inner { color: #000 !important; font-size: 4rem;}
.inner-Destination h2 {
font-size: 2.1rem;
line-height: 35px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
}
.inner-Destination h3 {
font-size: 1.4rem;
line-height: 30px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
}
/* ---------------------------------------------------------
Construction Update Start
--------------------------------------------------------- */
.cs-desktop { display: none !important; }
.cs-mobile { display: block; }

.cs-title {
font-size: 20px;
padding: 18px 0 14px;
position: relative;
z-index: 10;
}
/* Fixed height container — cards stack inside */
.cs-mobile-stack {
position: relative;
width: 100%;
height: 500px;
/*height: calc(100svh - 60px); */
overflow: hidden;
}

/* Each card: absolutely placed, full size */
.cs-m-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
will-change: transform;
}

.cs-m-card img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
pointer-events: none;
user-select: none;
}

.cs-m-overlay {
position: absolute;
inset: 0;

}
.cs-m-content {
position: absolute;
top: 0;
left: 0;
width: 100%;

padding: 14px 16px;

background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);

border-radius: 0;
color: #fff;
}

.cs-m-label {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
opacity: 0.8;
}

.cs-m-text {
font-size: 20px;
font-weight: 700;
margin-top: 10px;
line-height: 1.35;
text-shadow: 0 2px 16px rgba(0,0,0,0.7);
text-align: center;
color: #000;
}

/* Dot indicators */
.cs-dots {
position: absolute;
bottom: 7px !important;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 20;
pointer-events: none;
}

.cs-dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 10px 0;
z-index: 20;
/* position: absolute; bottom: 7px; left: 50%; transform hata do */
}

.cs-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
transition: background 0.3s ease, transform 0.3s ease;
}

.cs-dot.cs-dot-active {
background: #9d7209 !important;
transform: scale(1.35);
}
/* ---------------------------------------------------------
Construction Update End
--------------------------------------------------------- */
/* ---------------------------------------------------------
key heighligh Start
--------------------------------------------------------- */
.kh-card { min-height: 100px; padding: 16px 50px 16px 90px; }
.kh-card__icon { width: 92px; height: 92px; top: 57%;}
.kh-card::after { left: 98px; width: 90px; }
/* ---------------------------------------------------------
key heighligh End
--------------------------------------------------------- */
/* ---------------------------------------------------------
Image Start
--------------------------------------------------------- */
.kasara_next_subtitle {
font-size: 30px;
}
.kasara_next_title {
font-size: 40px;
}
.kasara_next_tagline {
font-size: 25px;
}
/* ---------------------------------------------------------
Image Start
--------------------------------------------------------- */
/* ---------------------------------------------------------
Location Start
--------------------------------------------------------- */
#location { padding: 20px 0; }
#location .nav-tabs { flex-wrap: wrap; justify-content: space-between;}
#location .nav-tabs .nav-link { width: 110px; height: 169px; font-size: 10px;}
#location .scroll-left,
#location .scroll-right { display: block !important; }
/* ---------------------------------------------------------
Location End
--------------------------------------------------------- */
/* ---------------------------------------------------------
Footer Start
--------------------------------------------------------- */
#Contact_Us { padding-top: 40px; }
.Contact_Us_LHS { height: auto; }
.Contact_Us_RHS { padding: 30px 15px; }
.login-box { width: 100%; }
.Inner_Contact_Us { margin-bottom: 0px !important; }
/* ---------------------------------------------------------
Footer End
--------------------------------------------------------- */
}


.circle_animation.active img {
/* clip-path: circle(150% at 50% 50%); */
transform: scale(1.1);
}

@media (max-width: 600px) {

/* ---------------------------------------------------------
Construction Update Start
--------------------------------------------------------- */

/* ---------------------------------------------------------
Construction Update End
--------------------------------------------------------- */
/* ---------------------------------------------------------
key heighligh Start
--------------------------------------------------------- */

.kh-card { min-height: 75px; padding: 0px 29px 0px 67px; }
.kh-card__body {align-content: center; }
.kh-card__icon { width: 76px; height: 76px; top: 57%;}
.kh-card__title { font-size: 1.4rem; }
.kh-content { padding: 36px 16px 52px; }
.kh-card::after { left: 80px; width: 76px; }
.kh-card__bullet { width: 7px; height: 7px; margin-top: 5px; }
}
/* ---------------------------------------------------------
key heighligh End
--------------------------------------------------------- */
@media (max-width: 480px) {
/* ---------------------------------------------------------
key heighligh Start
--------------------------------------------------------- */
.kh-card__title { font-size: 1.4rem; }
/* ---------------------------------------------------------
key heighligh End
--------------------------------------------------------- */
}


/*================ new css s ==============*/


#whykasaramobie .swiper-pagination-bullet {
background-color: #9d7209;
opacity: 0.6;
}
#whykasaramobie .swiper-pagination-bullet-active {
background-color: #9d7209;
opacity: 1;
}


@media (max-width: 767px) {
.kh-slide {
grid-template-columns: 1fr;
gap: 16px 0;
}

.kh-card {
min-height: 100px;
padding: 16px 50px 16px 90px;
}

.kh-card__icon {
width: 92px;
height: 92px;
top: 57%;
}

.kh-card::after {
left: 98px;
width: 90px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation: portrait) {
.section-heading { font-size: 3.8rem !important; }
.inner-Destination .clip-reveal-inner { color: #000 !important; font-size: 3.8rem;}
.inner-Destination h2 {
font-size: 2rem;
line-height: 35px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
}
.inner-Destination h3 {
font-size: 1.3rem;
line-height: 30px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
}
}
@media only screen and (min-width: 300px) and (max-width: 480px) and (orientation: portrait) {
.section-heading { font-size: 3.8rem !important; }
.inner-Destination .clip-reveal-inner { color: #000 !important; font-size: 3.8rem;}
.inner-Destination h2 {
font-size: 2rem;
line-height: 35px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
}
.inner-Destination h3 {
font-size: 1.3rem;
line-height: 30px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
}

}
@media (max-width: 768px) {
    .footer-links {
        margin-top: -20px !important;
    }
    /* .testi-gallery-thumbs .swiper-slide{
	width: 260px !important;
	height: 260px !important;
    }
    .testi-gallery-thumbs .swiper-slide-active{
	width: 260px !important;
        height: 260px !important;
    } */
    .map-marker {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #c03a2b00;
    border-radius: 50%;
    z-index: 2;
    top: 41%;
    right: 55%;
    transform: translate(-50%, -50%);
}
}
@media (max-width: 768px) {
  #whykasara {
    padding-top: 0;
  }
}


/* ============================================
   MOBILE — max-width 991px
   ============================================ */
@media (max-width: 991px) {
    .whykasaramob {
    padding: 50px 0px; 
  }

  #whykasaramobie {
    height: 100svh;      /* ✅ min-height → height */
    min-height: unset;   /* ✅ override hata do */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0;
  }

  #whykasaramobie .col-12 {
    padding-bottom: 15px;
  }

  .swiper-section { padding: 0; }
  .swiper { padding: 0 4px; overflow: hidden; }

  #whykasara-slider {
    overflow: hidden;
    pointer-events: none;
  }

  #whykasara-slider .swiper-wrapper {
    display: block;
    position: relative;
   height: calc(100svh - 320px);
    transform: none !important;
    transition: none !important;
  }

  #whykasara-slider .swiper-slide {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    visibility: visible !important;
    will-change: transform, opacity;
  }

  #whykasara-slider .card {
    height: 100%;
    border-radius: 14px;
     box-shadow: none;   
    border: none;
  }

  #whykasara-slider .card-image-wrap {
    height: 100%;
  }

  #whykasara-slider .card-image {
    height: 100%;
    aspect-ratio: unset;
    /* object-fit: cover; */
  }

  .swiper-pagination { bottom: -20px !important; }

  .card-heading { font-size: clamp(15px, 4vw, 18px); margin-bottom: 6px; }

  #whykasaramobie .section-heading { font-size: clamp(24px, 7vw, 34px); }
  #whykasaramobie .section-subheading { font-size: clamp(12px, 3.5vw, 15px); margin-bottom: 0; }
}


/*@media (max-width: 1200px) {*/
/*  .navbar-nav {*/
/*    gap: 10px !important;*/
/*  }*/

/*  .navbar-nav .nav-link {*/
/*    font-size: 13px;*/
/*    padding: 6px 8px;*/
/*  }*/

/*  .navbar-brand1 img {*/
/*    width: 120px;*/
/*  }*/
/*}*/
@media (max-width: 1200px) {
  .MahaRERA_number a {
    font-size: 10px;
  }

  .MahaRERA_number p {
    font-size: 10px;
  }

  .site_address h6 {
    font-size: 1rem;
  }

  .site_address p {
    font-size: 10px;
  }
  
}

