/* areas-template.css */
:root {
  --bg:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#0b4a8f;
  --brand2:#0f7ae5;
  --border:#e5e7eb;
  --alt:#f8fafc;
}

*{box-sizing:border-box;}
body{margin:0;font-family:'PT Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:1100px;margin:0 auto;padding:0 16px;}

/* Header */
.site-header {
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.header-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1150px;
  margin:0 auto;
  padding:12px 20px;
}
.brand {
  display:flex;
  align-items:center;
  height:60px;
  overflow:visible;
}
.brand img {
  height:50px;
  width:auto;
  object-fit:contain;
  transition:transform .2s ease;
}
.brand img:hover {transform:scale(1.05);}

/* Desktop Navigation */
.nav-list {
  list-style:none;
  display:flex;
  align-items:center;
  gap:22px;
  margin:0;
  padding:0;
}
.nav-list li a {
  color:var(--brand);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:9999px;
  transition:all .25s ease;
}
.nav-list li a:hover {
  background:var(--brand2);
  color:#fff;
  border-color:var(--brand2);
}
.nav-list .book-online {
  background:var(--brand);
  color:#fff!important;
  border-radius:9999px;
  font-weight:700;
}
.nav-list .book-online:hover {background:var(--brand2);}

/* Mobile Menu */
.menu-toggle {
  background:none;
  border:none;
  font-size:1.7rem;
  color:var(--brand);
  display:none;
  cursor:pointer;
}
@media (max-width:850px){
  .menu-toggle {display:block;}
  .main-nav {
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    display:none;
  }
  .main-nav.open {display:block;}
  .nav-list {
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:18px 0;
  }
  .nav-list li a {
    width:80%;
    justify-content:center;
    border:1px solid var(--border);
  }
  .brand img {height:46px;}
}

/* HERO — updated with 20% height reduction */
/* HERO WRAPPER – adds border + makes image smaller width */
.hero-banner {
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 90%;               /* Not full width – reduce hero size */
  margin: 20px auto;            /* Center it */
  border: 4px solid #e0e0e0;    /* Frame border */
  border-radius: 12px;          /* Smooth rounded corners */
  overflow: hidden;             /* Clip overlay to border */
  background: #000;             /* Prevent white gaps behind image */
}

/* IMAGE – FULLY VISIBLE (NO CROPPING) */
.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* Show 100% of appliance */
  object-position: center;
  display: block;
  background-color: #000;       /* Fills behind any unused space */
}

/* OVERLAY */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.2) 20%,
    rgba(0,0,0,.6) 100%
  );
  pointer-events: none;
}

/* TEXT CONTENT */
.hero-content {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  padding: 24px;
}

.hero-content h1 {
  font-size: 2rem;
  margin-bottom: .4em;
}

.hero-content p {
  font-size: 1.15rem;
  background: rgba(0,0,0,.35);
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
}

/* MOBILE */
@media(max-width:700px){
  .hero-banner {
    max-width: 96%;             /* slightly wider on phones */
    margin-top: 10px;
  }
  .hero-content h1 { font-size: 1.6rem; }
  .hero-content p { font-size: 1rem; padding: 6px 12px; }
}


/* Sections */
.section{padding:40px 0;}
.section--alt{background:var(--alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
h2{color:var(--brand);margin-top:0;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px;}
.card{border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;}
.card h3{margin:12px 14px 6px;}
.card p{margin:0 14px 14px;color:var(--muted);}
.card i{color:var(--brand2);margin-right:6px;}

/* CTA */
.cta{background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;text-align:center;padding:40px 20px;}
.cta h2{color:#fff;margin-top:0;}
.cta .btn{background:#fff;color:var(--brand);border:none;}
.cta .btn:hover{background:#eef6ff;}

/* Map */
iframe{border:0;width:100%;height:420px;border-radius:6px;}

/* Footer */
footer{background:#f9fafb;border-top:1px solid var(--border);color:#475569;padding:30px 0;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;}
.footer-grid h3{color:var(--brand);}
.links{list-style:none;padding:0;margin:0;}
.links li{margin:6px 0;}
.links i{margin-right:6px;color:var(--brand2);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}}


/* FAQ */
.faq details {background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:10px;padding:14px 18px;transition:box-shadow .25s ease;}
.faq details:hover {box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.faq summary {cursor:pointer;font-weight:600;color:var(--brand);outline:none;}
.faq summary::marker {color:var(--brand2);}
.faq p {margin:10px 0 0;color:var(--muted);line-height:1.6;}

/* Booking */
.cta {background-color:#0b4a8f;color:#fff;text-align:center;padding:60px 20px;}
.cta h2 {font-size:2rem;color:#fff;margin-bottom:10px;}
.cta p {font-size:1.1rem;margin-bottom:30px;}
.cta-phone {color:#fff;font-weight:700;text-decoration:none;}
.cta-phone:hover {color:#cce4ff;text-decoration:underline;}

.book-btn {display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;background-color:#f8f9fa;color:#0b4a8f!important;padding:16px 36px;border-radius:50px;border:2px solid #ffffff;transition:all .25s ease-in-out;box-shadow:0 4px 10px rgba(0,0,0,0.15);}
.book-btn i {font-size:1.25rem;color:#0b4a8f;}
.book-btn:hover {background-color:#ffffff;color:#0f7ae5!important;border-color:#0f7ae5;transform:translateY(-2px);box-shadow:0 6px 14px rgba(255,255,255,0.3);}
@media(max-width:600px){.cta h2{font-size:1.6rem;}.book-btn{font-size:1rem;padding:14px 26px;}}

.freephone-wrap{text-align:center;margin:40px auto;}
.freephone-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background-color:#0b4a8f;color:#fff!important;font-weight:700;font-size:1.2rem;padding:16px 36px;border-radius:50px;text-decoration:none;border:2px solid #0b4a8f;box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:all 0.25s ease-in-out;}
.freephone-btn:hover{background-color:#0f7ae5;border-color:#0f7ae5;box-shadow:0 6px 15px rgba(15,122,229,0.4);transform:translateY(-2px);}
.freephone-btn i{font-size:1.25rem;color:#fff;}
@media(max-width:600px){.freephone-btn{width:85%;font-size:1.05rem;padding:14px 20px;}}

/* ================================
   ROTATOR — NICELY FRAMED BOX + FADE ANIMATION
================================= */

/* OUTER BOX — border + shadow + proper container */


/* INNER CONTAINER FOR SLIDES */
#area-rotator {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* EACH SLIDE — fade animation compatible */
#area-rotator .rotator-slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  inset: 0;   /* top:0, left:0, width:100%, height:100% */
  width: 100%;
}

#area-rotator .rotator-slide.active {
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* IMAGE AREA */
.rotator-image {
  width: 100%;
  aspect-ratio: 16 / 7.2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f9f9f9;
}

/* CAPTION BOX */
.rotator-caption {
  text-align: center;
  padding: 25px 15px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.rotator-caption h2 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  color: #0b4a8f;
  font-weight: 700;
}

.rotator-caption p {
  font-size: 1rem;
  margin: 0;
  color: #444;
  line-height: 1.6;
}

/* RESPONSIVE */
@media(max-width:768px){
  .rotator-image { aspect-ratio: 3 / 4; }
  .rotator-caption { padding: 20px 10px; }
  .rotator-caption h2 { font-size: 1.4rem; }
  .rotator-caption p { font-size: 0.9rem; }
}

/* ================================
   BRAND TEXT FADE ANIMATION
================================= */
#rotatingBrandsText {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

#rotatingBrandsText.fade-in {
  opacity: 1;
}



/* OUTER BOX — border + shadow + proper container */
.rotator-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  border: 4px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: #fff;
  overflow: hidden;
  position: relative;
}



/* FINAL ROTATOR CSS OVERRIDE */
.rotator-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  border: 4px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: #fff;
  overflow: hidden;
  position: relative;
}

#area-rotator {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#area-rotator .rotator-slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  inset: 0;
}

#area-rotator .rotator-slide.active {
  opacity: 1;
  position: relative;
}

.rotator-image {
  width: 100%;
  aspect-ratio: 16 / 7.2;
  background-size: cover;
  background-position: center;
}

.rotator-caption {
  text-align: center;
  padding: 25px 15px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.rotator-caption h2 {
  font-size: 1.8rem;
  color: #0b4a8f;
  margin-bottom: .5rem;
}

.rotator-caption p {
  font-size: 1rem;
  color: #444;
}


/* ================================
   ROTATING AREAS (SEO BOX)
================================ */
.rotating-areas {
  max-width: 800px;
  margin: 20px auto;
  padding: 14px 20px;
  background: #f8fafc;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  text-align: center;
  font-size: 1.15rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.rotating-areas strong {
  color: var(--brand);
}

#rotatingArea {
  color: var(--brand2);
  font-weight: 700;
  transition: opacity .4s ease-in-out;
}


/* ================================
   ROTATING BRANDS (SEO BOX)
================================ */
.rotating-brands {
  max-width: 900px;
  margin: 30px auto;
  padding: 16px 20px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  text-align: center;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.rotating-brands strong {
  color: var(--brand);
}

#rotatingBrandsText {
  color: var(--brand2);
  font-weight: 700;
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

#rotatingBrandsText.fade-in {
  opacity: 1;
}