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

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

:root{
    --brand-blue:#0f5c95;
    --brand-blue-deep:#123f67;
    --brand-blue-soft:#dcecf7;
    --brand-orange:#f47a20;
    --brand-orange-soft:#ffe5d2;
    --brand-charcoal:#353c49;
    --brand-charcoal-soft:#677384;
    --brand-white:#ffffff;
    --brand-ice:#f2f7fb;
    --brand-line:#d7e4ef;
    --brand-shadow:0 14px 34px rgba(18,63,103,0.10);
}

body{
    background:linear-gradient(180deg,#fcfdff 0%,var(--brand-ice) 100%);
    color:var(--brand-charcoal);
}

/* =========================
   HEADER
========================= */

.custom-navbar{
    background: linear-gradient(135deg, rgba(18, 63, 103, 0.85) 0%, rgba(15, 92, 149, 0.85) 100%);
    border-top:none;
    border-bottom:1px solid rgba(15,92,149,0.14);
    padding:4px 0;
    box-shadow:0 10px 24px rgba(18,63,103,0.08);
    z-index:3000;
    position:relative;
    overflow:visible;
}

.custom-navbar::before{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(9,34,56,0.45);
    z-index: 0;
    pointer-events: none;
}

.custom-navbar .container,
.custom-navbar .container-fluid {
    position: relative;
    z-index: 2;
}

.brand-wrap{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.brand-logo{
    width:210px;
    height:auto;
    object-fit:contain;
    border-radius:22px;
    background:transparent;
    padding:0;
    box-shadow:none;
}

.navbar-nav{
    gap:26px;
}

.navbar-nav .nav-link{
    position:relative;
    color:var(--brand-white) !important;
    font-size:14px;
    font-weight:800;
    letter-spacing:0.02em;
    padding:0 0 !important;
    transition:0.3s ease;
}

.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:10px;
    width:100%;
    height:3px;
    border-radius:999px;
    background:var(--brand-orange);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.3s ease;
}

.navbar-nav .nav-link:hover{
    color:var(--brand-orange) !important;
}

.navbar-nav .nav-link.active{
    color:var(--brand-orange) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{
    transform:scaleX(1);
}

.navbar-toggler{
    border:1px solid rgba(255,255,255,0.20);
    padding:10px 12px;
    border-radius:12px;
    box-shadow:none !important;
    background:transparent;
}

.navbar-toggler-icon{
    width:24px;
    height:18px;
    background-image:
        linear-gradient(var(--brand-white),var(--brand-white)),
        linear-gradient(var(--brand-orange),var(--brand-orange)),
        linear-gradient(var(--brand-white),var(--brand-white));
    background-size:100% 2px,100% 2px,100% 2px;
    background-position:0 0,0 8px,0 16px;
    background-repeat:no-repeat;
}

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

@media(max-width:1199px){

    .brand-logo{
        width:190px;
        border-radius:16px;
    }

    .navbar-nav{
        gap:14px;
    }
}

@media(max-width:991px){

    .navbar-collapse{
        margin-top:16px;
        padding:14px 16px;
        background:var(--brand-blue-deep);
        border:1px solid rgba(15,92,149,0.12);
        border-radius:18px;
        box-shadow:0 14px 26px rgba(18,63,103,0.08);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .navbar-nav{
        gap:6px;
        align-items:flex-start !important;
    }

    .navbar-nav .nav-link::after{
        width:56px;
    }
}

@media(max-width:576px){

    .brand-wrap{
        max-width:calc(100% - 72px);
    }

    .brand-logo{
        width:150px;
        height:auto;
        border-radius:12px;
        /* keep logo anchored in navbar on mobile (no overlap into hero) */
        margin-top:0;
        margin-bottom:0;
        position:static;
        top:auto;
        transform:translateY(-10px);
    }

    .navbar-nav .nav-link{
        font-size:14px;
    }
}



/* =========================
   PRODUCTS DROPDOWN
========================= */

.products-dropdown{
    position:static;
}

.products-dropdown__bar{
    display:flex;
    align-items:center;
    gap:10px;
}

.products-dropdown__trigger{
    display:inline-flex;
    align-items:center;
}

.products-dropdown__toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    color:var(--brand-white);
}

.products-dropdown__toggle i{
    transition:transform 0.22s ease;
}

.products-dropdown.is-open .products-dropdown__toggle i{
    transform:rotate(180deg);
}

.products-dropdown__panel{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:min(1280px, calc(100vw - 40px));
    margin:0 auto;
    padding:28px 28px 24px;
    background:#ffffff;
    border:1px solid rgba(18,63,103,0.10);
    box-shadow:0 22px 48px rgba(8, 24, 40, 0.16);
    z-index:3200;
}

.products-dropdown__panel[hidden]{
    display:none !important;
}

.products-dropdown__grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    column-gap:44px;
    row-gap:46px;
}

.products-dropdown__section{
    min-width:0;
}

.products-dropdown__title{
    margin:0 0 18px;
    font-size:18px;
    font-weight:800;
    line-height:1.25;
    color:#000000;
}

.products-dropdown__title-link{
    color:inherit !important;
    text-decoration:none;
}

.products-dropdown__title-link:hover{
    color:#000000 !important;
}

.products-dropdown__link{
    display:block;
    margin-bottom:16px;
    color:#213349;
    font-size:15px;
    font-weight:500;
    line-height:1.45;
    text-decoration:none;
}

.products-dropdown__link:hover{
    color:#213349;
    text-decoration:none;
}

.products-dropdown__more{
    display:inline-block;
    margin-top:2px;
    color:#1c49a0;
    font-size:14px;
    text-decoration:underline;
}

.products-dropdown__footer{
    display:flex;
    justify-content:flex-end;
    margin-top:22px;
}

.products-dropdown__all-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:290px;
    min-height:44px;
    padding:10px 28px;
    border:1px solid #0b8b89;
    border-radius:4px;
    background:#ffffff;
    color:#0b8b89;
    font-size:16px;
    font-weight:500;
    text-decoration:none;
}

.products-dropdown__all-link:hover{
    background:#0b8b89;
    color:#ffffff;
}

@media(max-width:1199px){
    .products-dropdown__panel{
        width:min(1120px, calc(100vw - 32px));
        padding:24px 22px 20px;
    }

    .products-dropdown__grid{
        column-gap:28px;
        row-gap:32px;
    }
}

@media(max-width:991px){
    .products-dropdown{
        position:relative;
    }

    .products-dropdown__bar{
        width:100%;
        justify-content:space-between;
    }

    .products-dropdown__trigger{
        flex:1;
    }

    .products-dropdown__toggle{
        display:inline-flex;
    }

    .products-dropdown__panel{
        position:static;
        width:100%;
        min-width: 100%;
        margin-top:12px;
        padding:20px;
        background: rgba(255, 255, 255, 0.08);
        box-shadow:none;
        max-height: none;
        overflow-y: visible;
        border-radius: 12px;
    }

    .products-dropdown__title,
    .products-dropdown__link {
        color: #ffffff !important;
    }

    .products-dropdown__grid{
        grid-template-columns:1fr;
        row-gap:24px;
    }

    .products-dropdown__footer{
        justify-content:stretch;
        margin-top:18px;
    }

    .products-dropdown__all-link{
        width:100%;
        min-width:0;
    }
}

/* =========================
   PRODUCT SLIDER
========================= */

.product-slider-section{
    padding:34px 20px;
    background:linear-gradient(180deg,#eff6fb 0%,#f9fbfd 100%);
}

.product-row{
    display:flex;
    gap:18px;
}

.product-card{
    position:relative;
    overflow:hidden;
    background:var(--brand-white);
    border:1px solid var(--brand-line);
    border-radius:16px;
    height:320px;
    box-shadow:0 10px 24px rgba(18,63,103,0.06);
    transition:transform 0.35s ease,box-shadow 0.35s ease;
}

.product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--brand-shadow);
}

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

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

.product-overlay{
    position:absolute;
    left:0;
    bottom:-100%;
    width:100%;
    height:180px;
    background:linear-gradient(180deg,rgba(15, 50, 81, 0.08) 0%,rgba(18,63,103,0.92) 48%,rgba(18,63,103,0.98) 100%);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    transition:0.45s ease;
}

.product-card:hover .product-overlay{
    bottom:0;
}

.product-overlay h3{
    color:var(--brand-white);
    font-size:15px;
    text-align:center;
    margin-bottom:18px;
    line-height:1.35;
    font-weight:600;
}

.quote-btn{
    background:var(--brand-orange);
    color:var(--brand-white);
    border:none;
    padding:12px 32px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    transition:0.3s ease;
    box-shadow:0 8px 18px rgba(244,122,32,0.28);
}

.quote-btn:hover{
    background:var(--brand-white);
    color:var(--brand-blue-deep);
}

.slider-arrow{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--brand-blue-deep);
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 18px rgba(18,63,103,0.22);
}

.slider-arrow i{
    color:var(--brand-white);
    font-size:24px;
}

@media(max-width:1200px){

    .product-card{
        height:280px;
    }
}

@media(max-width:768px){

    .product-row{
        gap:12px;
    }

    .product-card{
        height:240px;
    }

    .product-overlay{
        height:132px;
    }

    .product-overlay h3{
        font-size:14px;
    }

    .quote-btn{
        padding:10px 20px;
        font-size:13px;
    }

    .slider-arrow{
        width:46px;
        height:46px;
    }

    .slider-arrow i{
        font-size:20px;
    }
}

@media(max-width:576px){

    .product-card{
        height:260px;
    }
}

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

.about-section{
    padding:60px 20px 40px;
    background:linear-gradient(180deg,#f9fbfd 0%,#eef5fa 100%);
}

.about-heading{
    text-align:center;
    margin-bottom:30px;
}

.about-heading h2{
    font-size:34px;
    font-weight:700;
    color:var(--brand-blue-deep);
    margin-bottom:8px;
}

.heading-line{
    width:52px;
    height:4px;
    background:var(--brand-orange);
    display:block;
    margin:auto;
    border-radius:10px;
}

.about-text{
    text-align:center;
    max-width:1450px;
    margin:auto;
}

.about-text p{
    font-size:15px;
    line-height:1.9;
    color:var(--brand-charcoal);
    margin-bottom:30px;
}

.about-text p b{
    color:var(--brand-blue-deep);
    font-weight:700;
}

.read-more{
    color:var(--brand-orange);
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    transition:0.3s ease;
}

.read-more:hover{
    color:var(--brand-blue);
}

.company-info-section{
    padding-top:45px;
}

.info-box{
    display:flex;
    align-items:center;
    gap:14px;
    height:100%;
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(15,92,149,0.10);
    border-radius:18px;
    padding:18px 16px;
    box-shadow:0 10px 24px rgba(18,63,103,0.05);
    transition:transform 0.3s ease,box-shadow 0.3s ease;
}

.info-box:hover{
    transform:translateY(-4px);
    box-shadow:var(--brand-shadow);
}

.info-icon{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:50%;
    background:linear-gradient(180deg,var(--brand-orange-soft) 0%,#fff2e7 100%);
    display:flex;
    justify-content:center;
    align-items:center;
}

.info-icon i{
    font-size:22px;
    color:var(--brand-blue-deep);
}

.info-content h4{
    font-size:15px;
    color:var(--brand-charcoal-soft);
    line-height:1.3;
    margin-bottom:5px;
    font-weight:500;
}

.info-content p{
    font-size:14px;
    color:var(--brand-blue-deep);
    margin:0;
    font-weight:700;
}

/* =========================
   ABOUT COMPANY SECTION
========================= */

.about-company{

    padding:100px 0;

    background:#f8f9fb;
}

/* TITLE */

.about-title{

    text-align:center;

    margin-bottom:70px;
}

.about-title h2{

    font-size:52px;

    font-weight:700;

    color:#0b2545;

    margin-bottom:18px;
}

.about-title p{

    font-size:20px;

    color:#66788a;
}

/* WRAPPER */

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

/* IMAGE */

.about-image img{

    width:100%;

    border-radius:22px;

    object-fit:cover;

    box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* CONTENT */

.about-content h3{

    font-size:52px;

    font-weight:700;

    color:#0b2545;

    margin-bottom:12px;
}

.about-content h4{

    font-size:24px;

    color:#ff7a00;

    margin-bottom:28px;

    font-weight:600;
}

.about-content p{

    font-size:18px;

    line-height:1.9;

    color:#5e6d7c;

    margin-bottom:22px;
}

/* FACT BOX */

.fact-box{

    margin-top:40px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;
}

.fact-item{

    background:#fff;

    padding:28px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,0.08);

    transition:0.3s ease;
}

.fact-item:hover{

    transform:translateY(-6px);
}

.fact-item h5{

    font-size:18px;

    color:#0b2545;

    margin-bottom:10px;

    font-weight:700;
}

.fact-item span{

    font-size:16px;

    color:#66788a;
}

/* RESPONSIVE */

@media(max-width:991px){

    .about-wrapper{

        grid-template-columns:1fr;

        gap:40px;
    }

    .about-title h2{

        font-size:40px;
    }

    .about-content h3{

        font-size:40px;
    }

    .fact-box{

        grid-template-columns:1fr;
    }
}

@media(max-width:576px){

    .about-company{

        padding:70px 0;
    }

    .about-title h2{

        font-size:32px;
    }

    .about-content h3{

        font-size:32px;
    }

    .about-content h4{

        font-size:20px;
    }

    .about-content p{

        font-size:16px;
    }
}

@media(max-width:768px){

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

    .about-text p{
        font-size:14px;
    }

    .info-icon{
        width:50px;
        height:50px;
        min-width:50px;
    }

    .info-icon i{
        font-size:18px;
    }

    .info-content h4{
        font-size:14px;
    }

    .info-content p{
        font-size:13px;
    }
}


/* =========================
   ABOUT HERO SECTION
========================= */

.about-hero{

    width:100%;

    min-height:100vh;

    padding:120px 8% 80px;

    background:#f7f9fc;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    overflow:hidden;
}

/* =========================
   LEFT CONTENT
========================= */

.about-hero-content{

    width:48%;
}

/* TAG */

.about-tag{

    color:#f47a20;

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    display:inline-block;

    margin-bottom:25px;
}

/* HEADING */

.about-hero-content h1{

    font-size:78px;

    line-height:1.08;

    font-weight:800;

    color:#123f67;

    margin-bottom:25px;
}

/* LINE */

.hero-line{

    width:120px;

    height:5px;

    border-radius:50px;

    background:linear-gradient(to right,#123f67,#f47a20);

    margin-bottom:30px;
}

/* TEXT */

.about-hero-content p{

    font-size:22px;

    line-height:1.9;

    color:#677384;

    max-width:700px;

    margin-bottom:50px;
}

/* =========================
   FEATURES
========================= */

.about-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;
}

/* BOX */

.feature-box{

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);

    transition:0.35s;
}

.feature-box:hover{

    transform:translateY(-8px);
}

/* ICON */

.feature-box i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#eef3ff;

    color:#123f67;

    font-size:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;
}

/* TITLE */

.feature-box h4{

    font-size:24px;

    color:#123f67;

    margin-bottom:10px;

    font-weight:700;
}

/* SUBTEXT */

.feature-box span{

    font-size:17px;

    color:#677384;
}

/* =========================
   RIGHT IMAGE
========================= */

.about-hero-image{

    width:52%;

    display:flex;

    justify-content:center;

    align-items:center;
}

.about-hero-image img{

    width:100%;

    max-width:850px;

    object-fit:contain;
}

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

@media(max-width:1400px){

    .about-hero-content h1{

        font-size:62px;
    }
}

@media(max-width:1100px){

    .about-hero{

        flex-direction:column;

        text-align:center;
    }

    .about-hero-content,
    .about-hero-image{

        width:100%;
    }

    .hero-line{

        margin:auto auto 30px;
    }

    .about-features{

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

@media(max-width:768px){

    .about-hero{

        padding:110px 20px 70px;
    }

    .about-hero-content h1{

        font-size:48px;
    }

    .about-hero-content p{

        font-size:18px;
    }

    .about-features{

        grid-template-columns:1fr;
    }

    .feature-box{

        padding:25px;
    }

    .feature-box h4{

        font-size:21px;
    }
}
/* =========================
   PRODUCT RANGE
========================= */

.product-range-section{
    padding:50px 20px;
    background:linear-gradient(180deg,#eef5fa 0%,#f9fbfd 100%);
}

.product-heading{
    text-align:center;
    margin-bottom:35px;
}

.product-heading h2{
    font-size:34px;
    font-weight:700;
    color:var(--brand-blue-deep);
    margin-bottom:8px;
}

.product-line{
    width:45px;
    height:4px;
    background:var(--brand-orange);
    display:block;
    margin:auto;
    border-radius:10px;
}

.product-box{
    background:var(--brand-white);
    border:1px solid var(--brand-line);
    border-radius:18px;
    overflow:hidden;
    transition:0.35s ease;
    height:100%;
    box-shadow:0 10px 24px rgba(18,63,103,0.05);
}

.product-box:hover{
    transform:translateY(-5px);
    box-shadow:var(--brand-shadow);
}

.product-box img{
    display:block;
    width:100%;
    height:280px;
    object-fit:contain;
    object-position:center;
    padding:18px;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbfe 100%);
}

.product-content{
    padding:18px 16px;
    text-align:center;
}

.product-content h3{
    font-size:16px;
    color:var(--brand-blue-deep);
    line-height:1.45;
    margin-bottom:10px;
    font-weight:700;
}

.product-content p{
    font-size:13px;
    color:var(--brand-charcoal-soft);
    margin-bottom:6px;
}

.product-content a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    color:var(--brand-orange);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

.product-content a:hover{
    color:var(--brand-blue);
}

.product-content a i{
    font-size:12px;
}

.view-range-btn{
    display:inline-block;
    background:var(--brand-blue-deep);
    border:1px solid var(--brand-blue-deep);
    color:var(--brand-white);
    padding:12px 30px;
    border-radius:999px;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    transition:0.3s ease;
    box-shadow:0 10px 24px rgba(18,63,103,0.18);
}

.view-range-btn:hover{
    background:var(--brand-orange);
    border-color:var(--brand-orange);
    color:var(--brand-white);
}

@media(max-width:992px){

    .product-box img{
        height:240px;
        padding:16px;
    }

    .product-heading h2{
        font-size:30px;
    }
}

@media(max-width:768px){

    .product-range-section{
        padding:40px 15px;
    }

    .product-box img{
        height:220px;
        padding:14px;
    }

    .product-content h3{
        font-size:14px;
    }

    .product-content p{
        font-size:12px;
    }

    .view-range-btn{
        padding:10px 24px;
        font-size:14px;
    }
}

@media(max-width:576px){

    .product-heading h2{
        font-size:26px;
    }

    .product-box img{
        height:200px;
        padding:12px;
    }
}

/* =========================
   HSN SECTION
========================= */

.hsn-section{
    padding:10px 15px 30px;
    background:linear-gradient(180deg,#f9fbfd 0%,#eef5fa 100%);
}

.hsn-heading{
    text-align:center;
    margin-bottom:30px;
}

.hsn-heading h2{
    font-size:30px;
    font-weight:700;
    color:var(--brand-blue-deep);
    margin-bottom:8px;
}

.hsn-line{
    width:55px;
    height:4px;
    background:var(--brand-orange);
    display:block;
    margin:auto;
    border-radius:10px;
}

.hsn-table-wrapper{
    overflow-x:auto;
    border-radius:18px;
    border:1px solid var(--brand-line);
    background:var(--brand-white);
    box-shadow:0 10px 24px rgba(18,63,103,0.05);
}

.hsn-table{
    width:100%;
    border-collapse:collapse;
}

.hsn-table thead{
    background:linear-gradient(90deg,var(--brand-blue-deep) 0%,var(--brand-blue) 100%);
}

.hsn-table th{
    color:var(--brand-white);
    font-size:16px;
    font-weight:600;
    padding:18px 20px;
    text-align:left;
}

.hsn-table td{
    font-size:14px;
    color:var(--brand-charcoal);
    line-height:1.8;
    padding:18px 20px;
    vertical-align:top;
    border-top:1px solid #edf2f6;
}

.hsn-table td:first-child,
.hsn-table th:first-child{
    width:20%;
    white-space:nowrap;
}

@media(max-width:768px){

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

    .hsn-table th{
        font-size:14px;
        padding:14px 14px;
    }

    .hsn-table td{
        font-size:13px;
        padding:14px 14px;
        line-height:1.6;
    }
}

@media(max-width:576px){

    .hsn-heading h2{
        font-size:24px;
    }

    .hsn-table td:first-child,
    .hsn-table th:first-child{
        width:30%;
    }
}


/* =========================
   PRODUCT OVERVIEW
========================= */

/* =========================
   PRODUCT OVERVIEW
========================= */

.product-overview{

    padding:110px 8%;

    background:#f7f9fc;
}

/* =========================
   HEADING
========================= */

.overview-heading{

    text-align:center;

    max-width:900px;

    margin:auto auto 70px;
}

.overview-heading span{

    color:#f47a20;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    display:block;

    margin-bottom:18px;
}

.overview-heading h2{

    font-size:58px;

    color:#123f67;

    font-weight:800;

    margin-bottom:18px;
}

.overview-line{

    width:110px;
    height:5px;

    background:
    linear-gradient(to right,#123f67,#f47a20);

    margin:auto auto 25px;

    border-radius:50px;
}

.overview-heading p{

    font-size:20px;

    color:#677384;

    line-height:1.8;
}

/* =========================
   WRAPPER
========================= */

.overview-wrapper{

    display:flex;

    gap:45px;

    align-items:flex-start;
}

/* =========================
   SIDEBAR
========================= */

.overview-sidebar{

    width:340px;

    display:flex;

    flex-direction:column;

    gap:18px;

    height:600px;

    overflow-y:auto;

    padding-right:10px;
}

/* =========================
   ITEM
========================= */

.overview-item{

    background:#fff;

    border-radius:20px;

    padding:15px 20px;

    height:90px;
    min-height:90px;

    display:flex;

    align-items:center;

    gap:22px;

    cursor:pointer;

    transition:0.35s;

    box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

.overview-item.active{

    background:#123f67;
}

.overview-item.active span,

.overview-item.active h3{

    color:#fff;
}

/* NUMBER */

.overview-item span{

    font-size:24px;

    font-weight:800;

    color:#f47a20;

    min-width:45px;
}

/* TITLE */

.overview-item h3{

    font-size:16px;

    line-height:1.4;

    color:#123f67;

    font-weight:700;
}

/* HOVER */

.overview-item:hover{

    transform:translateX(8px);
}

/* =========================
   CONTENT
========================= */

.overview-content{

    flex:1;

    background:#fff;

    border-radius:35px;

    overflow:hidden;

    height:600px;

    display:flex;

    align-items:stretch;

    box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

/* =========================
   IMAGE
========================= */

.overview-image{

    width:46%;

    height:100%;

    background:#f3f6fb;

    overflow:hidden;
}

.overview-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================
   INFO
========================= */

.overview-info{

    width:54%;

    padding:50px 40px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;
}

/* TAG */

.overview-tag{

    display:inline-block;

    width:fit-content;

    background:#eef3ff;

    color:#123f67;

    padding:10px 20px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:15px;
}

/* TITLE */

.overview-info h3{

    font-size:32px;

    line-height:1.15;

    color:#123f67;

    font-weight:800;

    margin-bottom:10px;
}

/* TEXT */

.overview-info p{

    font-size:16px;

    line-height:1.9;

    color:#677384;

    margin-bottom:15px;
}

/* =========================
   LIST
========================= */

.overview-info ul{

    list-style:none;

    margin-bottom:15px;
}

.overview-info ul li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    font-size:15px;

    color:#123f67;

    margin-bottom:8px;

    font-weight:500;

    line-height:1.6;
}

/* ICON */

.overview-info ul li i{

    color:#f47a20;

    font-size:16px;

    margin-top:5px;
}

/* BUTTON */

.overview-btn{

    display:inline-block;

    width:fit-content;

    padding:12px 30px;

    background:#f47a20;

    color:#fff;

    text-decoration:none;

    border-radius:8px;

    font-size:17px;

    font-weight:700;

    transition:0.3s;
}

.overview-btn:hover{

    background:#123f67;

    transform:translateY(-3px);
}

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

@media(max-width:1200px){

    .overview-content{

        flex-direction:column;

        height:auto;
    }

    .overview-image{

        width:100%;

        height:450px;

        min-height:auto;
    }

    .overview-info{

        width:100%;
    }

    .overview-info h3{

        font-size:40px;
    }
}

@media(max-width:768px){

    .overview-image{

        height:300px;
    }

    .overview-info{

        padding:35px 25px;
    }

    .overview-info h3{

        font-size:30px;
    }

    .overview-info p{

        font-size:16px;
    }

    .overview-info ul li{

        font-size:15px;
    }

    .overview-btn{

        padding:14px 28px;

        font-size:15px;
    }
}



/* =========================
   MISSION SECTION
========================= */

.mission-section{

    width:100%;

    padding:110px 8%;

    background:
    linear-gradient(to right,#0d1117,#111827);

    position:relative;

    overflow:hidden;
}

/* CONTAINER */

.mission-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;
}

/* CARD */

.mission-card{

    background:
    linear-gradient(145deg,
    rgba(181, 91, 91, 0.08),
    rgba(255,255,255,0.03));

    border:1px solid rgba(255,255,255,0.12);

    border-radius:24px;

    padding:55px 45px;

    min-height:480px;

    transition:0.4s;

    backdrop-filter:blur(10px);

    position:relative;
}

/* ACTIVE CARD */

.active-card{

    border:1px solid #0d6efd;

    box-shadow:
    0 0 25px rgba(13,110,253,0.15);
}

/* HOVER */

.mission-card:hover{

    transform:translateY(-10px);

    border-color:#f47a20;
}

/* MISSION ICONS */
.mission-icon {
    width: 70px;
    height: 70px;
    background: rgba(244, 122, 32, 0.15);
    border: 1px solid rgba(244, 122, 32, 0.4);
    color: #f47a20;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mission-card:hover .mission-icon {
    background: #f47a20;
    color: #fff;
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 10px 20px rgba(244, 122, 32, 0.3);
}

/* TITLE */

.mission-card h2{

    font-size:52px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:20px;
}

/* TEXT */

.mission-card p{

    font-size:22px;

    line-height:2;

    color:rgba(255,255,255,0.85);

    font-weight:400;
}

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

@media(max-width:1200px){

    .mission-container{

        grid-template-columns:1fr;
    }

    .mission-card{

        min-height:auto;
    }
}

@media(max-width:768px){

    .mission-section{

        padding:80px 20px;
    }

    .mission-card{

        padding:40px 30px;
    }

    .mission-card h2{

        font-size:36px;
    }

    .mission-card p{

        font-size:18px;

        line-height:1.8;
    }
}


/* =========================
   WHY CHOOSE US
========================= */

.why-choose-section{

    width:100%;

    padding:110px 8%;

    background:transparent;

    position:relative;

    overflow:hidden;
    
}

/* =========================
   HEADING
========================= */

.why-heading{

    text-align:center;

    max-width:900px;

    margin:auto auto 70px;
}

/* SMALL TAG */

.why-heading span{

    color:#f47a20;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    display:block;

    margin-bottom:10px;
}

/* TITLE */

.why-heading h2{

    font-size:32px;

    color:var(--brand-blue-deep);

    font-weight:800;

    margin-bottom:25px;
}

/* TEXT */

.why-heading p{

    font-size:15px;

    line-height:1.8;

    color:var(--brand-charcoal-soft);
}

/* =========================
   CARDS
========================= */

.why-cards{

    display:flex;
    gap:15px;
    flex-wrap:nowrap;
    align-items:stretch;
}

/* CARD */

.why-card{

    background:var(--brand-white);

    border:1px solid var(--brand-line);
    box-shadow: 0 10px 30px rgba(18, 63, 103, 0.05);

    border-radius:28px;

    padding:25px 15px;

    text-align:center;

    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    backdrop-filter:blur(10px);

    min-height:auto;
    flex:1;

    opacity: 1;
}

/* ACTIVE CARD */

.why-cards .active-card{

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow: none;
}

/* HOVER */

.why-card:hover{

    transform: translateY(-15px) scale(1.1);

    border-color: var(--brand-orange) !important;
    box-shadow: 0 15px 30px rgba(244, 122, 32, 0.25);
    opacity: 1 !important;
    z-index: 20;
}


/* =========================
   ICON
========================= */

.why-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    background:
    linear-gradient(to right,#f47a20,#ff9b4a);

    margin:auto auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0 10px 30px rgba(244,122,32,0.3);
}

.why-icon i{

    font-size:36px;

    color:#fff;
}

/* =========================
   TITLE
========================= */

.why-card h3{

    font-size:18px;

    color:var(--brand-blue-deep);

    font-weight:800;

    margin-bottom:10px;
}

/* =========================
   TEXT
========================= */

.why-card p{

    font-size:13px;

    line-height:1.9;

    color:var(--brand-charcoal-soft);
}

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

@media(max-width:1400px){

}

@media(max-width:768px){

    .why-choose-section{
        padding:60px 20px 30px;
    }

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

    .why-heading p{
        font-size:14px;
    }

    .why-card{
        min-height:auto;
        padding:40px 25px;
    }

    .why-card h3{
        font-size:18px;
    }

    .why-card p{
        font-size:13px;
    }

    .why-icon{
        width:60px;
        height:60px;
    }

    .why-icon i{
        font-size:30px;
    }
}

/* =========================
   ANIMATIONS & HOME REFINEMENTS
========================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-left { animation: fadeInLeft 0.8s ease-out forwards; }
.animate-right { animation: fadeInRight 0.8s ease-out forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Home Page Space & UI Optimization */
.home-hero { padding: 15px 8% 20px !important; min-height: auto !important; margin-bottom: 24px !important; background: #f0f2f5 !important; }
.home-hero .product-image img { max-width: 65% !important; }
.product-btn, .overview-btn { padding: 10px 24px !important; font-size: 14px !important; }

.product-overview { padding: 35px 8% 15px !important; margin-bottom: 25px !important; }
.overview-heading { margin-bottom: 20px !important; }
.overview-heading h2 { font-size: 32px !important; }
.overview-item { height: 55px !important; min-height: 55px !important; padding: 10px 15px !important; gap: 15px !important; border-radius: 12px !important; }
.overview-item span { font-size: 18px !important; min-width: 30px !important; }
.overview-item h3 { font-size: 14px !important; }
.overview-sidebar { gap: 10px !important; height: 450px !important; }
.overview-content { height: 450px !important; }
.overview-info { padding: 20px 30px !important; }
.overview-info h3 { font-size: 22px !important; margin-bottom: 8px !important; }
.overview-info p { font-size: 13.5px !important; margin-bottom: 10px !important; line-height: 1.5 !important; }
.overview-info ul li { font-size: 12.5px !important; margin-bottom: 4px !important; }
.overview-tag { padding: 5px 15px !important; font-size: 10px !important; margin-bottom: 10px !important; }

.why-choose-section { padding: 25px 8% 10px !important; position: relative; z-index: 10; margin-bottom: 25px !important; }
.why-heading { margin-bottom: 15px !important; }
.why-heading h2 { font-size: 24px !important; margin-bottom: 5px !important; }
.why-heading p { font-size: 12px !important; }

.hsn-section { padding: 15px 15px 10px !important; margin-bottom: 25px !important; }
.hsn-heading { margin-bottom: 10px !important; }

.why-cards { 
    gap: 8px !important; 
    display: flex !important; 
    flex-wrap: nowrap !important; 
    align-items: stretch !important; 
    overflow-x: auto !important; 
    padding-bottom: 15px !important;
    scrollbar-width: none;
}
.why-cards::-webkit-scrollbar { display: none; }
.why-card { padding: 12px 8px !important; border-radius: 10px !important; min-height: auto !important; flex: 1 !important; min-width: 200px !important; }
.why-icon { width: 32px !important; height: 32px !important; margin-bottom: 8px !important; }

.why-icon i { font-size: 16px !important; }
.why-card h3 { font-size: 14px !important; margin-bottom: 4px !important; }
.why-card p { font-size: 9.5px !important; line-height: 1.3 !important; text-align:center !important; }



@media (max-width: 991px) {
    .product-hero { padding: 40px 5% !important; min-height: auto !important; flex-direction: column !important; text-align: center !important; }
    .product-container { flex-direction: column !important; }
    .product-hero .product-content { max-width: 100% !important; margin-bottom: 40px !important; }
    .product-hero .product-content h1 { font-size: 32px !important; }
    .product-image img { max-width: 70% !important; }

    /* Fix white space by removing bottom padding on mobile */
    .product-overview { padding: 60px 5% 0px !important; }
    .overview-heading h2 { font-size: 34px !important; }
    .overview-wrapper { flex-direction: column !important; gap: 0 !important; }
    .overview-sidebar { width: 100% !important; height: auto !important; flex-direction: row !important; overflow-x: auto !important; padding-bottom: 20px !important; }
    .overview-item { min-width: 220px !important; flex-shrink: 0 !important; }
    .overview-content { height: auto !important; flex-direction: column !important; }
    .overview-image { width: 100% !important; height: 300px !important; }
    .overview-info { width: 100% !important; padding: 30px 20px !important; }
}

@media (max-width: 768px) {
    /* Ensure WHY CHOOSE cards look good on any phone */
    .why-card-head{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:10px !important;
        margin-bottom:12px !important;
        /* Prevent title going above the icon */
        justify-content:flex-start !important;
    }

    .why-icon{
        flex:0 0 auto !important;
        margin:0 !important;
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
    }

    .why-icon i{
        font-size:22px !important;
    }

    .why-card h3{
        flex:1 1 auto !important;
        margin:0 !important;
        font-size:15px !important;
        line-height:1.2 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .why-card p{
        margin:0 !important;
        padding-left:0 !important;
        font-size:12px !important;
        line-height:1.6 !important;
        text-align:left !important;
    }

    /* keep cards compact */
    .why-cards{ gap:12px !important; }
    .why-card{ padding:18px 14px !important; min-width:180px !important; }
}

@media (max-width: 576px) {
    .product-buttons { flex-direction: column !important; gap: 10px !important; }
    .product-btn { width: 100% !important; }
    .why-heading h2 { font-size: 22px !important; }
    .why-card { min-width: 180px !important; }
}


/* About Page Space & UI Optimization */
.about-hero { padding: 80px 6% 60px !important; min-height: auto !important; align-items: center !important; gap: 40px !important; position: relative !important; overflow: hidden !important; background: #f7f9fc !important; margin-bottom: 10px !important; }
.about-hero { background: linear-gradient(135deg, rgba(18, 63, 103, 0.8) 0%, rgba(15, 92, 149, 0.8) 100%), url('../images/aboutbgn.png') center/cover no-repeat !important; margin-bottom: 10px !important; }
.about-hero .about-tag { color: #f47a20 !important; font-weight: 800 !important; background: rgba(255, 255, 255, 0.15) !important; padding: 6px 18px !important; border-radius: 50px !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; display: inline-block !important; margin-bottom: 20px !important; }
.about-hero-content { width: 62% !important; position: relative !important; z-index: 3 !important; }
.about-hero-image { width: 38% !important; position: relative !important; z-index: 3 !important; }
.about-hero-image img { border-radius: 25px !important; max-width: 65% !important; display: block !important; margin: 0 auto !important; }
.about-hero-content h1 { font-size: 44px !important; line-height: 1.1 !important; margin-bottom: 18px !important; color: #ffffff !important; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; font-weight: 800 !important; }
.about-hero-content h1 { font-size: 44px !important; line-height: 1.1 !important; margin-bottom: 18px !important; color: #d1d5da !important; text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important; font-weight: 800 !important; }
.about-hero-content p { font-size: 17px !important; line-height: 1.7 !important; margin-bottom: 30px !important; color: #eff2f6 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important; font-weight: 700 !important; }
.hero-line { margin-bottom: 20px !important; height: 4px !important; width: 80px !important; background: linear-gradient(to right, #f47a20, #ffffff) !important; }

.about-features { display: flex !important; flex-direction: row !important; gap: 12px !important; grid-template-columns: none !important; }
.feature-box { flex: 1 !important; padding: 20px 10px !important; border-radius: 15px !important; text-align: center !important; min-width: 0 !important; }
.feature-box i { width: 44px !important; height: 44px !important; font-size: 18px !important; margin: 0 auto 12px !important; }
.feature-box h4 { font-size: 13px !important; font-weight: 700 !important; margin-bottom: 5px !important; }
.feature-box span { font-size: 11px !important; line-height: 1.3 !important; display: block !important; }

.mission-section { padding: 0px 8% 10px !important; background: #f1f5f9 !important; margin-bottom: 0px !important; }
.mission-container { gap: 20px !important; }
.mission-card { min-height: auto !important; padding: 40px 30px !important; text-align: center !important; border-radius: 15px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 30px rgba(18, 63, 103, 0.05) !important; }
.mission-card h2 { font-size: 24px !important; margin-bottom: 15px !important; color: #123f67 !important; }
.mission-card p { font-size: 14px !important; line-height: 1.6 !important; color: #677384 !important; }
.mission-card:hover { border-color: var(--brand-orange) !important; transform: translateY(-5px) !important; transition: 0.3s ease !important; }

.review-section { padding-top: 10px !important; padding-bottom: 10px !important; margin-bottom: 10px !important; }
.footer { padding-top: 10px !important; }
.footer-contact h3 { margin-bottom: 5px !important; }
.footer-contact .footer-line { margin-bottom: 12px !important; }
.footer-contact .contact-item { margin-bottom: 8px !important; gap: 10px !important; }
.footer-contact .contact-item p { margin-bottom: 0 !important; font-size: 14px !important; line-height: 1.5 !important; }

@media (max-width: 1024px) {
    .about-hero { flex-direction: column !important; text-align: center !important; padding: 15px 5% 10px !important; }
    .about-hero-content, .about-hero-image { width: 100% !important; }
    .hero-line { margin: 0 auto 25px !important; }
    .about-features { flex-wrap: wrap !important; }
    .feature-box { flex: 0 0 calc(50% - 6px) !important; }
    .mission-section { padding: 0px 5% 10px !important; }
    .mission-card { padding: 20px 15px !important; }
    .mission-card h2 { font-size: 22px !important; }
}

.overview-sidebar{
    padding-right:14px;
}

.overview-item{
    width:100%;
    border:none;
    text-align:left;
}

.overview-item h3{
    margin:0;
}

.overview-btn{
    border-radius:999px;
}

.why-choose-section{
    padding:40px 8% 30px !important;
    background:transparent !important;
    

}

.why-choose-shell{
    position:relative;
    background-color: #e8ecf1;
}

.why-spotlight{
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap:22px;
    margin-bottom:28px;
    
    padding:30px;
    border-radius:30px;
    border:1px solid rgba(1, 4, 7, 0.08);
    background:linear-gradient(135deg, rgba(15, 30, 54, 0.94) 0%, rgba(86, 134, 212, 0.98) 100%);
    box-shadow:0 20px 40px rgba(6, 18, 30, 0.06);
    
}

.why-spotlight-tag{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    padding:8px 16px;
    margin-bottom:16px;
    border-radius:999px;
    background:rgba(11, 96, 161, 0.08);
    color:var(--brand-white);
    font-size:12px;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.why-spotlight-copy h3{
    margin:0 0 12px;
    color:#f47a20 !important; 
    font-size:30px;
    line-height:1.2;
    font-weight:800;
}

.why-spotlight-copy p{
    margin:0;
    color:var(--brand-white);
    font-size:15px;
    line-height:1.8;
}

.why-stats{
    display:grid;
    gap:14px;
}

.why-stat{
    padding:20px 22px;
    border-radius:22px;
    background:linear-gradient(180deg, #ffffff 0%, #f5fafe 100%);
    border:1px solid rgba(15,92,149,0.10);
}

.why-stat strong{
    display:block;
    margin-bottom:8px;
    color:var(--brand-blue-deep);
    font-size:18px;
    font-weight:800;
}

.why-stat span{
    display:block;
    color:var(--brand-charcoal-soft);
    font-size:14px;
    line-height:1.6;
}

.why-cards{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
}

.why-card{
    min-width:0 !important;
    padding:28px 24px !important;
    border-radius:26px !important;
    text-align:left;
}

.why-card:hover{
    transform:translateY(-8px) !important;
}

.why-icon{
    margin:0 0 18px !important;
}

.why-card h3{
    margin-bottom:10px !important;
    font-size:18px !important;
}

.why-card p{
    font-size:13px !important;
    line-height:1.7 !important;
}

@media(max-width:1199px){
    .why-spotlight{
        grid-template-columns:1fr;
    }

    .why-cards{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:767px){
    .why-choose-section{
        padding:32px 5% 24px !important;
    }

    .why-spotlight{
        padding:22px;
        border-radius:24px;
    }

    .why-spotlight-copy h3{
        font-size:24px;
    }

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

    .why-card{
        padding:22px 18px !important;
    }
}

/* =========================
   HOME + ABOUT REFRESH
========================= */

.home-hero{
    background:
        radial-gradient(circle at top right, rgba(244,122,32,0.18), transparent 26%),
        linear-gradient(135deg, #eef7ff 0%, #dceefd 55%, #edf6ff 100%) !important;
    min-height:220px !important;
    border-bottom:1px solid rgba(15,92,149,0.08);
}

.home-hero .product-overlay{
    background:
        radial-gradient(circle at 18% 25%, rgba(23,105,198,0.09), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(244,122,32,0.10), transparent 24%);
}

.home-hero .product-tag,
.product-hero .product-tag{
    background:rgba(23,105,198,0.08) !important;
    border-color:rgba(23,105,198,0.14) !important;
    color:#1769c6 !important;
}

.home-hero .product-content h1,
.home-hero .product-content p{
    color:var(--brand-blue-deep) !important;
    text-shadow:none !important;
 
}

.home-about-strip,
.about-intro-strip{
    padding:42px 8% 28px;
    background:linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.home-about-shell{
    max-width:1380px;
    margin:0 auto;
    padding:34px 36px;
    border-radius:30px;
    background:#fff;
    border:1px solid rgba(15,92,149,0.08);
    box-shadow:0 22px 48px rgba(18,63,103,0.07);
}

.home-about-copy{
    text-align:center;
    max-width:1240px;
    margin:0 auto 30px;
}

.home-about-copy p{
    margin:0 0 18px;
    color:#324a63;
    font-size:19px;
    line-height:1.9;
}

.home-about-copy strong{
    color:var(--brand-blue-deep);
}

.home-about-facts{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.home-about-facts .info-box{
    min-height:112px;
    padding:22px 18px;
    border-radius:22px;
}

.home-about-facts .info-content h4{
    font-size:15px;
    margin-bottom:6px;
}

.home-about-facts .info-content p{
    font-size:17px;
}

.why-choose-section{
    padding-top:48px !important;
}

.why-choose-shell::before{
    content:"";
    position:absolute;
    top:32px;
    right:-20px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(57, 3, 71, 0.1) 0%, transparent 68%);
    pointer-events:none;
    animation:whyFloatGlow 6s ease-in-out infinite;
}

.why-heading{
    position:relative;
    z-index:1;
}

.why-spotlight{
    position:relative;
    overflow:hidden;
    animation:whyFloatCard 6.5s ease-in-out infinite;
}

.why-spotlight::after{
    content:"";
    position:absolute;
    inset:auto -40px -90px auto;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(244,122,32,0.14) 0%, transparent 70%);
}

.why-cards{
    position:relative;
    z-index:1;
}

.why-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%) !important;
    box-shadow:0 18px 34px rgba(18,63,103,0.07) !important;
}

.why-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:linear-gradient(90deg, #1769c6 0%, #f47a20 100%);
}

.why-card::after{
    content:"";
    position:absolute;
    right:-32px;
    bottom:-34px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(244,122,32,0.12) 0%, transparent 70%);
    transition:transform 0.35s ease;
}

.why-card-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

.why-icon{
    width:30px !important;
    height:30px !important;
    padding-left: 0px;
    min-width:30px;
    margin-top: 15px !important;
    background:linear-gradient(135deg, #1769c6 0%, #2d88eb 100%) !important;
    box-shadow:0 14px 24px rgba(23,105,198,0.22) !important;
    animation:whyPulseIcon 3.4s ease-in-out infinite;
}

.why-icon i{
    font-size:15px !important;
    
}

.why-card h3{
    margin:0 !important;
}

.why-card p{
    padding-left:10px;
}

.why-card:nth-child(2){
    animation:whyFloatCard 5.4s ease-in-out infinite 0.4s;
}

.why-card:nth-child(3){
    animation:whyFloatCard 5.8s ease-in-out infinite 0.8s;
}

.why-card:nth-child(4){
    animation:whyFloatCard 6.2s ease-in-out infinite 1.1s;
}

.why-card:hover{
    transform:translateY(-10px) scale(1.02) !important;
}

.why-card:hover::after{
    transform:scale(1.15);
}

@keyframes whyFloatCard{
    0%, 100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }
}

@keyframes whyFloatGlow{
    0%, 100%{
        transform:translateY(0) scale(1);
        opacity:1;
    }

    50%{
        transform:translateY(-10px) scale(1.04);
        opacity:0.85;
    }
}

@keyframes whyPulseIcon{
    0%, 100%{
        box-shadow:0 14px 24px rgba(23,105,198,0.22);
    }

    50%{
        box-shadow:0 18px 30px rgba(244,122,32,0.20);
    }
}

.about-hero{
    background:
        radial-gradient(circle at top right, rgba(244,122,32,0.16), transparent 24%),
        linear-gradient(135deg, #edf7ff 0%, #ddebfb 58%, #eef7ff 100%) !important;
    min-height:auto !important;
}

.about-hero-content h1,
.about-hero-content p{
    color:var(--brand-blue-deep) !important;
    text-shadow:none !important;
    
}

.about-hero .about-tag{
    color:#1769c6 !important;
    background:rgba(23,105,198,0.08) !important;
    border-color:rgba(23,105,198,0.14) !important;
}

.about-hero-image img{
    filter:none !important;
    max-width:72% !important;
}

.mission-section{
    background:linear-gradient(180deg, #f5fbff 0%, #eef6fd 100%) !important;
    padding:38px 8% 54px !important;
}

.mission-card{
    background:linear-gradient(180deg, #113c4e 0%, #7abdff 100%) !important;
    padding: 40px 30px !important;
}

.mission-card h2 {
    color: var(--brand-blue-deep) !important;
    font-size: 28px !important;
    margin-bottom: 0 !important;
}

.mission-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.mission-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px;
    font-size: 20px !important;
    margin-bottom: 0 !important;
}

.mission-card p {
    color: #ffffff !important;
    font-size: 15px !important;
}

.about-company{
    padding:10px 0 36px;
    background:linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%);
}

.about-title{
    margin-bottom:44px;
}

.about-title h2{
    font-size:44px;
}

.about-title p{
    font-size:15px;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.about-wrapper{
    gap:34px;
    padding:30px;
    border-radius:30px;
    background:#fff;
    border:1px solid rgba(15,92,149,0.08);
    box-shadow:0 20px 42px rgba(18,63,103,0.08);
}

.about-image img{
    min-height:100%;
}

.about-content-tag{
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    margin-bottom:14px;
    border-radius:999px;
    background:rgba(23,105,198,0.08);
    color:#1769c6;
    font-size:12px;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.about-content h3{
    font-size:40px;
    margin-bottom:8px;
}

.about-content h4{
    font-size:19px;
    margin-bottom:18px;
}

.about-content p{
    font-size:15px;
    line-height:1.85;
    margin-bottom:14px;
}

.fact-box{
    margin-top:26px;
   
    gap:16px;
}

.fact-item{
    padding:22px;
    border:1px solid rgba(15,92,149,0.08);
    
}

.fact-item h5{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.fact-item span{
    font-size:17px;
    font-weight:800;
    color:var(--brand-blue-deep);
}

.factsheet-section{
    padding:18px 0 56px;
    background:linear-gradient(180deg, #f7fbfe 0%, #eef6fb 100%);
}

.factsheet-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 28px;
}

.factsheet-heading span{
    display:block;
    margin-bottom:10px;
    color:#1769c6;
    font-size:13px;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.factsheet-heading h2{
    margin:0 0 12px;
    color:var(--brand-blue-deep);
    font-size:42px;
    font-weight:800;
}

.factsheet-heading p{
    margin:0;
    color:#627486;
    font-size:15px;
    line-height:1.8;
}

.factsheet-shell{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    align-items:stretch;
}

.factsheet-group{
    background:#fff;
    border:1px solid rgba(15,92,149,0.08);
    border-radius:24px;
    box-shadow:0 16px 34px rgba(18,63,103,0.06);
    overflow:hidden;
}

.factsheet-group h3{
    margin:0;
    padding:15px 20px;
    font-size:20px;
    font-weight:800;
    color:var(--brand-blue-deep);
    background:linear-gradient(180deg, #f8fbfe 0%, #eef6fb 100%);
    border-bottom:1px solid rgba(15,92,149,0.08);
}

.factsheet-rows{
    display:grid;
}

.factsheet-row{
    display:grid;
    grid-template-columns:minmax(220px, 0.9fr) minmax(0, 1fr);
    gap:18px;
    padding:12px 20px;
    border-top:1px solid rgba(15,92,149,0.08);
}

.factsheet-row:first-child{
    border-top:none;
}

.factsheet-row span{
    color:#6a7d90;
    font-size:14px;
}

.factsheet-row strong{
    color:#1f3751;
    font-size:14px;
    line-height:1.7;
    font-weight:700;
}

@media(max-width:991px){
    .home-about-facts{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .home-about-shell{
        padding:26px 20px;
    }

    .why-card p{
        padding-left:0;
    }

    .about-wrapper{
        padding:22px;
    }

    .factsheet-row{
        grid-template-columns:1fr;
        gap:10px;
    }

    .factsheet-shell{
        grid-template-columns:1fr;
    }
}

@media(max-width:767px){
    .home-about-strip,
    .about-intro-strip{
        padding:28px 5% 18px;
    }

    .home-about-copy p{
        font-size:16px;
    }

    .home-about-facts{
        grid-template-columns:1fr;
    }

    .home-about-facts .info-box{
        min-height:auto;
    }

    .why-card-head{
        align-items:flex-start;
    }

    .why-icon{
        width:48px !important;
        height:48px !important;
        min-width:48px;
    }

    .about-title h2,
    .factsheet-heading h2{
        font-size:32px;
    }

    .about-content h3{
        font-size:30px;
    }

    .factsheet-group h3{
        font-size:22px;
        padding:18px 18px;
    }

    .factsheet-row{
        padding:10px 15px;
    }

    .fact-box { margin-top: 15px !important; gap: 10px !important; }
    .fact-item { padding: 15px !important; }

    .footer { padding: 20px 0 0 !important; }
    .footer-container { padding-bottom: 10px !important; }
    .footer-about, 
    .footer-services, 
    .footer-contact { 
        margin-bottom: 15px !important; 
    }
    .footer-bottom { 
        margin-top: 5px !important; 
        padding: 10px 0 5px !important; 
    }
    .footer-logo img { height: 50px !important; margin-bottom: 10px !important; }
}
.home-hero-bg-slide.slide-8 { background-image: url('../images/BoschAL-FR-F150.png'); }

.home-hero-bg-slide.slide-1 { background-image: url('../images/product-herobg.png'); }
.home-hero-bg-slide.slide-7 { background-image: url('../images/simpleinjnozzle.png'); }

/* =========================
   FINAL HERO VISIBILITY FIX
========================= */

.home-hero.product-hero {
    background: none !important;
}

.home-hero .product-content h1,
.home-hero .product-content p{
    color:#555555 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.home-hero .product-tag{
    background:rgba(255,255,255,0.36) !important;
}

.about-hero{
    background:
        linear-gradient(135deg, rgba(237,247,255,0.2) 0%, rgba(221,235,251,0.18) 58%, rgba(238,247,255,0.2) 100%),
        url('../images/aboutprofile.png') center/cover no-repeat !important;
}

.about-hero-content h1,
.about-hero-content p{
    color:#0b2545 !important;
    font-weight: 800 !important;
    text-shadow:0 1px 0 rgba(255,255,255,0.28) !important;
}

.about-hero .about-tag{
    background:rgba(255,255,255,0.42) !important;
}

/* =========================
   FINAL WHY CHOOSE BACKDROP
========================= */

.why-choose-section{
    position:relative;
    background:
        linear-gradient(135deg, rgba(244,249,255,0.94) 0%, rgba(232,242,251,0.96) 100%),
        url('../images/homebg.png') center/cover no-repeat !important;
}

.why-spotlight{
    backdrop-filter:blur(6px);
}

/* =========================
   HOME HERO CENTERING FIX
========================= */
.home-hero.product-hero {
    padding: 0 !important;
    min-height: auto !important;
}

/* =========================
   FINAL HERO ALIGNMENT
========================= */

.home-hero .product-container,
.product-hero .hero-container{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.home-hero .product-content,
.product-hero .hero-content,
.about-hero-content,
.photos-hero__content,
.contact-hero-content{
    max-width:920px !important;
    width:100%;
    margin:0 auto;
    text-align:center !important;
}

.home-hero .product-content p {
    /* Centers the paragraph block itself because it has a max-width */
    margin-left: auto !important;
    margin-right: auto !important;
}

.home-hero .product-buttons {
    /* Centers the flex buttons horizontally */
    justify-content: center !important;
}

.product-hero .hero-content{
    padding-left:0 !important;
}

.product-hero .hero-image,
.about-hero-image{
    display:none !important;
}

.product-hero .hero-line,
.about-hero .hero-line{
    margin-left:auto !important;
    margin-right:auto !important;
}

.home-hero {
    padding: 0 !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    background: none !important;
}

.home-hero .product-container {
    max-width: 100% !important;
    margin: 0;
    padding: 0 !important;
}

.home-hero-slider {
    
    width: 100%;
    max-width: 100% !important;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.hero-slider.carousel-inner {
    height: 500px !important;
    border-radius: 0 !important;
    background: none;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(15,92,149,0.08) !important;
}

.slider-slide.carousel-item {
    height: 500px !important;
    padding: 0 !important;
    background: none;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden;
}

.home-hero .product-content h1 {
    font-size: 34px !important;
    color: #0b2545 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.home-hero .product-content p {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

@media(max-width: 992px) {
    .hero-slider.carousel-inner, .slider-slide.carousel-item {
        height: 420px !important;
    }
    .home-hero .product-content h1 { font-size: 32px !important; }
    .amazon-bottom-fade { height: 150px; }
}

@media(max-width: 768px) {
    .hero-overlay-container {
        padding: 0 5%;
        align-items: flex-start;
        padding-top: 40px;
    }
    .hero-slider.carousel-inner, .slider-slide.carousel-item {
        height: 340px !important;
    }
    .slider-dots.carousel-indicators { bottom: 120px; }
}

.slider-slide.carousel-item {
    min-width:100%;
    height:500px !important;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
    padding: 0 !important;
}

.slider-slide.carousel-item.active,
.slider-slide.carousel-item-next,
.slider-slide.carousel-item-prev {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.slide-visual {
    width: 100%;
    height: 360px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 25px;
    flex-shrink: 0;
}

.slide-caption {
    width: 100%;
    height: 140px !important;
    padding: 10px 20px 25px;
    text-align: center;
    background: none;
    border-top: 1px solid rgba(15,92,149,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    z-index: 5;
}

.slide-title {
    font-size: 24px;
    font-weight: 700;
    color: #123f67;
    margin-bottom: 14px;
}

.slide-button {
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    background: #f47a20 !important;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease;
}

.slide-button:hover {
    background: var(--brand-blue-deep);
}

.slider-slide.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display:block;
    margin: auto;
    object-fit:contain;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.35));
}

.slider-control.carousel-control-prev,
.slider-control.carousel-control-next {
    width:54px !important;
    height:54px !important;
    border-radius:50%;
    border:none;
    background:var(--brand-blue-deep) !important;
    color:#ffffff;
    box-shadow:0 10px 25px rgba(0,0,0,0.2) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    transition:all 0.3s ease;
    top: 180px !important; /* Center arrows on the 360px image area, above the caption */
    transform: translateY(-50%);
    opacity: 1 !important;
    position: absolute;
    z-index: 1050 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    visibility: visible !important;
    display: flex !important;
}

.slider-control .carousel-control-prev-icon,
.slider-control .carousel-control-next-icon {
    width: 24px;
    height: 24px;
    filter: brightness(1);
}

.slider-control.carousel-control-prev {
    left: 40px !important;
}

.slider-control.carousel-control-next {
    right: 40px !important;
}

.slider-control:hover {
    transform: translateY(-50%) scale(1.1) !important;
    background:var(--brand-orange) !important;
}

.slider-dots.carousel-indicators {
    position: absolute !important;
    bottom: 15px !important; /* Position below the caption */
    margin: 0 auto;
    gap: 10px;
    z-index: 10;
}

.slider-dots.carousel-indicators [data-bs-target] {
    width:12px;
    height:6px;
    border-radius:999px;
    background:rgba(18, 63, 103, 0.3) !important;
    border:none;
    cursor:pointer;
    transition:all 0.3s ease;
    opacity: 1;
    margin: 0;
}

.slider-dots.carousel-indicators .active {
    width:32px;
    background:var(--brand-orange) !important;
}

@media(max-width:992px) {
    .home-hero .product-container {
        flex-direction:column;
        text-align:center;
    }

    .home-hero .product-content {
        max-width:100%;
        text-align:center !important;
    }

    .home-hero .product-buttons {
        justify-content:center !important;
    }

    .hero-slider.carousel-inner,
    .slider-slide.carousel-item {
        height:340px !important;
    }

    .slider-control {
        display:none !important;
    }
}

.about-hero{
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

.about-hero-image{
    width:100% !important;
    display:flex;
    justify-content:center;
}

.photos-hero {
    background:
        linear-gradient(135deg, rgba(237,247,255,0.2) 0%, rgba(221,235,251,0.18) 58%, rgba(238,247,255,0.2) 100%),
        url('../images/photosbg.png') center/cover no-repeat !important;
    min-height: auto !important;
    padding: 100px 8% 80px !important;
    display: flex;
}

.photos-hero__content h1,
.photos-hero__content p {
    color: #0b2545 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.photos-hero,
.contact-hero{
    justify-content:center;
    text-align:center;
}

.home-company-profile{
    padding: 0px 8% 10px;
    /* Dark Sky Blue Design */
    
    position: relative;
    overflow: hidden;
}

.home-company-shell {
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 45px;
    border-radius: 40px;
    background: linear-gradient(135deg, #7ab3eb 0%, #051e3d 100%); /* Inner shell dark blue */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border for dark background */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2); /* Darker shadow for dark background */
}

.home-company-head{
    text-align:center;
    max-width:760px;
    margin: 0 auto 50px;
}

.home-company-head span{
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    margin-bottom:14px;
    border-radius:999px;
    background:rgba(244,122,32,0.10);
    color:#c97a00;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.home-company-head h2 {
    margin:0 0 14px;
    color: var(--brand-blue-deep);
    font-size: 42px;
    line-height:1.15;
    font-weight:800;
}

.home-company-head p {
    margin:0;
    color:#ffffff;
    font-size:15px;
    line-height:1.8;
}

.home-company-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 0.95fr);
    gap: 40px;
    align-items:center;
}

.home-company-copy h3 {
    margin:0 0 18px;
    color: var(--brand-blue-deep);
    font-size: 28px;
    line-height: 1.35;
    font-weight:800;
}

.home-company-copy p {
    margin:0 0 14px;
    color:#ffffff;
    font-size:15px;
    line-height:1.8;
}

.home-company-points {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:18px;
}

.home-company-point {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding: 15px 18px;
    border-radius: 15px;
    background: #fff;
    border:1px solid rgba(23,105,198,0.08);
    box-shadow: 0 8px 20px rgba(18, 63, 103, 0.04);
}

.home-company-point i{
    color:#f47a20;
    margin-top:3px;
}

.home-company-point span{
    color:#0a2039;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
}

.home-company-visual img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 18px 34px rgba(18,63,103,0.12);
}

.factsheet-shell{
    grid-template-columns:repeat(3, 1fr) !important;
    align-items: stretch !important;
}

/* Responsive factsheet */
@media(max-width:991px){
    .factsheet-shell{ grid-template-columns:1fr !important; }
}


.factsheet-group{
    height:100%;
}

.factsheet-row{
    grid-template-columns:minmax(150px, 0.82fr) minmax(0, 1fr) !important;
}

@media(max-width:991px){
    .home-company-profile{
        padding:0 5% 16px;
    }

    .home-company-shell{
        padding:0 18px 24px;
    }

    .home-company-layout{
        grid-template-columns:1fr;
    }

    .home-company-head h2{
        font-size:34px;
    }

    .home-company-points{
        grid-template-columns:1fr;
    }
}

/* =========================
   FINAL RESPONSIVE SAFETY
========================= */

img{
    max-width:100%;
    height:auto;
}

/* =========================
   FINAL FIXED NAVBAR + HOME UI FIXES
========================= */

html{
    scroll-padding-top:86px;
}

body{
    padding-top:86px;
}

#header{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:100;
    height: auto !important;
}

#header .custom-navbar{
    position:relative !important;
    width:100%;
    min-height:70px !important;
    backdrop-filter:saturate(140%) blur(10px);
}

#header .brand-logo{
    max-height:80px !important;
    height:90px !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:none !important;
}

.home-hero.product-hero{
    margin-top:0 !important;
}

.customer-stats-section{
    width:100%;
    padding:30px 8% 36px !important;
    background:linear-gradient(180deg,#ffffff 0%,#edf6fb 100%) !important;
}

.customer-stats-shell{
    max-width:1220px;
    margin:0 auto;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.customer-stat{
    display:flex !important;
    min-height:132px;
    padding:22px 18px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid rgba(15,92,149,0.12);
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 14px 30px rgba(18,63,103,0.08);
}

.customer-stat .counter{
    display:block;
    margin-bottom:10px;
    color:#f47a20;
    font-size:40px;
    line-height:1;
    font-weight:900;
}

.customer-stat strong{
    display:block;
    color:#123f67;
    font-size:16px;
    line-height:1.35;
    font-weight:800;
}

.floating-whatsapp,
.scroll-top-button{
    position:fixed;
    right:22px;
    z-index:9999;
    width:58px;
    height:58px;
    border:none;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    text-decoration:none;
    box-shadow:0 14px 30px rgba(18,63,103,0.24);
    cursor:pointer;
    transition:transform 0.25s ease, opacity 0.25s ease;
}

.floating-whatsapp{
    bottom:90px;
    border-radius:50%;
    background:#25d366;
}

.floating-whatsapp i{
    font-size:31px;
}

.scroll-top-button{
    bottom:22px;
    background:#4b168b;
}

.scroll-top-button i{
    font-size:30px;
}

.floating-whatsapp:hover,
.scroll-top-button:hover{
    color:#ffffff;
    transform:translateY(-4px);
}

@media(max-width:991px){
    body{
        padding-top:60px;
    }

    html{
        scroll-padding-top:60px;
    }

    #header .custom-navbar{
        min-height:60px !important;
    }

    #header .brand-logo{
        max-height:60px !important;
        height:60px !important;
    }

    .customer-stats-section{
        padding:26px 5% 30px !important;
    }

    .customer-stats-shell{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-hero {
        margin-bottom: 0 !important;
    }
}

@media(max-width:576px){
    .customer-stats-shell{
        grid-template-columns:1fr;
    }

    .customer-stat{
        min-height:auto;
        padding:20px 16px;
    }

    .floating-whatsapp,
    .scroll-top-button{
        right:16px;
        width:52px;
        height:52px;
    }

    .floating-whatsapp{
        bottom:78px;
    }

    .scroll-top-button{
        bottom:16px;
    }
}