/* =========================================================
   Absolute Comfort Home Services - Master Styles
   Colors are CSS variables so you can change site-wide fast.
   ========================================================= */

:root{
  --blue-dark: #0b1b2b;      /* Dark blue */
  --red-dark:  #8b1e1e;      /* Dark red */
  --white:     #ffffff;
  --gray-100:  #f6f7f9;
  --gray-200:  #e9ecef;
  --gray-700:  #4b5563;
  --black:     #000000;

  --accent: var(--red-dark);
  --brand: var(--blue-dark);

  --text-dark: #0f172a;
  --text-light: #e5e7eb;

  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);
  --shadow-md: 0 12px 30px rgba(0,0,0,.12);

  --topbar-height: 44px;
  --nav-height: 86px; /* thick logo area */
}

/* Reset / Base */
*{ box-sizing:border-box; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text-dark);
  background: var(--white);
}
a{ text-decoration:none; }
img{ max-width:100%; height:auto; }

/* =============================
   Topbar: 30/70 split with slant
   ============================= */

.topbar{
  position: relative;
  height: var(--topbar-height);
  background: var(--accent);  /* RIGHT 70% color (red) */
  color: var(--white);
  font-size: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Full-bleed LEFT 30% block with diagonal edge */
.topbar::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:35%;                 /* LEFT block width */
  background: var(--brand);  /* LEFT color (dark blue) */

  /* diagonal cut into the right side */
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 28px) 100%,
    0 100%
  );
  z-index:0;
}

.topbar-inner{
  position: relative;
  z-index: 1; /* makes text/icons sit above the split */
  width:100%;
  display:flex;
  align-items:center;
  height:100%;
}

.topbar-left{
  width:35%;
  font-weight:600;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RIGHT info area */
.topbar-right{
  width:65%;
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
  padding-left: 20px;
  height:100%;
}

.topbar .tb-item{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  color: var(--white);
  opacity:.95;
}
.topbar .tb-item i{
  color: var(--white);
  opacity:.9;
}

/* Responsive */
@media (max-width: 991px){
  .topbar{
    height:auto;
    padding:6px 0;
  }
  .topbar::before{
    width:100%;
    clip-path:none; /* remove diagonal on mobile */
  }
  .topbar-inner{
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .topbar-left,
  .topbar-right{
    width:100%;
    text-align:center;
    justify-content:center;
    padding: 4px 10px;
  }
  .topbar-right{
    flex-wrap:wrap;
    gap:10px;
  }
}


/* =============================
   Main Navbar (thick logo area)
   ============================= */
.navbar-wrap{
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 999;
}
.navbar{
  min-height: var(--nav-height);
}
.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color: var(--brand);
  font-size: 22px;
}

/* Logo for wide rectangular logos */
.navbar-brand .main-logo {
  height: 60px;            /* Adjust this if needed */
  width: auto;
  object-fit: contain;
}

/* Make navbar tall enough for a rectangular logo */
:root{
  --nav-height: 90px;      /* This gives a nice thick bar */
}

/* Align logo perfectly vertically */
.navbar-brand {
  display: flex;
  align-items: center;
}

/* Mobile scaling */
@media (max-width: 768px){
  .navbar-brand .main-logo {
    height: 48px;
  }
}

.navbar-brand img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.navbar-nav .nav-link{
  font-weight:600;
  color:#111827;
  padding: .6rem 1rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color: var(--accent);
}

.btn-accent{
  background: var(--accent);
  border: none;
  color: var(--white) !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
}

/* FIX THE HOVER STATE */
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active{
  background: var(--accent) !important;    /* stay same color */
  color: var(--white) !important;          /* stay white text */
  border: none !important;
  filter: brightness(0.72);                /* optional subtle shading */
  box-shadow: var(--shadow-md);
}


/* =============================
   Sections / helpers
   ============================= */
.section{
  padding: 80px 0;
}
.section-title{
  font-weight:800;
  font-size: 34px;
  margin-bottom: 12px;
}
.section-sub{
  color: var(--gray-700);
  margin-bottom: 34px;
}

/* Overlapping feature blocks (used on home) */
.feature-overlap{
  margin-top: -50px; /* overlaps hero */
  position: relative;
  z-index: 5;
}
.feature-card{
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  height: 100%;
  border: 1px solid var(--gray-200);
}
.feature-card .icon{
  width:48px; height:48px;
  border-radius: 10px;
  background: rgba(139,30,30,.08);
  display:grid; place-items:center;
  color: var(--accent);
  font-size: 22px;
  margin-bottom: 12px;
}
.feature-card h5{
  font-weight:800;
  margin-bottom: 6px;
}

/* Services cards */
.service-card{
  background: var(--white);
  border-radius: var(--radius-md);
  border:1px solid var(--gray-200);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  height:100%;
}
.service-card img{
  width:100%;
  height: 180px;
  object-fit: cover;
}
.service-card .sc-body{
  padding: 16px 18px 18px;
}
.service-card h6{
  font-weight:800;
  margin-bottom: 6px;
}
.service-card .read-more{
  color: var(--accent);
  font-weight:700;
  font-size: 14px;
}

/* =============================
   Video CTA - YouTube FULL cover
   ============================= */
.video-cta{
  position: relative;
  width: 100%;
  height: 500px;              /* set your section height */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background: #000;           /* fallback while video loads */
}

/* This wrapper fills the section */
.video-cta .video-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* THE COVER HACK:
   Make iframe oversized and centered */
.video-cta .video-bg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;               /* bigger than screen */
  height: 120vh;              /* bigger than section */
  transform: translate(-50%, -50%);
  pointer-events: none;       /* so clicks don't pause video */
}

/* Dark overlay above video */
.video-cta .overlay{
  position: absolute;
  inset: 0;
  background: rgba(11,27,43,.72);
  z-index: 2;
}

/* Text above overlay */
.video-cta .content{
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: 0 15px;
}

/* Mobile: reduce oversize so it still covers */
@media (max-width: 768px){
  .video-cta{
    height: 320px;
  }
  .video-cta .video-bg iframe{
    width: 200vw;
    height: 200vh;
  }
}

/* Testimonials */
.testimonial-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  border:1px solid var(--gray-200);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  height:100%;
}
.testimonial-card .quote{
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}
.testimonial-card .person{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.testimonial-card .avatar{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--gray-200);
  overflow:hidden;
}
.testimonial-card .name{
  font-weight:800;
}
.star{
  color: #f5b301;
  font-size: 14px;
}

/* Bottom CTA bar */
.cta-bar{
  background: var(--accent);
  color: var(--white);
  padding: 26px 0;
}
.cta-bar h5{
  font-weight:800;
  margin:0;
}

/* Footer */
.footer{
  background: #0a1420;
  color: var(--text-light);
  padding-top: 55px;
}
.footer a{ color: var(--text-light); opacity:.9; }
.footer a:hover{ color: var(--white); opacity:1; }

.footer .footer-logo{
  max-width: 120px;
  margin-bottom: 14px;
}
.footer .col-title{
  font-weight:800;
  margin-bottom: 12px;
  color: var(--white);
}
.footer .gallery img{
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  margin: 3px;
  border:1px solid rgba(255,255,255,.08);
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top: 38px;
  padding: 16px 0;
  font-size: 13px;
  color: rgba(229,231,235,.85);
}

/* Utilities */
.bg-light-gray{ background: var(--gray-100); }

/* Responsive tweaks */
@media (max-width: 991px){
  :root{ --nav-height: 74px; }
  .topbar{ height:auto; padding:6px 0; }
  .topbar .slogan-wrap{ width:100%; justify-content:center; }
  .topbar .topbar-right{ width:100%; justify-content:center; padding:6px 0 0; }
  .feature-overlap{ margin-top: 20px; }
}

/* =============================
   HERO height + centered caption
   ============================= */

#heroCarousel .carousel-item{
  height: 700px;            /* <-- your target height */
}

#heroCarousel .carousel-item img{
  height: 700px;            /* match container */
  object-fit: cover;
}

/* Center caption perfectly */
#heroCarousel .carousel-caption{
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;         /* keeps text readable */
  padding: 0 15px;
}

/* Footer Quick Links - 2 column layout */
.footer .quick-links{
  columns: 2;                    /* create 2 columns */
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 32px;              /* space between columns */
  padding-left: 0;
  margin: 0;
}

.footer .quick-links li{
  break-inside: avoid;           /* stops links from splitting awkwardly */
  margin-bottom: 6px;
}

.footer .quick-links a{
  color: var(--text-light);
  opacity: .9;
}

.footer .quick-links a:hover{
  color: var(--white);
  opacity: 1;
}

/* On small screens → return to single column */
@media (max-width: 768px){
  .footer .quick-links{
    columns: 1;
  }
}

/* =============================
   Coupons Page (fixed layout)
   ============================= */

.coupon-card{
  background: var(--white);
  border: 2px dashed var(--accent);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Force the split area to fill the whole card */
.coupon-card{
  display: flex;
  flex-direction: column;
}

.coupon-inner{
  flex: 1;
  height: 100%;
}

/* Make BOTH sides stretch full height */
.coupon-left,
.coupon-right{
  height: 100%;
}


/* Badge stays the same */
.coupon-badge{
  position: absolute;
  top: 14px;
  right: -40px;
  background: var(--accent);
  color: var(--white);
  padding: 6px 55px;
  transform: rotate(35deg);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

/* GRID SPLIT = always equal height columns */
.coupon-inner{
  display: grid;
  grid-template-columns: 35% 65%;
  min-height: 240px;
}

/* LEFT PANEL = full height always */
.coupon-left{
  background: var(--brand);
  color: var(--white);
  padding: 28px 18px;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Clean perforation divider */
.coupon-left{
  position: relative;
}
.coupon-left::after{
  content:"";
  position:absolute;
  top:0; right:-18px; bottom:0;
  width:36px;
  background:
    radial-gradient(circle at 0 18px, transparent 17px, var(--brand) 18px);
  background-size: 36px 36px;
}

/* RIGHT PANEL */
.coupon-right{
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Text styling */
.coupon-amount{
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.coupon-subtitle{
  font-weight: 600;
  opacity: .9;
  margin-top: 6px;
}

.coupon-title{
  font-weight: 900;
  margin-bottom: 10px;
}

.coupon-list{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.coupon-list li{
  margin-bottom: 6px;
  color: #111827;
  font-weight: 600;
}

.coupon-list i{
  color: var(--accent);
}

.coupon-fineprint{
  font-size: 13px;
  color: var(--gray-700);
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 768px){
  .coupon-inner{
    grid-template-columns: 1fr;
  }
  .coupon-left::after{
    display:none;
  }
}

/* =============================
   Sitemap Page Styling
   ============================= */

.sitemap-wrap{
  background: var(--white);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #e5e7eb;
}

.sitemap-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom: 1px solid #eef0f3;
  padding-bottom: 12px;
}

.sitemap-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:12px;
  text-decoration:none;
  transition: all .18s ease;
  height:100%;
}

.sitemap-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.sitemap-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--brand);
  color: var(--white);
  border-radius:10px;
  font-size:20px;
  flex:0 0 48px;
}

.sitemap-text .title{
  font-weight:800;
  color:#0b1320;
  font-size:18px;
  line-height:1.2;
}

.sitemap-text .url{
  font-size:13px;
  color:#6b7280;
  margin-top:2px;
}

.sitemap-arrow{
  margin-left:auto;
  color: var(--accent);
  font-size:16px;
  opacity:.9;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .sitemap-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}