.navbar {
       background: #ffffff;
       padding: 12px 0;
       box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
       /* margin-top: 50px; */
     }

     html,
     body {
       overflow-x: hidden;
       width: 100%;
       margin: 0;
       padding: 0;
     }
 
     .navbar-brand {
       padding: 0;
       display: flex;
       align-items: center;
     }

     .logo {
       height: 60px;
       width: auto;
       max-height: 100%;
       object-fit: contain;
       margin-left: 40px;
     }

     .navbar-nav .nav-link {
       font-weight: 500;
       color: #222;
     }

     .navbar-nav .nav-link:hover {
       color: rgb(245, 131, 10);
     }

     .navbar-nav .nav-link.active {
       background: #0e1d3b;
       color: #ffffff !important;
       border-radius: 20px;
     }

     .navbar .dropdown:hover>.dropdown-menu {
       display: block;
       margin-top: 0;

     }

     .navbar-toggler:focus {
       box-shadow: none;
     }

     .dropdown-menu {
       border: none;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
       transform: translateX(10px);
       transition: all 0.2s ease;
       background-color: rgb(255, 255, 255);
     }

     .dropdown:hover .dropdown-menu {
       transform: translateX(-15px);
       pointer-events: auto;
     }

     .dropdown-menu .dropdown-item:hover {
       color: rgb(245, 131, 10);
       background-color: rgb(255, 255, 255);
       transform: scale(1.05);
     }

     .request-btn {
       background: #0b2a3a;
       color: #fff;
       padding: 12px 22px;
       border-radius: 6px;
       font-weight: 500;
       text-decoration: none;
     }

     .request-btn:hover {
       background: #093043;
       color: #fff;
     }

     .top-bar {
       background: #0b2a3a;
       /* dark blue */
       color: #ffffff;
       font-size: 14px;
       margin-top: 90px;
     }

     .top-bar-content {
       display: flex;
       align-items: center;
       gap: 30px;
       padding: 10px 0;
       flex-wrap: wrap;
     }


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

       .navbar-toggler {
         margin-right: 20px;
       }

        .mobile-nav {
    top: 0;
    left: 0;

    height: 100vh;
    width: 260px;
    max-width: 100%;
    background: #ffffff;
    padding: 70px 20px 20px;

    transform: translateX(-100%);
    transition: transform 0.10s ease;

    z-index: 1050;
    overflow-y: auto;
       }

       .mobile-nav.show {
         transform: translateX(0);
       }

       .mobile-nav .navbar-nav {
         align-items: flex-start;
       }

       .mobile-nav .nav-link {
         padding: 12px 0;
         width: 100%;
       }

       .mobile-nav .dropdown-menu {
         position: static;
         display: none;
         border: none;
         box-shadow: none;
         padding-left: 15px;
       }

       .mobile-nav .dropdown-menu.show {
         display: block;
       }
     }





/* 
  .top-info-tag {
  background: linear-gradient(90deg, #0B3C5D, #1F6FAE);
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
 
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.top-info-tag p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.top-info-tag i {
  color: #F2A23A;
  font-size: 15px;
}

.top-info-tag span {
  font-weight: 600;
}

/* Tablet */
@media (max-width: 991px) {
  .top-info-tag {
    font-size: 13px;
    padding: 6px 16px;
  }
}

/* MOBILE – HIDE */
@media (max-width: 768px) {
  .top-info-tag {
    display: none;
  }
} */






     body {
       font-family: 'Poppins', sans-serif;
     }

     /* Image */
     .carousel-img {
       height: 500px;
       width: 100%;
       object-fit: cover;
       filter: brightness(60%);
       margin-top: 1.5%;
     }





     .carousel-inner,
     .carousel-item {
       overflow: visible !important;
     }

     .carousel-item {
       position: relative;
     }

     /* Zoom effect */
     .carousel-item.active .zoom {
       animation: zoomEffect 6s ease-in-out forwards;
     }

     @keyframes zoomEffect {
       from {
         transform: scale(1);
       }

       to {
         transform: scale(1.08);
       }
     }

     /* Overlay */
     .carousel-overlay {
       position: absolute;
       inset: 0;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       padding: 20px;
     }

     /* HEADING */
     .hero-title {
       font-size: 52px;
       font-weight: 700;
       color: #ffffff;
       background: linear-gradient(#ffffff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-top: 15%;
     }

     /* Buttons */
     .hero-buttons {
       display: flex;
       gap: 14px;
       flex-wrap: wrap;
       justify-content: center;
       margin-bottom: 18px;
     }

     .hero-buttons span {
       background: rgba(11, 44, 61, 0.9);
       color: #ffffff;
       padding: 10px 20px;
       border-radius: 30px;
       font-size: 14px;
       display: flex;
       align-items: center;
       gap: 8px;
     }

     .hero-buttons a {
       text-decoration: none;
     }

     /* Small text */
     .hero-subtext {
       font-size: 20px;
       color: #f4a62a;
       max-width: 700px;
       line-height: 1.6;
     }

     /* Indicators */
     .carousel-indicators .active {
       background-color: #f4a62a;
     }

     /* Mobile */
     @media (max-width: 768px) {
       .carousel-img {
         height: 380px;
         min-height: 300px;
       }

       .carousel-overlay {
         padding: 15px;
       }

       .hero-title {
         font-size: 24px;
         line-height: 1.2;
         margin-bottom: 14px;
       }

       .hero-buttons {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
         margin-bottom: 14px;
         width: 100%;
         max-width: 320px;
       }

       .hero-buttons span {
         font-size: 12px;
         padding: 8px 10px;
       }

       .hero-subtext {
         font-size: 13px;
         line-height: 1.5;
         padding: 0 8px;
         max-width: 100%;
       }
     }














     :root {
       --primary-blue: #0D3B66;
       --secondary-blue: #1FA2D6;
       --solar-orange: #F2A541;
       --text-muted: #6C757D;
       --bg-light: #F7F9FC;
     }

     .auxeron-showcase {
       background: var(--bg-light);
       font-family: 'Poppins', sans-serif;
     }

     /* HEADER */
     .section-tag {
       font-size: 13px;
       font-weight: 600;
       letter-spacing: 1.5px;
       color: var(--secondary-blue);
     }

     .section-title {
       font-size: 38px;
       font-weight: 700;
       color: var(--primary-blue);
       justify-content: center;
       align-items: center;
       text-align: center;
     }

     .section-subtitle {
       max-width: 700px;
       margin-top: 12px;
       color: var(--text-muted);
       font-size: 16px;
       line-height: 1.6;


     }

     /* IMAGE CARD – GLASS STYLE (REFINED) */
     .image-card {
       position: relative;
       height: 360px;
       border-radius: 22px;
       overflow: hidden;
       box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
     }

     /* =========================
   SERVICE ICON
========================= */
     .service-icon {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;

       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(242, 165, 65, 0.8);

       margin-bottom: 14px;

       color: var(--solar-orange);
       font-size: 20px;

       box-shadow: 0 0 0 rgba(242, 165, 65, 0);
       transition: all 0.35s ease;
     }

     /* =========================
   HEIGHT HIGHLIGHT EFFECT
========================= */
     /* IMAGE – NORMAL STATE (NO ZOOM) */
     .image-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;

       transform: scale(1);
       transition: transform 0.5s ease;
     }

     /* IMAGE – NORMAL STATE (NO ZOOM) */
     .image-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;

       transform: scale(1);
       transition: transform 0.5s ease;
     }

     /* IMAGE – LIGHT ZOOM ON HOVER */
     .image-card:hover img {
       transform: scale(1.06);
       /* light & professional */
     }


     /* Icon highlight on hover */
     .image-card:hover .service-icon {
       background: var(--solar-orange);
       color: var(--primary-blue);
       box-shadow: 0 0 20px rgba(242, 165, 65, 0.8);
     }

     /* =========================
   OVERLAY BORDER EMPHASIS
========================= */
     .image-overlay {
       border-left: 4px solid var(--solar-orange);
     }

     .image-card:hover .image-overlay {
       background: rgba(13, 59, 102, 0.28);
     }

     .image-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     /* GLASS TEXT BOX */
     .image-overlay {
       position: absolute;
       bottom: 20px;
       left: 22px;
       right: 22px;
       height: 52%;

       background: rgba(13, 59, 102, 0.18);
       backdrop-filter: blur(12px);

       border-radius: 16px;

       /* 🔹 BORDER CHANGES */
       border: 1px solid rgba(31, 162, 214, 0.45);
       /* Solar Blue border */
       border-left: 4px solid var(--solar-orange);
       /* Brand accent */

       padding: 22px 20px;
       color: #ffffff;

       transition: all 0.3s ease;
     }

     /* TEXT */
     .image-overlay h4 {
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 6px;
       color: #ffffff;
     }

     .image-overlay p {
       font-size: 14.5px;
       line-height: 1.6;
       color: #eaeaea;
     }

     /* HOVER ENHANCEMENT */
     .image-card:hover .image-overlay {
       background: rgba(13, 59, 102, 0.25);
       border-color: rgba(31, 162, 214, 0.7);
     }

     /* RESPONSIVE */
     @media (max-width: 992px) {
       .section-title {
         font-size: 32px;
       }

       .image-card {
         height: 300px;
       }
     }

     /* =========================
   MOBILE OPTIMIZATION
   ========================= */

     /* =========================
   FORCE MOBILE HORIZONTAL SCROLL
========================= */
     @media (max-width: 768px) {

       /* IMPORTANT: override Bootstrap */
       .services-scroll {
         display: flex !important;
         flex-wrap: nowrap !important;
         /* 🔥 KEY LINE */
         overflow-x: auto !important;
         -webkit-overflow-scrolling: touch;
       }

       /* Each card width */
       .service-scroll-item {
         flex: 0 0 85% !important;
         max-width: 85% !important;
       }

       /* Remove row negative margins issue */
       .services-scroll.row {
         margin-left: 0;
         margin-right: 0;
       }

       .services-scroll .service-scroll-item {
         padding-left: 8px;
         padding-right: 8px;
       }

       /* Hide scrollbar */
       .services-scroll::-webkit-scrollbar {
         display: none;
       }
     }

     @media (max-width: 768px) {

       /* Section padding */
       .auxeron-showcase {
         padding: 36px 16px;
       }


       /* Heading */
       .section-title {
         font-size: 24px;
         line-height: 1.35;
         margin-bottom: 8px;
         word-break: break-word;
       }


       /* Subtitle */
       .section-subtitle {
         font-size: 14.5px;
         line-height: 1.6;
         margin-bottom: 20px;
         max-width: 100%;
         padding-right: 8px;
         text-align: left;
         /* IMPORTANT */
         word-break: normal;
       }

       /* Image card sizing */
       .image-card {
         height: 230px;
         overflow: hidden;
         /* CRITICAL */
       }

       /* Disable hover zoom on touch devices */
       .image-card:hover img {
         transform: scale(1);
       }

       /* Glass overlay */
       .image-overlay {
         position: absolute;
         left: 12px;
         right: 12px;
         bottom: 12px;


         padding: 14px;
         border-radius: 14px;


         max-height: 80%;
         overflow: hidden;


         display: flex;
         flex-direction: column;
         justify-content: flex-end;
       }

       /* Icon size */
       .service-icon {
         width: 34px;
         height: 34px;
         font-size: 17px;
         margin-bottom: 6px;
         flex-shrink: 0;
       }

       /* Text sizes */
       .image-overlay h4 {
         font-size: 16px;
         line-height: 1.3;
         margin-bottom: 4px;
         white-space: normal;
       }

       .image-overlay p {
         font-size: 13.5px;
         line-height: 1.45;
         margin: 0;


         /* prevent overflow */
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
       }
     }

     @media (max-width: 480px) {
       .image-card {
         height: 220px;
       }
     }









     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Segoe UI', sans-serif;
     }

     /* ================= HERO ================= */
     .services-hero {
       background: #0a2540;
       color: #ffffff;
       text-align: center;
       padding: 70px 20px;
     }

     .services-hero h1 {
       font-size: 42px;
     }

     .services-hero p {
       font-size: 18px;
       margin-top: 10px;
       opacity: 0.9;
     }

     /* ================= GRID ================= */
     .services-grid-wrapper {
       background: #0f2d44;
       padding: 80px 60px;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 35px;
     }

     /* ================= SERVICE TILE ================= */
     .service-tile {
       position: relative;
       height: 380px;
       border-radius: 22px;
       overflow: hidden;
       box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
       cursor: pointer;
     }

     .service-tile img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     /* ================= TITLE BAR ================= */
     .service-title-bar {
       position: absolute;
       bottom: 0;
       width: 100%;
       padding: 22px;
       background: rgba(255, 255, 255, 0.95);
       text-align: center;
     }

     .service-title-bar h3 {
       font-size: 22px;
       color: #0a2540;
     }

     /* ================= REVEAL PANEL ================= */
     .service-reveal-panel {
       position: absolute;
       inset: 0;
       background: linear-gradient(rgba(10, 37, 64, 0.95),
           rgba(10, 37, 64, 0.95));
       color: #ffffff;
       padding: 35px;

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

       opacity: 0;
       transform: translateY(100%);
       transition: all 0.4s ease;
     }

     .service-reveal-panel p {
       font-size: 15px;
       line-height: 1.6;
       margin-bottom: 22px;
     }

     /* ================= BUTTON ================= */
     .primary-btn {
       padding: 10px 26px;
       background: #2ca01c;
       color: #ffffff;
       border-radius: 6px;
       text-decoration: none;
       font-size: 14px;
     }

     /* ================= HOVER EFFECT ================= */
     .service-tile:hover .service-reveal-panel {
       opacity: 1;
       transform: translateY(0);
     }

     /* ================= TABLET ================= */
     @media (max-width: 1024px) {
       .services-grid-wrapper {
         grid-template-columns: repeat(2, 1fr);
         padding: 60px 40px;
       }
     }

     /* ================= COMPACT MOBILE VERSION ================= */
     @media (max-width: 576px) {

       /* HERO / OUR SERVICES TITLE */
       .services-hero {
         padding: 30px 14px;
         height: 95px;
         background-color: transparent;
         color: black;
       }

       .services-hero h1 {
         font-size: 22px;
         line-height: 1.2;
       }

       .services-hero p {
         font-size: 13px;
         margin-top: 6px;
       }

       /* GRID */
       .services-grid-wrapper {
         grid-template-columns: 1fr;
         padding: 24px 14px;
         gap: 20px;
         background: #f4f6fb;
       }

       /* CARD */
       .service-tile {
         height: auto;
         border-radius: 14px;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
       }

       .service-tile img {
         height: 160px;
         /* reduced image height */
       }

       /* REMOVE DESKTOP TITLE BAR */
       .service-title-bar {
         display: none;
       }

       /* CONTENT */
       .service-reveal-panel {
         position: relative;
         opacity: 1;
         transform: none;
         background: #ffffff;
         color: #0a2540;
         padding: 16px 16px 18px;
         /* reduced padding */
         align-items: flex-start;
         text-align: left;
       }

       .service-reveal-panel p {
         font-size: 13px;
         line-height: 1.5;
         margin-bottom: 14px;
         color: #444;
       }

       /* BUTTON */
       .primary-btn {
         width: 100%;
         padding: 10px 0;
         font-size: 13px;
         border-radius: 6px;
         text-align: center;
       }
     }














     :root {
       --primary-blue: #0b3c5d;
       --secondary-blue: #1fa2d6;
       --energy-orange: #f2a022;
       --light-bg: #f8f9fa;
     }

     /* Global */
     body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       background-color: var(--light-bg);
     }

     /* Section */
     .features-section {
       background-color: #ffffff;
     }

     /* Titles */
     .section-title {
       color: var(--primary-blue);
       font-weight: 700;
     }

     .section-subtitle {
       color: #555;
       max-width: 800px;
       margin: auto;
     }

     /* Feature Cards */
     .feature-card {
       border: none;
       border-radius: 16px;
       background-color: #ffffff;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
       transition: all 0.3s ease;
     }

     .feature-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
     }

     /* Icons */
     .feature-icon {
       font-size: 48px;
       color: var(--energy-orange);
     }

     /* Card Titles */
     .feature-title {
       color: var(--primary-blue);
       font-weight: 600;
     }

     /* Feature List */
     .feature-list {
       list-style: none;
       padding-left: 0;
       color: #444;
     }

     .feature-list li {
       margin-bottom: 6px;
       position: relative;
       padding-left: 16px;
     }

     .feature-list li::before {
       content: "•";
       color: var(--energy-orange);
       position: absolute;
       left: 0;
     }

     /* Trust Bar */
     .trust-bar {
       background: linear-gradient(90deg,
           var(--primary-blue),
           var(--secondary-blue));
       color: #ffffff;
       border-radius: 16px;
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
     }

     /* =========================
   TABLET RESPONSIVE (≤ 991px)
========================= */
     @media (max-width: 991px) {

       .section-title {
         font-size: 28px;
       }

       .section-subtitle {
         font-size: 15px;
         padding: 0 10px;
       }

       .feature-card {
         padding: 24px !important;
       }

       .feature-icon {
         font-size: 42px;
       }

       .feature-title {
         font-size: 18px;
       }

       .feature-list li {
         font-size: 14px;
       }

       .trust-bar h5 {
         font-size: 18px;
       }

       .trust-bar p {
         font-size: 14px;
       }
     }

     /* =========================
   MOBILE RESPONSIVE (≤ 576px)
========================= */
     /* =========================
   MOBILE ONLY – INTEGRATED SOLUTIONS
========================= */
     @media (max-width: 576px) {

       /* Section spacing */
       section.py-5 {
         padding-top: 40px !important;
         padding-bottom: 40px !important;
       }

       /* Heading */
       .section-title {
         font-size: 24px;
         font-weight: 700;
         color: var(--primary-blue);
         line-height: 1.3;
       }

       .section-subtitle {
         font-size: 14.5px;
         color: #555;
         line-height: 1.6;
         padding: 0 6px;
       }

       /* Feature card */
       .feature-card {
         padding: 22px !important;
         border-radius: 16px;
         text-align: left;
       }

       /* Icon */
       .feature-icon {
         text-align: center;
         margin-bottom: 10px;
       }

       .feature-icon i {
         font-size: 34px;

         color: var(--secondary-blue);
       }

       /* Title */
       .feature-title {
         font-size: 16.5px;
         font-weight: 600;
         color: var(--primary-blue);
         margin-bottom: 6px;
       }

       /* Description */
       .feature-card p {
         font-size: 14px;
         color: #555;
         line-height: 1.6;
         margin-bottom: 10px;
       }

       /* List */
       .feature-card ul {
         margin-top: 8px;
       }

       .feature-card ul li {
         font-size: 13.5px;
         color: #444;
         margin-bottom: 5px;
       }

       /* Trust bar */
       .highlight-bar {
         padding: 20px;
         border-radius: 14px;
         text-align: center;
       }

       .highlight-bar h5 {
         font-size: 16px;
         font-weight: 600;
       }

       .highlight-bar p {
         font-size: 13px;
         opacity: 0.9;
       }
     }








     /* =========================
   SOLAR DESIGN MODEL 2
========================= */

     .solar-model-2 {
       background: #ffffff;
     }

     .solar-heading {
       color: var(--primary-blue);
       font-weight: 600;
       margin-bottom: 15px;
     }

     .solar-text {
       color: #444;
       line-height: 1.7;
       margin-bottom: 12px;
     }

     .solar-types span {
       display: inline-block;
       background: #f1f6fb;
       color: var(--primary-blue);
       padding: 6px 14px;
       border-radius: 20px;
       font-size: 14px;
       margin: 5px 6px 0 0;
     }

     /* Process Flow */
     .solar-process {
       border-left: 3px solid var(--secondary-blue);
       padding-left: 25px;
     }

     .process-step {
       display: flex;
       gap: 15px;
       margin-bottom: 25px;
     }

     .process-step span {
       min-width: 40px;
       height: 40px;
       background: var(--energy-orange);
       color: #fff;
       font-weight: 600;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
     }

     .process-step h6 {
       margin: 0;
       font-weight: 600;
       color: var(--primary-blue);
     }

     .process-step p {
       margin: 4px 0 0;
       font-size: 14px;
       color: #555;
     }

     /* Advantage Strip */
     .solar-advantages {
       background: linear-gradient(90deg,
           var(--primary-blue),
           var(--secondary-blue));
       color: #fff;
       padding: 30px 20px;
       border-radius: 16px;
     }

     .solar-advantages h5 {
       font-weight: 600;
       margin-bottom: 4px;
     }

     .solar-advantages p {
       font-size: 14px;
       margin: 0;
     }

     /* =========================
   SOLAR BACKGROUND UPGRADE
========================= */

     .solar-bg {
       background-image: url("Images/solar1.jpeg");
       /* CHANGE IMAGE */
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       position: relative;
     }

     .solar-bg-overlay {
       background: linear-gradient(
           /* rgba(11, 60, 93, 0.88), */
           /* rgba(11, 60, 93, 0.88) */
         );
     }

     /* Improve contrast on dark background */
     .solar-process h6 {
       color: #ffffff;
     }

     .solar-process p {
       color: #e0e0e0;
     }

     .solar-types span {
       background: rgba(255, 255, 255, 0.12);
       color: #ffffff;
     }

     /* Advantage strip stays strong */
     .solar-advantages {
       background: linear-gradient(90deg,
           var(--primary-blue),
           var(--secondary-blue));
       color: #ffffff;
       padding: 30px 20px;
       border-radius: 16px;
     }

     /* =========================
   RESPONSIVE
========================= */
     @media (max-width: 768px) {

       .solar-bg-overlay {
         padding: 60px 0;
       }

       .solar-heading {
         font-size: 20px;
       }

       .solar-types span {
         font-size: 13px;
       }
     }

     /* =========================
   RESPONSIVE
========================= */
     @media (max-width: 768px) {

       .solar-process {
         padding-left: 15px;
       }

       .process-step span {
         min-width: 34px;
         height: 34px;
         font-size: 14px;
       }

       .solar-types span {
         font-size: 13px;
       }
     }

     /* =========================
   SOLAR – ULTRA REDUCED MOBILE
========================= */
     @media (max-width: 576px) {

       /* Section spacing */
       .solar-bg-overlay {
         padding: 32px 0 !important;
       }

       /* Header */
       .solar-model-2 .section-title {
         font-size: 22px;
         line-height: 1.25;
         margin-bottom: 6px;
       }

       .solar-model-2 .section-subtitle {
         font-size: 13.5px;
         line-height: 1.45;
         padding: 0 10px;
         opacity: 0.9;
       }

       /* Left content */
       .solar-heading {
         font-size: 16.5px;
         margin-bottom: 6px;
       }

       /* 🔴 SHOW ONLY FIRST PARAGRAPH */
       .solar-text {
         font-size: 13.5px;
         line-height: 1.45;
         margin-bottom: 8px;
       }

       .solar-text+.solar-text {
         display: none;
       }

       /* Chips – minimal */
       .solar-types {
         gap: 6px;
         margin-top: 8px;
       }

       .solar-types span {
         font-size: 12px;
         padding: 4px 9px;
         border-radius: 16px;
         background: rgba(255, 255, 255, 0.14);
       }

       /* Process – TITLE ONLY */
       .solar-process {
         margin-top: 14px;
       }

       .process-step {
         padding: 10px;
         margin-bottom: 8px;
         border-radius: 12px;
         background: rgba(255, 255, 255, 0.08);
       }

       .process-step span {
         width: 30px;
         height: 30px;
         font-size: 13px;
       }

       .process-step h6 {
         font-size: 13.5px;
         margin-bottom: 0;
       }

       /* 🔴 HIDE PROCESS DESCRIPTION */
       .process-step p {
         display: none;
       }

       /* Advantages – compact */
       .solar-advantages {
         margin-top: 16px;
         padding: 14px;
         border-radius: 14px;
       }

       .solar-advantages h5 {
         font-size: 13.5px;
       }

       .solar-advantages p {
         font-size: 12px;
       }
     }













     /* =========================
   AUXERON ELECTRICAL – MODEL 11
========================= */

     /* SECTION DEPTH BACKGROUND */
     .auxeron-electrical-model10 {
       background: linear-gradient(180deg,
           #f8fafc 0%,
           #ffffff 40%,
           #f8fafc 100%);
     }

     /* FIXED IMAGE VISIBILITY */
     .capability-img img,
     .electrical-thumb img {
       width: 90px;
       height: 70px;
       object-fit: contain;
       /* SHOW FULL IMAGE */
       background-color: #f4f6f8;
       /* CLEAN BACKGROUND */
       padding: 6px;
       border-radius: 6px;
     }

     /* Image */
     .electrical-image-wrap img {
       width: 100%;
       height: 700px;
       border-radius: 28px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
     }

     /* Titles */
     .model11-title {
       font-size: 36px;
       font-weight: 700;
       color: var(--primary-blue);
     }

     .model11-intro {
       font-size: 16px;
       color: #555;
       line-height: 1.7;
     }

     /* Info boxes */
     .info-box {
       background: #ffffff;
       padding: 18px 22px;
       border-radius: 16px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
       margin-top: 18px;
     }

     .info-box h5 {
       font-size: 18px;
       font-weight: 600;
       color: var(--primary-blue);
       margin-bottom: 6px;
     }

     .info-box p {
       font-size: 14.5px;
       color: #555;
       margin-bottom: 0;
       line-height: 1.6;
     }

     /* =========================
   VISUAL ENHANCEMENT – MODEL 10
========================= */

     /* Capability Row Enhancement */
     .capability-row {
       display: grid;
       grid-template-columns: 90px 1fr;
       gap: 24px;
       padding: 22px 22px;
       margin-bottom: 18px;

       background: #ffffff;
       border-radius: 16px;

       border-left: 5px solid transparent;
       box-shadow:
         0 8px 20px rgba(0, 0, 0, 0.05),
         inset 0 0 0 1px rgba(0, 0, 0, 0.04);

       transition: all 0.35s ease;
     }

     .capability-row:hover {
       border-left-color: var(--energy-orange);
       box-shadow:
         0 14px 35px rgba(0, 0, 0, 0.08),
         inset 0 0 0 1px rgba(31, 162, 214, 0.12);
       transform: translateY(-3px);
     }

     /* Icon Styling */
     .capability-text h4 {
       display: flex;
       align-items: center;
       gap: 10px;

       font-size: 19px;
       font-weight: 600;
       color: var(--primary-blue);
     }

     .capability-text h4 i {
       font-size: 20px;
       color: var(--secondary-blue);

       background: rgba(31, 162, 214, 0.12);
       padding: 6px;
       border-radius: 8px;
     }

     /* Improve text readability */
     .capability-text p {
       margin-top: 6px;
       margin-left: 38px;

       font-size: 14.6px;
       line-height: 1.7;
       color: #555;
     }

     /* Image refinement (already fixed cropping) */
     .capability-img img {
       width: 90px;
       max-height: 70px;
       object-fit: contain;

       background: linear-gradient(135deg,
           #f4f6f8,
           #ffffff);

       padding: 8px;
       border-radius: 10px;
       border: 1px solid #e2e6ea;
     }

     /* Responsive */
     @media (max-width: 768px) {

       .model11-title {
         font-size: 28px;
       }
 .electrical-image-wrap img{
  height: 500px;
 }
       .electrical-image-wrap {
         margin-bottom: 20px;
       }
     }

     /* =========================
   ELECTRICAL MODEL 11 – MOBILE ONLY
========================= */
     @media (max-width: 576px) {

       /* Section spacing */
       .auxeron-electrical-model11 {
         padding-top: 32px !important;
         padding-bottom: 32px !important;
       }

       /* Reorder content */
       .auxeron-electrical-model11 .row {
         display: flex;
         flex-direction: column;
       }


       /* Text column first */
       .auxeron-electrical-model11 .col-lg-6:last-child {
         order: 1;
       }


       /* Image column second */
       .auxeron-electrical-model11 .col-lg-6:first-child {
         order: 2;
       }


       /* Image styling */
       .electrical-image-wrap img {
         width: 100%;
         border-radius: 14px;
         height: 300px;
         margin: 8px 0 16px;
       }

       /* Reorder layout (image below heading) */
       .auxeron-electrical-model11 .row {
         display: flex;
         flex-direction: column;
       }

       .auxeron-electrical-model11 .col-lg-6:first-child {
         order: 2;
         /* image */
       }

       .auxeron-electrical-model11 .col-lg-6:last-child {
         order: 1;
         /* text */
       }

       /* Company name */
       .company-name {
         display: none;

       }

       .model11-title {
         font-size: 20.5px;
         font-weight: 700;
         line-height: 1.25;
         margin-bottom: 10px;
         color: var(--primary-blue);
         text-align: center;
       }

       /* Image */
       .electrical-image-wrap img {
         width: 100%;
         border-radius: 14px;
         margin: 12px 0 16px;
       }

       /* Intro reduced */
       .model11-intro {
         font-size: 13.5px;
         line-height: 1.45;
         margin-bottom: 12px;
       }


       /* Compact info boxes */
       .info-box {
         padding: 12px;
         margin-bottom: 10px;
         border-radius: 12px;
         background: #f8fafc;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       }


       .info-box h4 {
         font-size: 14px;
         display: flex;
         gap: 6px;
         align-items: center;
         margin-bottom: 2px;
       }


       .info-box h4 i {
         font-size: 16px;
         color: var(--secondary-blue);
       }


       .info-box p {
         font-size: 12.8px;
         line-height: 1.4;
         margin: 0;
       }

     }













     /* =========================
   AUXERON CCTV – MODEL 13
========================= */

     .auxeron-cctv-model13 {
       background: linear-gradient(180deg, #f8fafc, #ffffff);
     }

     /* Title */
     .cctv13-title {
       font-size: 38px;
       font-weight: 700;
       color: var(--primary-blue);
     }

     .cctv13-intro {
       font-size: 16px;
       color: #555;
       line-height: 1.7;
     }

     /* Card */
     .cctv-card {
       background: #ffffff;
       border-radius: 22px;
       overflow: hidden;
       height: 100%;

       box-shadow:
         0 12px 35px rgba(0, 0, 0, 0.08),
         inset 0 0 0 1px rgba(0, 0, 0, 0.04);

       transition: transform 0.35s ease, box-shadow 0.35s ease;
     }

     .cctv-card:hover {
       transform: translateY(-6px);
       box-shadow:
         0 20px 50px rgba(0, 0, 0, 0.12),
         inset 0 0 0 1px rgba(31, 162, 214, 0.15);
     }

     /* IMAGE ZOOM ON HOVER */
     .cctv-card img {
       transition: transform 0.5s ease;
     }

     .cctv-card:hover img {
       transform: scale(1.08);
     }

     /* Image */
     .cctv-card img {
       width: 100%;
       height: 200px;
       object-fit: cover;
       transition: transform 0.5s ease;
     }

     /* Body */
     .cctv-card-body {
       padding: 22px;
     }

     .cctv-card-body i {
       font-size: 24px;
       color: #ffffff;

       background: linear-gradient(135deg,
           var(--secondary-blue),
           var(--energy-orange));

       padding: 10px;
       border-radius: 12px;
       margin-bottom: 12px;
       display: inline-block;
     }

     .cctv-card-body h5 {
       font-size: 19px;
       font-weight: 600;
       color: var(--primary-blue);
       margin-bottom: 8px;
     }

     .cctv-card-body p {
       font-size: 14.8px;
       color: #555;
       line-height: 1.65;
       margin-bottom: 0;
     }

     /* SCROLL ANIMATION BASE */
     .animate-left,
     .animate-right {
       opacity: 0;
       transform: translateX(60px);
       transition: all 0.8s ease;
     }

     .animate-left {
       transform: translateX(-60px);
     }

     /* ACTIVE STATE */
     .animate-left.show,
     .animate-right.show {
       opacity: 1;
       transform: translateX(0);
     }

     .cctv-card-body i {
       font-size: 24px;
       color: var(--primary-blue);
       /* icon color */
       background: none;
       /* REMOVE gradient */
       padding: 0;
       /* remove extra space */
       border-radius: 0;
     }

     .cctv-card-body i {
       font-size: 22px;
       color: var(--secondary-blue);

       border: 1.5px solid rgba(31, 162, 214, 0.4);
       padding: 8px;
       border-radius: 8px;
       background: none;
     }

     /* Responsive */
     @media (max-width: 768px) {
       .cctv13-title {
         font-size: 28px;
       }

       .cctv-card img {
         height: 180px;
       }
     }

     /* =========================
   CCTV MODEL 13 – MOBILE ONLY
========================= */
     @media (max-width: 576px) {

       /* Section spacing */
       .auxeron-cctv-model13 {
         padding-top: 32px !important;
         padding-bottom: 32px !important;
       }

       /* Heading */
       .auxeron-cctv-model13 .company-name {
         font-size: 12px;
         letter-spacing: 0.4px;
         opacity: 0.85;
         display: block;
         margin-bottom: 4px;
         display: none;
       }

       .cctv13-title {
         font-size: 21px;
         line-height: 1.25;
         font-weight: 700;
         margin-bottom: 8px;
       }

       .cctv13-intro {
         font-size: 13.5px;
         line-height: 1.45;
         margin-bottom: 14px;
         color: #555;
       }

       /* Grid spacing */
       .auxeron-cctv-model13 .row.g-4 {
         row-gap: 16px;
       }

       /* Card container */
       .cctv-card {
         border-radius: 14px;
         overflow: hidden;
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
       }

       /* Image – smaller & clean */
       .cctv-card img {
         width: 100%;
         height: 160px;
         object-fit: cover;
       }

       /* Card body */
       .cctv-card-body {
         padding: 12px;
       }

       /* Icon */
       .cctv-card-body i {
         font-size: 16px;
         color: var(--secondary-blue);
         margin-bottom: 4px;
         display: inline-block;
       }

       /* Title */
       .cctv-card-body h5 {
         font-size: 14.5px;
         font-weight: 600;
         margin-bottom: 4px;
         color: var(--primary-blue);
       }

       /* 🔴 REDUCED TEXT */
       .cctv-card-body p {
         font-size: 12.8px;
         line-height: 1.4;
         margin: 0;
         color: #555;
       }

       /* Disable hover effects on mobile */
       .cctv-card:hover {
         transform: none;
       }

     }










     /* =========================
   AUXERON CONSTRUCTION – MODEL 14
========================= */

     .auxeron-construction-model14 {
       background: linear-gradient(180deg, #ffffff, #f8fafc);
     }

     /* Titles */
     .construction-title {
       font-size: 36px;
       font-weight: 700;
       color: var(--primary-blue);
     }

     .construction-intro {
       font-size: 16px;
       color: #555;
       line-height: 1.7;
     }

     /* Timeline */
     .construction-timeline {
       position: relative;
       margin-left: 20px;
     }

     .construction-timeline::before {
       content: "";
       position: absolute;
       left: 22px;
       top: 0;
       bottom: 0;
       width: 3px;
       background: linear-gradient(to bottom,
           var(--secondary-blue),
           var(--energy-orange));
       border-radius: 3px;
     }

     /* Timeline Item */
     .timeline-item {
       display: flex;
       gap: 30px;
       margin-bottom: 40px;
       position: relative;
     }

     .timeline-item:last-child {
       margin-bottom: 0;
     }

     /* Image */
     .timeline-img {
       position: relative;
       z-index: 2;
     }

     .timeline-img img {
       width: 110px;
       height: 90px;
       object-fit: cover;
       border-radius: 14px;
       background: #ffffff;
       padding: 6px;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     }

     /* Content */
     .timeline-content h4 {
       font-size: 20px;
       font-weight: 600;
       color: var(--primary-blue);
       margin-bottom: 6px;
     }

     .timeline-content p {
       font-size: 14.8px;
       color: #555;
       line-height: 1.65;
       margin: 0;
     }

     /* Responsive */
     @media (max-width: 768px) {

       .construction-title {
         font-size: 28px;
       }

       .construction-timeline {
         margin-left: 0;
       }

       .construction-timeline::before {
         left: 12px;
       }

       .timeline-item {
         gap: 16px;
       }

       .timeline-img img {
         width: 90px;
         height: 75px;
       }
     }

     /* =========================
   CONSTRUCTION – MOBILE ONLY
========================= */
     @media (max-width: 576px) {

       /* Section spacing */
       .auxeron-construction-section,
       .auxeron-construction-model14 {
         padding-top: 32px !important;
         padding-bottom: 32px !important;
       }

       /* Company name */
       .auxeron-construction-section .company-name {
         font-size: 12px;
         letter-spacing: 0.4px;
         opacity: 0.85;
         margin-bottom: 4px;
         display: block;
       }

       /* Heading */
       .construction-title,
       .construction-heading {
         font-size: 21px;
         font-weight: 700;
         line-height: 1.25;
         margin-bottom: 8px;
         color: var(--primary-blue);
         text-align: center;
       }

       /* Intro – REDUCED */
       .construction-intro {
         font-size: 13.5px;
         line-height: 1.45;
         margin-bottom: 14px;
         color: #555;
       }

       /* Timeline / rows spacing */
       .construction-timeline,
       .construction-steps {
         margin-top: 10px;
       }

       /* Construction step / card */
       .timeline-item,
       .construction-card {
         display: flex;
         gap: 10px;
         padding: 12px;
         margin-bottom: 10px;
         border-radius: 12px;
         background: #f8fafc;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       }

       /* Image – compact */
       .timeline-img img,
       .construction-card img {
         width: 80px;
         height: 65px;
         object-fit: cover;
         border-radius: 8px;
         flex-shrink: 0;
       }

       /* Content */
       .timeline-content h4,
       .construction-card h4 {
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 2px;
         color: var(--primary-blue);
       }

       /* 🔴 Reduced text */
       .timeline-content p,
       .construction-card p {
         font-size: 12.8px;
         line-height: 1.4;
         margin: 0;
         color: #555;
       }

     }










     * BASE */ body {
       padding-top: 50px;
       background: #f6f9fc;
       font-family: "Segoe UI", Roboto, Arial, sans-serif;
     }

     /* HERO */
     .contact-hero {
       height: 60px;
       background:
         linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
         url("file:///C:/Users/91628/Desktop/photo-1542332213-31f87348057f.jpg") center / cover no-repeat;
       display: flex;
       align-items: center;
       justify-content: center;
     }

     .hero-box {
       padding: 20px 55px;
       border-radius: 20px;
       background: none;

     }

     .hero-box h1 {
       color: #fff;
       font-size: 42px;
       font-weight: 700;
       margin: 0;
     }

     /* MAIN CARD */
     .main-card {
       margin-top: 60px;
     }

    /* IMAGE */
.contact-image {
   background-image: url("Images/contactimage1.jpeg");
    background-size: cover;
     background-position: center;
       background-repeat: no-repeat;
       position: relative;
       min-height: 100%;
} 

     /* FORM */
     .form-panel {
       background: var(--light-blue);
     }

     .form-panel h3 {
       color: var(--dark);
     }

     .form-control {
       border-radius: 10px;
       padding: 12px 14px;
     }



     /* CONTACT INFO */
     .contact-info {
       background: #1f2937;
       color: #fff;
       border-radius: 14px;
     }




     .icon-circle {
       width: 44px;
       height: 44px;
       background: #fff;
       color: #1f2937;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       margin-right: 12px;
     }

     /* BUTTON */
     .btn-primary {
       background: #1f2937;
       border: none;
       border-radius: 10px;
       padding: 10px 28px;
     }

     /* WHATSAPP */
     .whatsapp-float {
       position: fixed;
       bottom: 20px;
       right: 20px;
       width: 55px;
       height: 55px;
       background: #25d366;
       color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 26px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
       z-index: 999;
       text-decoration: none;
     }

   /* MOBILE */
@media(min-width:321px) and (max-width: 767px) {
  .contact-hero {
    height: 200px;
  }
  .icon-circle{
    width:36px;
    height: 36px;
  }

  .hero-box h1 {
    font-size: 30px;
  }

  .main-card {
    margin-top: 0;
  }

  .contact-image {

    min-height: 220px;
  }
    .contact-info {
    margin: 0 16px;      /* safe mobile spacing */
    text-align: left;
  }

  .contact-info .row > div {
    justify-content: flex-start;
  }
  

}
@media(min-width:768px) and (max-width: 1023px) {
  .contact-hero {
    height: 200px;
  }
  .icon-circle{
    width:36px;
    height: 36px;
  }

  .hero-box h1 {
    font-size: 30px;
  }

  .main-card {
    margin-top: 0;
  }

  .contact-image {

    min-height: 340px;
  
  }
    .contact-info {
    margin: 0 16px;      /* safe mobile spacing */
    text-align: left;
  }

  .contact-info .row > div {
    justify-content: flex-start;
  }
  

}













     .footer {
       background: #0e1d3b;
       padding: 60px 0;
       font-size: 15px;
       border-top: 1px solid rgb(245, 131, 10);
       border-bottom: 1px solid rgb(245, 131, 10);
     }

     .footer-logo {
       height: 120px;
       margin-bottom: 15px;
       margin-left: 60px;
     }

     .footer-text {
       color: #fdfcfc;
       line-height: 1.8;
       margin-bottom: 20px;
     }

     .footer-title {
       font-weight: 700;
       margin-bottom: 20px;
       font-size: 18px;
       color: #fff;
     }

     .footer-list {
       list-style: none;
       padding: 0;
       color: #fdfcfc;
     }

     .footer-lists {
       list-style: none;
       padding: 0;
       color: #fdfcfc;
     }

     .footer-list li {
       margin-bottom: 12px;
       font-weight: 500;
       cursor: pointer;
     }

     .footer-lists li {
       margin-bottom: 12px;
       font-weight: 500;
       cursor: pointer;
     }

     .footer-list i {
       margin-right: 8px;
     }

     .footer-lists i {
       margin-right: 8px;
     }

     .footer-social a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       background: #000000;
       color: #fff;
       border-radius: 50px;
       margin-right: 8px;
       font-size: 16px;
       text-decoration: none;
     }

     .footer-social a:hover {
       background: rgb(245, 131, 10);
     }

     .footer-list li:hover {
       transform: scale(1.05);
       color: rgb(245, 131, 10);
     }

     .footer-list a:hover {
       transform: scale(1.05);
       color: rgb(245, 131, 10);
     }

     .footer-lists li:hover {
       transform: scale(1.05);
       color: rgb(245, 131, 10);
     }

     .footer-lists a:hover {
       transform: scale(1.05);
       color: rgb(245, 131, 10);
     }

     .footer-bottom {
       padding: 15px 0;
       font-size: 14px;
       color: #ffffff;
       background-color: #0e1d3b;
       display: flex;
     }

     .footer-bottom strong {
       color: #d69a34;
     }

     .footer-bottom a {
       text-decoration: none;
       color: #d69a34;
     }

     .footer-list a {
       text-decoration: none;
       color: #fff;
     }

     .footer-lists a {
       text-decoration: none;
       color: #fff;
     }

     @media (max-width:576px) {
      .footer{
        padding: 3px;
      }
      .footer-logo{
        height: 60px;
        margin-left: 0;
        margin-top: 2px;
      }
       .footer-lists {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         column-gap: 16px;
         row-gap: 10px;
       }

       .footer-list li {
         display: flex;
         align-items: center;
         font-size: 14px;
       }
 .footer-text {
font-size: 13px;
line-height: 1.9;
padding: 0 12px;
}

       .footer-list i {
         margin-right: 6px;
         font-size: 12px;
       }

       .footer-bottom {
         font-size: 10px;
         line-height: 1.4;
         display: inline-block;
         width: 100%;
       }

       .footer-bottom .container {
         padding: 0 10px;
         margin-bottom: 4px;
       }

       .footer-bottom strong {
         font-weight: 600;
       }
     }







     .whatsapp-float {
       position: fixed;
       bottom: 20px;
       right: 20px;
       width: 55px;
       height: 55px;
       background: #25d366;
       color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 26px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
       z-index: 999;
       text-decoration: none;
     }