:root{
  --orange:#f5821f;
  --dark:#1b1f2a;
  --gold:#c9a227;
  --ruby:#b23a48;
  --emerald:#2f6f5e;
  --sapphire:#2f4b7c;
  --plum:#6b3f76;
  --logo-gradient: linear-gradient(90deg, #f7a91e 0%, #e6512c 100%);
}

html{
  overflow-x:hidden;
}

.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; opacity:0; transition:opacity 0.25s ease;
}
.cursor-dot{
  width:8px; height:8px; background:var(--orange);
}
.cursor-ring{
  width:34px; height:34px; border:2px solid var(--orange);
  transition:opacity 0.25s ease, width 0.25s ease, height 0.25s ease, background 0.25s ease;
}
.cursor-dot.active, .cursor-ring.active{ opacity:1; }
.cursor-ring.grow{
  width:56px; height:56px; background:rgba(245,130,31,0.12);
}
@media (max-width:991px){
  .cursor-dot, .cursor-ring{ display:none; }
}
body{
  font-family:'Poppins', 'Segoe UI', Arial, sans-serif;
  overflow-x:hidden;
  /* background-image:url('assets/img/bg-body.jpg'); */
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
img{
  max-width:100%;
  height:auto;
}

.navbar{
  padding: 0.9rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{
  height:40px;
  max-height:40px;
  width:auto;
  object-fit:contain;
}

.nav-link{
  font-weight:600;
  color:var(--dark) !important;
  margin:0 6px;
}
.nav-link:hover, .nav-link.active{
  color:var(--orange) !important;
}
.navbar-nav .nav-item.active .nav-link{
  color:var(--orange) !important;
  border-bottom:2px solid var(--orange);
}
/* Mega-menu — position it under the Products nav item, not the page edge */
.navbar .nav-item.dropdown{
  position: relative;
}
.navbar .dropdown-menu.mega-menu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: 92vw;
  margin-top: 0.5rem;
}
.btn-get-started{
  background:var(--orange);
  color:#fff;
  font-weight:700;
  border-radius:8px;
  padding:0.55rem 1.4rem;
  border:none;
}
.btn-get-started:hover{
  background:#e56d00;
  color:#fff;
}

/* Mega menu */
.mega-menu{
  border:none;
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
  padding:1.5rem;
  min-width:600px;
}
.mega-menu .col-item{
  padding:0.6rem 0.8rem;
  border-radius:8px;
  display:block;
  text-decoration:none;
}
.mega-menu .col-item:hover{
  background:#fdf2e8;
}
.mega-menu .col-item h6{
  color:var(--dark);
  font-weight:700;
  margin-bottom:2px;
}
.mega-menu .col-item p{
  color:#6c757d;
  font-size:0.85rem;
  margin-bottom:0;
}
.mega-menu .view-all{
  color:var(--orange);
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  margin-top:0.5rem;
}
@media (max-width: 991px){
  .mega-menu{
    min-width:100%;
    max-height:70vh;
    overflow-y:auto;
  }
}
@media (max-width:480px){
  .navbar{ padding:0.7rem 1rem; }
  .brand-logo{ height:32px; max-height:32px; }
  body{ padding-top:64px; }
}

/* Header — fixed on scroll */
.navbar.sticky-top{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

body{
  padding-top: 80px; /* navbar-oda actual height ku maathunga */
}

/* ===== Hero banner ===== */
.hero-banner{
  position:relative;
  overflow:hidden;
}

.hero-carousel .carousel-item{
  height:600px;
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  position:relative;
}

.hero-carousel .carousel-item::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(232, 232, 231, 0.436)0%, rgba(13, 12, 12, 0) 60%, transparent 100%);
  z-index:1;
}

.slide-content{
  position:relative;
  z-index:2;
  padding:2rem 0;
}
.container.h-100{
  position:relative;
  z-index:2;
}

.badge-tag{
  display:inline-block;
  background:#fdf2e8;
  color:var(--orange);
  font-weight:700;
  font-size:0.8rem;
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:1rem;
}
.slide-content h1{
  font-size:2.8rem;
  font-weight:800;
  line-height:1.2;
  color:#000000;
  margin-bottom:1.2rem;
}
.slide-content .text-highlight{
  color:var(--orange);
}
.slide-content p{
  font-size:1.05rem;
  color:#78430c;
  margin-bottom:1.8rem;
  max-width:480px;
}
.hero-btns .btn{
  margin-right:12px;
  margin-bottom:12px;
  padding:0.65rem 1.6rem;
  font-weight:600;
  border-radius:8px;
}
.btn-outline-light{
  border:2px solid #fff;
  color:#fff;
}
.btn-outline-light:hover{
  background:#fff;
  color:var(--dark);
}

.hero-indicators{
  bottom:20px;
  z-index:3;
}
.hero-indicators button{
  background-color:var(--orange) !important;
  width:10px;
  height:10px;
  border-radius:50%;
  margin:0 4px;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.hero-indicators button.active{
  transform:scale(1.3);
}

.slide-content .animate__animated{
  animation-duration:0.8s;
}

@media (max-width:768px){
  .hero-carousel .carousel-item::before{
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.6) 100%);
  }
  /* The overlay above switches from light (desktop) to dark (mobile), but the
     heading/paragraph colors were left at their desktop values (near-black) —
     dark text on a darkened photo was unreadable. Switch to light text here. */
  .slide-content h1{ color:#fff; }
  .slide-content .text-highlight{ color:#ffb066; }
  .slide-content p{ color:rgba(255,255,255,0.88); }
}

/* Tablet (landscape) */
@media (max-width:991px){
  .hero-carousel .carousel-item{ height:560px; background-position:top center; }
  .slide-content h1{ font-size:2.4rem; }
  .slide-content p{ font-size:1rem; max-width:100%; }
}

/* Tablet (portrait) */
@media (max-width:768px){
  .hero-carousel .carousel-item{
    height:auto;
    min-height:420px;
    background-position:top center;
  }
  .hero-carousel .carousel-item .row.h-100{
    display:flex;
    align-items:center;
    min-height:420px;
  }
  .slide-content{
    padding:2.4rem 0;
    text-align:center;
  }
  .slide-content h1{ font-size:2rem; }
  .slide-content p{
    font-size:0.95rem;
    margin-left:auto;
    margin-right:auto;
  }
  .badge-tag{ font-size:0.75rem; }
  .hero-btns{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:10px;
  }
  .hero-btns .btn{
    margin-right:0;
    margin-bottom:0;
  }
  .hero-indicators{ bottom:14px; }
}

/* Mobile */
@media (max-width:575px){
  .hero-carousel .carousel-item{
    min-height:360px;
    background-position:top center;
  }
  .slide-content{ padding:1.6rem 0.5rem; }
  .slide-content h1{
    font-size:1.5rem;
    line-height:1.3;
  }
  .slide-content p{
    font-size:0.85rem;
    margin-bottom:1.1rem;
  }
  .badge-tag{
    font-size:0.7rem;
    padding:5px 12px;
    margin-bottom:0.7rem;
  }
  .hero-btns{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    width:100%;
    gap:8px;
  }
  .hero-btns .btn{
    flex:1 1 0;
    width:auto;
    margin-right:0;
    margin-bottom:0;
    padding:0.55rem 0.6rem;
    font-size:0.85rem;
    white-space:nowrap;
  }
  .hero-indicators{ bottom:8px; }
  .hero-indicators button{ width:8px; height:8px; }
}

/* Very small screens */
@media (max-width:360px){
  .slide-content h1{ font-size:1.4rem; }
  .slide-content p{ font-size:0.82rem; }
  .hero-btns .btn{ font-size:0.78rem; padding:0.5rem 0.4rem; }
}

/* ===== About section ===== */
.about-section{
  padding:3rem 0;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.9) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}

.about-content .section-tag{ margin-bottom:1rem; }

.about-content .section-title{
  margin-bottom:1.2rem;
}

.about-lead{
  font-size:1.1rem;
  font-weight:600;
  color:var(--dark);
  line-height:1.6;
  margin-bottom:1rem;
  font-style:italic;
}

.about-text{
  font-size:0.95rem;
  color:#6c757d;
  line-height:1.7;
  margin-bottom:2rem;
  font-style:oblique;
}

.about-highlights{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  margin-bottom:2rem;
}

.about-highlight-item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:1.1rem 1.2rem;
  box-shadow:0 10px 26px rgba(0,0,0,0.05);
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.about-highlight-item:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(245,130,31,0.14);
  border-color:transparent;
}

.about-highlight-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:12px;
  background:#fdf2e8;
  color:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.about-highlight-item:hover .about-highlight-icon{
  background:var(--orange);
  color:#fff;
  transform:scale(1.08);
}

.about-highlight-item h5{
  font-size:1rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0.2rem;
}
.about-highlight-item p{
  font-size:0.85rem;
  color:#8a8f98;
  margin-bottom:0;
}

.about-image-wrap{
  position:relative;
}

.about-image-card{
  border-radius:20px;
  overflow:hidden;
  
}
.about-image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio:4/3.4;
}

.about-badge-float{
  position:absolute;
  bottom:-24px;
  left:-24px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
  padding:1rem 1.4rem;
  display:flex;
  align-items:center;
  gap:0.9rem;
}
.about-badge-float i{
  font-size:1.6rem;
  color:var(--orange);
}
.about-badge-float h6{
  font-size:1.3rem;
  font-weight:800;
  color:var(--dark);
  margin-bottom:0;
  line-height:1;
}
.about-badge-float span{
  font-size:0.75rem;
  color:#8a8f98;
  font-weight:600;
}

@media (max-width:991px){
  .about-section{ padding:4rem 0; }
  .about-image-wrap{ margin-top:2rem; }
}

@media (max-width:575px){
  .about-badge-float{
    left:50%;
    transform:translateX(-50%);
    bottom:-20px;
  }
  .about-lead{ font-size:1rem; }
}


/* ===== Why Choose Us — connected strip layout ===== */
.why-section{
  padding:2rem 0;
  /* background-image:linear-gradient(180deg, rgba(251,249,246,0.55) 0%, rgba(251,249,246,0.55) 100%); */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}

.why-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin-top:3.5rem;
  position:relative;
}

.why-item{
  text-align:center;
  padding:0 1.8rem;
  position:relative;
}

.why-item:not(:first-child)::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:linear-gradient(to bottom, transparent, #e5ddd0, transparent);
}

.why-icon-blob{
  width:84px;
  height:84px;
  margin:0 auto 1.5rem;
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
  background:linear-gradient(135deg, #f5821f 0%, #ffb066 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  color:#fff;
  box-shadow:0 15px 35px rgba(245,130,31,0.25);
  transition:transform 0.45s cubic-bezier(.4,0,.2,1), border-radius 0.45s ease, box-shadow 0.4s ease;
}

.why-item:hover .why-icon-blob{
  transform:translateY(-8px) rotate(-6deg);
  border-radius:62% 38% 37% 63% / 59% 56% 44% 41%;
  box-shadow:0 20px 45px rgba(245,130,31,0.35);
}

.why-item h4{
  font-size:1.15rem;
  font-weight:700;
  color:var(--orange);
  margin-bottom:0.8rem;
  position:relative;
  display:inline-block;
}
.why-item h4::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--orange);
  transform:translateX(-50%);
  transition:width 0.35s ease;
}
.why-item:hover h4::after{
  width:36px;
}

.why-item p{
  font-size:0.88rem;
  color:#6c757d;
  line-height:1.65;
  margin-bottom:0;
}

@media (max-width:991px){
  .why-strip{ grid-template-columns:repeat(2, 1fr); row-gap:3rem; }
  .why-item:nth-child(3)::before{ display:none; }
  .why-item:nth-child(2)::before,
  .why-item:nth-child(4)::before{ display:none; }
}

@media (max-width:575px){
  .why-strip{ grid-template-columns:1fr; row-gap:2.8rem; }
  .why-item::before{ display:none; }
  .why-item{ padding:0 1rem; }
}

/* ===== Stats section ===== */
.stats-section{
  position:relative;
  padding:5rem 0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.stats-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(27,31,42,0.75) 0%, rgba(245,130,31,0.35) 100%);
  z-index:1;
}

.stats-section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:3px;
  background:var(--orange);
  border-radius:3px;
  z-index:3;
}

.stats-section .container{
  position:relative;
  z-index:2;
}

.stat-item{
  margin-bottom:2rem;
  position:relative;
  padding:0 1rem;
  transition:transform 0.3s ease;
}

.stat-item:hover{
  transform:translateY(-6px);
}

.stat-item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;
  top:10%;
  height:80%;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent);
}

.stat-number{
  font-size:3.2rem;
  font-weight:800;
  color:#fff;
  margin-bottom:0.5rem;
  line-height:1;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}

.stat-label{
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#f1e4d4;
  margin-bottom:0;
  position:relative;
  display:inline-block;
}

.stat-label::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%) scaleX(0);
  width:24px;
  height:2px;
  background:var(--orange);
  transition:transform 0.3s ease;
}

.stat-item:hover .stat-label::after{
  transform:translateX(-50%) scaleX(1);
}

.stat-number.counting{
  color:var(--orange);
  transition:color 0.3s ease;
}

@media (max-width:768px){
  .stats-section{ background-attachment:scroll; padding:3rem 0; }
  .stat-number{ font-size:2.4rem; }
  .stat-label{ font-size:0.7rem; letter-spacing:1px; }
  .stat-item{ margin-bottom:2.2rem; }
  .stat-item:not(:last-child)::after{ display:none; }
}

@media (max-width:480px){
  .stat-number{ font-size:2rem; }
  .stat-item{ padding:0 0.5rem; }
}



/* service section */



.section-header{
  max-width:640px;
  margin:0 auto 3.5rem;
}
.section-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--orange);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.tag-dash{
  width:24px;
  height:2px;
  background:var(--orange);
  display:inline-block;
}
.section-title{
  font-size:2rem;
  font-weight:800;
  color:var(--dark);
  line-height:1.3;
  margin-bottom:1rem;
}
.section-title:not(.animate__animated){
  opacity:0;
}
.section-title.animate__animated{
  animation-duration:1s;
}
.section-title .text-highlight{
  color:var(--orange);
}
/* The hero heading on Home/About/Services (the first section on
   each of those pages) reuses .section-title as an h1 — give it a
   bigger size than the mid-page h2 section titles. */
.about-section h1.section-title{
  font-size:3rem;
}
.section-subtitle{
  color:#6c757d;
  font-size:1.05rem;
  line-height:1.6;
}

.services-section{
  padding:2rem 0;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.94) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.service-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:2rem 1.6rem;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  
}

.service-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:0;
  background:var(--orange);
  transition:height 0.35s ease;
}

.service-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
  border-color:transparent;
}
.service-card:hover::before{
  height:100%;
}

.service-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:#fdf2e8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  color:var(--orange);
  margin-bottom:1.2rem;
  transition:background 0.35s ease, color 0.35s ease, transform 0.35s ease;
 
}
.service-card:hover .service-icon{
  background:var(--orange);
  color:#fff;
  transform:rotate(-8deg) scale(1.05);
}

.service-number{
  position:absolute;
  top:1.8rem;
  right:1.6rem;
  font-size:0.75rem;
  font-weight:700;
  color:#d0d0d0;
}

.service-card h3{
  font-size:1.2rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0.8rem;
}
.service-card p{
  font-size:0.92rem;
  color:#6c757d;
  line-height:1.6;
  margin-bottom:1.2rem;
}

.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.4rem;
}
.tag-pill{
  background:#fdf2e8;
  color:var(--orange);
  font-size:0.72rem;
  font-weight:700;
  padding:5px 12px;
  border-radius:20px;
}

.service-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--dark);
  font-weight:700;
  font-size:0.9rem;
  text-decoration:none;
  transition:gap 0.3s ease, color 0.3s ease;
}
.service-link i{
  color:var(--orange);
  transition:transform 0.3s ease;
}
.service-link:hover{
  color:var(--orange);
  gap:10px;
}
.service-link:hover i{
  transform:translateX(4px);
}

.btn-outline-dark-custom{
  border:2px solid var(--orange);
  color:var(--orange);
  font-weight:700;
  padding:0.65rem 2rem;
  border-radius:8px;
  text-decoration:none;
  transition:background 0.3s ease, color 0.3s ease;
  display:inline-block;
}
.btn-outline-dark-custom:hover{
  background:var(--orange);
  color:#fff;
}

@media (max-width:991px){
  .section-title{ font-size:2rem; }
}

@media (max-width:768px){
  .services-section{ padding:3.5rem 0; }
  .section-title{ font-size:1.7rem; }
  .section-subtitle{ font-size:0.95rem; }
  .service-card{ padding:1.6rem 1.3rem; }
}

@media (max-width:480px){
  .section-title{ font-size:1.4rem; }
  .service-icon{ width:48px; height:48px; font-size:1.2rem; }
}



/* ===== Products section — equal cards, image + content, center-out color fill on hover ===== */
.modules-section{
  padding:2rem 0;
  /* background-image:linear-gradient(180deg, rgba(251,249,246,0.93) 0%, rgba(251,249,246,0.93) 100%); */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
.modules-section::before{
  content:'';
  position:absolute;
  top:-120px; right:-120px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,130,31,0.12) 0%, transparent 70%);
}
.modules-section::after{
  content:'';
  position:absolute;
  bottom:-140px; left:-140px;
  width:360px; height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,111,94,0.10) 0%, transparent 70%);
}

.modules-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.6rem;
  margin-top:3rem;
  position:relative;
  z-index:2;
}

.module-tile[data-color="orange"]{ --accent:#f5821f; --accent2:#c85c10; }
.module-tile[data-color="gold"]{ --accent:#c9a227; --accent2:#8f7015; }
.module-tile[data-color="sapphire"]{ --accent:#2f4b7c; --accent2:#1e3255; }
.module-tile[data-color="emerald"]{ --accent:#2f6f5e; --accent2:#1e4b3f; }

.module-tile{
  position:relative;
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,0.06);
  transition:box-shadow 0.35s ease, transform 0.35s ease;
  display:flex;
  flex-direction:column;
  text-decoration:none;
}
.module-tile:hover{
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
  transform:scale(1.03);
}

.module-tile-fill{
  position:absolute;
  top:50%;
  left:50%;
  width:40px;
  height:40px;
  margin:-20px 0 0 -20px;
  border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, var(--accent2) 100%);
  transform:scale(0);
  transition:transform 0.6s cubic-bezier(.4,0,.2,1);
  z-index:1;
  pointer-events:none;
}
.module-tile:hover .module-tile-fill{
  transform:scale(30);
}

.module-tile-img{
  position:relative;
  z-index:2;
  height:180px;
  overflow:hidden;
  background:#f5f5f5;
}
.module-tile-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.module-tile:hover .module-tile-img img{
  transform:scale(1.08);
}

.module-tile-body{
  position:relative;
  z-index:2;
  padding:1.6rem 1.6rem 1.9rem;
  flex:1;
}

.module-tile-badge{
  display:inline-block;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:1px;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, #fff);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:0.8rem;
  transition:background 0.4s ease, color 0.4s ease;
}
.module-tile:hover .module-tile-badge{
  background:rgba(255,255,255,0.25);
  color:#fff;
}

.module-tile-body h3{
  font-size:1.2rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0.5rem;
  transition:color 0.4s ease;
}
.module-tile-body p{
  font-size:0.9rem;
  color:#6c757d;
  margin-bottom:1rem;
  line-height:1.55;
  min-height:4.65em;
  transition:color 0.4s ease;
}
.module-tile:hover .module-tile-body h3,
.module-tile:hover .module-tile-body p{
  color:#fff;
}

.module-tile-features{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.module-tile-features li{
  font-size:0.85rem;
  color:var(--dark);
  display:flex;
  align-items:flex-start;
  gap:7px;
  line-height:1.4;
  transition:color 0.4s ease;
}
.module-tile-features li i{
  color:var(--accent);
  margin-top:3px;
  font-size:0.75rem;
  transition:color 0.4s ease;
}
.module-tile:hover .module-tile-features li,
.module-tile:hover .module-tile-features li i{
  color:#fff;
}

@media (max-width:991px){
  .modules-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  .modules-section{ padding:3.5rem 0; }
  .module-tile-img{ height:160px; }
  .module-tile-body{ padding:1.4rem; }
}

@media (max-width:575px){
  .modules-grid{ grid-template-columns:1fr; gap:1.2rem; }
}


/* ===== Work Process section — horizontal connected timeline ===== */
.process-section{
  padding:2rem 0;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.94) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.process-timeline{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1.5rem;
  margin-top:4rem;
  position:relative;
}

.process-line{
  position:absolute;
  top:62px;
  left:10%;
  right:10%;
  height:2px;
  background:repeating-linear-gradient(90deg, #f0d4b8 0, #f0d4b8 8px, transparent 8px, transparent 16px);
  z-index:0;
}

.process-step{
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 0.5rem;
}

.process-step-num{
  font-size:0.75rem;
  font-weight:700;
  color:#c9c9c9;
  margin-bottom:0.6rem;
  letter-spacing:1px;
}

.process-step-icon{
  width:76px;
  height:76px;
  margin:0 auto 1.3rem;
  border-radius:50%;
  background:#fdf2e8;
  border:2px solid #fff;
  box-shadow:0 8px 24px rgba(245,130,31,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:var(--orange);
  transition:background 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.process-step:hover .process-step-icon{
  background:var(--orange);
  color:#fff;
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 16px 36px rgba(245,130,31,0.32);
}

.process-step h4{
  font-size:1.05rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0.6rem;
  transition:color 0.3s ease;
}
.process-step:hover h4{
  color:var(--orange);
}

.process-step p{
  font-size:0.85rem;
  color:#8a8f98;
  line-height:1.55;
  margin-bottom:0;
}

@media (max-width:991px){
  .process-timeline{ grid-template-columns:repeat(3, 1fr); row-gap:3rem; }
  .process-line{ display:none; }
}

@media (max-width:575px){
  .process-timeline{ grid-template-columns:1fr; row-gap:2.5rem; }
  .process-step{ padding:0 1rem; }
}




/* ===== Industries We Serve — owl carousel, accent-bar card layout ===== */
.industries-section{
  padding:2rem 0;
  background:#fbf9f6;
  position:relative;
  overflow:hidden;
}

.industries-carousel{
  margin-top:3rem;
}

.industry-card[data-color="orange"]{ --accent:#f5821f; }
.industry-card[data-color="gold"]{ --accent:#c9a227; }
.industry-card[data-color="sapphire"]{ --accent:#2f4b7c; }
.industry-card[data-color="emerald"]{ --accent:#2f6f5e; }
.industry-card[data-color="ruby"]{ --accent:#b23a48; }
.industry-card[data-color="plum"]{ --accent:#6b3f76; }

.industry-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:2.2rem 1.2rem 1.7rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin:0.4rem;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.industry-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--accent);
}
.industry-card:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 18px 38px rgba(0,0,0,0.1);
}

.industry-icon-circle{
  width:66px;
  height:66px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 12%, #fff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:var(--accent);
  transition:background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.industry-card:hover .industry-icon-circle{
  background:var(--accent);
  color:#fff;
  transform:scale(1.08);
}

.industry-card h5{
  font-size:0.95rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0;
  line-height:1.4;
}

.industries-carousel .owl-stage-outer{
  padding:0.4rem 0;
}

.industries-carousel .owl-nav{
  margin-top:1.2rem;
}
.industries-carousel .owl-nav button.owl-prev,
.industries-carousel .owl-nav button.owl-next{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff !important;
  border:1px solid #eee !important;
  color:var(--dark) !important;
  font-size:1.1rem !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 6px;
  transition:background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.industries-carousel .owl-nav button:hover{
  background:var(--dark) !important;
  border-color:var(--dark) !important;
  color:#fff !important;
}

.industries-carousel .owl-dots{
  margin-top:0.8rem;
  text-align:center;
}
.industries-carousel .owl-dots .owl-dot span{
  background:#e5ddd0;
}
.industries-carousel .owl-dots .owl-dot.active span{
  background:var(--orange);
}

@media (max-width:575px){
  .industries-section{ padding:3.5rem 0; }
  .industry-card{ padding:1.8rem 0.9rem 1.4rem; }
  .industry-icon-circle{ width:56px; height:56px; font-size:1.25rem; }
  .industry-card h5{ font-size:0.85rem; }
}


/* ===== Clients section — infinite auto-scroll marquee ===== */
.clients-section{
  padding:2rem 0rem;
  /* background-image:linear-gradient(180deg, rgba(251,249,246,0.93) 0%, rgba(251,249,246,0.93) 100%), url('assets/img/bg-clients.jpg'); */
     background-image: linear-gradient(300deg, rgb(254 123 13) 0%, rgb(254 254 254 / 93%) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}

.clients-marquee-wrap{
  margin-top:3rem;
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.clients-marquee{
  display:flex;
  width:max-content;
}

.clients-track{
  display:flex;
  align-items:center;
  animation:clientsScroll 30s linear infinite;
}

.clients-marquee-wrap:hover .clients-track{
  animation-play-state:paused;
}

.client-logo{
  flex:0 0 auto;
  width:180px;
  height:100px;
  margin:0 1.4rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem;
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.client-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  /* filter:grayscale(100%); */
  opacity:0.65;
  transition:filter 0.35s ease, opacity 0.35s ease;
}

.client-logo:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
  border-color:transparent;
}
.client-logo:hover img{
  filter:grayscale(0%);
  opacity:1;
}

@keyframes clientsScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

@media (max-width:768px){
  .clients-section{ padding:3.5rem 0 4rem; }
  .client-logo{ width:140px; height:80px; margin:0 1rem; padding:1rem; }
}

@media (max-width:480px){
  .client-logo{ width:120px; height:70px; margin:0 0.7rem; }
}



/* ===== Contact section — modern glass card + floating shapes ===== */
.contact-section{
  padding:2rem 0;
  background-image:linear-gradient(180deg, rgba(251,249,246,0.93) 0%, rgba(251,249,246,0.93) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}

.contact-bg-shape{
  position:absolute;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.contact-bg-shape.shape-1{
  top:-100px;
  left:-100px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(245,130,31,0.10) 0%, transparent 70%);
}
.contact-bg-shape.shape-2{
  bottom:-120px;
  right:-120px;
  width:340px;
  height:340px;
  background:radial-gradient(circle, rgba(47,75,124,0.08) 0%, transparent 70%);
}

.contact-card{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius:24px;
  box-shadow:0 30px 70px rgba(27,31,42,0.1);
  overflow:hidden;
  margin-top:3rem;
}

.contact-form-col{
  padding:3.5rem;
  display:flex;
  align-items:center;
}

.contact-form-inner{
  width:100%;
}

.form-floating-group{
  position:relative;
}
.form-floating-group i{
  position:absolute;
  left:1.1rem;
  top:1rem;
  color:#b8bcc4;
  font-size:0.9rem;
  transition:color 0.3s ease;
  pointer-events:none;
}
.form-floating-group.textarea-group i{
  top:1.1rem;
}

.contact-form .form-control{
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:0.9rem 1.1rem 0.9rem 2.6rem;
  font-size:0.92rem;
  background:#fbf9f6;
  transition:border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.contact-form .form-control:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(245,130,31,0.1);
  background:#fff;
  outline:none;
}
.contact-form .form-control:focus ~ i,
.form-floating-group:focus-within i{
  color:var(--orange);
}
.contact-form textarea.form-control{
  resize:none;
}

.btn-send-message{
  width:100%;
  background:linear-gradient(90deg, var(--orange) 0%, #e0741a 100%);
  color:#fff;
  font-weight:700;
  font-size:0.95rem;
  border:none;
  border-radius:12px;
  padding:0.95rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  transition:opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 12px 30px rgba(245,130,31,0.28);
}
.btn-send-message i{
  font-size:0.85rem;
  transition:transform 0.3s ease;
}
.btn-send-message:hover{
  opacity:0.95;
  transform:translateY(-3px);
  color:#fff;
  box-shadow:0 16px 36px rgba(245,130,31,0.38);
}
.btn-send-message:hover i{
  transform:translateX(4px);
}

.contact-map-col{
  position:relative;
  min-height:500px;
}
.contact-map-col iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:500px;
  filter:grayscale(10%);
}

.map-badge-float{
  position:absolute;
  bottom:1.5rem;
  left:1.5rem;
  right:1.5rem;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
  padding:1rem 1.2rem;
  display:flex;
  align-items:center;
  gap:0.9rem;
}
.map-badge-float i{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#fdf2e8;
  color:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.map-badge-float h6{
  font-size:0.9rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0.1rem;
}
.map-badge-float span{
  font-size:0.78rem;
  color:#8a8f98;
}

@media (max-width:991px){
  .contact-form-col{ padding:2.8rem 2rem; }
  .contact-map-col{ min-height:380px; }
  .contact-map-col iframe{ min-height:380px; }
}

@media (max-width:575px){
  .contact-section{ padding:3.5rem 0; }
  .contact-form-col{ padding:2rem 1.5rem; }
  .map-badge-float{ left:1rem; right:1rem; bottom:1rem; padding:0.8rem 1rem; }
}

/* ===== Footer ===== */
.site-footer{
  background-image:linear-gradient(180deg, rgba(27,31,42,0.94) 0%, rgba(27,31,42,0.97) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#c4c8d4;
}

.footer-top{
  padding:4.5rem 0 3rem;
}

.footer-col h5{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  margin-bottom:1.3rem;
}

.footer-brand{
  display:inline-block;
  margin-bottom:1.2rem;
}
.footer-logo{
  height:38px;
  width:auto;
}

.footer-about{
  font-size:0.88rem;
  line-height:1.7;
  color:#9aa0af;
  margin-bottom:1.5rem;
  max-width:320px;
}

.footer-socials{
  display:flex;
  gap:0.7rem;
}
.footer-socials a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  transition:background 0.3s ease, transform 0.3s ease;
  text-decoration:none;
}
.footer-socials a:hover{
  background:var(--orange);
  transform:translateY(-4px);
}

.footer-links,
.footer-contact{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:0.8rem;
}
.footer-links a{
  color:#9aa0af;
  font-size:0.9rem;
  text-decoration:none;
  transition:color 0.3s ease, padding-left 0.3s ease;
}
.footer-links a:hover{
  color:var(--orange);
  padding-left:4px;
}

.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:0.8rem;
  margin-bottom:1.1rem;
  font-size:0.88rem;
  line-height:1.5;
  color:#9aa0af;
}
.footer-contact i{
  color:var(--orange);
  margin-top:3px;
  width:16px;
  flex-shrink:0;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:1.4rem 0;
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-bottom-inner p{
  font-size:0.82rem;
  color:#8a8f98;
  margin:0;
}

.footer-bottom-links{
  list-style:none;
  display:flex;
  gap:1.6rem;
  margin:0;
  padding:0;
}
.footer-bottom-links a{
  color:#8a8f98;
  font-size:0.82rem;
  text-decoration:none;
  transition:color 0.3s ease;
}
.footer-bottom-links a:hover{
  color:var(--orange);
}

@media (max-width:991px){
  .footer-top{ padding:3.5rem 0 2rem; }
  .footer-col{ margin-bottom:1rem; }
}

@media (max-width:575px){
  .footer-bottom-inner{
    flex-direction:column;
    text-align:center;
  }
}


/* ============================================================
   Scroll entrance animations — shared across pages
   Each element opts in with data-anim="<name>" in the HTML;
   a shared IntersectionObserver (see index.html script) adds
   .in-view once the element scrolls in, and data-delay (ms)
   staggers items within the same group.
   ============================================================ */

[data-anim]{
  opacity:0;
  will-change:transform, opacity;
}

@keyframes animFadeSlideLeft{
  from{ opacity:0; transform:translateX(-56px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes animFadeSlideRight{
  from{ opacity:0; transform:translateX(56px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes animImageReveal{
  from{ opacity:0; transform:translateX(70px) scale(0.92) rotate(2deg); filter:blur(6px); }
  to{ opacity:1; transform:translateX(0) scale(1) rotate(0deg); filter:blur(0); }
}
@keyframes animPopIn{
  0%{ opacity:0; transform:translateY(24px) scale(0.7); }
  70%{ opacity:1; transform:translateY(-4px) scale(1.05); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes animFlipUp{
  from{ opacity:0; transform:perspective(700px) rotateX(-65deg) translateY(16px); }
  to{ opacity:1; transform:perspective(700px) rotateX(0) translateY(0); }
}
@keyframes animZoomBounce{
  0%{ opacity:0; transform:scale(0.55); }
  65%{ opacity:1; transform:scale(1.08); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes animDropTop{
  0%{ opacity:0; transform:translateY(-44px); }
  70%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes animFlipInY{
  from{ opacity:0; transform:perspective(900px) rotateY(-85deg); }
  to{ opacity:1; transform:perspective(900px) rotateY(0); }
}
@keyframes animFadeScaleUp{
  from{ opacity:0; transform:translateY(26px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes animBottomToTop {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-anim="left"].in-view{ animation:animFadeSlideLeft 0.8s cubic-bezier(.22,.9,.35,1) forwards; }
[data-anim="right"].in-view{ animation:animFadeSlideRight 0.8s cubic-bezier(.22,.9,.35,1) forwards; }
[data-anim="image"].in-view{ animation:animImageReveal 0.9s cubic-bezier(.22,.9,.35,1) forwards; }
[data-anim="pop"].in-view{ animation:animPopIn 0.7s cubic-bezier(.34,1.56,.64,1) forwards; }
[data-anim="flip-up"].in-view{ animation:animFlipUp 0.7s ease forwards; transform-origin:bottom center; }
[data-anim="zoom"].in-view{ animation:animZoomBounce 0.7s cubic-bezier(.34,1.56,.64,1) forwards; }
[data-anim="drop"].in-view{ animation:animDropTop 0.7s cubic-bezier(.22,.9,.35,1) forwards; }
[data-anim="flip-y"].in-view{ animation:animFlipInY 0.8s ease forwards; transform-origin:center; }
[data-anim="fade-scale"].in-view{ animation:animFadeScaleUp 0.7s ease forwards; }
[data-anim="bottom-to-top"].in-view {animation: animBottomToTop 0.8s ease forwards;}



@media (prefers-reduced-motion: reduce){
  [data-anim]{
    opacity:1 !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }
}

/* ============================================================
   [data-animate] — the animate.css-driven reveal system used on
   About/Services (separate from [data-anim] above, which drives
   the custom @keyframes system on Home). Was previously copy-pasted
   as an inline <style> block on each page that used it.
   ============================================================ */
[data-animate]{
  opacity:0;
}

.cta-banner-inner{
  margin:2.5rem 0 4.5rem;
  padding:3rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
  position:relative;
  overflow:hidden;
  color:#fff;
  border-radius:24px;
}
.cta-banner-inner::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:0.15;
  z-index:0;
}
.cta-banner-inner::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, #f7961e 0%, #f1602d 100%);
  z-index:1;
}
.cta-banner-inner > *{
  position:relative;
  z-index:2;
}
.cta-banner-inner .btn-get-started{
  background:#fff;
  color:var(--orange);
}
.cta-banner-inner .btn-get-started:hover{
  background:#151514;
  color:#fff;
}

.mission-section{
  padding:2rem 0;
}
@media (max-width:575px){
  .mission-section{ padding:1.5rem 0; }
}

/* ============================================================
   Our Work (case studies) — homepage section, hidden entirely
   when no case study is published (see HomeController).
   ============================================================ */
.work-section{
  padding:5rem 0;
  background:#fbf9f6;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.8rem;
  margin-top:3rem;
}
.work-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.work-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 45px rgba(0,0,0,0.1);
}
.work-card-img{
  height:200px;
  overflow:hidden;
}
.work-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.work-card-body{
  padding:1.5rem;
}
.work-card-logo{
  height:28px;
  max-width:120px;
  object-fit:contain;
  display:block;
  margin-bottom:0.8rem;
}
.work-card-body h3{
  font-size:1.15rem;
  font-weight:800;
  color:var(--dark);
  margin-bottom:0.5rem;
}
.work-card-body .tag-pill{
  margin-bottom:0.8rem;
  display:inline-block;
}
.work-card-body p{
  font-size:0.9rem;
  color:#6c757d;
  line-height:1.6;
  margin-bottom:0;
}
@media (max-width:991px){
  .work-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:575px){
  .work-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Testimonials — homepage section, hidden entirely when no
   testimonial is published (see HomeController).
   ============================================================ */
.testimonials-section{
  padding:5rem 0;
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.8rem;
  margin-top:3rem;
}
.testimonial-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:1.8rem;
  box-shadow:0 15px 35px rgba(0,0,0,0.05);
}
.testimonial-stars{
  color:var(--gold, #c9a227);
  font-size:0.85rem;
  margin-bottom:0.9rem;
}
.testimonial-stars i{ margin-right:2px; }
.testimonial-quote{
  font-size:0.95rem;
  color:#495057;
  line-height:1.7;
  font-style:italic;
  margin-bottom:1.4rem;
  min-height:96px;
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:0.8rem;
}
.testimonial-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.testimonial-avatar-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fdf2e8;
  color:var(--orange);
  font-weight:800;
  font-size:1.1rem;
}
.testimonial-author h6{
  font-size:0.92rem;
  font-weight:700;
  color:var(--dark);
  margin-bottom:0;
}
.testimonial-author span{
  font-size:0.78rem;
  color:#8a8f98;
}
@media (max-width:991px){
  .testimonials-grid{ grid-template-columns:repeat(2, 1fr); }
}
/* ============================================================
   Dark mode toggle (navbar switch) — inverts the whole page to
   a black background; images/video/svg re-inverted so they keep
   their normal colours.
   ============================================================ */
.theme-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0.6rem;
}
.theme-switch .ts-track{
  position:relative;
  width:44px;
  height:24px;
  border-radius:20px;
  background:#dfe3e8;
  cursor:pointer;
  transition:background 0.25s ease;
  flex-shrink:0;
}
.theme-switch .ts-track::before{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
  transition:transform 0.25s ease, background 0.25s ease;
}
.theme-switch input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.theme-switch input:checked + .ts-track{
  background:var(--dark, #1b1f2a);
}
.theme-switch input:checked + .ts-track::before{
  transform:translateX(20px);
  background:var(--orange, #f5821f);
}
.theme-switch .ts-icon{
  font-size:0.8rem;
  color:#8a8f98;
}

html.dark-mode{
  filter:invert(1) hue-rotate(180deg);
  background:#fff;
}
html.dark-mode img,
html.dark-mode video,
html.dark-mode svg,
html.dark-mode iframe{
  filter:invert(1) hue-rotate(180deg);
}

/* Footer, and the one section per page given its own black
   background on purpose, are already dark by design — keep them
   exactly as authored instead of letting the page-wide invert flip
   them light. */
html.dark-mode .site-footer,
html.dark-mode .home-process-dark,
html.dark-mode .home-services-dark,
html.dark-mode .about-process-dark,
html.dark-mode .svc-process-dark,
html.dark-mode .a24-run,
html.dark-mode .sch-roles,
html.dark-mode .bb24-fit,
html.dark-mode .own-how,
html.dark-mode .a24-hero,
html.dark-mode .sch-hero,
html.dark-mode .own-hero,
html.dark-mode .bb24-hero,
html.dark-mode .contact-info-section{
  filter:invert(1) hue-rotate(180deg);
}
/* Logos: let the single page-wide invert do its job (black text ->
   white, brand orange stays orange) instead of cancelling it out,
   since these logos sit directly on the inverted black nav / the
   un-inverted (still dark) footer. */
html.dark-mode .navbar-brand img,
html.dark-mode .site-footer img,
html.dark-mode .a24-hero img,
html.dark-mode .sch-hero img,
html.dark-mode .own-hero img,
html.dark-mode .bb24-hero img{
  filter:none;
}

@media (max-width:575px){
  .testimonials-grid{ grid-template-columns:1fr; }
  .testimonial-quote{ min-height:auto; }
}

/* ============================================================
   WhatsApp floating button — shown on every page.
   ============================================================ */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:86px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.6rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  z-index:1040;
  transition:transform 0.25s ease;
  text-decoration:none;
}
.whatsapp-float:hover{
  transform:scale(1.08);
  color:#fff;
}
@media (max-width:480px){
  .whatsapp-float{ width:50px; height:50px; font-size:1.4rem; right:14px; bottom:72px; }
}

.back-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  background:#fff;
  border:1px solid var(--orange);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--orange);
  font-size:1.05rem;
  box-shadow:0 10px 26px rgba(0,0,0,0.16);
  z-index:1040;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}
@media (max-width:480px){
  .back-to-top{ width:40px; height:40px; font-size:0.95rem; right:14px; bottom:14px; }
}

/* ============================================================
   Demo video modal — shared by every product page's "Demo Video"
   button (only rendered when an admin has set a URL for that
   product in Settings).
   ============================================================ */
.demo-video-backdrop{
  position:fixed;
  inset:0;
  background:rgba(20,20,24,0.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2100;
  padding:2rem 1rem;
}
.demo-video-backdrop.open{ display:flex; }
.demo-video-modal{
  width:100%;
  max-width:960px;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,0.4);
}
.demo-video-modal iframe{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  border:0;
}
.demo-video-close{
  position:absolute;
  top:-44px;
  right:0;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:1rem;
  cursor:pointer;
}
.demo-video-close:hover{ background:rgba(255,255,255,0.3); }
.btn-outline-light.has-video{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* ---------- Decorative orange polygon shape (shape.svg, hue-shifted to the theme) ---------- */
.deco-host{ position:relative; overflow:hidden; }
.deco-host > .container{ position:relative; z-index:1; }
.deco-shape{
  position:absolute; z-index:0; width:560px; height:300px; pointer-events:none;
  background:url('../../products-assets/img/shape.svg') no-repeat center / contain;
  filter:hue-rotate(-169deg) saturate(1.25);
  mix-blend-mode:multiply; opacity:0.45;
}
.deco-br{ right:-60px; bottom:-18px; }
.deco-bl{ left:-60px;  bottom:-18px; transform:scaleX(-1); }
.deco-tr{ right:-60px; top:-18px;    transform:scaleY(-1); }
.deco-tl{ left:-60px;  top:-18px;    transform:scale(-1,-1); }
@media (max-width:767px){ .deco-shape{ width:300px; height:160px; } }

/* ---------- Hand-built orange background art (public/assets/img/deco/*.svg) ---------- */
.deco-art{
  position:absolute; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:0.85; mix-blend-mode:multiply;
}
.deco-art.poly { background-image:url('../img/deco/poly.svg');  width:520px; height:320px; }
.deco-art.blob { background-image:url('../img/deco/blob.svg');  width:520px; height:340px; opacity:0.75; }
.deco-art.dots { background-image:url('../img/deco/dots.svg');  width:300px; height:300px; opacity:0.9; }
.deco-art.rings{ background-image:url('../img/deco/hex.svg'); width:420px; height:420px; opacity:0.9; }
.art-tl{ left:0;  top:0; }
.art-tr{ right:0; top:0; }
.art-bl{ left:0;  bottom:0; }
.art-br{ right:0; bottom:0; }
@media (max-width:767px){ .deco-art{ transform-origin:inherit; zoom:0.55; } }

/* Sparkle stars: standalone design */
.deco-art.sparkle{ background-image:url('../img/deco/sparkle.svg'); width:420px; height:420px; opacity:0.9; }

/* WhatsApp button: no animation; logo-orange gradient background, white icon (dark mode inverts, so the icon is authored black there) */
.whatsapp-float{ background:#25D366 !important; color:#fff; box-shadow:0 12px 26px -8px rgba(37,211,102,.55); }
.whatsapp-float i{ color:#fff; }
html.dark-mode .whatsapp-float, html.dark-mode .whatsapp-float i{ color:#000; }

/* ===== Mobile / tablet menu: small popup that flips open; plain list of names, no borders; tap = wave + blink ===== */
@media (max-width:991px){
  .navbar .navbar-collapse{ position:absolute; top:calc(100% + 8px); right:12px; left:auto; width:224px; padding:.45rem; border-radius:20px; background:rgba(255,255,255,.97); border:0; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); transform-origin:100% 50%; backface-visibility:hidden; max-height:calc(100vh - 100px); overflow-y:auto; z-index:1040; }
  .navbar .navbar-collapse.collapsing{ height:auto !important; transition:none !important; display:block; opacity:0 !important; visibility:hidden !important; animation:none !important; }
  .navbar .navbar-collapse.show{ animation:mnFlip 1.3s cubic-bezier(.45,.1,.4,1) both; }
  @keyframes mnFlip{ 0%{ opacity:0; transform:perspective(900px) rotateY(100deg) scale(.92); } 15%{ opacity:1; } 80%{ transform:perspective(900px) rotateY(-5deg) scale(1.01); } 100%{ opacity:1; transform:perspective(900px) rotateY(0) scale(1); } }
  .navbar .navbar-nav{ gap:0; margin:0 !important; align-items:stretch !important; }
  .navbar .navbar-nav .nav-item{ list-style:none; }
  .navbar .navbar-nav .nav-link{ position:relative; overflow:hidden; display:block; margin:0 !important; padding:.62rem .9rem !important; border:0 !important; border-radius:12px; background:none; font-size:.96rem; font-weight:600; color:#1b1f2a !important; }
  .navbar .navbar-nav .nav-link:hover{ background:rgba(245,130,31,.1); }
  .navbar .navbar-nav .nav-item.active > .nav-link{ color:#f5821f !important; border-bottom:0 !important; background:rgba(245,130,31,.12); }
  .navbar .navbar-nav .dropdown-toggle::after{ float:right; margin-top:.5rem; }
  .navbar .dropdown-menu.mega-menu{ position:static !important; transform:none !important; width:auto !important; min-width:0 !important; margin:0 0 .2rem !important; padding:.1rem 0 .1rem .8rem !important; border:0 !important; border-radius:0; background:none; box-shadow:none; }
  .navbar .mega-menu .row{ margin:0; } .navbar .mega-menu .col-md-6{ padding:0; }
  .navbar .mega-menu .col-item{ display:block; padding:.45rem .7rem; border-radius:10px; } .navbar .mega-menu .col-item p{ display:none; } .navbar .mega-menu .col-item h6{ margin:0; font-size:.9rem; font-weight:600; }
  .navbar .theme-switch{ display:flex; align-items:center; justify-content:space-between; margin:.1rem 0 0; padding:.5rem .9rem; }
  .navbar .theme-switch::before{ content:'Theme'; order:-1; margin-right:auto; font-weight:600; font-size:.96rem; color:#1b1f2a; }
  .navbar .btn-get-started{ display:block; width:100%; margin:.3rem 0 0 !important; padding:.65rem 1rem; border-radius:12px; text-align:center; font-size:.92rem; }
  /* tap effect: expanding wave rings + a quick blink of the row */
  .navbar .mn-rip{ position:absolute; border-radius:50%; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; background:rgba(245,130,31,.55); transform:scale(0); animation:mnRip .65s ease-out forwards; }
  .navbar .mn-rip.r2{ background:rgba(255,94,138,.4); animation-delay:.14s; }
  @keyframes mnRip{ to{ transform:scale(34); opacity:0; } }
  .navbar .mn-blink{ animation:mnBlink .5s steps(1,end) 1; }
  @keyframes mnBlink{ 0%{ background:rgba(245,130,31,.35); } 25%{ background:transparent; } 50%{ background:rgba(245,130,31,.3); } 75%{ background:transparent; } 100%{ background:rgba(245,130,31,.12); } }
  html.dark-mode .navbar .btn-get-started{ color:#000 !important; }
  @media (prefers-reduced-motion:reduce){ .navbar .navbar-collapse.show{ animation:none; } .navbar .mn-rip{ display:none; } }
}
/* LIGHT THEME ONLY (html:not(.dark-mode)): less stark white. White navbar and a warm tint on the page so cards stand out instead of white-on-white. */
html:not(.dark-mode) .navbar.bg-white, html:not(.dark-mode) .navbar.sticky-top{ background-color:#fff !important; border-bottom:1px solid rgba(27,31,42,.08); }
html:not(.dark-mode) .navbar-collapse{ background:#fff; }
html:not(.dark-mode) .dropdown-menu.mega-menu{ background:#fff !important; }