.contact-container {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: var(--space-xl) var(--space-md);
    }

    .contact-header {
        margin-bottom: var(--space-xl);
    }

    .contact-header p {
        max-width: var(--measure);
        color: var(--color-muted);
        font-size: var(--text-size-sm);
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .contact-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .contact-item span {
        font-size: var(--text-size-sm);
        color: var(--color-muted);
    }

    .contact-item a {
        font-size: var(--text-size-md);
        color: var(--color-link);
        text-decoration: none;
        color: var(--color-text);
    }

    .social-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-top: var(--space-md);
    }

    .social-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .social-link:hover {
        filter: var(--icon-filter-hover);
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .contact-form textarea {
        min-height: 140px;
        resize: vertical;
    }

    .contact-form button {
        align-self: flex-end;

    }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 768px) {
        .contact-grid {
            grid-template-columns: 1fr;
        }

        .contact-container {
            padding: var(--space-xs);
        }

        .contact-info {
            gap: var(--space-sm);
            padding: var(--space-xs);
        }
    }



    



    /* Contact Page */


.contact-container{

    width:85%;
    margin:auto;
    padding:40px;

}


.contact-container h2{

    font-size:28px;

    margin-bottom:25px;

}



.contact-card{

    background:white;

    padding:25px;

    border-radius:12px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);

    margin-bottom:30px;

}



.contact-card h3{

    font-size:24px;

}



.role{

    margin:10px 0;

    color:#555;

}



.contact-info p{

    line-height:2;

}



.contact-info a{

    text-decoration:none;

    color:#2563eb;

}




.social-buttons{

    display:flex;

    gap:20px;

    margin-top:20px;

}



.social-buttons a{

    padding:10px 25px;

    border-radius:8px;

    background:#2563eb;

    color:white;

    text-decoration:none;

}




.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.contact-form input,
.contact-form textarea{


    padding:15px;

    border-radius:8px;

    border:1px solid #ddd;

    font-size:15px;

}



.contact-form textarea{

    height:130px;

}



.contact-form button{

    width:160px;

    padding:12px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#2563eb;

    color:white;

}






/* ================= CONTACT FINAL DESIGN ================= */


/* Email Phone Location Icons */

.contact-icon{

    width:26px;

    height:26px;

    vertical-align:middle;

    margin-right:12px;

}


/* Github Linkedin buttons */

.social-buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;


    background:white;

    color:#222;


    border:1px solid #ddd;

    border-radius:10px;


    padding:12px 28px;


    box-shadow:0 3px 10px rgba(0,0,0,0.10);


    transition:0.3s;

}


/* github linkedin image */

.social-buttons img{

    width:25px;

    height:25px;

}



.social-buttons a:hover{

    transform:translateY(-4px);

    box-shadow:0 6px 18px rgba(0,0,0,0.15);

}



/* Send Message Button Premium */

.contact-form button{

    background:linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );


    color:white;

    font-weight:600;

    border-radius:25px;


    transition:0.3s;

}



.contact-form button:hover{

    transform:scale(1.05);

    box-shadow:0 6px 18px rgba(37,99,235,0.4);

}
















/* Mobile Contact Fix */

@media screen and (max-width:768px){

    .contact-container{

        width:100%;
        padding:20px;
        box-sizing:border-box;

    }

        .contact-container h2{

        margin-bottom:15px;

    }


    .contact-card{

        margin-bottom:15px;

    }


    .contact-card{

        width:100%;
        max-width:260px;
        margin:auto;

    }

    .contact-form{

    margin-top:25px;

}


    .contact-card p,
    .contact-card a{

        word-break:break-word;
        overflow-wrap:anywhere;

    }


    /* Github Linkedin Fix */

    .social-buttons{

        display:flex !important;

        flex-direction:row !important;

        justify-content:center !important;

        align-items:center !important;

        gap:15px !important;

        flex-wrap:nowrap !important;

    }


    .social-buttons a{

        width:120px !important;

        height:45px !important;


        display:flex !important;

        flex-direction:row !important;


        justify-content:center !important;

        align-items:center !important;


        gap:8px !important;


        padding:8px 12px !important;


        white-space:nowrap !important;

        word-break:normal !important;

        overflow-wrap:normal !important;

    }


    .social-buttons img{

        width:22px !important;

        height:22px !important;

    }


    .contact-form button{

        align-self:center;

    }

}