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

.contact{

    background:var(--background);

    transition:var(--transition);

}


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

.contact-card{

    display:grid;

    grid-template-columns:1.3fr .9fr;

    gap:80px;

    padding:60px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:32px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}


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

.contact-content h2{

    margin-bottom:20px;

    color:var(--text);

}

.contact-content p{

    margin-bottom:35px;

    color:var(--text-light);

    line-height:1.8;

}


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

.contact-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


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

.contact-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:35px;

    border-radius:24px;

    background:var(--surface-light);

    border:1px solid var(--border);

}

.contact-info h3{

    margin-bottom:25px;

    color:var(--text);

}

.contact-info ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-info li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text-light);

    line-height:1.6;

}


/*==================================================
  LINKS
==================================================*/

.contact-info a{

    color:var(--text);

    text-decoration:none;

    transition:var(--transition);

    font-weight:500;

    word-break:break-word;

}

.contact-info a:hover{

    color:var(--primary);

}


/*==================================================
  SOCIAL ICONS
==================================================*/

.social-links{

    display:flex;

    gap:16px;

    margin-top:30px;

}

.social-links a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--surface);

    border:1px solid var(--border);

    color:var(--text);

    transition:var(--transition);

}

.social-links a:hover{

    transform:translateY(-4px);

    background:var(--primary);

    color:#ffffff;

}


/*==================================================
  LIGHT MODE
==================================================*/

[data-theme="light"] .contact-card{

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

[data-theme="light"] .contact-info{

    background:#f8fafc;

}

[data-theme="light"] .social-links a{

    background:#ffffff;

}


/*==================================================
  RESPONSIVE
==================================================*/

@media(max-width:992px){

    .contact-card{

        grid-template-columns:1fr;

        gap:50px;

    }

}

@media(max-width:768px){

    .contact-card{

        padding:35px;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .contact-buttons a{

        width:100%;

    }

}
.footer-brand .btn-primary{

    margin-top:30px;

    display:inline-flex;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.footer-links h4{

    margin-bottom:18px;

}

.footer-links a{

    margin-bottom:6px;

}

.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px 0;

    text-align:center;

}