/* styles.css - full stylesheet */

/* Page background */
:root{
  --page-bg: #ff4800;
  --menu-height-large: 70px;
  --menu-height-small: 35px;
  --form-bg: #fd9473;
  --accent: #f38e18;
}

* { box-sizing: border-box; }
html,body{
  margin:0;
  height:100%;
  background: var(--page-bg);
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

.top-menu{
  position: fixed;   /* changed from sticky */
  top: 0;
  left: 0;
  width: 100%;       /* ensure full width */
  z-index: 999;
  background: var(--page-bg);
  border-bottom: 0;
}

/* Inner wrapper to center items */
.menu-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1rem;
  padding: 0 20px;
}

/* Phone link common */
.phone-link, .phone-link:visited, .footer-phone, .footer-email{
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

/* Hamburger (small screens) */
.hamburger{
  display:none;
  width:30px;
  height:24px;
  border:0;
  background:transparent;
  padding:0;
  margin-right:auto;
  cursor:pointer;
}
.hamburger span{display:block;height:3px;background:#fff;margin:4px 0;border-radius:2px;}

/* Remove dashed outline, change color when active */
.hamburger:focus { outline:none; }
.hamburger.active span { background:#ccc; }

/* Main nav */
.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 2.5rem;
}

/* Main nav (default large screen styling) */
.main-nav a {
  color: #ffcc99; /* light orange for inactive links */
  font-weight: 700;
  text-decoration: none;
  text-transform: lowercase;
}

/* highlight the active/current page link */
.main-nav a.active {color: #fff; /* white for current page */ outline: none;}

/* Banner */
.banner{
  display:block;
  width:100%;
  overflow:hidden;
  background-color:#fff;
  margin-top: var(--menu-height-large); /* push down below fixed menu */
}
.banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Large screens: keep logo actual size (no scaling up) */
@media (min-width: 1051px){
  .banner img{
    max-width:none;
  }
}

/* Slideshow container: keep aspect ratio of 1000x400 */
.slideshow-wrap{ width:100%; background:#000; }
.slideshow{ width:100%; position:relative; overflow:hidden; aspect-ratio: 1000 / 400; }
.slides{
  display:flex;
  height:100%;
  width:100%;
  transition: transform 0.8s ease;
}
.slide{ width:100%; flex:0 0 100%; height:100%; object-fit:cover; }

/* Quote area */
.quote-area{
  height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}
.quote-area h2{ margin:0; font-weight:700; color:#fff; }
.quote-sub{ margin:0; color:#fff; opacity:0.95; }
.whatsapp-btn{
  display:inline-block;
  width:60%;
  max-width:420px;
  padding:10px 12px;
  text-align:center;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:#2fae4e; /* medium green */
  border-radius:6px;
}

/* Main area */
.main-area{ padding:20px 60px; max-width:1200px; margin:0 auto; }

/* Main title and paragraphs */
.main-title{text-align:center; font-weight:700; color:#fff; margin:10px 0; }
.main-paragraph{ color:#fff; text-align:justify; line-height:1.45; }
.main-paragraph a{color:#ffb637; font-weight: 900; }

/* White box */
.white-box{
  background:#fff;
  padding:20px;
  margin:20px 0;
}
.white-box-title{ color:#000; text-align:center; font-size:28px; font-weight:700; margin:6px 0 12px; }
.feature-list{ list-style:none; padding:0; margin:0; display:block; }
.feature-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:12px 0;
}

.bulletcont {max-width:602px; margin:20px auto; height:auto; display: flex; flex-wrap: nowrap;}
.bulletimg {float:left; height:40px; margin-right:10px;}
.bulletimg img{float:left;}
.bulletbox {float:left; height:auto;}
.bulletbox h3 {float:left; width:90%; margin:0; text-align:justify; font-size: 20px; color: #000;}
.bulletbox p {float:left; margin:0; text-align:justify; font-size: 14px; color: #000;}
p.blltboxcnt {width:100%; text-align:center; font-size: 16px; color: #000;}
p.blltboxcnt a {width:100%; text-align:center; font-size: 16px; color: #ff4800;}

/* white box footer text */
.white-box-footer{ text-align:center; color:#333; margin-top:12px; }
.white-box-footer a{color:#ff4800; font-weight:900;}

/* Where do we operate */
.operate-box{
  border:2px solid #000;
  background:transparent;
  padding:14px;
  margin:24px 0;
}
.operate-inner{ text-align:center; position:relative; }
.operate-logo{ position:absolute; top:8px; left:8px; width:48px; height:auto; }
.operate-inner h4{ margin:0 0 18px 0; font-weight:700; }
.towns-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap:12px;
  justify-content:center;
  max-width:750px;
  margin:0 auto;
  color:#fff;
  text-align:center;
  white-space:nowrap; /* keep on one line when possible */
}

/* Call panel */
.call-panel{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:12px 0;
  background:transparent;
}
.call-panel a{ color:#fff; text-decoration:none; font-weight:700; }

/* Ads area */
.ads-area{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  margin:20px 0 40px;
}
.ad{
  width:250px;
  height:444px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ad-inner{
  width:100%;
  padding:20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.ad-top{ font-size:22px; font-weight:700; color:#fff; margin:0; }
.ad-icon{ width:80px; height:auto; display:block; margin:0 auto; }
.ad-split{ width:80%; border:none; height:2px; background:#fff; margin:12px 0; }
.ad-bottom{ line-height:30px;  font-size:15px; font-weight:700; margin:0; color:#fff; }
.ad-bottom .orange-text{ color: var(--accent); padding:10px 0 0 0; line-height:30px; font-size:14px; font-weight:400; }

/* Footer */
.site-footer{
  background:#000;
  padding:18px 10px 24px;
  text-align:center;
}
.site-footer .footer-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.site-footer .footer-inner a{ color: var(--accent); text-decoration:none; font-weight:700; font-size:16px; }
.footer-image{ max-width:180px; margin-top:8px; }

/* --------------------
   Responsive rules
   -------------------- */

/* Default: large screens (min 1051px) */
@media (min-width: 1051px){
  .menu-inner{ height: var(--menu-height-large); }
  .phone-link{ order:0; font-size:16px; align-self:center; }
  .hamburger{ display:none; }
  .main-nav{ order:1; }
  /* place phone number centered above nav items - use flex column */
  .menu-inner{ flex-direction:column; align-items:center; gap:6px; padding:0 20px; }
/* Large screen spacing for nav links */
  .main-nav ul{
    gap: 150px;  /* increased spacing between links */
    display:flex;
    justify-content:center;
    align-items:center; }
  .phone-link{ font-weight:700; }
}

/* Small screens - up to 1050px */
@media (max-width: 1050px){
  body{ font-size:15px; }
  .menu-inner{ height: var(--menu-height-small); padding:0 12px; align-items:center; gap:8px; flex-direction:row; }
  .hamburger{ display:block; }
  .phone-link{ order:1; font-size:14px; margin-left:8px; }

  /* --- Dropdown menu fixed --- */
  .main-nav{
    position:absolute;
    top: var(--menu-height-small);
    left:0;
    background:#333;
    border:0px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .main-nav.open{ max-height:400px; }

  .main-nav ul{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:0;
    padding:0;
    gap:0;
  }
  .main-nav ul li{
    list-style:none;
  }
  .main-nav ul li a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:150px;
    height:50px;
    background:#333;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    text-transform:lowercase;
   }

/* Small screens adjust offset for smaller menu */
  .banner{
    margin-top: var(--menu-height-small);
  }

  /* Banner reduce height on small screen */
  .banner img{ 
    width:100%;
    height:auto;
    object-fit:contain; 
  }

  /* Slideshow height reduced by aspect-ratio automatically */
  .operate-logo{ width:40px; }

  .ads-area{ justify-content:center; gap:12px; }
}

/* On smaller screens, allow wrapping */
@media (max-width: 768px){
  .towns-grid{
    grid-template-columns: repeat(2, 1fr);
    white-space:normal; /* allow multi-line wrapping */
  }
}

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

/* Utility */
a:focus, button:focus { outline: 3px dashed rgba(255,255,255,0.6); outline-offset: 2px; }