/*********************
	MEET THE TEAM
*********************/
.meet-the-team .section-wrapper {
    padding-bottom: 40px;
    padding-top: 60px; 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.meet-the-team .section-text {
    position: static;
    width: 100%;
}

@media (min-width: 992px) {
    .meet-the-team .section-wrapper {
        padding-bottom: 100px;
        padding-top: 100px; 
    }

    .meet-the-team .section-text {
        position: absolute;
        width: 100%;
        z-index: 1;
    }   

    .meet-the-team .section-text:first-of-type {
        top: 200px;
    }

    .meet-the-team .section-text:last-of-type {
        bottom: 200px;
    }
}

.meet-the-team .section-img-holder {
    width: 320px;
    height: 400px;
    overflow: hidden;  
    align-self: flex-end;
}

@media (min-width: 768px) {
   .meet-the-team .section-img-holder { 
        width: 420px;
        height: 600px;
        align-self: center;
    }
}

@media (min-width: 992px) {
   .meet-the-team .section-img-holder {
        width: 570px;
        height: 750px;
        overflow: hidden;
    }
}

.meet-the-team .section-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*********************
	MEET THE TEAM
*********************/
.team-members {
    padding: 100px 0px;
}

.team-members-wrapper {
    padding: 0 16px;
    border-top: 1px solid var(--text-light);
    border-bottom: 1px solid var(--text-light);
}

@media (min-width: 992px) {
    .team-members {
        padding: 100px 0px;
    }

    .team-members-wrapper {
        padding: 0 85px;
    }
}

.team-members .section-title {
    position: absolute;
    transform: rotate(0);
    top: 42px;
    left: 16px;
}

@media (min-width: 992px) {
    .team-members .section-title {
        position: absolute;
        transform: rotate(-90deg);
        top: 220px;
        left: -33px;
    }
}

.team-member-holder {
    height: 320px;
}

.team-member-holder img {
    filter: saturate(1);
    transition: filter .2s ease;
}

.team-member-info {
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    width: 100%;
    bottom: 0;
    border-top: 2px solid var(--red);
    background: rgba(7, 9, 25, 0.70);

    transition: border-color .2s ease;
}

.team-member-info-bottom {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

.team-member-info-bottom > * {
    min-height: 0;
}

.team-member-holder:hover .team-member-info-bottom {
    grid-template-rows: 1fr;
}

.team-member-holder:hover .team-member-info {
    border-color: var(--red);
}

.team-member-holder:hover img {
    filter: saturate(1);
}

@media (min-width: 992px) {
    .team-member-holder img {
        filter: saturate(0);
    }
    
    .team-member-info-bottom {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
        overflow: hidden;
    }

    .team-member-info-bottom > * {
        min-height: 0;
    }

    .team-member-holder:hover .team-member-info-bottom {
        grid-template-rows: 1fr;
    }

    .team-member-holder:hover .team-member-info {
        border-color: transparent;
    }
    
    .team-member-holder:hover .team-member-info {
        border-color: var(--red);
    }

    .team-member-holder:hover img {
        filter: saturate(1);
    }
}

@media (min-width: 640px) {
    .team-member-holder {
        height: 450px;
    }
}

@media (min-width: 992px) {
    .team-member-holder {
        height: 500px;
        border-bottom: none;
    }
}


/*********************
	    OUR VALUE
*********************/


.value-card {
    cursor: pointer;
    height: min-content;
}

@media (min-width: 992px) {
    .our-values-section .section-wrapper {
        padding-bottom: 40px;
    }
    
    .splide__list {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 16px;
        height: auto;
        width: 100%;
    }

    .value-card-wrapper {
        width: calc((100% - 32px) / 3);
    }
    
    .value-card-wrapper:nth-child(1) {
        padding-top: 30px;
    }
    
    .value-card-wrapper:nth-child(2) {
        padding-top: 180px;
    }
    
    .value-card-wrapper:nth-child(3) {
        padding-top: 70px;
    }
}

@media (min-width: 1200px) {
    .splide__list {
        gap: 24px;
    }
    
    .value-card-wrapper {
        width: calc((100% - 48px) / 3);
    }
}

@media (min-width: 1400px) {
    .splide__list {
        gap: 48px;
    }
    
    .value-card-wrapper {
        width: calc((100% - 96px) / 3);
    }
}

/* text */
.value-card-title {
    opacity: 0;
    padding: 12px 4px;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.value-card-text {
    opacity: 0;
    padding: 12px 4px;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* image wrapper */
.value-card-img {
    position: relative;
}

.value-card-img img {
    width: 100%;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* corners */
.corner {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.corner-tl {
    top: 0;
    left: 0;
    border-top: 2px solid var(--purple);
    border-left: 2px solid var(--purple);
}

.corner-tr {
    top: 0;
    right: 0;
    border-top: 2px solid var(--purple);
    border-right: 2px solid var(--purple);
}

.corner-bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid var(--purple);
    border-left: 2px solid var(--purple);
}

.corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--purple);
    border-right: 2px solid var(--purple);
}

/* hover */
.value-card:hover .value-card-img img {
    filter: grayscale(0%);
}

.value-card:hover .corner {
    width: 20px;
    height: 20px;
    opacity: 1;
}

.value-card:hover .value-card-title {
    opacity: 1;
    transform: translateY(0);
}

.value-card:hover .value-card-text {
    opacity: 1;
    transform: translateY(0);
}

/* mobile */
@media (max-width: 991px) {
    .value-card-title,
    .value-card-text {
        opacity: 1;
        transform: translateY(0);
        text-align: center !important;
    }

    .value-card-img img {
        filter: grayscale(0%);
    }

    .corner {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
}

.carousel-progress {
    visibility: visible;
    width: 200px;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    margin: 24px auto 0 auto;
    border-radius: 50px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .carousel-progress {
        visibility: hidden;
    }
}

.carousel-progress-bar {
    height: 100%;
    background: linear-gradient(125deg, #DC2626 8.09%, #581C87 92.87%);
    width: 0%;
    transition: width 0.3s ease;
}