/* ==========================================
   RESET
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==========================================
   BODY
========================================== */

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fa;
}


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

.quote-section {
    width: 100%;
    padding: 40px 20px;
}


/* ==========================================
   SLIDER
========================================== */

.quote-slider {
    width: 100%;
    max-width: 1200px;
    height: 430px;

    margin: auto;

    position: relative;

    overflow: hidden;

    border-radius: 18px;

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


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

.quote-card {

    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    display: flex;

    align-items: center;

    padding: 40px 45px;

    opacity: 0;

    transform: translateX(100%);

    transition:
        transform 0.8s ease,
        opacity 0.8s ease;

    pointer-events: none;

    overflow: hidden;
}


/* ==========================================
   CARD BACKGROUNDS
========================================== */


/* CARD 1 - BLUE */

.quote-card.card-blue {

    background:
        linear-gradient(
            135deg,
            #0057b8,
            #003b73
        );
}


/* CARD 2 - GREEN */

.quote-card.card-green {

    background:
        linear-gradient(
            135deg,
            #078930,
            #045d20
        );
}


/* CARD 3 - GOLD */

.quote-card.card-gold {

    background:
        linear-gradient(
            135deg,
            #d6a600,
            #9b7500
        );
}


/* ==========================================
   DECORATIVE BACKGROUND
========================================== */

.quote-card::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 400px;

    border-radius: 50%;

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

    right: 20%;

    top: -200px;

    pointer-events: none;
}


.quote-card::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

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

    left: -150px;

    bottom: -150px;

    pointer-events: none;
}


/* ==========================================
   ACTIVE CARD
========================================== */

.quote-card.active {

    opacity: 1;

    transform: translateX(0);

    pointer-events: auto;
}


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

.quote-content {

    width: 65%;

    color: white;

    position: relative;

    z-index: 5;

    animation: textAppear 0.9s ease;
}


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

@keyframes textAppear {

    from {

        opacity: 0;

        transform: translateY(25px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


/* ==========================================
   QUOTE ICON
========================================== */

.quote-icon {

    font-size: 70px;

    line-height: 50px;

    font-weight: bold;

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

    margin-bottom: 10px;
}


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

.quote-text {

    font-size: 20px;

    line-height: 1.5;

    margin-bottom: 20px;

    max-width: 700px;

    font-weight: 400;
}


.quote-text strong {

    font-weight: 700;

    color: white;
}


/* ==========================================
   PERSON NAME
========================================== */

.quote-content h2 {

    font-size: 27px;

    margin-bottom: 5px;

    font-weight: 700;

    color: white;
}


/* ==========================================
   POSITION
========================================== */

.position {

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

    font-size: 17px;

    font-weight: 600;

    line-height: 1.4;

    max-width: 550px;
}


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

.person-image {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 40%;

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    z-index: 4;
}


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

.person-image img {

    max-width: 100%;

    max-height: 95%;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 10px 20px rgba(0, 0, 0, 0.25)
        );

    animation: personAppear 1s ease;
}


/* ==========================================
   PERSON IMAGE ANIMATION
========================================== */

@keyframes personAppear {

    from {

        opacity: 0;

        transform: translateX(50px);
    }

    to {

        opacity: 1;

        transform: translateX(0);
    }
}


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

.slider-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.3);

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

    backdrop-filter: blur(5px);

    color: white;

    font-size: 22px;

    cursor: pointer;

    z-index: 10;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


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

.slider-btn:hover {

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

    transform:
        translateY(-50%)
        scale(1.08);
}


/* ==========================================
   PREVIOUS
========================================== */

.prev {

    left: 15px;
}


/* ==========================================
   NEXT
========================================== */

.next {

    right: 15px;
}


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

.slider-dots {

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;

    z-index: 20;
}


/* ==========================================
   DOT
========================================== */

.dot {

    width: 9px;

    height: 9px;

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

    border-radius: 50%;

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


/* ==========================================
   ACTIVE DOT
========================================== */

.dot.active {

    width: 25px;

    border-radius: 10px;

    background: white;
}


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

@media (max-width: 768px) {

    .quote-section {

        padding: 20px 10px;
    }


    .quote-slider {

        height: 540px;

        border-radius: 15px;
    }


    .quote-card {

        padding: 30px 25px;

        align-items: flex-start;
    }


    .quote-content {

        width: 100%;

        padding-right: 5px;
    }


    .quote-icon {

        font-size: 55px;

        line-height: 40px;

        margin-bottom: 8px;
    }


    .quote-text {

        font-size: 16px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .quote-content h2 {

        font-size: 21px;

        margin-bottom: 4px;
    }


    .position {

        font-size: 14px;

        max-width: 90%;
    }


    .person-image {

        width: 45%;

        height: 40%;

        right: 10px;

        bottom: 0;
    }


    .person-image img {

        max-height: 100%;
    }


    .slider-btn {

        width: 35px;

        height: 35px;

        font-size: 18px;
    }


    .prev {

        left: 10px;
    }


    .next {

        right: 10px;
    }


    .slider-dots {

        bottom: 12px;
    }

}


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

@media (max-width: 480px) {

    .quote-section {

        padding: 15px 8px;
    }


    .quote-slider {

        height: 560px;
    }


    .quote-card {

        padding: 25px 20px;
    }


    .quote-text {

        font-size: 15px;

        line-height: 1.45;
    }


    .quote-content h2 {

        font-size: 19px;
    }


    .position {

        font-size: 13px;
    }


    .person-image {

        width: 50%;

        height: 35%;
    }


    .slider-btn {

        width: 32px;

        height: 32px;

        font-size: 16px;
    }

}