/* =========================================================
   GENERAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    color: #222;
    background: #fff;
    margin: 0;
}

section {
    scroll-margin-top: 80px;
}


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

#navbar {

    background:
    linear-gradient(
        135deg,
        #e50914,
        #b20710
    );

    transition: 0.3s ease;
}

#navbar.scrolled {

    background: #b20710;

    box-shadow:
    0 4px 12px rgba(0,0,0,0.20);
}

#navbar .nav-link {

    color: #fff !important;

    font-weight: 500;

    transition: 0.2s;
}

#navbar .nav-link:hover {

    opacity: 0.80;
}

.navbar-logo {

    height: 45px;

    width: auto;
}

.navbar-toggler {

    border: 1px solid #fff;
}

.navbar-toggler-icon {

    filter: invert(1);
}


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

.product-hero {

    background:
    linear-gradient(
        135deg,
        #e50914,
        #b20710
    );

    color: #fff;

    padding:
    125px 0
    70px;
}


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

.product-image-box {

    background: #fff;

    border-radius: 24px;

    padding: 30px;

    min-height: 470px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

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

.product-image-box img {

    width: 100%;

    max-width: 450px;

    max-height: 420px;

    object-fit: contain;

    transition: 0.3s ease;
}

.product-image-box img:hover {

    transform: scale(1.03);
}


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

.product-info {

    min-height: 470px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.product-code {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.5px;

    opacity: 0.80;
}

.product-title {

    font-size: 46px;

    font-weight: 800;

    line-height: 1.08;

    margin: 0;
}

.product-subtitle {

    font-size: 17px;

    line-height: 1.7;

    max-width: 560px;

    opacity: 0.95;

    margin-bottom: 10px;
}


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

.price-box {

    display: inline-block;

    width: max-content;

    background: #fff;

    color: #e50914;

    padding: 10px 22px;

    border-radius: 12px;

    margin:
    8px 0
    15px;

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

.price-box .price {

    font-size: 31px;

    font-weight: 800;

    line-height: 1.2;
}

.price-box small {

    display: block;

    color: #777;

    font-size: 12px;
}


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

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap:
    10px
    20px;

    margin-top: 5px;
}

.hero-features span {

    font-size: 14px;

    font-weight: 600;
}

.hero-features i {

    color: #ffd700;

    margin-right: 5px;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */
   
   
   /* =========================================================
   PRODUCT IMAGE SLIDER
   ========================================================= */

.product-image-box {
    background: #fff;
    border-radius: 24px;
    padding: 25px;

    min-height: 470px;
    height: 100%;

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

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

    overflow: hidden;
}

.product-slider-image {

    width: 100%;
    height: 420px;

    object-fit: contain;

    margin: auto;

    border-radius: 15px;

    user-select: none;
}


/* ARROWS */

.carousel-control-prev,
.carousel-control-next {

    width: 45px;
    height: 45px;

    top: 50%;
    transform: translateY(-50%);

    background: #e50914;

    border-radius: 50%;

    opacity: 0.9;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}


/* MOBILE */

@media(max-width:768px) {

    .product-image-box {

        min-height: 330px;

        padding: 15px;

    }

    .product-slider-image {

        height: 290px;

    }

    .carousel-control-prev,
    .carousel-control-next {

        width: 38px;
        height: 38px;

    }

}

.btn-order {

    width: max-content;

    background: #fff;

    color: #e50914;

    border: none;

    padding:
    13px
    25px;

    border-radius: 10px;

    font-weight: 800;

    font-size: 16px;

    transition: 0.3s;
}

.btn-order:hover {

    background: #f5f5f5;

    color: #b20710;

    transform:
    translateY(-2px);
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title {

    color:#e50914;

    font-weight:800;

    text-align:center;

    margin-bottom:15px;

}


.section-subtitle {

    text-align:center;

    color:#666;

    max-width:750px;

    margin:
    0 auto 45px;

    line-height:1.7;

}


/* =========================================================
   DESIGN SECTION
   ========================================================= */

.design-section {

    background: #f8f9fa;
}


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

.design-card {

    background: #fff;

    border: none;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
    0 5px 20px
    rgba(0,0,0,0.08);

    transition: 0.3s;

    height: 100%;
}

.design-card:hover {

    transform:
    translateY(-6px);

    box-shadow:
    0 12px 30px
    rgba(0,0,0,0.13);
}

.design-card img {

    width: 100%;

    height: 280px;

    object-fit: contain;

    background: #fff;

    padding: 25px;
}

.design-card .card-body {

    text-align: center;

    padding: 22px;
}

.design-card h5 {

    font-weight: 700;

    margin-bottom: 5px;
}

.product-design-code {

    color: #777;

    font-size: 13px;

    margin-bottom: 8px;
}

.design-price {

    color: #e50914;

    font-size: 25px;

    font-weight: 800;

    margin-bottom: 0;
}

.design-card .small {

    font-size: 12px;
}


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

.benefit-card {

    background: #fff;

    border: none;

    border-radius: 15px;

    padding:
    30px
    20px;

    height: 100%;

    box-shadow:
    0 5px 20px
    rgba(0,0,0,0.08);

    transition: 0.3s;
}

.benefit-card:hover {

    transform:
    translateY(-5px);

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

.benefit-card i {

    color: #e50914;

    font-size: 35px;

    margin-bottom: 18px;
}

.benefit-card h5 {

    font-weight: 700;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.step-card {

    border-radius: 15px;

    padding:
    30px
    20px;

    height: 100%;

    border:
    1px solid #eee;

    background: #fff;

    box-shadow:
    0 4px 15px
    rgba(0,0,0,0.04);
}

.step-number {

    width: 55px;

    height: 55px;

    background: #e50914;

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 800;

    margin:
    0 auto
    20px;
}


/* =========================================================
   ORDER SECTION
   ========================================================= */

.order-section {

    background: #f8f9fa;
}

.order-card {

    background: #fff;

    border-radius: 20px;

    padding: 35px;

    box-shadow:
    0 10px 35px
    rgba(0,0,0,0.10);
}

.order-summary {

    background: #fff5f5;

    border-left:
    4px solid #e50914;

    padding: 15px;

    border-radius: 8px;
}

.form-control {

    border-radius: 10px;

    padding:
    12px
    14px;
}

.form-control:focus {

    border-color: #e50914;

    box-shadow:
    0 0 0
    0.2rem
    rgba(229,9,20,0.12);
}


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

.trust-section {

    background: #fff;
}

.stars {

    color: #ffc107;

    font-size: 25px;
}


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

.wa-btn {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background: #25D366;

    color: #fff;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    z-index: 1000;

    text-decoration: none;

    box-shadow:
    0 5px 15px
    rgba(0,0,0,0.20);
}

.wa-btn:hover {

    color: #fff;

    transform: scale(1.05);
}


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

@media(max-width: 768px) {

    .navbar-logo {

        height: 32px;
    }

    .product-hero {

        padding:
        105px 0
        50px;
    }

    .product-image-box {

        min-height: 330px;

        padding: 20px;
    }

    .product-image-box img {

        max-height: 300px;
    }

    .product-info {

        min-height: auto;

        text-align: center;
    }

    .product-title {

        font-size: 36px;
    }

    .product-subtitle {

        font-size: 16px;

        margin-left: auto;

        margin-right: auto;
    }

    .price-box {

        margin-left: auto;

        margin-right: auto;
    }

    .hero-features {

        justify-content: center;
    }

    .btn-order {

        margin-left: auto;

        margin-right: auto;
    }

    .design-card img {

        height: 240px;
    }

}


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

@media(max-width: 480px) {

    .product-title {

        font-size: 31px;
    }

    .product-subtitle {

        font-size: 15px;
    }

    .product-image-box {

        min-height: 280px;
    }

    .product-image-box img {

        max-height: 250px;
    }

    .price-box .price {

        font-size: 27px;
    }

}



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

.btn-life {

    background:#e50914;

    border:none;

    color:#fff;

    border-radius:9px;

    padding:
    12px 20px;

    font-weight:700;

}


.btn-life:hover {

    background:#b20710;

    color:#fff;

}

/* =====================================================
   USE CASE SECTIONS
===================================================== */

.use-section {

    padding:
    75px 0;

}


.use-image {

    width:100%;

    max-height:400px;

    object-fit:contain;

    border-radius:15px;

}


.use-content {

    padding:20px;

}


.use-content h2 {

    font-weight:800;

    color:#e50914;

    margin-bottom:18px;

}


.use-content p {

    font-size:16px;

    line-height:1.8;

}