/* ==========================================
   PAGE LUBES
   COMPONENTS.CSS
========================================== */


/* ==========================================
   PRODUCT CARD
========================================== */

.card-product{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:all .35s ease;

    height:100%;

    cursor:pointer;

}

.card-product:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.card-product img{

    width:100%;

    height:280px;

    object-fit:cover;

}

.card-product .content{

    padding:30px;

}

.card-product i{

    font-size:48px;

    color:var(--primary);

    margin-bottom:18px;

}

.card-product h4{

    margin-bottom:15px;

}

.card-product p{

    margin:0;

}



/* ==========================================
   BRAND CARD
========================================== */

.card-brand{

    background:var(--dark-2);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:35px 15px;

    text-align:center;

    transition:all .35s ease;

    height:100%;

}

.card-brand:hover{

    background:var(--primary);

    color:#111;

    transform:translateY(-8px);

}

.card-brand h4{

    color:#fff;

    margin-bottom:10px;

}

.card-brand:hover h4{

    color:#111;

}

.card-brand small{

    color:#ccc;

}

.card-brand:hover small{

    color:#222;

}



/* ==========================================
   INDUSTRY CARD
========================================== */

.card-industry{

    background:#fff;

    border-radius:20px;

    padding:35px;

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

    text-align:center;

    transition:all .35s ease;

    height:100%;

}

.card-industry:hover{

    transform:translateY(-8px);

}

.card-industry i{

    font-size:52px;

    color:var(--primary);

    margin-bottom:18px;

}

.card-industry h4{

    margin-bottom:15px;

}



/* ==========================================
   FEATURE BOX
========================================== */

.feature-item{

    display:flex;

    gap:18px;

    margin-bottom:30px;

}

.feature-item i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

}

.feature-item h5{

    margin-bottom:8px;

}



/* ==========================================
   GALLERY
========================================== */

.gallery-item{

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.gallery-item img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:transform .5s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* ==========================================
   CTA SECTION
========================================== */

.cta-section{

    position:relative;

    background:linear-gradient(135deg,var(--primary),#F4C430);

    border-radius:24px;

    padding:70px;

    overflow:hidden;

    color:#111;

}

.cta-section::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    background:rgba(255,255,255,.15);

    border-radius:50%;

    top:-120px;

    right:-120px;

}

.cta-section h2{

    font-size:2.6rem;

    margin-bottom:20px;

}

.cta-section p{

    color:#333;

    font-size:1.05rem;

}



/* ==========================================
   STATISTICS
========================================== */

.stat-box{

    padding:30px;

    text-align:center;

}

.stat-box h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:10px;

}

.stat-box p{

    color:#ddd;

    margin:0;

}



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

.image-card{

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.image-card img{

    width:100%;

    transition:.5s;

}

.image-card:hover img{

    transform:scale(1.08);

}



/* ==========================================
   FOOTER
========================================== */

.footer{

    background:var(--dark);

}

.footer h4,
.footer h5{

    color:white;

}

.footer p{

    color:#BFC7CF;

}

.footer-link{

    color:#BFC7CF;

    display:block;

    padding:8px 0;

    transition:.3s;

}

.footer-link:hover{

    color:var(--primary);

    padding-left:10px;

}



/* ==========================================
   WHATSAPP FLOAT
========================================== */

.whatsapp-float{

    position:fixed;

    right:30px;

    bottom:30px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

    text-decoration:none;

    box-shadow:0 18px 35px rgba(0,0,0,.25);

    transition:.35s;

}

.whatsapp-float:hover{

    transform:translateY(-6px);

}



/* ==========================================
   BACK TO TOP
========================================== */

.back-to-top{

    position:fixed;

    right:32px;

    bottom:115px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#111;

    cursor:pointer;

    display:none;

    box-shadow:0 12px 25px rgba(0,0,0,.25);

    z-index:999;

}

.back-to-top:hover{

    background:var(--primary-dark);

    color:white;

}



/* ==========================================
   GLASS EFFECT
========================================== */

.glass{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.18);

}



/* ==========================================
   SECTION SPACING
========================================== */

.section-padding{

    padding:110px 0;

}

/* ==========================================
   PREMIUM NAVBAR
========================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1050;

    padding:18px 0;

    transition:all .35s ease;

    background:transparent;

}

.navbar.scrolled{

    background:rgba(17,24,39,.92);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 10px 35px rgba(0,0,0,.25);

    padding:10px 0;

    border-bottom:1px solid rgba(255,193,7,.20);

}

/* Logo */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.navbar-logo{

    width:60px;

    transition:.35s;

}

.navbar.scrolled .navbar-logo{

    width:52px;

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-text h4{

    margin:0;

    color:#FFC107;

    font-size:1.45rem;

    font-weight:700;

    letter-spacing:.5px;

}

.brand-text span{

    color:#F5F5F5;

    font-size:.82rem;

    letter-spacing:.3px;

}

/* Navigation */

.navbar-nav{

    gap:4px;

}

.nav-link{

    color:#fff !important;

    font-weight:500;

    padding:18px 18px 14px !important;

    margin:0 6px;

    border-bottom:2px solid transparent;

    transition:color .30s ease,
               border-color .30s ease;

}

.nav-link:hover{

    color:#FFC107 !important;

    border-bottom-color:#FFC107;

}

.nav-link.active{

    color:#FFC107 !important;

}

/* Call Button */

.nav-call-btn{

    border-radius:40px;

    padding:10px 20px;

    min-width:170px;

    text-align:center;

    font-weight:600;

    transition:.3s;

}

.nav-call-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(255,193,7,.35);

}

/* Mobile */

@media(max-width:991px){

    .navbar{

        background:rgba(17,24,39,.97);

    }

    .navbar-collapse{

        margin-top:18px;

    }

    .navbar-nav{

        gap:4px;

    }

    .nav-call-btn{

        margin-top:15px;

        width:100%;

    }

}

/* ==========================================
   PAGE LUBES NAVBAR BRAND LOGO
========================================== */

.navbar-brand-logo {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 30px;
}