/* 
* Updated CSS for Human-Enhancement Technology Company Website
* DARK THEME: White text on black backgrounds
* All text centered with responsive design
*/

/* Reset and Base Styles */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #ffffff;
    background-color: #000000;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center; /* Center all text by default */
    margin: 0;
    padding: 0;
    padding-top: 50px; /* Adjust this value based on header + announcement banner height */
}

/* Typography - Set all text to Helvetica as requested */
h1, h2, h3, h4, h5, h6, p, a, span, div {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center; /* Center all headings and text */
    color: #ffffff;
}

h1 {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Layout */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* Center container content */
}

section {
    padding: 70px 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #000000;
}

/* Header Styles */
/* Header Styles with white background */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Changed to white background */
    z-index: 1000;
    padding: 0 0;
    text-align: center;
}

.logo {
    margin-top: 5px;
    padding: 0 0;
    text-align: center;
}

.logo img {
    height: 40px;
    /* No need for invert filter since you'll be using an inverted logo */
    /* filter: invert(1); */
}




/* Announcement Banner with CSS Variables for easy editing */
:root {
    /* Main banner variables */
    --announcement-top-position: 50px;
    --announcement-background: #f17f30;
    --announcement-hover-background: #f59b56;
    --announcement-text-color: white;
    --announcement-z-index: 999;
    
    /* Size & spacing variables */
    --announcement-padding-desktop: 14px 0; /* Keeping your height */
    --announcement-padding-landscape: 14px 0;
    --announcement-container-padding: 0 10px; /* Reduced from 35px to 10px */
    
    /* Typography variables */
    --announcement-font-family: Helvetica, Arial, sans-serif;
    --announcement-font-weight: 400;
    --announcement-font-size-desktop: 17px; /* Keeping your font size */
    --announcement-font-size-tablet: 16px;
    --announcement-font-size-mobile: 13px;
    --announcement-line-height: 1.4;
    
    /* Container max-width to control text layout */
    --announcement-container-max-width: 95%; /* Slightly narrower container */
}

/* Main announcement banner styling */
.announcement-banner {
    cursor: pointer;
    position: fixed;
    top: var(--announcement-top-position);
    left: 0;
    right: 0;
    z-index: var(--announcement-z-index);
    color: var(--announcement-text-color);
    background-color: var(--announcement-background);
    width: 100%;
    padding: var(--announcement-padding-desktop);
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    transition: none; /* Prevent transitions causing sizing issues */
}

.announcement-banner .container {
    max-width: var(--announcement-container-max-width);
    width: 100%;
    padding: var(--announcement-container-padding);
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

/* Text styling */
.announcement-banner p,
.announcement-banner .container p {
    font-family: var(--announcement-font-family);
    font-weight: var(--announcement-font-weight);
    font-size: var(--announcement-font-size-desktop);
    color: var(--announcement-text-color);
    margin: 0;
    padding: 0;
    line-height: var(--announcement-line-height);
    text-align: center;
    white-space: normal; /* Allow wrapping by default */
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: none; /* Prevent transitions causing sizing issues */
    transform: none !important; /* Prevent transform issues */
    width: auto; /* Let text width be determined by content */
    display: inline-block; /* Only take up as much space as needed */
}

.announcement-banner:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    border: none;
    transform: translateY(-50%) rotate(45deg);
}

.announcement-banner:hover {
    background-color: var(--announcement-hover-background);
}

/* Orientation-specific styles */
@media screen and (orientation: portrait) {
    .announcement-banner p,
    .announcement-banner .container p {
        font-size: var(--announcement-font-size-tablet) !important;
        max-width: 100% !important;
    }
}

@media screen and (orientation: landscape) {
    .announcement-banner {
        padding: var(--announcement-padding-landscape);
    }
    
    .announcement-banner p,
    .announcement-banner .container p {
        font-size: var(--announcement-font-size-mobile) !important;
        max-width: 100% !important; /* Allow text to use most of the width */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Device-specific adjustments */
@media (max-width: 480px) and (orientation: portrait) {
    .announcement-banner p,
    .announcement-banner .container p {
        font-size: var(--announcement-font-size-mobile) !important;
    }
}

@media (min-width: 769px) and (orientation: portrait) {
    .announcement-banner p,
    .announcement-banner .container p {
        font-size: var(--announcement-font-size-desktop) !important;
    }
}


/* Hard resets to fix orientation change issues */
.announcement-banner,
.announcement-banner p,
.announcement-banner .container,
.announcement-banner .container p {
    -webkit-text-size-adjust: 100% !important; /* Prevent iOS auto text sizing */
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}





/* Hard resets to fix orientation change issues */
.announcement-banner,
.announcement-banner p,
.announcement-banner .container,
.announcement-banner .container p {
    -webkit-text-size-adjust: 100% !important; /* Prevent iOS auto text sizing */
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}












/* Hero Section */
#hero {
    text-align: center;
    padding-top: 150px; /* Account for fixed header & announcement */
    background-color: #000000;
    margin-top: 10px; /* Adjust based on the announcement banner height */
}
/* If necessary, adjust the hero section to account for white header */
#hero {
    text-align: center;
    padding-top: 150px; /* Account for fixed header & announcement */
    background-color: #000000;
    margin-top: 10px; /* Adjust based on the announcement banner height */
}

/* Updated Hero Title styles with line spacing */
.hero-title {
    font-size: 6vw !important;
    line-height: calc(1.3em + 3px) !important; /* Increased line height for spacing */
    margin-bottom: 30px !important;
    margin-left: auto !important; /* Center horizontally */
    margin-right: auto !important; /* Center horizontally */
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #ffffff !important;
}

/* Add spacing to the line breaks within the hero title */
.hero-title br {
    content: "";
    display: block;
    margin-top: 3px; /* Explicit spacing between lines */
}

/* SECTION TITLES - UNIFIED STYLING */
/* This is the single source of truth for all section titles */
.section-title,
#investors .section-title,
#contact .section-title,
#team .section-title,
#products .section-title,
#labs .section-title {
    font-size: 2.5vw !important; /* Fixed size that matches the screenshot */
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-family: Helvetica, Arial, sans-serif !important;
}

/* Responsive section titles */
@media (max-width: 768px) {
    .section-title,
    #investors .section-title,
    #contact .section-title,
    #team .section-title,
    #products .section-title,
    #labs .section-title {
        font-size: 2.5vw !important; /* Keep consistent on tablets */
    }
}
@media (min-width: 768px) {
    .section-title,
    #investors .section-title,
    #contact .section-title,
    #team .section-title,
    #products .section-title,
    #labs .section-title {
        font-size: 1.5vw !important; /* Slightly smaller on mobile */
    }
}
@media (max-width: 480px) {
    .section-title,
    #investors .section-title,
    #contact .section-title,
    #team .section-title,
    #products .section-title,
    #labs .section-title {
        font-size: 2.5vw !important; /* Slightly smaller on mobile */
    }
}

.section-content {
    font-size: 3vw;
    max-width: 800px;
    /*margin: 0 auto;*/
    margin-botton:80px;
    text-align: center;
    line-height: 1.3;
    color: #ffffff;
}

@media (min-width: 768px) {
   .section-content {
        font-size: 2vw;
        max-width: 800px;
        /*margin: 0 auto;*/
        margin-botton:80px;
        text-align: center;
        line-height: 1.3;
    } 
}

/* Section spacing and alignment */
#mission, #vision, #purpose, #story, #culture {
    align-items: center;
    text-align: center;
    padding: 30px 0;
    background-color: #000000;
}

/* Improved Labs Section CSS with better mobile responsiveness */
/* Labs Section Grid Layout */
#labs, #products {
    align-items: center;
    text-align: center;
    background-color: #000000;
}

#labs .container, #products .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.labs-grid, .product-showcase {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.labs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
    grid-template-rows: auto auto; /* 2 rows */
    gap: 20px 40px; /* Vertical gap of 20px, horizontal gap of 40px */
    max-width: 800px;
    margin: 30px auto 0;
    justify-items: center;
    text-align: center;
}

/* Lab Item Styling */
.lab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: center;
}

/* Lab Logo Styling */
.lab-logo {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin-bottom: 10px;
    /* Add invert filter to make logos visible on dark background if needed */
    /* filter: invert(1); */
}

/* Lab Name Styling */
.lab-name {
    font-size: 1rem;
    font-weight: normal;
    text-transform: lowercase;
    margin-top: 5px;
    text-align: center;
    color: #ffffff;
}

/* Specific positioning for the last row items */
.lab-item:nth-child(5),
.lab-item:nth-child(6),
.lab-item:nth-child(7) {
    grid-row: 2; /* Place in second row */
}

/* Place the last 3 items in specific grid positions */
.lab-item:nth-child(5) {
    grid-column: 1; /* LabsX in column 1 of row 2 */
}

.lab-item:nth-child(6) {
    grid-column: 2; /* GovLabs in column 2 of row 2 */
}

.lab-item:nth-child(7) {
    grid-column: 3; /* FactoryF21 in column 3 of row 2 */
}

/* Enhanced responsive adjustments for tablets */
@media (max-width: 768px) {
    .labs-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for tablets */
        grid-auto-rows: auto; /* Auto adjust rows */
        gap: 20px; /* Consistent gap */
    }
    
    /* Reset the specific positioning for tablet view */
    .lab-item:nth-child(5),
    .lab-item:nth-child(6),
    .lab-item:nth-child(7) {
        grid-row: auto;
        grid-column: auto;
    }
}

/* iPhone-specific adjustments */
@media (max-width: 480px) {
    .labs-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for iPhone */
        gap: 15px; /* Smaller gap */
        width: 90%; /* Give some margin */
        margin: 20px auto;
    }
    
    .lab-logo {
        max-width: 90px; /* Smaller logos */
    }
    
    .lab-name {
        font-size: 0.9rem; /* Smaller text */
    }
}

/* iPhone SE / Very small devices */
@media (max-width: 375px) {
    .labs-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 columns */
        gap: 10px; /* Even smaller gap */
    }
    
    .lab-logo {
        max-width: 80px; /* Even smaller logos */
    }
    
    .lab-name {
        font-size: 0.8rem; /* Even smaller text */
    }
}

/* Fix for Safari on iOS */
@supports (-webkit-touch-callout: none) {
    .labs-grid {
        display: -webkit-grid;
        display: grid;
    }
}

/* Products Section */
/* Products Section Container */
#products {
    text-align: center;
    padding: 50px 0;
    background-color: #000000;
}

/* Product Showcase - holds all product items */
.product-showcase {
    margin: 30px auto 0;
    max-width: 600px; /* Control maximum width */
    width: 90%; /* Responsive width */
    text-align: center;
}

/* Fixed Product Card CSS with orange background (#f17f30) */
.product-card {
    border-radius: 20px !important; /* Curved corners */
    padding: 30px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 5px rgba(255,255,255,0.2) !important; /* Subtle shadow for dark theme */
    background-color: #f17f30 !important; /* Change to orange background */
    transition: transform 0.3s ease !important;
    text-align: center !important;
}

/* Product Card hover effect */
.product-card:hover {
    transform: scale(1.05, 1.05);
}

/* Product Logo - the Yuhmmy App image */
.product-logo {
    max-width: 100%;
    height: auto;
    max-height: 100px; /* Control the image height */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-showcase {
        max-width: 90%;
    }
    
    .product-card {
        padding: 25px 15px;
    }
    
    .product-logo {
        max-height: 80px;
    }
}

@media (max-width: 480px) {
    .product-card {
        padding: 20px 10px;
        border-width: 1.5px; /* Slightly thinner border on mobile */
    }
    
    .product-logo {
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .product-card {
        padding: 20px 10px;
        border-width: 1.5px; /* Slightly thinner border on mobile */
    }
    
    .product-logo {
        max-height: 60px;
    }
}

/* Team Section - Horizontal Layout Fix */

/* Team section container */
#team {
    text-align: center;
    padding: 50px 0;
    background-color: #000000;
}

/* Team grid - horizontal layout for all screen sizes */
.team-grid {
    display: flex;
    flex-direction: row !important; /* Force row layout */
    align-items: flex-start;
    justify-content: center;
    gap: 60px; /* Spacing between team members */
    margin: 30px auto 0;
    width: 100%;
    max-width: 800px;
    flex-wrap: nowrap !important; /* Prevent wrapping on all screen sizes */
}

/* Team member card */
.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 300px; /* Control maximum width */
}

/* Member avatar - circle with person outline */
/* Updated Member avatar styling - remove border/outline */
.member-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove the border that was acting as an outline */
    border: none;
    border-radius: 50%;
    overflow: hidden; /* Ensure image stays within the circle */
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make sure the image covers the area nicely */
}

/* Responsive adjustments for member avatars */
@media (max-width: 768px) {
    .member-avatar {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .member-avatar {
        width: 80px;
        height: 80px;
    }
}

/* Very small devices */
@media (max-width: 375px) {
    .member-avatar {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }
}

.member-avatar svg {
    width: 100%;
    height: 100%;
    /* Add invert filter to make SVG visible on dark background if needed */
    /* filter: invert(1); */
}

/* Member name styling */
.member-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    color: #ffffff;
}

/* Member title styling */
.member-title {
    font-size: 2.5vw;
    color: #cccccc; /* Lighter gray for contrast */
    text-align: center;
    line-height: 1.4;
    margin-top: 2px;
}

/* Responsive adjustments - maintain horizontal layout on all devices */
@media (max-width: 768px) {
    .team-grid {
        gap: 40px; /* Reduced gap on tablets */
        flex-direction: row !important; /* Force row layout */
        flex-wrap: nowrap !important; /* Prevent wrapping */
    }
    
    .member-avatar {
        width: 100px;
        height: 100px;
    }
    
    .member-name {
        font-size: 1.1rem;
    }
    
    .member-title {
        font-size: 2.5vw;
        line-height: 1.3;
    }
}

/* Even on small mobile devices, maintain horizontal layout */
@media (max-width: 480px) {
    .team-grid {
        flex-direction: row !important; /* Force row layout */
        flex-wrap: nowrap !important; /* Prevent wrapping */
        gap: 20px; /* Further reduce gap on mobile */
        padding: 0 10px; /* Add some padding for small screens */
    }
    
    .member-avatar {
        width: 80px;
        height: 80px;
    }
    
    .member-name {
        font-size: 1rem;
    }
    
    .member-title {
        font-size: 2.5vw;
        line-height: 1.2;
    }
    
    .team-grid {
        flex-direction: column; /* Stack vertically on very small screens */
        gap: 40px;
        align-items: center;
    }
    
    .team-member {
        max-width: 100%;
    }
}

/* Very small devices - maintain horizontal layout with minimal text */
@media (max-width: 375px) {
    .team-grid {
        gap: 15px; /* Minimum spacing */
    }
    
    .member-avatar {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }
    
    .member-name {
        font-size: 0.9rem;
        margin-bottom: 3px;
    }
    
    .member-title {
        font-size: 1vw;
        line-height: 1.1;
    }
}

@media (min-width: 800px) {
    .member-title {
        font-size: 1vw;
    }
}

/* Investors Section */
#investors {
    text-align: center;
    padding: 50px 0;
    background-color: #000000;
}
/* Investors grid layout with equal spacing */
.investors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; /* Force 3 columns on all devices */
    grid-auto-rows: auto; /* Auto-adjust rows */
    gap: 40px 40px !important; /* Equal vertical and horizontal gap (40px) */
    max-width: 800px;
    margin: 30px auto 0;
    justify-items: center;
}

/* Investor logo styling - clean with no borders */
.investor-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    overflow: hidden; /* Ensure content stays within bounds */
    background-color: transparent; /* Make background transparent */
    border-radius: 0; /* Remove rounded corners */
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
    box-shadow: none; /* Remove any shadow */
}

/* Image styling */
.investor-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure logos display fully */
    max-width: 100%;
    max-height: 100%;
}

/* Link styling */
.investor-logo a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hover effect - keep scale but remove background change */
.investor-logo:hover {
    transform: scale(1.05);
}

/* Responsive adjustments that maintain 3 columns and equal spacing */
@media (max-width: 768px) {
    .investors-grid {
        gap: 30px 30px !important; /* Slightly reduced but still equal spacing for tablets */
    }
    
    .investor-logo {
        width: 70px;
        height: 70px;
    }
}

/* Even on small mobile devices, maintain 3 columns */
@media (max-width: 480px) {
    .investors-grid {
        gap: 20px 20px !important; /* Smaller but equal spacing for mobile */
    }
    
    .investor-logo {
        width: 25vw; /* Use viewport width for better responsiveness */
        height: 25vw;
        max-width: 65px;
        max-height: 65px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .investors-grid {
        gap: 15px 15px !important; /* Even smaller but equal spacing for tiny screens */
    }
    
    .investor-logo {
        width: 22vw; /* Smaller size for very small screens */
        height: 22vw;
        max-width: 55px;
        max-height: 55px;
    }
}





/* Add CSS variable for contact font sizes at the top of your stylesheet */
:root {
    --contact-email-size: 12px;
    --contact-heading-size: 1.25rem;
}

/* Fix for Contact Section Headers - preserving grid layout and setting correct font sizes */
/* Center the contacts section with equal spacing on both sides */

/* Main container adjustments */
#contact {
    text-align: center !important;
    width: 100% !important;
    padding: 50px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #000 !important;
}

#contact .container {
    max-width: 100% !important; /* Allow container to use full width */
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Center the contact grid horizontally with the screen */
.contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* Three equal columns */
    gap: 40px !important; /* Increased from 20px to 50px for more horizontal space */
    width: 90% !important; /* Slightly wider to accommodate the increased gaps */
    max-width: 900px !important;
    margin: 0 auto !important;
    justify-content: center !important;
    justify-items: center !important;
}


/* Set explicit max-width on each contact category to control column width */
.contact-category {
    text-align: center !important;
    width: 100% !important;
    max-width: 180px !important; /* Limit width to prevent overlap */
}

/* Make sure contact title (Media, Careers, Investors) is centered */
.contact-title,
#contact .contact-category h3,
#contact .contact-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: var(--contact-heading-size, 1.25rem) !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

/* Ensure contact info (email addresses) is centered */
.contact-info,
#contact .contact-info,
.contact-info a,
#contact .contact-info a {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: var(--contact-email-size, 13px) !important;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .contact-grid {
        width: 90% !important; /* Slightly wider on small screens */
        gap: 10px !important;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .contact-grid {
        width: 95% !important; /* Almost full width on tiny screens */
        gap: 5px !important;
    }
}

/* Maintain proper spacing on smaller screens */
@media (max-width: 768px) {
    .contact-grid {
        gap: 40px !important; /* Still substantial gap on tablets */
    }
    
    .contact-category {
        max-width: 150px !important;
    }
}

/* Adjust for mobile devices */
@media (max-width: 480px) {
    .contact-grid {
        gap: 25px !important; /* Reduced but still visible gap on phones */
        width: 95% !important;
    }
    
    .contact-category {
        max-width: 120px !important;
    }
}

/* For very small screens */
@media (max-width: 375px) {
    .contact-grid {
        gap: 15px !important;
    }
    
    .contact-category {
        max-width: 100px !important;
    }
}






/* Reset the entire social section styling with white background */
.socials-section {
    width: 100%;
    background-color: #ffffff; /* Changed to white background */
    color: #000000; /* Changed to black text */
    padding: 10px 0;
    text-align: center !important;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #cccccc; /* Lighter border for white background */
    /* Remove any flex or grid properties */
    display: block !important;
}

/* Force center alignment with text-align center */
.socials-section .container {
    width: 100%;
    margin: 0 auto;
    text-align: center !important;
    padding: 0;
    /* Remove any flex properties */
    display: block !important;
}

/* Use traditional centering technique */
.social-links {
    /* Remove flex properties completely */
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Make all elements inline-block for horizontal alignment */
.social-label, .social-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 10px 10px !important;
}

.social-label {
    font-weight: normal;
    font-size: 1rem;
    color: #000000; /* Changed to black text */
}

.social-icon img {
    width: 32px;
    height: 32px;
    /* Remove invert filter for black icons on white background */
    filter: none;
}

.social-icon svg {
    /* Remove invert filter for black icons on white background */
    filter: none;
}





/* Target the element directly above the footer */
footer,
.socials-section,
#contact,
section:last-of-type,
div:last-of-type,
footer ~ * {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

footer {
    width: 100%;
    background-color: #000;
    color: #fff !important;
    padding: 10px 0;
    text-align: left;
    margin: 0 !important;
    box-sizing: border-box;
    position: relative;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding-top: 1px;
    margin-top: -1px !important;
    overflow-x: hidden; /* Prevent horizontal scroll */
}


/* Add a "mask" above the footer to hide any potential lines */
footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #000;
    z-index: 999;
}

/* Remove any HR elements that might be present */
hr,
.divider,
.separator-line {
    display: none !important;
}

/* Container modifications */
footer .container {
    width: 100%;
    max-width: 95%; /* Reduced from 100vw */
    margin: 0 auto;
    padding: 0 10px; /* Reduced padding */
    box-sizing: border-box;
    border: none !important;
    overflow-x: hidden; /* Additional overflow prevention */
}

/* Footer content - ALWAYS maintain horizontal layout */
.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important; /* Force single line layout */
    border: none !important;
    width: 100%;
}

/* Company info (left side) */
.company-info {
    display: flex;
    align-items: center;
    flex-shrink: 1; /* Allow shrinking if needed */
    min-width: 0; /* Allow text to compress */
}

.company-name {
    color: #fff;
    font-weight: normal;
    font-size: 0.9rem;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis if text overflows */
}

/* Footer links (right side) */
.footer-links {
    display: flex;
    gap: 15px;
    position: relative;
    flex-shrink: 0; /* Don't shrink the links */
}

.footer-link {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    font-size: 0.6rem;
    white-space: nowrap; /* Keep individual link text from breaking */
}

/* Responsive adjustments that preserve horizontal layout */
@media (max-width: 700px) {
    footer .container {
        width: 100%;
        max-width: 95%;
        padding: 0 10px;
    }
    
    .footer-content {
        justify-content: space-between;
        width: 100%;
    }
    
    .company-name {
        font-size: 0.8rem;
    }
    
    .footer-link {
        font-size: 0.65rem;
    }
    
    /* Reduce gap between links on mobile */
    .footer-links {
        gap: 10px;
    }
}

/* Very small devices - still maintain horizontal layout */
@media (max-width: 480px) {
    footer .container {
        padding: 0 5px;
    }
    
    .company-name {
        font-size: 0.7rem;
    }
    
    .footer-link {
        font-size: 0.6rem;
    }
    
    /* Further reduce gap on very small screens */
    .footer-links {
        gap: 8px;
    }
}

/* Extreme small width handling */
@media (max-width: 350px) {
    .company-name {
        max-width: 120px; /* Limit width and show ellipsis */
    }
    
    .footer-links {
        gap: 5px;
    }
}

/* Remove borders from adjacent elements that might be causing lines */
footer + * {
    border-top: none !important;
}

* + footer {
    border-bottom: none !important;
}










.company-info {
    display: flex;
    align-items: center;
}

.company-name {
    color: #fff; /* Changed to black text */
    font-weight: normal;
    font-size: 0.9rem; /* Base font size */
}

.separator {
    color: #fff; /* Changed to black text */
    margin: 0 10px;
}

.company-url {
    color: #fff; /* Changed to black text */
    font-size: 0.8rem;
}

/* Footer links */
.footer-links {
    display: flex;
    gap: 15px;
    position: relative;
}

.footer-link {
    color: #fff; /* Changed to black text */
    text-decoration: none;
    font-weight: normal;
    font-size: 0.6rem; /* Smaller than company name */
}

.footer-link:hover {
    text-decoration: underline;
}

/* Mobile adjustments - maintain single line as long as possible */
@media (max-width: 700px) {
    .social-icon {
        width: 30px;
        height: 30px;
    }
    
    .social-links {
        gap: 10px;
    }
    
    .footer-content {
        justify-content: space-between;
        width: 100%;
    }
    
    .company-info, .footer-links {
        flex-shrink: 1;
    }
    
    .company-name {
        font-size: 0.9rem;
    }
    
    .company-url {
        font-size: 0.8rem;
    }
    
    .footer-link {
        font-size: 0.75rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .social-icon {
        width: 20px;
        height: 20px;
    }
    
    .social-label {
        font-size: 1rem;
    }
    
    .social-links {
        gap: 8px;
    }
}



/* Remove any default user-agent borders and outlines */
footer, 
footer .container, 
.footer-content,
.company-info,
.footer-links,
.company-name,
.company-url,
.separator,
.footer-link {
    outline: none !important;
    box-shadow: none !important;
}

/* Fix for iOS Safari which sometimes adds borders */
@supports (-webkit-touch-callout: none) {
    footer {
        border: none !important;
    }
    
    footer::before,
    footer::after {
        display: none !important;
    }
}










/* Helper classes and misc styles */
.text-center {
    text-align: center;
}

.handwritten {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
}

/* Animation transitions */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility helper that stays hidden visually */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #333;
    color: white;
    padding: 8px;
    z-index: 2000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}






/* Modal styles */
.modal {
    display: none;
    position: fixed !important;
    z-index: 2000;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9000 !important;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    position: relative;
    background-color: #222222;
    margin: 5% auto;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    transform: translateY(-50px);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 9500 !important;
}

.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    padding: 10px 20px; /* Reduced padding */
    border-bottom: none;
    position: relative;
    background-color: #000;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 60px; /* Set a specific smaller height */
    display: flex;
    align-items: center; /* Vertically center the content */
}

.modal-header h2 {
    margin: 0;
    font-size: 20px; /* Slightly smaller font size */
    font-weight: 600;
    text-align: center;
    color: #fff;
}

.close-modal {
    position: absolute;
    right: 15px; /* Slightly adjusted position */
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    font-size: 24px; /* Slightly smaller font size */
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    line-height: 1; /* Tighten the line height */
}

.close-modal:hover {
    color: #ccc;
}

/* Logo styling */
.modal-header img,
.modal-header .logo {
    max-height: 30px;
    width: auto;
    display: block;
    margin: 0 auto; /* Additional centering */
}

/* For text logo if you're using text instead of image */
.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center; /* Center text */
    color: #fff;
}

.modal-body {
    padding: 5px;
    text-align: left;
    color: #000!important;
    background-color:#fff!important;
}

.modal-image {
    text-align: center;
    margin-bottom: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
}

.modal-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 0 !important;
    display: block;
}

.modal-date {
    color: #cccccc;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.modal-subheading {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 20px;
    color: #000!important;
}

.modal-body p {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1rem;
    text-align: left;
    color: #000!important;
}

.modal-body ul {
    margin-bottom: 20px;
    padding-left: 20px;
    color: #000!important;
}

.modal-body li {
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: left;
    color: #000!important;
}

.modal-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: none;
    font-size: 0.9rem;
    color: #000!important;
}

/* Prevent body scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Fix for policy modal */
#policyModal {
    z-index: 9999 !important; /* Higher z-index to ensure it's on top */
    top: 0 !important; /* Position at top of viewport */
}

#policyModal .modal-body {
    padding: 30px;
    text-align: left;
    max-height: 70vh;
    overflow-y: auto;
    color: #000;
    background-color:#fff;
}

#policyModal h3 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left; /* Explicitly set headings to left alignment */
    color: #000;
}

#policyModal h4 {
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: left; /* Explicitly set subheadings to left alignment */
    color: #000;
}

#policyModal p {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1rem;
    text-align: left; /* Explicitly set paragraphs to left alignment */
    color: #ffffff;
}

#policyModal .policy-date {
    color: #cccccc;
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-align: left; /* Left-align date */
}

#policyModal ul {
    margin-bottom: 20px;
    padding-left: 20px;
    text-align: left; /* Left-align lists */
    color: #ffffff;
}

#policyModal li {
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: left; /* Left-align list items */
    color: #000;
}

#policyModal a {
    color: #f59b56; /* Lighter orange for better visibility on dark background */
    text-decoration: none;
    text-align: left; /* Left-align links */
}

#policyModal a:hover {
    text-decoration: underline;
}

/* Override any potential center alignment from site-wide styles */
#policyModal * {
    text-align: left;
}

/* Make sure logo in header remains centered */
#policyModal .modal-header .logo {
    text-align: center;
}

#policyModal .modal-header .logo img {
    margin: 0 auto;
}

/* General responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .section-content {
        font-size: 1.5rem;
    }
    
    section {
        padding: 50px 0;
    }
    
    .lab-name, .product-name, .member-name {
        font-size: 1.1rem;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .modal-header h2 {
        font-size: 20px;
    }
    
    .modal-body {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-content {
        font-size: 1.2rem;
    }
    
    section {
        padding: 40px 0;
    }
    
    .lab-name, .product-name, .member-name {
        font-size: 1rem;
    }
    
    /* Ensure all text remains centered on mobile */
    h1, h2, h3, h4, h5, h6, p, a, span, div,
    .section-title, .section-content, .lab-name,
    .product-name, .member-name, .member-title,
    .contact-title, .contact-info, .lab-item,
    .product-card, .team-member, .investors-grid {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 2.8vw!important;
    }
}



/* Background animation container - positioned behind content */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Place behind all content */
    pointer-events: none; /* Allow clicking through animation */
}

/* Test tubes and bubbles container */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.layer-1 {
    z-index: -3;
}

.layer-2 {
    z-index: -2;
}

.layer-3 {
    z-index: -1;
}

/* Test tube styling - adjust colors for dark theme */
.test-tube {
    position: absolute;
    background: linear-gradient(to bottom, 
        rgba(60, 60, 60, 0.15), 
        rgba(60, 60, 60, 0.1));
    border: 1px solid rgba(80, 80, 80, 0.2);
    border-radius: 0 0 20px 20px;
    transform-origin: center top;
    animation: float-tube 40s linear infinite;
    opacity: 0;
}

/* Bubbles styling - adjust colors for dark theme */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 65% 35%, 
        rgba(80, 80, 80, 0.2) 0%, 
        rgba(60, 60, 60, 0.15) 40%, 
        rgba(40, 40, 40, 0.1) 60%, 
        rgba(20, 20, 20, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(100, 100, 100, 0.15);
    animation: float-bubble 20s linear infinite;
    opacity: 0;
}

/* Test tube filling animation - make colors more vibrant for dark theme */
.test-tube::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, 
        rgba(64, 170, 240, 0.3), 
        rgba(64, 170, 240, 0.4));
    border-radius: 0 0 19px 19px;
    animation: fill-tube 20s ease-in-out infinite alternate;
}

/* Test tube sizes */
.test-tube.large {
    width: 40px;
    height: 200px;
}

.test-tube.medium {
    width: 30px;
    height: 150px;
}

.test-tube.small {
    width: 20px;
    height: 100px;
}

/* Bubble sizes */
.bubble.large {
    width: 80px;
    height: 80px;
}

.bubble.medium {
    width: 50px;
    height: 50px;
}

.bubble.small {
    width: 30px;
    height: 30px;
}

/* Bubble colors - make more vibrant for dark theme */
.bubble.blue {
    background: radial-gradient(
        circle at 65% 35%, 
        rgba(64, 170, 240, 0.25) 0%, 
        rgba(64, 170, 240, 0.15) 40%, 
        rgba(64, 170, 240, 0.1) 60%, 
        rgba(64, 170, 240, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(64, 170, 240, 0.2);
}

.bubble.purple {
    background: radial-gradient(
        circle at 65% 35%, 
        rgba(147, 51, 234, 0.25) 0%, 
        rgba(147, 51, 234, 0.15) 40%, 
        rgba(147, 51, 234, 0.1) 60%, 
        rgba(147, 51, 234, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(147, 51, 234, 0.2);
}

.bubble.teal {
    background: radial-gradient(
        circle at 65% 35%, 
        rgba(20, 184, 166, 0.25) 0%, 
        rgba(20, 184, 166, 0.15) 40%, 
        rgba(20, 184, 166, 0.1) 60%, 
        rgba(20, 184, 166, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(20, 184, 166, 0.2);
}

/* Animation for test tubes */
@keyframes float-tube {
    0% {
        transform: translateY(100vh) rotate(var(--rotation));
        opacity: 0;
    }
    5% {
        opacity: var(--opacity);
    }
    95% {
        opacity: var(--opacity);
    }
    100% {
        transform: translateY(-200px) rotate(var(--rotation));
        opacity: 0;
    }
}

/* Animation for bubbles */
@keyframes float-bubble {
    0% {
        transform: translate(var(--start-x), 100vh) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: var(--opacity);
    }
    90% {
        opacity: var(--opacity);
    }
    100% {
        transform: translate(var(--end-x), -100px) scale(1.2);
        opacity: 0;
    }
}

/* Animation for test tube filling */
@keyframes fill-tube {
    0%, 20% {
        height: 30%;
    }
    80%, 100% {
        height: 70%;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .test-tube.large {
        width: 30px;
        height: 150px;
    }
    
    .test-tube.medium {
        width: 25px;
        height: 120px;
    }
    
    .test-tube.small {
        width: 15px;
        height: 80px;
    }
    
    .bubble.large {
        width: 60px;
        height: 60px;
    }
    
    .bubble.medium {
        width: 40px;
        height: 40px;
    }
    
    .bubble.small {
        width: 20px;
        height: 20px;
    }
}