:root {
    --color-blue: #0000f0;
    --color-light-yellow: #ecff99;
    --color-orange: #f8c62e;
    --color-aqua-grey: #a9d7f3;
    --main-font: "Lexend Mega", sans-serif;
}

body {
    background: var(--white);
    color: var(--bz-color-heading-primary);
    font-family: "Lexend Mega", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400px;
    font-style: normal;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--main-font) !important;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 26px !important;
}

.custom-nav {
    background: transparent;

    border-bottom: 1px solid #ccc0c0ff;
}

.footer-wrap {
    padding: 12px 0 15px !important;
}


/* background-heading */
.bg-heading {
    background: rgba(173, 216, 236, 0.95);           /* Light blue background */
    display: inline-block;            /* Makes width fit the text */
    padding: 18px 80px;               /* Extra left-right spacing */
    border-radius: 4px;               /* Rounded corners */
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 2px;
    text-align: center;
    margin: 20px auto;                /* Centers it */
    display: block;                   /* Allows margin auto centering */
    width: fit-content;               /* Prevents full width */
}



/* make navbar sticky at top */
.custom-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    /* important so content doesn't show through */
    /* height: 120px; */
}

/* logo */
.nav-logo {
    height: 95px;
    width: auto;

}

/* remove active link green highlight */
.navbar .nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.navbar-nav .nav-item a{
    color: #0833f3ff !important;
    font-size: 13px;
    
}

/* Mobile spacing */
@media (max-width: 991px) {
    .navbar-nav {
        gap: 15px !important;
        padding-top: 10px;
        padding-bottom: 15px;
    }

    .nav-logo {
        height: 80px;
    }
}

.site-header {
    background: linear-gradient(90deg, #ecff99, #a9d7f3);
    /* border-bottom: 4px solid rgba(0, 0, 0, 0.03) */
}

/* =====================nav bar end===================================== */

/* =====================product table ================================= */
 .product-table-section {
        padding: 40px 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 25px;
        font-size: 24px;
        font-weight: 700;
        
    }

    .responsive-table table {
        width: 100%;
        border-collapse: collapse;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    .responsive-table th {
     
        background: linear-gradient(135deg, #0090ff, #004bb5);
        color: #fff;
        text-align: left;
        padding: 14px;
        font-size: 15px;
        font-weight: 600;
      
    }

    .responsive-table td {
        padding: 14px;
        font-size: 14px;
        border-bottom: 1px solid #e5e5e5;
        font-family: "Lexend Mega", sans-serif;
    }

    .responsive-table tr:last-child td {
        border-bottom: none;
    }

    /* MOBILE VIEW: Convert table into cards */
    @media (max-width: 768px) {

        .responsive-table table,
        .responsive-table thead,
        .responsive-table tbody,
        .responsive-table th,
        .responsive-table td,
        .responsive-table tr {
            display: block;
        }

        .responsive-table thead {
            display: none;
        }

        .responsive-table tr {
            margin-bottom: 15px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 12px;
            background: #fff;
        }

        .responsive-table td {
            border: none;
            padding: 8px 0;
            position: relative;
            font-size: 14px;
        }

        .responsive-table td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #0056b3;
            display: block;
            margin-bottom: 4px;
        }
    }

    
.responsive-table th:first-child,
.responsive-table td:first-child {
    min-width: 250px;   /* You can increase to 220px, 250px, etc. */
    width: 250px;
}

.responsive-table th:last-child,
.responsive-table td:last-child {
    min-width: 700px;   /* You can increase to 220px, 250px, etc. */
    width: 250px;
}



/* product-card */

.product-card {
    background: #e8ffcf;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #d6f4b8;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.product-title {
    background: #f9b837;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0;
}

.product-heading
{
    font-size: 25px;
    font-family: "Lexend Mega", sans-serif;
}

/* =====================slider imag section start============================= */



 /* =====================slider imag section start============================= */



  /* HERO - wrapper */
        .hero-section {
            position: relative;
            overflow: hidden;
            width: 100%;
            min-height: 520px;
            display: flex;
            align-items: center;
        }

        /* BACKGROUND IMAGE as <img> for better mobile control */
        .hero-bg {
            position: absolute;
            inset: 0;
            /* top:0; right:0; bottom:0; left:0; */
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            z-index: 0;
            pointer-events: none;
            /* clicks go through to content */
        }

        /* overlay for contrast */
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(6, 50, 92, 0.55) 0%, rgba(14, 106, 179, 0.48) 60%, rgba(12, 110, 170, 0.35) 100%);
            mix-blend-mode: multiply;
            z-index: 1;
            pointer-events: none;
        }

        /* content */
       .hero-contentt {
            position: relative !important;
            z-index: 2 !important;
            max-width: 1100px !important;
            padding: 40px 24px !important;
            color: #ffffff !important;

            
            margin-left: auto !important;
            margin-right: 60px !important;
            margin-top: 300px !important;
         
            text-align: right !important;
            transform: translateY(0) !important;
        }

        /* RESPONSIVE headline */
        /* .hero-title {
  margin: 0 0 12px 0;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(28px, 5.5vw, 64px);
  letter-spacing: -0.02em;
  text-shadow: 0 6px 18px rgba(0,0,0,0.45);
} */

        .hero-title {
            margin: 0 0 12px 0;
            font-weight: 700;
            line-height: 1.05;
            /* font-family: "Helvetica Neue", Arial, sans-serif; */
            font-size: clamp(28px, 5.5vw, 64px);
            /* scales from mobile to desktop */
            font-size: 28px;
            letter-spacing: -0.02em;
            text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
        }

        /* subtitle */
        .hero-sub {
            margin: 0 0 18px 0;
            font-size: clamp(14px, 1.6vw, 20px);
            opacity: 0.95;
        }

        /* ctas row */
        .hero-ctas {
            display: inline-flex;
            gap: 14px;
            margin-bottom: 12px;
            flex-wrap: wrap;
            justify-content: flex-end;
            /* keep buttons on right for desktop */
        }

        /* Buttons: pill style */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border-radius: 28px;
            padding: 12px 22px;
            font-weight: 600;
            box-shadow: 0 6px 18px rgba(5, 32, 70, 0.22);
            transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
        }

        /* Primary and secondary colors */
        .btn-primary {
            background: linear-gradient(180deg, #1b3f86, #152c66);
            color: #fff;
            border: 0;
        }

        .btn-secondary {
            background: linear-gradient(180deg, #1b3f86, #152c66);
            color: #ffffff;
            border: 0;
        }

        /* ghost */
        .btn-ghost {
            display: inline-block;
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            border-radius: 22px;
            padding: 10px 18px;
            font-weight: 600;
            border: 0;
            text-decoration: none;
            box-shadow: none;
            opacity: 0.95;
        }

        /* hover/focus */
        .btn:hover,
        .btn:focus {
            transform: translateY(-3px);
            box-shadow: 0 10px 26px rgba(5, 32, 70, 0.30);
            opacity: 0.98;
            color: #fff;
            background-color: var(--color-orange);
        }

        /* ---- MOBILE / TABLET ADJUSTMENTS ----
   On smaller screens:
   - background image remains as <img> (object-fit handles crop)
   - content becomes center-aligned and vertically closer to center
   - buttons stack vertically and become full-width-ish for tap friendliness
*/
        @media (max-width: 900px) {
            .hero-section {
                min-height: 420px;
                align-items: center;
            }

            .hero-contentt {
                margin: 0 auto;
                /* center horizontally */
                padding: 28px 18px;
                text-align: center !important;
                /* center text on mobile */
                max-width: 92%;
            }

            .hero-ctas {
                display: flex;
                flex-direction: column;
                gap: 12px;
                align-items: center;
                justify-content: center;
            }

            .btn {
                width: 100%;
                max-width: 360px;
                padding: 12px 16px;
                border-radius: 26px;
            }

            .btn-ghost {
                width: auto;
                display: inline-block;
                margin-top: 10px;
            }

            .hero-title {
                font-size: clamp(20px, 7.6vw, 40px);
                line-height: 1.08;
            }

            .hero-sub {
                font-size: clamp(13px, 3.2vw, 18px);
                margin-bottom: 14px;
            }
        }

        /* extra small phones */
        @media (max-width: 480px) {
            .hero-section {
                min-height: 360px;
            }

            .hero-contentt {
                padding: 20px 12px;
            }

            .btn {
                padding: 10px 14px;
                font-size: 15px;
            }

            .hero-ctas {
                gap: 10px;
            }
        }

/* ================================slider section end here============================== */

 /* ================================about section start============================== */


 /* ========= ABOUT SECTION STYLE ========== */

 /* Top Banner Section */
.about-banner-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about-banner-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    
}

.image-animation{
     animation: waveEffect 2s ease-in-out infinite;
     transform-origin: center;
}

/* Smooth continuous movement */
@keyframes waveEffect {
    0% {
        transform: scale(1.05) translateY(0);
    }
    50% {
        transform: scale(1.05) translateY(-10px);
    }
    100% {
        transform: scale(1.05) translateY(0);
    }
}

/* Blue Heading Box */
.about-banner-heading {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #A8D7F2;  /* same light blue */
    padding: 20px 60px;
    border-radius: 4px;
    text-align: center;
}

/* Content Section */
.about-content-section {
    padding: 40px 0;
}

.about-content-section .container {
    max-width: 1100px;
    margin: auto;
}

.about-content-section p {
    font-family: var(--main-font) !important;
    font-size: 14px;
    line-height: 20px;
    color: #666;
}
.about-content-section .container h4{
    color:#666;
    font-size: 18px !important;
}

.about-content-section .container .manufracting h4{
    color:#666;
    font-size: 16px !important;
}
.about-content-section .container ul li{
    color:#666;
}

.primary-color {
    color: #0037B4; /* blue like screenshot */
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .about-banner-heading {
        padding: 12px 30px;
    }

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


.about-hero{
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}

/* background image */
.about-bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ribbon */
.about-ribbon{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(173,216,236,0.95); /* light blue */
    padding: 18px 80px;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.about-ribbon h2{
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    color: #ffffff;
}

.product-ribbon{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(173,216,236,0.95); /* light blue */
    padding: 18px 80px;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.product-ribbon h2{
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    color: #ffffff;
}

/* Information band below */
.about-info{
    background: rgba(255,255,255,0.88);
    padding: 0 20px;
    text-align: center;
    transform: translateY(-30px); /* overlap effect */
}

.about-info .main-text{
    font-size: 24px;
    margin-bottom: 15px;
    color: #444;
}
.about-info .sub-text{
    padding: 15px 0 0 0;
    font-size: 14px;
    color: #666;
}

/* -------- RESPONSIVE -------- */
@media(max-width: 992px){
    .about-hero{height: 360px;}
    .product-ribbon{
        padding: 12px 40px;
        top: 22px;
    }
    .product-ribbon h2{
        font-size: 28px;
    }

    .about-ribbon{
        padding: 12px 40px;
        top: 22px;
    }
    .about-ribbon h2{
        font-size: 28px;
    }
    .about-info{
        padding: 24px 18px;
        font-size: 18px;
    }
}
@media(max-width: 600px){
    .about-hero{height: 300px;}
    .product-ribbon{
        padding: 10px 20px;
    }
    .product-ribbon h2{
        font-size: 20px;
    }

    .about-ribbon{
        padding: 10px 20px;
    }
    .about-ribbon h2{
        font-size: 20px;
    }
    .about-info{
        padding: 20px 10px;
        font-size: 16px;
    }
}


/*=============================product-============================*/
/* Wrapper */
.full-banner-section{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 400px;
}

/* Full width background image */
.full-banner-section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay content */
.banner-overlay{
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

/* Heading */
.banner-heading{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 14px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Button */
.banner-btn{
    display: inline-block;
    background: linear-gradient(180deg,#1b3f86,#152c66);
    color: #fff;
    padding: 12px 28px;
    font-size: 17px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(5,32,70,0.28);
    transition: 0.25s ease-in-out;
}

.banner-btn:hover{
    transform: translateY(-3px);
    background: linear-gradient(180deg,#274db0,#0e2c80);
}

/* -------------------------------------------
   MOBILE FIX (Important)
---------------------------------------------- */
@media(max-width: 768px){

    .full-banner-section{
        height: auto; /* remove fixed height */
    }

    .full-banner-section img{
        height: 300px; /* safe mobile height */
    }

    /* Text overlay moves UP into a safe position */
    .banner-overlay{
        bottom: 30px; 
        padding: 0 10px;
    }

    .banner-heading{
        font-size: 24px;
        margin-bottom: 10px;
    }

    .banner-btn{
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* Extra small screens */
@media(max-width: 480px){

    .full-banner-section img{
        height: 260px; /* even safer */
    }

    .banner-overlay{
        bottom: 16px;
    }

    .banner-heading{
        font-size: 20px;
    }

    .banner-btn{
        padding: 8px 18px;
        font-size: 14px;
    }
}



/* Contact-card  */

/* FULL BACKGROUND IMAGE */
/* .contact-section {
    background: url('../img/bg-img/contact-bg.jpg') no-repeat center center/cover;
    padding: 80px 0;
    position: relative;
} */

.bg-form-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    height: 110%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to top, #ffffff 70%, #ffffff 55%, #0a8df8 100%);
    border-radius: 18px;
    z-index: 1;
    opacity: 0.95;
}

/* FULL BACKGROUND IMAGE */
.contact-banner {
    background: url(../img/bg-img/contact-bg4.jpg) no-repeat center center / cover;
    padding: 15px 0;
    position: relative;
     display: flex;
    align-items: center;
    justify-content: center;
}

/* CENTER WRAPPER */
.center-wrapper {
    width: 100%;
    max-width: 600px;
    padding: 20px;
}

/* CONTACT CARD */
.contact-card {
    background: #fff;
    padding: 20px;
    padding-top: 10px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    z-index: 5;
    position: relative;
}

/* LABEL */
.form-label-custom {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

/* INPUT BOX */
.form-input {
    padding: 10px;
    border-radius: 6px;
}

/* BUTTON */
.submit-btn {
    width: 100%;
    background: #41a6ff;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
}

/* DETAILS SECTION */
.contact-details-section {
    background: linear-gradient(90deg, #ecff99, #a9d7f3);
    padding: 15px 0;
    font-size: 14px;
    
}

.contact-details-section p {
line-height: 15px;
}

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

@media (max-width: 768px) {

    .contact-banner {
        height: auto;
        padding: 40px 0;
        background-position: top center;
    }

    .center-wrapper {
        max-width: 95%;
        padding: 10px;
    }

    .contact-card {
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    }

    .contact-card h2 {
        font-size: 22px;
    }

    .form-label-custom {
        font-size: 11px;
    }

    .form-input {
        font-size: 14px;
        padding: 9px;
    }

    .submit-btn {
        padding: 10px;
        font-size: 15px;
    }
}


/* Extra small devices */
@media (max-width: 480px) {

    .contact-card {
        padding: 20px;
    }

    .contact-card h2 {
        font-size: 20px;
    }

    .form-input {
        padding: 8px;
        font-size: 13px;
    }

    textarea.form-input {
        height: 120px;
    }

    .contact-details-section {
        font-size: 12px;
        padding: 15px 10px;
    }
}



/* =================== request-a-quote ==========================*/
/* Sticky Request a Quote Button */
/* .sticky-quote-btn {
    position: fixed;
    right: 25px;
    top: 40%;
    transform: translateY(-50%) rotate(-90deg);
    background: #007bff;
    color: #fff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px 30px 0 0; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s ease;
    transform-origin: right center;
} */

.sticky-quote-btn {
    position: fixed;
    right: 8px;
    top: 86%;
    transform: translateY(-50%);
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 400;
    color: black; /* Light sky blue like your image */
    border: 2px solid #007bff;
    background: transparent;
    border-radius: 40px;
    text-decoration: none;
    /* writing-mode: vertical-rl; */
    text-orientation: mixed;
    z-index: 9999;
    transition: 0.3s ease;
    animation: breathe 2s infinite ease-in-out;
}
@keyframes breathe {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.05); }
    100% { transform: translateY(-50%) scale(1); }
}

.sticky-quote-btn:hover {
    background: #0056b3;
    color: #fff;
    padding-right: 15px;
}


/* product-image */
.product-banner {
    position: relative;
    width: 100%;
    height: 300px; /* adjust as needed */
    overflow: hidden;
    margin-bottom: 20px;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    filter: brightness(1); 
    /* filter: brightness(0.8) contrast(1.1) saturate(1.1) sharpness(1.2); */
    /* border-radius: 10px; */
}

.product-banner-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    background: rgba(255, 193, 7, 0.9); /* yellow box like your reference */
    padding: 10px 20px;
    border-radius: 5px;
}

.product-banner-text h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

.product-banner-text p {
    margin: 0;
    font-size: 18px;
}

/* Language translater */
/* @media (min-width:1024px) {
    .google-translate{
    position: absolute;
    left: 66%;
    top:60px;
    font-family: "Lexend Mega", sans-serif;
}
} */

@media (min-width:1024px) {
    .google-translate{
  position: absolute;
    top: 0px;
    right: 15px;
    font-family: "Lexend Mega", sans-serif;
}
}

@media (min-width:1024px) {
    .iso{
   color: #0833f3ff;
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    right: 40px;
    }
    
}

/*============== End Translater=========================== */


/* image-animation style */
/* .image-animation1 {
    width: 100%;
    height: 100vh; 
    background-image: url('assets/img/manufracting.webp');
    background-size: cover;
    background-position: left center;
    animation: smoothPan 20s linear infinite;
    background-repeat: repeat-x; 
}

@keyframes smoothPan {
    from {
        background-position: 0% center;
    }
    to {
        background-position: 100% center;
    }
} */

.image-animation1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: zoomShine 6s ease-in-out infinite alternate;
    filter: brightness(0.9) contrast(1.1) saturate(1.1);
}


@keyframes zoomShine {
    0% {
        transform: scale(1);
        filter: brightness(0.85) contrast(1.05) saturate(1.05);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1) contrast(1.2) saturate(1.2);
    }
    100% {
        transform: scale(1.1);
        filter: brightness(0.9) contrast(1.15) saturate(1.15);
    }
}

/* ====================image-animation style End======================*/