/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: Arial, sans-serif;
}



.instagram-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 31, 58, 0.85);  /*tu azul */
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.instagram-float img {
  width: 26px;
  height: 26px;
}

.instagram-float:hover {
  transform: scale(1.1);
  background: #0B1F3A;
}
/* ===== HEADER ===== */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 40px;
  background: rgba(10,18,40,.85);
  backdrop-filter: blur(10px);
}

/* ===== LOGO ===== */
.logo{
  display:flex;
  align-items:center;
}

.logo img{
  height: 52px;
  display:block;
}

/* ===== NAV DESKTOP ===== */
.nav-links{
  list-style:none;
  display:flex;
  gap:25px;
  align-items:center;
}

.nav-links li{
  position:relative;
}

.nav-links a{
  color:white;
  text-decoration:none;
  font-weight:500;
  padding:8px 12px;
  border-radius:8px;
  display:inline-block;
}

.nav-links a:hover{
  background:rgba(255,255,255,.1);
}

/* Botón */
.btn-contacto{
  background:#0b3aa8;
  padding:10px 18px;
  border-radius:12px;
}

/* ===== SUBMENÚS POR CLICK ===== */
.submenu{
  position:absolute;
  top:100%;
  left:0;
  background: rgba(10,18,40,.95);
  list-style:none;
  padding:10px;
  border-radius:12px;
  min-width:180px;
  display:none;
}

.submenu li{
  margin-bottom:5px;
}

.submenu li:last-child{
  margin-bottom:0;
}

/* Desactiva hover */
.has-submenu:hover .submenu{
  display:none;
}

/* Abre cuando el LI tiene .open */
.has-submenu.open > .submenu{
  display:block;
}

/* ===== HAMBURGER ANIMADO ===== */
.hamburger{
  width: 22px;
  height: 16px;
  position: relative;
  cursor: pointer;
  display: none; /* oculto en desktop */
  z-index: 3002;
}

.hamburger span{
  position: absolute;
  width: 100%;
  height: 2px;
  background: white;
  left: 0;
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1){ top: 0; }
.hamburger span:nth-child(2){ top: 7px; }
.hamburger span:nth-child(3){ bottom: 0; }

/* Estado X */
.hamburger.active span:nth-child(1){
  transform: rotate(45deg);
  top: 7px;
}

.hamburger.active span:nth-child(2){
  opacity: 0;
}

.hamburger.active span:nth-child(3){
  transform: rotate(-45deg);
  bottom: 7px;
}

/* ===== HERO ===== */
.hero img{
  width:100%;
  height:100vh;
  object-fit:cover;
}

/* ===== MOBILE ===== */
@media (max-width:900px){

  /* Centra logo */
  .header{
    justify-content:center;
    position:relative;
  }

  .logo{
    margin:0 auto;
  }

  /* Hamburguesa visible y a la derecha */
  .hamburger{
    display:block;
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
  }

  /* Menú full screen */
  .nav-links{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;

    background: rgba(10,18,40,.95);
    backdrop-filter: blur(15px);

    display:none;
    flex-direction: column;
    justify-content:flex-start;
    align-items:flex-start;

    padding: 95px 25px 25px;
    gap: 16px;

    overflow-y:auto;
  }

  .nav-links.active{
    display:flex;
  }

  .nav-links li{
    width:100%;
  }

  .nav-links a{
    width:100%;
    display:block;
  }

  .submenu{
    position: static;
    background: rgba(255,255,255,.06);
    padding: 12px;
    border-radius: 14px;
    margin-top: 8px;
  }
}


/* ========== ===== ===== ===== ===== ===== =====  COLLECTIONS SECTION ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

.collections{
  padding:120px 20px 80px;
  background:#f6f7fb; /* fondo claro elegante */
  text-align:center;
}

.collections-container{
  max-width:1100px;
  margin:0 auto;
}

.collections h2{
  font-size:42px;
  font-weight:600;
  color:#1f3654; /* tu azul */
  margin-bottom:15px;
}

.collections p{
  font-size:18px;
  color:#555;
  margin-bottom:50px;
}

/* GRID */
.collections-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

/* BOTONES */
.collection-btn{
  display:block;
  padding:18px 20px;
  background:#1f3654;
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-weight:500;
  transition: all 0.3s ease;
  letter-spacing:0.5px;
}

/* Botones anchos */
.collection-btn.wide{
  grid-column: span 2;
}

/* Hover elegante */
.collection-btn:hover{
  background:#082c7a;
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

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

  .collections h2{
    font-size:32px;
  }

  .collections-grid{
    grid-template-columns:1fr;
  }

  .collection-btn.wide{
    grid-column: span 1;
  }
}





/* =====  =====  =====  =====  =====  =====  =====  =====  =====  ===== PROPERTIES ===== ===== ===== ===== ===== ===== =====  ===== ===== =====  ===== ===== */











/* ===== PROPERTIES (contenedor como en la imagen 2) ===== */
.properties{
  padding: 110px 0 80px;
  background: #f6f7fb;
}

.properties-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.properties-title{
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 600;
  color: #1f3654;
  margin: 0 0 12px;
}

.properties-sub{
  font-size: 18px;
  color: #6e7781;
  margin: 0 0 46px;
}

.properties-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 900px){
  .properties-grid{
    grid-template-columns: 1fr;
  }

  .properties-title{
    font-size: 42px;
  }
}

/* Para que el anchor no “juegue raro” con el tamaño */
.property-link{
  display: block;
  width: 100%;
}




/* ===============================
   LUXURY PROPERTY CARD STYLE
================================ */

/* ===============================
   CARD
================================ */

.luxury-card{
  background: #fff;
  border-radius: 14px; /* tamaño correcto */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}

.luxury-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}


/* ===============================
   IMAGEN (TAMAÑO EXACTO)
================================ */

.property-media{
  height: 240px; /* ← tamaño correcto como tu segunda imagen */
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background:#fff;
}

.property-track{
  width: 100%;
  height: 100%;
}

.property-track img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  display: block;
}


/* ===============================
   CONTENIDO
================================ */

.luxury-body{
  text-align: center;
  padding: 22px 18px 24px; /* tamaño correcto */
}

.luxury-name{
  font-family: 'Playfair Display', serif;
  font-size: 26px; /* tamaño correcto */
  font-weight: 500;
  margin: 0 0 14px;
  letter-spacing: .4px;
  color: #1e2d3d;
}


/* ===============================
   META LINE
================================ */

.luxury-meta-line{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  font-size: 15px;
  color: #5f6c76;

  margin-bottom: 8px;
}

.luxury-meta-line span{
  display: flex;
  align-items: center;
  gap: 6px;
}

.luxury-meta-line span:not(:last-child)::after{
  content: "|";
  margin-left: 12px;
  color: #c4c4c4;
}

.luxury-meta-line i{
  font-size: 14px;
  color: #6b7785;
}


/* ===============================
   UBICACION
================================ */

.luxury-location{
  font-size: 16px;
  color: #7a8893;
  margin-top: 6px;
}



/* =====  =====  =====  =====  =====  =====  =====  =====  =====  ===== CUANDO SE LE DA CLICK A LA PROPIEDAD ===== ===== ===== ===== ===== ===== =====  ===== ===== =====  ===== ===== */
.property-link{
  text-decoration:none;
  color:inherit;
}


.hero {
  position: relative;
  height: 90vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  top: 28%;
  transform: translateY(-50%);
}

.hero-content h1 {
  font-size: 48px;
  font-family: 'Playfair Display', serif;
}

.hero-content p {
  font-size: 18px;
  letter-spacing: 2px;
}



/* =========================
   REVIEWS SECTION
========================= */
.reviews-section{
  padding: 70px 20px;
  background: #f8f8f8;
}

.reviews-container{
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-title{
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  color: #1f3654;
  margin-bottom: 10px;
}

.reviews-subtitle{
  text-align: center;
  font-size: 17px;
  color: #6e7781;
  margin-bottom: 45px;
}

.reviews-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.review-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 25px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}

.review-stars{
  color: #d4a017;
  font-size: 18px;
  margin-bottom: 12px;
}

.review-text{
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 18px;
}

.review-author{
  font-weight: 700;
  color: #1f3654;
  font-size: 15px;
}

.review-service{
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: #0b3aa8;
  background: rgba(11,58,168,0.08);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}

/* =========================
   REVIEW BUTTON
========================= */
.review-btn-wrap{
  text-align: center;
  margin-top: 35px;
}

.review-btn{
  display: inline-block;
  background: #1f3654;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.review-btn:hover{
  background: #0b3aa8;
  transform: translateY(-2px);
}

//* =========================
   REVIEWS SECTION
========================= */
.reviews-section{
  padding: 90px 20px;
  background: #f7f7f7;
}

.reviews-container{
  max-width: 1250px;
  margin: 0 auto;
}

.reviews-title{
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  color: #1f3654;
  margin-bottom: 10px;
}

.reviews-subtitle{
  text-align: center;
  font-size: 18px;
  color: #6e7781;
  margin-bottom: 45px;
}

.reviews-grid{
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 8px 6px 18px;
  -webkit-overflow-scrolling: touch;
}

.reviews-grid::-webkit-scrollbar{
  height: 10px;
}

.reviews-grid::-webkit-scrollbar-track{
  background: #e8ebf0;
  border-radius: 999px;
}

.reviews-grid::-webkit-scrollbar-thumb{
  background: #c5ccd6;
  border-radius: 999px;
}

.review-card{
  flex: 0 0 480px;
  max-width: 480px;
  min-height: 235px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.06);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.review-stars{
  font-size: 24px;
  color: #d4a017;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.review-text{
  font-size: 17px;
  line-height: 1.75;
  color: #1f2d3d;
  margin: 0 0 18px;
}

.review-author{
  font-size: 16px;
  font-weight: 800;
  color: #1f3654;
  margin-bottom: 6px;
}

.review-property{
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #5f6b7a;
  font-weight: 600;
}

.review-service{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef2f7;
  color: #0b3aa8;
  font-size: 14px;
  font-weight: 700;
}

.review-btn-wrap{
  margin-top: 26px;
  text-align: center;
}

.review-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  border: none;
  background: #1f3654;
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.review-btn:hover{
  background: #0b3aa8;
  transform: translateY(-1px);
}

/* =========================
   REVIEW FORM MODAL
========================= */
.review-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.review-modal.active{
  display: flex;
}

.review-modal-box{
  background: #fff;
  width: 100%;
  max-width: 560px;
  border-radius: 22px;
  padding: 30px 24px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: reviewFadeIn 0.25s ease;
}

@keyframes reviewFadeIn{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.review-close{
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: #666;
}

.review-form-title{
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  color: #1f3654;
  margin-bottom: 8px;
}

.review-form-subtitle{
  font-size: 15px;
  color: #6e7781;
  margin-bottom: 24px;
}

.review-form .form-group{
  margin-bottom: 16px;
}

.review-form label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1f3654;
  margin-bottom: 7px;
}

.review-form input,
.review-form select,
.review-form textarea{
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d9dfe7;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus{
  border-color: #0b3aa8;
  box-shadow: 0 0 0 3px rgba(11,58,168,0.10);
}

.review-form textarea{
  min-height: 120px;
  resize: vertical;
}

.review-submit{
  width: 100%;
  border: none;
  background: #1f3654;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.review-submit:hover{
  background: #0b3aa8;
  transform: translateY(-1px);
}

/* =========================
   STAR SELECTOR
========================= */
.star-rating{
  display: flex;
  gap: 8px;
  font-size: 28px;
  color: #d0d0d0;
  cursor: pointer;
  user-select: none;
}

.star-rating .star.active{
  color: #d4a017;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px){
  .reviews-section{
    padding: 55px 16px;
  }

  .reviews-title{
    font-size: 30px;
  }

  .reviews-subtitle{
    font-size: 15px;
    margin-bottom: 35px;
  }

  .reviews-grid{
    gap: 18px;
    padding-bottom: 14px;
  }

  .review-card{
    flex: 0 0 88%;
    max-width: 88%;
    min-height: auto;
    padding: 20px 18px;
  }

  .review-text{
    font-size: 16px;
    line-height: 1.65;
  }

  .review-modal-box{
    padding: 24px 18px;
    border-radius: 18px;
  }

  .review-form-title{
    font-size: 24px;
  }
}












/* =========================
   REVIEWS SECTION
========================= */
.reviews-section{
  padding: 90px 20px;
  background: #f7f7f7;
}

.reviews-container{
  max-width: 1250px;
  margin: 0 auto;
}

.reviews-title{
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  color: #1f3654;
  margin-bottom: 10px;
}

.reviews-subtitle{
  text-align: center;
  font-size: 18px;
  color: #6e7781;
  margin-bottom: 45px;
}

/* =========================
   REVIEWS GRID
========================= */
.reviews-grid{
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 8px 6px 18px;
  -webkit-overflow-scrolling: touch;
}

.reviews-grid::-webkit-scrollbar{
  height: 10px;
}

.reviews-grid::-webkit-scrollbar-track{
  background: #e8ebf0;
  border-radius: 999px;
}

.reviews-grid::-webkit-scrollbar-thumb{
  background: #c5ccd6;
  border-radius: 999px;
}

.review-card{
  flex: 0 0 480px;
  max-width: 480px;
  min-height: 235px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.06);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.review-stars{
  font-size: 24px;
  color: #d4a017;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.review-text{
  font-size: 17px;
  line-height: 1.75;
  color: #1f2d3d;
  margin: 0 0 18px;
}

.review-author{
  font-size: 16px;
  font-weight: 800;
  color: #1f3654;
  margin-bottom: 6px;
}

.review-property{
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #5f6b7a;
  font-weight: 600;
}

.review-service{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef2f7;
  color: #0b3aa8;
  font-size: 14px;
  font-weight: 700;
}

/* =========================
   REVIEW BUTTONS
========================= */
.review-btn-wrap{
  margin-top: 26px;
  text-align: center;
}

.review-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  border: none;
  background: #1f3654;
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.review-btn:hover{
  background: #0b3aa8;
  transform: translateY(-1px);
}

/* =========================
   REVIEW FORM MODAL
========================= */
.review-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.review-modal.active{
  display: flex;
}

.review-modal-box{
  background: #fff;
  width: 100%;
  max-width: 560px;
  border-radius: 22px;
  padding: 30px 24px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: reviewFadeIn 0.25s ease;
}

@keyframes reviewFadeIn{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.review-close{
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: #666;
}

.review-form-title{
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  color: #1f3654;
  margin-bottom: 8px;
}

.review-form-subtitle{
  font-size: 15px;
  color: #6e7781;
  margin-bottom: 24px;
}

.review-form .form-group{
  margin-bottom: 16px;
}

.review-form label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1f3654;
  margin-bottom: 7px;
}

.review-form input,
.review-form select,
.review-form textarea{
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d9dfe7;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus{
  border-color: #0b3aa8;
  box-shadow: 0 0 0 3px rgba(11,58,168,0.10);
}

.review-form textarea{
  min-height: 120px;
  resize: vertical;
}

.review-submit{
  width: 100%;
  border: none;
  background: #1f3654;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.review-submit:hover{
  background: #0b3aa8;
  transform: translateY(-1px);
}

/* =========================
   STAR SELECTOR
========================= */
.star-rating{
  display: flex;
  gap: 8px;
  font-size: 28px;
  color: #d0d0d0;
  cursor: pointer;
  user-select: none;
}

.star-rating .star.active{
  color: #d4a017;
}

/* =========================
   REVIEWS IN ANOTHER PAGE
========================= */
.reviews-another-page{
  padding-top: 20px;
}

.another-page-grid{
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 8px 6px 18px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.another-page-grid::-webkit-scrollbar{
  height: 10px;
}

.another-page-grid::-webkit-scrollbar-track{
  background: #e8ebf0;
  border-radius: 999px;
}

.another-page-grid::-webkit-scrollbar-thumb{
  background: #c5ccd6;
  border-radius: 999px;
}

.another-page-card{
  flex: 0 0 420px;
  max-width: 420px;
  min-height: auto;
  padding: 14px;
  scroll-snap-align: start;
  cursor: pointer;
}

.another-page-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

/* =========================
   UPLOAD BLOCK
========================= */
.upload-review-box{
  max-width: 700px;
  margin: 0 auto;
}

.upload-review-box input[type="file"]{
  width: 100%;
  padding: 12px;
  border: 1px solid #d9dfe7;
  border-radius: 12px;
  background: #fff;
}

/* =========================
   LIGHTBOX ANOTHER PAGE
========================= */
.another-page-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.86);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
}

.another-page-lightbox.active{
  display: flex;
}

.another-page-lightbox-inner{
  position: relative;
  max-width: 95vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.another-page-lightbox img{
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.another-page-lightbox-close{
  position: absolute;
  top: -14px;
  right: -6px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #1f3654;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* =========================
   DESKTOP
========================= */
@media (min-width: 901px){
  .another-page-grid{
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
  }

  .another-page-card{
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  .reviews-section{
    padding: 55px 16px;
  }

  .reviews-title{
    font-size: 30px;
  }

  .reviews-subtitle{
    font-size: 15px;
    margin-bottom: 35px;
  }

  .reviews-grid{
    gap: 18px;
    padding-bottom: 14px;
  }

  .review-card{
    flex: 0 0 88%;
    max-width: 88%;
    min-height: auto;
    padding: 20px 18px;
  }

  .review-text{
    font-size: 16px;
    line-height: 1.65;
  }

  .review-modal-box{
    padding: 24px 18px;
    border-radius: 18px;
  }

  .review-form-title{
    font-size: 24px;
  }

  .another-page-grid{
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 8px 4px 18px;
    gap: 18px;
  }

  .another-page-card{
    flex: 0 0 86%;
    max-width: 86%;
    padding: 10px;
    border-radius: 18px;
  }

  .another-page-img{
    border-radius: 12px;
  }

  .another-page-lightbox{
    padding: 18px 10px;
  }

  .another-page-lightbox img{
    max-width: 96vw;
    max-height: 86vh;
    border-radius: 14px;
  }

  .another-page-lightbox-close{
    top: -10px;
    right: 0;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}





.hero-content h1 {
  font-size: 48px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.28);
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 26px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.95);
  text-transform: capitalize;
  text-shadow: 0 3px 14px rgba(0,0,0,0.22);
}

@media (max-width: 768px){
  .hero-content h1{
    font-size: 34px;
    letter-spacing: 2px;
  }

  .hero-content p{
    font-size: 20px;
    letter-spacing: 2px;
  }
}

.hero-content p {
  font-size: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 3px 14px rgba(0,0,0,0.22);
}