/* ==========================================================
   PRIMEVAULT TESTIMONIALS
========================================================== */

.testimonials{

    background:var(--surface);

}

.testimonial-container{

    max-width:1100px;

    margin:70px auto 0;

    display:grid;

    grid-template-columns:350px 1fr;

    gap:70px;

    align-items:center;

}

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

/* ==========================================
   PROFILE
========================================== */

.testimonial-profile{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:15px;

    margin-top:20px;

}

.testimonial-profile img{

    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--accent);

    box-shadow:var(--shadow-sm);

    flex-shrink:0;

}

.testimonial-user h4{

    margin-bottom:5px;

}

.testimonial-user span{

    color:var(--text-secondary);

    font-size:15px;

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

.testimonial-content{

    position:relative;

}

.testimonial-stars{

    color:var(--accent);

    font-size:24px;

    letter-spacing:6px;

    margin-bottom:25px;

}

.testimonial-content p{

    font-size:24px;

    line-height:1.8;

    color:var(--text-primary);

    margin-bottom:40px;

    font-style:italic;

}

.testimonial-content h4{

    margin-bottom:8px;

}

.testimonial-content span{

    color:var(--text-secondary);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.testimonial-navigation{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:45px;

}

.testimonial-navigation button{

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--background);

    border:1px solid var(--border);

    font-size:18px;

    transition:var(--transition);

}

.testimonial-navigation button:hover{

    background:var(--accent);

    color:#fff;

}

/* ==========================================================
   DOTS
========================================================== */



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

.fade-out{

    opacity:0;

    transform:translateY(20px);

    transition:.35s;

}

.fade-in{

    opacity:1;

    transform:translateY(0);

    transition:.35s;

}

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

@media(max-width:992px){

    .testimonial-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .testimonial-image img{

        width:280px;

        height:360px;

    }

    .testimonial-navigation{

        justify-content:center;

    }

    

}

@media(max-width:768px){

    .testimonial-content p{

        font-size:20px;

    }
    

}

@media(max-width:480px){

    .testimonial-image img{

        width:230px;

        height:300px;

    }

    .testimonial-content p{

        font-size:18px;

    }

}
/* ==========================================
   TESTIMONIAL TEXT
========================================== */

.testimonial-text{

    position:relative;

    margin-bottom:40px;

}

.quote-start{

    position:absolute;

    top:-10px;

    left:-20px;

    font-size:70px;

    color:var(--accent);

    font-family:Georgia, serif;

    line-height:1;

}

.quote-end{

    position:absolute;

    bottom:-35px;

    right:0;

    font-size:70px;

    color:var(--accent);

    font-family:Georgia, serif;

    line-height:1;

}

.testimonial-text p{

    padding:0 35px;

    font-size:24px;

    line-height:1.8;

    color:var(--text-primary);

    font-style:italic;

}







/* ==========================================================
   PRIMEVAULT SHOWCASE
========================================================== */

.showcase{

    position:relative;

    display:flex;

    align-items:center;

    min-height:750px;

    padding:120px 0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;

}

/* ==========================================================
   OVERLAY
========================================================== */

.showcase-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.65) 35%,
        rgba(0,0,0,.35) 65%,
        rgba(0,0,0,.12) 100%
    );

}

/* ==========================================================
   CONTAINER
========================================================== */

.showcase .container{

    position:relative;

    z-index:2;

}

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

.showcase-content{

    width:100%;

    max-width:620px;

    text-align:left;

}

.showcase-content small{

    display:inline-block;

    margin-bottom:20px;

    color:var(--accent);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.showcase-content h2{

    color:#fff;

    font-size:64px;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;

}

.showcase-content p{

    color:rgba(255,255,255,.85);

    font-size:18px;

    line-height:1.9;

    margin-bottom:45px;

}

/* ==========================================================
   BUTTONS
========================================================== */

.showcase-buttons{

    display:flex;

    gap:18px;

    align-items:center;

    margin-bottom:60px;

}

.showcase-buttons .btn{

    min-width:180px;

}

.showcase-buttons .btn-outline{

    border-color:rgba(255,255,255,.35);

    color:#fff;

}

.showcase-buttons .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.showcase-navigation{

    display:flex;

    align-items:center;

    gap:18px;

}

.showcase-navigation button{

    width:50px;

    height:50px;

    border-radius:50%;

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

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

    color:#fff;

    font-size:18px;

    transition:var(--transition);

}

.showcase-navigation button:hover{

    background:var(--accent);

    border-color:var(--accent);

    color:var(--primary);

}

/* ==========================================================
   DOTS
========================================================== */

#showcase-dots{

    display:flex;

    gap:12px;

}

.showcase-dot{

    width:12px;

    height:12px;

    border-radius:50px;

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

    cursor:pointer;

    transition:.35s;

}

.showcase-dot.active{

    width:40px;

    background:var(--accent);

}

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

@media(max-width:992px){

    .showcase{

        min-height:700px;

    }

    .showcase-content{

        max-width:520px;

    }

    .showcase-content h2{

        font-size:48px;

    }

}

@media(max-width:768px){

    .showcase{

        min-height:650px;

        padding:90px 0;

        background-position:center;

    }

    .showcase-overlay{

        background:linear-gradient(
            180deg,
            rgba(0,0,0,.75),
            rgba(0,0,0,.55)
        );

    }

    .showcase-content{

        width:100%;

        max-width:100%;

        text-align:left;

    }

    .showcase-content h2{

        font-size:36px;

        margin-bottom:18px;

    }

    .showcase-content p{

        font-size:16px;

        margin-bottom:30px;

    }

    .showcase-buttons{

        flex-direction:column;

        align-items:stretch;

        margin-bottom:35px;

    }

    .showcase-buttons .btn{

        width:100%;

    }

    .showcase-navigation{

        justify-content:flex-start;

    }

}

@media(max-width:480px){

    .showcase{

        min-height:580px;

    }

    .showcase-content h2{

        font-size:30px;

    }

    .showcase-content p{

        font-size:15px;

        line-height:1.8;

    }

}

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

@media (max-width:768px){

    .quote-start{

        left:0;

        top:-5px;

        font-size:42px;

    }

    .quote-end{

        right:0;

        bottom:-12px;

        font-size:42px;

    }

    .testimonial-text{

        margin-bottom:30px;

    }

    .testimonial-text p{

        padding:0 20px;

        font-size:20px;

    }

}

@media (max-width:480px){

    .quote-start{

        left:4px;

        top:-2px;

        font-size:32px;

    }

    .quote-end{

        right:4px;

        bottom:-8px;

        font-size:32px;

    }

    .testimonial-text p{

        padding:0 18px;

        font-size:18px;

        line-height:1.7;

    }

}