/* =========================
   Vars & Base (shared)
========================= */
:root{
  --default-font:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --heading-font:"Montserrat",sans-serif;
  --nav-font:"Poppins",sans-serif;

  --background-color:#fff;
  --default-color:#212529;
  --heading-color:#32353a;
  --accent-color:#e84545;
  --contrast-color:#fff;

  --nav-color:#3a3939;
  --nav-hover-color:#e84545;
  --nav-dropdown-background-color:#fff;
  --nav-dropdown-color:#3a3939;
  --nav-dropdown-hover-color:#e84545;

  scroll-behavior:smooth;
}
body{color:var(--default-color);background-color:var(--background-color);font-family:var(--default-font);}
a{color:var(--accent-color);text-decoration:none;transition:.3s;}
a:hover{color:color-mix(in srgb,var(--accent-color),transparent 25%);text-decoration:none;}
h1,h2,h3,h4,h5,h6{color:var(--heading-color);font-family:var(--heading-font);}

/* =========================
   xcontainer (responsive wrapper)
   — like .container with horizontal padding
========================= */
.xcontainer{
  --bs-gutter-x:1.5rem;
  width:100%;
  margin-right:auto;
  margin-left:auto;
  padding-right:calc(var(--bs-gutter-x)*.5);
  padding-left: calc(var(--bs-gutter-x)*.5);
}
@media (min-width:576px){ .xcontainer{ max-width:540px; } }
@media (min-width:768px){ .xcontainer{ max-width:720px; } }
@media (min-width:992px){ .xcontainer{ max-width:960px; } }
@media (min-width:1200px){ .xcontainer{ max-width:1140px; } }
@media (min-width:1400px){ .xcontainer{ max-width:1320px; } }

/* =========================
   Section shells (merged + fixed)
========================= */
.index-page{position:relative; z-index:0;}
:where(section,.section){
  color:var(--default-color);
  background-color:var(--background-color);
  padding:60px 0;
  scroll-margin-top:98px;
  position:relative;
  isolation:isolate;      /* fix: own stacking context */
  overflow:hidden;        /* clip inner bg layers */
  z-index:0;
}
@media (max-width:1199px){
  :where(section,.section){ scroll-margin-top:64px; }
}
/* keep content above section bg layers */
:where(section,.section) > .xcontainer{ position:relative; z-index:2; }

/* =========================
   Header (template + colors)
========================= */
.header{color:var(--default-color);background-color:var(--background-color);padding:20px 0;transition:all .5s;z-index:997;}
.header .logo{line-height:1;}
.header .logo img{max-height:36px;margin-right:8px;}
.header .logo h1{font-size:24px;margin:0;font-weight:600;color:var(--heading-color);}
.header .logo span{color:var(--accent-color);font-size:24px;font-weight:600;padding-left:3px;}
.scrolled .header{box-shadow:0 0 30px 10px rgba(0,0,0,.1);}
.index-page .header{--background-color:rgba(255,255,255,0);--heading-color:#fff;--nav-color:rgba(255,255,255,.5);--nav-hover-color:#fff;}
.index-page.scrolled .header{--background-color:#fff;--heading-color:#32353a;--nav-color:#3a3939;--nav-hover-color:#e84545;}

/* =========================
   Nav (desktop + mobile)
========================= */
@media (min-width:1200px){
  .navmenu{padding:0;}
  .navmenu ul{margin:0;padding:0;display:flex;list-style:none;align-items:center;}
  .navmenu li{position:relative;}
  .navmenu a,.navmenu a:focus{
    color:var(--nav-color);padding:18px 15px;font:400 16px var(--nav-font);
    display:flex;align-items:center;justify-content:space-between;white-space:nowrap;transition:.3s;
  }
  .navmenu a i,.navmenu a:focus i{font-size:12px;line-height:0;margin-left:5px;transition:.3s;}
  .navmenu li:last-child a{padding-right:0;}
  .navmenu li:hover>a,.navmenu .active,.navmenu .active:focus{color:var(--nav-hover-color);}
  /* dropdowns (from template) */
  .navmenu .dropdown ul{
    margin:0;padding:10px 0;background:var(--nav-dropdown-background-color);
    display:block;position:absolute;visibility:hidden;left:14px;top:130%;opacity:0;transition:.3s;border-radius:4px;z-index:99;
    box-shadow:0 0 30px color-mix(in srgb,var(--default-color),transparent 85%);
  }
  .navmenu .dropdown ul li{min-width:200px;}
  .navmenu .dropdown ul a{padding:10px 20px;font-size:15px;color:var(--nav-dropdown-color);}
  .navmenu .dropdown ul a:hover,.navmenu .dropdown ul .active:hover,.navmenu .dropdown ul li:hover>a{color:var(--nav-dropdown-hover-color);}
  .navmenu .dropdown:hover>ul{opacity:1;top:100%;visibility:visible;}
  .navmenu .dropdown .dropdown ul{top:0;left:-90%;visibility:hidden;}
  .navmenu .dropdown .dropdown:hover>ul{opacity:1;top:0;left:-100%;visibility:visible;}
}
@media (max-width:1199px){
  .mobile-nav-toggle{color:var(--nav-color);font-size:28px;line-height:0;margin-right:10px;cursor:pointer;transition:color .3s;}
  .navmenu{padding:0;z-index:9997;}
  .navmenu ul{
    display:none;position:absolute;inset:60px 20px 20px;background:var(--nav-dropdown-background-color);
    padding:10px 0;margin:0;border-radius:6px;overflow-y:auto;transition:.3s;z-index:9998;
    box-shadow:0 0 30px color-mix(in srgb,var(--default-color),transparent 90%);
  }
  .navmenu a,.navmenu a:focus{
    color:var(--nav-dropdown-color);padding:10px 20px;font-family:var(--nav-font);
    font-size:17px;font-weight:500;display:flex;align-items:center;justify-content:space-between;white-space:nowrap;transition:.3s;
  }
  .navmenu a i,.navmenu a:focus i{
    font-size:12px;margin-left:5px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;
    transition:.3s;background-color:color-mix(in srgb,var(--accent-color),transparent 90%);
  }
  .navmenu a i:hover,.navmenu a:focus i:hover{background-color:var(--accent-color);color:var(--contrast-color);}
  .navmenu a:hover,.navmenu .active,.navmenu .active:focus{color:var(--nav-dropdown-hover-color);}
  .navmenu .active i,.navmenu .active:focus i{background-color:var(--accent-color);color:var(--contrast-color);transform:rotate(180deg);}
  .navmenu .dropdown ul{
    position:static;display:none;z-index:99;padding:10px 0;margin:10px 20px;background:var(--nav-dropdown-background-color);
    border:1px solid color-mix(in srgb,var(--default-color),transparent 90%);box-shadow:none;transition:all .5s ease-in-out;
  }
  .navmenu .dropdown ul ul{background-color:rgba(33,37,41,.1);}
  .navmenu .dropdown>.dropdown-active{display:block;background-color:rgba(33,37,41,.03);}
  .mobile-nav-active{overflow:hidden;}
  .mobile-nav-active .mobile-nav-toggle{color:#fff;position:absolute;font-size:32px;top:15px;right:15px;margin-right:0;z-index:9999;}
  .mobile-nav-active .navmenu{position:fixed;overflow:hidden;inset:0;background:rgba(33,37,41,.8);transition:.3s;}
  .mobile-nav-active .navmenu>ul{display:block;}
}

/* =========================
   Section Title (merged)
========================= */
.section-title{ text-align:center; padding-bottom:60px; position:relative; z-index:2; }
.section-title h2{ font-size:32px; font-weight:700; position:relative; }
.section-title h2:before,.section-title h2:after{ content:""; width:50px; height:2px; background:var(--accent-color); display:inline-block; }
.section-title h2:before{ margin:0 15px 10px 0; }
.section-title h2:after{ margin:0 0 10px 15px; }
.section-title p{ margin-bottom:0; }

/* =========================
   Hero (prioritize CSS #2 layering)
========================= */
#hero{ isolation:isolate; overflow:clip; }
.hero{
  --default-color:#fff; --background-color:#000; --heading-color:#fff;
  width:100%; min-height:100vh; position:relative; padding:160px 0 80px;
  display:flex; align-items:center; justify-content:center;
}
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero:before{ content:""; background:color-mix(in srgb,var(--background-color),transparent 50%); position:absolute; inset:0; z-index:1; }
.hero .xcontainer{ position:relative; z-index:2; }
.hero h2{ color:var(--contrast-color); margin:0; font-size:44px; font-weight:700; }
.hero p{ color:color-mix(in srgb,var(--default-color),transparent 20%); margin:5px 0 0; font-size:20px; }
@media (max-width:768px){ .hero h2{ font-size:32px; } .hero p{ font-size:18px; } }

/* =========================
   About (merged + fix stagger)
========================= */
.about{ --background-color:#f4f4f4; }
.about .content h3{
  font:500 16px/19px var(--heading-font);
  padding:10px 20px; background:color-mix(in srgb,var(--accent-color),transparent 95%);
  color:var(--accent-color); border-radius:7px; display:inline-block;
}
.about .icon-box{
  background:#fff; padding:50px 40px; box-shadow:0 10px 50px rgba(0,0,0,.1);
  border-radius:10px; transition:.3s;
}
.about .icon-box i{
  width:80px;height:80px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:24px;font-size:32px;background:color-mix(in srgb,var(--accent-color),transparent 95%);color:var(--accent-color);
}
/* fix: remove negative stagger from template */
.about .icon-boxes .col-md-6:nth-child(2) .icon-box,
.about .icon-boxes .col-md-6:nth-child(4) .icon-box{ margin-top:0 !important; transform:none !important; }

/* =========================
   Services (merged + guards)
========================= */
.services .section-title{ padding-bottom:48px; }
#services .section-title + .xcontainer{ padding-top:16px; }
.section .xcontainer > .row{ margin-top:0 !important; }

.services .service-item{ position:relative; padding-top:40px; z-index:1; }
.services .service-item:before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:color-mix(in srgb,var(--default-color),transparent 90%); }
.services .service-item::after{ content:""; position:absolute; top:0; left:0; width:30px; height:2px; background:var(--accent-color); border-right:5px solid var(--background-color); }

/* from template (kept) */
.services .service-item .icon{ width:48px; height:48px; position:relative; margin-right:50px; line-height:0; }
.services .service-item .icon i{ color:color-mix(in srgb,var(--default-color),transparent 30%); font-size:56px; transition:ease-in-out .3s; z-index:2; position:relative; }
.services .service-item .icon:before{
  position:absolute; content:""; height:30px; width:30px; background:color-mix(in srgb,var(--accent-color),transparent 70%);
  border-radius:50px; z-index:1; bottom:-15px; right:-15px; transition:.3s;
}
.services .service-item .title{ font-weight:700; margin-bottom:15px; font-size:18px; }
.services .service-item .title a{ color:var(--heading-color); }
.services .service-item .title a:hover{ color:var(--accent-color); }
.services .service-item .description{ line-height:24px; font-size:14px; }

/* =========================
   Features (merged)
========================= */
.features .features-item{ color:color-mix(in srgb,var(--default-color),transparent 20%); }
.features .features-item + .features-item{ margin-top:100px; }
@media (max-width:768px){ .features .features-item + .features-item{ margin-top:40px; } }
.features .features-item h3{ font-weight:700; font-size:26px; }
.features .features-item ul{ list-style:none; padding:0; }
.features .features-item ul li{ padding-bottom:10px; display:flex; align-items:flex-start; }
.features .features-item ul li:last-child{ padding-bottom:0; }
.features .features-item ul i{ font-size:20px; padding-right:4px; color:var(--accent-color); }
.features .features-item img{ border:6px solid var(--contrast-color); box-shadow:0 15px 30px -10px color-mix(in srgb,var(--default-color),transparent 75%); }
.features .features-item .features-img-bg{ position:relative; min-height:500px; overflow:hidden; }
@media (max-width:640px){ .features .features-item .features-img-bg{ min-height:300px; } }
.features .features-item .features-img-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.features .features-item .image-stack{ display:grid; position:relative; grid-template-columns:repeat(12,1fr); }
.features .features-item .image-stack .stack-back{ grid-column:4/-1; grid-row:1; width:100%; z-index:1; }
.features .features-item .image-stack .stack-front{ grid-row:1; grid-column:1/span 8; margin-top:20%; width:100%; z-index:2; }

/* =========================
   Call To Action (prioritize CSS #2: bg not fixed)
========================= */
.call-to-action{ --background-color:#000; --default-color:#fff; --contrast-color:#fff; padding:80px 0; position:relative; clip-path:inset(0); }
.call-to-action img{ position:absolute !important; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.call-to-action::before{ content:""; background:color-mix(in srgb,var(--background-color),transparent 50%); position:absolute; inset:0; z-index:1; }
.call-to-action .xcontainer{ position:relative; z-index:2; }
.call-to-action h3{ font-size:28px; font-weight:700; color:var(--default-color); }
.call-to-action p{ color:var(--default-color); }
.call-to-action .cta-btn{
  font-family:var(--heading-font); font-weight:500; font-size:16px; letter-spacing:1px;
  display:inline-block; padding:12px 40px; border-radius:5px; transition:.5s; margin:10px;
  border:2px solid var(--contrast-color); color:var(--contrast-color);
}
.call-to-action .cta-btn:hover{ background:var(--accent-color); border:2px solid var(--accent-color); }

/* =========================
   Footer (template)
========================= */
.footer{
  --background-color:color-mix(in srgb,var(--default-color),transparent 96%);
  color:var(--default-color); background-color:var(--background-color);
  font-size:14px; padding-bottom:50px; position:relative;
}
.footer .copyright{ padding:25px 0; background-color:color-mix(in srgb,var(--default-color),transparent 95%); }
.footer .copyright p{ margin-bottom:0; }

/* =========================
   Utilities
========================= */
/* hide template preloader inside dialog */
#preloader{ display:none !important; }
.scroll-top{
  position:fixed; visibility:hidden; opacity:0; right:15px; bottom:15px; z-index:99999;
  background-color:var(--accent-color); width:40px; height:40px; border-radius:4px; transition:all .4s;
}
.scroll-top i{ font-size:24px; color:var(--contrast-color); line-height:0; }
.scroll-top:hover{ background-color:color-mix(in srgb,var(--accent-color),transparent 20%); color:var(--contrast-color); }
.scroll-top.active{ visibility:visible; opacity:1; }

/* Disable AOS delay on mobile */
@media (max-width:768px){ [data-aos-delay]{ transition-delay:0 !important; } }