/*=========================================
            HERO SLIDER
=========================================*/

.hero-slider{
    margin:20px 0;
}

.hero-slider .carousel{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.hero-slider .carousel-item{
    position:relative;
}

.hero-slider .carousel-item img{
    width:100%;
    height:450px;
    object-fit:cover;
}

/* Overlay */

.hero-slider .carousel-item::before{

    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(0,0,0,.15) 65%,
        rgba(0,0,0,0) 100%
    );

}

/*=========================================
            Caption
=========================================*/

.carousel-caption{

    position:absolute;

    left:80px;

    top:50%;

    transform:translateY(-50%);

    width:520px;

    z-index:5;

    bottom:auto;

    right:auto;

    text-align:left;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    flex-direction:column;

}

.caption-box{

    width:100%;

    margin:0;

    padding:0;

}

/*=========================================
            Offer Badge
=========================================*/

.offer-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 24px;

    background:#0d6efd;

    color:#fff;

    border-radius:40px;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

/*=========================================
            Heading
=========================================*/

.carousel-caption h1{

    color:#fff;

    font-size:54px;

    font-weight:800;

    line-height:1.08;

    margin:18px 0;

    letter-spacing:-1px;

    text-shadow:0 3px 12px rgba(0,0,0,.35);

}

.carousel-caption h1 span{

    color:#FFD54F;

}

/*=========================================
            Description
=========================================*/

.carousel-caption p{

    color:#fff;

    font-size:19px;

    line-height:1.7;

    margin-bottom:25px;

    max-width:500px;

    text-shadow:0 2px 10px rgba(0,0,0,.35);

}

/*=========================================
            Features
=========================================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.hero-features span{

    display:flex;

    align-items:center;

    gap:7px;

    color:#fff;

    font-size:15px;

    font-weight:500;

}

.hero-features i{

    color:#FFD54F;

}

/*=========================================
            Buttons
=========================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}

.hero-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    height:52px;

    border-radius:40px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.hero-btn-primary{

    background:#0d6efd;

    color:#fff;

}

.hero-btn-primary:hover{

    background:#0046bf;

    color:#fff;

    transform:translateY(-4px);

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

}

.hero-btn-outline{

    border:2px solid #fff;

    color:#fff;

}

.hero-btn-outline:hover{

    background:#fff;

    color:#111;

}

/*=========================================
        CAROUSEL CONTROLS
=========================================*/

.carousel-control-prev,
.carousel-control-next{
    width:70px;
    opacity:1;
    z-index:10;
}

.control-button{
    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

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

    color:#fff;

    font-size:22px;

    transition:.35s ease;
}

.control-button:hover{

    background:#0d6efd;

    transform:scale(1.08);

    box-shadow:0 8px 20px rgba(13,110,253,.35);

}

/*=========================================
        INDICATORS
=========================================*/

.carousel-indicators{

    bottom:18px;

    margin-bottom:0;

}

.carousel-indicators button{

    width:12px !important;

    height:12px !important;

    border-radius:50%;

    margin:0 6px;

    background:#fff;

    opacity:.7;

    transition:.3s;

}

.carousel-indicators button.active{

    background:#0d6efd;

    width:28px !important;

    border-radius:20px;

    opacity:1;

}

/*=========================================
        TABLET
=========================================*/

@media (max-width:991px){

.hero-slider{

    margin:15px;

}

.hero-slider .carousel{

    border-radius:15px;

}

.hero-slider .carousel-item img{

    height:360px;

}

.carousel-caption{

    width:420px;

    left:40px;

}

.offer-badge{

    font-size:13px;

    padding:8px 18px;

}

.carousel-caption h1{

    font-size:38px;

    line-height:1.15;

}

.carousel-caption p{

    font-size:16px;

    margin-bottom:20px;

}

.hero-features{

    display:none;

}

.hero-buttons{

    gap:10px;

}

.hero-btn{

    min-width:145px;

    height:46px;

    font-size:14px;

}

.control-button{

    width:48px;

    height:48px;

    font-size:18px;

}

}/*=========================================
        TABLET (577px - 991px)
=========================================*/

@media (max-width:991px){

    .hero-slider{
        margin:15px;
    }

    .hero-slider .carousel{
        border-radius:15px;
    }

    .hero-slider .carousel-item img{
        width:100%;
        height:360px;
        object-fit:cover;
    }

    /* Caption */
    .carousel-caption{
        position:absolute;
        top:50%;
        left:40px;
        right:40px;
        transform:translateY(-50%);
        width:auto;
        max-width:480px;
        text-align:left;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
    }

    /* Offer Badge */
    .offer-badge{
        font-size:13px;
        padding:7px 18px;
        margin-bottom:12px;
    }

    /* Heading */
    .carousel-caption h1{
        font-size:clamp(30px,4vw,40px);
        line-height:1.15;
        margin:10px 0;
        letter-spacing:-0.5px;
    }

    /* Description */
    .carousel-caption p{
        font-size:15px;
        line-height:1.6;
        margin-bottom:18px;
        max-width:420px;
    }

    /* Features */
    .hero-features{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-bottom:20px;
    }

    .hero-features span{
        font-size:13px;
    }

    /* Buttons */
    .hero-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .hero-btn{
        min-width:140px;
        height:44px;
        padding:0 22px;
        font-size:14px;
    }

    /* Controls */
    .carousel-control-prev,
    .carousel-control-next{
        width:55px;
    }

    .control-button{
        width:46px;
        height:46px;
        font-size:18px;
    }

    /* Indicators */
    .carousel-indicators{
        bottom:12px;
    }

    .carousel-indicators button{
        width:10px !important;
        height:10px !important;
    }

    .carousel-indicators button.active{
        width:24px !important;
    }

}


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

/*=========================================
        MOBILE (576px)
=========================================*/

@media (max-width:576px){

    .hero-slider{
        margin:10px;
    }

    .hero-slider .carousel{
        border-radius:12px;
    }

    .hero-slider .carousel-item img{
        width:100%;
        height:260px;
        object-fit:cover;
    }

    .carousel-caption{
        position:absolute;
        top:50%;
        left:18px;
        right:18px;
        transform:translateY(-50%);
        width:auto;
        max-width:55%;
        text-align:left;
        align-items:flex-start;
    }

    .offer-badge{
        display:inline-flex;
        align-items:center;
        gap:5px;
        font-size:10px;
        padding:5px 12px;
        margin-bottom:8px;
    }

    .carousel-caption h1{
        font-size:clamp(20px,6vw,28px);
        line-height:1.15;
        margin:8px 0;
        font-weight:700;
        letter-spacing:-0.5px;
    }

    .carousel-caption p{
        display:none;
    }

    .hero-features{
        display:none;
    }

    .hero-buttons{
        display:flex;
        gap:8px;
        margin-top:8px;
        flex-wrap:wrap;
    }

    .hero-btn{
        min-width:105px;
        height:36px;
        padding:0 14px;
        font-size:12px;
        border-radius:30px;
    }

    .carousel-control-prev,
    .carousel-control-next{
        display:none;
    }

    .carousel-indicators{
        bottom:8px;
    }

    .carousel-indicators button{
        width:8px !important;
        height:8px !important;
        margin:0 4px;
    }

    .carousel-indicators button.active{
        width:20px !important;
    }

}

/*=========================================
        MOBILE (425px)
=========================================*/

@media (max-width:425px){

    .hero-slider .carousel-item img{
        height:240px;
    }

    .carousel-caption{
        left:15px;
        right:15px;
        max-width:50%;
    }

    .offer-badge{
        font-size:9px;
        padding:4px 10px;
    }

    .carousel-caption h1{
        font-size:22px;
        line-height:1.1;
    }

    .hero-btn{
        min-width:95px;
        height:34px;
        font-size:11px;
        padding:0 12px;
    }

}

/*=========================================
        SMALL MOBILE (380px)
=========================================*/

/*=========================================
        SMALL MOBILE (380px)
=========================================*/

@media (max-width:380px){

    .hero-slider{
        margin:8px;
    }

    .hero-slider .carousel{
        border-radius:12px;
    }

    .hero-slider .carousel-item img{
        height:220px;
        object-fit:cover;
    }

    .carousel-caption{
        position:absolute;
        top:50%;
        left:12px;
        right:12px;
        transform:translateY(-50%);
        width:72%;
        max-width:72%;
        text-align:left;
        align-items:flex-start;
    }

    .offer-badge{
        display:none;
    }

    .carousel-caption h1{
        font-size:20px;
        line-height:1.05;
        font-weight:800;
        margin:0 0 8px;
        letter-spacing:-0.5px;
    }

    .carousel-caption h1 span{
        display:block;
        color:#FFD54F;
    }

    .carousel-caption p{
        display:none;
    }

    .hero-features{
        display:none;
    }

    .hero-buttons{
        display:flex;
        gap:6px;
        margin-top:8px;
        flex-wrap:wrap;
    }

    .hero-btn{
        min-width:90px;
        height:32px;
        font-size:11px;
        padding:0 12px;
        border-radius:25px;
    }

    .carousel-control-prev,
    .carousel-control-next{
        display:none;
    }

    .carousel-indicators{
        bottom:6px;
    }

    .carousel-indicators button{
        width:7px !important;
        height:7px !important;
    }

    .carousel-indicators button.active{
        width:18px !important;
    }

}

/*=========================================
        ANIMATIONS
=========================================*/

.carousel-item.active .offer-badge{
    animation:fadeDown .8s ease;
}

.carousel-item.active h1{
    animation:fadeLeft .9s ease;
}

.carousel-item.active p{
    animation:fadeLeft 1s ease;
}

.carousel-item.active .hero-features{
    animation:fadeUp 1.1s ease;
}

.carousel-item.active .hero-buttons{
    animation:fadeUp 1.2s ease;
}

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(-40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/*=========================================
            COLLECTIONS
=========================================*/

.collections-section{

    padding:70px 0;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:45px;

}

.section-title h2{

    font-size:38px;

    font-weight:700;

    color:#111;

    margin-bottom:8px;

}

.section-title p{

    color:#666;

    font-size:16px;

}

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

.collection-card{

    display:block;

    text-align:center;

    text-decoration:none;

    transition:.35s;

}

.collection-image{

    height:220px;

    background:#f8f9fb;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #ececec;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    transition:.35s;

}

/* Product Image */

.collection-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

/* Product Name */

.collection-card h5{

    margin-top:16px;

    font-size:17px;

    color:#222;

    font-weight:600;

}

/* Hover */

.collection-card:hover{

    transform:translateY(-8px);

}

.collection-card:hover .collection-image{

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

}

.collection-card:hover img{

    transform:scale(1.08);

}

/*=====================================
        TABLET
=====================================*/

@media(max-width:991px){

.collections-section{

    padding:60px 0;

}

.collection-image{

    height:180px;

}

.collection-card h5{

    font-size:15px;

}

}

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

@media(max-width:576px){

.collections-section{

    padding:40px 0;

}

.section-title{

    margin-bottom:30px;

}

.section-title h2{

    font-size:28px;

}

.collection-image{

    height:145px;

    border-radius:12px;

}

.collection-card h5{

    font-size:13px;

    margin-top:10px;

}

}
/*=========================================
        ESSENTIAL PARTS
=========================================*/

.essential-parts{

    padding:80px 0;

    background:#fafafa;

}

.section-heading{

    text-align:center;

    margin-bottom:50px;

}

.section-heading span{

    display:inline-block;

    background:#eaf3ff;

    color:#0d6efd;

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    font-size:14px;

    margin-bottom:15px;

}

.section-heading h2{

    font-size:40px;

    font-weight:700;

    color:#111;

}

.section-heading p{

    color:#777;

    margin-top:10px;

}

/* Card */

.part-card{

    display:block;

    text-decoration:none;

    text-align:center;

    transition:.35s;

}

/* Image */

.part-image{

    height:220px;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    border:1px solid #ececec;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.35s;

}

.part-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

/* Title */

.part-card h5{

    margin-top:16px;

    font-size:16px;

    font-weight:600;

    color:#222;

}

/* Hover */

.part-card:hover{

    transform:translateY(-8px);

}

.part-card:hover .part-image{

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

    border-color:#0d6efd;

}

.part-card:hover img{

    transform:scale(1.08);

}

/* Tablet */

@media(max-width:991px){

.part-image{

    height:180px;

}

}

/* Mobile */

@media(max-width:576px){

.essential-parts{

    padding:50px 0;

}

.section-heading h2{

    font-size:30px;

}

.part-image{

    height:150px;

    border-radius:12px;

}

.part-card h5{

    font-size:14px;

}

}

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

.features-section{

    padding:70px 0;

    background:#f8f9fb;

}

/* Card */

.feature-box{

    background:#fff;

    border-radius:18px;

    padding:30px 22px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    height:100%;

    border:1px solid #ececec;

    transition:.35s;

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

}

/* Hover */

.feature-box:hover{

    transform:translateY(-8px);

    border-color:#0d6efd;

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

}

/* Icon */

.feature-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:50%;

    background:#eaf3ff;

    color:#0d6efd;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    transition:.35s;

}

.feature-box:hover .feature-icon{

    background:#0d6efd;

    color:#fff;

    transform:rotate(8deg);

}

/* Content */

.feature-content h5{

    font-size:20px;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

}

.feature-content p{

    margin:0;

    color:#666;

    line-height:1.7;

    font-size:15px;

}

/* Tablet */

@media(max-width:991px){

.feature-box{

    padding:25px 20px;

}

.feature-icon{

    width:60px;

    height:60px;

    min-width:60px;

    font-size:26px;

}

.feature-content h5{

    font-size:18px;

}

}

/* Mobile */

@media(max-width:576px){

.features-section{

    padding:50px 0;

}

.feature-box{

    flex-direction:column;

    text-align:center;

    align-items:center;

    padding:25px 18px;

}

.feature-content h5{

    margin-top:8px;

}

}

/*=========================================
        DEAL SECTION
=========================================*/

.deal-section{

    padding:70px 0;

    background:#fff;

    overflow:hidden;

}

.deal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.deal-header h2{

    font-size:38px;

    font-weight:700;

}

.deal-header a{

    text-decoration:none;

    color:#0d6efd;

    font-weight:600;

}

/* Slider */

.deal-slider{

    overflow:hidden;

    position:relative;

}

/* Animation */

.deal-track{

    display:flex;

    gap:25px;

    width:max-content;

    animation:scrollDeals 30s linear infinite;

}

.deal-slider:hover .deal-track{

    animation-play-state:paused;

}

/* Card */

.product-card{

    width:260px;

    flex-shrink:0;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #ececec;

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

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-10px);

}

/* Image */

.product-image{

    position:relative;

    background:#f8f9fa;

}

.product-image img{

    width:100%;

    height:220px;

    object-fit:contain;

}

/* Discount */

.discount{

    position:absolute;

    top:12px;

    right:12px;

    background:#ff3b30;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

/* Product */

.product-card h5{

    padding:18px 18px 10px;

    font-size:16px;

    line-height:1.5;

    height:70px;

}

/* Price */

.price{

    padding:0 18px;

}

.new-price{

    color:#d10000;

    font-size:24px;

    font-weight:700;

}

.old-price{

    text-decoration:line-through;

    color:#999;

    margin-left:8px;

}

/* Stock */

.stock{

    padding:14px 18px;

    color:#198754;

    font-size:15px;

}

.stock i{

    margin-right:6px;

}

/* Button */

.deal-btn{

    display:block;

    margin:0 18px 20px;

    text-align:center;

    background:#0d6efd;

    color:#fff;

    padding:14px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.deal-btn:hover{

    background:#0046bf;

    color:#fff;

}

/* Infinite Animation */

@keyframes scrollDeals{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* Tablet */

@media(max-width:991px){

.product-card{

    width:220px;

}

}

/* Mobile */

@media(max-width:576px){

.deal-header h2{

    font-size:28px;

}

.product-card{

    width:180px;

}

.product-image img{

    height:160px;

}

.product-card h5{

    font-size:14px;

    height:60px;

}

.new-price{

    font-size:18px;

}

.deal-btn{

    padding:10px;

}

}
/*=========================================
        PRODUCT IMAGE
=========================================*/

.product-image{

    position:relative;

    overflow:hidden;

    background:#f8f9fa;

}

.product-image img{

    width:100%;

    height:220px;

    object-fit:contain;

    transition:.4s ease;

}

/*=========================================
        DISCOUNT BADGE
=========================================*/

.discount{

    position:absolute;

    top:15px;

    right:15px;

    background:#ff3b30;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    z-index:5;

}

/*=========================================
        QUICK VIEW BUTTON
=========================================*/

.quick-view{

    position:absolute;

    top:15px;

    left:15px;

    width:45px;

    height:45px;

    border:none;

    outline:none;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateX(-15px);

    transition:.35s ease;

    box-shadow:0 8px 18px rgba(13,110,253,.35);

    z-index:10;

}

/* Show on Hover */

.product-card:hover .quick-view{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}

/* Button Hover */

.quick-view:hover{

    background:#0047c2;

    transform:scale(1.1);

}

/* Ripple Effect */

.quick-view::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.4);

    transition:.35s;

}

.quick-view:hover::after{

    transform:scale(1.3);

    opacity:0;

}

/* Icon */

.quick-view i{

    font-size:18px;

    pointer-events:none;

}

/*=========================================
        IMAGE HOVER EFFECT
=========================================*/

.product-card:hover .product-image img{

    transform:scale(1.08);

}

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

@media(max-width:768px){

.quick-view{

    opacity:1;

    visibility:visible;

    transform:none;

    width:40px;

    height:40px;

    top:10px;

    left:10px;

}

.quick-view i{

    font-size:16px;

}

}

@media(max-width:576px){

.quick-view{

    width:35px;

    height:35px;

}

.quick-view i{

    font-size:14px;

}

}

/*=========================================
        QUICK VIEW OVERLAY
=========================================*/

.quickview-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.quickview-overlay.active{

    opacity:1;

    visibility:visible;

}

/*=========================================
        QUICK VIEW POPUP
=========================================*/

.quickview-popup{

    position:fixed;

    top:0;

    right:-850px;

    width:850px;

    max-width:100%;

    height:100vh;

    background:#fff;

    z-index:9999;

    transition:.45s ease;

    overflow:hidden;

    box-shadow:-8px 0 30px rgba(0,0,0,.15);

}

.quickview-popup.active{

    right:0;

}

/*=========================================
        CLOSE BUTTON
=========================================*/

.popup-close{

    position:absolute;

    top:20px;

    right:20px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#f4f4f4;

    cursor:pointer;

    font-size:20px;

    transition:.3s;

    z-index:100;

}

.popup-close:hover{

    background:#0d6efd;

    color:#fff;

}

/*=========================================
        BODY
=========================================*/

.popup-body{

    display:flex;

    height:100%;

    overflow:hidden;

}

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

.popup-left{

    width:45%;

    background:#f8f9fa;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.popup-left img{

    width:100%;

    max-height:500px;

    object-fit:contain;

    transition:.35s;

}

.popup-left img:hover{

    transform:scale(1.05);

}

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

.popup-right{

    width:55%;

    padding:40px;

    overflow-y:auto;

}

/* Custom Scrollbar */

.popup-right::-webkit-scrollbar{

    width:8px;

}

.popup-right::-webkit-scrollbar-thumb{

    background:#0d6efd;

    border-radius:20px;

}

.popup-right::-webkit-scrollbar-track{

    background:#ececec;

}

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

.popup-right h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:20px;

}

/*=========================================
        PRICE
=========================================*/

.popup-price{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.popup-price span{

    font-size:34px;

    color:#d60000;

    font-weight:700;

}

.popup-price del{

    font-size:20px;

    color:#888;

}

/*=========================================
        DESCRIPTION
=========================================*/

.popup-right p{

    color:#555;

    line-height:1.8;

    margin-bottom:25px;

}

/*=========================================
        QUANTITY
=========================================*/

.popup-buttons{

    display:flex;

    align-items:center;

    margin-bottom:25px;

}

.qty-minus,
.qty-plus{

    width:45px;

    height:45px;

    border:none;

    background:#0d6efd;

    color:#fff;

    font-size:22px;

    cursor:pointer;

}

.popup-buttons input{

    width:70px;

    height:45px;

    text-align:center;

    border:1px solid #ddd;

    outline:none;

    font-size:18px;

}

/*=========================================
        CART BUTTON
=========================================*/

.cart-btn{

    width:100%;

    border:none;

    background:#0d6efd;

    color:#fff;

    padding:16px;

    border-radius:10px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    margin-bottom:35px;

}

.cart-btn:hover{

    background:#0048c7;

}

/*=========================================
        DESCRIPTION BOX
=========================================*/

.popup-description{

    border-top:1px solid #ececec;

    padding-top:25px;

}

.popup-description h5{

    font-size:22px;

    margin-bottom:15px;

}

.popup-description ul{

    padding-left:20px;

}

.popup-description li{

    margin-bottom:12px;

    color:#555;

    line-height:1.7;

}

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

@media(max-width:991px){

.quickview-popup{

    width:100%;

}

.popup-body{

    flex-direction:column;

}

.popup-left{

    width:100%;

    height:320px;

}

.popup-right{

    width:100%;

    height:calc(100vh - 320px);

}

}

@media(max-width:576px){

.popup-left{

    height:240px;

    padding:20px;

}

.popup-right{

    padding:25px;

}

.popup-right h3{

    font-size:24px;

}

.popup-price span{

    font-size:28px;

}

.popup-price del{

    font-size:16px;

}

.cart-btn{

    padding:14px;

    font-size:16px;

}

.qty-minus,
.qty-plus{

    width:40px;

    height:40px;

}

.popup-buttons input{

    width:60px;

    height:40px;

}

}


/*=========================================
            FAQ SECTION
=========================================*/

.faq-section{

    padding:80px 0;

    background:#f8fafc;

}

.section-title{

    text-align:center;

    margin-bottom:55px;

}

.section-title span{

    display:inline-block;

    padding:8px 22px;

    background:#e8f1ff;

    color:#0d6efd;

    border-radius:30px;

    font-weight:600;

    margin-bottom:18px;

}

.section-title h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:15px;

}

.section-title p{

    color:#666;

    max-width:700px;

    margin:auto;

}

/* Accordion */

.faq-accordion{

    max-width:950px;

    margin:auto;

}

.faq-accordion .accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:16px !important;

    overflow:hidden;

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

}

.faq-accordion .accordion-button{

    background:#fff;

    font-size:18px;

    font-weight:600;

    padding:22px 25px;

    box-shadow:none;

}

.faq-accordion .accordion-button i{

    margin-right:15px;

    color:#0d6efd;

    font-size:22px;

}

.faq-accordion .accordion-button:not(.collapsed){

    background:#0d6efd;

    color:#fff;

}

.faq-accordion .accordion-button:not(.collapsed) i{

    color:#fff;

}

.faq-accordion .accordion-button:focus{

    box-shadow:none;

}

.faq-accordion .accordion-body{

    font-size:16px;

    color:#555;

    line-height:1.8;

    padding:22px 25px;

    background:#fff;

}

/* Responsive */

@media(max-width:768px){

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

.faq-accordion .accordion-button{

    font-size:16px;

    padding:18px;

}

.faq-accordion .accordion-body{

    font-size:15px;

    padding:18px;

}

}

@media(max-width:576px){

.faq-section{

    padding:60px 0;

}

.section-title{

    margin-bottom:35px;

}

.section-title span{

    font-size:13px;

}

.section-title h2{

    font-size:26px;

}

.faq-accordion .accordion-button{

    font-size:15px;

}

}

/* ==============================
   Floating WhatsApp Button
============================== */

.whatsapp-float{
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 32px;
    z-index: 9999;
    box-shadow: 0 8px 20px rgba(37,211,102,.35);
    transition: all .3s ease;
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover{
    color:#fff;
    transform: scale(1.1);
    background:#1ebe5d;
}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@media(max-width:768px){
    .whatsapp-float{
        width:55px;
        height:55px;
        font-size:28px;
        bottom:20px;
        right:20px;
    }
}