/* Contact Page Specific Styles */

/* Main content padding for navbar */
.contact-main-content {
    padding-top: 80px; /* Space for fixed navbar */
    min-height: calc(100vh - 100px); /* Adjust to push footer down if content is short */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px; /* Ensure space below content */
    overflow: hidden; /* Important for background effects */

    /* Premium Background Design Start */
    background:
    
        /* Layer 1: Subtle diagonal stripes */
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.56) 0px,
            rgba(255, 255, 255, 0.03) 2px,
            transparent 2px,
            transparent 0.5px
        ),
        /* Layer 2: Larger, very faint circles/dots */
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 20%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 20%
        ),
        /* Layer 3: Main gradient - clean and modern */
        linear-gradient(135deg, #e0f7fa 0%, #7e8587 50%, #8c9ba1 100%); /* Softer, professional gradient */

    background-size: auto, 800px 800px, 800px 800px, cover; /* Adjust sizes of pattern layers */
    background-position: 0 0, 0 0, 100% 100%, 0 0; /* Position the circles/dots */
    background-attachment: fixed; /* Keep background fixed while scrolling */
    /* Premium Background Design End */
}

/* Contact Hero Section */
.contact-hero {
    background-color: rgba(255, 255, 255, 0.95); /* Less transparent for better readability */
    color: #e3e3e3;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 50px;
    width: 90%;
    max-width: 900px;
    border-radius: 12px; /* Slightly more rounded */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger, softer shadow */
    backdrop-filter: blur(5px); /* Optional: Adds a subtle blur effect to content behind it */
    background-image: url('c.jpg'); /* ADDED: Your background photo */
    background-size: cover; /* ADDED: Ensures the image covers the entire element */
    background-position: center; /* ADDED: Centers the image */
    background-repeat: no-repeat; /* ADDED: Prevents the image from repeating */
}

.contact-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.8em; /* Slightly larger */
    margin-bottom: 18px;
    color: #6d6767; /* Darker, more premium color */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.05); /* Subtle text shadow */
}

.contact-hero p {
    font-size: 1.4em; /* Slightly larger */
    color: #393939;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Contact Container (now for spacing) */
.contact-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Contact Info Section - Removed the prominent box */
.contact-info-section {
    background: none; /* No background */
    padding: 40px 0; /* Adjust vertical padding */
    border-radius: 0; /* No border-radius */
    box-shadow: none; /* No box shadow */
    text-align: center;
    margin-bottom: 60px;
    backdrop-filter: none; /* No blur */
}

.contact-info-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em; /* Slightly larger heading */
    color: #2c3e50; /* Darker, more premium color */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ddeef2; /* Lighter, subtle border */
    display: inline-block;
}

.contact-info-section h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1; /* Slightly larger heading */
    color: #333;
    margin-top: 30px; /* More space above */
    margin-bottom: 20px;
    text-align: center;
}

.info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; /* More space between items */
    color: #4a4a4a; /* Slightly darker grey for text */
}

.info-item i {
    font-size: 1.5em; /* Larger icons */
    color: #39393998; /* Keep primary blue */
    margin-right: 20px;
    min-width: 30px;
    text-align: center;
}

.info-item p {
    font-size: 1.2em; /* Slightly larger text */
    line-height: 1.6;
}

.info-item a {
    color: #3d3d3d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-item a:hover {
    color: #808487;
    text-decoration: underline;
}

/* Social Links */
.social-links-contact {
    display: flex;
    justify-content: center;
    gap: 45px; /* More space between icons */
    margin-top: 35px;
    margin-bottom: 55px; /* More space below */
}

.social-links-contact a {
    color: #474798;
    font-size: 3.8em; /* Larger icons */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links-contact a:hover {
    color: #6e8196;
    transform: translateY(-7px); /* More pronounced lift */
}

/* Map Embed */
.map-container {
    border-radius: 20px; /* Consistent rounding */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Lighter shadow for map */
    margin-top: 50px;
    border: 1px solid #eee; /* Subtle border for definition */
}

.map-container iframe {
    display: block;
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-hero {
        width: 95%;
        padding: 50px 20px;
        margin-bottom: 40px;
    }
    .contact-hero h1 {
        font-size: 3.2em;
    }
    .contact-info-section {
        padding: 30px; /* Adjust padding for smaller screens */
    }
    .info-item {
        flex-direction: column;
        text-align: center;
        margin-bottom: 30px;
    }
    .info-item i {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 40px 15px;
    }
    .contact-hero h1 {
        font-size: 2.8em;
    }
    .contact-hero p {
        font-size: 1.2em;
    }
    .contact-info-section h2 {
        font-size: 2.2em;
    }
    .contact-info-section h3 {
        font-size: 1.6em;
    }
    .social-links-contact a {
        font-size: 3em;
    }
}

@media (max-width: 480px) {
    .contact-main-content {
        padding-top: 60px;
    }
    .contact-hero h1 {
        font-size: 2.2em;
    }
    .contact-hero p {
        font-size: 1em;
    }
    .contact-info-section {
        padding: 20px;
    }
    .contact-info-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .social-links-contact {
        gap: 25px;
    }
    .social-links-contact a {
        font-size: 2.5em;
    }
}