:root {
   /* BRAND COLORS */
   --primary: #1A3DA8;
   /* Main Blue */
   --primary-dark: #0B1D63;
   /* Deep Navy */
   --primary-light: #AAC4F5;
   /* Light Steel Blue */

   /* ACCENT */
   --accent: #E63946;
   /* Energetic Red */
   --accent-dark: #C71C2D;

   /* NEUTRALS */
   --bg: #FFFFFF;
   --bg-gradient-start: #F0F4FF;
   --surface: #F9F9FB;
   --card: #FFFFFF;
   --muted: #555555;
   --text-heading: #0F172A;

   /* PREMIUM TONES */
   --gold: #C9B59C;
   /* Soft Gold */
   --beige: #EFE9E3;

   /* EFFECTS */
   --radius: 14px;
   --shadow: 0 6px 20px rgba(16, 24, 40, 0.12);
   --glow: 0 0 20px rgba(26, 61, 168, 0.45);
 }

 /* ===== Global Reset ===== */
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html,
 body {
   height: 100%;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
   line-height: 1.55;
   background: linear-gradient(135deg, #F4F4F4, #F4F4F4);
   /* glossy bluish-white gradient */
   color: #213555;
   background-attachment: fixed;
   transition: background 0.3s ease;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 /* ===== Container ===== */
 .container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 28px;
 }
/* ===== Premium Dynamic Header ===== */
.site-header {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-radius: 20px;

  border: 1px solid rgba(255,255,255,0.35);
  padding: 14px 30px;

  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  transition: all 0.35s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-4px);
}

/* ===== Inner Layout ===== */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

/* ===== Logo area ===== */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-wrapper {
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 
    4px 4px 10px rgba(0,0,0,0.25),
    inset -2px -2px 6px rgba(0,0,0,0.10),
    inset 2px 2px 6px rgba(255,255,255,0.7);
}

.logo-wrapper img {
  height: 50px;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: #00396b;
  letter-spacing: 0.5px;
}

/* ===== Navigation ===== */
.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
}

.main-nav a,
.main-nav .dropdown {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 6px;
  cursor: pointer;
  color: #00396b;
  transition: all 0.25s ease;
}

.main-nav a:hover,
.main-nav .dropdown:hover {
  color: #0057a8;
  transform: translateY(-2px);
}

/* Animated underline */
.main-nav a::after,
.main-nav .dropdown::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00d0ff, #0084ff);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav .dropdown:hover::after {
  width: 100%;
}

/* ===== Dropdown Styling ===== */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;

  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 15px 20px;
  border-radius: 16px;

  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  min-width: 200px;

  animation: dropdownFade 0.25s ease forwards;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 10px 0;
  color: #00396b;
  transition: 0.2s ease;
}

.dropdown-content a:hover {
  color: #0057a8;
  margin-left: 4px;
}

/* ===== Hamburger Menu (Mobile) ===== */
.nav-toggle {
  display: none;
  font-size: 30px;
  cursor: pointer;
  color: #00396b;
}

/* Responsive */
@media (max-width: 900px) {
  .main-nav {
    display: none;
    flex-direction: column;
    gap: 20px;
    background: rgba(255,255,255,0.95);
    padding: 20px;
    width: 100%;
    border-radius: 16px;
  }

  .nav-toggle {
    display: block;
  }

  .main-nav.active {
    display: flex;
  }
}


 /* Hero Section */
 .hero {
   position: relative;
   height: min(78vh, 320px);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   margin-top: 98px;
 }

 .hero-parallax {
   position: absolute;
   inset: 0;
   background-image: url('../images/banner5.jpg');
   background-size: cover;
   background-position: center;
   /* transform: translateZ(0); */
   will-change: transform;
   /* filter: brightness(0.7); */
 }

 .hero-overlay {
   position: absolute;
   inset: 0;
   /* background: linear-gradient(180deg, rgba(32,20,164,0.3), rgba(32,20,164,0.5)); */
   mix-blend-mode: multiply;
 }

 .hero-content {
   position: relative;
   z-index: 3;
   text-align: center;
   color: #fff;
   padding: 48px 12px;
 }

 .hero-content h1 {
   font-size: clamp(2rem, 4vw, 3.5rem);
   margin-bottom: 0.5rem;
   text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 18px var(--accent);
 }

 .hero-content p {
   font-size: 1.2rem;
   margin-bottom: 24px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 20px;
   border-radius: 10px;
   border: 1px solid transparent;
   font-weight: 600;
   cursor: pointer;
   transition: transform .2s, box-shadow .2s;
 }

 .btn.primary {
   background: var(--primary);
   color: #fff;
   box-shadow: var(--glow);
 }

 .btn.primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(32, 20, 164, 0.45);
 }

 /* ===== Sections ===== */
 .section {
   padding: 5px 0;
 }

 .section-head {
   font-weight: 700;
   font-size: 1.8rem;
   margin-bottom: 16px;
   display: inline-block;
   color: var(--primary);
   position: relative;
   padding-bottom: 6px;
   cursor: default;
 }

 /* Animated underline using pseudo-element */
 .section-head::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0%;
   height: 3px;
   background: var(--accent);
   border-radius: 2px;
   transition: width 0.4s ease;
 }

 /* Hover effect: underline expands and text slightly scales */
 .section-head:hover {
   color: var(--accent);
   transform: scale(1.05);
 }

 .section-head:hover::after {
   width: 50px;
 }

 /* Section Subheading */
 .section-sub {
   margin-bottom: 24px;
   color: var(--muted);
   line-height: 1.6;
 }

 /* Optional: small glowing underline animation */
 @keyframes glowUnderline {

   0%,
   100% {
     box-shadow: 0 0 4px var(--accent);
   }

   50% {
     box-shadow: 0 0 12px var(--accent);
   }
 }

 .section-head::after {
   animation: glowUnderline 2s infinite;
 }

 .section-sub {
   color: var(--muted);
   margin-bottom: 18px;
 }

 /* Scrolling images container */
 .scrolling-images {
   width: 100%;
   height: 250px;
   overflow: hidden;
   border-radius: 12px;
   margin: 12px 0;
   box-shadow: 0 4px 12px rgba(32, 20, 164, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.3);
 }

 /* Inner scrolling strip */
 .scrolling-images-inner {
   display: flex;
   height: 250px;
   gap: 12px;
   animation: scrollImages 20s linear infinite;
 }

 /* Images */
 .scrolling-images-inner img {
   width: 280px;
   height: 240px;
   object-fit: cover;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(32, 20, 164, 0.1);
   flex-shrink: 0;
 }

 /* Exact infinite scroll effect */
 @keyframes scrollLinear {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(calc(-280px * 6 - 12px * 6));
     /* translate full width of one set */
   }
 }

 .scrap-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   border-radius: 12px;
 }

 .scrap-slider .slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
 }

 .scrap-slider img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   flex-shrink: 0;
 }

 /* Arrows */
 .scrap-prev,
 .scrap-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   color: white;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
   padding: 8px;
   user-select: none;
   z-index: 10;
 }

 .scrap-prev {
   left: 10px;
 }

 .scrap-next {
   right: 10px;
 }

 /* Dots */
 .slider-dots {
   position: absolute;
   bottom: 12px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 6px;
   background: rgba(0, 0, 0, 0.3);
   padding: 6px 12px;
   border-radius: 20px;
 }

 .slider-dots .dot {
   width: 10px;
   height: 10px;
   background: #ccc;
   border-radius: 50%;
   cursor: pointer;
 }

 .slider-dots .dot.active {
   background: #1a73e8;
 }


 /* Modern styled bullet points */
 .pallet-details {
   margin-top: 12px;
   padding-left: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .pallet-details li {
   position: relative;
   padding-left: 28px;
   font-weight: 500;
   color: #2014a4;
   font-size: 0.95rem;
   transition: all 0.3s ease;
 }

 /* Custom bullet using pseudo-element */
 .pallet-details li::before {
   content: "✔";
   /* Can use icons like check, diamond, circle, etc. */
   position: absolute;
   left: 0;
   top: 0;
   font-size: 1rem;
   color: var(--accent);
   background: linear-gradient(135deg, #ff091e, #2014a4);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 /* Add hover glow effect */
 .pallet-details li:hover::before {
   transform: scale(1.2);
   filter: drop-shadow(0 0 6px var(--accent));
 }

 /* ===== Cards ===== */
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
 }

 /* Card styling */
 .card {
   background: #fdfdfd;
   /* light theme color */
   border-radius: var(--radius);
   padding: 20px;
   min-height: 240px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 /* Glow / Emboss effect */
 .glow-card {
   box-shadow: 0 4px 12px rgba(32, 20, 164, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.4);
   border: 2px solid rgba(32, 20, 164, 0.1);
 }

 /* Hover effect */
 .card:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 30px rgba(32, 20, 164, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.4);
 }

 /* Card title */
 .card-title {
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--primary);
   margin-bottom: 12px;
   font-size: 1.2rem;
 }

 /* Icon in title */
 .card-icon {
   font-size: 1.3rem;
 }

 /* ===== About Grid ===== */
 .about-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 20px;
   align-items: stretch;
 }

 @media(max-width:880px) {
   .about-grid {
     grid-template-columns: 1fr;
     gap: 16px;
   }

   .cards-grid {
     grid-template-columns: 1fr;
   }
 }

 .contact-form input,
 .contact-form textarea {
   width: 100%;
   padding: 10px;
   border-radius: 8px;
   border: 1px solid rgba(12, 17, 25, 0.1);
   margin-bottom: 8px;
 }

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

 .footer-light {
   background: #1B3C53;
   color: #F9F5F0;
   padding: 12px 20px;
   font-family: Inter, sans-serif;
   font-size: 0.85rem;
   border-top: 5px solid var(--primary-dark);
 }

 .footer-light-container {
   max-width: 1100px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
 }

 .footer-left span {
   margin-right: 8px;
 }

 .footer-right {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
 }

 .footer-right a {
   color: #F9F5F0;
   text-decoration: none;
   transition: color 0.2s ease;
 }

 .footer-right a:hover {
   color: #F9F5F0;
   /* Keep consistent on hover */
 }

 /* Wrap phone numbers nicely */
 .footer-right .phone-numbers {
   display: flex;
   gap: 12px;
 }

 /* Responsive for mobile */
 @media(max-width:768px) {
   .footer-light-container {
     flex-direction: column;
     text-align: center;
     gap: 6px;
   }

   .footer-right {
     justify-content: center;
   }

   .footer-right .phone-numbers {
     flex-direction: column;
     gap: 4px;
   }
 }
 /* Scrolling Cards */
 .scrolling-cards-wrapper {
   width: 100%;
   overflow: hidden;
   margin-top: 32px;
   display: flex;
   justify-content: center;
 }

 .scrolling-cards {
   display: flex;
   gap: 20px;
   animation: scrollCards 40s linear infinite;
   /* slower, smoother */
 }

 .card-item {
   flex: 0 0 auto;
   background: linear-gradient(135deg, #F9F8F6, #EFE9E3);
   color: #43334C;
   font-weight: 600;
   padding: 16px 24px;
   border-radius: 14px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   transform: translateY(0);
   transition: transform 0.3s, box-shadow 0.3s;
   white-space: nowrap;
 }

 .card-item:hover {
   transform: translateY(-10px) scale(1.05);
   box-shadow: 0 8px 20px rgba(32, 20, 164, 0.8);
 }

 /* Scroll Animation */
 @keyframes scrollCards {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }

   /* half of total width for seamless repeat */
 }

 /* Responsive */
 @media(max-width:880px) {
   .scrolling-cards {
     animation: scrollCards 50s linear infinite;
   }

   .hero-content h1 {
     font-size: clamp(1.8rem, 5vw, 2.8rem);
   }

   .hero-content p {
     font-size: 1rem;
   }

   .card-item {
     padding: 12px 18px;
     font-size: 0.9rem;
   }
 }

 .clients-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 25px;
   margin-top: 30px;
 }

 .client-card {
   background: #ffffff;
   border-radius: 20px;
   padding: 25px 20px 30px;
   text-align: center;
   box-shadow: 0 15px 35px rgba(0, 123, 255, 0.1);
   transition: transform 0.5s ease, box-shadow 0.5s ease;
   position: relative;
   overflow: hidden;
 }

 .client-card::before {
   content: '';
   position: absolute;
   top: -60%;
   left: -60%;
   width: 220%;
   height: 220%;
   background: radial-gradient(circle at center, rgba(0, 123, 255, 0.08), transparent 70%);
   transform: rotate(45deg);
   transition: all 0.6s ease;
 }

 .client-card:hover::before {
   top: -30%;
   left: -30%;
   transform: rotate(0deg);
 }

 .client-card:hover {
   transform: translateY(-12px);
   box-shadow: 0 20px 45px rgba(0, 123, 255, 0.2);
 }

 .client-logo {
   width: 90px;
   height: 90px;
   object-fit: contain;
   margin-bottom: 15px;
   border-radius: 50%;
   background: #e6f0fa;
   padding: 10px;
   transition: transform 0.5s ease, box-shadow 0.5s ease;
 }

 .client-card:hover .client-logo {
   transform: scale(1.15);
   box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
 }

 .client-name {
   font-weight: 700;
   font-size: 1.1rem;
   color: #0077b6;
   margin-bottom: 6px;
   transition: color 0.3s ease;
 }

 .client-desc {
   font-size: 0.9rem;
   color: #555;
   line-height: 1.4;
   margin-top: 5px;
 }

 .client-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   background: #0077b6;
   color: #fff;
   font-size: 0.75rem;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 12px;
   text-transform: uppercase;
   box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
 }

 @media (max-width: 768px) {
   .client-logo {
     width: 70px;
     height: 70px;
   }

   .client-card {
     padding: 20px 15px 25px;
   }
 }

 .scrap-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 25px;
   margin-top: 30px;
 }

 .scrap-card {
   background: #CBCBCB;
   border-radius: 20px;
   padding: 20px;
   box-shadow: 0 12px 30px rgba(0, 123, 255, 0.08);
   transition: transform 0.5s ease, box-shadow 0.5s ease;
   overflow: hidden;
   position: relative;
 }

 .scrap-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 50px rgba(0, 123, 255, 0.15);
 }

 .card-title {
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 12px;
   color: #000B58;
 }

 .scrap-card p {
   padding-top: 10px;
   color: #000000;
 }

 .scrolling-images {
   overflow: hidden;
   border-radius: 12px;
   margin-bottom: 12px;
   cursor: pointer;
 }

 .scrolling-images-inner {
   display: flex;
   gap: 10px;
   animation: scroll-left 20s linear infinite;
 }

 .scrap-card:hover .scrolling-images-inner {
   animation-play-state: paused;
 }


 @keyframes scroll-left {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 .scrap-details {
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }

 .scrap-details li {
   background: #F9F5F0;
   padding: 8px 12px;
   border-radius: 8px;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
   color: #452829;
 }

 @media (max-width: 768px) {
   .scrolling-images-inner img {
     width: 230px;
     height: 250px;
   }
 }

 .slider-container {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 /* Position dots over image */
 .slider-dots {
   position: absolute;
   bottom: 12px;
   /* distance from bottom */
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 6px;
   z-index: 999;
   padding: 6px 10px;
   background: rgba(0, 0, 0, 0.35);
   /* optional soft background */
   border-radius: 20px;
   /* rounded pill */
   backdrop-filter: blur(4px);
   /* glass effect like your modal */
 }

 .slider-dots .dot {
   height: 10px;
   width: 10px;
   background: #ddd;
   border-radius: 50%;
   cursor: pointer;
 }

 .slider-dots .dot.active {
   background: #1a73e8;
   /* matches your theme */
 }

 /* Arrows */
 .prev,
 .next {
   position: absolute;
   top: 50%;
   font-size: 32px;
   font-weight: bold;
   color: white;
   cursor: pointer;
   padding: 10px;
   transform: translateY(-50%);
   user-select: none;
   transition: 0.3s;
 }

 .prev:hover,
 .next:hover {
   color: #ff091e;
 }

 .prev {
   left: 10px;
 }

 .next {
   right: 10px;
 }


 /* ===========================
   Modern Fancy Modal with Header
   =========================== */
 .modal {
   display: none;
   /* HIDDEN by default */
   position: fixed;
   inset: 0;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   z-index: 9999;
   padding: 20px;
 }


 .modal-wrapper {
   background: rgba(255, 255, 255, 0.07);
   backdrop-filter: blur(8px);
   border-radius: 16px;
   overflow: hidden;

   /* UPDATED SIZE */
   width: 80%;
   /* was 60% */
   max-width: 900px;
   /* was 600px */
   max-height: 90vh;
   /* was 95vh */

   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
 }

 /* Modal Header */
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: linear-gradient(135deg, #060771, #AAC4F5);
   padding: 12px 20px;
 }

 .modal-title {
   font-weight: 700;
   color: #fff;
   font-size: 1.2rem;
   letter-spacing: 0.5px;
 }

 /* Close button aligned vertically center */
 .modal-header .close {
   font-size: 28px;
   font-weight: 700;
   color: #fff;
   cursor: pointer;
   transition: 0.3s ease;
   line-height: 1;
 }

 .modal-header .close:hover {
   color: #ff091e;
 }

 /* Modal Body */
 .modal-body {
   padding: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .modal-body .modal-content {
   max-width: 100%;
   max-height: 80vh;
   /* was 90vh */
   border-radius: 12px;
   object-fit: contain;
 }

 /* ===========================
   Animations
   =========================== */
 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 @keyframes zoomIn {
   0% {
     opacity: 0;
     transform: scale(0.75);
   }

   100% {
     opacity: 1;
     transform: scale(1);
   }
 }

 @media (max-width: 1024px) {
   .modal-wrapper {
     width: 90%;
     max-width: 750px;
     max-height: 85vh;
   }

   .modal-body .modal-content {
     max-height: 70vh;
   }
 }

 @media (max-width: 768px) {
   .modal-wrapper {
     width: 95%;
     max-width: 95%;
     max-height: 80vh;
   }

   .modal-body .modal-content {
     max-height: 60vh;
   }
 }

 @media (max-width: 480px) {
   .modal-wrapper {
     width: 100%;
     max-height: 75vh;
   }

   .modal-body .modal-content {
     max-height: 55vh;
   }
 }

 /* ===== Contact Section Base ===== */
 .contact-section {
   padding: 50px 20px;
   background: #f5f7fb;
 }

 .contact-container {
   max-width: 1200px;
   margin: auto;
   display: grid;
   grid-template-columns: 3fr 1fr;
   gap: 25px;
 }

 /* ===== Contact Card ===== */
 .contact-card {
   background: #ffffff;
   border-radius: 18px;
   padding: 28px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 /* ===== Company Header ===== */
 .company-header {
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .company-logo {
   width: 60px;
   height: 60px;
   object-fit: contain;
 }

 .company-header h2 {
   margin: 0;
   font-size: 1.6rem;
   font-weight: 700;
 }

 /* ===== Section Titles ===== */
 .contact-details h3,
 .working-hours h3,
 .contact-form h3,
 .map-title {
   margin-bottom: 10px;
   font-size: 1.25rem;
   color: var(--primary);
   font-weight: 700;
 }

 /* ===== Form Inputs ===== */
 .contact-form input,
 .contact-form textarea {
   width: 100%;
   padding: 12px 14px;
   margin-bottom: 12px;
   border: 1px solid #d8d8d8;
   border-radius: 10px;
   font-size: 15px;
   box-sizing: border-box;
 }

 /* Send Button */
 .send-btn {
   width: 100%;
   padding: 14px 16px;
   background: linear-gradient(135deg, #1A73E8, #5595F7);
   border: none;
   color: white;
   font-size: 16px;
   font-weight: 600;
   border-radius: 10px;
   cursor: pointer;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .send-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 14px rgba(0, 119, 255, 0.35);
 }

 /* ===== Map ===== */
 .contact-card-right iframe {
   width: 100% !important;
   height: 280px !important;
   border: 0;
   border-radius: 12px;
 }

 /* ===== Address Box ===== */
 .contact-address-box {
   background: #f0f5ff;
   padding: 16px;
   border-left: 4px solid #1A73E8;
   border-radius: 12px;
 }

 .contact-address-box h4 {
   margin: 0 0 6px 0;
   font-size: 1.1rem;
   font-weight: 600;
 }

 /* ===== Mobile Responsiveness ===== */
 @media (max-width: 900px) {
   .contact-container {
     grid-template-columns: 1fr;
     gap: 20px;
   }

   .contact-card {
     padding: 20px;
   }

   .company-header {
     justify-content: center;
     text-align: center;
     flex-direction: column;
   }

   .company-header h2 {
     font-size: 1.4rem;
   }

   .contact-details,
   .working-hours,
   .contact-form {
     text-align: center;
   }

   .contact-form input,
   .contact-form textarea,
   .send-btn {
     width: 100%;
     font-size: 14px;
     padding: 10px;
   }

   .send-btn {
     font-size: 15px;
     padding: 12px;
   }

   .contact-card-right iframe {
     height: 220px !important;
   }
 }

 /* Optional: show pointer cursor on hover */
 .logo,
 .logo-text {
   cursor: pointer;
 }

 /* ===== White Wood Treatment Section ===== */
 #white-wood-treatment {
   padding: 60px 0;
   background: #f9f9f9;
 }

 #white-wood-treatment .section-head {
   font-size: 2.2rem;
   font-weight: 700;
   text-align: center;
   margin-bottom: 20px;
   color: #1a73e8;
 }

 #white-wood-treatment .section-sub {
   font-size: 1rem;
   text-align: center;
   color: #555;
   max-width: 900px;
   margin: 0 auto 40px;
 }

 /* Cards Grid */
 #white-wood-treatment .cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 20px;
   margin-bottom: 50px;
 }

 /* Glow Card Style */
 #white-wood-treatment .glow-card {
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 4px 20px rgba(26, 115, 232, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.2);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 #white-wood-treatment .glow-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 24px rgba(26, 115, 232, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.2);
 }

 #white-wood-treatment .glow-card .card-title {
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
   color: #0077b6;
 }

 #white-wood-treatment .glow-card .card-title .card-icon {
   font-size: 1.4rem;
 }

 /* List inside cards */
 #white-wood-treatment .glow-card ul,
 #white-wood-treatment .glow-card ol {
   margin-top: 8px;
   padding-left: 20px;
   color: #555;
 }

 #white-wood-treatment .glow-card li {
   margin-bottom: 6px;
   line-height: 1.5;
 }

 /* Additional Notes */
 #white-wood-treatment .additional-notes {
   max-width: 900px;
   margin: 30px auto 0;
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 4px 12px rgba(26, 115, 232, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.2);
 }

 #white-wood-treatment .additional-notes h4 {
   color: #0077b6;
   margin-bottom: 12px;
 }

 #white-wood-treatment .additional-notes ul {
   padding-left: 20px;
 }

 #white-wood-treatment .additional-notes li {
   margin-bottom: 8px;
   line-height: 1.5;
 }

 /* Responsive */
 @media screen and (max-width: 768px) {
   #white-wood-treatment .slides img {
     width: 220px;
     height: 160px;
   }
 }

 /* WhatsApp Chat Button */
 .whatsapp-chat {
   position: fixed;
   bottom: 100px;
   /* Push above scroll button */
   right: 30px;
   background-color: #fff;
   color: #25D366;
   border: 2px solid #25D366;
   font-family: Arial, sans-serif;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 18px;
   border-radius: 50px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   text-decoration: none;
   z-index: 9999;
   transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }

 .whatsapp-chat:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
   background-color: #25D366;
   color: #fff;
 }

 .whatsapp-chat img {
   width: 24px;
   height: 24px;
   transition: filter 0.2s ease;
 }

 .whatsapp-chat:hover img {
   filter: brightness(0) invert(1);
 }

 .whatsapp-chat span {
   display: inline-block;
   font-size: 14px;
 }

 /* Scroll to Top Button */
 #scrollTopBtn {
   display: none;
   position: fixed;
   bottom: 30px;
   /* Keep at the bottom */
   right: 30px;
   z-index: 999;
   background: #FFFDEC;
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   font-size: 24px;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(32, 20, 164, 0.3);
   transition: background 0.3s ease, transform 0.3s ease;
 }

 #scrollTopBtn:hover {
   background: #8EB486;
   transform: translateY(-2px);
 }

 /* ===== Slide-in ===== */
.slide-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .64s ease, transform .64s ease;
}

.slide-in.visible {
  opacity: 1;
  transform: none;
}

/* ===== Wire Menu Container ===== */
.wire-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 30px;
  z-index: 999;
}

/* ===== Wire Node Buttons ===== */
.wire-node {
  position: relative;
  padding: 12px 24px;
  font-weight: 600;
  color: #2014a4; /* dark blue for visibility */
  cursor: pointer;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.1);
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  animation: float 5s ease-in-out infinite alternate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hover Effect */
.wire-node:hover {
  transform: translateY(-4px) scale(1.05);
  color: #BF1A1A;
  border-color: #AAC4F5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2), 0 0 8px #AAC4F5;
}

/* Glow animation */
.wire-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 8px var(--primary);
  opacity: 0.45;
  animation: pulse 2.6s infinite ease-in-out;
}

/* Floating keyframes */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 4px var(--primary); }
  50% { box-shadow: 0 0 14px var(--primary); }
}

/* ===== Dropdown Styling ===== */
.dropdown {
  position: relative;
  color: #2014a4;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  background: rgba(25, 40, 60, 0.95);
  backdrop-filter: blur(12px);
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  animation: dropdownFade 0.3s ease forwards;
}

.dropdown-content a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: #D6F4ED;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}

.dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: 0 0 6px #AAC4F5;
}

/* Arrow icon */
.dropdown::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.dropdown:hover::after {
  transform: rotate(-180deg);
}

/* Dropdown fade animation */
@keyframes dropdownFade {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== Mobile ===== */
.nav-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
}

@media(max-width: 880px) {
  .nav-toggle {
    display: block;
    color: #BF1A1A;
  }

  .wire-menu {
    position: fixed;
    top: 64px;
    right: 12px;
    left: 12px;
    background: linear-gradient(135deg, #2014a4, #AAC4F5);
    padding: 12px;
    flex-direction: column;
    gap: 16px;
    display: none;
    border-radius: 10px;
    z-index: 9999;
  }

  .wire-menu.show {
    display: flex;
  }

  .logo-text {
    display: none !important;
  }

  .dropdown-content {
    position: static;
    background: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    display: none;
  }

  .dropdown.show .dropdown-content {
    display: flex;
    flex-direction: column;
  }
}