/* ========================================
CONTACTS HERO
========================================= */

.contacts-hero {


max-width: 850px;

margin: 20px auto 70px;

text-align: center;


}

.contacts-hero h1 {


margin: 0 0 20px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 34px;
line-height: 1.25;


}

.contacts-hero p {


max-width: 720px;

margin: 0 auto;

color: #627D98;

font-size: 17px;
line-height: 1.7;


}

/* ========================================
CONTACTS SECTION
========================================= */

.contacts-section {


margin-bottom: 80px;


}

.contacts-grid {


display: grid;

grid-template-columns: 1fr 1fr;

gap: 22px;


}

/* ========================================
CONTACTS INFO
========================================= */

.contacts-info {


display: flex;

flex-direction: column;

gap: 14px;


}

.contacts-heading {


margin-bottom: 18px;


}

.contacts-heading h2 {


margin-bottom: 14px;


}

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

.contact-card {


display: flex;

align-items: flex-start;

gap: 20px;

padding: 24px;

background: #ffffff;

border: 1px solid #E6EDF3;

border-radius: 14px;

box-shadow: 0 4px 18px rgba(16, 42, 67, 0.06);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;


}

.contact-card:hover {


transform: translateY(-3px);

border-color: #B8DDF5;

box-shadow: 0 10px 28px rgba(16, 42, 67, 0.10);


}

/* ========================================
CONTACT ICON / NUMBER
========================================= */

.contact-icon {


flex: 0 0 auto;

width: 42px;
height: 42px;

display: flex;

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

border-radius: 8px;

background: #102A43;

color: #ffffff;

font-family: 'Manrope', sans-serif;

font-size: 12px;
font-weight: 700;


}

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

.contact-content {


flex: 1;


}

.contact-label {


display: block;

margin-bottom: 7px;

color: #3fa9f5;

font-family: 'Manrope', sans-serif;

font-size: 10px;
font-weight: 700;

letter-spacing: 1.5px;


}

.contact-content h3 {


margin: 0 0 7px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 17px;
line-height: 1.35;


}

.contact-content p {


margin: 0;

color: #627D98;

font-size: 14px;

line-height: 1.6;


}

.contact-content a {


color: #334E68;

text-decoration: none;

transition: color 0.2s ease;


}

.contact-content a:hover {


color: #3fa9f5;


}

.contact-position {


margin-bottom: 8px !important;


}

.contact-phone {


display: inline-block;

margin-top: 3px;

color: #102A43 !important;

font-family: 'Manrope', sans-serif;

font-size: 15px;

font-weight: 700;


}

/* ========================================
MAP
========================================= */

.contacts-map {


display: flex;

flex-direction: column;

min-height: 100%;

padding: 30px;

background: #F4F8FB;

border-radius: 16px;


}

.map-header {


margin-bottom: 22px;


}

.map-header .section-label {


margin-bottom: 8px;


}

.map-header h2 {


margin: 0 0 10px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 25px;

line-height: 1.3;


}

.map-header p {


max-width: 500px;

margin: 0;

color: #627D98;

font-size: 14px;

line-height: 1.6;


}

/* ========================================
MAP CONTAINER
========================================= */

.map-container {


flex: 1;

min-height: 480px;

overflow: hidden;

background: #ffffff;

border: 1px solid #D9E2EC;

border-radius: 12px;


}

.map-container iframe {


display: block;

width: 100%;
height: 100%;


}

/* ========================================
CTA
========================================= */

.contacts-cta {


max-width: 900px;

margin: 0 auto 60px;

padding: 55px 40px;

text-align: center;

background:
    linear-gradient(
        135deg,
        #F8FBFE 0%,
        #FFFFFF 100%
    );

border: 1px solid #C9E5F7;

border-radius: 16px;


}

.contacts-cta h2 {


margin: 0 0 15px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 28px;

line-height: 1.3;


}

.contacts-cta p {


max-width: 680px;

margin: 0 auto 28px;

color: #627D98;

font-size: 16px;

line-height: 1.7;


}

.contacts-cta-actions {


display: flex;

justify-content: center;

align-items: center;

gap: 12px;


}

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

.contacts-button {


display: inline-flex;

align-items: center;

justify-content: center;

gap: 9px;

min-width: 150px;

padding: 13px 22px;

background: #102A43;

border: 1px solid #102A43;

border-radius: 8px;

color: #ffffff !important;

font-family: 'Manrope', sans-serif;

font-size: 14px;
font-weight: 700;

text-decoration: none !important;

transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;


}

.contacts-button span {


font-size: 18px;

transition: transform 0.2s ease;


}

.contacts-button:hover {


background: #163B5C;

border-color: #163B5C;

transform: translateY(-2px);


}

.contacts-button:hover span {


transform: translateX(4px);


}

/* ========================================
OUTLINE BUTTON
========================================= */

.contacts-button-outline {


background: #ffffff;

border-color: #B8DDF5;

color: #102A43 !important;


}

.contacts-button-outline:hover {


background: #F4F8FB;

border-color: #9CCCE9;


}

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

@media (max-width: 900px) {


.contacts-grid {

    grid-template-columns: 1fr;

}

.contacts-map {

    min-height: auto;

}


}

@media (max-width: 768px) {


.contacts-hero {

    margin-bottom: 50px;

}

.contacts-hero h1 {

    font-size: 25px;

}

.contacts-hero p {

    font-size: 15px;

}

.contacts-section {

    margin-bottom: 55px;

}

.contact-card {

    padding: 21px;

    gap: 16px;

}

.contacts-map {

    padding: 22px;

}

.map-header h2 {

    font-size: 23px;

}

.map-container {

    min-height: 350px;

}

.contacts-cta {

    padding: 40px 22px;

    margin-bottom: 40px;

}

.contacts-cta h2 {

    font-size: 24px;

}

.contacts-cta p {

    font-size: 14px;

}


}

@media (max-width: 480px) {


.contacts-hero {

    margin-top: 10px;

}

.contact-card {

    padding: 19px;

}

.contact-icon {

    width: 38px;
    height: 38px;

    font-size: 11px;

}

.contact-content h3 {

    font-size: 16px;

}

.contacts-cta-actions {

    flex-direction: column;

    align-items: stretch;

}

.contacts-button {

    width: 100%;

}

}