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

       :root {
           --primary-color: #c4161a;
       }


       body {
           background: #f7f9fc;
           color: #333;
       }

       /* NAVBAR */
       .navbar {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 104px;
           display: flex;
           justify-content: space-around;
           align-items: center;
           gap: 24px;
           padding: 0 40px;

           background: rgba(0, 0, 0, 0.767);
           backdrop-filter: blur(14px);
           -webkit-backdrop-filter: blur(14px);

           border-bottom: 1px solid rgba(255, 255, 255, 0.25);
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);

           z-index: 1000;
           animation: navbarGlow 6s infinite alternate;
       }

       /* GLOW ANIMATION */
       @keyframes navbarGlow {
           0% {
               box-shadow: 0 8px 30px rgba(255, 0, 0, 0.2);
           }

           100% {
               box-shadow: 0 8px 40px rgba(255, 80, 80, 0.5);
           }
       }

       /* LOGO */
       .logo img {
           height: 46px;
           transition: transform 0.4s ease, filter 0.4s ease;
           filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.5));
       }

       .sir-logo img {
           height: 90px;
       }

       .logo img:hover {
           transform: scale(1.1) rotate(-1deg);
           filter: drop-shadow(0 0 16px rgba(255, 0, 0, 0.8));
       }

       /* TEXT */
       .navbar p {
           max-width: 700px;
           color: #fff;
           font-weight: 700;
           font-size: 16px;
           line-height: 1.5;
           text-align: center;
           background: linear-gradient(90deg, #fa2323, #ff0d04);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
       }

       /* HIGHLIGHTS */
       .navbar p span {
           font-weight: 900;
       }

       .navbar p strong {
           color: #c40000;
           -webkit-text-fill-color: #4cf000;
       }

       @media (max-width: 768px) {
           .navbar {
               flex-direction: row;
               align-items: center;
               height: auto;
               padding: 6px 10px;
               gap: 8px;
               height: 100px;
           }

           /* .logo img {
               height: 22px;
               flex-shrink: 0;
           } */

           .navbar p {
               font-size: 11px;
               line-height: 1.3;
               max-width: calc(100% - 30px);
               white-space: normal;

               overflow: visible;

               text-overflow: unset;

               text-align: left;
           }
       }




       /* LOGO */
       .logo img {
           height: 40px;
           cursor: pointer;
           transition: transform 0.3s ease;
       }

       .logo img:hover {
           transform: scale(1.1);
       }


       /* ================= COMMON ================= */
       .container {
           max-width: 1200px;
           margin: auto;
           padding: 40px 20px;
       }

       h2 {
           font-size: 36px;
           color: #111;
           margin-bottom: 15px;
       }

       p {
           font-size: 15px;
           line-height: 1.7;
           color: #555;
       }

       .section-tag {
           color: #cf2030;
           font-weight: 600;
           margin-bottom: 10px;
           display: inline-block;
       }

       /* ================= DYNAMIC HERO SECTION WITH IMAGE SLIDER ================= */
       .hero-section {
           position: relative;
           color: white;
           text-align: center;
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           overflow: hidden;
       }

       .hero-slideshow {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           z-index: 1;
       }

       .slide-bg {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
           opacity: 0;
           transition: opacity 1.5s ease-in-out;
           transform: scale(1.05);
           filter: brightness(0.7);
       }

       .slide-bg.active {
           opacity: 1;
           transform: scale(1);
       }

       /* Lighter overlay for better image visibility */
       .hero-overlay {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: linear-gradient(135deg,
                   rgba(0, 0, 0, 0.6) 0%,
                   rgba(0, 0, 0, 0.4) 100%);
           z-index: 1;
       }

       .hero-container {
           max-width: 1200px;
           margin: 0 auto;
           position: relative;
           z-index: 2;
           padding: 40px 20px;
           width: 100%;
       }

       .hero-tagline {
           color: #cf2030;
           font-size: 1.2rem;
           font-weight: 600;
           margin-bottom: 20px;
           text-transform: uppercase;
           letter-spacing: 3px;
           background: rgba(0, 0, 0, 0.7);
           display: inline-block;
           padding: 12px 30px;
           border-radius: 50px;
           border: 2px solid rgba(207, 32, 48, 0.3);
       }

       .hero-text-slider {
           min-height: 445px;
           position: relative;
           margin: 30px 0 50px 0;
           overflow: hidden;
       }

       .text-slide {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           opacity: 0;
           transform: translateY(40px);
           transition: opacity 1s ease, transform 1s ease;
           padding: 0 20px;
       }

       .text-slide.active {
           opacity: 1;
           transform: translateY(0);
       }

       .text-slide-headline {
           font-size: 3.5rem;
           font-weight: 800;
           line-height: 1.1;
           margin-bottom: 25px;
           text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
           animation: fadeInUp 1s ease-out;
       }

       @keyframes fadeInUp {
           from {
               opacity: 0;
               transform: translateY(20px);
           }

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

       .text-slide-quote {
           font-size: 1.4rem;
           line-height: 1.7;
           max-width: 900px;
           margin: 0 auto;
           color: #fff;
           text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
           background: rgba(0, 0, 0, 0.5);
           padding: 20px 30px;
           border-radius: 15px;
           display: inline-block;
           border-left: 4px solid #cf2030;
           animation: fadeInUp 1.2s ease-out 0.3s both;
       }

       .cta-button {
           display: inline-block;
           background: #cf2030;
           color: white;
           border: none;
           padding: 20px 30px;
           border-radius: 50px;
           font-size: 1.2rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           text-decoration: none;
           text-transform: uppercase;
           letter-spacing: 1.5px;
           box-shadow: 0 10px 30px rgba(207, 32, 48, 0.3);
           margin-top: 0px;
           animation: fadeInUp 1.5s ease-out 0.6s both;
       }

       .cta-button:hover {
           background: #b01c2a;
           transform: translateY(-5px) scale(1.05);
           box-shadow: 0 15px 35px rgba(207, 32, 48, 0.4);
       }

       /* Slide navigation dots */
       .slider-controls {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 20px;
           margin-top: 50px;
       }

       .slider-dots {
           display: flex;
           gap: 15px;
       }

       .dot {
           width: 16px;
           height: 16px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.4);
           cursor: pointer;
           transition: all 0.3s ease;
           border: 2px solid rgba(255, 255, 255, 0.2);
           position: relative;
           overflow: hidden;
       }

       .dot::after {
           content: "";
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: #fff;
           transition: left 4s linear;
       }

       .dot.active::after {
           left: 0;
       }

       .dot:hover {
           background: rgba(255, 255, 255, 0.8);
           transform: scale(1.2);
       }

       .dot.active {
           background: transparent;
           border-color: #cf2030;
           transform: scale(1.2);
       }

       /* Progress bar for auto-scroll */
       .progress-bar {
           position: absolute;
           bottom: 0;
           left: 0;
           height: 4px;
           background: #cf2030;
           width: 100%;
           transform: scaleX(0);
           transform-origin: left;
           transition: transform 4s linear;
           z-index: 3;
       }

       .slide-bg.active .progress-bar {
           transform: scaleX(1);
       }

       /* ================= WHY CHOOSE US ================= */
       .why-grid {
           margin-top: 50px;
           display: grid;
           grid-template-columns: 1fr 1fr 1fr;
           gap: 35px;
           align-items: center;
       }

       .why-card {
           background: #fff;
           border: 1px solid #e3e9f2;
           border-radius: 14px;
           padding: 25px;
           display: flex;
           gap: 15px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       }

       .why-card i {
           font-size: 90px;
           margin-right: 60px;
           color: #cf2030;
           min-width: 45px;
       }

       .why-card h4 {
           font-size: 16px;
           margin-bottom: 5px;
           color: #111;
       }

       .why-center {
           text-align: center;
           position: relative;
       }

       .why-center img {
           max-width: 320px;
           border-radius: 10px;
       }

       .why-badge {
           position: absolute;
           top: -45px;
           left: 50%;
           transform: translateX(-50%);
           background: #fff;
           border: 2px solid #cf2030;
           border-radius: 50px;
           padding: 8px 20px;
           text-align: center;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       }

       .why-badge strong {
           font-size: 45px;
           color: #cf2030;
           display: block;
       }



       /* contact us  */



       /* ================= RESPONSIVE ================= */
       @media (max-width: 1200px) {
           .hero-container {
               max-width: 1000px;
           }

           .text-slide-headline {
               font-size: 3rem;
           }

           .text-slide-quote {
               font-size: 1.3rem;
               padding: 25px 15px;
           }
       }

       @media (max-width: 992px) {
           .hero-section {
               min-height: 90vh;
           }

           .text-slide-headline {
               font-size: 2.8rem;
           }

           .text-slide-quote {
               font-size: 1.2rem;
               padding: 28px 25px;
           }

           .hero-tagline {
               display: none;
               font-size: 1.1rem;
               padding: 10px 25px;
           }

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

           .why-center {
               order: -1;
           }
       }

       @media (max-width: 768px) {
           .hero-section {
               min-height: 85vh;
           }

           .text-slide-headline {
               font-size: 2.5rem;
               padding-top: 20px;
               margin-bottom: 20px;
           }

           .text-slide-quote {
               font-size: 1.1rem;
               padding: 25px 20px;
               max-width: 95%;
           }

           .hero-text-slider {
               min-height: 440px;
               margin: 25px 0 40px 0;
           }

           .cta-button {
               padding: 18px 20px;
               font-size: 1.1rem;
           }

           .hero-tagline {
               font-size: 1rem;
               letter-spacing: 2px;
               padding: 8px 20px;
           }

           .dot {
               width: 14px;
               height: 14px;
           }

           .container {
               padding: 35px 20px;
           }

           h2 {
               font-size: 30px;
           }
       }

       @media (max-width: 600px) {
           .hero-section {
               min-height: 80vh;
           }

           .text-slide-headline {
               font-size: 2.2rem;
               line-height: 1.2;
           }

           .text-slide-quote {
               font-size: 1rem;
               padding: 25px 18px;
               line-height: 1.5;
           }

           .hero-text-slider {
               min-height: 455px;
               margin: 20px 0 35px 0;
           }

           .cta-button {
               padding: 16px 25px;
               font-size: 1rem;
               margin-top: 25px;
           }

           .hero-tagline {
               font-size: 0.9rem;
               letter-spacing: 1.5px;
               padding: 6px 18px;
           }

           .slider-controls {
               margin-top: 40px;
           }

           .dot {
               width: 12px;
               height: 12px;
           }

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

           h2 {
               font-size: 28px;
           }

           .why-center img {
               max-width: 280px;
           }

           .why-badge {
               top: -35px;
               padding: 6px 15px;
           }

           .why-badge strong {
               font-size: 18px;
           }



           .footer-content {
               grid-template-columns: 1fr;
               gap: 30px;
           }
       }

       @media (max-width: 400px) {
           .hero-section {
               min-height: 75vh;
           }

           .text-slide-headline {
               font-size: 1.8rem;
           }

           .text-slide-quote {
               font-size: 0.9rem;
               padding: 25px 15px;
           }

           .cta-button {
               padding: 14px 20px;
               font-size: 0.9rem;
           }

           .hero-tagline {
               font-size: 0.8rem;
               padding: 5px 15px;
           }

           .container {
               padding: 30px 15px;
           }

           h2 {
               font-size: 24px;
           }

           .why-card {
               padding: 20px;
               flex-direction: column;
               text-align: center;
           }

           .why-card i {
               font-size: 35px;
               margin-bottom: 10px;
           }


       }

       /* Touch device optimizations */
       @media (hover: none) and (pointer: coarse) {
           .dot:hover {
               transform: none;
               background: rgba(255, 255, 255, 0.4);
           }

           .cta-button:hover {
               transform: none;
               box-shadow: 0 10px 30px rgba(207, 32, 48, 0.3);
           }

           .cta-button:active {
               transform: scale(0.98);
               background: #b01c2a;
           }


       }

       /* Reduced motion preference */
       @media (prefers-reduced-motion: reduce) {

           .slide-bg,
           .text-slide,
           .cta-button,
           .dot,
           .plan {
               transition: none !important;
               animation: none !important;
           }

           .slide-bg.active {
               transform: none;
           }

           .text-slide.active {
               transform: none;
           }
       }

       /* jhere  */


       /* ===== ROOT RESET (SAFE) ===== */
       .gtc-wrap * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }

       .gtc-wrap {
           background: #f6f6f6;
           color: #333;
       }

       /* ===== COMMON ===== */
       .gtc-container {
           width: 90%;
           color: white;
           max-width: 1200px;
           margin: auto;
       }

       /* ================= SERVICES ================= */

       .gtc-services {
           padding: 30px 0;
           background: #ffffff;
       }

       .gtc-services-title {
           display: grid;
           grid-template-columns: 1fr auto 1fr;
           align-items: center;
           column-gap: 260px;
       }


       .gtc-services-title h3 {
           color: #c4161c;
           font-size: 18px;

           margin-bottom: 28px;
       }

       .gtc-services-title img {
           /* width: 180px; */
           height: 44px;
       }

       .sir-logo img {
           height: 80px;
           border-radius: 6px;
       }

       .gtc-services-title h3 {
           justify-self: start;
           text-align: left;
       }

       .gtc-services-title h2 {
           justify-self: center;
           text-align: center;
       }

       .gtc-services-title img {
           justify-self: end;
       }

       .gtc-services-title h2 {
           font-size: 34px;
           font-weight: 700;
           color: #c4161c;
           /* margin-bottom: 40px; */
       }

       /* FORCE owl items to stretch */
       .gtc-service-slider .owl-stage {
           display: flex;
       }

       .gtc-service-slider .owl-item {
           display: flex;
           height: auto;
       }

       .gtc-service-slider .owl-item>div {
           display: flex;
           height: 100%;
       }


       .gtc-service-card {
           background: black;
           color: #fff;
           display: flex;
           flex-direction: column;
           height: 100%;
           border-radius: 30px 30px 30px 0;
           padding: 30px 20px;
           text-align: center;
           box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
       }

       .gtc-service-card img {
           width: 60px;
           /* ↓ smaller */
           height: 140px;
           /* ↓ smaller */
           object-fit: contain;
           background-color: white;
           margin-bottom: 15px;
           border-radius: 18px;
       }


       .gtc-service-card h4 {
           font-size: 15px;
           font-weight: 700;
           color: #c4161c;
           margin-bottom: 10px;
           text-transform: uppercase;
       }

       .gtc-service-card p {
           font-size: 14px;
           line-height: 22px;
           flex-grow: 1;
           color: #fff;
       }

       .gtc-read-btn {
           display: inline-block;
           margin-top: 15px;
           background: #c4161c;
           color: #fff;
           padding: 7px 24px;
           border-radius: 30px;
           font-size: 14px;
           text-decoration: none;
           font-weight: 600;
       }

       /* Owl arrows (scoped) */
       .gtc-service-slider .owl-nav button {
           position: absolute;
           display: none;
           top: 50%;
           transform: translateY(-50%);
           width: 38px;
           height: 38px;
           border-radius: 50%;
           background: #c4161c !important;
           color: #fff !important;
       }

       .gtc-service-slider .owl-prev {
           left: -20px;
       }

       .gtc-service-slider .owl-next {
           right: -20px;
       }

       .gtc-service-slider .owl-dots {
           display: none;
       }

       .moving-right .owl-stage {
           animation: slideRight 20s linear infinite;
       }

       .moving-left .owl-stage {
           animation: slideLeft 20s linear infinite;
       }


       @keyframes slideRight {
           0% {
               transform: translateX(0);
           }

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

       @keyframes slideLeft {
           0% {
               transform: translateX(-39.33%);
           }

           100% {
               transform: translateX(0);
           }
       }

       .gtc-service-card h4 {
           font-size: 14px;
           font-weight: 700;
           color: #fff;
           background: #c4161c;
           padding: 6px 14px;
           border-radius: 999px;
           text-transform: uppercase;

           /* 🔑 THE FIX */
           height: 58px;
           /* fixed height */
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;

           margin: 0 0 15px;
       }

       /* ================= WHY ================= */
       /* Why Choose Section - Enhanced Styles */
       .gtc-why {
           padding: 100px 20px;
           background: linear-gradient(135deg, #f9fbfd 0%, #f0f4f9 100%);
           position: relative;
           overflow: hidden;
       }

       .gtc-why::before {
           content: '';
           position: absolute;
           top: 0;
           right: 0;
           width: 300px;
           height: 300px;
           background: linear-gradient(135deg, rgba(196, 22, 26, 0.05) 0%, rgba(196, 22, 26, 0.1) 100%);
           border-radius: 50%;
           transform: translate(30%, -30%);
       }

       .gtc-why::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 200px;
           height: 200px;
           background: linear-gradient(135deg, rgba(196, 22, 26, 0.05) 0%, rgba(196, 22, 26, 0.1) 100%);
           border-radius: 50%;
           transform: translate(-30%, 30%);
       }

       .gtc-why-header {
           text-align: center;
           max-width: 800px;
           margin: 0 auto 60px;
           position: relative;
           z-index: 1;
       }

       .section-badge {
           display: inline-block;
           background: rgba(196, 22, 26, 0.1);
           color: #c4161a;
           padding: 8px 20px;
           border-radius: 30px;
           font-size: 14px;
           font-weight: 600;
           letter-spacing: 1px;
           margin-bottom: 20px;
           text-transform: uppercase;
       }

       .gtc-why-header h2 {
           font-size: 42px;
           font-weight: 700;
           color: #1a1a2e;
           margin-bottom: 20px;
           line-height: 1.2;
       }

       .gtc-why-header .subtitle {
           font-size: 18px;
           color: #555;
           line-height: 1.6;
           max-width: 700px;
           margin: 0 auto;
       }

       /* Features Grid */
       .gtc-features-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
           gap: 30px;
           margin-bottom: 60px;
           position: relative;
           z-index: 1;
       }

       .gtc-feature-card {
           background: white;
           border-radius: 20px;
           padding: 35px 30px;
           box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           position: relative;
           overflow: hidden;
           border: 1px solid rgba(196, 22, 26, 0.1);
       }

       .gtc-feature-card::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 5px;
           height: 100%;
           background: linear-gradient(to bottom, #c4161a, #9f1115);
           transition: width 0.5s ease;
       }

       .gtc-feature-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
           border-color: rgba(196, 22, 26, 0.2);
       }

       .gtc-feature-card:hover::before {
           width: 100%;
           opacity: 0.05;
       }

       .feature-icon-wrapper {
           width: 70px;
           height: 70px;
           background: linear-gradient(135deg, #c4161a, #9f1115);
           border-radius: 18px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-bottom: 25px;
           position: relative;
           z-index: 1;
       }

       .feature-icon-wrapper i {
           font-size: 28px;
           color: white;
       }

       .feature-content h4 {
           font-size: 22px;
           font-weight: 600;
           color: #1a1a2e;
           margin-bottom: 12px;
           position: relative;
           z-index: 1;
       }

       .feature-content p {
           font-size: 16px;
           color: #666;
           line-height: 1.6;
           margin: 0;
           position: relative;
           z-index: 1;
       }

       .feature-number {
           position: absolute;
           top: 20px;
           right: 20px;
           font-size: 60px;
           font-weight: 800;
           color: rgba(196, 22, 26, 0.05);
           line-height: 1;
           transition: all 0.5s ease;
       }

       .gtc-feature-card:hover .feature-number {
           color: rgba(196, 22, 26, 0.1);
           transform: scale(1.1);
       }

       /* Stats Container */


       /* Responsive Design */
       @media (max-width: 992px) {
           .gtc-why {
               padding: 80px 20px;
           }

           .gtc-why-header h2 {
               font-size: 36px;
           }

           .gtc-features-grid {
               grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           }


       }

       @media (max-width: 768px) {
           .gtc-why {
               padding: 60px 20px;
           }

           .gtc-why-header h2 {
               font-size: 32px;
           }

           .gtc-why-header .subtitle {
               font-size: 16px;
           }

           .gtc-feature-card {
               padding: 25px 20px;
           }

           .feature-icon-wrapper {
               width: 60px;
               height: 60px;
               border-radius: 15px;
           }

           .feature-icon-wrapper i {
               font-size: 24px;
           }

           .feature-content h4 {
               font-size: 20px;
           }

           .feature-number {
               font-size: 50px;
           }


       }

       @media (max-width: 480px) {
           .gtc-why-header h2 {
               font-size: 28px;
           }

           .gtc-features-grid {
               grid-template-columns: 1fr;
           }

           .feature-number {
               font-size: 45px;
           }


       }

       /* new toast css  */
       .gl-toast {
           position: fixed;
           top: 20px;
           right: 20px;
           background: #1f9d55;
           color: #fff;
           padding: 14px 22px;
           border-radius: 8px;
           font-size: 14px;
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
           opacity: 0;
           pointer-events: none;
           transform: translateY(-10px);
           transition: all 0.4s ease;
           z-index: 9999;
       }

       .gl-toast.show {
           opacity: 1;
           pointer-events: auto;
           transform: translateY(0);
       }

       .gl-toast.error {
           background: #d93025;
       }

       /* ================= CTA ================= */

       .gtc-cta {
           background: #c4161c;
           color: #fff;
           padding: 70px 0;
           text-align: center;
       }

       .gtc-cta h2 {
           font-size: 30px;
           margin-bottom: 12px;
       }

       .gtc-cta p {
           max-width: 850px;
           margin: auto;
           font-size: 15px;
       }

       .gtc-cta button {
           margin-top: 20px;
           background: #fff;
           color: #c4161c;
           border: none;
           padding: 14px 36px;
           font-size: 15px;
           font-weight: 700;
           border-radius: 40px;
       }

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

       @media(max-width:900px) {
           .gtc-hero-grid {
               grid-template-columns: 1fr;
           }

           .gtc-features {
               grid-template-columns: 1fr;
           }
       }



       /* SCROLING CONTAINER CARD SCROLL CSSS  */
       .bni-scroll-wrapper {
           width: 100%;
           overflow: hidden;
           padding: 40px 0;
           background: #f6f6f6;
       }

       /* .bni-scroll-track {
           display: flex;
           gap: 32px;
           width: max-content;
           animation: bni-scroll-left 35s linear infinite;
       } */

       .bni-scroll-track:hover {
           animation-play-state: paused;
       }

       /* ===== CARD BASE ===== */
       .bni-card {
           width: 800px;
           height: 280px;
           background: #c4161c;

           border-radius: 14px;
           border-left: 7px solid #fff;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 24px 28px;
           box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
           flex-shrink: 0;
       }

       .bni-card-content {
           width: 70%;
       }

       .bni-card-title {
           margin: 0 0 12px;
           font-size: 20px;
           font-weight: 600;
           color: white;
       }

       .bni-card-text {
           margin: 0;
           font-size: 15px;
           color: white;
           line-height: 1.6;
       }

       .bni-card-content .cta-button {
           background-color: #fff;
           color: #c4161a;
           padding: 15px;
       }

       .bni-card-image {
           width: 200px;
           height: 90px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 6px;
       }

       .bni-card-image img {
           width: 100%;
           height: auto;
           border-radius: 6px;
       }

       .bni-scroll-track {
           display: flex;
           gap: 32px;
           width: max-content;
           animation: bni-scroll-right 70s linear infinite;
       }

       @keyframes bni-scroll-right {
           0% {
               transform: translateX(-70%);
           }

           100% {
               transform: translateX(0);
           }
       }



       /* =========================
   📱 MOBILE (max 767px)
========================= */
       @media (max-width: 767px) {

           .bni-scroll-wrapper {
               padding: 20px 0;
           }

           .bni-card {
               width: 300px;
               height: auto;
               flex-direction: column;
               align-items: flex-start;
               padding: 20px;
           }

           .bni-card-content {
               width: 100%;
           }

           .bni-card-title {
               font-size: 17px;
           }

           .bni-card-text {
               font-size: 14px;
           }

           .bni-card-image {
               width: 100%;
               height: auto;
               margin-top: 14px;
               align-self: flex-end;
           }

           .bni-card-image img {
               width: 140px;
               /* ✅ bigger image */
               height: auto;
           }
       }

       /* =========================
   📲 TABLET (768px–1024px)
========================= */
       @media (min-width: 768px) and (max-width: 1024px) {

           .bni-card {
               width: 650px;
               height: auto;
               padding: 22px;
           }

           .bni-card-title {
               font-size: 18px;
           }

           .bni-card-text {
               font-size: 14.5px;
           }

           .bni-card-image {
               width: 155px;
               height: 75px;
           }
       }










       /* --- PROCESS SECTION --- */
       .process-section {
           padding: 1rem 2rem;
           /* background: var(--bg-white); */
           background-color: var(--bg-light-grey);
           position: relative;
       }

       .process-grid {
           display: grid;
           grid-template-columns: 1fr 2fr;
           gap: 5rem;
           position: relative;
       }

       .process-timeline-nav {
           position: sticky;
           top: 150px;
           height: fit-content;
       }

       .timeline-track {
           position: absolute;
           /* left: 10px; */
           left: 28px;
           top: 0;
           bottom: 0;
           width: 4px;
           background-color: var(--border-color);
           border-radius: 2px;
       }

       .timeline-progress {
           width: 100%;
           background-color: var(--accent-orange);
           height: var(--progress-height, 0%);
           transition: height 0.2s ease-out;
       }

       .timeline-nav-list {
           list-style: none;
           padding-left: 40px;
       }

       .timeline-nav-item a {
           padding: 1rem 0;
           display: block;
           text-decoration: none;
           font-size: 1.2rem;
           font-weight: 600;
           color: var(--text-secondary);
           transition: color 0.3s ease, font-weight 0.3s ease;
           /* position: relative; */
       }

       .timeline-nav-item.is-active a {
           color: var(--primary-color);
           font-weight: 700;
       }


       .timeline-icon {
           width: 24px;
           height: 24px;
           margin-right: 10px;
           filter: grayscale(100%) brightness(150%);
           transition: filter 0.3s ease, transform 0.3s ease;
       }

       .timeline-nav-item.is-active a .timeline-icon {
           filter: none;
           transform: scale(1.1);
       }

       .timeline-nav-list {
           list-style: none;
           padding-left: 20px;
       }

       .process-steps-content {
           display: flex;
           flex-direction: column;
           gap: 2rem;
       }

       .step-content-card {
           /* background: var(--section-blue-bg); */
           /* background-color: var(--bg-white); */
           /* background-color: var(--section-green-bg); */
           padding: 2.5rem;
           border-radius: 16px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
           min-height: 40vh;
           position: sticky;
           color: white;
           top: 150px;
           /* background: url("./images/generated-image\ \(10\).png") no-repeat center center/cover ; */
           background-color: var(--primary-color);
       }

       #step-2 {
           background-color: rgb(184, 200, 95);
       }

       #step-3 {
           background-color: rgb(231, 231, 80);
       }

       #step-4 {
           background-color: rgb(255 177 238);
       }

       #step-5 {
           background-color: rgb(143 154 255);
       }

       .step-content-card h3 {
           font-size: 1.5rem;
           color: var(--primary-blue);
           margin-bottom: 1.2rem;
       }

       .step-content-card p {
           font-size: 1.1rem;
           color: var(--primary-blue);
       }

       .section-title {
           margin-bottom: 50px;
       }

       .section-title h2 {
           font-size: 2rem;
           color: var(--primary-blue);
           margin-bottom: 1rem;
           text-align: center;
       }

       .section-title p {
           font-size: 1.5rem;
           color: var(--primary-blue);
           text-align: center;
           margin-bottom: 1rem !important;
       }

       @media (max-width: 768px) {
           .section-title h2 {
               font-size: 1.5rem;
           }
       }

       @media (max-width: 768px) {
           .process-section {
               padding: 3rem 1rem;
           }

           .process-grid {
               grid-template-columns: 1fr;
               gap: 2rem;
           }

           .process-timeline-nav {
               position: static;
               top: auto;
               height: auto;
               padding-bottom: 2rem;
               overflow-x: auto;
               white-space: nowrap;
           }

           .timeline-track {
               display: none;
           }

           .timeline-nav-list {
               display: flex;
               padding-left: 0;
               justify-content: center;
           }

           .timeline-nav-item a {
               padding: 0.5rem 0.8rem;
               font-size: 1rem;
               white-space: normal;
               text-align: center;
           }

           .timeline-nav-item.is-active a {
               border-bottom: 3px solid var(--accent-orange);
               padding-bottom: calc(0.5rem - 3px);
           }

           .timeline-icon {
               width: 20px;
               height: 20px;
               margin-right: 5px;
               vertical-align: middle;
           }

           .step-content-card {
               padding: 1.5rem;
               min-height: auto;
               position: static;
               top: auto;
               background-size: cover;
           }

           .step-content-card h3 {
               font-size: 1.25rem;
           }

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

           .section-title {
               margin-bottom: 30px;
           }

           .section-title h2 {
               font-size: 1.5rem;
           }

           .section-title p {
               font-size: 1.1rem;
           }
       }

       @media (min-width: 769px) and (max-width: 1024px) {
           .process-section {
               padding: 4rem 1.5rem;
           }

           .process-grid {
               gap: 3rem;
           }

           .process-timeline-nav {
               top: 100px;
           }

           .timeline-nav-list {
               padding-left: 20px;
           }

           .timeline-nav-item a {
               font-size: 1.1rem;
           }

           .step-content-card {
               padding: 2rem;
               top: 100px;
           }

           .step-content-card h3 {
               font-size: 1.4rem;
           }

           .step-content-card p {
               font-size: 1.05rem;
           }

           .section-title h2 {
               font-size: 1.75rem;
           }

           .section-title p {
               font-size: 1.3rem;
           }
       }

       @media (min-width: 1400px) {
           .process-section {
               max-width: 1400px;
               margin: 0 auto;
           }

           .process-grid {
               gap: 6rem;
           }

       }


       /* ================= MINIMAL FOOTER STYLES ================= */
       .minimal-footer {
           background: #000000;
           color: #ffffff;
           padding: 40px 20px 20px;
           margin-top: 50px;
       }

       .footer-container {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 50px;
           margin-bottom: 40px;
       }

       /* Logo Section */
       .footer-logo-section {
           /* padding: 25px; */
           display: flex;
           flex-direction: column;
           align-items: flex-start;
       }

       .footer-logo {
           height: 45px;
           margin-bottom: 15px;
       }

       .tagline {
           color: #c4161a;
           font-weight: 600;
           font-size: 16px;
           margin: 0;
           font-style: italic;
       }

       /* About Section */
       .footer-about h4,
       .footer-contact h4 {
           color: #ffffff;
           font-size: 20px;
           margin-bottom: 20px;
           position: relative;
           padding-bottom: 10px;
       }

       .footer-about h4::after,
       .footer-contact h4::after {
           content: '';
           position: absolute;
           left: 0;
           bottom: 0;
           width: 40px;
           height: 3px;
           background: #c4161a;
       }

       .footer-about p {
           color: rgba(255, 255, 255, 0.8);
           line-height: 1.7;
           font-size: 15px;
           margin: 0;
       }

       /* Contact Section */
       .contact-item {
           display: flex;
           align-items: flex-start;
           gap: 15px;
           margin-bottom: 20px;
       }

       .contact-item i {
           color: #c4161a;
           font-size: 18px;
           margin-top: 3px;
           min-width: 20px;
       }

       .contact-item p {
           color: rgba(255, 255, 255, 0.8);
           line-height: 1.6;
           margin: 0;
           font-size: 15px;
       }

       .contact-item strong {
           color: #ffffff;
           font-weight: 600;
       }

       .contact-item a {
           color: rgba(255, 255, 255, 0.9);
           text-decoration: none;
           transition: color 0.3s;
       }

       .contact-item a:hover {
           color: #c4161a;
           text-decoration: underline;
       }

       /* Copyright */
       .footer-bottom {
           margin-bottom: 24px;
           text-align: center;
           padding-top: 20px;
           border-top: 1px solid rgba(255, 255, 255, 0.1);
       }

       .footer-bottom p {
           color: rgba(255, 255, 255, 0.6);
           font-size: 14px;
           margin: 0;
       }

       /* ================= RESPONSIVE ================= */
       @media (max-width: 992px) {
           .footer-container {
               grid-template-columns: repeat(2, 1fr);
               gap: 40px;
           }

           .footer-logo-section {
               grid-column: 1 / -1;
               text-align: center;
               align-items: center;
               margin-bottom: 20px;
           }

           .footer-logo {
               height: 40px;
           }
       }

       @media (max-width: 768px) {
           .footer-container {
               grid-template-columns: 1fr;
               gap: 30px;
           }

           .minimal-footer {
               padding: 30px 15px 15px;
           }

           .footer-about h4,
           .footer-contact h4 {
               font-size: 18px;
           }

           .footer-about p,
           .contact-item p {
               font-size: 14px;
           }

           .tagline {
               font-size: 15px;
           }
       }

       @media (max-width: 480px) {
           .contact-item {
               flex-direction: column;
               gap: 8px;
           }

           .contact-item i {
               margin-top: 0;
           }

           .footer-logo {
               height: 35px;
           }
       }


       /* new faq section css is here  */
       #faq {
           padding: clamp(50px, 6vw, 90px) 20px;
           background: #ffffff;
           overflow: hidden;
       }

       /* Heading */
       /* FAQ Header Layout */
       .faq-header {
           display: grid;
           grid-template-columns: auto 1fr auto;
           align-items: center;
           gap: 20px;
           margin-bottom: 50px;
       }

       /* Left Logo */
       .faq-logo-left img {
           height: 55px;
           width: auto;
       }

       /* Center Title */
       .faq-title {
           text-align: center;
       }

       .faq-heading {
           font-size: clamp(24px, 4vw, 38px);
           font-weight: 700;
           color: #c62828;
           margin: 0;
       }

       /* Right Image */
       .faq-logo-right img {
           height: 100px;
           width: 100px;
           object-fit: cover;
           border-radius: 8px;
       }

       /* Mobile Responsive */
       @media (max-width: 768px) {
           .faq-header {
               grid-template-columns: 1fr;
               text-align: center;
           }

           .faq-logo-left,
           .faq-logo-right {
               display: flex;
               justify-content: center;
           }

           .faq-logo-right img {
               margin-top: 10px;
           }
       }


       /* Horizontal scroll wrapper */
       .faq-scroll {
           display: flex;
           gap: clamp(16px, 3vw, 25px);
           overflow-x: auto;
           scroll-behavior: smooth;
           padding-bottom: 20px;
           padding-left: 10px;
       }

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

       .faq-scroll {
           -ms-overflow-style: none;
           scrollbar-width: none;
       }

       /* FAQ card (responsive width) */
        /* FAQ card (responsive width) */
       .faq-card {
           flex: 0 0 clamp(280px, 75vw, 620px);
           /* background: #ffffff; */
           border-radius: 14px;
           padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 32px);
           border-left: 6px solid #000000;
           background-color:#c62828;
           color: white;
           border-right: 6px solid #000000;
           box-shadow: 0 15px 35px rgba(198, 40, 40, 0.12);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
       }

       /* Hover effect (desktop only) */
       @media (hover: hover) {
           .faq-card:hover {
               transform: translateY(-6px);
               box-shadow: 0 22px 45px rgba(198, 40, 40, 0.2);
           }
       }

       /* Question */
       .faq-card h4 {
           font-size: clamp(16px, 2.5vw, 20px);
           color: #ffffff;
           margin-bottom: 10px;
           line-height: 1.4;
       }

       /* Answer */
       .faq-card p {
           font-size: clamp(14px, 2.4vw, 15px);
           line-height: 1.7;
           color: #ffffff;
       }

       /* Extra small devices (≤480px) */
       @media (max-width: 480px) {
           .faq-scroll {
               padding-left: 5px;
           }

           .faq-card {
               border-left-width: 4px;
           }
       }

       /* Tablet optimization */
       @media (max-width: 1024px) {
           .faq-scroll {
               scroll-snap-type: x mandatory;
           }

           .faq-card {
               scroll-snap-align: start;
           }
       }

       .faq-section {
           background-color: transparent;
       }




       .capsule{
        padding:3px;
        border-radius: 18px;
        background-color: white;
        margin: 0 5px;
       }

       .capsule:hover{
        background-color: rgb(223, 221, 221);
       }