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

.contact{

    background:white;

}

.contact-wrapper{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;

}

.contact-list{

    flex:2;

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

    gap:20px;

}

.contact-mascot{

    position: relative;

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

}

.contact-mascot img{

    z-index: 2;
    width:100%;
    max-width:320px;
    transition:.4s;
    filter: drop-shadow(14px 10px 8px rgba(0, 0, 0, 0.22));

}

.contact-mascot::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 25px;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    filter: blur(10px);
    z-index: 1;
}

.contact-mascot img:hover{

    transform:translateY(-10px);

}

.contact-mascot img{

    animation:float 3s ease-in-out infinite;

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.contact-item i{

    width:60px;

    height:60px;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:22px;

}

.contact-item h3{

    margin-bottom:8px;

}

.contact-item p{

    color:var(--gray);

    line-height:1.7;

}

/* .contact-map iframe{
    width:100%;
    height:100%;
    min-height:380px;
    border:none;
    border-radius:18px;
    box-shadow:var(--shadow);
} */

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap: 25px;
    margin-top:45px;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#f8f8f8;
    padding:20px;
    border-radius:16px;
    text-decoration:none;
    transition:.35s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.contact-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#F4B53F;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    transition:.35s;
}

.contact-card:hover .contact-icon{
    transform:rotate(10deg) scale(1.08);
}

.contact-info small{
    color:#777;
    font-size:13px;
}

.contact-info h4{
    color:#222;
    margin-top:5px;
    font-size:17px;
}

.cpikhwan{
    padding:10px;
}

.cpakhwat{
    padding:10px;
}