/* html,
 body {
     overflow-x: hidden;
 } */
 body {
     margin: 0;
     font-family: "Montserrat", sans-serif;
 }

 /* GSAP animated sections */
 .gsap-section {
     overflow: hidden;
 }

 /* ================= FIXED BUTTONS ================= */
 .fixed-buttons {
     position: fixed;
     left: 20px;
     bottom: 20px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     z-index: 9999;
 }

 .fixed-btn {
     width: 45px;
     height: 45px;
     /* border-radius: 50%; */
     display: flex;
     align-items: center;
     justify-content: center;
     /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); */
     transition: all 0.35s ease;
     cursor: pointer;
     position: relative;
 }

 .fixed-btn img {
     width: 50px;
     height: 50px;
 }

 /* WhatsApp */
 /* .fixed-btn.whatsapp {
     background: #25d366;
     animation: pulse 2.2s infinite;
 } */

 .fixed-btn.whatsapp:hover {
     /* background: #1ebe5d; */
     transform: scale(1.12);
     /* box-shadow: 0 0 25px rgba(37, 211, 102, 0.8); */
 }

 /* Email */
 .fixed-btn.email {
     /* background: linear-gradient(135deg, #1d4ed8, #2563eb); */
 }

 .fixed-btn.email:hover {
     transform: scale(1.12);
     /* box-shadow: 0 0 25px rgba(37, 99, 235, 0.8); */
 }

 /* Tooltip */
 .fixed-btn::after {
     content: attr(data-title);
     position: absolute;
     left: 70px;
     background: #0e2a47;
     color: #fff;
     padding: 6px 12px;
     /* border-radius: 6px; */
     font-size: 13px;
     white-space: nowrap;
     opacity: 0;
     transform: translateX(-10px);
     transition: 0.3s;
     pointer-events: none;
 }

 .fixed-btn:hover::after {
     opacity: 1;
     transform: translateX(0);
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
     }

     70% {
         box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
     }
 }

 /* ================= TOPBAR ================= */
 /* ================= TOPBAR ================= */
 .topbar {
     background: #0e2a47;
     color: #fff;
     height: 40px;
     display: flex;
     align-items: center;
     font-size: 14px;
     font-weight: 600;
 }

 .topbar-inner {
     width: 100%;
     padding: 0 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* LEFT CONTACT */
 .topbar-left {
     display: flex;
     gap: 40px;
     align-items: center;
 }

 .contact-link span {
     margin-left: 16px;
 }


 .contact-link {
     color: #fff;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: 0.3s;
 }

 .contact-link:hover {
     color: #3b82f6;
 }

 /* RIGHT SOCIAL */
 .topbar-right {
     display: flex;
     gap: 8px;
 }

 .social {
     width: 34px;
     height: 34px;
     background: #1d4ed8;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.3s;
 }

 .social:hover {
     background: #2563eb;
     transform: translateY(-3px);
 }

 /* ================= MOBILE VIEW ================= */
 @media (max-width: 768px) {
     .topbar {
         height: auto;
         padding: 6px 0;
     }

     .topbar-left {
         flex-direction: column;
         align-items: flex-start;
         gap: 4px;
     }

     .contact-link {
         font-size: 13px;
     }

     .social {
         width: 30px;
         height: 30px;
         font-size: 13px;
     }
 }

 /* ================= MOBILE VIEW FIX ================= */
 @media (max-width: 768px) {
     .topbar {
         height: auto;
         padding: 6px 0;
     }

     /* Left side: only phone */
     .topbar-left {
         flex-direction: row;
         align-items: center;
         gap: 0;
     }

     /* Hide email on mobile */
     .topbar-left a:nth-child(2) {
         display: none;
     }

     .contact-link {
         font-size: 13px;
         margin-right: 0;
     }

     /* Right side: social icons */
     .topbar-right {
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .social {
         width: 30px;
         height: 30px;
         font-size: 13px;
     }
 }

 /* ================= NAVBAR ================= */
 .navbar {
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     height: 80px;
 }

 .navbar-logo {
     height: 60px;
 }

 .navbar-nav .nav-link {
     color: #0e2a47 !important;
     font-weight: 600;
     font-size: 17px;
     margin-right: 20px;
     transition: 0.3s;
 }

 .navbar-nav .nav-link:hover {
     color: #2563eb !important;
     transform: translateY(-2px);
 }

 .estimate-btn {
     background: linear-gradient(135deg, #0e2a47, #143d63);
     color: #fff;
     padding: 10px 20px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     transition: 0.3s;
 }

 .estimate-btn:hover {
     background: linear-gradient(135deg, #143d63, #0e2a47);
     transform: scale(1.05);
     color: #fff;
 }

 /* ================= DROPDOWN ================= */
 .custom-dropdown {
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     padding: 10px 0;
 }

 .dropdown-item {
     font-weight: 500;
     padding: 10px 20px;
     transition: 0.3s;
 }

 .dropdown-item:hover {
     background: linear-gradient(90deg, #0e2a47, #1d4ed8);
     color: #fff !important;
 }

 .dropdown-submenu {
     position: relative;
 }

 .sub-dropdown {
     position: absolute;
     top: 0;
     left: 100%;
     background: #fff;
     border-radius: 10px;
     min-width: 200px;
     display: none;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }

 .sub-dropdown.show {
     display: block;
 }

 @media (max-width: 991px) {
     .sub-dropdown {
         position: static;
         box-shadow: none;
     }
 }

 .logo-text {
     font-family: "Cinzel", serif;
     font-size: 32px;
     font-weight: 600;
     letter-spacing: 1.5px;
     color: #0e2a47;
 }

 /* ===== Dropdown Cursor Fix ===== */
 .nav-link.dropdown-toggle,
 .dropdown-item,
 .dropdown-item.dropdown-toggle {
     cursor: pointer;
 }

 /* Mobile view fix */
 @media (max-width: 991px) {
     .navbar {
         background: #ffffff;
     }

     /* Jab menu open ho */
     .navbar-collapse {
         background: #ffffff;
         padding: 15px 20px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     }

     .navbar-nav .nav-link {
         padding: 12px 0;
     }
 }

 /* navbar end */

 /* crousel start */
 /* crousel start */
 /* ===== CAROUSEL ===== */
 .carousel-img {
     height: 80vh;
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .carousel-img::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
 }

 /* Banner Content */
 .banner-content {
     position: absolute;
     inset: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     color: #fff;
     padding: 20px;
 }

 .banner-content h1 {
     font-size: 48px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .banner-content p {
     font-size: 18px;
     margin-bottom: 25px;
 }

 /* Buttons */
 .banner-buttons {
     display: flex;
     gap: 15px;
 }

 .banner-buttons a {
     padding: 12px 26px;
     font-size: 16px;
     font-weight: 600;
     border-radius: 30px;
     text-decoration: none;
     transition: 0.3s ease;
 }

 .btn-call {
     background: #0e2a47;
     color: #fff;
 }

 .btn-call:hover {
     background: #0e2a47;
 }

 .btn-whatsapp {
     background: #25D366;
     color: #fff;
 }

 .btn-whatsapp:hover {
     background: #1ebc5c;
 }

 /* Indicators */
 .carousel-indicators button {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #ffd6f4;
 }

 /* MOBILE VIEW */
 @media (max-width: 768px) {
     .carousel-img {
         height: 45vh;
     }

     .banner-content h1 {
         font-size: 26px;
     }

     .banner-content p {
         font-size: 14px;
     }

     .banner-buttons {
         flex-direction: column;
     }
 }

 /* EXTRA SMALL */
 @media (max-width: 480px) {
     .carousel-img {
         height: 35vh;
     }
 }


 /* crousel end */
 /* crousel end */

 /* about start */

 /* ================= ABOUT SECTION ================= */
 .about-section {
     padding: 40px 0;
     background: #ecf6ff;
 }

 .about-image img {
     width: 100%;
     border-radius: 14px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .about-subtitle {
     color: #B71C1C;
     font-weight: 700;
     letter-spacing: 1px;
     margin-bottom: 10px;
 }

 .about-title {
     font-size: 33px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 20px;
 }

 .about-title span {
     color: #2563eb;
 }

 .about-text {
     font-size: 16px;
     color: #000000;
     line-height: 1.8;
     margin-bottom: 15px;
 }

 .feature-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     color: #0e2a47;
 }

 .feature-item i {
     color: #b71c1c;
     font-size: 18px;
 }

 /* .about-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 26px;
     background: linear-gradient(135deg, #1d4ed8, #2563eb);
     color: #fff;
     border-radius: 6px;
     text-decoration: none;
     font-weight: 600;
 }

 .about-btn:hover {
     background: linear-gradient(135deg, #2563eb, #3b82f6);
     color: #fff;
 } */

 .btn-circuit {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;

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

     background: linear-gradient(180deg, #2563eb, #1e40af);
     color: #ffffff;

     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1px;
     text-decoration: none;

     overflow: hidden;
     box-shadow: 0 10px 30px rgba(37, 99, 235, 0.6),
         inset 0 0 20px rgba(255, 255, 255, 0.08);

     transition: all 0.4s ease;
 }

 /* text always above */
 .btn-circuit .btn-text {
     position: relative;
     z-index: 2;
 }

 /* SVG overlay */
 .circuit-svg {
     position: absolute;
     inset: 0;
     z-index: 1;
 }

 .circuit-svg path,
 .circuit-svg circle {
     fill: none;
     stroke: rgba(255, 255, 255, 0.55);
     stroke-width: 1.5;
     stroke-dasharray: 6;
     animation: circuit-flow 3s linear infinite;
 }

 /* hover power-up */
 .btn-circuit:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 50px rgba(37, 99, 235, 0.9),
         inset 0 0 25px rgba(255, 255, 255, 0.15);
 }

 /* circuit animation */
 @keyframes circuit-flow {
     from {
         stroke-dashoffset: 0;
         opacity: 0.3;
     }

     to {
         stroke-dashoffset: -60;
         opacity: 0.9;
     }
 }

 @media (max-width: 991px) {
     .about-title {
         font-size: 30px;
     }
 }

 /* about end */

 /* how we work start */
 /* ================= HOW WE WORK ================= */
 .how-we-work {
     padding: 30px 0;
     background: radial-gradient(circle at top, #e2e6f5, #e0ebf6);
     position: relative;
     overflow: hidden;
 }

 /* heading */
 .work-subtitle {
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1.2px;
     color: #b71c1c;
     margin-bottom: 10px;
 }

 .work-title {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
 }

 .work-title span {
     color: #2563eb;
 }

 .work-desc {
     max-width: 680px;
     margin: 14px auto 0;
     color: #475569;
     font-size: 16px;
     line-height: 1.8;
 }

 /* ================= CARDS ================= */
 .work-card {
     position: relative;
     background: #ffffff;
     padding: 36px 26px;
     border-radius: 18px;
     text-align: center;
     height: 100%;
     transition: all 0.45s ease;
     z-index: 2;
 }

 /* gradient border */
 .work-card::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: 20px;
     background: linear-gradient(120deg,
             rgba(37, 99, 235, 0.6),
             rgba(37, 99, 235, 0.1),
             rgba(37, 99, 235, 0.6));
     z-index: -1;
     opacity: 0.6;
 }

 .work-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 25px 60px rgba(37, 99, 235, 0.25);
 }

 /* ================= ICON ================= */
 .work-icon {
     width: 76px;
     height: 76px;
     margin: 0 auto 22px;
     background: linear-gradient(135deg, #2563eb, #1e40af);
     border-radius: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 30px;
     position: relative;
     box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);
 }

 /* pulse ring */
 .work-icon::after {
     content: "";
     position: absolute;
     inset: -8px;
     border-radius: 26px;
     border: 2px solid rgba(37, 99, 235, 0.25);
     animation: pulse 2.5s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.95);
         opacity: 0.6;
     }

     100% {
         transform: scale(1.15);
         opacity: 0;
     }
 }

 /* step no */
 .step-no {
     position: absolute;
     top: -10px;
     right: -10px;
     background: #ffffff;
     color: #2563eb;
     font-size: 12px;
     font-weight: 800;
     padding: 7px 9px;
     border-radius: 50%;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
 }

 .work-card h5 {
     font-size: 19px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 12px;
 }

 .work-card p {
     font-size: 15px;
     color: #000000;
     line-height: 1.7;
 }

 /* ================= CONNECTOR LINE (DESKTOP) ================= */
 @media (min-width: 992px) {
     .how-we-work::after {
         content: "";
         position: absolute;
         top: 58%;
         left: 10%;
         right: 10%;
         height: 2px;
         background: linear-gradient(90deg,
                 transparent,
                 rgba(37, 99, 235, 0.4),
                 transparent);
         z-index: 1;
     }
 }

 /* responsive */
 @media (max-width: 768px) {
     .work-title {
         font-size: 30px;
     }
 }

 /* how we work end */

 /* why choose us start */
 /* ================= WHY CHOOSE – COMPACT TIMELINE ================= */
 .why-timeline {
     padding: 30px 0;
     background: linear-gradient(180deg, #f9fbff, #eef4ff);
     position: relative;
     overflow: hidden;
 }

 /* background glow */
 .why-timeline::before,
 .why-timeline::after {
     content: "";
     position: absolute;
     width: 320px;
     height: 320px;
     background: radial-gradient(circle,
             rgba(37, 99, 235, 0.16),
             transparent 70%);
     border-radius: 50%;
     z-index: 0;
 }

 .why-timeline::before {
     top: -100px;
     left: -100px;
 }

 .why-timeline::after {
     bottom: -120px;
     right: -120px;
 }

 /* Heading */
 .why-title {
     position: relative;
     z-index: 2;
 }

 .why-title span {
     color: #b71c1c;
     font-weight: 700;
     letter-spacing: 1px;
     font-size: 14px;
 }

 .why-title h2 {
     font-size: 34px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 8px;
 }

 .why-title h2 span {
     color: #b71c1c;
 }

 .why-title p {
     max-width: 600px;
     margin: 12px auto 0;
     color: #475569;
     font-size: 15px;
     line-height: 1.7;
 }

 /* Timeline */
 .timeline {
     position: relative;
     margin-top: 50px;
     z-index: 2;
 }

 .timeline::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 0;
     height: 100%;
     width: 3px;
     background: linear-gradient(to bottom,
             #2563eb,
             rgba(37, 99, 235, 0.15));
     transform: translateX(-50%);
 }

 /* Timeline Item */
 .timeline-item {
     display: flex;
     align-items: center;
     margin-bottom: 50px;
     position: relative;
 }

 .timeline-item:nth-child(even) {
     flex-direction: row-reverse;
 }

 /* Content Box */
 .timeline-content {
     width: 45%;
     background: #ffffff;
     padding: 24px 26px;
     border-radius: 16px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
     position: relative;
     transition: 0.3s ease;
 }

 .timeline-content::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 16px;
     border: 1px solid rgba(37, 99, 235, 0.18);
 }

 .timeline-content:hover {
     transform: translateY(-4px);
     box-shadow: 0 22px 55px rgba(37, 99, 235, 0.25);
 }

 .timeline-content h5 {
     font-size: 18px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 6px;
 }

 .timeline-content p {
     font-size: 14px;
     color: #64748b;
     line-height: 1.6;
     margin: 0;
 }

 /* Icon */
 .timeline-icon {
     width: 56px;
     height: 56px;
     background: linear-gradient(135deg, #2563eb, #b71c1c);
     color: #ffffff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15),
         0 12px 28px rgba(37, 99, 235, 0.55);
     z-index: 3;
 }

 /* Pulse */
 .timeline-icon::after {
     content: "";
     position: absolute;
     inset: -8px;
     border-radius: 50%;
     border: 2px solid rgba(37, 99, 235, 0.4);
     animation: pulse 2.2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.9);
         opacity: 1;
     }

     100% {
         transform: scale(1.3);
         opacity: 0;
     }
 }

 /* Responsive */
 @media (max-width: 768px) {
     .timeline::before {
         left: 18px;
     }

     .timeline-item,
     .timeline-item:nth-child(even) {
         flex-direction: column;
         align-items: flex-start;
     }

     .timeline-icon {
         left: 18px;
         transform: none;
     }

     .timeline-content {
         width: 100%;
         margin-left: 55px;
     }

     .why-title h2 {
         font-size: 26px;
     }
 }

 /* why choose us end */

 /* index services start */
 /* ================= PREMIUM SERVICES – CREATIVE ================= */
 .premium-services {
     padding: 30px 0;
     background: #f8fafc;
     position: relative;
 }

 /* subtle grid feel */
 .premium-services::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(37, 99, 235, 0.04) 1px,
             transparent 1px),
         linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
     background-size: 40px 40px;
     pointer-events: none;
 }

 /* heading */
 .service-title span {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #b71c1c;
 }

 .service-title h2 {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 10px;
 }

 .service-title p {
     max-width: 650px;
     margin: 14px auto 0;
     font-size: 15px;
     color: #475569;
 }

 /* ================= SERVICE CARD ================= */
 .service-card {
     position: relative;
     background: #ffffff;
     border-radius: 18px;
     padding: 34px 28px 34px 36px;
     height: 100%;
     overflow: hidden;
     transition: 0.4s ease;
     box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
 }

 /* vertical tech line */
 .service-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 6px;
     height: 100%;
     background: linear-gradient(180deg, #2563eb, #1e40af);
 }

 /* hover glow */
 .service-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top right,
             rgba(37, 99, 235, 0.25),
             transparent 70%);
     opacity: 0;
     transition: 0.4s ease;
 }

 .service-card:hover::after {
     opacity: 1;
 }

 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 70px rgba(37, 99, 235, 0.25);
 }

 /* icon */
 .service-icon {
     width: 62px;
     height: 62px;
     border-radius: 14px;
     background: linear-gradient(135deg, #2563eb, #1e40af);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 26px;
     margin-bottom: 18px;
     box-shadow: 0 10px 28px rgba(37, 99, 235, 0.45);
 }

 .service-card h5 {
     font-size: 19px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 10px;
 }

 .service-card p {
     font-size: 14px;
     color: #64748b;
     line-height: 1.7;
     margin: 0;
 }

 /* read more */
 .service-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 14px;
     font-size: 14px;
     font-weight: 600;
     color: #b71c1c;
     text-decoration: none;

     cursor: pointer;
     /* ✅ pointer cursor */
     position: relative;
     z-index: 5;
 }

 .service-link i {
     transition: transform 0.3s ease;
 }

 .service-card:hover .service-link i {
     transform: translateX(4px);
 }

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

 /* index services  end */

 /* index project start */
 /* ================= PROJECT SECTION ================= */
 .projects-section {
     padding: 30px 0;
     background: #f8fafc;
 }

 .projects-title span {
     font-size: 14px;
     font-weight: 700;
     color: #b71c1c;
     letter-spacing: 1px;
 }

 .projects-title h2 {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 8px;
 }

 .projects-title p {
     max-width: 620px;
     margin: 12px auto 0;
     color: #475569;
     font-size: 15px;
 }

 /* filters */
 .project-filters {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin: 40px 0 50px;
     flex-wrap: wrap;
 }

 .filter-btn {
     padding: 12px 30px;
     border-radius: 50px;
     border: 2px solid #2563eb;
     background: transparent;
     color: #2563eb;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
 }

 .filter-btn.active,
 .filter-btn:hover {
     background: #2563eb;
     color: #fff;
     box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
 }

 /* card */
 .project-card {
     background: #fff;
     border-radius: 18px;
     overflow: hidden;
     height: 100%;
     box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
     transition: 0.35s;
     position: relative;
 }

 .project-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 25px 60px rgba(37, 99, 235, 0.25);
 }

 .project-img {
     height: 200px;
     overflow: hidden;
 }

 .project-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s;
 }

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

 .project-status {
     position: absolute;
     top: 14px;
     right: 14px;
     padding: 6px 14px;
     font-size: 12px;
     font-weight: 700;
     color: #fff;
     border-radius: 20px;
     z-index: 2;
 }

 .status-complete {
     background: #16a34a;
 }

 .status-running {
     background: #f59e0b;
 }

 .project-content {
     padding: 22px 22px 26px;
 }

 .project-content h5 {
     font-size: 18px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 6px;
 }

 .project-content p {
     font-size: 14px;
     color: #64748b;
     line-height: 1.6;
 }

 .project-meta {
     font-size: 13px;
     color: #475569;
     display: flex;
     align-items: center;
     gap: 6px;
     margin-bottom: 12px;
 }

 .view-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 600;
     color: #b71c1c;
     text-decoration: none;
     cursor: pointer;
 }

 .view-btn i {
     transition: 0.3s;
 }

 .project-card:hover .view-btn i {
     transform: translateX(4px);
 }

 /* filter logic */
 .project-item {
     display: none;
 }

 .project-item.show {
     display: block;
 }

 @media (max-width: 768px) {
     .projects-title h2 {
         font-size: 28px;
     }

     .project-img {
         height: 180px;
     }
 }

 /* index project end */

 /* blog start */
 /* ================= BLOG SECTION ================= */
 .blog-section {
     padding: 30px 0;
     background: linear-gradient(180deg, #f9fbff, #eef4ff);
 }

 /* heading */
 .blog-title span {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #b71c1c;
 }

 .blog-title h2 {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 8px;
 }

 .blog-title p {
     max-width: 620px;
     margin: 12px auto 0;
     color: #475569;
     font-size: 15px;
 }

 /* blog card */
 .blog-card {
     background: #ffffff;
     border-radius: 18px;
     overflow: hidden;
     height: 100%;
     box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
     transition: 0.35s ease;
 }

 .blog-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 28px 65px rgba(37, 99, 235, 0.25);
 }

 /* image */
 .blog-img {
     height: 210px;
     overflow: hidden;
     position: relative;
 }

 .blog-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s ease;
 }

 .blog-card:hover .blog-img img {
     transform: scale(1.1);
 }

 /* category badge */
 .blog-tag {
     position: absolute;
     top: 15px;
     left: 15px;
     background: #b71c1c;
     color: #fff;
     font-size: 12px;
     font-weight: 700;
     padding: 6px 14px;
     border-radius: 20px;
 }

 /* content */
 .blog-content {
     padding: 24px;
 }

 .blog-meta {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 13px;
     color: #64748b;
     margin-bottom: 10px;
 }

 .blog-content h5 {
     font-size: 19px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 10px;
 }

 .blog-content p {
     font-size: 14px;
     color: #64748b;
     line-height: 1.6;
     margin-bottom: 14px;
 }

 /* read more */
 .blog-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 600;
     color: #b71c1c;
     text-decoration: none;
     cursor: pointer;
 }

 .blog-link i {
     transition: transform 0.3s ease;
 }

 .blog-card:hover .blog-link i {
     transform: translateX(5px);
 }

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

     .blog-img {
         height: 190px;
     }
 }

 /* blog end */

 /* footer start */
 /* ================= FOOTER ================= */
 .main-footer {
     background: #0e2a47;
     padding: 20px 0 0;
     color: #cbd5e1;
 }

 /* About */
 .footer-about h4 {
     font-size: 22px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 14px;
 }

 .footer-about p {
     font-size: 14px;
     line-height: 1.7;
     margin-bottom: 18px;
 }

 /* Social */
 .footer-social {
     display: flex;
     gap: 12px;
 }

 .footer-social a {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 14px;
     transition: 0.3s ease;
     text-decoration: none;
 }

 .footer-social a:hover {
     background: #2563eb;
     transform: translateY(-3px);
 }

 /* Links */
 .footer-links h5,
 .footer-contact h5 {
     font-size: 18px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 16px;
 }

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

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

 .footer-links ul li a {
     color: #cbd5e1;
     font-size: 14px;
     text-decoration: none;
     transition: 0.3s ease;
 }

 .footer-links ul li a:hover {
     color: #2563eb;
     padding-left: 6px;
 }

 /* Contact */
 .footer-contact p {
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
 }

 .footer-contact i {
     color: #2563eb;
 }

 /* Bottom Bar */
 .footer-bottom {
     background: #081b30;
     margin-top: 50px;
     padding: 16px 0;
     text-align: center;
 }

 .footer-bottom p {
     margin: 0;
     font-size: 13px;
     color: #94a3b8;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .main-footer {
         padding-top: 50px;
     }
 }

 /* footer end */

 /* cta banner start */
 /* ================= CTA BANNER ================= */
 .cta-banner {
     padding: 20px 0;
     background: #f8fafc;
 }

 .cta-box {
     background: linear-gradient(135deg, #2563eb, #1e40af);
     border-radius: 18px;
     padding: 36px 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     color: #ffffff;
     box-shadow: 0 25px 60px rgba(37, 99, 235, 0.35);
 }

 .cta-content h3 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .cta-content p {
     font-size: 15px;
     opacity: 0.95;
     margin: 0;
     max-width: 520px;
 }

 .cta-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 30px;
     background: #ffffff;
     color: #b71c1c;
     border-radius: 50px;
     font-size: 15px;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.35s ease;
     cursor: pointer;
 }

 .cta-btn i {
     transition: transform 0.3s ease;
 }

 .cta-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
 }

 .cta-btn:hover i {
     transform: translateX(5px);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .cta-box {
         flex-direction: column;
         text-align: center;
         padding: 30px 24px;
     }

     .cta-content h3 {
         font-size: 22px;
     }
 }

 /* cta banner end */

 /*breadcrumb banner start*/
 /* ===== Breadcrumb Banner ===== */
 .contact-banner {
     position: relative;
     background: url("images/bread.jpg") center/cover no-repeat;
     height: 230px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     animation: fadeIn 1s ease forwards;
 }

 .banner-overlay {
     width: 100%;
     height: 100%;
     background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
     animation: fadeIn 1.2s ease forwards;
 }

 .banner-overlay h1 {
     font-family: "Playfair Display", serif;
     font-size: 48px;
     margin: 10px 0;
     letter-spacing: 1px;
 }

 .breadcrumb {
     font-size: 16px;
     margin-bottom: 10px;
     font-weight: 500;
 }

 .breadcrumb a,
 .breadcrumb span {
     color: #fff;
     text-decoration: none;
 }

 .breadcrumb a:hover {
     color: #fff;
 }

 /* breadcrumb banner end */

 /* about start */
 .aboutus-section {
     padding: 30px 0;
     background: #f8fafc;
 }

 .aboutus-subtitle {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #b71c1c;
 }

 .aboutus-title {
     font-size: 30px;
     font-weight: 800;
     color: #0e2a47;
     margin: 10px 0 20px;
 }

 .aboutus-title span {
     color: #b71c1c;
 }

 .aboutus-text {
     font-size: 15px;
     color: #475569;
     line-height: 1.9;
     margin-bottom: 15px;
 }

 .aboutus-highlight {
     background: #ffffff;
     padding: 25px;
     border-left: 5px solid #2563eb;
     border-radius: 10px;
     margin-top: 25px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
 }

 .aboutus-highlight h5 {
     font-size: 18px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 10px;
 }

 .aboutus-list {
     list-style: none;
     padding: 0;
     margin-top: 15px;
 }

 .aboutus-list li {
     margin-bottom: 10px;
     font-weight: 600;
     color: #0e2a47;
     font-size: 14px;
 }

 .aboutus-list i {
     color: #2563eb;
     margin-right: 8px;
 }

 @media (max-width: 768px) {
     .aboutus-title {
         font-size: 28px;
     }
 }

 /* about end */

 /* mission start */
 .mv-section {
     padding: 20px 0;
     background: linear-gradient(180deg, #ffffff, #f1f5f9);
 }

 .mv-title span {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #b71c1c;
 }

 .mv-title h2 {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 8px;
 }

 .mv-title p {
     max-width: 650px;
     margin: 12px auto 0;
     font-size: 15px;
     color: #475569;
 }

 /* Card */
 .mv-card {
     background: #ffffff;
     border-radius: 18px;
     padding: 36px 28px;
     height: 100%;
     text-align: center;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
     transition: 0.4s ease;
     position: relative;
 }

 .mv-card::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 18px;
     border: 1px solid rgba(37, 99, 235, 0.15);
 }

 .mv-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 30px 70px rgba(37, 99, 235, 0.25);
 }

 /* Icon */
 .mv-icon {
     width: 70px;
     height: 70px;
     margin: 0 auto 20px;
     background: linear-gradient(135deg, #2563eb, #b71c1c);
     color: #ffffff;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);
 }

 .mv-card h5 {
     font-size: 20px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 12px;
 }

 .mv-card p {
     font-size: 14px;
     color: #64748b;
     line-height: 1.7;
 }

 @media (max-width: 768px) {
     .mv-title h2 {
         font-size: 28px;
     }
 }

 /* vision end */

 /* why choose us start */

 .choose-section {
     padding: 20px 0;
     background: linear-gradient(180deg, #ffffff, #eef4ff);
     position: relative;
     overflow: hidden;
 }

 .choose-title span {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #b71c1c;
 }

 .choose-title h2 {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 8px;
 }

 .choose-title p {
     max-width: 650px;
     margin: 12px auto 0;
     font-size: 15px;
     color: #475569;
     line-height: 1.8;
 }

 /* Card */
 .choose-card {
     background: #ffffff;
     border-radius: 18px;
     padding: 34px 28px;
     height: 100%;
     position: relative;
     transition: all 0.45s ease;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
 }

 .choose-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 6px;
     height: 100%;
     background: linear-gradient(180deg, #2563eb, #1e40af);
     border-radius: 18px 0 0 18px;
 }

 .choose-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 30px 70px rgba(37, 99, 235, 0.25);
 }

 /* Icon */
 .choose-icon {
     width: 64px;
     height: 64px;
     border-radius: 16px;
     background: linear-gradient(135deg, #b71c1c, #1e40af);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 26px;
     margin-bottom: 18px;
     box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
 }

 .choose-card h5 {
     font-size: 19px;
     font-weight: 700;
     color: #0e2a47;
     margin-bottom: 10px;
 }

 .choose-card p {
     font-size: 14px;
     color: #64748b;
     line-height: 1.7;
     margin: 0;
 }

 @media (max-width: 768px) {
     .choose-title h2 {
         font-size: 28px;
     }
 }

 /* why choose us end */


 /* blog start */
 .blog-page-section {
     padding: 20px 0;
     background: linear-gradient(180deg, #f8fafc, #eef4ff);
 }

 .blog-page-heading span {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #2563eb;
 }

 .blog-page-heading h2 {
     font-size: 38px;
     font-weight: 800;
     color: #0e2a47;
     margin-top: 8px;
 }

 .blog-page-heading p {
     max-width: 650px;
     margin: 12px auto 0;
     font-size: 15px;
     color: #475569;
     line-height: 1.8;
 }

 .blog-page-card {
     background: #ffffff;
     border-radius: 20px;
     overflow: hidden;
     height: 100%;
     transition: all 0.45s ease;
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
 }

 .blog-page-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 35px 80px rgba(37, 99, 235, 0.25);
 }

 .blog-page-img {
     height: 220px;
     position: relative;
     overflow: hidden;
 }

 .blog-page-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .blog-page-card:hover .blog-page-img img {
     transform: scale(1.1);
 }

 .blog-page-tag {
     position: absolute;
     top: 16px;
     left: 16px;
     background: linear-gradient(135deg, #2563eb, #1e40af);
     color: #fff;
     padding: 6px 14px;
     font-size: 12px;
     font-weight: 700;
     border-radius: 20px;
 }

 .blog-page-content {
     padding: 26px 28px 30px;
 }

 .blog-page-meta {
     display: flex;
     gap: 16px;
     font-size: 13px;
     color: #64748b;
     margin-bottom: 10px;
     font-weight: 600;
 }

 .blog-page-meta i {
     color: #2563eb;
     margin-right: 4px;
 }

 .blog-page-content h5 {
     font-size: 20px;
     font-weight: 800;
     color: #0e2a47;
     margin-bottom: 10px;
 }

 .blog-page-content p {
     font-size: 14.5px;
     color: #64748b;
     line-height: 1.8;
     margin-bottom: 14px;
 }

 .blog-view-more {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 700;
     color: #2563eb;
     text-decoration: none;
 }

 .blog-page-card:hover .blog-view-more i {
     transform: translateX(5px);
 }

 @media (max-width: 768px) {
     .blog-page-heading h2 {
         font-size: 28px;
     }

     .blog-page-img {
         height: 190px;
     }
 }

 /* blog end */

 /* ================= BLOG DETAIL ================= */
 .blog-detail-section {
     padding: 20px 0;
 }

 .blog-hero {
     background: #ffffff;
     border-radius: 28px;
     padding: 40px;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
 }

 .blog-detail-img {
     height: 460px;
     border-radius: 24px;
     overflow: hidden;
     margin-bottom: 30px;
 }

 .blog-detail-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .blog-badge {
     display: inline-block;
     background: linear-gradient(135deg, #2563eb, #1e40af);
     color: #fff;
     padding: 7px 18px;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 16px;
 }

 .blog-detail-title {
     font-size: 38px;
     font-weight: 900;
     color: #0f172a;
     line-height: 1.35;
     margin-bottom: 16px;
 }

 .blog-detail-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 24px;
     font-size: 14px;
     color: #64748b;
     font-weight: 600;
     margin-bottom: 30px;
 }

 .blog-detail-meta i {
     color: #2563eb;
     margin-right: 6px;
 }

 .blog-detail-content p {
     font-size: 16.2px;
     color: #475569;
     line-height: 2;
     margin-bottom: 20px;
 }

 .blog-detail-content h4 {
     font-size: 22px;
     font-weight: 800;
     color: #0f172a;
     margin: 42px 0 16px;
     position: relative;
     padding-left: 16px;
 }

 .blog-detail-content h4::before {
     content: "";
     position: absolute;
     left: 0;
     top: 4px;
     width: 5px;
     height: 75%;
     background: linear-gradient(180deg, #2563eb, #1e40af);
     border-radius: 10px;
 }

 @media (max-width: 768px) {
     .blog-detail-title {
         font-size: 26px;
     }

     .blog-detail-img {
         height: 260px;
     }

     .blog-hero {
         padding: 26px;
     }
 }

 /* blog-detail end */

 /* contact us start */

 /* ===== Contact Section ===== */
 .contact-section {
     padding: 30px 0;
     background: #f5f5f5;
 }

 .contact-heading {
     text-align: center;
     margin-bottom: 50px;
     animation: fadeIn 1s ease forwards;
 }

 .contact-heading h2 {
     font-size: 40px;
     font-weight: 700;
     color: #0a1a3c;
     position: relative;
     padding-left: 18px;
 }

 .contact-heading p {
     font-size: 18px;
     color: #000;
     max-width: 700px;
     margin: 0 auto 50px;
     line-height: 1.6;
 }

 /* Wrapper */
 .contact-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     justify-content: center;
     align-items: stretch;
 }

 /* Map */
 .contact-map {
     flex: 1 1 48%;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 8px 30px rgba(10, 26, 60, 0.15);
     height: 500px;
     background: #fff;
     animation: slideInLeft 1s ease forwards;
 }

 .contact-map iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 /* Form */
 .contact-form {
     flex: 1 1 48%;
     border-radius: 18px;
     box-shadow: 0 8px 30px rgba(10, 26, 60, 0.15);
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.4);
     padding: 15px 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     animation: slideInRight 1s ease forwards;
 }

 .contact-form h5 {
     font-family: "Playfair Display", serif;
     font-size: 26px;
     color: #0a1a3c;
     text-align: center;
     font-weight: 600;
     margin-bottom: 30px;
 }

 .input-group {
     position: relative;
     margin-bottom: 20px;
 }

 .input-group i {
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #0a1a3c;
     font-size: 16px;
 }

 .input-group textarea+i {
     top: 20px;
     transform: none;
 }

 .input-group input,
 .input-group textarea {
     width: 100%;
     padding: 12px 15px 12px 45px;
     border: 1px solid #fff;
     border-radius: 10px;
     font-size: 17px;
     transition: 0.3s;
     outline: none;
 }

 .input-group input:focus,
 .input-group textarea:focus {
     border-color: #0a1a3c;
     box-shadow: 0 10px 25px rgba(10, 26, 60, 0.3);
 }

 .input-group textarea {
     resize: none;
     height: 120px;
 }

 /* Send Button */
 .send-btn {
     background: linear-gradient(90deg, #1b2a49, #2c3e5c);
     color: #fff;
     border: none;
     padding: 12px 0;
     border-radius: 10px;
     font-weight: 600;
     width: 100%;
     transition: 0.3s;
     letter-spacing: 0.5px;
     cursor: pointer;
 }

 .send-btn:hover {
     background: linear-gradient(90deg, #2c3e5c, #1b2a49);
     transform: scale(1.03);
     box-shadow: 0 0 15px rgba(10, 26, 60, 0.3);
 }

 /* Info Cards */
 .info-row {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 25px;
     margin-top: 60px;
     text-align: center;
 }

 .info-card {
     background: #fff;
     border-radius: 16px;
     padding: 35px 25px;
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
     flex: 1 1 300px;
     transition: 0.4s ease, transform 0.5s;
     animation: fadeIn 1s ease forwards;
 }

 .info-card:hover {
     transform: translateY(-10px) scale(1.03);
     box-shadow: 0 10px 25px rgba(10, 26, 60, 0.6);
 }

 .info-card i {
     font-size: 32px;
     color: #0a1a3c;
     margin-bottom: 12px;
     transition: 0.3s;
 }

 .info-card h6 {
     font-family: "Playfair Display", serif;
     color: #111;
     font-weight: 600;
     margin-bottom: 10px;
     font-size: 20px;
 }

 .info-card p {
     color: #000;
     margin: 0;
     font-size: 16px;
 }

 .contact-heading span {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #2563eb;
 }


 .contact-heading h2 {
     font-size: 38px;
     font-weight: 900;
     color: #0f172a;
     margin-top: 10px;
 }

 .contact-heading p {
     max-width: 650px;
     margin: 14px auto 0;
     font-size: 15px;
     color: #475569;
     line-height: 1.9;
 }

 /* Responsive */
 @media (max-width:992px) {
     .contact-wrapper {
         flex-direction: column;
     }

     .contact-map,
     .contact-form {
         flex: 1 1 100%;
     }

     .contact-form {
         padding: 35px 25px;
     }
 }

 /* =====================
   MOBILE WIDTH + HEIGHT FIX
===================== */

 @media (max-width: 768px) {

     .contact-wrapper {
         padding: 0 12px;
         /* side spacing */
     }

     /* MAP */
     .contact-map {
         max-width: 92%;
         height: 260px;
         /* 👈 height kam */
         margin: 0 auto;
     }

     /* FORM */
     .contact-form {
         max-width: 92%;
         padding: 20px 18px;
         /* compact padding */
         margin: 0 auto;
     }

     .input-group textarea {
         height: 95px;
         /* textarea height kam */
     }
 }

 @media (max-width: 480px) {

     .contact-map {
         max-width: 96%;
         height: 220px;
         /* 👈 aur kam height */
     }

     .contact-form {
         max-width: 96%;
         padding: 18px 15px;
     }

     .input-group textarea {
         height: 85px;
     }
 }

 /* contact end */
 /* contact us end */

 /* services start */
 /* ================= ELECTRONIC SALES ================= */
 .electronic-sales-section {
     padding: 20px 0;
 }

 .sales-image {
     position: relative;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
 }

 .sales-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     min-height: 420px;
 }

 .sales-content span {
     font-size: 14px;
     font-weight: 800;
     letter-spacing: 1px;
     /* color: #b71c1c; */
 }

 .sales-content h2 {
     font-size: 32px;
     font-weight: 900;
     color: #0f172a;
     margin: 12px 0 16px;
 }

 .sales-content p {
     font-size: 15.5px;
     color: #475569;
     line-height: 1.9;
     margin-bottom: 20px;
 }

 .sales-points li {
     list-style: none;
     font-size: 15px;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 12px;
 }

 .sales-points i {
     color: #b71c1c;
     margin-right: 10px;
 }

 .sales-btn {
     margin-top: 25px;
     display: inline-block;
     padding: 14px 36px;
     background: linear-gradient(135deg, #2563eb, #1e40af);
     color: #ffffff;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 800;
     text-decoration: none;
     transition: 0.3s ease;
     box-shadow: 0 15px 40px rgba(37, 99, 235, 0.45);
 }

 .sales-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 25px 60px rgba(37, 99, 235, 0.6);
 }

 @media (max-width: 768px) {
     .sales-content h2 {
         font-size: 28px;
     }

     .sales-image img {
         min-height: 260px;
     }
 }

 /* services end */

 /* services start */
 /* ===== SERVICES SECTION ===== */
 .elec-services {
     padding: 80px 0;
     background: #f7f9fc;
     font-family: "Poppins", sans-serif;
 }

 .elec-heading {
     text-align: center;
     margin-bottom: 50px;
 }

 .elec-heading h2 {
     font-size: 38px;
     color: #0e2a47;
     font-weight: 900;
     margin-bottom: 10px;
 }

 .elec-heading p {
     color: #555;
     max-width: 600px;
     margin: auto;
 }

 .elec-cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 25px;
 }

 /* ===== CARD ===== */
 .elec-card {
     background: #ffffff;
     padding: 35px 25px;
     border-radius: 18px;
     text-align: center;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.35s ease;
     border-top: 4px solid #e57373;
     position: relative;
     overflow: hidden;
 }

 /* hover glow */
 .elec-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             rgba(229, 115, 115, 0.12),
             transparent);
     opacity: 0;
     transition: 0.35s ease;
 }

 .elec-card:hover::before {
     opacity: 1;
 }

 .elec-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 22px 45px rgba(0, 0, 0, 0.18);
 }

 /* ICON */
 .elec-card i {
     width: 70px;
     height: 70px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 30px;
     color: #c62828;
     background: rgba(198, 40, 40, 0.12);
     margin-bottom: 18px;
     z-index: 1;
     position: relative;
 }

 .elec-card h4 {
     color: #0e2a47;
     font-size: 18px;
     margin-bottom: 12px;
     font-weight: 600;
     position: relative;
     z-index: 1;
 }

 .elec-card p {
     color: #555;
     font-size: 15.5px;
     line-height: 1.9;
     margin-bottom: 22px;
     position: relative;
     z-index: 1;
 }

 /* BUTTON */
 .enquiry-btn {
     display: inline-block;
     background: #c62828;
     color: #fff;
     padding: 11px 26px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 6px 18px rgba(198, 40, 40, 0.3);
     position: relative;
     z-index: 1;
 }

 .enquiry-btn:hover {
     background: #b71c1c;
     transform: translateY(-2px);
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .elec-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .elec-cards {
         grid-template-columns: 1fr;
     }

     .elec-heading h2 {
         font-size: 28px;
     }
 }

 /* ===== SERVICES SECTION ===== */
 .elec-services {
     padding: 80px 0;
     background: #f7f9fc;
     font-family: "Poppins", sans-serif;
 }

 .elec-heading {
     text-align: center;
     margin-bottom: 50px;
 }

 .elec-heading h2 {
     font-size: 36px;
     color: #0e2a47;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .elec-heading p {
     color: #555;
     max-width: 600px;
     margin: auto;
 }

 .elec-cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 25px;
 }

 /* ===== CARD ===== */
 .elec-card {
     background: #ffffff;
     padding: 35px 25px;
     border-radius: 18px;
     text-align: center;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.35s ease;
     border-top: 4px solid #e57373;
     position: relative;
     overflow: hidden;
 }

 /* hover glow */
 .elec-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             rgba(229, 115, 115, 0.12),
             transparent);
     opacity: 0;
     transition: 0.35s ease;
 }

 .elec-card:hover::before {
     opacity: 1;
 }

 .elec-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 22px 45px rgba(0, 0, 0, 0.18);
 }

 /* ICON */
 .elec-card i {
     width: 70px;
     height: 70px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 30px;
     color: #c62828;
     background: rgba(198, 40, 40, 0.12);
     margin-bottom: 18px;
     z-index: 1;
     position: relative;
 }

 .elec-card h4 {
     color: #0e2a47;
     font-size: 20px;
     margin-bottom: 12px;
     font-weight: 600;
     position: relative;
     z-index: 1;
 }

 .elec-card p {
     color: #555;
     font-size: 14px;
     line-height: 1.7;
     margin-bottom: 22px;
     position: relative;
     z-index: 1;
 }

 /* BUTTON */
 .enquiry-btn {
     display: inline-block;
     background: #c62828;
     color: #fff;
     padding: 11px 26px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 6px 18px rgba(198, 40, 40, 0.3);
     position: relative;
     z-index: 1;
 }

 .enquiry-btn:hover {
     background: #b71c1c;
     transform: translateY(-2px);
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .elec-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .elec-cards {
         grid-template-columns: 1fr;
     }

     .elec-heading h2 {
         font-size: 28px;
     }
 }

 /* services end */

 /* welcome start */
 .welcome-gyanvi {
     padding: 30px 20px;
     text-align: center;
 }

 /* Main Title */
 .welcome-title {
     font-size: 48px;
     font-weight: 800;
     color: #1e3766;
     letter-spacing: 1px;
     margin-bottom: 10px;
     animation: fadeUp 1s ease forwards;
 }

 /* Highlight Company Name */
 .welcome-title span {
     color: #b71c1c;
     position: relative;
 }

 /* Stylish underline */
 .welcome-title span::after {
     content: "";
     position: absolute;
     left: 10%;
     bottom: -8px;
     width: 80%;
     height: 3px;
     background: linear-gradient(90deg, #b71c1c, #1e3766);
     border-radius: 50px;
 }

 /* Subtitle */
 .welcome-subtitle {
     font-size: 16px;
     color: #475569;
     letter-spacing: 1.2px;
     margin-bottom: 22px;
     text-transform: uppercase;
     animation: fadeUp 1.2s ease forwards;
 }

 /* Decorative line + icon */
 .welcome-decor {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     animation: fadeUp 1.4s ease forwards;
 }

 .welcome-decor span {
     width: 60px;
     height: 2px;
     background: #1e3766;
     border-radius: 10px;
 }

 .welcome-decor i {
     color: #b71c1c;
     font-size: 18px;
 }

 /* Animation */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(25px);
     }

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

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

     .welcome-subtitle {
         font-size: 14px;
     }

     .welcome-decor span {
         width: 40px;
     }
 }

 /* welcome end */

 /* contact banner start */
 .contact-strip {
     padding: 70px 20px;
     background: #1e3766;
 }

 .contact-strip-inner {
     max-width: 1200px;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     flex-wrap: wrap;
 }

 .contact-strip-text h2 {
     font-size: 34px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 10px;
 }

 .contact-strip-text h2 span {
     color: #ffb4b4;
 }

 .contact-strip-text p {
     color: #dbe3f1;
     font-size: 15px;
     max-width: 520px;
     line-height: 1.8;
     margin: 0;
 }

 /* Buttons */
 .contact-strip-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
 }

 .strip-btn {
     padding: 14px 26px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     border-radius: 6px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: 0.3s ease;
 }

 /* WhatsApp */
 .strip-btn.whatsapp {
     background: #25d366;
     color: #fff;
 }

 .strip-btn.whatsapp:hover {
     background: #1ebe5d;
 }

 /* Call */
 .strip-btn.call {
     background: transparent;
     border: 1.5px solid #ffffff;
     color: #ffffff;
 }

 .strip-btn.call:hover {
     background: #ffffff;
     color: #1e3766;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .contact-strip-inner {
         flex-direction: column;
         text-align: center;
     }

     .contact-strip-text h2 {
         font-size: 26px;
     }

     .contact-strip-actions {
         justify-content: center;
     }
 }

 /* contact banner end */

 /* heading start */
 /* ===== HEADING WRAP ===== */
 .process-heading {
     text-align: center;
 }

 /* ===== MAIN TEXT ===== */
 .process-heading h2 {
     margin: 0;
     font-size: 48px;
     font-weight: 800;
     line-height: 1.1;
 }

 .process-heading .blue {
     color: #1f3b63;
     /* navy blue */
 }

 .process-heading .red {
     color: #c62828;
     /* deep red */
     position: relative;
     display: inline-block;
     padding-bottom: 6px;
 }

 /* ===== UNDERLINE (BLUE + RED) ONLY FOR RED TEXT ===== */
 .process-heading .red::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg,
             #c62828,
             #1f3b63);
     border-radius: 2px;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
     .process-heading h2 {
         font-size: 32px;
     }
 }

 /* heading end */

 /* client start */
 /* ================= CLIENT SHOWCASE ================= */
 .client-showcase {
     padding: 20px 0;
     background: linear-gradient(180deg, #f8fafc, #eef4ff);
     position: relative;
     overflow: hidden;
 }

 /* soft background shapes */
 .client-showcase::before,
 .client-showcase::after {
     content: "";
     position: absolute;
     width: 260px;
     height: 260px;
     border-radius: 50%;
     background: radial-gradient(circle,
             rgba(37, 99, 235, 0.15),
             transparent 70%);
     z-index: 0;
 }

 .client-showcase::before {
     top: -120px;
     left: -120px;
 }

 .client-showcase::after {
     bottom: -140px;
     right: -140px;
     background: radial-gradient(circle,
             rgba(198, 40, 40, 0.15),
             transparent 70%);
 }

 .client-showcase-inner {
     position: relative;
     z-index: 2;
     max-width: 1200px;
     margin: auto;
     padding: 0 15px;
 }

 /* ===== HEADING ===== */
 .client-heading {
     text-align: center;
     margin-bottom: 50px;
 }

 .client-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin: 0;
 }

 .client-heading .heading-blue {
     color: #1f3b63;
 }

 .client-heading .heading-red {
     color: #c62828;
     position: relative;
     padding-bottom: 6px;
     display: inline-block;
 }

 .client-heading .heading-red::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #c62828, #1f3b63);
     border-radius: 3px;
 }

 /* ===== GRID ===== */
 .client-logo-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 26px;
 }

 /* ===== CLIENT CARD ===== */
 .client-logo-card {
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(10px);
     border-radius: 18px;
     padding: 30px 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     transition: all 0.4s ease;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
 }

 /* border */
 .client-logo-card::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 18px;
     border: 1px solid rgba(37, 99, 235, 0.18);
     pointer-events: none;
 }

 /* logo */
 .client-logo-card img {
     max-width: 120px;
     max-height: 60px;
     filter: grayscale(100%);
     opacity: 0.75;
     transition: all 0.4s ease;
 }

 /* hover */
 .client-logo-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 70px rgba(37, 99, 235, 0.25);
 }

 .client-logo-card:hover img {
     filter: grayscale(0);
     opacity: 1;
     transform: scale(1.08);
 }

 /* ================= RESPONSIVE ================= */
 @media (max-width: 992px) {
     .client-heading h2 {
         font-size: 34px;
     }
 }

 @media (max-width: 576px) {
     .client-logo-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 18px;
     }

     .client-logo-card img {
         max-width: 100px;
     }

     .client-heading h2 {
         font-size: 28px;
     }
 }

 /* client end */