/*==================================================
WHY US
==================================================*/

.why-us{

    padding: var(--space-96) 0;

    background: var(--color-white);

}

/*=========================================
LAYOUT
=========================================*/

.why-us__container{

    display:grid;

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

    align-items:center;

    gap:var(--space-64);

}

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

.why-us__image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

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

}

.why-us__image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

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

.why-us__content{

    display:flex;

    flex-direction:column;

}

/*=========================================
HEADER
=========================================*/

.why-us__subtitle{

    display:inline-block;

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

    color:var(--color-secondary);

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-semibold);

    text-transform:uppercase;

    letter-spacing:1px;

}

.why-us__title{

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

    color:var(--color-primary);

    max-width:620px;

}

.why-us__description{

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

    color:var(--color-text-light);

    line-height:1.8;

    max-width:620px;

}

/*=========================================
BENEFITS LIST
=========================================*/

.why-us__list{

    display:grid;

    gap:var(--space-20);

}

/*=========================================
BENEFIT ITEM
=========================================*/

.why-us__item{

    display:flex;

    align-items:flex-start;

    gap:var(--space-20);

    padding:var(--space-24);

    background:var(--color-white);

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

    border-radius:var(--radius-lg);

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

}

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

.why-us__icon{

    flex-shrink:0;

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(247,148,29,.10);

    color:var(--color-secondary);

    font-size:1.4rem;

}

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

.why-us__info{

    flex:1;

}

.why-us__heading{

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

    color:var(--color-primary);

    font-size:var(--font-size-lg);

    font-weight:var(--font-weight-semibold);

}

.why-us__text{

    margin:0;

    color:var(--color-text-light);

    font-size:var(--font-size-sm);

    line-height:1.7;

}

/*=========================================
HOVER BENEFICIOS
=========================================*/

.why-us__item{

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);

}

.why-us__item:hover{

    transform:translateX(8px);

    border-color:var(--color-secondary);

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

}

.why-us__item:hover .why-us__icon{

    background:var(--color-secondary);

    color:var(--color-white);

    transform:scale(1.08);

}

.why-us__icon{

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal);

}

.why-us__image img{

    transition:
        transform .6s ease;

}

.why-us__image:hover img{

    transform:scale(1.04);

}

/*=========================================
FOOTER
=========================================*/

.why-us__footer{

    margin-top:var(--space-48);

}

.why-us__footer .btn{

    min-width:260px;

}

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

@media (max-width:1200px){

    .why-us__container{

        gap:var(--space-48);

    }

}

@media (max-width:992px){

    .why-us__container{

        grid-template-columns:1fr;

    }

    .why-us__image{

        order:1;

    }

    .why-us__content{

        order:2;

    }

    .why-us__image img{

        max-width:700px;

        margin:0 auto;

    }

}

@media (max-width:768px){

    .why-us{

        padding:var(--space-80) 0;

    }

    .why-us__list{

        gap:var(--space-16);

    }

    .why-us__item{

        padding:var(--space-20);

    }

}

@media (max-width:576px){

    .why-us__content{

        text-align:center;

    }

    .why-us__description{

        max-width:100%;

    }

    .why-us__item{

        flex-direction:column;

        text-align:center;

    }

    .why-us__footer .btn{

        width:100%;

    }

}

/*=========================================
ACCESSIBILITY
=========================================*/

.why-us__item:focus-within{

    outline:2px solid var(--color-secondary);

    outline-offset:4px;

}

/*=========================================
PERFORMANCE
=========================================*/

.why-us__item{

    will-change:transform;

}

.why-us__image img{

    will-change:transform;

}