/* ==========================================
   ABOUT
========================================== */

.about{

    padding:140px 0;

    background:var(--color-white);

}

.about__container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.about__media{

    position:relative;

    min-height:620px;

}

.about__image{

    overflow:hidden;

    border-radius:36px;

    transition:
        transform var(--transition);
    
        box-shadow:
        0 20px 50px rgba(0,0,0,.10);

}

.about__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.about__image--main{
    
    width: 68%;
    aspect-ratio:4/5;

}

.about__image--secondary{

    width:55%;

    position:absolute;

    right:0;

    bottom: 140px;

    z-index:2;

    border-radius:30px;

    overflow:hidden;

    transition:
        transform .45s ease;

}

.about__experience{

    position:absolute;

    left:30px;
    
    bottom:25px;

    width: 250px;

    padding: 36px;

    border-radius:28px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.35);

    text-align:center;

    z-index:3;

    transition:
    transform var(--transition);
    
    box-shadow:
    0 16px 40px rgba(0,0,0,.12);

}

.about__experience h3{

    font-size:3.4rem;

    color:var(--color-primary);

}

.about__experience span{

    color:var(--color-muted);

    font-size:1.1rem;

}

.about__content{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.about__features{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.feature-card{

    display:flex;

    gap:20px;

    align-items:flex-start;
    
    transition:
        transform var(--transition);

}

.feature-card__icon{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(176,138,84,.12);

    color:var(--color-primary);

    font-size:20px;

    font-weight:bold;

}

.about .btn{

    width:420px;
    max-width:100%;

}

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



.about__image:hover{

    transform:
        translateY(-10px)
        scale(1.015);

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

}

.about__image--secondary:hover{

    transform:
        translateY(-8px)
        rotate(-1deg);

}

.about__experience:hover{

    transform:translateY(-6px);

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

}

.feature-card:hover{

    transform:translateX(10px);

}

/* ==========================================
   TABLET
========================================== */

@media (max-width:992px){

    .about{

        padding:100px 0;

    }

    .about__container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about__media{

        min-height:auto;

    }

    .about__image--main{

        width:80%;

    }

    .about__image--secondary{

        width:55%;

    }

}

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

@media (max-width:768px){

    .about{

        padding:80px 0;

    }

    .about__content{

        text-align:center;

        align-items:center;

    }

    .about__features{

        width:100%;

    }

    .feature-card{

        text-align:left;

        align-items:center;

    }

    .about__experience{

        left:50%;

        transform:translateX(-50%);

        bottom:-20px;

    }

    .about__image--main{

    width:100%;

    }

    .about__image--secondary{

    width:70%;

    }

    .about .btn{

        width:100%;

    }

}