/*
---------------------------------------------
Full
---------------------------------------------
*/
/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Tell the browser to keep some space above anchored sections */
:root { --header-height: 80px; } /* adjust to your header’s real height */

/* Most of your sections use .section; give them an anchor offset */
.section,
#home, #service, #why, #process, #gallery, #video, #faqs, #comment, #contact {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* On small screens your header is often taller — increase the offset */
@media (max-width: 576px) {
  :root { --header-height: 100px; } /* e.g. logo + hamburger row height */
}

/* Anchor offset for sticky header (adjust 90px to your header height) */
:root { --header-offset: 90px; }
.section, #home, #service, #why, #process, #gallery, #video, #faqs, #comment, #contact {
  scroll-margin-top: var(--header-offset);
}
html {
  scroll-behavior: smooth; /* native smooth scroll */
}

/*
---------------------------------------------
icon
---------------------------------------------
*/

/* Header (if you add any FA icons there) */
.header-area i.fa,
.header-area i[class^="fa"]{
  background:#99ddcc;
  color:#000;
  border-radius:50%;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
}

/*
---------------------------------------------
Footer
---------------------------------------------
*/

/* Footer social icons */
footer .under-footer ul li a i{
  background:#99ddcc;
  color:#000;
  border-radius:50%;
  width:36px; height:36px;
  line-height:36px;      /* for themes using line-height */
  display:inline-flex; align-items:center; justify-content:center;
}

/* Make page full height */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Let main content grow to fill space */
body > *:not(footer) {
  flex: 1 0 auto;
}

/* Footer sticks to bottom */
footer {
  flex-shrink: 0;
  background: #222;   /* keep your footer background */
  color: #fff;
  padding: 30px 0;
}


/*
---------------------------------------------
Menu Bar
---------------------------------------------
*/
.header-area header-sticky{
    color: #fff;
}
/* =Header color override (black/white/green) =*/

/* Base + sticky header backgrounds */
.header-area,
.header-area .main-nav,
.header-area.header-sticky,
.background-header {
  background: #000 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* Top-level links: default white */
.header-area .main-nav .nav > li > a {
  color: #fff !important;
  transition: color .2s ease;
}

/* Hover/active: green highlight */
.header-area .main-nav .nav > li > a:hover,
.header-area .main-nav .nav > li > a.active,
.background-header .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover > a {
  color: #99ddcc !important;
}

/* Hamburger lines (desktop & sticky) */
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after,
.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff !important;
}

/* Submenu colors (if enabled) */
.header-area .main-nav .submenu ul {
  background: #000 !important;
  border-color: #222 !important;
}
.header-area .main-nav .submenu li a {
  color: #fff !important;
  background: #000 !important;
}
.header-area .main-nav .submenu li a:hover {
  color: #99ddcc !important;
}

/* Mobile menu overrides */
@media (max-width: 767px) {
  .header-area {
    background: #000 !important;
  }
  .header-area .main-nav .nav {
    background: #000 !important;
  }
  .header-area .main-nav .nav li {
    background: #000 !important;
    border-bottom: 1px solid #222 !important;
  }
  .header-area .main-nav .nav li a {
    color: #fff !important;
    background: #000 !important;
  }
  .header-area .main-nav .nav li a:hover,
  .header-area .main-nav .nav li a.active {
    color: #fff !important;
  }
  /* Mobile submenu */
  .header-area .main-nav .nav li.submenu ul {
    background: #000 !important;
  }
  .header-area .main-nav .nav li.submenu > a {
    color: #fff !important;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    color: #fff !important;
    background: #000 !important;  /* keep dropdown dark */
  }

  .header-area .main-nav .nav li.submenu ul li a:hover {
    color: #99ddcc !important;
  }
}

/* (Tiny fix) Correct selector typo if used elsewhere */
.header-area.header-sticky { color: #fff; }

/* ---------------------------------------------
   Home 16:9 Slider (Top of Main Banner)
---------------------------------------------- */
#home { /* reserved for anchor */ }

/* == EKB home 16:9 Slider == */
.ekb-home {
  position: relative;
  width: 100%;
  height: min(56.25vw, 100vh); /* 16:9, never exceed viewport height */
  overflow: hidden;
  background: #000;
  margin-top: 0;
  isolation: isolate; /* keep z-index context clean */
}

/* Mobile-only margin top = 50px */
@media (max-width: 576px) {
  .ekb-home { margin-top: 50px; }
}

/* If you use a fixed header and want desktop offset, set this var on header:
   :root { --header-height: 80px; } and uncomment the next rule if needed */
/*
.header-sticky + .ekb-home { margin-top: var(--header-height, 0px); }
*/

.ekb-home__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.ekb-home__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  will-change: opacity;
  z-index: 0;
}

.ekb-home__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.ekb-home__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Caption */
.ekb-home__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 6vw, 64px);
  transform: translateX(-50%);
  width: min(92%, 1100px);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  pointer-events: none;
}

.ekb-home__caption h2 {
  margin: 0 0 6px 0;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: clamp(24px, 4vw, 48px);
}

.ekb-home__caption p {
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
  opacity: 0.95;
  color: #fff;
}

/* Arrows */
.ekb-home__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition: background 180ms ease, transform 180ms ease;
  will-change: background, transform;
}

.ekb-home__nav:hover { background: rgba(0,0,0,0.6); transform: translateY(-50%) scale(1.03); }
.ekb-home__nav:active { transform: translateY(-50%) scale(0.98); }
.ekb-home__nav--prev { left: clamp(8px, 2vw, 24px); }
.ekb-home__nav--next { right: clamp(8px, 2vw, 24px); }

/* Dots */
.ekb-home__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(10px, 3vw, 28px);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.ekb-home__dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}

.ekb-home__dots button[aria-selected="true"] {
  background: #fff;
  transform: scale(1.2);
}

/* Hide caption on ultra-short viewports to avoid overlap */
@media (max-height: 520px) and (orientation: landscape) {
  .ekb-home__caption { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ekb-home__slide { transition: none; }
  .ekb-home__nav { transition: none; }
}

/* --- (Optional) Example testimonial card styles retained --- */
.testimonial-item {
  background: #fff;
  padding: 30px 25px;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.08);
  text-align: center;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonial-item h4 { margin: 0; font-weight: 600; color: #333; line-height: 2;}
.testimonial-item p { margin-top: 20px; margin-bottom: 0px; font-style: italic; color: #555; }
.testimonial-item span {  margin: 0;font-size: 14px; color: #999; }

/*
---------------------------------------------
Client Comments
---------------------------------------------
*/
#comment{
    padding-top:130px;
    padding-bottom: 90px;
}

#comment .owl-carousel {
    margin-top: 90px;
}

/* Testimonials */
.testimonial-item {
    background: #fff;
    padding: 30px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-item p {
    font-style: italic;
    color: #555;
}

.testimonial-item h4 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.testimonial-item span {
    font-size: 14px;
    color: #999;
}

#comment .btn {
  background-color: #2a9d8f;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}
#comment .btn:hover {
  background-color: #21867a;
}


/*
---------------------------------------------
Kitchen
---------------------------------------------
*/
.kitchen-item-carousel .thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9 / 16 = 0.5625 → 56.25% */
    overflow: hidden;
}

.kitchen-item-carousel .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*
---------------------------------------------
Service
---------------------------------------------
*/
/* Section look (beige bg like screenshot) */
#service {
  padding: 64px 0;                 /* a bit tighter */
  border-bottom: 0;                /* remove dotted divider */
  background: #E8E2D7;            /* soft beige */
}

#service .section-heading h2 {
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  color: #2B1E16;                 /* deep brown */
}

#service .section-heading span,
#service .eyebrow {
  color: #9B846C;                 /* muted gold */
}

#service .section-heading p,
#service .service-copy {
  color: #3f352d;
  max-width: 58ch;
}

/* Image card (rounded, tall, shadow) */
.service-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;            /* tall portrait like the mock */
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  background: #fff;
}
.service-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback for older browsers w/out aspect-ratio */
@supports not (aspect-ratio: 3/4) {
  .service-media { padding-top: 133.333%; } /* 4/3 * 100% */
  .service-media img { position: absolute; inset: 0; }
}

/* Clean card row */
.service-card {
  background: transparent;        /* image has its own card now */
  box-shadow: none;
  border-radius: 0;
}
#service .service-text { padding: 24px; }
@media (min-width: 768px) { #service .service-text { padding: 40px 48px; } }

/* Subtle hover lift (optional) */
.service-media:hover { transform: translateY(-2px); transition: transform .25s; }

#service .service-row{
    background-color: #FFF;
    padding: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}


/*
---------------------------------------------
Our Process
---------------------------------------------
*/
#process .container{
    max-width: 900px;
    margin: auto;
}

.section-process {
  background: #E8E2D7;          /* soft beige to match Service section */
  padding: 72px 0;
}

#process .section-heading{
  line-height: 1.1;
  font-weight: 800;
  color: #2B1E16;                 /* deep brown */
}

#process .section-heading span{
    color: #9B846C;
}

.section-process .process-title {
  color: #2B1E16;
  line-height: 1.1;
}

.section-process .process-intro {
  color: #3f352d;
  max-width: 70ch;
}

.process-steps {
  counter-reset: step;
  margin: 32px 0 8px;
  padding: 0;
}

.process-step + .process-step {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(43,30,22,.25);  /* subtle separator */
}

.process-num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  color: #2B1E16;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  margin-right: 16px;
}

.process-heading {
  margin: 0 0 6px;
  font-weight: 800;
  color: #2B1E16;
  font-size: clamp(18px, 2.2vw, 24px);
}

.process-copy {
  color: #3f352d;
  margin: 0;
  max-width: 75ch;
}

.process-note {
  margin-top: 28px;
  color: #5a4d42;
  font-style: italic;
}

/* Spacing balance on small screens */
@media (max-width: 767.98px) {
  .process-num { margin-bottom: 10px; }
}

/*
---------------------------------------------
Gallery
---------------------------------------------
*/
/* ---------------- Gallery Slide ---------------- */
#gallery .swiper-slide {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;     /* default: images align at top */
  overflow: hidden;
  position: relative;
}

/* ---------------- Gallery Images ---------------- */
#gallery .swiper-slide img {
  max-width: 100%;
  max-height: 80vh;            /* avoid overflowing screen height */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

/* ---------------- Landscape-specific tweak ---------------- */
/* Aspect ratio > 1 means landscape */
#gallery .swiper-slide img:is(:where(:not(:first-child))) {}

/* Modern CSS way */
#gallery .swiper-slide img {
  aspect-ratio: attr(width) / attr(height);
}

@media screen {
  /* For landscape images, push them down */
  #gallery .swiper-slide img.landscape {
    margin-top: 30%;
  }
}

/* ---------------- Swiper Navigation Arrows ---------------- */
#gallery .swiper-button-next,
#gallery .swiper-button-prev {
  color: #2a9d8f;
  top: 50%;
  transform: translateY(-50%);
}

#gallery .swiper-button-next::after,
#gallery .swiper-button-prev::after {
  font-size: 24px;
  font-weight: bold;
}

/* ---------------- Swiper Pagination Dots ---------------- */
#gallery .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}
#gallery .swiper-pagination-bullet-active {
  background: #2a9d8f;
}

/* ---------------- Read More Button ---------------- */
#gallery .btn {
  background-color: #2a9d8f;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}
#gallery .btn:hover {
  background-color: #21867a;
}



/*
---------------------------------------------
Video
---------------------------------------------
*/
#video{
  padding-top:130px;
  padding-bottom:90px;
  position: relative; /* anchor for absolute children if needed */
}
#video .section-heading h2{
  font-size:34px;
  font-weight:700;
  color:#2a2a2a;
}
#video .section-heading{ margin-bottom:60px; }

/* ---------------- Scroll rail + row ---------------- */
#video .video-rail{
  position: relative;         /* anchors the buttons */
}

/* Mobile/tablet: horizontal scroll with space for arrows */
#video .video-scroll{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;

  /* Reserve space for the outside arrows so they don't overlap cards */
  /* 48px button + small gap ≈ 3.25–3.5rem on each side */
  padding-inline: clamp(2.75rem, 7vw, 3.5rem);

  /* remove edge-to-edge negative margins so arrows stay visible */
  margin-inline: 0;
  padding-bottom:.5rem;       /* avoid scrollbar overlay */
}

/* Hide scrollbar (optional) */
#video .video-scroll::-webkit-scrollbar{ display:none; }
#video .video-scroll{ scrollbar-width:none; }

/* ---------------- Cards ---------------- */
#video .video-scroll .video-card{
  flex:0 0 auto;              /* no shrink */
  /* narrower cards so arrows fit and peek of next card shows */
  width: clamp(62%, 72vw, 72%);
  max-width: 300px;
  min-width: 240px;
  scroll-snap-align:start;
}

#video .video-card{
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  margin-bottom:0;            /* spacing handled by gap */
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Instagram embed responsiveness */
#video .ig-wrap{
  width:100%;
  aspect-ratio:9/16;          /* default for Reels; override per card if needed */
  display:flex;
}
#video .instagram-media{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;     /* kill 326px min */
  margin:0 auto !important;
  border:0 !important;
  box-shadow:none !important;
}

/* (Optional) iframe helpers if you ever use iframes */
.aspect-16x9,.aspect-9x16{ position:relative;width:100%;overflow:hidden; }
.aspect-16x9{ padding-top:56.25%; }
.aspect-9x16{ padding-top:177.78%; }
.aspect-16x9>iframe,.aspect-9x16>iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* ---------------- Arrows (tablet/mobile only) ---------------- */
#video .video-btn{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:0; cursor:pointer; z-index:10;
  background:rgba(0,0,0,.6); color:#fff; font-size:28px;
  display:none;               /* shown in media query below */
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
#video .video-btn.prev{ left: .5rem; }   /* sits in the reserved padding */
#video .video-btn.next{ right:.5rem; }

#video .video-btn:hover{ background:rgba(0,0,0,.8); }
#video .video-btn:disabled{ opacity:.4; cursor:not-allowed; }
#video .video-btn:focus-visible{ outline:2px solid #4da3ff; outline-offset:2px; }

/* Show buttons only on tablet/mobile */
@media (max-width: 991.98px){
  #video .video-btn{
    display:flex; align-items:center; justify-content:center;
  }
}

/* Drag-to-scroll affordance */
#video .video-scroll{ cursor:grab; }
#video .video-scroll.dragging{
  cursor:grabbing; user-select:none; -webkit-user-select:none;
}

/* Desktop (≥992px): 4-up grid, hide arrows, remove padding */
@media (min-width: 992px){
  #video .video-scroll{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    overflow:visible;
    padding-inline:0;
    padding-bottom:0;
  }
  #video .video-scroll .video-card{
    width:auto; max-width:none; min-width:0;
    scroll-snap-align:unset;
  }
  #video .video-btn{ display:none !important; }
}

/* Tiny screens: slightly smaller heading */
@media (max-width: 575.98px){
  #video .section-heading h2{ font-size:28px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #video .video-scroll{ scroll-behavior:auto; }
}

/* Reset list style */
#video .section-heading ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;       /* spacing from heading */
  display: flex;
  justify-content: center;
  gap: 20px;              /* space between icons */
}

/* Each list item */
#video .section-heading ul li {
  display: inline-block;
}

/* Anchor link wrapping the icon */
#video .section-heading ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;              /* circle */
  background-color: #8fd5c3;       /* mint/green background */
  color: #000;                     /* icon color */
  font-size: 22px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover effect */
#video .section-heading ul li a:hover {
  background-color: #2a9d8f;       /* darker brand color */
  color: #fff;                     /* white icon on hover */
}



/*
---------------------------------------------
Why Choose Edge
---------------------------------------------
*/
#why{
    padding-top:130px;
    padding-bottom: 90px;
}
#why .section-heading h2 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}
#why .section-heading {
    margin-bottom: 60px;
}

/* Why Choose Edge */
#why .outcard{
    margin-bottom: 30px;
}

.why-edge .why-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:18px 18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  height:100%;
}
.why-edge .why-icon{
  flex:0 0 42px;
  width:42px; height:42px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px;
  background:#99ddcc;   /* green background */
  color:#000;           /* dark icon for contrast */
}
.why-edge .why-line{
  margin:2px 0 0;
  font-size:15px;
  color:#555;
  line-height:1.45;
}




/*
---------------------------------------------
FAQ
---------------------------------------------
*/
/* --- FAQ Section --- */
#faqs .container{
    max-width: 800px;
}


.section-faqs {
  background: #E8E2D7;
  padding: 72px 20px;
}

#faqs .faq-title{
  text-align: center;
  line-height: 1.1;
  font-weight: 800;
  color: #2B1E16;                 /* deep brown */

  margin-bottom: 32px;
}

/* FAQ Items */
.faq-item {
  background: #fff;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Question button */
.faq-question {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #2B1E16;
}

.faq-question:focus {
  outline: none;
}

.faq-toggle {
  font-size: 22px;
  font-weight: 700;
  color: #9B846C;
}

/* Answer hidden initially */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  color: #3f352d;
  font-size: 16px;
  line-height: 1.6;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease;
}

/* Active state (expand with fade) */
.faq-item.active .faq-answer {
  max-height: 300px;    /* adjust if answers are longer */
  opacity: 1;
  padding: 12px 20px 16px;
}

.faq-item.active .faq-toggle {
  content: "×";
  transform: rotate(45deg);
  font-size: 26px;
}


/*
---------------------------------------------
Notes
---------------------------------------------
*/
/* --- FAQ Section --- */
#notes .container{
    max-width: 800px;
}


#notes .section-faqs {
  background: #E8E2D7;
  padding: 72px 20px;
}

#notes .title{
  text-align: center;
  line-height: 1.1;
  color: #2B1E16;                 /* deep brown */
}



/*
---------------------------------------------
Contact Us
---------------------------------------------
*/

.email {
  display: inline-block;
  max-width: 100%;
  white-space: normal; /* Allows wrapping */
  overflow-wrap: break-word; /* Breaks long words */
}

#contact .section-heading h2 {
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  color: #99ddcc;
}

#contact ul li {
  font-size: 16px;
  font-weight: 700;
  color: #99ddcc;
}



/* Make links hover with brand color */
#contact a:hover,
footer a:hover {
  color: #99DDCC;
}

/*
---------------------------------------------
Fade-in base
---------------------------------------------
*/

/* Fade-in base */
.section[data-animate], .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.section.is-visible, .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Optional: stagger common cards inside sections */
.section.is-visible .outcard,
.section.is-visible .service-card,
.section.is-visible .proj-item,
.section.is-visible .why-card {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s ease;
}
.section .outcard,
.section .service-card,
.section .proj-item,
.section .why-card {
  opacity: 0;
  transform: translateY(18px);
}

/* Simple nth-child stagger (adjust delays to taste) */
.section.is-visible .outcard:nth-child(1),
.section.is-visible .service-card:nth-child(1),
.section.is-visible .proj-item:nth-child(1),
.section.is-visible .why-card:nth-child(1) { transition-delay: .05s; }
.section.is-visible .outcard:nth-child(2),
.section.is-visible .service-card:nth-child(2),
.section.is-visible .proj-item:nth-child(2),
.section.is-visible .why-card:nth-child(2) { transition-delay: .12s; }
.section.is-visible .outcard:nth-child(3),
.section.is-visible .service-card:nth-child(3),
.section.is-visible .proj-item:nth-child(3),
.section.is-visible .why-card:nth-child(3) { transition-delay: .18s; }
.section.is-visible .outcard:nth-child(4),
.section.is-visible .service-card:nth-child(4),
.section.is-visible .proj-item:nth-child(4),
.section.is-visible .why-card:nth-child(4) { transition-delay: .24s; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section[data-animate], .reveal,
  .section .outcard, .section .service-card, .section .proj-item, .section .why-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Disable Lightbox image sprite fallbacks to stop 404s */
.lb-prev, .lb-next, .lb-close, .lb-loader {
  background-image: none !important;
}

:root { --header-offset: 90px; }
#home, #service, #why, #process, #gallery, #video, #faqs, #comment, #contact {
  scroll-margin-top: var(--header-offset);
}


/*
---------------------------------------------
Basic CSS
---------------------------------------------
*/
/* Tablet and mobile */
@media (max-width: 991px) {
  .section-heading {
    text-align: center;
  }
}