/* Base body styles (can be combined with Tailwind or kept separate) */
body {
    font-family: 'Inter', sans-serif; /* Default font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0; /* Reset default margin */
    padding: 0; /* Reset default padding */
}

/* === Custom Header Styles (as per your new structure) === */
.top-header {
    background-color: #ffffff; /* White background */
    padding: 10px 5%; /* Padding: 10px top/bottom, 5% left/right */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
    position: sticky; /* Sticky header */
    top: 0;
    z-index: 1000; /* Ensure it's above other content */
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.nav {
    display: flex;
    justify-content: space-between; /* Space out logo, name, links, button */
    align-items: center; /* Vertically align items */
    max-width: 1200px; /* Max width for content within nav */
    margin: 0 auto; /* Center the nav content */
}

.logo-container {
    display: flex;
    align-items: center;

}

.logo_image img {
    width: 60px; 
    height: 60px;
    margin-right: 10px; /* Space between image and name */
}


/* In your style.css */ 
/* In your style.css */
.logoname {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.9em;
    font-weight: 900;
    display: inline-block; /* Necessary for background-clip to work well */
    padding-left: 10px;
    color: red;

}

.nav-links {
    list-style: none; /* Remove default bullet points */
    display: flex !important;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 25px; /* Space between nav items */
}

.nav-links li a {
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Dark grey color for links */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.nav-links li a:hover {
    color: blue; /* Blue #6ea8fe color on hover */
}

.contact-button { /* Changed from .get-started to be more specific */
    background-color: #1b4dd4; /* Blue #6ea8fe background */
    color: #fff; /* White text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px; /* Rounded corners */
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;  
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin-left: 20px; /* Space from nav links */
}

.contact-button:hover {
    background-color: #16a34a; /* Darker Blue #6ea8fe on hover */
}

/* Menu Icons (Hamburger/Close) */
.menu-icon {
    display: none; /* Hidden by default on larger screens */
    cursor: pointer;
    font-size: 1.8em; /* Size of the icon */
    color: #333;
}

#menuClose {
    display: none; /* Close icon hidden initially */
}

/*Hero Slider*/

    .font-montserrat {
        font-family: 'Montserrat', sans-serif;
    }

    .hero-section-slider-wrapper {
        width: 100%;
        padding-bottom: 2rem; /* Space below text content */
        background-color: #f9fafb; /* bg-gray-50, a light fallback */
    }

    .hero-slider {
        position: relative;
        width: 100%;
        max-height: 70vh; /* Adjust max height as needed */
        overflow: hidden;
    }

    .slides-container {
        display: flex;
        height: 100%;
        transition: transform 0.7s ease-in-out;
    }

    .slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image covers the slide area without distortion */
    }

    /* Navigation Buttons */
    .slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        border: none;
        cursor: pointer;
        padding: 1rem;
        font-size: 1.5rem;
        z-index: 10;
        transition: background-color 0.3s ease;
    }

    .slider-nav:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .slider-nav.prev {
        left: 10px;
        border-radius: 0 3px 3px 0;
    }

    .slider-nav.next {
        right: 10px;
        border-radius: 3px 0 0 3px;
    }

    /* Pagination Dots */
    .slider-dots {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        z-index: 10;
    }

    .dot {
        cursor: pointer;
        height: 12px;
        width: 12px;
        margin: 0 5px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.5s ease;
    }

    .dot.active, .dot:hover {
        background-color: rgba(255, 255, 255, 1);
    }

    /* Text Content Styling */
    .hero-text-content {
        padding-top: 3rem; /* Space between slider and text */
        padding-bottom: 2rem;
    }
/* Responsive adjustments for the header */
@media (max-width: 768px) {
    .logoname {
        font-size: 1.2em; /* Slightly smaller logo name on mobile */
        color: red;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -250px; /* Start hidden offscreen to the right */
        height: 100vh;
        width: 200px;
        background-color: #1D4ED8;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        padding-top: 70px; /* Push down menu items below header */
        display: flex;
        flex-direction: column;
        align-items: start;
        transition: right 0.3s ease;
        z-index: 1001;
    }

    .nav-links.active {
        right: 0; /* Slide in */
    }

    .nav-links li {
        margin: 15px 20px;
        width: 100%;
    }

    .nav-links li a {
        display: block;
        width: 100%;
        color: white;
    }

    .contact-button {
        display: none; /* Hide by default on small screen */
    }

    .menu-icon {
        display: block;
        z-index: 1002;
    }
    .logoname {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2.5em;

 
    }
}



/* === Hero Section Animation (from previous version, kept for reference) === */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/*Our Services

/* === Services Section Styles === */



/* Styles for individual service cards */
.service-card {
    background-color: #ffffff; /* White background for the card */
    border-radius: 0.75rem; /* More pronounced rounded corners (rounded-xl) */
    overflow: hidden; /* This is important to contain the image corners */
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Helps align content vertically */
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-xl */
}

.service-card-image-container {
    width: 100%;
    /* Set a fixed aspect ratio for the image container, e.g., 4:3 */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.service-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image cover the area without stretching */
    transition: transform 0.3s ease;
}

.service-card:hover .service-card-image {
    transform: scale(1.05); /* Slight zoom effect on image when card is hovered */
}

.service-card-content {
    padding: 1.5rem; /* Add padding to the text content area */
    flex-grow: 1; /* Allows this area to expand if cards have different text lengths */
    display: flex;
    flex-direction: column;
}

.service-card-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.service-card-description {
    font-size: 0.9rem;
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    flex-grow: 1; /* Allows paragraph to take up remaining space */
}
    

/* Note on Grid Layout:
   The responsive grid structure (1 column on small, 2 on medium, 3 on large screens) 
   is primarily handled by Tailwind CSS classes applied directly to the div 
   with class "service-card-grid" in your HTML:
   "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10"
   This ensures consistency with your existing Tailwind setup.
*/

.about-snippet-image-column img {
    max-height: 550px; /* Adjust this value as needed */
    width: 100%; /* Ensure it takes the full width of its column */
    object-fit: cover; /* Important for maintaining aspect ratio */
}


/* === Why Choose Us Section Styles (No JS animation dependency) === */
#why-choose-us {
    /* Remove existing background color if you want image to be primary background */
    /* background-color: #ffffff; /* This was from your class bg-white, it will be overridden by bg-image */

    background-image: url('Images/BG.png'); /* ** REPLACE THIS PATH ** */
    background-size: cover; /* Makes the image cover the entire section, cropping if necessary */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Optional: Creates a parallax scrolling effect */
    position: relative; /* Good for positioning an overlay if needed */
    /* py-16 for padding is already handled by Tailwind class in HTML */
}

/* Optional: Add an overlay for better text readability if the image is busy or too light/dark */
#why-choose-us::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Example: 30% black overlay. Adjust color and opacity */
    /* Or for a light image, you might use a light overlay: rgba(255, 255, 255, 0.7); */
    z-index: 0; /* Ensure overlay is behind the content but on top of the image */
}

/* Ensure content is above the overlay */
#why-choose-us .container {
    position: relative;
    z-index: 1;
}

/* Adjust text colors for readability against the new background + overlay */
#why-choose-us h2 {
    color: #ffffff; /* Example: White text if your overlay is dark */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Optional: for better contrast */
}


.reason-card {
    background-color: #f9fafb; /* Tailwind bg-gray-50. If section is bg-gray-50, make this #ffffff */
    padding: 2rem 1.5rem;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    text-align: center;
    border-left: 4px solid transparent; /* For hover accent */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
    /* Elements are visible by default: opacity and transform for initial hiding are removed */
}

.reason-card:hover {
    transform: translateY(-5px) scale(1.03); /* Slightly lift and scale up */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border-left-color: #2563eb; /* Tailwind text-blue-600 for accent on hover */
}

.reason-card-icon {
    font-size: 2.5rem; /* text-4xl */
    color: #2563eb; /* text-blue-600 */
    margin-bottom: 1rem; /* mb-4 */
    display: inline-block;
    transition: transform 0.3s ease;
}

.reason-card:hover .reason-card-icon {
    transform: rotateY(360deg) scale(1.1); /* Icon rotation on hover */
}

.reason-card-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.reason-card-description {
    font-size: 0.9rem; 
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
}

/* Responsive stacking:
   Tailwind's grid classes (grid-cols-1 md:grid-cols-2 lg:grid-cols-3)
   handle the stacking on small screens automatically.
   If you need specific margins for stacked items, you can add them:
*/
@media (max-width: 767px) { /* Corresponds to Tailwind's 'md' breakpoint */
    .reason-card {
        margin-bottom: 1.5rem; /* Add bottom margin when stacked */
    }
    .why-choose-us-grid .reason-card:last-child {
        margin-bottom: 0; /* No margin for the very last item when stacked */
    }
}
/* If using md:grid-cols-2, you might need to adjust last-child logic for even numbers.
   However, with `gap` in the grid, explicit bottom margins might be less critical for spacing
   unless you want more than the gap provides when stacked. The grid `gap` will apply
   between items when they stack too.
   The above @media query adds a margin to all cards when stacked, which is fine.
*/

/* === FAQ Section Styles === */



/* === FAQ Section Styles (with Two-Column Layout) === */

/* === FAQ Section Styles (with Two-Column Layout) === */

.faq-item {
    background-color: #ffffff;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: margin-bottom 0.3s ease;
}

.faq-item[open] {
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-question {
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.faq-question::-webkit-details-marker {
    display: none;
}
.faq-question::marker {
    display: none;
}

.faq-icon {
    font-size: 0.875rem;
    color: #6b7280;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}

.faq-question:hover .faq-icon {
    color: #3b82f6;
}

.faq-answer {
    padding: 0rem 1.5rem 1.5rem 1.5rem;
    color: #4b5563;
    line-height: 1.625;
    font-size: 0.95rem;
    border-top: 1px solid #f3f4f6;
}

.faq-answer p {
    margin-bottom: 0;
}

.faq-answer p:not(:last-child) {
    margin-bottom: 1rem;
}




.faq-image {
    object-fit: contain; /* Changed from cover to contain to ensure the whole image is visible, like your example */
    max-height: 500px;  /* Optional: constrain image height if it's too tall */
    /* Tailwind classes 'rounded-lg shadow-xl max-w-md w-full h-auto' handle most styling */
}

/* Responsive adjustments for stacking */
@media (max-width: 1023px) { /* Corresponds to Tailwind's 'lg' breakpoint */
    .faq-image-column {
        margin-top: 2.5rem; /* Add some space above the image when stacked (Tailwind mt-10) */
        justify-content: center; /* Ensure image is centered when stacked */
        padding-left: 0; /* Reset padding when stacked */
    }
}

/* === Contact Form Section Styles === *


/*Background u=image*/

#contact {
    /* Remove existing background color if you want image to be primary background */
    /* background-color: #ffffff; /* This was from your class bg-white, it will be overridden by bg-image */

    background-image: url('Images/BGGT.png'); 
    background-size: cover; 
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Optional: Creates a parallax scrolling effect */
    position: relative; /* Good for positioning an overlay if needed */
    /* py-16 for padding is already handled by Tailwind class in HTML */
}   

/* Optional: Add an overlay for better text readability if the image is busy or too light/dark */
#contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Example: 30% black overlay. Adjust color and opacity */
    /* Or for a light image, you might use a light overlay: rgba(255, 255, 255, 0.7); */
    z-index: 0; /* Ensure overlay is behind the content but on top of the image */
}

/* Ensure content is above the overlay */
#contact .container {
    position: relative;
    z-index: 1;
}

/* Adjust text colors for readability against the new background + overlay */
#contact h2 {
    color: #ffffff; /* Example: White text if your overlay is dark */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Optional: for better contrast */
}


.contact-form {
    background-color: #ffffff;
    padding: 2rem 1.5rem; /* p-8 md:p-10 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
}

@media (min-width: 768px) { /* md breakpoint */
    .contact-form {
        padding: 2.5rem;
    }
}


.form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    font-size: 1rem; /* text-base */
    color: #1f2937; /* text-gray-900 */
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-input::placeholder {
    color: #9ca3af; /* placeholder-gray-400 */
}

.form-input:focus {
    outline: none;
    border-color: #2c0ddf; /* Tailwind Blue #6ea8fe-400 for focus */
    box-shadow: 0 0 0 3px rgba(95, 93, 91, 0.3); /* Ring effect with Blue #6ea8fe */
    background-color: #ffffff;
}

textarea.form-input {
    resize: vertical; /* Allow vertical resize, disable horizontal */
    min-height: 120px;
}

.submit-button {
    display: inline-block;
    background-color: #1d4ed8; /* Tailwind Blue #6ea8fe-500 (normal state) */
    color: white;
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border: none;
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.submit-button:hover {
    background-color: #16a34a; /* Tailwind green-600 (hover state) */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.submit-button:active {
    transform: translateY(0px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

/* For Netlify's hidden honeypot field */
.hidden {
    display: none;
}

.direct-contact-info i {
    /* color is set by Tailwind class in HTML */
    /* margin-right is set by Tailwind class in HTML */
    vertical-align: middle;
}

/* === Footer Section Styles === */

/* .footer-main background and base text color are handled by Tailwind classes in HTML */

.footer-column {
    margin-bottom: 1.5rem; /* mb-6, provides spacing when stacked on small screens */
}

.footer-column-title {
    font-size: 1.25rem; /* text-lg */
    font-weight: 700; /* font-bold */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff; /* White title */
    margin-bottom: 1rem; /* mb-4 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-address {
    font-size: 1rem; /* Slightly smaller than base */
    line-height: 1.6;
    color: #bee3f8; /* text-blue-200 */
}

.footer-contact-item {
    font-size: 0.9rem;
    color: #bee3f8; /* text-blue-200 */
    margin-bottom: 0.35rem;
}

.footer-contact-item .footer-icon {
    margin-right: 0.5rem; /* mr-2 */
    color: #06ddf5; /* Tailwind Blue #6ea8fe-500 for icons */
    width: 1em; /* Ensure icons align well if they vary in width */
    text-align: center;
}

.footer-links-list {
    list-style: none;
    padding-left: 0;
}

.footer-links-list li {
    margin-bottom: 0.5rem; /* mb-2 */
}

.footer-link {
    color: #bee3f8; /* text-blue-200 */
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    font-size: 1rem;
}

.footer-link:hover {
    color: white; /* Tailwind amber-400 or choose an Blue #6ea8fe */
    padding-left: 0.25rem; /* Slight indent on hover */
}

.footer-social-icons {
    display: flex;
    justify-content: center; /* Center icons in mobile stacked view */
}

@media (min-width: 768px) { /* md breakpoint */
    .footer-social-icons {
        justify-content: flex-start; /* Align to left on larger screens */
    }
}

.social-icon-link {
    display: inline-flex; /* Use flex to center icon within the circle/square */
    align-items: center;
    justify-content: center;
    width: 2.25rem; /* w-9 */
    height: 2.25rem; /* h-9 */
    margin-right: 0.75rem; /* mr-3 */
    color: #f6f6f8; /* Dark blue, for icon color inside the shape */
    background-color: #06acd2; /* Light indigo background for icons */
    border-radius: 50%; /* rounded-full */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    font-size: 1rem; /* Adjust icon size if needed */
}

.social-icon-link:last-child {
    margin-right: 0;
}

.social-icon-link:hover {
    background-color: #e9e5e5; /* Tailwind Blue #6ea8fe on hover */
    color: #02527a; /* White icon on hover */
    transform: scale(1.1) translateY(-2px);
}

/* Specific hover colors for social icons (optional, can be too much)
.social-icon-link.facebook:hover { background-color: #3b5998; color: white; }
.social-icon-link.twitter:hover { background-color: #1da1f2; color: white; }
.social-icon-link.linkedin:hover { background-color: #0077b5; color: white; }
.social-icon-link.instagram:hover { background-color: #e4405f; color: white; }
 */



/* Ensure the currentYear span is handled by your existing script */

/* Contac Map CSs */
.map-section iframe {
    /* No specific style needed, width/height/border handled in HTML */
    filter: grayscale(80%); /* Optional: makes map grayscale for a more professional look */
    transition: filter 0.3s ease;
}

.map-section iframe:hover {
    filter: grayscale(0%); /* Full color on hover */
}