body {
    margin: 0;
    padding: 0;
}

.body-bg{
    background: #f7f7f7;
}

.mt-6 {
    margin-top: 60px;
}

.mt-7 {
    margin-top: 70px;
}

.mt-8 {
    margin-top: 80px;
}

.mt-9 {
    margin-top: 90px;
}

.mt-10 {
    margin-top: 120px;
}

.mt-11 {
    margin-top: 160px;
}

.mb-6 {

    margin-bottom: 70px;
}


.mb-7 {

    margin-bottom: 37px;
}


.mb-4 {

    margin-bottom: 40px;
}


 a {
    text-decoration: none;
}

/*-- top --*/

.top {
    background: #615e69;
    width: 100%;
    line-height: 0;
    position: relative;
    padding: 5px 0px;
}

.top ul {
    list-style: none;
    padding: 0;
    margin: 10px 0px;
}

.top ul li {
    display: inline-block;
    margin-right: 15px;
}

.top ul li a {
    font-family: "outfit";
    font-size: 14px;
    font-weight: 400;class="valvoline-banner-2"
    color: #aeadb2;
    text-decoration: none;
}

.top ul li a svg {
    vertical-align: middle;
    margin: 0px 3px 0px 2px;
}

.top ul li a:hover,
.top ul li a:hover svg {
    fill: #ff4901;
    color: #ff4901;
    stroke: #ff4901;
}

.top-call a {
    font-family: 'outfit';
    font-size: 15px;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    vertical-align: text-bottom;
    background: #1bcff9;
    padding: 8px 20px;
    Margin: 0px;
    border-radius: 5px;
}

.top-call a:hover {
    color: #fff;
}

.top-menu ul li {
    float: right;
    margin-right: 0px;
}

.top-menu ul li:first-child a {
    color: #aeadb2;
}

.top-menu ul li a {
    font-family: "outfit";
    font-size: 14px;
    font-weight: 400;
    color: #5c4e41;
    padding: 9px 5px;
    line-height: 17px;
    text-transform: capitalize;
    margin: 0;
    text-decoration: none;
}

.top-menu ul li h5 {
    font-family: "outfit";
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin: -1px 0px 0px;
}

.top-call svg {
    margin-right: 5px;
}

/*-- top --*/
/* Main Header */
header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: 1338px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
}

.navbar-brand .logo {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

.navbar-toggler {
    display: none;
    background: #ff6b35;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 6px;
    transition: 0.3s;
}

.navbar-toggler:hover {
    background: #e55a28;
    transform: scale(1.05);
}

/* --- DESKTOP FLEX FIXES --- */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 0;
}

.navbar-nav {
    display: contents;
    list-style: none;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

/* --- END DESKTOP FLEX FIXES --- */

.nav-close {
    display: none;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.btn-nav-close {
    background: #fff;
    border: 2px solid #ff6b35;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: all 0.3s ease;
    color: #ff6b35;
    font-weight: 300;
    line-height: 1;
    padding: 0;
    position: relative;
}

.btn-nav-close:hover {
    background: #ff6b35;
    color: #fff;
    transform: rotate(90deg);
}

.btn-nav-close::before,
.btn-nav-close::after {
    content: '';
    position: absolute;
    background: currentColor;
}

.btn-nav-close::before {
    width: 20px;
    height: 2px;
    transform: rotate(45deg);
}

.btn-nav-close::after {
    width: 20px;
    height: 2px;
    transform: rotate(-45deg);
}

.close-btn {
    display: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: #333;
    text-decoration: none;
    padding: 24px 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    font-family: "jost";
    font-size: 15px;
}

.nav-item:hover > .nav-link,
.nav-item.active > .nav-link {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}

/* Dropdown arrow for ALL menu items that have submenus (main and nested) */
.nav-item.has-dropdown > .nav-link::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

/* FIXED DROPDOWN STYLES */
.dropdown {
    position: absolute;
    top: 56px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 1000;
    border-radius: 4px;
}

.nav-item:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Keep dropdown open when hovering over it */
.dropdown:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown .nav-link {
    color: #555;
    padding: 12px 25px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    border: none;
}

.dropdown .nav-item:hover > .nav-link {
    background: #f8f8f8;
    color: #ff6b35;
    border: none;
}

.dropdown .nav-item {
    position: relative;
    list-style: none;
}

/* Remove bullets/markers from dropdown items */
.dropdown .nav-item::before,
.dropdown .nav-item::marker {
    display: none !important;
    content: none !important;
}

/* Nested dropdown (Desktop) */
.dropdown .dropdown {
    top: 0;
    left: 100%;
    margin-left: 0;
}

/* Ensure nested dropdowns also work properly */
.dropdown .nav-item:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* NO arrows for nested dropdown items - this removes the black squares */
.dropdown .has-dropdown > .nav-link::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    position: absolute;
    right: 20px;
    margin-left: 0;
}

/* Contact Icons */
.contact-icons {
    display: flex;
    gap: 12px;
    margin-left: 20px;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 16px;
    color: #fff;
}

.icon-btn.phone {
    background: #ff6b35;
}

.icon-btn.email {
    background: #5a5a6b;
}

.icon-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.our-products li a {
    background: #fb7325;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}

.request-quote a {
    background: #fb7325;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}

.request-quote a:hover {
    background: #fb7325;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}

.management-title {
    margin-top: 20px;
}

/* Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

button.common-btn.blue.active {
    background-color: #fb6b15;
    color#fff;
}

button.common-btn1.blue.active {
    background-color: #fb6b15;
    color#fff;
}

.common-btn1 {
    &.blue {
        background-color: #000;
    }
}

.common-btn1 {
    &.blue {
        &:hover {
            color: #fff;
            z-index: 3;
            transition-delay: 1s;
        }
    }
}

.common-btn1 {
    position: relative;
    padding: 10px;
    width: 100%;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-family: "jost";
    text-transform: uppercase;
    font-size: 16px;
    max-width: 15em;
    border-radius: 5em;
    border: none;
    color: #fff;
    overflow: hidden;
    background-color: transparent;
}

.testimonial-btn a {
    font-size: 18px;
    color: #000;
    display: inline-block;
    border: 1px solid red;
    padding: 10px 60px;
    border-radius: 5px;
    font-family: 'Outfit';
    font-weight:400;
}

.testimonial-btn a:hover {
    font-size: 18px;
    color: #fff;
    display: inline-block;
    padding: 10px 60px;
    border-radius: 5px;
    font-family: 'Outfit';
    font-weight:400;
    background-color:#fb6b15;
}

 .testimonial-card {
  position: relative;
  padding: 25px;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  height: 100%;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.quote-icon {
  font-size: 50px;
  color: #0d6efd;
  position: absolute;
  top: 10px;
  right: 20px;
  opacity: 0.2;
}

.testimonial-btn a {
    text-decoration: none;
    color: #000;
}



p.para-three a {
    text-decoration: none;
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

/* Tablet Styles */
@media (max-width: 1024px) {
    .nav-link {
        padding: 24px 8px;
        font-size: 13px;
    }

    .contact-icons {
        margin-left: 15px;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* Mobile Styles */
@media (max-width: 991px) {
    .top {
        padding: 0px 0px;
    }

    .top ul {
        display: none;
    }

    .header-container {
        padding: 0 20px;
    }

    .navbar {
        min-height: 70px;
    }

    .navbar-brand .logo {
        font-size: 20px;
    }

    .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-right {
        display: flex;
        gap: 12px;
    }

    .navbar-nav {
        position: fixed;
        display: flex;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow-y: auto;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000;
        box-shadow: 3px 0 20px rgba(0, 0, 0, 0.3);
    }

    .navbar-nav.active {
        left: 0;
    }

    .nav-close {
        display: flex;
        justify-content: flex-end;
    }

    .nav-item {
        border-bottom: 1px solid #eee;
    }

    .nav-link {
        padding: 18px 22px;
        justify-content: space-between;
        border: none !important;
        text-transform: none;
        font-size: 15px;
        font-weight: 500;
    }

    .nav-item:hover > .nav-link,
    .nav-item.active > .nav-link {
        background: #f9f9f9;
        color: #ff6b35;
    }

    /* Mobile - Show arrows for ALL dropdown items */
    .nav-item.has-dropdown > .nav-link::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        margin-left: 6px;
        transition: transform 0.3s ease;
    }

    /* Mobile Dropdown (Accordion) */
    .dropdown {
        position: static;
        display: block;
        box-shadow: none;
        background: #f9f9f9;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        border-radius: 0;
    }

     .nav-item.dropdown-open > .dropdown {
        max-height: 600px;
        width: auto;
        }

    /* Dropdown Arrow Rotation for mobile */
    .nav-item.dropdown-open.has-dropdown > .nav-link::after {
        transform: rotate(180deg);
    }

    .dropdown .nav-link {
        padding: 15px 22px 15px 42px;
        background: #f9f9f9;
        font-size: 14px;
    }

    /* Nested mobile dropdown styles */
    .dropdown .dropdown {
        background: #f3f3f3;
    }

    .dropdown .dropdown .nav-link {
        padding-left: 60px;
        background: #f3f3f3;
    }

    .contact-icons {
        margin-left: 0;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .navbar-nav {
        width: 90%;
        max-width: 280px;
    }

    .nav-link {
        padding: 16px 18px;
        font-size: 14px;
    }

    .dropdown .nav-link {
        padding: 14px 18px 14px 38px;
        font-size: 13px;
    }

    .dropdown .dropdown .nav-link {
        padding-left: 55px;
    }
}

/* Final cleanup for nav-link padding */
.navbar-nav .nav-link {
    padding-right: 11px !important;
    padding-left: 11px !important;
}

/*-- header --*/



/*-- banner --*/

/*-- banner --*/

.banner-section .carousel-control-prev {
    left: -75px;
}

.banner-section .carousel-control-next {
    right: -75px;
}


.carousel-inner{
    height:83vh !important;
}


.banner-section .carousel-control-prev-icon,
.carousel-control-next-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}



.banner-section .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 12px;
    height: 12px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.5;
    transition: opacity 0.6s ease;
    border-radius: 50%;
}


.slider-content {
    text-align: left;
}


.slider-content p {
    font-family: "Jost", sans-serif;
    font-size: 36px;
    margin: 0;
    padding: 0;
    color: #fff;
}

.slider-content span {
    color: #fb7325;
}

/*.slider-contentt span {
    color: #fb7325;
}
*/
.slider-content h1 {
    font-family: "Arial", sans-serif;
    font-size: 70px;
    color: #fff;
    line-height: 70px;
    font-weight: 700;
    margin-bottom: 20px;
}

.slider-contentt h1 {
    font-family: "Arial", sans-serif;
    font-size: 70px;
    color: #fff;
    line-height: 70px;
    font-weight: 700;
    margin-bottom: 20px;
}

.slider-content p {
    font-family: "Arial", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.slider-contentt p {
    font-family: "Arial", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #fff;
}

.view-btn {
    margin: 30px 0px;
}


.view-btn a {
    font-family: "Jost", sans-serif;
    text-decoration: none;
    color: #000;
    font-size: 17px;
    font-weight: 500;
    background: #fff;
    padding: 9px 30px;
    border-radius: 35px;
}

.view-btn a:hover {
    background: #fb7325;
    color: #000;
}

.carousel-item {
  transition: transform 0.8s ease-in-out;
}

.relative{
    position: relative;
}

.relative::before{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    top: -15px;
    z-index: 999;
    right: -15px;
}

.cumminss .relative::before {
  background: url("../images/parts/cummins.png");
}

.valvoline .relative::before {
  background: url("../images/parts/volvine.png");
}

.hyundai .relative::before {
  background: url("../images/parts/hyundai0.png");
}

.ace .relative::before {
  background: url("../images/parts/ace.png");
}

.batteriess .relative::before {
  background: url("../images/parts/batteriess.png");
}

.pow-cons .relative::before {
  background: url("../images/parts/pow-cons.png");
}

.other_ser .relative::before {
  background: url("../images/parts/other_ser.png");
}


/*-- banner --*/

/*-- banner --*/




/*-- our-products --*/


.our-products{
    padding: 0px 100px;
}

.our-products h2 {
    font-size: 50px;
    font-family: "outfit", sans-serif;
    font-weight: 600;
    color: #222;
}


.our-products p {
    font-size: 16px;
    font-family: "outfit";
    line-height: 28px;
    margin: 20px 0px 30px;
    font-weight: 400;
}

/*.our-products a {
    background: #fb7325;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}*/

.p-and-solution a{
    background: #fb7325;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}

.p-and-solution a:hover{
    color: #fb7325;
    background: #000;
    transition: all 0.4s ease-in-out;
}



/*.our-products a:hover {
    color: #fb7325;
    background: #000;
    transition: all 0.4s ease-in-out;
}*/

.products-card {
    border: solid 1px #b7b7b7;
    padding: 20px;
    border-radius: 20px;
    cursor: pointer;
    height: 450px;
    position: relative;
}

.products-card h4 {
    font-family: "outfit", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #222;
    padding: 20px 0px;
}


.products-card-bg {
    background: #e8e8e8;
    height: 300px;
    border-radius: 20px;
    position: relative;
    margin-bottom: 20px;
}

.products-card-bg-2 {
    background: #e8e8e8;
    height: 300px;
    border-radius: 20px;
    position: relative;
    margin-bottom: 20px;
}

.products-card-bg img {
    position: absolute;
    bottom: -12px;
    right: 26px;
}

.products-card-bg-2 img {
    position: absolute;
    bottom: 0px;
    right: 0px;
}


.products-card:hover::before {
    border-radius: 18px;
    height: 100%;
}

.products-card:hover h4 {
    filter: brightness(0) invert(1);
}

.products-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #615e69;
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
    z-index: 0;
    border-radius: 15px;
}


/*-- our-products --*/



/*-- dealer --*/

.dealers {
    background: #222;
    padding: 20px 0px 80px;
}


.dealer-box {
    background: #615e69;
    border-radius: 12px;
    padding: 50px;
    margin-bottom: 10px;
}   

.dealer-box h4 {
    font-size: 25px;
    font-family: "outfit", sans-serif;
    color: #fff;
    padding: 16px 0px 5px;
    font-weight: 600;
}

.dealer-box p {
    font-size: 16px;
    font-family: "outfit", sans-serif;
    color: #fff;
    font-weight: 400;
}


.dealers h3{

        font-size: 36px;
    font-family: "outfit", sans-serif;
    color: #fff;
    font-weight: 600;
    padding: 60px 0px;

}

.dealer-box{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


/*-- dealer --*/



/*-- company-profile  --*/

.company-profile h5 {

    font-size: 18px;
    font-family: "outfit", sans-serif;
    color: #ff4901;
    font-weight: 500;
}


.company-profile .Whatsapp-link {
    text-decoration: none;
    font-size: 15px;
    font-family: "outfit", sans-serif;
    font-weight: 500;
    color: #000;
    background: none;
    display: inline-block;
}


.company-profile .Whatsapp-link:hover{

background: none;

}

.company-profile h3 {
    font-size: 36px;
    font-family: "outfit", sans-serif;
    color: #222;
    font-weight: 600;
    padding: 15px 0px;
}

.company-profile p {
    font-size: 18px;
    font-family: "outfit", sans-serif;
    color: #5b5b5b;
    font-weight: 500;
    line-height: 35px;
}

.company-profile ul {
    list-style: none;
    margin: 10px 0px 52px;
    padding: 0;
    display: inline-block;
}

.company-profile ul li{
    display: inline-block;
    vertical-align: middle;
}

.company-profile ul li svg {
    background: #000;
    fill: #fb7325;
    padding: 6px;
    border-radius: 7px;
    height: 41px;
    width: 47px;
}


.company-profile h4 {
    font-family: "outfit";
    font-size: 18px;
    vertical-align: middle;
    padding: 0px 10px;
    line-height: 22px;
    display: inline-block;
}

.jn-achievements span {
    font-family: "outfit";
    color: #222;
    font-size: 48px;
    font-weight: 600;
}

.jn-achievements h6 {
    font-family: "outfit";
    color: #5b5b5b;
    font-size: 19px;
    font-weight: 500;
}

.tit-1 {
    font-family: "Jost", sans-serif;
    font-size: 19px;
    color: #fb7325;
    font-weight: 600;
}


.tit-2 {
    font-family: "outfit", sans-serif;
    font-size: 35px;
    color: #000;
    font-weight: 600;
    margin: 20px 0px;
    line-height: 44px;
}


.services-section p {
    font-family: "outfit";
    font-weight: 400;
    font-size: 16px;
    color: #5b5b5b;
    line-height: 28px;
}


.features {
    border: 1px solid #99948f;
    padding: 44px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: relative;
    background: #615e69;
}

.features img {
     height: 68px; 
     width: 68px; 
}

.features h4 {
    font-family: "Outfit", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    padding: 24px 0px 10px;
}


.features p {
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 30px;
}

.features svg {
    background: #fff;
    border-radius: 50%;
    position: absolute;
    right: 20px;
    padding: 7px;
    top: 18px;
}
/*-- company-profile  --*/

/*-- request-quote --*/


.quote-box p {

  font-size: 16px;
  font-family: "outfit";
  line-height: 28px;
  margin: 20px 0px 30px;
  font-weight: 400;
  color: #fff;
}

.quote-box {
    background: #615e69;
    padding: 60px;
    position: relative;
    margin-top: 320px;
}

.quote-box img {
    position: absolute;
    top: 0;
    right: 0;
}


.request-quote {
    background: url(../images/quote-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}


.quote-box h4 {

    font-family: "Outfit", sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
}

/*-- request-quote --*/





/*-- client-logo-slider --*/

.padding-left{
     
     padding-left:65px ;

}


.logos-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
}

/*.logos-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    animation: slide 30s linear infinite;
    height: 150px;
}



@keyframes slide {
  0% {
    transform: translate3d(0,0,0)
  }
  100% {
    transform: translate3d(-100%,0,0)
  }
}*/

.logos-slider-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5rem;
    width: max-content;
    animation: slide 30s linear infinite;
    height: 150px;
}

@keyframes slide {
  0% {
    transform: translate3d(0,0,0)
  }
  100% {
    transform: translate3d(-50%,0,0)
  }
}



/*-- client-logo-slider --*/


/*-- dealers-slider --*/


.dealers-slider, .card {
    padding: 2rem;
    max-width: 100% ;
    border:none;
    border-radius: 1rem;
    margin: 0 auto;
}

.logos-slider-container img {
    max-width: 256px;
    border: solid 1px #e4e4e4;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 3px 8px rgb(61 74 84 / 10%), 0px 3px 12px rgb(61 74 84 / 6%);
}
/*-- dealers-slider --*/

/*-- testimonial --*/

.testimonial-card-1 {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 0 5px 0 rgba(168, 168, 168, 0.4);
    padding: 25px;
    position: relative;
    margin-top: 60px;
}

.testimonial-card-1 svg {
    background: #20a2d7;
    padding: 19px;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 0px;
    left: 40px;
    fill: #fff !important;
}

.testimonial-card-1 svg {
    margin: -35px 0px 20px 12px;

}


.testimonial-card-1 h5 {
    font-family: "outfit", serif;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    position: relative;
    margin: 30px 0px;
}

.para-three {
    font-family: "outfit";
    color: #595959;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 28px;
}

.testimonial-card-1 h5::after {
    content: "";
    position: absolute;
    background: #04aced;
    height: 2px;
    width: 90px;
    bottom: -1px;
    left: 0;
}


.tit-two {
    font-family: "Outfit";
    color: #000;
    font-size: 36px;
    font-weight: 600;
}

.para-three {
    font-family: "outfit";
    color: #595959;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 28px;
}

/*-- testimonial --*/


body {
    overflow-x: hidden;
}


.footer-bg {
   background: #1f1f1f;
   width: 100%;
   padding: 60px;
}




.footer-bg p {
   font-family: "outfit", serif;
   color: #fff;
   font-size: 16px;
   font-weight: 350;
   padding-top: 20px;
   line-height: 26px;
   margin: 10px 0px;
}

.footer-section-01 ul{
   list-style: none;
   display: inline-block;
   margin: 0;
   padding: 0;
}

.footer-section-01 li a {
   font-family: outfit;
   font-size: 15px;
   font-weight: 400;
   text-decoration: none;
   color: #fff;
   line-height: 30px;
}

.footer-section-01 li a:hover {
	color: #ff4901;
}


.footer-section-01 h4 {
    font-family: "outfit", serif;
    font-size: 16px;
    font-weight: 600;
    color: #ff4901;
    margin: 20px 0px 20px 0px;
}

.footer-section-01 h3 {
    font-family: "outfit", serif;
    font-size: 16px;
    font-weight: 600;
    color: #ff4901;
    margin: -70px 0px 25px 0px;
}


.footer-section-02 h4 {
   font-family: "outfit", serif;
   font-size: 16px;
   font-weight: 600;
   color: #ffde00;
   margin: 20px 0px 25px 0px;
}


.footer-section-01 h5 {
   font-family: "outfit", serif;
   color: #fff;
   font-size: 15px;
   margin: 15px 0px 0px 0px;
   font-weight: 600;
}

.footer-section-01 h5 span{
 color: #ffaf90;

}


.footer-section-01 p {
    color: #fff;
    font-family: "outfit", serif;
    font-size: 15px;
    font-weight: 400;
    padding: 0px;
    margin: 10px 0px;
}

.footer-section-01 a {
   color: #fff;
   font-family: "outfit", serif;
   font-size: 15px;
   text-decoration: none;
   font-weight: 400;
   display: inline-block;
}


.footer-section-01 li a:hover{
   color: #328ab0;
}


.footer-section-01 a:hover{
   color: #328ab0;
}


 /*-- Footer --*/


 /*-- Sub-footer --*/


.sub-footer-bg {
   background-color: #1f1f1f;
   border-top: 1px solid #363636;
   width: 100%;
   padding: 25px 25px;
}



.sub-footer-bg h4 {
   color: #626262;
   font-size: 16px;
   font-family: "outfit", serif;
   font-weight: 600;
}


.sub-footer-bg-menu ul{

    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.sub-footer-bg li{
    display: inline-block;
}

.sub-footer-bg li a {
    font-family: "Outfit";
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    color: #89898a;
    border-right: solid 2px #89898a;
    padding: 0px 15px;
}

.sub-footer-bg li:last-child a {
    border-right: none;
}

.sub-footer-bg-menu {
    background-color: #1f1f1f;
    border-top: 1px solid #363636;
    width: 100%;
    padding: 15px 25px;
}


  /*-- Sub-footer --*/



@media (min-width: 1010px) and (max-width: 1742px) {


.dropdown .dropdown {
    left: 76%;
}


.products-card {
	height: 270px;
	width: 245px;
}

.products-card-bg {
    height: 149px;
}

.products-card h4 {
    font-size: 17px;
}


.products-card-bg-2 {
    height: 149px;;
}


.dropdown {
    top: 55px;
}









  }


@media only screen and (max-width: 600px) {
    
    
    .accordian-spacing {
        margin-top: 100px;
    }
    
    .dealers-slider, .card {
    padding: 20px 5px;
    max-width: 100%;
    border: none;
    border-radius: 1rem;
    margin: 0 auto;
}

     br{
        display: none;
     }

     .slider-content h1 {
    font-size: 35px;
    color: #fff;
    line-height: 52px;
}

.slider-content p {
    font-size: 16px;
}

.products-card {
    margin: 20px 0px;
}

.our-products {
    padding: 0px 0px; 
}


}



/*-- products-solutions  --*/


.product-banner-image {
    background: linear-gradient(#fb732570,#6d6a74),url(../images/product-banner.png);
    background-position: center 40%;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    padding: 200px;
    display: flex;
}

.badge-orange {
	background-color: #fb7425;
	color: #000;
	padding: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 10px;
	display: inline-block;
	border-radius: 6px;
}



.featured_hero_heading {
    font-family: "Outfit", sans-serif;
    color: #f4f4f4;
    text-align: center;
    font-size: 72px;
    font-weight: 800;
    line-height: 80px;
    padding: 29px 0px;
}


.product-sub-banner {
 background:url(../images/product-sub-banner.png);
    background-position: center;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    padding: 200px;
}


.product-banner-image p {
    font-family: "outfit";
    color: #fff;
    font-weight: 400;
    line-height: 30px;
}


.product-images h5 {
    font-size: 25px;
    font-family: "jost", sans-serif;
    font-weight: 600;
    color: #fa7327;
    padding: 17px;
}

.product-images {
    background: #F7F7F7;
    background-position: center;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    padding: 100px;
    margin-right: 10px;
    border-radius: 10px;
    margin-left: 10px;
}

.product-images img {
    border-radius: 10px;
}

.section_heading {
    font-family: "Jost";
    font-size: 24px;
    color: #222;
    font-weight: 600;
}


.product-images p {
    font-size: 15px;
    font-weight: 400;
    font-family: "outfit";
    color: #222;
    line-height: 26px;
    padding-top: 10px;
}

.product-images li svg {
    fill: #ed2921;
    margin-right: 10px;
    display: inline-block;
    border-radius: 50%;
    height: 16px;
    width: 30px;
    align-items: inherit;
}

.product-images ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-images li {
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0px;
}
.product-images li .list-item {
    display: flex;
    align-items: center;
}

.product-images li span {
    display: inline-block;
    text-align: left;
    line-height: 1.5;
}



       .brochure-table table {
            font-family: outfit, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        .brochure-table td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 15px;
        }
        .brochure-table tr:nth-child(even) {
            background-color: #dddddd;
        }
        .brochure-table .table-header {
            background: #222;
            color: #f4f4f4;
        }
        .brochure-table tr td a {
            background: #fff;
            padding: 8px 10px;
            border-radius: 4px;
            text-decoration: none;
            color: #222;
            font-size: 15px;
            font-weight: 400;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
        }
        .brochure-table tr td a:hover svg {
            fill: #fb7425;
        }
        .brochure-table tr td a:hover {
            color: #fb7425;
        }



.innter-tit {
    background: #000;
    padding: 20px 0px;
    border-top: 1px solid #454545;
}

.innter-tit h1 {
    font-family: "Saira", serif;
    color: #fff;
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 0;
}

.breadcrumbs {
    font-family: Saira;
    font-size: 14px;
    list-style: none;
    padding: 0;
    margin: 15px 0px 0px;
}

.breadcrumbs li {
    display: inline-block;
    color: #f4f4f4;
}

.breadcrumbs li a {
    color: #cc6800;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumbs {
    font-family: "outfit";
    font-size: 14px;
    list-style: none;
    margin: 0;
}

@media only screen and (max-width: 600px) {

    .footer-section-01 h3 {
    margin: 19px 0px 25px 0px;
}

    .product-sub-banner {
    padding: 195px;
}

.product-banner-image {
    padding: 50px 10px;
}

.featured_hero_heading {
    font-size: 41px;
    line-height: 50px;
    padding: 29px 0px;
}

.product-images {
    background: #F7F7F7;
    background-position: center;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    padding: 36px 10px;
    margin-right: 10px;
    border-radius: 10px;
    margin-left: 10px;
}

.product-images img {
    width: 100%;
 
}

.product-imagess .stacksWrapper {
        padding-left: 0;
    }


}


/*-- products-solutions  --*/





/*-- batteries-allied 

.commercial-banner {
    background: url(../images/inner-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
}

.ser-banner {
    background: url(../images/inner-banner.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
}


.ser-banner::after {
    content: "";
    background: #000;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    top: 0px;
} --*/


.commercial-banner {
    background: #222;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.commercial-banner h5 {
    color: #ff4901;
    font-family: "jost";
    font-weight: 400;
    font-size: 20px;
}

.commercial-banner h2 {
    color: #fff;
    font-family: "outfit";
    font-weight: 400;
    font-size: 32px;
    padding: 2px 0px 31px;
    line-height: 35px;
}

.commercial-banner a {
    font-size: 15px;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    background: #fff;
    padding: 11px 40px;
    border-radius: 23px;
    font-family: "outfit";
}

.commercial-banner a:hover{

    color: #fff;
    background: #ff4901;
}


.valvoline-banner {
    background: url(../images/valvoline-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-2 {
    background: url(../images/components-care.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-3 {
    background: url(../images/recon-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-4 {
    background: url(../images/valvoline-banner-5.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-5 {
    /*background: url(../images/ec-banner.webp);*/
    background: url(../images/ec-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-6 {
    background: url(../images/clutch-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-7 {
    background: url(../images/valvoline-lubricants-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-8{
    background: url(../images/other-lubes.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-9{
    background: url(../images/forklifts-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-10{
    background: url(../images/electric-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-11{
    background: url(../images/pallet-trucks.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-12{
    background: url(../images/stacker-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-dg{
    background: url(../images/dg.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-pnl{
    background: url(../images/pnl.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-om{
    background: url(../images/om_main.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-stacks{
    background: url(../images/stacks_main.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-rentals_main{
    background: url(../images/rentals_main.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}



.valvoline-banner-13{
    background: url(../images/pulse-battery-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}



.valvoline-banner-14{
    background: url(../images/engine-managment-solutions.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-15{
    background: url(../images/fuel-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-16{
    background: url(../images/ele-pro-work.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-17{
    background: url(../images/panel-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}



.valvoline-banner-18{
    background: url(../images/cable-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}



.valvoline-banner-19{
    background: url(../images/exhaust.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-20{
    background: url(../images/fuel-tank-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.valvoline-banner-21{
    background: url(../images/engine-parts.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-22{
    background: url(../images/hyundai-filter-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.cummins-rahath-01{
    background: url(../images/hero-clutch.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.cummins-rahath-02{
    background: url(../images/hero-brake.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.cummins-rahath-03{
    background: url(../images/hero-uj.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.cummins-rahath-04{
    background: url(../images/hero-tapper.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.cummins-rahath-05{
    background: url(../images/hero-filters.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}



.cummins-rahath-06{
    background: url(../images/hero-def.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}




.valvoline-banner-23 {
    background: url(../images/bucket-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}


.valvoline-banner-24 {
    background: url(../images/rock-breaker-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 300px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
}

.val-space {
    padding: 150px 0px;
}


.brochure-table h4 {
    font-family: "jost";
    font-size: 23px;
    margin-bottom: 21px;
}


.product-images a {
    background: #222;
    padding: 8px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: #f4f4f4;
    font-size: 15px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    font-family: "outfit",sans-serif;
    margin: 20px 10px;
}

.product-images a:hover {
    color: #fb7425;
}

.product-images a:hover svg {
    fill: #fb7425;
}



/*-- light-box-feature --*/

/* Product images styling */
/* Product images styling */
.product-img {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.product-img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Lightbox Modal */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Close button */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 45px;
    font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
    line-height: 1;
}

.close:hover,
.close:focus {
    color: #ccc;
}

/* Lightbox container */
.lightbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 80px 40px 40px 40px;
}

/* Lightbox image - MUCH BIGGER */
.lightbox-content {
    max-width: 1200px;
    max-height: 85vh;
    width: 100%;
    height: auto;
    object-fit: cover;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
    .close {
        top: 15px;
        right: 20px;
        font-size: 35px;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 80vh;
    }
    
    .lightbox-container {
        padding: 50px 15px 15px 15px;
    }
}



/*-- light-box-feature --*/


/*--

.brochure-table a {
    background: #fff;
    padding: 8px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: #222;
    font-size: 15px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    font-family: "outfit",sans-serif;
}

.brochure-table a:hover {
    color: #fb7425;
} --*/



/*-- batteries-allied --*/






/*-- services --*/



.services h2{

      font-family: "Goldman", sans-serif;
      font-weight: 400;
      font-size: 60px;
}


.cummins img {
    border-radius: 300px;
    height: 500px;
    width: 100%;
    object-fit: cover;
}
/*-- services --*/


/* All Products */

.product h2{
    font-family: "Outfit", sans-serif;
    color: #000;
    text-align: center;
    font-size: 52px;
    font-weight: 800;
    line-height: 80px;
    padding: 29px 0px;
}

/* card design */

.box {
  position: relative;
  max-height: 255px;
  height: 255px;
  background-color: #eeeeee;
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 50px;
  border-radius: 15px;
}

/* normal content */
.box .content {
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  padding: 22px;
}

.box .content img {
border-radius: 10px;
width: 100%;
}

.box .content p {
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  /*margin-top: -2em;*/
  font-family: "outfit";
  margin-top: 20px;
}

/* hover layers */
.box .content-hover,
.box .content-hover2 {
  transform: scale(0);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 2em;
  text-align: center;
    border-radius: 15px;
}

.box .content-hover {
  background-color: #252525;
}

.box .content-hover2 {
  background-color: #ff6835;
}

/* hover text */
.box .content-hover h1,
.box .content-hover2 h1 {
  color: #fff;
  font-size: 1.5em;
  /*text-transform: uppercase;*/
   font-family: "outfit";
}

.box .content-hover p,
.box .content-hover2 p {
  color: #fff;
   font-family: "outfit";
}

/* THIS IS THE IMPORTANT FIX */
.box:hover .content-hover,
.box:hover .content-hover2 {
  transform: scale(1);
  cursor: pointer;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-link:hover {
  text-decoration: none;
  color: inherit;
}

.map iframe {
    margin-top: 20px;
}



/* card design */


/* All Products */



/*------------------------------------------- mobile responsive--------------------------------*/
@media only screen and (max-width: 600px) {

.map iframe {
    width: 100%;
    margin-top: 20px;
}

.valvoline-banner {
     padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-2 {
     padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-3 {
     padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-4 {
     padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-5 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-6 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-7 {
    padding: 300px 0px;
    background-position: center;
}


.valvoline-banner-8 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-9 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-10 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-11 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-12 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-13 {
    padding: 300px 0px;
    background-position: center;
}


.valvoline-banner-14 {
    padding: 300px 0px;
    background-position: center;
}


.valvoline-banner-15 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-16 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-17 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-18 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-19 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-20 {
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-21{
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-22{
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-23{
    padding: 300px 0px;
    background-position: center;
}

.valvoline-banner-24{
    padding: 300px 0px;
    background-position: center;
}

.cummins-rahath-01{
    padding: 300px 0px;
    background-position: center;
}

.cummins-rahath-02{
    padding: 300px 0px;
    background-position: center;
}

.cummins-rahath-03{
    padding: 300px 0px;
    background-position: center;
}

.cummins-rahath-04{
    padding: 300px 0px;
    background-position: center;
}

.cummins-rahath-05{
    padding: 300px 0px;
    background-position: center;
}

.cummins-rahath-06{
    padding: 300px 0px;
    background-position: center;
}

.quote-box {
    padding: 30px 20px;
}

.jn-achievements {
    text-align: center;
}

.company-profile ul li {
    margin: 10px 0px;
}



} 




@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

/*#stats-section-1 .counter {*/
/*    counter-reset: num var(--num);*/
/*    animation: 2s ease-out forwards;*/
/*    animation-timeline: view();*/
/*}*/

/*#stats-section-1 .col-md-4:nth-child(1) .counter { animation-name: count46; }*/
/*#stats-section-1 .col-md-4:nth-child(1) .counter::after { content: counter(num) '+'; }*/

/*#stats-section-1 .col-md-4:nth-child(2) .counter { animation-name: count20; }*/
/*#stats-section-1 .col-md-4:nth-child(2) .counter::after { content: counter(num) 'K+'; }*/

/*#stats-section-1 .col-md-4:nth-child(3) .counter { animation-name: count20; }*/
/*#stats-section-1 .col-md-4:nth-child(3) .counter::after { content: counter(num) 'K'; }*/

/*@keyframes count46 { to { --num: 46; } }*/
/*@keyframes count20 { to { --num: 20; } }*/




/*--- contact-us --*/

.contact {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 48px;
    width: 100%;
    position: relative;
    overflow: hidden;
    animation: slideUp 0.6s ease-out;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b35, #ff6b35, #ff6b35);
    animation: shimmer 2s infinite;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.contact .header {
    text-align: center;
    margin-bottom: 40px;
}

.contact .title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.contact .subtitle {
    color: #64748b;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.contact .form-group {
    margin-bottom: 24px;
    position: relative;
}

.contact .form-group.double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.contact input, .contact textarea {
    width: 100%;
    padding: 29px 28px;
    border: 2px solid #f7f7f7;
    border-radius: 20px;
    font-size: 16px;
    font-family: inherit;
    background: #ffffff;
    transition: all 0.2s ease;
    outline: none;
}


.contact input:focus, .contact textarea:focus {
    border-color: #ff6b35;
    transform: translateY(-1px);
}


.contact input:hover, 
.contact textarea:hover {
    border-color: #d1d5db;
}

.contact textarea {
    resize: vertical;
    min-height: 164px;
    font-family: "Urbanist", sans-serif;
}

.contact .submit-btn {
    padding: 18px 34px;
    background: linear-gradient(135deg, #fb7325, #615e69);
    color: white;
    border: none;
    border-radius: 45px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Urbanist", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.contact .submit-btn:hover {
    transform: translateY(-2px);
}

.contact .submit-btn:active {
    transform: translateY(-1px);
}

.contact .submit-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.contact .submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

.contact .form-footer {
    margin-top: 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.contact .success-message {
    background: #d1fae5;
    border: 2px solid #10b981;
    color: #047857;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: none;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact .error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.contact .error-message {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

/* Floating labels effect */
.contact .floating-label {
    position: relative;
}


.contact .floating-label label {
    position: absolute;
    left: 20px;
    top: 16px;
    transition: all 0.2s ease;
    pointer-events: none;
    background: white;
    padding: 0 4px;
    margin: 0;
    font-family: "Urbanist", sans-serif;
}


.contact .floating-label input:focus + label, .contact .floating-label textarea:focus + label, .contact .floating-label input:not(:placeholder-shown) + label, .contact .floating-label textarea:not(:placeholder-shown) + label {
    transform: translateY(-24px) scale(0.85);
    color: #ff6b35;
}

/* Responsive adjustments for Bootstrap columns */
@media (max-width: 768px) {
    .contact {
        padding: 32px 24px;
        border-radius: 20px;
    }

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

    .contact .form-group.double {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .contact {
        padding: 24px 20px;
    }

    .contact .title {
        font-size: 24px;
    }
}


.be-in-touch-info p {
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #9c9c9c;
}

.be-in-touch-info h2 {
    font-family: "Urbanist", sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 71px;
    margin: 36px 0px;
}


/* Dropdown/Select styling with floating label - ADD THIS */

.contact select {
    width: 100%;
    padding: 29px 28px;
    border: 2px solid #f7f7f7;
    border-radius: 21px;
    font-size: 16px;
    font-family: "outfit";
    background: #ffffff;
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 33px;
    font-weight: 300;
}
.contact select:focus {
    border-color: #fb7325;
    transform: translateY(-1px);
}

.contact select:hover {
    border-color: #d1d5db;
}

.contact select option {
    padding: 12px;
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    font-size: 17px;
}
/* Floating label for select */
.contact .floating-label select + label {
    position: absolute;
    left: 20px;
    top: 16px;
    transition: all 0.2s ease;
    pointer-events: none;
    background: white;
    padding: 0 4px;
    margin: 0;
}
.contact .floating-label select:focus + label, .contact .floating-label select:valid + label {
    transform: translateY(-24px) scale(0.85);
    color: #fb7325;
}



.ofz-details h5 {
    font-family: "urbanist";
    font-size: 36px;
    font-weight: 600;
    line-height: 80px;
}


.ofz-details p {
    font-size: 18px;
    font-weight: 500;
    color: #585858;
    font-family: "urbanist", san-serief;
    line-height: 31px;
    height: 62px;
}


.ofz-details h3 {
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 600;
    margin: 30px 0px 0px;
}


.ofz-details h4 {
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 600;
    margin: 30px 0px 0px;
}



.ofz-details a {
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    color: #3b3b3b;
    font-family: "Urbanist";
    margin: 0;
    line-height: 36px;
}


hr:not([size]) {
    height: 1px;
    width: 530px;
}




@media only screen and (max-width: 600px) {
    
    .features-spacing {
	margin-bottom: 10px;
}

   hr:not([size]) {
    height: 1px;
    width: 385px;
}


.ofz-details p {
    font-size: 16px;
    line-height: 28px;
    height: 62px;
}

.ofz-details a {
    margin: 0;
    line-height: 28px;
}


.ofz-details h5 {
    margin: 25px 0px 0px;
}

.contact input, .contact textarea {
    width: 100%;
}

.contact select {
    width: 100%;
}

br{
    display: none;
}
 
 .be-in-touch-info h2 {
    font-size: 62px;
}


.commercial-banner h2 {
    line-height: 49px;
}


.company-profile h5 {
    margin: 26px 0px 0px;
}

.commercial-banner h2 {
    line-height: 43px;
}


.pricing-card {

    margin-bottom: 10px;
}



}



/*-- contact-us --*/



.card-wrapper {
    position: relative;
}


/* Expanding Background Circle */
.expand-bg {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 64px;
    height: 64px;
    background: rgb(55, 74, 52);
    border-radius: 50%;
    transform: scale(0);
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.pricing-card:hover .expand-bg {
    transform: scale(25);
}
/* Default Content */
.default-content {
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pricing-card:hover .default-content {
    opacity: 0;
}
/* Badge */
.badge {
    display: inline-block;
    padding: 8px 20px;
    background: white;
    border: 1px solid black;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 60px;
    width: fit-content;
}
/* Price Section */
.price {
    text-align: center;
    margin: 60px 0 40px 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Description */
.description {
    text-align: left;
    color: black;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    padding-bottom: 80px;
}
/* Button Container - Bottom Right */
.button-container {
    position: absolute;
    bottom: 32px;
    right: 32px;
    width: 64px;
    height: 64px;
    z-index: 3;
}
/* Button */
.cta-button {
    width: 100%;
    height: 100%;
    background: rgb(55, 74, 52);
    border: 1px solid rgb(240, 255, 139);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.pricing-card:hover .cta-button {
    transform: rotate(-45deg);
}
/* Arrow Icon */
.arrow-icon {
    width: 24px;
    height: 24px;
}
/* Features List - Directly on Green Background */
.features-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
    opacity: 0;
    z-index: 2;
    transition:ease 0.2s;
    pointer-events: none;
}
.pricing-card:hover .features-1 {
    opacity: 5;
    pointer-events: auto;
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}
.check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}
.feature-text {
    color: rgb(240, 255, 139);
    font-size: 16px;
    line-height: 1.6;
}


/*-- location --*/

.card-wrapper {
    position: relative;
}
.pricing-card {
    position: relative;
    width: 100%;
    height: 300px;
    padding: 40px;
    background: url(../images/madurai-amman.png);
    border: 1px solid rgb(97, 94, 105);
    border-radius: 28px;
    cursor: pointer;
    overflow: hidden;
    background-size: cover;
}

/*--

.pricing-card {
    position: relative;
    width: 375px;
    height: 300px;
    padding: 40px;
    background: url(../images/madurai-amman.png);
    border: 1px solid rgb(97, 94, 105);
    border-radius: 28px;
    cursor: pointer;
    overflow: hidden;
    background-size: cover;
} --*/

.pricing-card-2 {
    background: url(../images/central.png);
    background-size: cover;
}


.pricing-card-3 {
    background: url(../images/arun-temple.png);
    background-size: cover;
}


.pricing-card-4 {
    background: url(../images/rockfort-ucchi-pillayar.png);
    background-size: cover;
}

.pricing-card-5 {
    background: url(../images/vellore-fort.png);
    background-size: cover;
}


.pricing-card-6 {
    background: url(../images/thirunelveli.png);
    background-size: cover;
}

.pricing-card-12 {
    background: url(../images/salem.png);
    background-size: cover;
}

.pricing-card-7 {
    background: url(../images/coimbatore.png);
    background-size: cover;
}

.pricing-card-8 {
    background: url(../images/tirupur.png);
    background-size: cover;
}


.pricing-card-9 {
    background: url(../images/erode.png);
    background-size: cover;
}

.pricing-card-10 {
    background: url(../images/ooty.png);
    background-size: cover;
}

.pricing-card-11 {
    background: url(../images/kadapa.png);
    background-size: cover;
}


.pricing-card-13 {
    background: url(../images/thirupati.png);
    background-size: cover;
}

.pricing-card-14 {
    background: url(../images/anantapur.png);
    background-size: cover;
}


.pricing-card-15 {
    background: url(../images/dindigul.png);
    background-size: cover;
}


.pricing-card-16 {
    background: url(../images/karur.png);
    background-size: cover;
}

.pricing-card-17 {
    background: url(../images/virudhunagar.png);
    background-size: cover;
}

.pricing-card-18 {
    background: url(../images/nagarkovil.png);
    background-size: cover;
}

.pricing-card-19 {
    background: url(../images/thoothukudi.png);
    background-size: cover;
}

.pricing-card-20 {
    background: url(../images/maraimalai-nagar.png);
    background-size: cover;
}

.pricing-card-21 {
    background: url(../images/chitoor.png);
    background-size: cover;
}

.pricing-card-22 {
    background: url(../images/kurnool.png);
    background-size: cover;
}

.pricing-card-23 {
    background: url(../images/pondicherry.png);
    background-size: cover;
}



/* Expanding Background Circle */
.expand-bg {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 64px;
    height: 64px;
    background: rgb(34, 34, 34);
    border-radius: 50%;
    transform: scale(0);
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.pricing-card:hover .expand-bg {
    transform: scale(25);
}
/* Default Content */
.default-content {
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pricing-card:hover .default-content {
    opacity: 0;
}
/* Badge */
.badge-address {
    display: inline-block;
    padding: 8px 20px;
    background: #c8c8c8f5;
    border: 1px solid #919191;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 500;
    width: fit-content;
    font-family: "Urbanist";
}
/* Price Section */
.price {
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.price h2 {
	font-size: 52px;
	font-weight: 400;
	line-height: 1;
	color: #f4f4f4;
	margin: 0;
	font-family: "Urbanist";
}

/* Description */
.description {
    text-align: left;
    color: black;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    padding-bottom: 80px;
}
/* Button Container - Bottom Right */
.button-container {
    position: absolute;
    bottom: 9px;
    right: 9px;
    width: 54px;
    height: 54px;
    z-index: 3;
}
/* Button */
.cta-button {
    width: 100%;
    height: 100%;
    background: rgb(34, 34, 34);
    border: 1px solid rgba(251, 115, 37, 0.53);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.pricing-card:hover .cta-button {
    transform: rotate(-45deg);
}
/* Arrow Icon */
.arrow-icon {
    width: 24px;
    height: 24px;
}
/* Features List - Directly on Green Background */
.features-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
    opacity: 0;
    z-index: 2;
    transition:ease 0.2s;
    pointer-events: none;
}
.pricing-card:hover .features-1 {
    opacity: 5;
    pointer-events: auto;
}

.check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}


.features-1 ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;

}

.features-1 ul li {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 15px;
    margin: 10px 0px;
}

.features-1 ul li a {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
}
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link:hover {
    text-decoration: none;
    color: inherit;
}


.branch-tit h4 {
    font-size: 28px;
    font-weight: 700;
    font-family: "Urbanist";
}


/*-- location --*/



/*-- riz --*/

/* about us */

.color-change {
    background: #f7f7f7;
}


/* timeline */

.timeline-1 {
      background-color: #f5f5f5;
      color: #333;
      display: flex;
     /* min-height: 100vh; */
    }

#timeline {
  display: flex;
  /*background-color: #031625;*/

  &:hover {
    .tl-item {
      width: 23.3333%;
    }
  }
}

.tl-item {
  transform: translate3d(0, 0, 0);
  position: relative;
  width: 25%;
  height: 100vh;
  min-height: 600px;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s ease;
  
  &:before, &:after {
    transform: translate3d(0, 0, 0);
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
  }

  &:after {
    background: transparentize(#031625, 0.15);
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  &:before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%);
    z-index: 1;
    opacity: 0;
    transform: translate3d(0, 0, 0) translateY(50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  &:hover {
    width: 30% !important;
    
    &:after {
      opacity: 0;
    }

    &:before {
      opacity: 1;
      transform: translate3d(0, 0, 0) translateY(0);
      transition: opacity 1s ease, transform 1s ease 0.25s;
    }
    
    .tl-content {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.75s ease 0.5s;
    }

    .tl-bg {
      filter: grayscale(0);
    }
  }
}

.tl-content {
  transform: translate3d(0, 0, 0) translateY(25px);
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 1.618em;
  top: 55%;
  opacity: 0;
  
  h1 {
    font-family: outfit;
    text-transform: uppercase;
    color: #1779cf;
    font-size: 1.44rem;
    font-weight: normal;
    color: #ff4901;
  }
}

.tl-year {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  border-bottom: 1px solid #fff;
  
  p {
    font-family: outfit;
    font-size: 1.728rem;
    line-height: 0;
  }
}

.tl-bg {
  transform: translate3d(0, 0, 0);
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background-size: cover;
  background-position: center center;
  transition: filter 0.5s ease;
  filter: grayscale(100%);
  width: 100%;
}     

/* timeline */


/*.visions{
    padding: 0 0 50px;
}*/

.visions h4 {
    font-size: 34px;
    font-family: 'Jost';
    font-weight: 400;
    border-bottom: 3px solid #ffa500;
    padding-bottom: 10px;
    width: 50px;
    display: inline-block;
}

.downobj{
    margin: 100px 0 0 138px;
}

.downobj-1{
    margin: 50px 0;
}

/* 
h2.journey_legacy {
    color: #000;
    font-family: 'Jost';
    font-size: 40px;
    margin-bottom: 20px;
} */

.about-banner {
    padding: 60px 0px;
}

.management-text{
    padding: 10px;
}

.management-text img{
    border-radius: 70px;
    padding-left: 10px;
}

.management-text h2{
    font-size: 30px;
    font-family: "outfit";
    font-weight: 600;
}

.management-text p{
    font-size: 16px;
    font-family: "outfit";
    font-weight: 300;
}

.management-banner{
    padding:0px;
}

.management-title p {
    font-size: 19px;
    font-family: 'outfit';
    font-weight: 400;
}

.about-banner svg {
    fill: orange;
    width: 30px;
}

.about-banner p{
    color: #000;
    font-family: 'outfit';
    font-size: 18px;
    font-weight: 300;
    padding-left: 50px;
    line-height: 32px;
}

p.aboutbanner {
    color: #fff;
    font-family: 'outfit';
    font-size: 26px;
    font-weight: 400;
    padding-left: 0px !important;
}

.aboutimg{
    background: url(../images/about-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 150px;
    border-bottom-left-radius: 43px;
    border-bottom-right-radius: 43px;
    opacity: 1.0;
}

.about-card h6{
    font-size: 100px;
    font-weight: 600;
    font-family: 'Jost';
    color: #fff;
    margin-inline: auto;
}

p.about-right{
    color: #000;
    font-family: 'outfit';
    font-size: 70px;
    font-weight: 600;
    text-align: right;
    padding-right: 50px;
    line-height: 55px;
}

p.aboutt-right-2{
    background-image: linear-gradient(90deg,rgba(36, 36, 36, 1) 62%, rgba(199, 199, 199, 1) 82%);;
    color: #000000cc;
    background-clip: text;
    font-family: 'outfit';
    font-size: 70px;
    font-weight: 600;
    text-align: right;
    padding-right: 50px;
    line-height: 55px;
}

p.about_para {
    font-family: outfit;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    padding-top: 10px;
    line-height: 25px;
}

h2.journey_legacy{
    color: #303030;
    font-family: 'Jost';
    margin-bottom: 40px;
    font-size: 35px;
    font-weight: 600;
}

.journey-card {
    background: #ffe7d6;
    padding: 50px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    margin: 25px;
    border-radius: 5px;
}

.vision_heading .numbers {
    padding-bottom: 80px;
    font-size: 12px;
    
}

.vision_heading .numbers span{
    color: #000 !important;
    opacity: .3;
}

.vision_heading h4{
    color: #ff4901;
    font-family: 'Jost';
    font-size: 24px;
    padding-bottom: 20px;
}

.vision_heading p{
    color: #000;
    font-family: 'outfit';
    font-size: 18px;
    font-weight: 300;
}

.core-values-section {
    font-family: 'outfit';
}

.section-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 40px;
}

.values-grid {
    display: grid;
    /* Default: 3 columns for desktop, adapting to content */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.value-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.value-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.icon-placeholder {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.value-card h3 {
    font-size: 1.3em;
    color: #000;
    margin: 0;
}

.about_img{
    padding: 0 0 50px;
}

.about_img img{ 
    padding: 20px;
}

.about-side{
    background: url(../images/cummins-abt.png);
    background-repeat: no-repeat;
    width: 581px;
    height: 400px;
    display: inline-block;
    margin-left: -70px;
}

.about-para{
    font-size: 18px;
    font-weight: 400;
    font-family: "outfit";
    color: #222;
    line-height: 26px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin: 0;
}

.about-paraa{
    font-size: 18px;
    font-weight: 400;
    font-family: "outfit";
    color: #222;
    line-height: 26px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin: 0;
}

.about-paraa ul li a {
    color: orange; 
    text-decoration: none; 
}

.about-paraa ul {
    list-style-type: none; 
    padding-left: 0; /* Remove default left padding */
}

.about-paraa ul li {
    position: relative;
    padding-left: 20px; 
    margin-bottom: 10px; 
    /*line-height: 1.5;*/
}

.about-paraa ul li::before {
    content: '•';
    color: #ed2921; 
    font-weight: bold;
    display: inline-block;
    font-size: 24px; 
    position: absolute;
    left: 0;
}


.banner-text{
    padding: 0 30px 50px;
}

.banner-text h2{
    color: #303030;
    font-family: 'Jost';
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

.home-title span {
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 30px;
    font-size: 18px;
    font-family: 'outfit';
    font-weight: 400;
}

.home-title span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.home-title span::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.sustain_left{
    margin-left: 3rem;
}

.susta_down{
    margin-top: 40px;
}

.timeline {
    padding: 0 0 50px;
}

.home-title span:nth-of-type(1)::before,
.home-title span:nth-of-type(1)::after{
    animation-delay: 1s;
}

.home-title span:nth-of-type(2)::before,
.home-title span:nth-of-type(2)::after{
    animation-delay: 1.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}

.product-imagess {
    background: #F7F7F7;
    background-position: center;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    padding: 50px 0 0;
     margin-right: 10px;
    border-radius: 10px;
    margin-left: 10px;
}

/*accordian*/

:root {
  --stackH: 40vw;
  --stackGap: 4vw;
  --stackTop: 1em;
  --stackCount: 4;
}



.product-imagess .stackHeader,
.product-imagess .stackMain {
  width: 100%;
  margin: 0 auto;
}

.product-imagess .stackHeader {
  /*height: 35vh;*/
  display: grid;
  place-items: center;
  /*margin-bottom: 80px;*/
}

.product-imagess .stacksWrapper {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--stackCount), var(--stackH));
  gap: var(--stackGap);
  /*padding-bottom: calc(var(--stackCount) * var(--stackTop));*/
  /*margin-bottom: var(--stackGap);*/
}

.product-imagess .stack-1 { --sIndex: 1; }
.product-imagess .stack-2 { --sIndex: 2; }
.product-imagess .stack-3 { --sIndex: 3; }
.product-imagess .stack-4 { --sIndex: 4; }

.product-imagess .stackCard {
  position: sticky;
  top: 0;
  padding-top: calc(var(--sIndex) * var(--stackTop));
}

.product-imagess .stackInner {
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
  background: #fffaf2;
  color: #131212;
  border-radius: 2rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1.4em;
}

.product-imagess .stackInner > div {
  width: 95%;
  place-self: center;
  text-align: left;
  display: grid;
  gap: 1em;
}

.product-imagess .stackInner figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .4em;
}

.product-imagess h1 {
  font-weight: 300;
  font-size: 3rem;
  margin-bottom: 1rem;
  /*font-family: 'Cormorant Garamond', serif;*/
  font-family: "jost";
}

.product-imagess h2 {
  font-weight: bold;
  font-size: 1.7rem;
  margin: 0;
font-family: "jost";
text-transform: lowercase;
}

.product-imagess p {
  font-weight: 300;
  line-height: 1.42;
  font-size: 1rem;
  font-family: "outfit";
}

h3.performance {
    font-size: 40px;
    margin: 100px 0 25px;
    text-align: center;
    font-family: "Goldman", sans-serif;
}

/*accordian*/

/* table horizontal */

.spec-table{
  width:100%;
  border-collapse:collapse;
  margin-top:25px;
  background:#fff;
  color:#000;
  font-size:15px;
}
.spec-table th{
  background:#f1f1f1;
  padding:12px 15px;
  text-align:left;
  font-weight:600;
  width:22%;
}
.spec-table td{
  padding:12px 15px;
  width:28%;
}
.spec-table tr:nth-child(even){
  background:#fafafa;
}

.specs-wrapper {
  max-width: 900px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.specs-table thead th {
  background: #e5e8eb;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #ddd;
}

.specs-table td {
  padding: 10px 12px;
  border: 1px solid #ddd;
}

.specs-table tbody tr:nth-child(even) {
  background: #f7f9fb;
}

.specs-table tbody tr:hover {
  background: #eef3f8;
  transition: 0.2s ease;
}



/*table horizontal*/

/*  hover button */
  .common-btn {
    position: relative;
    padding: 10px;
    width: 16%;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-family: "jost";
    text-transform: uppercase;
    font-size: 16px;
    max-width: 15em;
    border-radius: 5em;
    border: none;
    color: #fff;
    overflow: hidden;
    background-color: transparent;
    &:active {
      transform: scale(0.8);
    }
    &.blue {
      background-color: #000;
      &:hover {
        color: #fff;
        z-index: 3;
        transition-delay: 1s;
      }
      &:before {
        content: "";
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%) scale(0.6);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 1;
        transition-property: left, transform;
        transition-delay: 0s, 0s;
        transition-duration: 1s, 0.5s;
        opacity: 0;
      }
      &:hover:before {
        left: 10px;
        transform: translateY(-50%) scale(50);
        transition-delay: 0s, 1s;
        opacity: 1;
        background: #fb6b15;
        z-index: -1;
      }
      &:after {
        content: "";
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%) scale(0.6);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 1;
        transition-property: right, transform;
        transition-delay: 0s, 0s;
        transition-duration: 1s, 0.5s;
        opacity: 0;
      }
      &:hover:after {
        right: 10px;
        transform: translateY(-50%) scale(50);
        transition-delay: 0s, 1s;
        opacity: 1;
        background: #fb6b15;
        z-index: -1;
      }
    }

    &.orange {
      background-color: #fb6b15;
      &:hover {
        color: #fff;
        z-index: 3;
        transition-delay: 1s;
      }
      &:before {
        content: "";
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%) scale(0.6);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 1;
        transition-property: left, transform;
        transition-delay: 0s, 0s;
        transition-duration: 1s, 0.5s;
        opacity: 0;
      }
      &:hover:before {
        left: 10px;
        transform: translateY(-50%) scale(50);
        transition-delay: 0s, 1s;
        opacity: 1;
        background: #0054b7;
        z-index: -1;
      }
      &:after {
        content: "";
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%) scale(0.6);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 1;
        transition-property: right, transform;
        transition-delay: 0s, 0s;
        transition-duration: 1s, 0.5s;
        opacity: 0;
      }
      &:hover:after {
        right: 10px;
        transform: translateY(-50%) scale(50);
        transition-delay: 0s, 1s;
        opacity: 1;
        background: #0054b7;
        z-index: -1;
      }
    }
  }

.button-left {
    text-align: end;
}

.button-right {
    text-align: start;
}

/* hover buttton */

/* performance button */

.our-products-per{
    position: relative;
    margin: 35px 0 0;
}

.our-products-per a {
    background: #fb7325;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}

.our-products-per a:hover{
    background: #000;
    color: #fff;

}

/*--effect button --*/


@media only screen and (max-width: 600px){
    
    .about-banner p {
	padding: 10px;
	font-size: 16px;
	text-align: center;
	margin: 0;
}
    
    p.about-right {
	font-size: 30px !important;
	padding: 10px !important;
	text-align: center;
	margin: 0;
}

p.aboutt-right-2 {
	position: relative;
	font-size: 30px;
	top: -15px;
}
.aboutimg {
	padding: 50px;
}

.about-card h6 {
	font-size: 40px;
	text-align: center;
}

.about-banner p {
	padding: 10px;
	font-size: 16px;
	text-align: center;
	margin: 0;
}

h2.journey_legacy {
	font-size: 30px;
	margin-bottom: 20px;
}

#timeline {
	width: 100%;
	height: 100%;
}
/*about us*/
 
.about-banner p{

    padding: 10px;

    font-size: 16px;

    text-align: center;

    margin: 0;

}
 
p.about-right{

    font-size: 30px !important;

    padding: 10px !important;

    text-align: center;

    margin: 0;

}
 
p.aboutt-right-2 {

    position: relative;

    font-size: 30px;

    top: -15px;

}
 
.aboutimg{

    padding: 50px;

}
 
.about-card h6{

    font-size: 40px;

    text-align: center;

}
 
.about-banner {

    padding: 35px 0px;

}
 
.home-title span{

    margin-bottom: 10px;

}
 
.banner-text {

    padding: 0 20px 30px;

}
 /*
h2.journey_legacy{

    font-size: 30px;

    margin-bottom: 20px;

} */
 
.about-side {

    width: 558px;

    height: 340px;

    margin-left: -160px;

    position: relative;

    top: -69px;

}
 
.downobj{

    padding: 10px;

    margin: 0;

}
 
.downobj-1{

    padding: 10px;

    margin: 0;

}
 
.Ethics_Compliance{

    padding: 10px;

}
 
.sustain_left{

    margin-left: 0;

}
 
.Sustainability{

    padding: 10px;

}
 
.mission-left{

    padding: 0 10px;

}
 
.visions{

    padding: 0 0 20px;

}
 
.timeline{

    padding: 0 0 40px;

}
 
.about_img {

    padding: 0 0 20px;

}
 
.susta_down{

    margin-top: 10px;

}
 
this is full mobile responsive for about us
 
/*about us*/
 
about us time line responsive
 
/* timeline */

.timeline-1 {

     min-height: 100%;

     width: 100%;

}

#timeline {

     width: 100%;

     height: 100%;

}

.tl-item {

     width: 100%;

     height: 0;

     transition: none;

     transform: none;

}

.tl-item:before {

     z-index: 1;

     opacity: 0;

     transform: translate3d(0, 0, 0) translateY(50%);

     transition: opacity 0.5s ease, transform 0.5s ease;

}

.tl-item:hover {

     width: 100% !important;

}

.tl-item:hover:after {

     opacity: 0;

}

.tl-item:hover:before {

     opacity: 1;

     transform: translate3d(0, 0, 0) translateY(0);

     transition: opacity 1s ease, transform 1s ease 0.25s;

}

.tl-item:hover .tl-content {

     opacity: 1;

     transform: translateY(0);

     transition: all 0.75s ease 0.5s;

}

.tl-item:hover .tl-bg {

     filter: grayscale(0);

}

 
.tl-bg {

  transform: inherit;

  position: absolute;

  width: 100%; height: 100%;

  top: 0; left: 0;

  background-size: cover;

  background-position: center center;

  transition: inherit;

  filter: inherit;

  width: 100%;

}
 
.tl-year {

  position: absolute;

  top: 24%;

  left: 35%;

  transform: inherit;

  z-index: 1;

  border-bottom: 1px solid #fff;

  display: none;

}

  .tl-year  p {

    font-family: outfit;

    font-size: 16px;

    line-height: 0;

  }
 
 
.tl-content {

  transform: translate3d(0, 0, 0) translateY(25px);

  position: relative;

  z-index: 1;

  text-align: center;

  margin: 0 1.618em;

  top: 30%;

  opacity: 0;

}

  .tl-content  h1 {

    font-family: outfit;

    text-transform: uppercase;

    color: #1779cf;

    font-size: 15px;

    font-weight: normal;

    color: #ff4901;

  }
 
.about-banner p{

    padding: 10px;

    font-size: 16px;

    text-align: center;

    margin: 0;

}
 
p.about-right{

    font-size: 30px !important;

    padding: 10px !important;

    text-align: center;

    margin: 0;

}
 
p.aboutt-right-2 {

    position: relative;

    font-size: 30px;

    top: -15px;

}
 
.aboutimg{

    padding: 50px;

}
 
.about-card h6{

    font-size: 40px;

    text-align: center;

}
 
.about-banner {

    padding: 35px 0px;

}
 
.home-title span{

    margin-bottom: 10px;

}
 
.banner-text {

    padding: 0 20px 30px;

}
 /*--
h2.journey_legacy{

    font-size: 30px;

    margin-bottom: 20px;

} --*/
 
.about-side {

    width: 558px;

    height: 340px;

    margin-left: -160px;

    position: relative;

    top: -69px;

}
 
.downobj{

    padding: 10px;

    margin: 0;

}
 
.downobj-1{

    padding: 10px;

    margin: 0;

}
 
.Ethics_Compliance{

    padding: 10px;

}
 
.sustain_left{

    margin-left: 0;

}
 
.Sustainability{

    padding: 10px;

}
 
.mission-left{

    padding: 0 10px;

}
 
.visions{

    padding: 0 0 20px;

}
 
.timeline{

    padding: 0 0 40px;

}
 
.about_img {

    padding: 0 0 20px;

}

.management-text {
    padding: 50px 0 0px;
}

.management-text img {
    margin-bottom: 20px;
    padding-left: 0;
}
 
.susta_down{

    margin-top: 10px;

}
 
    .about-side {
        width: 558px;
        height: 400px;
        margin-left: 2px;
        position: relative;
        top: 0px;
    }
    
    
    .product-imagess .stackInner {
    box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
    background: #fffaf2;
    color: #131212;
    border-radius: 2rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 1.4em;
}
 
    .product-imagess h2 {
        font-size: 1.2rem;
    }
 
    .product-imagess p {
        font-size: 0.71rem;
    }
 
.product-imagess .stackInner figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .4em;
}
 
.product-imagess .stackCard {
    position: sticky;
    top: 0;
    padding-top: calc(var(--sIndex) * var(--stackTop));
}

.product-imagess {
    background: #F7F7F7;
    background-position: center;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    padding: 50px 0 0;
    margin-right: 10px;
    border-radius: 10px;
    margin-left: 10px;
}
 
.common-btn {
        width: fit-content;
        padding: 10px 40px;
        font-size: 14px;
    }
    
    .our-products-per a {
	padding: 13px 16px;
	font-size: 13px;
}
 
 
}




/*-- riz --*/