/* ==========================================
   Principles
========================================== */

.principles{

    background:var(--clr-primary);

}

.principles .section-header{

    margin-bottom:var(--space-2xl);

}

.principles .section-header__title{

    color:var(--clr-white);

}

/* ==========================================
   Mission & Vision
========================================== */

.principles__cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:var(--space-xl);

    margin-bottom:var(--space-section);

}

.principles__card{

    display:flex;

    flex-direction:column;

    gap:var(--space-md);

    padding:var(--space-xl);

    background:var(--clr-bg-light);

    height:100%;

}

.principles__card h3{

    font-size:var(--fs-h2);

    color:var(--clr-heading);

    line-height:1.15;

}

.principles__card p{

    line-height:1.8;

}

/* ==========================================
   Values Carousel
========================================== */

.values-slider{

    margin-top:var(--space-2xl);

    overflow:hidden;

}

.values-slider .embla__container{

    display:flex;

    gap:var(--space-lg);

}

.values-slider .embla__slide{

    flex:0 0 calc((100% - (2 * var(--space-lg))) / 3);

    min-width:0;

}

.values-slider .signup-card{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    min-height:520px;

}

.values-slider .signup-card__content{

    padding:var(--space-xl);

}

.values-slider .signup-card__image{

    margin-top:auto;

}

.values-slider .signup-card__image img{

    width:100%;

    height:220px;

    object-fit:cover;

}

/* ==========================================
   Icon
========================================== */

.process-card__icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    margin-bottom:var(--space-lg);

    border-radius:50%;

    background:rgba(255,130,1,.10);

    color:var(--clr-accent);

}

.process-card__icon svg{

    width:40px;

    height:40px;

    stroke-width:2;

}

/* ==========================================
   CTA
========================================== */

.principles__cta{

    display:flex;

    justify-content:center;

    margin-top:var(--space-2xl);

}

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

@media (max-width:991px){

    .principles__cards{

        grid-template-columns:1fr;

    }

    .values-slider .embla__slide{

        flex:0 0 70%;

    }

}

@media (max-width:768px){

    .values-slider .embla__slide{

        flex:0 0 92%;

    }

}