/* --- 1. GENERAL SECTION & TITLE STYLES --- */
.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #a6e1ff;
    color: #070f43;
    text-align: center;
}


/* --- 2. CONTACT CARD GRID --- */
.contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
}

.contact-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    border: 1px solid #eee;
    width: 320px; /* Added a consistent width for better alignment */
}

.contact-card h3 {
    font-weight: bold;
    color: #070f43;
    margin-top: 0;
}

.contact-card p {
    color: #6c757d;
}


/* --- 3. SPECIFIC CARD CONTENT --- */
.social-icons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Use <span> inside <a>, not <p> */
.social-icons-container a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.social-icons-container svg {
    width: 32px;
    height: 32px;
    transition: opacity 0.3s ease;
}

.social-icons-container a:hover svg {
    opacity: 0.7;
}

.ig { color: #ac2bac; }
.telegram-icon { color: #2aabde; }
.mail-icon { color: #e54646; }

.email-link {
    font-weight: bold;
    font-size: 1.2rem;
    color: #0d6efd;
    text-decoration: none;
    display: block; /* Ensures proper spacing */
    margin-top: 20px;
}

.email-link:hover {
    text-decoration: underline;
}

.location-text p {
    margin: 5px 0;
    line-height: 1.5;
}


/* --- 4. MAP SECTION --- */
.map-section {
    margin-top: 60px;
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    line-height: 0;
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
}