/* SECTION FULL SCREEN */
.loved-section{
    height:100vh;
    width:100%;
    padding:60px 0;
    background:linear-gradient(120deg,#020617,#0b132b,#020617);
    color:#fff;
    overflow:hidden;
    position:relative;
}

/* TITLE */
.loved-section h2{
    text-align:center;
    font-size:42px;
    font-weight:700;
    color:#ffd700;
    margin-bottom:10px;
}

.loved-p{
    text-align:center;
    font-size:18px;
    opacity:.8;
    margin-bottom:40px;
}

/* MAIN SCROLL AREA */
.reviews{
    display:flex;
    gap:30px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:20px 40px;
}

/* HIDE SCROLLBAR */
.reviews::-webkit-scrollbar{
    display:none;
}

/* PAIRS STACKED VERTICALLY */
.review-pair{
    display:flex;
    flex-direction:column;
    gap:30px;
    min-width:340px;
}

/* GLASS CARD BASE */
.review-item{
    border-radius:20px;
    padding:25px;
    backdrop-filter:blur(15px);
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
}

/* HOVER GLOW */
.review-item::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,215,0,0.3),transparent);
    transition:.5s;
}

.review-item:hover::before{
    left:100%;
}

.review-item:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 20px 50px rgba(0,0,0,0.7);
}

/* DIFFERENT SIZES (LIKE IMAGE) */
.big-box{ height:260px; }
.medium-box{ height:220px; }
.small-box{ height:180px; }
.same-box{ height:200px; }
.medium-small-box{ height:200px; }

/* TEXT */
.review-item h3{
    font-size:18px;
    margin-bottom:10px;
    color:#fff;
}

.review-item p{
    font-size:14px;
    opacity:.85;
    line-height:1.6;
}

.review-item cite{
    display:block;
    margin-top:15px;
    font-size:13px;
    opacity:.7;
}

/* STARS */
.stars{
    color:#ffd700;
    margin-bottom:10px;
    font-size:18px;
}

/* LEFT FADE (IMPORTANT FOR HALF CUT LOOK) */
.loved-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:120px;
    height:100%;
    background:linear-gradient(to right,#020617,transparent);
    z-index:2;
}

/* RIGHT FADE */
.loved-section::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:120px;
    height:100%;
    background:linear-gradient(to left,#020617,transparent);
    z-index:2;
}


/* GLOBAL RESET TO LIGHT THEME */
body{
    background:#f8fafc;   /* soft premium light */
    color:#111;
}

/* all sections default light */
section{
    background:transparent;
}

/* containers clean */
.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.loved-section{
    background:linear-gradient(120deg,#020617,#0b132b);
}



/* =========================================================
   FULL SECTION NEW PREMIUM LIGHT COLORS
========================================================= */

.reviews-section{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #fffdf8 0%,
    #fffaf3 25%,
    #fff7fb 55%,
    #fefcf7 100%
    ) !important;
}

/* SOFT NATURAL LIGHTS */

.reviews-section::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    top:-220px;
    left:-220px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,220,180,.35),
    transparent 70%
    );

    filter:blur(55px);

    animation:softGlow1 10s ease-in-out infinite;
}

.reviews-section::after{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    bottom:-180px;
    right:-180px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,210,230,.28),
    transparent 70%
    );

    filter:blur(55px);

    animation:softGlow2 12s ease-in-out infinite;
}

/* =========================================================
   REVIEW CARD PREMIUM COLORS
========================================================= */

.review-item{
flex:1;

padding:22px;

border-radius:24px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.96),
rgba(255,248,242,.92),
rgba(255,252,246,.96)
) !important;

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

backdrop-filter:blur(16px);

box-shadow:
0 15px 40px rgba(255,190,120,.10),
0 8px 24px rgba(255,210,180,.12);

position:relative;

overflow:hidden;

color:#2d2d2d;
}

/* SOFT LIGHT EFFECT */

.review-item::before{
content:"";

position:absolute;

width:240px;
height:240px;

top:-100px;
right:-100px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.75),
transparent 70%
);

filter:blur(18px);
}

/* CLEAN BORDER */

.review-item::after{
content:"";

position:absolute;

inset:0;

border-radius:24px;

border:1px solid rgba(255,235,210,.85);

pointer-events:none;
}

/* =========================================================
   STARS
========================================================= */

.stars{
color:#f59e0b;

font-size:15px;

margin-bottom:12px;

text-shadow:
0 2px 10px rgba(245,158,11,.22);
}

/* =========================================================
   TEXT
========================================================= */

.review-item p{
font-size:14px;

line-height:1.8;

font-weight:500;

color:#5f5b57;
}

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

@keyframes softGlow1{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(35px,25px);
    }

    100%{
        transform:translate(0,0);
    }
}

@keyframes softGlow2{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-30px,-20px);
    }

    100%{
        transform:translate(0,0);
    }
}






/* =========================================================
   PREMIUM MID-TONE LUXURY COLORS
========================================================= */

.loved-section{
    height:100vh;
    width:100%;
    padding:60px 0;

    background:
    linear-gradient(
    135deg,
    #f6efe7 0%,
    #efe5da 35%,
    #f5f0ea 65%,
    #ece4dc 100%
    );

    color:#2b2b2b;

    overflow:hidden;
    position:relative;
}

/* =========================================================
   SOFT PREMIUM LIGHTS
========================================================= */

.loved-section::before{
    content:"";

    position:absolute;

    top:-180px;
    left:-180px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,210,160,.28),
    transparent 70%
    );

    filter:blur(55px);

    z-index:0;

    animation:softGlow1 10s ease-in-out infinite;
}

.loved-section::after{
    content:"";

    position:absolute;

    bottom:-180px;
    right:-180px;

    width:480px;
    height:480px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(214,184,255,.22),
    transparent 70%
    );

    filter:blur(55px);

    z-index:0;

    animation:softGlow2 12s ease-in-out infinite;
}

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

.loved-section h2{
    text-align:center;

    font-size:42px;

    font-weight:800;

    color:#5b4636;

    margin-bottom:12px;

    letter-spacing:.5px;
}

/* SUBTITLE */

.loved-p{
    text-align:center;

    font-size:18px;

    color:#7a6858;

    margin-bottom:40px;
}

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

.review-item{
    border-radius:22px;

    padding:25px;

    backdrop-filter:blur(16px);

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.72),
    rgba(255,248,242,.80),
    rgba(250,245,240,.78)
    );

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

    box-shadow:
    0 14px 35px rgba(140,110,90,.10),
    0 6px 18px rgba(180,150,120,.08);

    transition:all .4s ease;

    position:relative;

    overflow:hidden;

    z-index:1;
}

/* SHINE EFFECT */

.review-item::before{
    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
    );

    transition:.7s;
}

.review-item:hover::before{
    left:100%;
}

/* HOVER */

.review-item:hover{
    transform:translateY(-10px) scale(1.03);

    box-shadow:
    0 20px 50px rgba(120,90,70,.16);
}

/* =========================================================
   TEXT
========================================================= */

.review-item h3{
    font-size:18px;

    margin-bottom:10px;

    color:#4e3d31;
}

.review-item p{
    font-size:14px;

    color:#6e5d4e;

    line-height:1.7;

    font-weight:500;
}

.review-item cite{
    display:block;

    margin-top:15px;

    font-size:13px;

    color:#8b7766;
}

/* =========================================================
   STARS
========================================================= */

.stars{
    color:#d4a437;

    margin-bottom:10px;

    font-size:18px;

    text-shadow:
    0 2px 10px rgba(212,164,55,.22);
}

/* =========================================================
   SIDE FADES
========================================================= */

.loved-section .fade-left{
    position:absolute;

    top:0;
    left:0;

    width:120px;
    height:100%;

    background:
    linear-gradient(
    to right,
    #f3ece4,
    transparent
    );

    z-index:2;
}

.loved-section .fade-right{
    position:absolute;

    top:0;
    right:0;

    width:120px;
    height:100%;

    background:
    linear-gradient(
    to left,
    #efe7de,
    transparent
    );

    z-index:2;
}

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

@keyframes softGlow1{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(35px,25px);
    }

    100%{
        transform:translate(0,0);
    }
}

@keyframes softGlow2{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-30px,-20px);
    }

    100%{
        transform:translate(0,0);
    }
}