* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}



body {

    font-family:'Inter',Arial,sans-serif;

    color:#111827;

    background:#ffffff;

    line-height:1.6;

}



img {

    max-width:100%;

    display:block;

}



a {

    text-decoration:none;

    color:inherit;

}



.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



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


.header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(10px);

    z-index:1000;

    border-bottom:1px solid #eeeeee;

}



.header-inner {

    height:75px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo {

    font-size:24px;

    font-weight:800;

    letter-spacing:1px;

}



.header nav {

    display:flex;

    gap:40px;

}



.header nav a {

    font-size:15px;

    font-weight:500;

    color:#374151;

    transition:.3s;

}



.header nav a:hover {

    color:#111827;

}






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


.hero {

    padding-top:120px;

    padding-bottom:90px;

}



.hero-content {

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}



.hero-image img {

    width:100%;

    border-radius:24px;

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

}



.badge {

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#f3f4f6;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}





.hero-text h1 {


    font-size:48px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;


}




.hero-text p {


    font-size:18px;

    color:#6b7280;

    max-width:520px;

    margin-bottom:30px;


}




.features {

    margin-bottom:35px;

}



.features div {


    margin-bottom:12px;

    font-size:16px;

    font-weight:500;


}





.primary-btn {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:15px 35px;


    background:#111827;


    color:white;


    border-radius:50px;


    font-size:16px;


    font-weight:600;


    transition:.3s;


}



.primary-btn:hover {


    transform:translateY(-3px);

    opacity:.9;


}






/* =========================
SECOND PRODUCT SECTION
========================= */


.product-section {


    padding:100px 0;


    background:#f9fafb;


}



.product-grid {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:70px;


    align-items:center;


}





.product-image img {


    border-radius:24px;


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


}



.product-text h2 {


    font-size:38px;


    font-weight:800;


    margin-bottom:25px;


}



.product-text p {


    color:#6b7280;


    font-size:17px;


    margin-bottom:30px;


}




.product-text ul {


    list-style:none;


    margin-bottom:35px;


}



.product-text li {


    margin-bottom:15px;


    font-size:16px;


    font-weight:500;


}


/* =========================
CUSTOMER REVIEWS SECTION
========================= */


.reviews {

    padding:100px 0;

    background:#ffffff;

    overflow:hidden;

}



.section-title {

    text-align:center;

    margin-bottom:50px;

}



.section-title h2 {

    font-size:40px;

    font-weight:800;

    margin-bottom:12px;

}



.section-title p {

    color:#6b7280;

    font-size:17px;

}





.reviewSwiper {

    width:100%;

    overflow:hidden;

}



.swiper-slide {

    display:flex;

    justify-content:center;

}



.swiper-slide img {


    width:100%;


    height:580px;


    object-fit:cover;


    border-radius:20px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.12);


}







/* =========================
SHIPPING SECTION
========================= */


.shipping {


    padding:100px 0;


    background:#f9fafb;


}



.shipping-content {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:70px;


    align-items:center;


}



.shipping-image img {


    width:100%;


    border-radius:24px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.12);


}




.shipping-text h2 {


    font-size:40px;


    font-weight:800;


    margin-bottom:25px;


}




.shipping-text p {


    color:#6b7280;


    font-size:17px;


    margin-bottom:35px;


}





.shipping-item {


    display:flex;


    align-items:center;


    gap:15px;


    margin-bottom:18px;


    font-size:17px;


    font-weight:600;


}



.shipping-item span {


    width:32px;


    height:32px;


    border-radius:50%;


    background:#111827;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:14px;


}







/* =========================
TRUST SECTION
========================= */


.trust {


    padding:80px 0;


}



.trust-grid {


    display:grid;


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


    gap:30px;


}



.trust-card {


    text-align:center;


    padding:40px 30px;


    border-radius:20px;


    background:white;


    box-shadow:

    0 15px 40px rgba(0,0,0,.08);


}



.icon {


    width:55px;


    height:55px;


    margin:0 auto 20px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#111827;


    color:white;


    font-weight:700;


}




.trust-card h3 {


    font-size:22px;


    margin-bottom:15px;


}



.trust-card p {


    color:#6b7280;


}







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


.cta {


    padding:90px 20px;


    background:#111827;


    color:white;


    text-align:center;


}



.cta h2 {


    font-size:42px;


    font-weight:800;


    margin-bottom:20px;


}




.cta p {


    font-size:18px;


    color:#d1d5db;


    margin-bottom:35px;


}





.cta-button {


    display:inline-flex;


    padding:16px 40px;


    background:#25D366;


    color:white;


    border-radius:50px;


    font-size:18px;


    font-weight:700;


    transition:.3s;


}



.cta-button:hover {


    transform:translateY(-3px);


}








/* =========================
FLOATING WHATSAPP BUTTON
========================= */


.floating-whatsapp {


    position:fixed;


    bottom:25px;


    left:50%;


    transform:translateX(-50%);


    display:flex;


    align-items:center;


    gap:10px;


    padding:14px 30px;


    background:#25D366;


    color:white;


    border-radius:50px;


    font-weight:700;


    font-size:16px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.25);


    z-index:9999;


    animation:pulse 2s infinite;


}





.floating-whatsapp img {


    width:25px;


    height:25px;


}





@keyframes pulse {


    0% {

        transform:translateX(-50%) scale(1);

    }


    50% {

        transform:translateX(-50%) scale(1.08);

    }


    100% {

        transform:translateX(-50%) scale(1);

    }

}


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


/* Tablet */

@media (max-width:1024px){



.container {

    width:92%;

}



.hero-content,

.product-grid,

.shipping-content {


    grid-template-columns:1fr;


    gap:45px;


}




.hero {


    padding-top:110px;


}



.hero-text {


    text-align:center;


}



.hero-text p {


    margin-left:auto;


    margin-right:auto;


}



.features {


    display:inline-block;


    text-align:left;


}




.product-text {


    text-align:center;


}



.product-text ul {


    display:inline-block;


    text-align:left;


}




.shipping-text {


    text-align:center;


}



.shipping-features {


    display:inline-block;


    text-align:left;


}



.trust-grid {


    grid-template-columns:1fr;


}



.section-title h2 {


    font-size:34px;


}




.hero-text h1 {


    font-size:42px;


}



}







/* Mobile */


@media (max-width:768px){



.header-inner {


    height:65px;


}



.logo {


    font-size:20px;


}



.header nav {


    display:none;


}



.hero {


    padding-top:90px;


    padding-bottom:60px;


}



.hero-content {


    gap:35px;


}



.hero-text h1 {


    font-size:32px;


    line-height:1.25;


}



.hero-text p {


    font-size:16px;


}



.badge {


    font-size:11px;


}



.primary-btn {


    width:100%;


}



.product-section {


    padding:60px 0;


}



.product-text h2 {


    font-size:30px;


}



.product-text p {


    font-size:16px;


}



.reviews {


    padding:60px 0;


}



.section-title h2 {


    font-size:30px;


}



.section-title p {


    font-size:15px;


}



.swiper-slide img {


    height:639px;


    border-radius:16px;


}



.shipping {


    padding:60px 0;


}



.shipping-text h2 {


    font-size:30px;


}



.trust {


    padding:60px 0;


}



.trust-card {


    padding:30px 20px;


}



.cta {


    padding:70px 20px;


}



.cta h2 {


    font-size:32px;


}



.cta p {


    font-size:16px;


}




.floating-whatsapp {


    bottom:18px;


    padding:12px 24px;


    font-size:15px;


}



.floating-whatsapp img {


    width:22px;


    height:22px;


}



}








/* Small Mobile */


@media (max-width:420px){



.hero-text h1 {


    font-size:28px;


}



.swiper-slide img {


    height:320px;


}



.floating-whatsapp {


    width:90%;


    justify-content:center;


}



}




/* =========================
SCROLL ANIMATION
========================= */


.hidden {


    opacity:0;


    transform:translateY(40px);


    transition:all .8s ease;


}



.show {


    opacity:1;


    transform:translateY(0);


}