/* ==========================================
   CONTACT SECTION
========================================== */

#contact{
    width:100%;
    padding:120px 20px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.contact-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* ==========================================
   CARD
========================================== */

.contact-card{

    width:90px;
    height:90px;

    border-radius:22px;

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

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

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

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    cursor:pointer;

    transition:
        width .45s ease,
        background .35s ease,
        border-color .35s ease;

}

/* ==========================================
   LETTER
========================================== */

.front{

    font-family:'Cormorant Garamond',serif;

    font-size:38px;

    color:#F5F1E8;

    transition:.35s;

}

/* ==========================================
   SERVICE
========================================== */

.service{

    position:absolute;

    left:24px;

    right:24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    opacity:0;

    transform:translateX(25px);

    transition:.35s;

}

.icon{

    font-size:24px;

}

.name{

    flex:1;

    margin-left:14px;

    font-size:17px;

    color:white;

}

/* ==========================================
   EXPANDED
========================================== */

.contact-card.expand{

    width:260px;

    justify-content:flex-start;

    padding-left:26px;

    border-color:#d8c6a5;

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

}

.contact-card.expand .front{

    opacity:0;

    transform:translateX(-18px);

}

.contact-card.expand .service{

    opacity:1;

    transform:translateX(0);

}

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

@media(max-width:768px){

.contact-wrapper{

    gap:10px;

}

.contact-card{

    width:64px;
    height:64px;

}

.contact-card.expand{

    width:190px;

}

.front{

    font-size:28px;

}

.icon{

    font-size:18px;

}

.name{

    font-size:13px;

}

}