/* CONTACT PAGE SPECIFIC STYLES */

:root {
    --primary-color: #004a99; /* Deep Blue */
    --accent-color: #ff9900; /* Orange/Gold */
    --light-bg: #f8f8f8;
}

/* --- 1. Page Title Hero --- */
.contact-banner {
    /* Placeholder for the large image banner from the video */
    background-image: url('images/1700717635085.jpeg');
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
    background-blend-mode: darken;
    color: white;
    padding: 110px 0 80px ;
    text-align: center;
}
.contact-banner h1 {
    font-size: 3.5em;
    color: white;
    margin-bottom: 10px;
}
.breadcrumb a, .breadcrumb {
    color: #ddd;
    text-decoration: none;
}
/* ======================================================= */
/* MEDIA QUERIES for RESPONSIVENESS (Mobile/Tablet View)   */
/* ======================================================= */

/* --- Default break point for smaller screens (e.g., tablets and large phones) --- */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px; /* Reduce padding on smaller screens */
    }
    
    /* Adjustments for the main navigation */
    .navbar {
        padding: 15px 20px;
    }
    .nav-links {
        gap: 20px; /* Reduce spacing between navigation links */
    }
    
    /* General section padding */
    .about-intro-section, 
    .contact-content-section, 
    .services-tabs-section,
    .appointment-section {
        padding: 60px 20px;
    }
}


/* --- Primary break point for mobile devices (most common adjustment area) --- */
@media (max-width: 768px) {
    
    /* 1. Header and Navigation */
    .navbar {
        flex-direction: column; /* Stack logo and navigation vertically */
        align-items: flex-start;
    }
    .logo {
        margin-bottom: 10px;
    }
    .nav-links {
        /* Hide the main menu by default on mobile if using a hamburger icon */
        /* display: none; */ 
        /* Or, show them stacked for a simple mobile menu */
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    .cta-appointment {
        display: block; /* Make the CTA button full width */
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    /* 2. Contact Page Layout (Two Columns -> One Column) */
    .contact-content-section {
        flex-direction: column;
    }
    .contact-details-panel, 
    .contact-form-panel {
        width: 100%; /* Take up the full width */
    }
    .form-row {
        flex-direction: column; /* Stack form inputs vertically */
        gap: 0;
    }
    .form-row input,
    .form-row select {
        margin-bottom: 15px; /* Add space between stacked inputs */
    }
    .contact-split {
        flex-direction: column; /* Stack contact/hours blocks */
        gap: 20px;
    }

    /* 3. About Us Layout (Two Columns -> One Column) */
    .about-intro-section,
    .visa-stats-section,
    .faq-experts-section {
        flex-direction: column;
    }
    /* Reverse order for the 'About Us' intro for better flow on mobile */
    .about-intro-section {
        flex-direction: column-reverse; 
    }
    .intro-text, .intro-image-grid,
    .visa-stats-image, .visa-stats-content,
    .faq-column, .ask-experts-column {
        width: 100%;
        margin-bottom: 20px;
    }
    .intro-image-grid {
        grid-template-columns: 1fr; /* Stack images vertically */
    }
    .approval-rate-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 4. Services Page Tabs (Sidebar -> Full Width Stack) */
    .services-content-wrapper {
        flex-direction: column; /* Stack tabs and content */
        gap: 20px;
    }
    .services-sidebar {
        width: 100%; /* Tabs take full width */
        display: flex; /* Makes tabs horizontal */
        flex-wrap: wrap; /* Allows tabs to wrap onto multiple lines */
        justify-content: center;
    }
    .service-tab {
        width: 48%; /* Adjust width to fit two tabs per row (or 100% for stacking) */
        margin: 5px 1%;
        border-left: none !important; /* Remove left border decoration */
        border-radius: 5px;
    }
    .service-tab.active {
        border-bottom: 3px solid var(--accent-color); /* Use bottom border for active state */
    }
    .service-list {
        flex-direction: column; /* Stack service lists vertically */
        gap: 15px;
    }
    .service-list ul {
        width: 100%;
    }
    
    /* 5. Appointment Page Grid (Multiple Columns -> One Column) */
    .appointment-grid {
        grid-template-columns: 1fr; /* One column for all cards */
    }

    /* 6. Footer Layout */
    .footer-main {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}

/* --- 2. Contact Form & Details Layout --- */
.contact-form-details-section {
    display: flex;
    gap: 40px;
    padding: 80px 20px;
    align-items: flex-start; /* Aligns content to the top */
}

/* Left Panel (Details) */
.contact-details-panel {
    flex: 1;
    min-width: 45%;
    padding: 0; /* No padding needed around the whole panel */
}
.panel-tag {
    display: block;
    color: var(--primary-color);
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.contact-details-panel h2 {
    font-size: 2em;
    line-height: 1.2;
    margin-bottom: 20px;
}
.contact-block {
    margin-top: 30px;
}
.contact-block h3 {
    font-size: 1.1em;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.contact-block p {
    margin: 5px 0;
    line-height: 1.4;
}
.contact-block strong {
    font-weight: bold;
}
.contact-split {
    display: flex;
    gap: 40px;
}
.contact-split .contact-block {
    flex: 1;
}

/* Right Panel (Form) */
.contact-form-panel {
    flex: 1;
    min-width: 45%;
    padding: 30px;
    background-color: var(--light-bg); /* Matches the appearance in the video */
    border-radius: 5px;
}
.contact-form-panel h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
}
.contact-form-panel p {
    margin-bottom: 30px;
}

/* Form Styles */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.contact-form-panel input, 
.contact-form-panel select, 
.contact-form-panel textarea {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    background-color: white; /* Ensures input fields are white */
}
.contact-form-panel textarea {
    width: 100%;
    margin-bottom: 25px;
}
.submit-btn {
    width: auto;
    background-color: var(--primary-color);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.submit-btn:hover {
    background-color: #003366;
}

/* --- 3. Map Section --- */
.map-section {
    padding: 0;
    margin-top: 50px;
}
.map-embed-container {
    height: 500px; /* Define height for the map view */
}
.map-embed-container iframe {
    width: 100%;
    height: 100%;
    display: block;
}
/* --- WhatsApp Floating Button Styles --- */
.whatsapp-float {
    position: fixed; /* Makes the button stay in place when scrolling */
    width: 60px;     /* Size of the button */
    height: 60px;
    bottom: 40px;    /* Distance from the bottom of the viewport */
    right: 40px;     /* Distance from the right of the viewport */
    background-color: #23b659; /* WhatsApp Green */
    color: #f1efef;
    border-radius: 50px; /* Makes it a perfect circle */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* Ensures it is above all other content */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #4fee6a; /* Slightly darker green on hover */
}

/* Optional: Add a subtle animation */
.whatsapp-float:hover {
    transform: scale(1.05);
}


/* --- Responsive Adjustment for Small Screens --- */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px; /* Bring it closer to the bottom edge */
        right: 20px; /* Bring it closer to the right edge */
        font-size: 25px;
    }
}