/* ================================================
   mobile-fix.css  — GVR (Goa Villas For Rent)
   IMPORTANT: Load AFTER main.css on every page
   ================================================ */

/* GLOBAL */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------
   INDEX HEADER (.header.-mx-60)
   ------------------------------------------------ */
.header.-mx-60 .header__logo img,
.header.-mx-60 .kaifkk {
  height: 70px !important;
  width: auto !important;
}
@media (max-width: 991px) {
  .header.-mx-60 .header__logo img,
  .header.-mx-60 .kaifkk { height: 55px !important; }
}
@media (max-width: 575px) {
  .header.-mx-60 .header__logo img,
  .header.-mx-60 .kaifkk { height: 42px !important; }
  .header.-mx-60 .header__container {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ------------------------------------------------
   PAGE HEADER (.header.-h-110)
   ------------------------------------------------ */
.header.-h-110 .header__logo img {
  height: 70px !important;
  width: auto !important;
}
@media (max-width: 767px) {
  .header.-h-110 .header__logo img { height: 55px !important; }
  .header.-h-110 .line.-vertical { display: none !important; }
}
@media (max-width: 575px) {
  .header.-h-110 .header__logo img { height: 42px !important; }
}

/* ------------------------------------------------
   FULL-SCREEN MENU
   ------------------------------------------------ */
@media (max-width: 767px) {
  .menuFullScreen__right { display: none !important; }
  .menuFullScreen__left  { width: 100% !important; }
}

/* ------------------------------------------------
   HERO SLIDER
   ------------------------------------------------ */
@media (max-width: 767px) {
  .hero.-type-5 .swiper-wrapper,
  .hero.-type-5 .hero__bg { min-height: 420px; }
  .hero.-type-5 .hero__nav button { width: 44px !important; height: 44px !important; }
}

/* ------------------------------------------------
   PAGE HERO (inner pages)
   ------------------------------------------------ */
@media (max-width: 575px) {
  .pageHero.-type-1 { padding-top: 100px !important; padding-bottom: 40px !important; }
  .pageHero.-type-1 .pageHero__title { font-size: 30px !important; }
  .pageHero.-type-1 .pageHero__text  { font-size: 14px !important; }
}

/* ------------------------------------------------
   ABOUT SECTION
   ------------------------------------------------ */
@media (max-width: 575px) {
  .about.-type-1 { padding-top: 70px !important; overflow: hidden; }
  .about.-type-1 .about__images { grid-template-columns: 1fr !important; gap: 12px !important; }
  .about.-type-1 .about__title,
  .about.-type-1 .text-120 { font-size: 40px !important; }
}

/* ------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------ */
@media (max-width: 767px) {
  .text-64  { font-size: 36px !important; }
  .text-92  { font-size: 44px !important; }
  .text-120 { font-size: 56px !important; }
}
@media (max-width: 575px) {
  .text-40  { font-size: 24px !important; }
  .text-52  { font-size: 30px !important; }
  .text-64  { font-size: 28px !important; }
  .text-92  { font-size: 32px !important; }
  .text-120 { font-size: 44px !important; }
}

/* ------------------------------------------------
   SECTION PADDING
   ------------------------------------------------ */
@media (max-width: 767px) {
  .layout-pt-lg { padding-top: 60px !important; }
  .layout-pb-lg { padding-bottom: 60px !important; }
  .pt-100 { padding-top: 50px !important; }
  .pb-100 { padding-bottom: 50px !important; }
  .mt-100 { margin-top: 50px !important; }
  .mb-100 { margin-bottom: 50px !important; }
}
@media (max-width: 575px) {
  .layout-pt-lg { padding-top: 40px !important; }
  .layout-pb-lg { padding-bottom: 40px !important; }
  .pt-100 { padding-top: 30px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ------------------------------------------------
   VILLA COLLECTIONS SLIDER
   ------------------------------------------------ */
@media (max-width: 575px) {
  .roomCard.-type-3 .roomCard__content { padding: 16px !important; }
  .roomCard.-type-3 .roomCard__title   { font-size: 20px !important; }
  .roomCard.-type-3 .d-flex.x-gap-20  { flex-wrap: wrap; gap: 10px !important; }
}

/* ------------------------------------------------
   ROOMS & SUITES col-xl-7
   ------------------------------------------------ */
@media (max-width: 767px) {
  .col-xl-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* ------------------------------------------------
   LOCATIONS CARDS
   ------------------------------------------------ */
@media (max-width: 575px) {
  .cardImage.-type-1 { height: 300px !important; }
  .cardImage.-type-1 .cardImage__content { padding: 0 20px !important; }
  .cardImage.-type-1 .cardImage__button { opacity: 1 !important; pointer-events: auto !important; }
}

/* ------------------------------------------------
   TESTIMONIALS
   ------------------------------------------------ */
@media (max-width: 767px) {
  .col-xl-8.col-lg-10.col-9 {
    width: 100% !important; max-width: 100% !important;
    flex: 0 0 100% !important; padding: 0 !important;
  }
}

/* ------------------------------------------------
   BLOG CARDS
   ------------------------------------------------ */
@media (max-width: 480px) {
  .row.y-gap-30.x-gap-85 > [class*="col-"] {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}

/* ------------------------------------------------
   INSTAGRAM
   ------------------------------------------------ */
@media (max-width: 575px) {
  .row.y-gap-30 .w-1\/5 { width: 50% !important; }
}

/* ------------------------------------------------
   FOOTER
   ------------------------------------------------ */
@media (max-width: 575px) {
  .footer.-type-1 .footer__grid { grid-template-columns: 1fr !important; gap: 35px !important; }
  .footer.-type-1 .footer__newsletter { flex-wrap: wrap !important; }
  .footer.-type-1 .footer__newsletter input { width: 100% !important; border-radius: 6px 6px 0 0 !important; }
  .footer.-type-1 .footer__newsletter button { width: 16% !important; border-radius: 0 0 6px 6px !important; padding: 34px !important; }
  .footer.-type-1 .footer__bottom .row {  align-items: center !important; gap: 16px !important; }
}

/* ------------------------------------------------
   CONTACT FORM
   ------------------------------------------------ */
.form-row { display: flex; gap: 15px; }
.form-row .form-box { flex: 1 1 0; min-width: 0; }
.form-box { margin-bottom: 15px; }
.form-box input,
.form-box select,
.form-box textarea {
  width: 100%; padding: 14px 12px; border: 1px solid #ccc;
  border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;
}
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus { border-color: #122223; }

@media (max-width: 768px) {
  .form-row { flex-direction: column !important; gap: 0 !important; }
  form[action="thank-you.php"] { width: 100% !important; padding: 0 10px !important; }
}

/* ------------------------------------------------
   ALL PROPERTIES
   ------------------------------------------------ */
@media (max-width: 575px) {
  .roomCard.-type-1 .d-flex.justify-between.items-end {
    flex-direction: column !important; align-items: flex-start !important; gap: 4px !important;
  }
  .roomCard.-type-1 .roomCard__title { font-size: 22px !important; }
  .roomCard.-type-1 .d-flex.x-gap-20 { flex-wrap: wrap !important; gap: 8px !important; }
  .row.x-gap-60.y-gap-60 > .col-md-6 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}

/* ------------------------------------------------
   VILLA DETAIL
   ------------------------------------------------ */
@media (max-width: 767px) {
  #roomsGrid { grid-template-columns: 1fr !important; }
}
@media (max-width: 575px) {
  .row.x-gap-50.y-gap-20.justify-between > .col-sm-5 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}

/* SWIPER */
.swiper, .swiper-container { width: 100%; overflow: hidden; }

/* CTA */
@media (max-width: 575px) { .text-92 { font-size: 30px !important; } }

/* THANK YOU */
@media (max-width: 480px) {
  .box { padding: 30px 20px !important; margin: 15px !important; }
  .box h1 { font-size: 26px !important; }
}