/* ===================================================
   COMMON PRODUCT DETAILS PAGE CSS
   File Name : product-details.css
=================================================== */

.product-details-page {

    background:
        linear-gradient(135deg,
            #f4f9ff 0%,
            #ffffff 45%,
            #edf6ff 100%);

    overflow: hidden;
}

/* =====================================
   COMMON HERO BANNER
===================================== */

.product-hero-banner {

    position: relative;

    padding: 170px 0 20px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #071c2f 0%,
            #0c2d4b 45%,
            #1489bf 100%);
}

.product-hero-banner::before {

    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    top: -140px;
    right: -120px;

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

    filter: blur(10px);
}

.product-hero-banner::after {

    content: '';

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    left: -100px;
    bottom: -100px;

    background:
        rgba(20, 137, 191, 0.18);
}

.product-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;
}

.product-hero-content span {

    display: inline-block;

    padding: 10px 24px;

    border-radius: 50px;

    margin-bottom: 25px;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

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

    backdrop-filter: blur(12px);

    animation: fadeUp 1s ease;
}

.product-hero-content h1 {

    font-size: 40px;

    font-weight: 800;

    color: #fff;

    line-height: 1.2;

    margin-bottom: 25px;

    animation: fadeUp 1.2s ease;
}

.product-hero-content p {

    max-width: 850px;

    margin: auto;

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

    font-size: 15px;

    line-height: 1.9;

    animation: fadeUp 1.4s ease;
}

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

.product-detail-section {

    position: relative;

    padding: 100px 0;
}

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

.product-detail-card {

    position: relative;

    padding: 55px;

    border-radius: 36px;

    margin-bottom: 70px;

    overflow: hidden;

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

    backdrop-filter: blur(14px);

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.07);

    transition: 0.5s;

    animation: fadeUp 1s ease;
}

.product-detail-card:hover {

    transform:
        translateY(-10px);
}

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

.product-detail-image {

    position: relative;

    overflow: hidden;

    border-radius: 28px;
}

.product-detail-image img {

    width: 100%;

    height: 430px;

    object-fit: cover;

    transition: 0.7s;
}

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

    transform: scale(1.08);
}

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

.product-detail-content span {

    display: inline-block;

    padding: 8px 20px;

    border-radius: 50px;

    margin-bottom: 20px;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    background:
        linear-gradient(135deg,
            #1489bf,
            #2e3192);
}

.product-detail-content h2 {

    font-size: 30px;

    font-weight: 800;

    line-height: 1.3;

    color: #111;

    margin-bottom: 20px;
}

.product-detail-content p {

    color: #666;

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 18px;
}

/* =====================================
   FEATURE GRID
===================================== */

.product-feature-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 35px;
}

.product-feature-item {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 22px;

    border-radius: 24px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(20, 137, 191, 0.08),
            rgba(46, 49, 146, 0.08));

    transition: 0.45s;
}

.product-feature-item::before {

    content: '';

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: 0.45s;

    background:
        linear-gradient(135deg,
            #1489bf,
            #2e3192);
}

.product-feature-item:hover::before {

    opacity: 1;
}

.product-feature-item:hover {

    transform:
        translateY(-8px);
}

.product-feature-icon {

    position: relative;

    z-index: 2;

    min-width: 55px;
    height: 55px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    color: #1489bf;

    background: #fff;

    transition: 0.45s;
}

.product-feature-item:hover .product-feature-icon {

    color: #2e3192;

    transform:
        rotate(8deg) scale(1.08);
}

.product-feature-text {

    position: relative;

    z-index: 2;
}

.product-feature-text h5 {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 10px;

    color: #111;

    transition: 0.4s;
}

.product-feature-text p {

    margin-bottom: 0;

    font-size: 15px;

    line-height: 1.8;

    color: #666;

    transition: 0.4s;
}

.product-feature-item:hover .product-feature-text h5,
.product-feature-item:hover .product-feature-text p {

    color: #fff;
}

/* =====================================
   HIGHLIGHT BOX
===================================== */

.product-highlight-box {

    margin-top: 35px;

    padding: 30px;

    border-radius: 28px;

    background:
        linear-gradient(135deg,
            rgba(20, 137, 191, 0.08),
            rgba(46, 49, 146, 0.08));
}

.product-highlight-box h4 {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 18px;

    color: #111;
}

.product-highlight-box p {

    margin-bottom: 0;
}

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

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(60px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

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

@media(max-width:991px) {

    .product-hero-content h1 {

        font-size: 44px;
    }

    .product-detail-card {

        padding: 35px;
    }

    .product-detail-content h2 {

        font-size: 34px;
    }

    .product-detail-image img {

        height: 320px;
    }
}

@media(max-width:576px) {

    .product-hero-banner {

        padding: 165px 0 15px;
    }

    .product-hero-content h1 {

        font-size: 30px;
    }

    .product-hero-content p {

        font-size: 15px;
    }

    .product-detail-card {

        padding: 24px;

        border-radius: 24px;
    }

    .product-detail-content h2 {

        font-size: 26px;
    }

    .product-feature-grid {

        grid-template-columns: 1fr;
    }

    .product-detail-image img {

        height: 230px;
    }

    .product-feature-item {

        padding: 18px;
    }
}