/* --- Basic Reset & Global Styles --- */
body, h1, p, ul, button {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
}

/* --- Container for centering content --- */
.container, .nav-container, .hero-container {
    width: 1196px;
    margin: 0 auto;
    padding: 0 20px;
}


/* --- Language Switcher in Hero --- */
.language-switcher {
    margin-bottom: 20px; /* Adds space below the switcher */
}

.lang-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #E0E0E0; /* A light grey, less prominent than the main text */
    text-decoration: none;
    margin-right: 15px; /* Space between the links */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.lang-link:last-child {
    margin-right: 0; /* Removes margin from the last link */
}

.lang-link:hover {
    color: #FFFFFF; /* Becomes bright white on hover */
    text-decoration: underline;
}

/* Style for the currently active language link */
.lang-link.active {
    color: #FFE207; /* Your site's yellow color to make it stand out */
    font-weight: 700; /* Make it bold */
    pointer-events: none; /* Prevents clicking the active link */
    cursor: default;
}

/* --- Hero Section (Unchanged) --- */
.hero {
padding-top: 32px;
background-color:rgb(52,52,52);	
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-image {
    flex: 1;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.hero-content {
    flex: 1;
}

.intro-headline {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
}

.hero-content h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
}

.sub-headline {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
    color: #fff;
}

/* --- Hero Section List Styling --- */
.hero-list {
    list-style: none; /* Removes the default bullet points */
    padding: 0;
    margin: 25px 0; /* Adds space above and below the list */
}

.hero-list li {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Roboto Medium */
    font-size: 1.1rem;
    color: #fff;
    padding-left: 30px; /* Creates space for the custom icon */
    position: relative; /* Needed to position the custom icon */
    margin-bottom: 12px; /* Space between list items */
}

/* This creates a custom bullet point using a pseudo-element */
.hero-list li::before {
    content: '✓'; /* You can use text, an emoji, or a symbol */
    color: #FFE207; /* Your site's blue color */
    font-weight: 700; /* Make the checkmark bold */
    position: absolute;
    left: 0; /* Positions it at the beginning of the list item */
    top: 2px; /* Fine-tunes vertical alignment */
    font-size: 1.2rem;
}

/* --- Button --- */
.btn {
    margin-top: 16px;
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
    background-color: #FFE207;
    color: #000;
}

.btn-primary:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .container, .nav-container, .hero-container {
        width: 100%;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }
}

/* --- Mobile Navigation Styles --- */
@media (max-width: 768px) {
    .nav-container {
        justify-content: space-between; /* Puts hamburger on left, nav-wrapper on right */
    }

    .mobile-nav-toggle {
        display: block;
        background: transparent;
        border: 0;
        padding: 0.5em;
        cursor: pointer;
        z-index: 1001; /* Ensure it's on top of other elements */
    }

    .mobile-nav-toggle span,
    .mobile-nav-toggle span::before,
    .mobile-nav-toggle span::after {
        display: block;
        background: #333;
        height: 3px;
        width: 2em;
        border-radius: 2px;
        position: relative;
    }

    .mobile-nav-toggle span::before,
    .mobile-nav-toggle span::after {
        content: '';
        position: absolute;
    }

    .mobile-nav-toggle span::before {
        bottom: 8px;
    }

    .mobile-nav-toggle span::after {
        top: 8px;
    }
    
    /* Hamburger to 'X' animation */
    .nav-container[data-visible="true"] .mobile-nav-toggle span {
        background: transparent;
    }
    .nav-container[data-visible="true"] .mobile-nav-toggle span::before {
        transform: rotate(45deg);
        bottom: 0;
    }
    .nav-container[data-visible="true"] .mobile-nav-toggle span::after {
        transform: rotate(-45deg);
        top: 0;
    }

    .nav-wrapper {
        position: fixed;
        inset: 0 0 0 0; /* Top, Right, Bottom, Left */
        background: #fff;
        padding: 5rem 2rem;
        z-index: 1000;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2rem;
        transform: translateX(100%);
        transition: transform 350ms ease-in-out;
    }

    .nav-links {
        flex-direction: column;
        gap: 1.5rem;
        font-size: 1.5rem;
    }

    .language-selector {
        margin-top: 1rem;
    }
    
    /* This class is toggled by JavaScript to show the menu */
    .nav-container[data-visible="true"] .nav-wrapper {
        transform: translateX(0);
    }
    
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border-width: 0;
    }
}



/* --- New Section: Common Questions --- */
.common-questions-section {
    background-color: #FFE207; /* Your site's yellow background */
    padding: 60px 0;
    text-align: center;
}

.common-questions-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Roboto Bold */
    font-size: 2rem;
    color: #000; /* Black text for contrast on yellow */
    margin-bottom: 40px;
    max-width: 800px; /* Limits the width of the headline for better readability */
    margin-left: auto;
    margin-right: auto;
}

.questions-list {
    list-style: none; /* Removes default bullets */
    padding: 0;
    max-width: 900px; /* Limits the width of the list */
    margin: 0 auto; /* Centers the list */
    text-align: left; /* Aligns the text inside the list items to the left */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates a 2-column layout for the list */
    gap: 20px 40px; /* 20px vertical gap, 40px horizontal gap */
}

.questions-list li {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Roboto Medium */
    font-size: 1.1rem;
    color: #333;
    position: relative;
    padding-left: 35px; /* Creates space for the custom icon */
    line-height: 1.5;
}

/* This creates the custom checkmark icon */
.questions-list li::before {
    content: '✓';
    color: #000; /* Black checkmark */
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.3rem;
}

/* --- Responsive Design for Common Questions Section --- */
@media (max-width: 768px) {
    .common-questions-section {
        padding: 40px 20px;
    }

    .common-questions-section h2 {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

    /* On mobile, switch to a single column layout */
    .questions-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}




/* --- Section 2: Video Section (Updated for iframe) --- */
.video-section {
    background-color: rgb(52,52,52);
    padding: 80px 0;
    text-align: center;
}

.video-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    color: #FFFFFF;
    margin-bottom: 40px;
}

/* This is the key change for responsive iframes */
.video-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px; /* Max width of the video */
    margin: 0 auto;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none; /* Removes the default border on iframes */
}

/* --- Responsive Design for Video Section --- */
@media (max-width: 768px) {
    .video-section {
        padding: 60px 20px;
    }

    .video-section h2 {
        font-size: 2rem;
    }
}

/* --- Section 3: Services Section --- */
.services-section {
    background-color: #FFFFFF; /* White background for the whole section */
    padding: 80px 0;
    text-align: left;
}

.services-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900; /* Roboto Black */
    font-size: 2.5rem;
    color: rgb(52,52,52); /* Blue headline */
    margin-bottom: 10px;
}

.services-section .section-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Roboto Medium */
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px; /* Space between subtitle and grid */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 columns of equal width */
    gap: 30px; /* The space between the cards */
}

.service-card {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Light drop shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Add a subtle hover effect for better interactivity */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.service-card h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Roboto Bold */
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 15px;
}

.service-card p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Roboto Regular */
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* --- Responsive Design for Services Section --- */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 60px 20px;
    }
    
    .services-section h2 {
        font-size: 2rem;
    }

    .services-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* --- Service Card List Styling --- */
.service-card-list {
    list-style: none; /* Removes default bullets */
    padding: 0;
    margin: 20px 0 0 0; /* Adds space above the list */
}

.service-card-list li {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Roboto Medium */
    font-size: 1rem;
    color: #555; /* A slightly darker grey than the main paragraph text */
    padding-left: 25px; /* Space for the icon */
    position: relative;
    margin-bottom: 10px; /* Space between list items */
    line-height: 1.5;
}

/* This creates a custom arrow icon */
.service-card-list li::before {
    content: '→'; /* Right-pointing arrow */
    color: #0057B7; /* Your site's primary blue color */
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.1rem;
}


/* --- Section 4: Call to Action (CTA) --- */
.cta-section {
    background-color: #FFE207; /* Yellow background */
    padding: 200px 0; /* Extra padding to accommodate the overlapping image */
    overflow: hidden; /* Prevents the image from spilling out */
}

.cta-container {
    position: relative; /* This is the anchor for the overlapping image */
    width: 1196px; /* Use the defined site content width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
}

.cta-content-box {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 90px;
    width: 100%; /* Take up 60% of the 1196px container */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1; /* Ensures the white box is on top of the yellow background */
}

.cta-text-content h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900; /* Roboto Black */
    font-size: 2.2rem;
    color: rgb(52,52,52);
    margin-bottom: 15px;
}

.cta-text-content p {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Roboto Medium */
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 30px;
}

.cta-image {
    position: absolute; /* This allows the image to overlap the white box */
    right: 0px; /* Adjust this value to control the overlap */
    top: 26%;
    transform: translateY(-50%); /* Vertically centers the image */
    z-index: 2; /* Ensures the image is on top of the white box */
}

.cta-image img {
    max-height: 565px; /* Adjust height as needed */
    width: auto;
    display: block;
}

/* --- Responsive Design for CTA Section --- */
@media (max-width: 992px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        width: 100%; /* Use full width on smaller screens */
    }

    .cta-content-box {
        width: 80%; /* Adjust width for tablet */
        padding: 40px;
    }

    /* On tablet, we reduce the overlap */
    .cta-image {
        position: relative; /* Change positioning to be part of the flow */
        right: auto;
        top: auto;
        transform: none;
        margin-top: -80px; /* Pulls the image up to overlap */
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 20px;
    }

    .cta-content-box {
        width: 100%; /* Use full width on mobile */
        padding: 30px;
    }

    .cta-text-content h2 {
        font-size: 1.8rem;
    }

    /* On mobile, the image sits below the text box */
    .cta-image {
        margin-top: 20px; /* Reset overlap for mobile */
        margin-bottom: 0;
    }

    .cta-image img {
        max-height: 350px;
        margin: 0 auto; /* Center the image */
    }
}

/* --- Section 5: Contact Section (Updated Layout) --- */
.contact-section {
    background-color: rgb(52,52,52); /* Blue background */
    padding: 80px 0;
    text-align: left;
}

.contact-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900; /* Roboto Black */
    font-size: 2.5rem;
    color: #FFFFFF; /* White text for contrast */
    margin-bottom: 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 columns of equal width */
    gap: 40px; /* The space between the cards */
}

/* The card is now a flex container to align image and text */
.contact-card {
    display: flex;
    align-items: center;
    gap: 25px; /* Space between the image and the text */
    text-align: left; /* Align text to the left within the card */
}

/* The image container */
.contact-image {
    flex-shrink: 0; /* Prevents the image from shrinking */
 width: 220px;
    height: 220px;
    overflow: hidden; /* Hides any part of the image that spills out */
border-radius: 290px;
}

.contact-image img {
width: 100%;
    height: 139%;
    object-fit: cover;
    object-fit: cover; /* Ensures the image covers the container without distortion */
    /* border-radius is removed to make it a square */
}

/* The text container */
.contact-info h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Roboto Bold */
    font-size: 1.5rem;
    color: #FFFFFF; /* White text to match the section's theme */
    margin-bottom: 10px;
}

.contact-info p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Roboto Regular */
    font-size: 1rem;
    color: #E0E0E0; /* A lighter shade of white/grey for body text */
    margin-bottom: 5px;
    line-height: 1.6;
}

.contact-info a {
    color: #FFFFFF; /* Make the email link white */
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* --- Responsive Design for Contact Section --- */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 20px;
    }

    .contact-section h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    .contact-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        gap: 30px;
    }

    /* Stack the image and text vertically on mobile */
    .contact-card {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Accordion Styles --- */
.accordion {
    margin-top: 20px;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
}

.accordion-button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Roboto Bold */
    font-size: 1.1rem;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    transition: color 0.3s ease;
}

.accordion-button:hover {
    color: #cce0ff; /* A lighter blue for hover */
}

.accordion-button .chevron-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Prevents the icon from shrinking */
}

/* This class is toggled by JavaScript to rotate the icon */
.accordion-button.active .chevron-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* This class is toggled by JavaScript to show the content */
.accordion-content.active {
    max-height: 200px; /* A value larger than the content will ever be */
    padding-top: 15px;
}

.accordion-content p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Roboto Regular */
    font-size: 1rem;
    color: #E0E0E0;
    line-height: 1.7;
}

/* --- Section 6: Visit Us Section (Updated Layout) --- */
.visit-section {
    background-color: #FFFFFF; /* White background */
    padding-top: 0px;
}

.visit-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900; /* Roboto Black */
    font-size: 2.5rem;
    color: rgb(52,52,52); /* Blue headline */
    text-align: center;
    margin-bottom: 50px;
}

/* This new container is the key to the layout */
.map-container {
    position: relative; /* This is the anchor for the address card overlay */
    width: 100%; /* Spans the full width of the viewport */
    height: 500px; /* Set a fixed height for the map container */
}

.map-wrapper {
    width: 100%;
    height: 100%;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* This is the address card that sits on top of the map */
.address-card-overlay {
    position: absolute; /* This allows us to position it over the map */
    top: 50%;
    right: 10%; /* Position it 10% from the right edge */
    transform: translateY(-50%); /* This vertically centers the card */

    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 400px; /* Ensures the card doesn't get too wide */
}

.address-card-overlay h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Roboto Bold */
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
}

.address-card-overlay .address-details p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Roboto Regular */
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

.address-card-overlay .address-details strong {
    color: #333;
}

/* --- Responsive Design for Visit Us Section --- */
@media (max-width: 992px) {
    .map-container {
        height: 450px;
    }

    /* On tablets, move the card to the left and make it smaller */
    .address-card-overlay {
        right: auto;
        left: 5%;
        max-width: 350px;
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .visit-section {
        padding-top: 60px;
    }

    .visit-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .map-container {
        height: 100vh; /* Use full viewport height on mobile for a better map experience */
        min-height: 500px; /* Ensure it's not too short on small screens */
    }

    /* On mobile, center the card at the bottom */
    .address-card-overlay {
        position: absolute;
        bottom: 20px;
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%); /* Horizontally center the card */
        width: calc(100% - 40px); /* Full width with some padding */
        max-width: none;
        padding: 20px;
        box-sizing: border-box; /* Ensures padding doesn't affect the final width */
    }
}
/* --- Footer --- */
.main-footer {
    background-color: #FFE207; /* yellow background */
    color: #000;
    padding: 30px 0;
    text-align: center;
    font-size: 0.9rem;
}

.main-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links a {
    color: #000;
    text-decoration: none;
    margin-left: 20px; /* Adds space between the links */
    transition: color 0.3s ease;
}

.footer-links a:first-child {
    margin-left: 0; /* Removes margin from the very first link */
}

.footer-links a:hover {
    color: rgb(52,52,52); /* Changes to your site's blue on hover */
}

/* --- Responsive Design for Footer --- */
@media (max-width: 768px) {
    .main-footer .container {
        flex-direction: column;
        gap: 15px; /* Adds space between the copyright and links */
    }

    .footer-links a {
        margin: 0 10px; /* Adjusts spacing for centered links */
    }
}