/* ==========================================================================
   TESTIMONIALS.CSS
   Project: Luxury Destination Wedding Videographer
   Author: Cyber Master Studio
   Version: 1.0
   Description: Testimonials section
   ========================================================================== */


/* ==========================================================================
   Section
   ========================================================================== */

.testimonials {
    padding-block: clamp(100px, 16vw, 100px);
}


/* ==========================================================================
   Inner
   ========================================================================== */

.testimonials__inner {
    max-width: 900px;

    margin-inline: auto;

    text-align: center;
}


/* ==========================================================================
   Eyebrow
   ========================================================================== */

.testimonials__inner .eyebrow {
    margin-bottom: 50px;
	font-family: var(--cms-font-sans-sub);
	letter-spacing:0.1em;
	text-transform: uppercase;

    font-size: var(--cms-text-sm);
    font-weight: var(--cms-font-regular);
}

/* ==========================================================================
   Testimonial Transition
   ========================================================================== */

.testimonial {
    display: none;
}

.testimonial.is-active {
    display: block;

    animation: testimonialFadeIn 700ms cubic-bezier(0.22, 1, 0.36, 1);
}


@keyframes testimonialFadeIn {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================================
   Quote
   ========================================================================== */

.testimonials__quote {
    position: relative;

    max-width: 850px;

    margin-inline: auto;
}


/* ==========================================================================
   Quote Mark
   ========================================================================== */

.testimonials__quote-mark {
    display: block;

    margin-bottom: 12px;

    font-family: var(--cms-font-serif);
    font-size: clamp(4rem, 7vw, 6rem);
    font-weight: var(--cms-font-regular);
    line-height: 0.6;

    color: var(--cms-color-accent);
}


/* ==========================================================================
   Blockquote
   ========================================================================== */

.testimonials__quote blockquote {
    margin: 0;

    font-family: var(--cms-font-serif);
    font-size: clamp(3rem, 5vw, 3rem);
    font-weight: var(--cms-font-regular);
    line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;

    color: var(--cms-color-heading);
}


/* ==========================================================================
   Author
   ========================================================================== */

.testimonials__author {
    margin-top: 42px;
}


.testimonials__name {
    margin: 0;

    font-size: var(--cms-text-xs);
    font-weight: var(--cms-font-semibold);
	font-family: var(--cms-font-sans-bot);

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--cms-color-heading);
}


.testimonials__location {
    margin: 8px 0 0;

    
    line-height: 1;
	 font-size: var(--cms-text-xs);
    font-weight: var(--cms-font-semibold);
	font-family: var(--cms-font-sans-bot);

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--cms-color-text);
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.testimonials__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 850px;

    margin: 70px auto 0;

    padding-top: 24px;

    border-top: 1px solid var(--cms-color-border);
}


/* ==========================================================================
   Counter
   ========================================================================== */

.testimonials__counter {
    font-size: var(--cms-text-xs);
    font-weight: var(--cms-font-semibold);
	font-family: var(--cms-font-sans-bot);

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--cms-color-text);
}


/* ==========================================================================
   Arrows
   ========================================================================== */

.testimonials__arrows {
    display: flex;
    gap: 8px;
}


.testimonials__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--cms-color-border);
    background: transparent;

    font: inherit;
    color: var(--cms-color-heading);

    cursor: pointer;

    transition:
        background-color var(--cms-transition-fast),
        color var(--cms-transition-fast),
        border-color var(--cms-transition-fast);
}


.testimonials__arrow:hover {
    background-color: var(--cms-color-heading);

    border-color: var(--cms-color-heading);

    color: var(--cms-color-background);
}


.testimonials__arrow:focus-visible {
    outline: 2px solid var(--cms-color-accent);
    outline-offset: 5px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {

    .testimonials {
        padding-block: 60px;
    }


    .testimonials__inner .eyebrow {
		font-size: 16px;
        margin-bottom: 40px;
		
    }
	
	.testimonials__quote blockquote {
        font-size: clamp(2rem, 13vw, 2rem);
        line-height: 1.2;
		margin-left: 40px;
		margin-right: 40px;
    }


    .testimonials__navigation {
        margin-top: 60px;
    }
	
	
	.testimonials__author {
    margin-top: 42px;
	font-size: 14px;
}


.testimonials__name {
    

    font-size: 12px;
}

.testimonials__location {
    
	 font-size: 12px;
}

.testimonials__counter {
    font-size: var(--cms-text-base);
    
}

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {

    .testimonials {
        padding-block: 50px;
    }


    .testimonials__inner {
        max-width: 100%;
    }


    .testimonials__inner .eyebrow {
        margin-bottom: 35px;
		font-size: 14px;
    }


    .testimonials__quote blockquote {
        font-size: clamp(2rem, 13vw, 2rem);
        line-height: 1.08;
    }


    .testimonials__quote-mark {
        font-size: 4rem;
    }


    .testimonials__author {
        margin-top: 34px;
		font-size: 10px;
    }
	
	.testimonials__name {
    

    font-size: 10px;
}

.testimonials__location {
    
	 font-size: 10px;
}

.testimonials__counter {
    font-size: var(--cms-text-xs);
    
}


    .testimonials__navigation {
        margin-top: 50px;
    }

}