:root {
        --primary: #0d6efd;
        --secondary: #6c757d;
        --success: #198754;
        --info: #0dcaf0;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #212529;
        --trimplin-blue: #053a83;
        --trimplin-teal: #05cc9e;
        --trimplin-green: #2ed90e;
        --bg: #0b0b0e;
        --surface: #111217;
        --muted: #a4a8b3;
        --text: #e9ecf1;
        --brand: #4f7cff;
        --brand-2: #00d4b3;

        /* New color palette */
        --color1: #06c7e1;
        --color2: #073d85;
        --color3: #adeb07;
        --color4: #25d80e;
        --color5: #05d194;
        --color6: #06d556;
        --color7: #067fb1;
        --color8: #7cdc2e;
        --color9: #07b3a8;
        --color10: #47d999;
      }

      body {
        font-family: "Open Sans", sans-serif;
        color: #333;
        overflow-x: hidden;
        background-color: #f9fafc;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
      }

      /* Navigation */
      .navbar {
        padding: 15px 0;
        transition: all 0.3s ease;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
      }

      .navbar-brand {
        font-weight: 800;
        font-size: 28px;
        color: var(--trimplin-blue);
        display: flex;
        align-items: center;
      }

      .navbar-brand span {
        color: var(--trimplin-teal);
      }

      .nav-link {
        color: var(--trimplin-blue) !important;
        font-weight: 600;
        margin: 0 8px;
        position: relative;
        padding: 8px 12px !important;
        border-radius: 4px;
        transition: all 0.3s ease;
      }

      .nav-link:hover {
        color: white !important;
        background-color: var(--trimplin-blue);
      }

      .btn-primary {
        background: linear-gradient(
          135deg,
          var(--trimplin-blue) 0%,
          var(--trimplin-teal) 100%
        );
        border: none;
        padding: 12px 30px;
        border-radius: 30px;
        font-weight: 600;
        transition: all 0.3s ease;
      }

      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(5, 58, 131, 0.2);
      }

      /* Top Bar */
      .topbar {
        background: linear-gradient(90deg, #0f1118, #151a23);
        color: #cfd5e2;
        padding: 8px 0;
        font-size: 0.9rem;
        text-align: center;
      }

      .topbar span {
        display: inline-flex;
        align-items: center;
        margin: 0 10px;
      }

      /* Hero Section */
      .hero {
        background: linear-gradient(135deg, #60D270 0%, #053a83 100%);
        color: white;
        padding: 120px 0 100px;
        border-radius: 0 0 80px 80px;
        margin-bottom: 50px;
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,128L48,117.3C96,107,192,85,288,112C384,139,480,213,576,224C672,235,768,181,864,165.3C960,149,1056,171,1152,186.7C1248,203,1344,213,1392,218.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
        background-position: center;
      }

      .hero h1 {
        font-weight: 800;
        margin-bottom: 20px;
        font-size: 2.5rem;
      }

      .hero p {
        font-size: 1.3rem;
        margin-bottom: 30px;
        max-width: 600px;
      }

      .btn-hero {
        background: linear-gradient(
          135deg,
          #1a2980 0%,
          var(--trimplin-blue) 100%
        );
        border: none;
        color: #fff !important;;
        font-weight: 700;
        padding: 15px 40px;
        border-radius: 30px;
        margin-right: 15px;
        box-shadow: 0 4px 15px rgba(5, 204, 158, 0.3);
        transition: all 0.3s ease;
      }

      .btn-hero:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(5, 204, 158, 0.4);
        background-color: white !important;
        color: white !important;
      }

      .btn-hero-alt {
        background-color: transparent !important;;
        border: 2px solid white;
        color: white !important;
        font-weight: 600;
        padding: 15px 40px;
        border-radius: 30px;
        transition: all 0.3s ease;
      }

      .btn-hero-alt:hover {
        background-color: white !important;
        border-radius: 30px;
        border-color: var(--trimplin-blue) !important;
        color: var(--trimplin-blue) !important;
      }

      .btn-hero-alt i {
        margin-right: 8px;
        max-width: 100%;
      }

      .hero .container {
          position: relative;
          z-index: 10;
      }

      .hero .btn-hero, 
      .hero .btn-hero-alt {
          position: relative;
          z-index: 11;
      }

      /* HERO SECTION IMAGE */
      .hero img {
        position: absolute;
        bottom: 0;
        right: -10px;
        top: -100px;
        width: 650px;
        height: auto;
        z-index: 1; /* ensure it's visible */
        opacity: 1; /* was 'none' which is invalid */
        transition: all 0.4s ease;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)); /* shadow */
      }

      /* Hover popup effect */
      .hero img:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
        z-index: 2;
      }

      /* ✅ Responsive fix */
      @media (max-width: 768px) {
        .hero img {
          position: relative;
          top: 0;
          right: 0;
          width: 100%;
          max-width: 100%;
          margin-top: 20px;
        }
      }

      /* Doodle Art Elements */
      .doodle-art {
        position: relative;
        height: 400px;
      }

      .doodle-element {
        position: absolute;
        transition: all 0.5s ease;
        opacity: 0.7;
      }

      .doodle-1 {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%2305cc9e' stroke-width='8'/%3E%3Cpath d='M70,100 L90,130 L130,70' fill='none' stroke='%23053a83' stroke-width='10'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .doodle-2 {
        top: 100px;
        right: 20px;
        width: 150px;
        height: 150px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect x='25' y='25' width='100' height='100' fill='none' stroke='%234f7cff' stroke-width='6'/%3E%3Ccircle cx='75' cy='75' r='30' fill='none' stroke='%2300d4b3' stroke-width='6'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .doodle-3 {
        bottom: 50px;
        left: 30px;
        width: 120px;
        height: 120px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpolygon points='60,20 100,100 20,100' fill='none' stroke='%232ed90e' stroke-width='6'/%3E%3Ccircle cx='60' cy='70' r='15' fill='%23053a83'/%3E%3C/svg%3E")
          no-repeat center;
      }

      /* Particle background */
      .particles {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          z-index: 1;
      }
        
      .particle {
          position: absolute;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.3);
          animation: particle-float 15s infinite linear;
      }
      
      @keyframes particle-float {
          0% {
              transform: translateY(100vh) translateX(0);
          }
          100% {
              transform: translateY(-100px) translateX(100px);
          }
      }
      
      /* Glowing effect */
    .glow {
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
        filter: blur(40px);
        z-index: 1;
        animation: glow-move 10s infinite alternate ease-in-out;
      }

      .glow-1 {
          top: -100px;
          right: -100px;
          animation-delay: 0s;
      }

      .glow-2 {
          bottom: -150px;
          left: -100px;
          animation-delay: 2s;
      }

      @keyframes glow-move {
          0% {
              transform: translate(0, 0) scale(1);
              opacity: 0.6;
          }
          50% {
              transform: translate(50px, 50px) scale(1.2);
              opacity: 0.8;
          }
          100% {
              transform: translate(-30px, -30px) scale(0.9);
              opacity: 0.5;
          }
      }

      /* Particle background - CORRECTED */
      .particles {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          z-index: 1;
      }

      .particle {
          position: absolute;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.5);
          animation: particle-float 15s infinite linear;
      }

      @keyframes particle-float {
          0% {
              transform: translateY(100vh) translateX(0) rotate(0deg);
              opacity: 0;
          }
          10% {
              opacity: 0.7;
          }
          90% {
              opacity: 0.7;
          }
          100% {
              transform: translateY(-100px) translateX(100px) rotate(360deg);
              opacity: 0;
          }
      }

      /* Services Section - Enhanced Zigzag Layout */
      .services {
        padding: 80px 0; /* Reduced padding */
        position: relative;
        overflow: hidden;
      }

      .service-row {
        margin-bottom: 80px; /* Reduced margin */
        align-items: center;
        position: relative;
      }

      .service-row:last-child {
        margin-bottom: 40px; /* Reduced margin */
      }

      .service-content {
        padding: 30px; /* Reduced padding */
        position: relative;
        z-index: 2;
      }

      .service-image {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      .service-image img {
        max-width: 100%;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
      }

      /* Hover effect */
      .service-image img:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
      }

      .service-icon {
        font-size: 3rem; /* Slightly smaller */
        margin-bottom: 20px; /* Reduced margin */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 90px; /* Slightly smaller */
        height: 90px; /* Slightly smaller */
        border-radius: 25px;
        color: white;
        background: linear-gradient(
          135deg,
          var(--trimplin-blue) 0%,
          var(--trimplin-teal) 100%
        );
        box-shadow: 0 10px 30px rgba(5, 58, 131, 0.2);
        transition: all 0.4s ease;
      }

      .service-row:hover .service-icon {
        transform: translateY(-8px) rotate(5deg);
        box-shadow: 0 15px 35px rgba(5, 58, 131, 0.3);
      }

      .service-title {
        font-size: 2rem; /* Slightly smaller */
        margin-bottom: 20px; /* Reduced margin */
        color: var(--trimplin-blue);
        position: relative;
        display: inline-block;
      }

      .service-title::after {
        content: "";
        position: absolute;
        bottom: -10px; /* Adjusted */
        left: 0;
        width: 70px;
        height: 5px;
        background: linear-gradient(
          to right,
          var(--trimplin-teal),
          var(--trimplin-green)
        );
        border-radius: 3px;
        transition: width 0.4s ease;
      }

      .service-row:hover .service-title::after {
        width: 100px; /* Adjusted */
      }

      .service-desc {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 20px; /* Reduced margin */
        color: #555;
      }

      .service-features {
        list-style: none;
        padding: 0;
        margin-bottom: 25px; /* Reduced margin */
      }

      .service-features li {
        margin-bottom: 10px; /* Reduced margin */
        padding-left: 30px;
        position: relative;
        color: #555;
        transition: all 0.3s ease;
      }

      .service-features li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        background: linear-gradient(
          135deg,
          var(--trimplin-teal) 0%,
          var(--trimplin-green) 100%
        );
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
      }

      .service-features li:hover {
        transform: translateX(5px);
        color: var(--trimplin-blue);
      }

      .service-doodle {
        height: 400px; /* Reduced height */
        position: relative;
        overflow: hidden;
        border-radius: 25px;
        background: linear-gradient(135deg, #f1f7fd 0%, #e9f2fb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
      }

      .service-row:hover .service-doodle {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
      }

      .doodle-container {
        width: 80%;
        height: 80%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        transition: all 0.5s ease;
      }

      .service-row:hover .doodle-container {
        transform: scale(1.05);
      }

      /* Decorative elements for service rows */
      .service-row::before {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(5, 204, 158, 0.1) 0%,
          rgba(46, 217, 14, 0.1) 100%
        );
        z-index: 0;
        opacity: 0;
        transition: all 0.6s ease;
      }

      .service-row:nth-child(odd)::before {
        top: -50px;
        right: -50px;
      }

      .service-row:nth-child(even)::before {
        bottom: -50px;
        left: -50px;
      }

      .service-row:hover::before {
        opacity: 1;
        transform: scale(1.2);
      }

      /* Stats Section */
      .stats {
        padding: 80px 0; /* Reduced padding */
        background: linear-gradient(
          to right,
          var(--trimplin-blue) 0%,
          #0983b4 100%
        );
        color: white;
        border-radius: 80px;
        margin: 10px; /* Reduced margin */
        position: relative;
        overflow: hidden;
      }

      .stats::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
        background-position: center;
      }

      .stat-item {
        text-align: center;
        padding: 20px;
        position: relative;
        z-index: 1;
      }

      .stat-number {
        font-size: 3rem; /* Slightly smaller */
        font-weight: 800;
        margin-bottom: 10px;
        background: linear-gradient(
          to right,
          var(--trimplin-teal),
          var(--trimplin-green)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .stat-text {
        font-size: 1.1rem; /* Slightly smaller */
        font-weight: 600;
      }

      /* Process Section */
      .process-section {
        padding: 80px 0; /* Reduced padding */
        background-color: #f8f9fa;
        position: relative;
      }

      .process-doodle {
        position: absolute;
        width: 150px;
        height: 150px;
        opacity: 0.7;
        z-index: 0;
      }

      .process-doodle-1 {
        top: 10%;
        left: 5%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Ccircle cx='75' cy='75' r='60' fill='none' stroke='%23053a83' stroke-width='3' stroke-dasharray='10,5'/%3E%3Cpath d='M75,25 L75,75 L125,75' fill='none' stroke='%2305cc9e' stroke-width='4'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .process-doodle-2 {
        top: 20%;
        right: 8%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpolygon points='75,25 125,75 75,125 25,75' fill='none' stroke='%232ed90e' stroke-width='3'/%3E%3Ccircle cx='75' cy='75' r='15' fill='%234f7cff'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .process-doodle-3 {
        bottom: 15%;
        left: 10%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M25,75 C25,40 60,25 75,25 C110,25 125,60 125,75 C125,110 90,125 75,125 C40,125 25,90 25,75 Z' fill='none' stroke='%2300d4b3' stroke-width='3'/%3E%3Cline x1='40' y1='75' x2='110' y2='75' stroke='%23053a83' stroke-width='2'/%3E%3Cline x1='75' y1='40' x2='75' y2='110' stroke='%23053a83' stroke-width='2'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .step-card {
        background: white;
        border-radius: 20px;
        padding: 25px; /* Reduced padding */
        height: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        position: relative;
        z-index: 1;
        text-align: center;
      }

      .step-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
      }

      .step-number {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--trimplin-blue) 0%,
          var(--trimplin-teal) 100%
        );
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 auto 20px;
      }

      /* Highlights Section */
      .highlights {
        padding: 80px 0 40px; /* Added extra bottom padding for info bar */
        background: linear-gradient(
          to right,
          var(--trimplin-blue) 0%,
          #0983b4 100%
        );
        color: white;
        border-radius: 80px;
        margin: 10px;
        position: relative;
        overflow: hidden;
      }

      .highlights::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
        background-position: center;
      }

      .highlight-item {
        text-align: center;
        padding: 20px;
        position: relative;
        z-index: 1;
      }

      /* Individual highlight numbers */
      .highlight-number {
        font-size: 2rem; /* slightly smaller for multiple lines */
        font-weight: 800;
        margin: 5px 0;   /* reduced spacing between multiple numbers */
        background: linear-gradient(to right, var(--trimplin-teal), var(--trimplin-green));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        display: block;
        transition: transform 0.3s ease, text-shadow 0.3s ease;
      }

      /* Optional hover effect */
      .highlight-number:hover {
        transform: scale(1.05);
        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      }

      /* Description text */
      .highlight-text {
        font-size: 1.1rem;
        font-weight: 600;
        margin-top: 10px; /* space above description */
      }

      /* Info Bar inside Highlights */
      .info-bar {
        background: linear-gradient(90deg, #0f1118, #151a23);
        color: #cfd5e2;
        padding: 8px 0;
        font-size: 0.9rem;
        text-align: center;
        border-radius: 6px;
        margin-top: 50px;
        margin-bottom: -40px;
        position: relative;
        z-index: 1;
      }

      .info-bar span {
        display: inline-flex;
        align-items: center;
        margin: 0 10px;
      }

      @media (max-width: 992px) {
        .highlights {
          position: relative;
          border-radius: 60px;
          padding: 60px 0 30px;
        }

        .highlight-number {
          font-size: 1.8rem;
        }

        .highlight-text {
          font-size: 1rem;
        }
      }

      @media (max-width: 768px) {
        .highlights {
          position: relative;
          border-radius: 40px;
          padding: 50px 15px 30px;
        }

        .highlight-number {
          font-size: 1.6rem;
        }

        .highlight-text {
          font-size: 0.95rem;
        }
      }

      @media (max-width: 576px) {
        .highlights {
          border-radius: 30px;
          padding: 40px 10px 30px;
          position: relative;
        }

        .highlight-number {
          font-size: 0.9rem;
        }

        .highlight-text {
          font-size: 0.6rem;
          line-height: 1.4;
        }
      }

      @media (max-width: 768px) {
        .info-bar {
          font-size: 0.8rem;
          padding: 10px 5px;
          margin-top: 15px;
        }

        .info-bar span {
          display: inline-flex;
          flex-wrap: wrap;
          justify-content: center;
          margin: 4px 6px;
        }
      }

      @media (max-width: 480px) {
        .info-bar {
          font-size: 0.75rem;
          padding: 8px 4px;
        }
      }

      /* Testimonials Section */
      .container-testimonial {
        max-width: 1800px;
        margin: 5px auto;
        padding: 60px 20px;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
      }

      /* Section Title */
      .container-testimonial .section-title h2 {
        font-size: 2rem;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 0;
        color: #222;
      }

      .container-testimonial .section-title span {
        font-size: 0.9rem;
        text-transform: uppercase;
        display: block;
        margin-bottom: 8px;
      }

      /* Slider */
      #testimonials .testimonial-slider {
        position: relative;
        width: 100%;
        height: 300px; /* adjust height as needed */
        display: block;
        overflow: visible;
        margin: 0 auto;
      }

      #testimonials .testimonial-cards {
        /* container only */
        position: relative;
        width: 100%;
        height: 100%;
      }

      #testimonials .testimonial-card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.88);
        width: 260px;
        height: 160px;
        background: transparent;
        border-radius: 12px;
        overflow: hidden;
        opacity: 0;
        transition: all 600ms cubic-bezier(0.22, 0.9, 0.35, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #testimonials .testimonial-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        padding: 10px;
        background: transparent;
      }

      /* Visible positions */
      #testimonials .testimonial-card.center {
        left: 50%;
        transform: translate(-50%, -50%) scale(1.8);
        width: 360px;
        height: 200px;
        opacity: 1;
        z-index: 30;
      }

      #testimonials .testimonial-card.left {
        left: 24%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 260px;
        height: 160px;
        opacity: 1;
        z-index: 20;
        filter: none;
      }

      #testimonials .testimonial-card.right {
        left: 76%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 260px;
        height: 160px;
        opacity: 1;
        z-index: 20;
        filter: none;
      }

      /* hidden ones (not visible) */
      #testimonials .testimonial-card.hidden {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        z-index: 10;
        pointer-events: none;
      }

      /* Nav buttons (small and non-intrusive) */
      #testimonials .test-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.95);
        border: none;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        cursor: pointer;
        z-index: 60;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
      }
      #testimonials .test-nav-btn.prev {
        left: 8px;
      }
      #testimonials .test-nav-btn.next {
        right: 8px;
      }

      /* Responsive adjustments */
      @media (max-width: 900px) {
        #testimonials .testimonial-slider {
          height: 200px;
        }
        #testimonials .testimonial-card.center {
          width: 300px;
          height: 180px;
        }
        #testimonials .testimonial-card {
          width: 220px;
          height: 140px;
        }
        #testimonials .testimonial-card.left {
          left: 20%;
        }
        #testimonials .testimonial-card.right {
          left: 80%;
        }
      }

      @media (max-width: 520px) {
        /* on very small widths, show 1 card (center) */
        #testimonials .testimonial-card.left,
        #testimonials .testimonial-card.right {
          display: none;
        }
        #testimonials .testimonial-card {
          width: 260px;
          left: 50% !important;
        }
        #testimonials .testimonial-card.center {
          width: 86%;
          left: 50% !important;
          transform: translate(-50%, -50%) scale(1);
        }
        #testimonials .test-nav-btn {
          display: none;
        } /* hide nav on tiny screens if desired */
      }

      /* Slider for trusted institutions */
      .logo-slider {
        overflow: hidden;
        position: relative;
        padding: 20px 0;
      }

      .logo-track {
        display: flex;
        animation: scroll 30s linear infinite;
        width: calc(200px * 10);
      }

      .logo-slide {
        height: 80px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: grayscale(100%);
        opacity: 0.6;
        transition: all 0.4s ease;
      }

      .logo-slide:hover {
        filter: grayscale(0%);
        opacity: 1;
      }

      @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(calc(-200px * 7));
        }
      }

      /* Slider for trusted institutions */
      .logo-slider {
        overflow: hidden;
        position: relative;
        padding: 20px 0;
        background: #fff;
      }

      .logo-track {
        display: flex;
        flex-wrap: wrap;
        width: max-content;
        animation: scroll 40s linear infinite;
      }

      .logo-slide {
        height: 80px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px;
        filter: grayscale(100%);
        opacity: 0.6;
        transition: all 0.4s ease;
      }

      /* stagger like parquet tiles */
      .logo-slide:nth-child(even) {
        margin-top: 40px;
      }

      .logo-slide img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
      }

      .logo-slide:hover {
        filter: grayscale(0%);
        opacity: 1;
      }

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

      /* FAQ Section */
      .faq-section {
        padding: 80px 0; /* Reduced padding */
        background-color: white;
        position: relative;
      }

      .faq-doodle {
        position: absolute;
        width: 130px;
        height: 130px;
        opacity: 0.7;
      }

      .faq-doodle-1 {
        top: 10%;
        right: 5%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Ccircle cx='65' cy='65' r='50' fill='none' stroke='%2305cc9e' stroke-width='3'/%3E%3Cpath d='M50,65 C50,50 65,45 75,50 C85,55 90,65 85,75 C80,85 70,90 60,85 C50,80 45,70 50,65 Z' fill='none' stroke='%23053a83' stroke-width='2'/%3E%3Ccircle cx='65' cy='55' r='5' fill='%232ed90e'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .faq-doodle-2 {
        bottom: 15%;
        left: 8%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Crect x='30' y='30' width='70' height='70' rx='10' fill='none' stroke='%234f7cff' stroke-width='3'/%3E%3Cline x1='45' y1='50' x2='85' y2='50' stroke='%2300d4b3' stroke-width='2'/%3E%3Cline x1='45' y1='65' x2='85' y2='65' stroke='%2300d4b3' stroke-width='2'/%3E%3Cline x1='45' y1='80' x2='70' y2='80' stroke='%2300d4b3' stroke-width='2'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .faq-item {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 15px;
        padding: 20px; /* Reduced padding */
        margin-bottom: 15px; /* Reduced margin */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
      }

      .faq-item:hover {
        border-color: var(--trimplin-teal);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      }

      .faq-question {
        font-weight: 600;
        cursor: pointer;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--trimplin-blue);
      }

      .faq-answer {
        margin-top: 15px;
        color: #6c757d;
        line-height: 1.7;
      }

      /* CTA Section */
      .cta-section {
        padding: 80px 0; /* Reduced padding */
        background: linear-gradient(135deg, #60D270 0%, #053a83 100%);
        color: white;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .cta-doodle {
        position: absolute;
        width: 180px;
        height: 180px;
        opacity: 0.7;
      }

      .cta-doodle-1 {
        top: -50px;
        left: -30px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cpath d='M90,30 C130,30 150,60 150,90 C150,120 130,150 90,150 C50,150 30,120 30,90 C30,60 50,30 90,30 Z' fill='none' stroke='white' stroke-width='4'/%3E%3Cpath d='M70,70 L110,70 L110,110 L70,110 Z' fill='none' stroke='%23053a83' stroke-width='3'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .cta-doodle-2 {
        bottom: -60px;
        right: -40px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cpolygon points='90,30 150,90 90,150 30,90' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='90' cy='90' r='30' fill='none' stroke='%232ed90e' stroke-width='3'/%3E%3C/svg%3E")
          no-repeat center;
      }

      .cta-content {
        position: relative;
        z-index: 1;
      }

      /* CTA image like hero image */
    .cta-image {
      position: absolute;
      bottom: 50px;      /* adjust vertical alignment */
      left: 200px;       /* adjust horizontal alignment */
      width: 325px;
      height: auto;
      z-index: 1;        /* above background but below text */
      opacity: 0.85;
      transition: transform 0.4s ease, filter 0.4s ease, z-index 0.4s ease;
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)); /* shadow */
      pointer-events: auto; /* ensure hover works */
    }

    /* Hover popup effect */
    .cta-image:hover {
      transform: scale(1.05);
      filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
      z-index: 2;
    }

    /* Responsive adjustments for mobile */
    @media (max-width: 768px) {
      .cta-content {
          text-align: center !important;
        }

      .cta-image {
        position: relative;  /* flow naturally in mobile layout */
        bottom: 0;
        left: 0;
        width: 90%;
        max-width: 350px;
        margin: 20px auto 0 auto; /* center on smaller screens */
        display: block;
        opacity: 1;
      }
    }

      /* Footer */
      footer {
        background: linear-gradient(to right, var(--trimplin-blue) 0%, #042c68 100%);
        color: white;
        padding: 60px 0 20px;
        position: relative;
        overflow: hidden;
      }

      /* Doodle decorations */
      .footer-doodle {
        position: absolute;
        width: 100px;
        height: 100px;
        opacity: 0.5;
        background-size: contain;
        background-repeat: no-repeat;
      }

      /* Left doodle */
      .footer-doodle-1 {
        bottom: 80% !important;
        left: 2%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,20 C70,20 80,30 80,50 C80,70 70,80 50,80 C30,80 20,70 20,50 C20,30 30,20 50,20 Z' fill='none' stroke='%2305cc9e' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='15' fill='none' stroke='%232ed90e' stroke-width='2'/%3E%3C/svg%3E");
      }

      /* Right doodle */
      .footer-doodle-2 {
        bottom: 20%;
        right: 7%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,20 80,50 50,80 20,50' fill='none' stroke='%2305cc9e' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='%232ed90e' stroke-width='2'/%3E%3C/svg%3E");
      }

      /* Logo */
      .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;

        /* Your preferred desktop placement */
        margin-top: -60px;
        margin-bottom: -60px;
        margin-left: -80px;
        margin-right: auto;
      }

      .footer-logo img {
        max-width: 200px;
        height: auto;
        transition: all 0.3s ease;
      }

      .footer-logo span {
        color: var(--trimplin-teal);
      }

      /* About and links */
      .footer-about,
      .footer-links {
        text-align: left;
        padding: 0 10px;
        margin-bottom: 30px;
      }

      .footer-links h5 {
        font-weight: 700;
        margin-bottom: 15px;
        position: relative;
        padding-bottom: 8px;
      }

      .footer-links h5::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 3px;
        background: var(--trimplin-teal);
        border-radius: 2px;
      }

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

      .footer-links li {
        margin-bottom: 10px;
      }

      .footer-links a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .footer-links a:hover {
        color: var(--trimplin-teal);
        padding-left: 5px;
      }

      /* Social icons */
      .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        text-decoration: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        font-size: 1.2rem;
        margin-right: 10px;
        transition: all 0.3s ease;
      }

      .social-icons a:hover {
        background: var(--trimplin-teal);
        color: var(--trimplin-blue);
        transform: translateY(-5px);
      }

      /* Layout alignment fix */
      footer .row {
        align-items: flex-start;
        text-align: left;
      }

      footer .row > div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      /* Copyright */
      .copyright {
        text-align: center;
        padding-top: 30px;
        margin-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }

      /* ===========================
         RESPONSIVE FIXES
         =========================== */

      @media (max-width: 1200px) {
        .footer-logo {
          margin-top: -40px;
          margin-bottom: -40px;
          margin-left: -40px;
          margin-right: auto;
        }
      }

      @media (max-width: 992px) {
        .footer-logo img {
          max-width: 180px;
        }
        .footer-logo {
          margin-top: -30px;
          margin-bottom: -30px;
          margin-left: 0;
          margin-right: 0;
        }
      }

      @media (max-width: 768px) {
        footer .row {
          text-align: center;
          align-items: center;
        }

        .footer-logo img {
          max-width: 220px; /* slightly larger logo on mobile */
        }

        .footer-logo {
          margin-top: 30px;   /* ✅ added top margin */
          margin-bottom: 40px; /* ✅ added bottom margin */
          margin-left: 0;
          margin-right: 0;
        }

        .footer-about,
        .footer-links {
          margin-bottom: 30px;
          text-align: center !important;
        }

        .social-icons a {
          margin-right: 6px;
          justify-content: center !important;
        }
      }

      @media (max-width: 576px) {
        .footer-logo img {
          max-width: 240px;
          margin-top: -150px;
          margin-bottom: -150px; /* ✅ bigger on small phones */
        }

        .footer-logo {
          margin-top: 40px;   /* ✅ more top margin */
          margin-bottom: 50px; /* ✅ more bottom margin */
        }

        .footer-links h5::after {
          left: 50%;
          transform: translateX(-50%);
        }

        .footer-links {
          text-align: center;
        }

        .footer-links ul li {
          margin-bottom: 8px;
        }
      }


      /* NEW SECTIONS */

      /* Blog/Resources Section */
      .blog-section {
        padding: 80px 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        position: relative;
      }

      .blog-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        height: 100%;
      }

      .blog-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
      }

      .blog-img {
        height: 200px;
        background: linear-gradient(
          135deg,
          var(--color2) 0%,
          var(--color7) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 3rem;
      }

      .blog-content {
        padding: 25px;
      }

      .blog-date {
        color: var(--color7);
        font-weight: 600;
        font-size: 0.9rem;
      }

      /* Team Section */
      .team-section {
        padding: 80px 0;
        background: white;
        position: relative;
      }

      .team-section .container {
        max-width: 1200px; /* ✅ keeps grid within page */
        margin: 0 auto; /* ✅ centers it */
        padding: 0 15px; /* ✅ small side padding */
        box-sizing: border-box;
      }

      .team-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* default: 5 per row */
        gap: 20px;
      }

      .team-card {
        background: white;
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        box-sizing: border-box; /* ✅ ensures padding stays inside */
      }

      .team-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
      }

      .team-img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin: 0 auto 20px;
        border: 3px solid var(--trimplin-teal);
        transition: border-color 0.4s ease, transform 0.4s ease;
      }

      .team-card:hover .team-img {
        border-color: var(--trimplin-blue);
      }

      .team-photo {
        width: 100%;
        height: 100%;
        object-position: center 30%;
        border-radius: 50%;
        object-fit: cover;
      }

      /* Responsive breakpoints */
      @media (max-width: 1200px) {
        .team-grid {
          grid-template-columns: repeat(3, 1fr); /* 3 per row */
        }
      }

      @media (max-width: 768px) {
        .team-grid {
          grid-template-columns: repeat(2, 1fr); /* 2 per row */
        }
      }

      @media (max-width: 480px) {
        .team-grid {
          grid-template-columns: 1fr; /* 1 per row */
        }
      }

      /* Industries Section */
      .industries-section {
        padding: 80px 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        position: relative;
      }

      .industry-card {
        background: white;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        height: 100%;
      }

      .industry-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
      }

      .industry-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        margin: 0 auto 20px;
        background: linear-gradient(
          135deg,
          var(--color3) 0%,
          var(--color8) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2rem;
      }

      /* Gradient Animations */
      .gradient-shift {
        background: linear-gradient(
          -45deg,
          var(--color1),
          var(--color2),
          var(--color3),
          var(--color4),
          var(--color5),
          var(--color6),
          var(--color7),
          var(--color8),
          var(--color9),
          var(--color10)
        );
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
      }

      @keyframes gradientBG {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .gradient-text {
        background: linear-gradient(
          -45deg,
          var(--color1),
          var(--color2),
          var(--color3),
          var(--color4),
          var(--color5),
          var(--color6),
          var(--color7),
          var(--color8),
          var(--color9),
          var(--color10)
        );
        background-size: 400% 400%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientText 10s ease infinite;
      }

      @keyframes gradientText {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      /* Responsive Adjustments */
      @media (max-width: 992px) {
        .hero h1 {
          font-size: 2.8rem;
        }

        .hero p {
          font-size: 1.1rem;
        }

        .service-title {
          font-size: 1.9rem;
        }

        .service-content {
          padding: 30px 20px;
        }

        .service-doodle {
          height: 350px;
          margin-top: 40px;
        }
      }

      @media (max-width: 768px) {
        .hero {
          padding: 100px 0 80px;
          text-align: center;
        }

        .hero h1 {
          font-size: 2.5rem;
        }

        .btn-hero,
        .btn-hero-alt {
          margin-bottom: 15px;
          display: block;
          width: 100%;
        }

        .stats {
          border-radius: 50px;
        }

        .stat-number {
          font-size: 2.8rem;
        }

        .service-doodle {
          height: 300px;
        }

        .service-icon {
          width: 80px;
          height: 80px;
          font-size: 2.8rem;
        }

        .topbar span {
          display: block;
          margin: 5px 0;
        }
      }
      /*Information section*/
       .information {
          width: 100%;
          background-color: #f5f6f7; /* light grey background fills screen width */
          display: flex;
          justify-content: center;
        }

        .info-card {
          width: 100%;                          /* almost full width */
          background-color: #ffffff;           /* white card */
          border-radius: 24px;                 /* nice curved corners */
          box-shadow: 0 6px 16px rgba(0,0,0,0.08);
          padding: 40px 30px;                  /* inner spacing */
          text-align: center;
          color: var(--trimplin-blue);
          font-size: 20px;
          line-height: 1.5;                    /* better readability */
        }

        @media (max-width: 600px) {
          .info-card {
            width: 90%;
            border-radius: 16px;
            padding: 24px 16px;
            font-size: 18px;
          }
        }