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

 /* ================= BREADCRUMBS ================= */
 .epc-breadcrumbs {
     background: linear-gradient(135deg, #0b0b0b, #e10600);
     padding: 80px 0 25px 0;
     color: #fff;
 }

 .epc-breadcrumbs h1 {
     font-size: 38px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .epc-breadcrumbs nav a,
 .epc-breadcrumbs nav span {
     color: rgba(255, 255, 255, 0.9);
     font-size: 14px;
     text-decoration: none;
 }

 .epc-breadcrumbs nav span {
     margin: 0 6px;
 }

 /* ===== NAVBAR ===== */
 .navbar {
     background: linear-gradient(150deg, #0b0b0b, #b00000);
 }

 .navbar-brand img {
     height: 50px;
 }

 .nav-link {
     color: #fff !important;
     font-weight: 500;
 }

 .nav-link:hover {
     color: #e10600 !important;
 }

 .navbar .dropdown-menu {
     border: none;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
     padding: 10px 0;
 }

 .navbar .dropdown-item {
     padding: 10px 20px;
     font-weight: 500;
     transition: all .1s ease;
 }

 .navbar .dropdown-item:hover {
     background: linear-gradient(150deg, #0b0b0b, #b00000);
     color: #fff;
     transition: all .1s ease;
 }


/* Remove the default arrow from the main text link */
.nav-item.dropdown .d-flex {
    display: flex !important;
    width: fit-content; /* Change to 100% if you want arrow on far right */
}

/* Remove default Bootstrap arrow from the main link */
.nav-link::after {
    display: none !important;
}
 /* ===== HERO ===== */
 /* HERO WRAPPER */
 
 .hero-slider {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
 }

 .hero-slide {
     position: relative;
     width: 100%;
     height: 100vh;
 }

 /* Background image */
 .hero-bg {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     z-index: 1;
 }

 /* Dark overlay */
 .hero-slide::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
     z-index: 2;
 }

 /* Caption */
 .hero-caption {
     position: absolute;
     z-index: 3;
     color: #fff;
     max-width: 600px;
     left: 8%;
     top: 50%;
     transform: translateY(-50%);
 }

 .hero-caption h1 {
     font-size: 48px;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .hero-caption p {
     font-size: 18px;
     margin-bottom: 25px;
 }

 /* Swiper UI */
 .swiper-button-next,
 .swiper-button-prev {
     width: 44px;
     height: 44px;
     background: rgba(0, 0, 0, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 50%;
     backdrop-filter: blur(6px);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.35s ease;
 }

 /* REMOVE DEFAULT BIG ICON LOOK */
 .swiper-button-next::after,
 .swiper-button-prev::after {
     font-size: 14px;
     font-weight: 700;
     color: #fff;
 }

 /* POSITION */
 .swiper-button-prev {
     left: 30px;
 }

 .swiper-button-next {
     right: 30px;
 }

 /* HOVER EFFECT */
 .swiper-button-next:hover,
 .swiper-button-prev:hover {
     background: #e10600;
     /* logo red */
     border-color: #e10600;
     transform: scale(1.12);
     box-shadow: 0 10px 25px rgba(225, 6, 0, 0.35);
 }

 /* ACTIVE CLICK FEEL */
 .swiper-button-next:active,
 .swiper-button-prev:active {
     transform: scale(0.95);
 }

 .swiper-pagination-bullet {
     background: #fff;
     opacity: 0.5;
 }

 .swiper-pagination-bullet-active {
     background: #e10600;
     opacity: 1;
 }

 .anim-text {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
 }

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

 .swiper-slide-active .anim-text:nth-child(1) {
     transition-delay: 0.2s;
 }

 .swiper-slide-active .anim-text:nth-child(2) {
     transition-delay: 0.4s;
 }

 .swiper-slide-active .anim-text:nth-child(3) {
     transition-delay: 0.6s;
 }

 /* ===== PROGRESS BAR ===== */
 .swiper-progress {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 4px;
     background: rgba(255, 255, 255, 0.2);
     z-index: 10;
 }

 .swiper-progress .progress-bar {
     width: 0%;
     height: 100%;
     background: #e10600;
     /* logo red */
 }

 /* ===== PARALLAX SMOOTHNESS ===== */
 .hero-bg {
     transition: transform 1.2s ease;
 }


 .btn-primary {
     background: #e10600;
     border: none;
 }

 .btn-primary:hover {
     background: #b00000;
 }

 /* ===== ABOUT ===== */
 .about-epc {
     padding: 50px 0;
     background: #fff;
 }

 /* FRAME WRAPPER */
 .about-frame-wrap {
     position: relative;
     max-width: 420px;
 }

 /* RED FRAME (logo color) */
 .about-frame {
     position: absolute;
     top: -25px;
     left: -25px;
     width: 100%;
     height: 100%;
     border: 14px solid #e10600;
     /* LOGO RED */
     z-index: 1;
 }

 /* IMAGE CARD */
 .about-img-box {
     position: relative;
     border-radius: 22px;
     overflow: hidden;
     z-index: 2;
     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.18);
 }

 .about-img-box img {
     width: 100%;
     height: 420px;
     object-fit: cover;
     border-radius: 22px;
     transition: transform 0.6s ease;
 }

 /* OVERLAY */
 .about-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             rgba(225, 6, 0, 0.85),
             rgba(0, 0, 0, 0.85));
     opacity: 0;
     transition: opacity 0.6s ease;
 }

 /* HOVER EFFECT */
 .about-img-box:hover img {
     transform: scale(1.06);
 }

 .about-img-box:hover .about-overlay {
     opacity: 1;
 }

 /* CONTENT */
 .about-content {
     padding-left: 20px;
 }

 .about-tag {
     color: #e10600;
     font-weight: 600;
     letter-spacing: 1px;
     font-size: 14px;
 }

 .about-content h2 {
     font-size: 36px;
     font-weight: 700;
     margin: 15px 0;
     color: #0b0b0b;
 }

 .about-points {
     list-style: none;
     padding: 0;
 }

 .about-points li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 500;
     margin-bottom: 12px;
 }

 .about-points i {
     color: #e10600;
     /* Somnath logo red */
     font-size: 18px;
 }

 /* BUTTON */
 .btn-epc-arrow {
     background: #e10600;
     color: #fff;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: 600;
     transition: all 0.35s ease;
 }

 .btn-epc-arrow i {
     margin-left: 8px;
     transition: transform 0.35s ease;
 }

 .btn-epc-arrow:hover {
     background: #0b0b0b;
     color: #fff;
 }

 .btn-epc-arrow:hover i {
     transform: translateX(6px);
 }

 /* end of about */

 /* what we do */
 .epc-overview-advanced {
     padding: 50px 0;
     background: #f6f6f6;
 }

 /* CARD */
 .epc-card {
     position: relative;
     background: #fff;
     padding: 45px 35px;
     height: 100%;
     border-radius: 14px;
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
     transition: all 0.45s ease;
     overflow: hidden;
 }

 /* RED ENGINEERING LINE */
 .epc-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 5px;
     height: 100%;
     background: #e10600;
 }

 /* COUNT */
 .epc-count {
     position: absolute;
     top: 20px;
     right: 25px;
     font-size: 42px;
     font-weight: 700;
     color: rgba(225, 6, 0, 0.15);
 }

 /* TEXT */
 .epc-card h5 {
     font-weight: 600;
     margin-bottom: 15px;
 }

 .epc-card p {
     font-size: 14px;
     color: #555;
     line-height: 1.7;
 }

 /* HOVER EFFECT */
 .epc-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
 }

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

 /* end od what we do */
 /* service section */
 .epc-services-advanced {
     padding: 50px 0;
     background: #ffff;
 }

 /* MAIN CARD */
 .service-box {
     position: relative;
     background: #fff;
     padding: 55px 35px;
     height: 100%;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
     transition: transform 0.45s ease;
 }

 /* FULL HEIGHT OVERLAY (CONTENT SAFE) */
 .service-box::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #e10600, #0b0b0b);
     transform: translateY(100%);
     transition: transform 0.5s ease;
     z-index: 0;
 }

 /* VISUAL DIAGONAL STRIP (ONLY DECORATION) */
 .service-box::after {
     content: "";
     position: absolute;
     bottom: -45px;
     left: 0;
     width: 120%;
     height: 90px;
     background: #0b0b0b;
     transform: skewY(-6deg);
     z-index: 0;
 }

 /* ICON */
 .service-icon {
     width: 74px;
     height: 74px;
     background: #e10600;
     color: #fff;
     border-radius: 50%;
     font-size: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     position: relative;
     z-index: 1;
     transition: all 0.45s ease;
 }

 /* TEXT */
 .service-box h5,
 .service-box p {
     position: relative;
     z-index: 1;
     transition: color 0.45s ease;
 }

 .service-box p {
     font-size: 14px;
     color: #555;
     line-height: 1.6;
 }

 /* HOVER EFFECT */
 .service-box:hover {
     transform: translateY(-10px);
 }

 .service-box:hover::before {
     transform: translateY(0);
     /* ALWAYS FULL HEIGHT */
 }

 .service-box:hover .service-icon {
     background: #fff;
     color: #e10600;
     transform: translateY(-8px);
 }

 .service-box:hover h5,
 .service-box:hover p {
     color: #fff;
 }


 /* end of service section */

 /* project section */
 .epc-sectors-advanced {
     padding: 50px 0;
     background: #f6f6f6;
 }

 .sector-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
 }

 /* CARD */
 .sector-card {
     position: relative;
     height: 280px;
     background-size: cover;
     background-position: center;
     border-radius: 16px;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.45s ease;
 }

 /* OVERLAY */
 .sector-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             rgba(225, 6, 0, 0.85),
             rgba(0, 0, 0, 0.85));
     opacity: 0.85;
     transition: opacity 0.45s ease;
 }

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

 .sector-content i {
     font-size: 34px;
     margin-bottom: 12px;
     color: #fff;
 }

 .sector-content p {
     font-size: 14px;
     opacity: 0.9;
     max-width: 220px;
 }

 /* HOVER / ACTIVE */
 .sector-card:hover,
 .sector-card.active {
     transform: translateY(-10px);
 }

 .sector-card:hover .sector-overlay,
 .sector-card.active .sector-overlay {
     opacity: 1;
 }

 /* DIM OTHERS (CodePen effect) */
 .sector-grid:hover .sector-card:not(:hover) {
     opacity: 0.4;
 }

 /* end of project section */

 /* our client */
 .epc-clients-slider {
     padding: 50px 0;
     background: #ffff;
 }

 .client-card {
     background: #1a1a1a;
     border-radius: 12px;
     padding: 40px 20px;
     text-align: center;
     font-weight: 600;
     color: #fff;
     height: 140px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s ease;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 /* HOVER */
 .client-card:hover {
     background: linear-gradient(135deg, #e10600, #0b0b0b);
     transform: translateY(-8px);
 }

 /* NAV BUTTONS */
 .client-nav button {
     width: 45px;
     height: 45px;
     border: 2px solid #e10600;
     background: transparent;
     color: #e10600;
     border-radius: 6px;
     margin-left: 10px;
     transition: all 0.3s ease;
 }

 .client-nav button:hover {
     background: #e10600;
     color: #fff;
 }

 /* end of our client */

 /* vision mission */
 .epc-vision-minimal {
     padding: 50px 0;
     background: #f6f6f6;
 }

 /* BLOCK BASE */
 .vm-block {
     position: relative;
     padding: 40px 35px;
     background: #fff;
     border-left: 4px solid #e10600;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     transition: all 0.45s ease;
 }

 /* RED BACKGROUND LAYER */
 .vm-block::before {
     content: "";
     position: absolute;
     inset: 0;
     background:linear-gradient(135deg, #b00000, #0b0b0b);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.45s ease;
     z-index: 0;
 }

 /* CONTENT ABOVE BG */
 .vm-block * {
     position: relative;
     z-index: 1;
 }

 /* HEADING */
 .vm-block h4 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 /* ICON */
 .vm-block i {
     color: #e10600;
     font-size: 22px;
     transition: color 0.45s ease;
 }

 /* TEXT */
 .vm-block p {
     color: #555;
     font-size: 15.5px;
     line-height: 1.8;
     margin: 0;
     transition: color 0.45s ease;
 }

 /* HOVER EFFECT */
 .vm-block:hover::before {
     transform: scaleX(1);
 }

 .vm-block:hover {
     transform: translateY(-6px);
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
 }

 .vm-block:hover h4,
 .vm-block:hover p,
 .vm-block:hover i {
     color: #fff;
 }

 /* MOBILE */
 @media (max-width: 767px) {
     .vm-block {
         padding: 32px 25px;
     }
 }

 /* end of visin mission */

 /* footer */
 .epc-footer {
     background: #0b0b0b;
     color: #ccc;
     font-size: 14px;
 }

 /* TOP BAR */
 .footer-top {
     background: linear-gradient(135deg, #b00000, #0b0b0b);
     padding: 35px 0;
     color: #fff;
 }

 /* ICON */
 .footer-icon {
     font-size: 20px;
     color: #fff;
     margin-right: 14px;
     margin-top: 3px;
 }

 /* HEADINGS */
 .footer-top h6 {
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 4px;
     color: #fff;
 }

 /* TEXT */
 .footer-top p {
     margin: 0;
     font-size: 13.5px;
     line-height: 1.6;
     color: #fff;
 }

 /* PHONE GRID (KEY CHANGE) */
 .footer-phone-grid {
     display: grid;
     grid-template-columns: repeat(2, auto);
     gap: 2px 14px;
     /* tight spacing */
 }

 .footer-phone-grid a {
     font-size: 13px;
     line-height: 1.4;
     color: rgba(255, 255, 255, 0.75);
     text-decoration: none;
     white-space: nowrap;
 }

 .footer-phone-grid a:hover,
 .footer-top a:hover {
     color: #fff;
 }

 /* LINKS */
 .footer-top a {
     color: #fff;
     text-decoration: none;
 }


 /* MAIN */
 .footer-main {
     padding: 50px 0;
 }

 .footer-logo {
     max-width: 160px;
 }

 .footer-main h5 {
     color: #fff;
     margin-bottom: 20px;
 }

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

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

 .footer-links a {
     color: #ccc;
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-links a:hover {
     color: #e10600;
 }

 /* SOCIAL */
 .footer-social a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     background: #e10600;
     color: #fff;
     border-radius: 50%;
     margin-right: 10px;
     transition: transform 0.3s;
 }

 .footer-social a:hover {
     transform: translateY(-4px);
 }

 /* SUBSCRIBE */
 .footer-subscribe {
     display: flex;
     margin-top: 15px;
 }

 .footer-subscribe input {
     flex: 1;
     padding: 12px;
     border: none;
     outline: none;
 }

 .footer-subscribe button {
     background: #e10600;
     border: none;
     color: #fff;
     padding: 0 20px;
 }

 /* BOTTOM */
 .footer-bottom {
     background: #070707;
     padding: 20px 0;
     color: #888;
 }

 .footer-bottom-links a {
     color: #888;
     margin-left: 15px;
     text-decoration: none;
 }

 .footer-bottom-links a:hover {
     color: #e10600;
 }

 .footer-icons li {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
     transition: transform 0.3s ease;
 }

 /* ICON */
 .footer-icons i {
     color: #e10600;
     /* LOGO RED */
     font-size: 16px;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 /* LINK */
 .footer-icons a {
     color: #ccc;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 /* HOVER EFFECT */
 .footer-icons li:hover {
     transform: translateX(6px);
 }

 .footer-icons li:hover i {
     color: #fff;
     transform: scale(1.2);
 }

 .footer-icons li:hover a {
     color: #e10600;
 }

 /* end of footer */

 /* RESPONSIVE */
 @media (min-width: 992px) {
     .navbar .dropdown:hover .dropdown-menu {
         display: block;
         margin-top: 0;
     }

 }

 @media (max-width: 991.5px) {
    
    .navbar .dropdown-menu{
        width: 50%;
        position: absolute;
    }
     .about-content h2 {
         font-size: 1.8rem;
     }

     .about-frame-wrap {
         max-width: 100%;
     }

     .about-frame {
         display: none;
     }

     /* .about-img-box img {
         height: 360px;
         width: 80%;
         display: block;
         margin: 0 auto;
     } */

     .sector-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .footer-phone-grid {
         grid-template-columns: 1fr;
         gap: 10px 0;
         justify-items: center;
         text-align: center;
     }

 }

 @media (max-width: 768px) {
    .navbar .dropdown-menu{
        width: max-content;
    }
     .hero-caption {
         left: 12%;
         top: 50%;
     }

     .hero-caption h1 {
         font-size: 1.5rem;
         margin-bottom: 5px;
     }

     .about-frame-wrap {
         margin: auto;
     }

     .about-points li {
         text-align: left;
         display: inline-block;
         width: 100%;
     }

     .service-card {
         padding: 35px 25px;
     }

     .client-card {
         height: 120px;
         font-size: 14px;
     }

     .vision-card.refined {
         padding: 15px;
     }

     .vision-card h3 {
         font-size: 22px;
     }

     .footer-top .d-flex {
         align-items: flex-start;
     }

     .footer-icon {
         margin-bottom: 10px;
     }
 }

 @media (max-width: 576px) {
     .hero-caption {
         left: 15%;
         top: 50%;
     }

     .hero-caption h1 {
         font-size: 1rem;
     }

     .hero-caption p {
         font-size: 12px;
         margin-bottom: 10px;
     }

     .about-content h2 {
         font-size: 1.2rem;
     }
     h2{
        font-size: 20px;
     }
     h4{
        font-size: 20px;
     }
     p {
         font-size: 14px;
     }

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

     .footer-phone-grid {
         grid-template-columns: 1fr;
     }

     .footer-top {
         padding: 22px 0;
     }
 }