/* ==========================
   Contact Page
========================== */

.contact-card{

    background:#fff;

    border-radius:25px;

    padding:25px;

    margin:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.contact-header{

    text-align:center;

    margin-bottom:25px;

}

.profile-image{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    padding:5px;

    background:linear-gradient(135deg,#1976D2,#00BCD4,#4CAF50);

    box-shadow:0 8px 20px rgba(0,0,0,.20);

    margin-bottom:18px;

}

.profile-name{

    font-size:30px;

    font-weight:700;

    color:#222;

    margin-bottom:6px;

}

.profile-role{

    color:#1976D2;

    font-size:18px;

    line-height:1.8;

    font-weight:600;

    margin-bottom:22px;

}

.contact-info{

    margin-top:25px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    background:#f8f8f8;

    border-radius:15px;

    padding:15px;

    margin-bottom:12px;

    font-size:17px;

}

.contact-item span{

    font-size:28px;

}

.social-title{

    text-align:center;

    margin:30px 0 15px;

    font-size:22px;

    font-weight:bold;

}

.social-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.social-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    height:54px;

    border-radius:16px;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:bold;

    margin-bottom:14px;

    transition:.25s;

}

.social-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(0,0,0,.18);

}

.facebook{

    background:#1877F2;

}

.tiktok{

    background:#000;

}

.twitter{

    background:#111;

}

.youtube{

    background:#FF0000;

}

.website{

    background:#009688;

}

.contact-footer{

    margin-top:35px;

    text-align:center;

    color:#777;

    font-size:15px;

    line-height:1.8;

}

.contact-footer strong{

    color:#1976D2;

}