/* Add this @import rule at the VERY TOP of your style.css file */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* Basic Reset / Normalization */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Modify the existing body rule */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7;
/* color: #333; */ /* Setting a default body color might be overridden below */
/* margin: 0 20px 0 20px; */
/* --- Animated Gradient Background for Body --- */
/* --- Default Text Color on Gradient --- */
/* Set a base text color that works well over MOST of the gradient */
/* This might need overriding in specific sections (header, about, contact) */
color: var(--dark-color); /* Start with dark text, adjust as needed */
}

/* --- Color Scheme --- */
:root {
--primary-color: #0f52ba; /* Sapphire Blue */
--primary-color-light: #0e3f88;
--secondary-color: #E0F2FF; /* Light Blue accent */
--dark-color: #2C3E50; /* Dark Blue/Grey */
--light-color: #f8f9fa; /* Off-white */
--text-color: #333;
--light-text: #fff;
}

/* --- General Link Styling --- */
a {
color: var(--primary-color);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

span {
color: var(--primary-color);
}

/* --- Logo Styles --- */
.header-logo {
/* --- Define Size --- */
width: 200px; /* Example width - ADJUST */
height: 70px; /* Example height - ADJUST */
max-width: 100%; /* Allow shrinking if needed, up to width */

/* --- Remove auto margins --- */
/* margin: 0 auto 15px auto; */ /* REMOVE this line */
margin: 0; /* Reset margin, Flexbox handles positioning */
/* You could add margin-right here if needed, but space-between often suffices */
/* margin-right: 20px; */

/* --- Keep Background/Masking if using .header-logo-masked --- */
/* background: linear-gradient(-45deg, var(--secondary-color), #a1c4fd, #c2e9fb, var(--primary-color)); */
/* background-size: 400% 400%; */
/* --- Add this if logo should not shrink --- */
flex-shrink: 0;
}

header {
/* background-color: var(--light-color); */ /* Remove or comment out the old background */

/* --- Use 18rem for L/R padding --- */
/* Note: 18rem is a very large padding value, adjust if needed */
padding: 15px 18rem;
background-color: white;
border-bottom: 2px solid black; /* Keep or adjust border */
display: flex;
justify-content: space-between;
align-items: center;
}

header nav {
position: relative; /* Ensure nav context is above background */
z-index: 2;
}

header nav ul {
list-style: none;
margin: 0; /* Ensure no default margins interfere */
padding: 0; /* Ensure no default padding interfere */
}

header nav ul li {
display: inline-block; /* Keep items side-by-side */
margin-left: 25px; /* Adjust space BETWEEN nav items (use margin-left/right) */
/* margin: 0 20px; */ /* Remove horizontal margins if previously set here */
}

header nav ul li:first-child {
margin-left: 0; /* No margin on the first nav item */
}

header nav ul li a {
font-size: 1.1em;
font-weight: 500;
color: var(--primary-color); /* Example: Adjust if needed for contrast */
/* ... other styles ... */
}

header nav ul li a:hover {
color: var(--dark-color);
text-decoration: none;
}

/* --- Add these styles to your existing CSS --- */

/* Hamburger Button Default (Hidden on Desktop) */
#hamburger-btn {
    display: none; /* Hide by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10; /* Ensure it's clickable */
}

/* Styling the bars within the hamburger button */
#hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color); /* Or --dark-color */
    margin: 5px 0;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for active state */
}

/* --- Keep other styles (.section-content, footer, etc.) --- */
/* ... (rest of your CSS) ... */

/* Main Content Area Styling */
/* main { */
/* No specific styles needed now */
/* } */

/* Section Styling */
section {
padding: 80px 20px; /* More vertical padding */
}

/* --- About Us Section Styling --- */
#about {
/* --- Dark Blue Animated Gradient --- */
/* background: linear-gradient(-45deg, black, var(--dark-color), #001f3f, #003366); Darker blue theme */
/* background-size: 400% 400%; */
/* animation: gradientShift 10s ease-in-out infinite; Apply animation, adjust duration (18s) if needed */
background: black;
padding: 80px 20px;
border-bottom: 1px solid #444; /* Keep dark border */
color: var(--light-text); /* Set default text color for the section */
overflow: hidden; /* Add overflow hidden to contain gradient better if needed */
}

.about-text {
flex: 2;
text-align: left;
color: var(--light-text);
font-family: 'Open Sans', sans-serif;
/* --- UPDATED FONT SIZE --- */
font-size: 3.5rem; /* NOTE: This is very large for paragraph text. */
line-height: 1.15; /* Adjust line spacing for huge font */
font-weight: 600;
position: relative;
z-index: 2; /* Keep text above potentially overlapping image */
}

/* Add default margin between paragraphs if needed (browser usually adds it) */
.about-text p {
margin-bottom: 1.5rem; /* Adjust spacing between paragraphs */
}
.about-text p:last-child {
margin-bottom: 0; /* Remove margin from the last paragraph */
}
#about h2 {
margin: 0 auto 50px auto;
max-width: 1100px;
text-align: left;
color: var(--light-text); /* Ensure heading is light */
margin-bottom: 50px;
font-size: 6em;
line-height: 1.1;
background-color: black;
padding: 1em;
border-radius: 50px;
border: 2px solid var(--primary-color)
}



/* Container for the two columns */
.about-content-container {
display: flex;
/* align-items: center; */ /* REMOVE center alignment */
align-items: flex-start; /* ADD top alignment */
gap: 50px;
max-width: 1100px;
margin: 0 auto;
}


/* Right Column: Visual Styling */
/* Right Column: Visual Styling */
.about-visual {
flex: 1;
flex-shrink: 0;
text-align: center; /* Centers image within its allocated space */

/* --- UPDATED Negative Margin --- */
margin-left: -400px; /* NOTE: This will cause significant overlap. */

position: relative;
z-index: 1; /* Keep image container behind text */
}

/* Styling for the image itself */
.about-visual img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
opacity: 0.3; /* Keep opacity if desired */
}


/* Container for the two columns */
.about-content-container {
display: flex;
/* align-items: center; */ /* REMOVE center alignment */
align-items: flex-start; /* ADD top alignment */
gap: 50px;
max-width: 1100px;
margin: 0 auto;
}

/* #contact { */
/* background-color: var(--secondary-color); Light blue background */
/* } */

section h2 {
text-align: center;
color: var(--dark-color);
/* margin-bottom: 40px; More space below heading */
font-size: 2em; /* Larger section headings */
}

.section-content {
max-width: 800px; /* Limit content width for readability */
margin: 0 auto; /* Center the content block */
text-align: center; /* Center text within the block */
}

.section-content p {
margin-bottom: 15px;
font-size: 1.1em; /* Slightly larger paragraph text */
}

/* Modify the existing #contact rule in style.css */

/* Reset #contact if you applied the gradient there before */
#contact {
background: linear-gradient(-45deg, var(--primary-color-light), #a1c4fd, #c2e9fb, var(--primary-color));
background-size: 400% 400%;
animation: gradientShift 5s ease infinite;
/* background-color: var(--secondary-color); Put back its original background or desired static color */
/* padding: 80px 20px; */
/* border-bottom: 1px solid #ddd; */
/* Remove gradient/animation lines if they were here */
/* background: linear-gradient(...); */
/* background-size: ...; */
/* animation: ...; */

/* Reset text colors if you changed them for the gradient */
color: var(--text-color); /* Or original text color */
}

.contact-flex-container {
display:flex;
flex-wrap: wrap;
align-items:baseline;
justify-content: center;
gap: 10px;
/* border: 1px solid black; */

}

.break {
flex-basis: 100%;
height: 0;
}

#contact h2 {
color: white; /* Or original heading color */
font-weight: 600;

}
#contact p {
color: black;
}

#contact ul li {
color: var(--text-color);
list-style-type: none;
}
#contact ul li strong {
color: var(--dark-color); /* Or original strong color */
}
#contact a {
color: var(--primary-color); /* Original link color */
}
#contact a:hover {
text-decoration: underline; /* Original hover effect */
}

/* Footer Styling */
footer {
/* background-color: var(--light-color); */
color: var(--primary-color);
text-align: center;
padding: 15px 20px;
margin-top: 0; /* Remove margin if sections have bottom border */
/* border-top: 3px solid var(--primary-color); */
}

/* --- Add these rules for dimming effect --- */

body.menu-open main,
body.menu-open footer {
    filter: brightness(0.5) blur(2px); /* Dim and slightly blur background */
    /* Alternative: Opacity */
    /* opacity: 0.5; */
    transition: filter 0.4s ease; /* Smooth transition */
    /* transition: opacity 0.4s ease; */
    pointer-events: none; /* Prevent interaction with dimmed content */
}

/* Ensure header and OPEN nav are not dimmed and remain interactive */
body.menu-open header,
body.menu-open #main-nav.nav-active {
    filter: none;
    /* opacity: 1; */
    pointer-events: auto;
}

/* Ensure body returns to normal smoothly */
body main,
body footer {
    transition: filter 0.4s ease;
    /* transition: opacity 0.4s ease; */
    filter: none; /* Ensure filter is none by default */
    /* opacity: 1; */
    pointer-events: auto;
}

/* Make sure the open nav itself is fully interactive */
#main-nav.nav-active {
    pointer-events: auto;
}

/* Ensure button stays interactive */
#hamburger-btn {
    pointer-events: auto;
}

/* ... rest of your CSS ... */

/* Add this @keyframes rule at the end of your style.css */

@keyframes gradientShift {
0% {
background-position: 0% 50%; /* Start position */
}
50% {
background-position: 100% 50%; /* Midpoint position */
}
100% {
background-position: 0% 50%; /* End position (back to start for looping) */
}
}

/* =================================== */
/* Media Queries              */
/* =================================== */

/* Medium Devices (Tablets, etc. - 992px and down) */
@media (max-width: 992px) {
    header {
        padding: 15px 5rem; /* Reduce header padding significantly */
    }

    #about h2 {
        font-size: 4.5em; /* Reduce heading size */
    }

    .about-text {
        font-size: 2.5rem; /* Reduce paragraph size */
    }

     /* Adjust negative margin - start reducing it */
     .about-visual {
        margin-left: -200px; /* Example: Halve the margin */
     }
}

/* Small Devices (Portrait Tablets, Large Phones - 768px and down) */
@media (max-width: 768px) {
    header {
        /* Ensure these Flexbox properties are active */
        display: flex;
        align-items: center; /* This vertically centers flex items */
        justify-content: space-between; /* Keeps logo left, button right (since nav is hidden) */
        position: relative; /* Keep for the absolute positioned nav panel */
        padding: 10px 1rem; /* Keep mobile padding */
        /* Remove flex-direction: column; if present */
    }

    /* Hamburger Button Styling for Mobile */
    #hamburger-btn {
        display: block; /* Keep it visible */
        /* --- REMOVE Absolute Positioning --- */
        /* position: absolute; */
        /* top: 10px; */
        /* right: 1rem; */

        /* Keep visual styles */
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px; /* Or adjust padding */
        z-index: 10; /* Keep high z-index */
        /* margin-left: auto; */ /* Add this if space-between doesn't work reliably */
    }

    /* Nav Panel Styling (Keep as is) */
    #main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        /* ... other styles ... */
    }

    #main-nav.nav-active {
        display: block;
    }

    /* Reset list style for vertical layout */
    #main-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Style Nav Links for Mobile */
    #main-nav ul li {
        display: block; /* Make list items block level */
        margin: 0; /* Remove horizontal margins */
        text-align: center; /* Center text */
        border-bottom: 1px solid #eee; /* Separator */
    }
    #main-nav ul li:last-child {
        border-bottom: none;
    }

    #main-nav ul li a {
        display: block; /* Make link fill list item */
        padding: 15px 20px; /* Add padding for touch targets */
        font-size: 1.2em; /* Adjust font size */
        color: var(--primary-color);
        font-weight: 600;
        background-color: white;
    }
     #main-nav ul li a:hover {
        text-decoration: none; /* Ensure no underline */
        color: var(--dark-color);
    }


    /* --- Optional: Animate Hamburger to 'X' when active --- */
    #hamburger-btn.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #hamburger-btn.active span:nth-child(2) {
        opacity: 0; /* Hide middle bar */
    }
    #hamburger-btn.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* --- Hide the original inline list items --- */
    /* This might not be needed if #main-nav is hidden */
    /* header nav ul li { display: none; } */
}

/* Extra Small Devices (Phones - 576px and down) */
@media (max-width: 576px) {
     header {
        padding: 10px 1rem; /* Minimal padding */
    }

    #about h2 {
        font-size: 2.8em; /* Smallest heading size */
        padding: 0.6em;
        border-radius: 20px;
    }

     .about-text {
        font-size: 1.6rem; /* Smallest paragraph size */
        line-height: 1.6; /* Increase line height for readability */
        padding: 15px;
    }

    .about-visual {
       width: 100%; /* Allow visual block to fill width */
    }

    .about-visual img {
       width: 150px; /* Smallest image size */
       height: 110px;
       opacity: 0.5; /* Maybe increase opacity slightly */
    }

}