/* Basic Resets & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling */
    scroll-padding-top: 120px; /* Offset for fixed header */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
    text-align: center;
}

.section h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #005792;
    position: relative;
    display: inline-block;
}

.section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #007BFF;
}

.bg-light {
    background-color: #f9f9f9;
}

.btn {
    display: inline-block;
    background-color: #007BFF;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.btn:hover {
    background-color: #005792;
}

/* Header & Navigation */
.hero {
    padding-top: 120px; /* Increased to accommodate taller fixed nav */
    background: linear-gradient(rgba(0, 87, 146, 0.6), rgba(0, 87, 146, 0.6)), url('hero-bg.jpg') no-repeat center center/cover;
    color: #fff;
    min-height: 600px;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden; /* Hide overflow for background graphics */
}

.navbar {
    position: fixed; /* Changed to fixed */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF; /* White background for nav bar */
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Lighter shadow on white */
    z-index: 1000;
    border-bottom: 1px solid #eee; /* Subtle bottom border */
}

.navbar .logo {
    display: flex;
    align-items: center;
    padding-left: 10px; /* Add some padding to push logo from edge */
}

.navbar .logo a {
    line-height: 0; /* Ensures no extra space below the image */
}

.navbar .logo img.header-logo {
    height: 70px; /* Make logo bigger */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle;
    max-width: 100%;
    object-fit: contain;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    color: #005792; /* Dark blue for links on white background */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #007BFF; /* Lighter blue on hover */
}

/* --- LANGUAGE BUTTON STYLE --- */
.lang-button {
    display: inline-block;
    background: #5A7EBD; /* A softer, medium blue */
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.lang-button:hover {
    background-color: #4A6BA0; /* Slightly darker on hover */
    transform: translateY(-2px); /* Slight lift effect */
}
/* --- END LANGUAGE BUTTON STYLE --- */


.hero-content {
    margin: 0 auto;
    padding-top: 50px; /* Adjust for nav bar height */
    position: relative;
    z-index: 1; /* Ensure content is above graphics */
}

.hero-content h1 {
    font-size: 3.5em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.4em;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Animated Background Graphics - Hero Section */
.hero-graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Make sure they don't interfere with clicks */
    z-index: 0; /* Behind hero content */
}

.graphic-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.1); /* Subtle white */
    font-size: 5em; /* Large icons */
    animation: hero-icon-animate 25s infinite ease-in-out alternate;
    --scale: 1; /* Custom property for individual icon scaling */
}

.graphic-icon.icon-1 { top: 10%; left: 15%; animation-delay: 0s; --scale: 0.8; }
.graphic-icon.icon-2 { top: 50%; left: 80%; animation-delay: 5s; --scale: 1.1; }
.graphic-icon.icon-3 { top: 80%; left: 30%; animation-delay: 10s; --scale: 0.9; }
.graphic-icon.icon-4 { top: 20%; left: 60%; animation-delay: 15s; --scale: 1.2; }
.graphic-icon.icon-5 { top: 35%; left: 5%; animation-delay: 2s; --scale: 0.7; }
.graphic-icon.icon-6 { top: 65%; left: 90%; animation-delay: 8s; --scale: 1.0; }
.graphic-icon.icon-7 { top: 95%; left: 45%; animation-delay: 12s; --scale: 0.9; }

@keyframes hero-icon-animate {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(var(--scale));
        opacity: 0.1;
    }
    25% {
        transform: translate(20px, -10px) rotate(5deg) scale(calc(var(--scale) * 1.05));
        opacity: 0.12;
    }
    50% {
        transform: translate(-10px, 15px) rotate(-5deg) scale(var(--scale));
        opacity: 0.15;
    }
    75% {
        transform: translate(15px, -20px) rotate(3deg) scale(calc(var(--scale) * 1.05));
        opacity: 0.12;
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(var(--scale));
        opacity: 0.1;
    }
}

/* Updated: Side Floating Background Icons (More Colorful & Tweak Animation) */
.side-floating-icons {
    position: fixed; /* Fixed position relative to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    pointer-events: none; /* Make sure they don't block clicks */
    overflow: hidden; /* Hide icons that go outside the viewport */
    z-index: -1; /* Ensure they are behind all content */
    background-color: transparent; /* Explicitly transparent */
}

.side-icon {
    position: absolute;
    /* Increased opacity for a more 'colorful' look, but still as a background element */
    color: rgba(0, 123, 255, 0.35); /* Increased to 0.35 for better visibility */
    font-size: 2em; /* Keep smaller size */
    animation: side-float-animate 30s infinite linear alternate; /* Speed adjusted */
    /* Individual size and color variation */
    --size-scale: 1;
    --hue-rotate: 0deg; /* For subtle color shifts */
}

/* Specific positions, sizes, and animation delays for variety and spread */
/* Adjusted left/right initial positions to be slightly less extreme */
.side-icon.icon-a { top: 5%; left: 5%; font-size: 2.5em; animation-delay: 0s; --size-scale: 1.2; --hue-rotate: 0deg; }
.side-icon.icon-b { top: 20%; right: 5%; font-size: 2em; animation-delay: 3s; --size-scale: 1.0; --hue-rotate: 10deg; }
.side-icon.icon-c { top: 35%; left: 8%; font-size: 3em; animation-delay: 6s; --size-scale: 1.4; --hue-rotate: -5deg; }
.side-icon.icon-d { top: 50%; right: 10%; font-size: 2.2em; animation-delay: 9s; --size-scale: 1.1; --hue-rotate: 15deg; }
.side-icon.icon-e { top: 65%; left: 3%; font-size: 2.8em; animation-delay: 12s; --size-scale: 1.3; --hue-rotate: -10deg; }
.side-icon.icon-f { top: 80%; right: 7%; font-size: 2.3em; animation-delay: 15s; --size-scale: 1.05; --hue-rotate: 5deg; }
.side-icon.icon-g { top: 15%; left: 15%; font-size: 2.6em; animation-delay: 18s; --size-scale: 1.25; --hue-rotate: -15deg; } /* Adjusted left */
.side-icon.icon-h { top: 45%; right: 12%; font-size: 2.1em; animation-delay: 21s; --size-scale: 0.95; --hue-rotate: 20deg; } /* Adjusted right */
.side-icon.icon-i { top: 75%; left: 10%; font-size: 2.9em; animation-delay: 24s; --size-scale: 1.35; --hue-rotate: -8deg; } /* Adjusted left */
.side-icon.icon-j { top: 30%; left: 2%; font-size: 2.4em; animation-delay: 27s; --size-scale: 1.15; --hue-rotate: 12deg; }
.side-icon.icon-k { top: 60%; right: 2%; font-size: 2.7em; animation-delay: 30s; --size-scale: 1.28; --hue-rotate: -12deg; }
.side-icon.icon-l { top: 90%; left: 5%; font-size: 2.1em; animation-delay: 33s; --size-scale: 1.0; --hue-rotate: 7deg; }

/* Keyframes for the new side floating icons - more pronounced "swimming" */
@keyframes side-float-animate {
    0% {
        transform: translate(0px, 0px) rotate(0deg) scale(calc(0.9 * var(--size-scale)));
        opacity: 0.35; /* Match base opacity */
        filter: hue-rotate(var(--hue-rotate));
    }
    25% {
        transform: translate(20px, 30px) rotate(15deg) scale(calc(1.05 * var(--size-scale))); /* Slightly smaller translate */
        opacity: 0.4; /* Slight pulse up */
        filter: hue-rotate(calc(var(--hue-rotate) + 5deg));
    }
    50% {
        transform: translate(-10px, 20px) rotate(-10deg) scale(calc(0.95 * var(--size-scale))); /* Slightly smaller translate */
        opacity: 0.45; /* Slight pulse up further */
        filter: hue-rotate(var(--hue-rotate));
    }
    75% {
        transform: translate(25px, -20px) rotate(8deg) scale(calc(1.1 * var(--size-scale))); /* Slightly smaller translate */
        opacity: 0.4; /* Slight pulse down */
        filter: hue-rotate(calc(var(--hue-rotate) - 5deg));
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg) scale(calc(0.9 * var(--size-scale)));
        opacity: 0.35; /* Match base opacity */
        filter: hue-rotate(var(--hue-rotate));
    }
}

/* This media query hides them on screens 1024px or narrower */
@media (max-width: 1024px) {
    .side-floating-icons {
        display: none;
    }
}


/* About Us Section */
#about p {
    max-width: 100%; /* Allow full width within its flex item */
    margin: 0 0 20px 0; /* Adjust margin */
    font-size: 1.1em;
    line-height: 1.8;
    text-align: left; /* Align text left within its container */
}

.about-flex-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 40px;
    align-items: flex-start; /* Align items to the top */
    text-align: left; /* Default text alignment for children */
    margin-top: 50px; /* Space from section title */
}

.about-text-content {
    flex: 2; /* Takes more space */
    min-width: 300px; /* Minimum width before wrapping */
}

.about-text-content h3 { /* Style for the new subheading */
    font-size: 1.3em;
    color: #007BFF;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Sister Company Logos Grid */
.sister-company-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjusted for 3 columns on larger screens */
    gap: 25px; /* Space between logos */
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
    justify-items: center; /* Center items within their grid cells */
}

.sister-company-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sister-company-logo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.sister-company-logo-item img {
    max-height: 70px; /* Smaller height for logos */
    width: auto;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.sister-company-logo-item:hover img {
    animation: pulse 0.6s infinite alternate; /* Subtle pulse animation on hover */
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.sister-company-logo-item p {
    font-size: 0.9em;
    color: #555;
    margin: 0; /* Remove default paragraph margin */
    line-height: 1.4;
}


.about-image {
    flex: 1; /* Takes remaining space */
    min-width: 250px; /* Minimum width before wrapping */
    text-align: center; /* Center the image */
    padding: 20px; /* Add some padding around the image */
}

.about-image .about-img {
    max-width: 100%;
    height: auto;
    display: block; /* Ensure it behaves as a block for centering */
    margin: 0 auto; /* Center the image */
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Soft shadow */
    object-fit: contain;
}

/* Services Section - Grid Layout */
.services-intro {
    max-width: 800px;
    margin: 0 auto 50px auto; /* More space below intro text */
    font-size: 1.1em;
    line-height: 1.8;
    color: #666;
}

.services-grid {
    display: grid;
    /* 3 columns for desktop, responsive down to 1 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Space between service items */
    margin-top: 20px;
}

.service-item {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%; /* Ensure equal height items if content varies */
}

.service-item:hover {
    transform: translateY(-10px); /* More pronounced lift */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Darker shadow */
}

.service-item i {
    font-size: 3.5em; /* Slightly larger icon */
    color: #007BFF;
    margin-bottom: 20px;
    animation: service-icon-bump-rotate 4s infinite ease-in-out alternate;
}

/* New keyframes for service icons: bumping and subtle rotation */
@keyframes service-icon-bump-rotate {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    25% { transform: translateY(-5px) scale(1.03) rotate(2deg); }
    50% { transform: translateY(0) scale(1) rotate(0deg); }
    75% { transform: translateY(5px) scale(0.97) rotate(-2deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}


.service-item h3 {
    font-size: 1.5em; /* Consistent size */
    color: #005792;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 0.95em;
    color: #666;
    line-height: 1.6;
    text-align: center;
    flex-grow: 1; /* Allows paragraph to grow to fill space */
}

/* Certifications Section */
#certifications p {
    max-width: 900px;
    margin: 0 auto 20px auto;
    font-size: 1.1em;
    line-height: 1.8;
}

.cap-logo-container {
    margin: 30px auto;
    max-width: 300px; /* Adjust as needed */
    display: block;
}

.cap-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* International Labs Logos - Marquee Effect */
.international-labs-container {
    overflow: hidden; /* Hide scrollbar */
    white-space: nowrap; /* Keep items in a single line */
    margin-top: 20px;
    position: relative;
    padding: 10px 0; /* Add some vertical padding */
    background-color: #fff; /* Ensure a clean background for the marquee */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Subtle shadow */
}

.international-labs-inner {
    display: flex; /* Changed to flex */
    width: max-content; /* Ensures it takes exactly the width of its content */
    animation: marquee 30s linear infinite; /* Adjust duration as needed */
}

.international-labs-inner ul.international-labs-logos {
    display: flex; /* Keep flex for items within the ul */
    flex-shrink: 0; /* Prevent items from shrinking */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 40px; /* Gap between logos */
    align-items: center;
}

/* Keyframes for horizontal marquee animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); } /* Move exactly half of the duplicated content */
}

/* Keyframes for subtle vertical wave motion on individual logos */
@keyframes float-logo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* Subtle up and down movement */
}

.international-labs-inner ul.international-labs-logos li {
    flex-shrink: 0; /* Prevent items from shrinking */
    background-color: transparent; /* No individual background */
    padding: 0;
    border: none; /* No individual border */
    border-radius: 0;
    box-shadow: none; /* No individual shadow */
    height: 80px; /* Fixed height for consistency */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none; /* Remove hover transition for marquee */
    /* Apply the wave animation to individual logos */
    animation: float-logo 3s ease-in-out infinite;
}

/* Offset animation for a wave effect - adjusted for 8 logos per UL */
.international-labs-inner ul.international-labs-logos li:nth-child(1) { animation-delay: 0s; }
.international-labs-inner ul.international-labs-logos li:nth-child(2) { animation-delay: 0.25s; }
.international-labs-inner ul.international-labs-logos li:nth-child(3) { animation-delay: 0.5s; }
.international-labs-inner ul.international-labs-logos li:nth-child(4) { animation-delay: 0.75s; }
.international-labs-inner ul.international-labs-logos li:nth-child(5) { animation-delay: 1s; }
.international-labs-inner ul.international-labs-logos li:nth-child(6) { animation-delay: 1.25s; }
.international-labs-inner ul.international-labs-logos li:nth-child(7) { animation-delay: 1.5s; }
.international-labs-inner ul.international-labs-logos li:nth-child(8) { animation-delay: 1.75s; }


.international-labs-inner ul.international-labs-logos li img {
    max-width: 120px; /* Max width for the logo images */
    max-height: 70px; /* Max height for the logo images */
    width: auto;
    height: auto;
    object-fit: contain; /* Ensures the image fits within bounds without cropping */
    filter: none; /* Ensure color is always visible - NO GRAYSCALE */
    transition: none; /* Remove hover transition for marquee */
}

/* Pause animation on hover for desktop */
@media (min-width: 769px) {
    .international-labs-inner:hover {
        animation-play-state: paused;
    }
    .international-labs-inner ul.international-labs-logos li {
        animation-play-state: paused; /* Pause wave animation on hover too */
    }
}

/* Home Sample Collection */
#home-collection p {
    max-width: 800px;
    margin: 0 auto 20px auto;
    font-size: 1.1em;
    line-height: 1.8;
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
    text-align: left;
    margin-top: 50px;
}

.contact-info p {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #555;
}

.contact-info p i {
    color: #007BFF;
    margin-right: 10px;
    font-size: 1.2em;
}

.contact-map iframe {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.contact-map small {
    display: block;
    margin-top: 10px;
    color: #777;
    font-size: 0.9em;
    text-align: center;
}

.contact-form {
    margin-top: 50px;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: left;
}

.contact-form h3 {
    font-size: 1.8em;
    color: #005792;
    margin-bottom: 30px;
    text-align: center;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #007BFF;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 100px;
}

.contact-form .btn {
    width: auto;
    padding: 12px 30px;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    display: block; /* Make button full width if desired or inline-block for form's own line */
    margin-left: auto;
    margin-right: auto;
}


/* Footer */
footer {
    background-color: #005792;
    color: #fff;
    text-align: center;
    padding: 30px 0;
    font-size: 0.9em;
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 2.5em;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Home Visit Floating Button */
.homevisit-float {
    position: fixed;
    height: 60px;
    bottom: 30px;
    right: 100px;
    background-color: #007BFF;
    color: #FFF;
    border-radius: 30px;
    padding: 0 20px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    gap: 10px;
}

.homevisit-float:hover {
    transform: scale(1.05);
    background-color: #005792;
    color: #fff;
}/* New: Scroll Animation Classes */
/* Base state: Hidden by default, NO TRANSITION YET */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    /* No transition property here by default */
}

/* Animated state: Visible, WITH TRANSITION */
.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transition applied only when 'animated' is present */
}


/* RTL Specific Styles for Arabic */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .navbar .nav-links {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .nav-links li {
    margin-left: 0; /* Reset left margin */
    margin-right: 30px; /* Set right margin for spacing */
}

html[dir="rtl"] .lang-switcher {
    order: -1; /* Puts the language switcher first in the flexbox order */
}

/* Adjust heading underline position for RTL */
html[dir="rtl"] .section h2::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Adjust about section list and flex for RTL */
html[dir="rtl"] .about-flex-container {
    flex-direction: row-reverse; /* Reverse order for image/text on RTL */
}

/* Adjustments for sister company logos in RTL */
html[dir="rtl"] .sister-company-logos-grid {
    /* No change needed as justify-items: center works well */
}

/* Adjust contact info icons for RTL */
html[dir="rtl"] .contact-info p i {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .service-item p,
html[dir="rtl"] .service-item h3 {
    text-align: right; /* Ensure service item titles and paragraphs align right */
}

html[dir="rtl"] .services-intro {
    text-align: right;
}

/* WhatsApp float button for RTL */
html[dir="rtl"] .whatsapp-float {
    left: 30px; /* Move to left side */
    right: auto;
}


/* Responsive Design */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust for smaller screens, maybe 2-3 columns */
    }
    .sister-company-logos-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* More compact on tablets */
    }
}

@media (max-width: 1024px) { /* This specific breakpoint hides the side floating icons */
    .side-floating-icons {
        display: none;
    }
}

/* NEW: Hamburger menu styles and mobile navigation */
.hamburger-menu {
    display: none; /* Hidden by default, only shown on mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above other elements */
    padding-right: 10px; /* Add some padding to push it from edge */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: #005792; /* Color of the bars */
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

/* Animation for hamburger to X */
.hamburger-menu.open .bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}


@media (max-width: 768px) {
    .navbar {
        flex-direction: row; /* Keep logo and hamburger on same row */
        justify-content: space-between; /* Space them out */
        align-items: center;
        padding: 10px 20px;
    }

    .navbar .logo {
        margin-bottom: 0; /* No margin-bottom if on same row */
        padding-left: 0;
    }

    .hamburger-menu {
        display: flex; /* Show hamburger menu on mobile */
    }

    .nav-links {
        /* Mobile menu styles: hidden by default */
        position: fixed; /* Fixed position relative to viewport */
        top: 80px; /* Adjust based on your fixed navbar height */
        right: 0; /* Start off-screen to the right */
        width: 100%; /* Take full width */
        height: calc(100vh - 80px); /* Fill remaining viewport height */
        background-color: #005792; /* Background color for the open menu */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateX(100%); /* Start completely off-screen to the right */
        transition: transform 0.3s ease-in-out; /* Smooth slide-in/out */
        z-index: 999; /* Below navbar, above content */
        margin-top: 0; /* Ensure no extra margin */
    }

    .nav-links.active { /* Class added by JavaScript when menu is open */
        transform: translateX(0); /* Slide into view */
    }

    .nav-links li {
        margin: 15px 0; /* More spacing for menu items */
        opacity: 0; /* Hidden by default for animation */
        transition: opacity 0.3s ease-in-out;
    }
    
    .nav-links.active li {
        opacity: 1; /* Fade in when active */
    }

    .nav-links a {
        color: #fff; /* White links on dark blue background */
        font-size: 1.5em; /* Larger font size for mobile */
    }

    /* Keep new language button style */
    .lang-button {
        background: #5A7EBD;
        color: #fff;
    }

    html[dir="rtl"] .hamburger-menu {
        padding-right: 0;
        padding-left: 10px; /* Adjust padding for RTL */
    }

    html[dir="rtl"] .nav-links {
        right: auto;
        left: 0; /* Position off-screen to the left for RTL */
        transform: translateX(-100%); /* Slide in from the left for RTL */
    }

    html[dir="rtl"] .nav-links.active {
        transform: translateX(0);
    }

    /* --- HERO SECTION MOBILE FIX --- */
    .hero {
        padding-top: 100px; /* Adjust for smaller nav height on mobile */
        min-height: 450px; /* Reduced min-height for mobile */
        display: flex; /* Ensure flex properties apply */
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
    }

    .hero-content {
        padding-top: 0; /* Remove top padding within hero content on mobile */
    }

    .hero-content h1 {
        font-size: 2em; /* Smaller heading on mobile */
        margin-bottom: 10px; /* Reduced margin */
    }

    .hero-content p {
        font-size: 1em; /* Smaller paragraph on mobile */
        margin-bottom: 20px; /* Reduced margin */
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    /* --- END HERO SECTION MOBILE FIX --- */

    .section {
        padding: 60px 0;
    }

    .section h2 {
        font-size: 2em;
    }

    .about-flex-container {
        flex-direction: column; /* Stack columns on smaller screens */
        gap: 30px;
    }

    .about-text-content, .about-image {
        min-width: auto; /* Remove min-width on small screens */
        flex: auto; /* Allow items to take full width */
    }

    .sister-company-logos-grid {
        grid-template-columns: 1fr; /* Stack on small mobile screens */
    }
    .sister-company-logo-item {
        max-width: 250px; /* Limit width of stacked items */
        margin: 0 auto; /* Center stacked items */
    }

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

    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 2em;
        bottom: 20px;
        right: 20px; /* Default for LTR */
        left: auto; /* Ensure it's not on left for LTR on mobile */
    }

    html[dir="rtl"] .whatsapp-float {
        right: auto; /* Override for RTL */
        left: 20px;
    }

    /* Marquee adjustments for smaller screens */
    .international-labs-inner {
        animation-duration: 20s; /* Faster scroll on smaller screens */
    }

    .graphic-icon {
        font-size: 3em; /* Smaller icons on mobile */
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.8em; /* Even smaller heading for very small screens */
    }

    .homevisit-float-text {
        display: none;
    }
    .homevisit-float {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        padding: 0;
        right: 80px;
        bottom: 20px;
    }
    
    html[dir="rtl"] .homevisit-float {
        right: auto;
        left: 80px;
    }

    .hero-content p {
        font-size: 0.9em; /* Even smaller paragraph for very small screens */
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .services-grid {
        gap: 20px; /* Slightly less gap on very small screens */
    }
}

/* Surveys Section Styling */
.surveys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.survey-card {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #007BFF;
}
.survey-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.survey-card i {
    font-size: 3.5rem;
    color: #007BFF;
    margin-bottom: 20px;
}
.survey-card h3 {
    color: #005792;
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.survey-card p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.6;
}
.survey-card .btn {
    margin-top: 10px;
}
@media (max-width: 768px) {
    .surveys-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Dropdown Navigation Menu --- */
.nav-links li.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    list-style: none;
    z-index: 1001;
    border: 1px solid #eee;
    margin-top: 10px;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: #FFFFFF;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
}

.dropdown-menu li {
    margin: 0 !important;
}

.dropdown-menu a {
    display: block !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    transition: background-color 0.2s, color 0.2s;
    text-align: left !important;
}

html[dir="rtl"] .dropdown-menu a {
    text-align: right !important;
}

.dropdown-menu a:hover {
    background-color: #f1f5f9 !important;
    color: #007BFF !important;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
    display: block;
    animation: fadeInDropdown 0.2s ease-out;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Mobile Dropdown Overrides */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        min-width: 100% !important;
        padding: 5px 0 0 0 !important;
        margin-top: 0 !important;
        display: none;
    }

    .dropdown-menu::before {
        display: none !important;
    }

    .dropdown:hover .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu li {
        text-align: center !important;
    }

    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 1.25rem !important;
        text-align: center !important;
        padding: 10px 15px !important;
    }
    
    .dropdown-menu a:hover {
        background-color: transparent !important;
        color: #fff !important;
        text-decoration: underline;
    }
}