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

.page-header.products-page-header{
    background:
        linear-gradient(rgba(17,24,39,.88),rgba(17,24,39,.88)),
        url("images/datascience.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:#ffffff;
    padding:90px 5% 70px;
    text-align:center;
}


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

.products-section{
    padding:70px 5%;
    background:#f9fafb;
}


/* ==================== PRODUCT GRID ==================== */

.products-container{

    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

    align-items:stretch;
}


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

.product-card-detailed{

    background:#ffffff;
    border-radius:14px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    position:relative;

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

    transition:all .35s ease;
}


/* glowing border */

.product-card-detailed::before{

    content:"";
    position:absolute;
    inset:-1px;

    background:linear-gradient(
        120deg,
        #6366f1,
        #22c55e,
        #06b6d4,
        #6366f1
    );

    background-size:300% 300%;

    border-radius:14px;

    opacity:0;
    transition:.4s;
    z-index:-1;
}


/* glow animation */

.product-card-detailed:hover::before{

    opacity:1;
    animation:cardGlow 6s linear infinite;
}

@keyframes cardGlow{

    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


/* lift */

.product-card-detailed:hover{

    transform:translateY(-8px);
    box-shadow:0 16px 40px rgba(0,0,0,.15);
}


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

.product-card-detailed
.card-image-container img{

    width:100%;
    height:210px;
    object-fit:cover;
    display:block;
}


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

.product-content-detailed{

    padding:26px;

    display:flex;
    flex-direction:column;
    flex-grow:1;
}


/* title */

.product-content-detailed h2{

    font-size:1.45rem;
    color:#111827;
    margin-bottom:10px;
}


/* description */

.product-content-detailed p{

    font-size:1rem;
    color:#4b5563;

    line-height:1.6;

    margin-bottom:20px;
}


/* ================= TAGS ================= */

.product-tags{
    margin-bottom:20px;
}

.product-tags span{

    display:inline-block;

    background:#f3f4f6;
    color:#4b5563;

    padding:5px 12px;

    border-radius:14px;

    font-size:.8rem;
    margin:3px;
}


/* ================= REVIEW ================= */

.product-review{

    color:#6b7280;
    font-weight:500;
    margin-bottom:20px;
}


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

.product-btn{

    margin-top:auto;

    display:block;

    background:#1e3a8a;
    color:#fff;

    text-align:center;

    padding:12px;

    border-radius:8px;

    text-decoration:none;
    font-weight:600;

    transition:.3s;
}

.product-btn:hover{

    background:#111827;
}


/* =========================================================
   APPLE STYLE TESTIMONIAL SLIDER
========================================================= */

.review-slider{

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

    backdrop-filter:blur(14px);

    border-radius:16px;

    padding:35px;

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

    min-height:420px;

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

    position:relative;
    overflow:hidden;
}


/* testimonial */

.review{

    position:absolute;

    text-align:center;

    opacity:0;

    transform:translateX(60px);

    transition:all .7s ease;

    max-width:280px;
}


/* active slide */

.review.active{

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


/* quote */

.review p{

    font-size:1.05rem;
    line-height:1.6;

    color:#374151;

    font-style:italic;

    margin-bottom:18px;
}


/* student name */

.review h4{

    color:#1e3a8a;
    margin-bottom:4px;
}


/* student role */

.review span{

    font-size:.9rem;
    color:#6b7280;
}


/* =========================================================
   PRODUCT INSIGHTS
========================================================= */

.product-insights-section{

    background:#ffffff;
    padding:80px 5%;
}

.product-insights-container{

    max-width:1100px;
    margin:auto;

    display:flex;
    flex-direction:column;
    gap:60px;
}


/* row */

.insight-row{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.insight-row.reverse{
    flex-direction:row-reverse;
}


/* text */

.insight-text{
    flex:1.5;
}

.insight-text h3{

    font-size:1.6rem;
    color:#111827;
    margin-bottom:15px;
}

.insight-text p{

    font-size:1.05rem;
    color:#4b5563;

    line-height:1.7;
    margin-bottom:15px;
}

.insight-role{

    font-size:.9rem;
    font-weight:600;
    color:#1e3a8a;
}


/* image */

.insight-image{

    flex:.6;
    display:flex;
    justify-content:center;
}

.insight-image img{

    width:140px;
    height:140px;

    object-fit:cover;

    border-radius:50%;

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


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

@media(max-width:992px){

    .products-container{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:768px){

    .products-container{
        grid-template-columns:1fr;
    }

    .insight-row,
    .insight-row.reverse{

        flex-direction:column;
        text-align:center;
    }

    .insight-image img{

        width:110px;
        height:110px;
    }

}