/* Basic Reset & Defaults */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

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

section {
    padding: 80px 0; /* Increased padding again */
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px; /* More space below headings */
    color: #0d0f30;
}

p {
    margin-bottom: 1rem;
}

/* Hero Section Styling (Full Screen Attempt) */
#hero {
    background-color: #0d0f30;
    color: #ffffff;
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column; /* Stack logo and content */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    padding: 20px; /* Padding around edges */
    position: relative; /* Needed for absolute positioning of logo */
    overflow: hidden; /* Prevent potential scrollbars from oversized logo */
}

/* Logo Styling (Inside Hero) */
#logo {
    /* Positioned at the top center (adjust as needed) */
    position: absolute;
    top: 50px; /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%);
    max-height: 120px; /* Tripled from 40px */
    width: auto;
    max-width: 80%; /* Prevent logo from being too wide on narrow screens */
}

#hero .hero-content {
    margin-top: 160px; /* PUSH DOWN tagline below logo area, adjust as needed */
}


/* Tagline styling */
#hero .tagline {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.4;
    /* --- REMOVE or COMMENT OUT max-width rules --- */
    /* max-width: 800px; */
    /* max-width: 90%; */
    /* max-width: 95%; */
    width: 100%; /* Allow text to fill the padded container */
    margin: 0; /* Remove auto margins if they existed */
    /* Text is centered by the parent #hero's text-align: center */
}

/* Add this media query */
@media (min-width: 1400px) { /* Adjust breakpoint as needed for your definition of "full screen" */
  #hero .tagline {
    max-width: 95%; /* Allow it to use almost full width */
    margin: 0 auto; /* Keep it centered */
  }
}

/* --- ADD THIS NEW MEDIA QUERY --- */
@media (min-width: 1000px) and (max-width: 1399px) { /* Targets screens from 1000px up to just below 1400px */
  #hero .tagline {
    max-width: 90%; /* Increase allowed width in this range */
    /* Optional: Slightly reduce font size if needed */
    /* font-size: 2.1rem; */
  }
}
/* --- END OF NEW MEDIA QUERY --- */

/* You might also need to ensure the container allows this width */
@media (min-width: 1400px) {
    .container {
        /* You can increase container max-width here if needed, but often not necessary */
        /* max-width: 1300px; */
    }
}

/* --- Optional container width adjustment --- */
/* If the container is still limiting it, you might need this */
@media (min-width: 1000px) and (max-width: 1399px) {
    .container {
         /* Ensure container isn't the bottleneck */
         /* max-width: 1100px; or potentially slightly more */
    }
}

/* Problem Statement Section Styling */
#problem {
    background-color: #ffffff; /* White background */
    padding: 60px 0; /* Slightly less padding */
}
.problem-statement {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4rem; /* Make text larger */
    font-weight: 400;
    color: #0d0f30;
}


/* ============================== */
/* == Our Solution Section CSS == */
/* ============================== */

#solution {
    background-color: #f4f4f4; /* Light grey background */
    overflow-x: hidden; /* Prevent horizontal scrollbars if images are wide */
}

/* Container for the row of images */
.solution-image-row {
    display: flex;
    justify-content: center;
    align-items: center; /* THIS IS KEY for vertical alignment */
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Add this rule if the side images look too small after alignment fix */
.side-image {
     flex-shrink: 0; /* Prevent side images from shrinking too much if center is wide */
}

/* Animation visible state */
.solution-image-row.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Styling for all images in the row */
.solution-image {
    display: block; /* Remove extra space below image */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure images don't overflow container */
    border-radius: 8px; /* Optional: slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Optional: subtle shadow */
}

/* Specific max-widths to control relative size */
.side-image {
    max-width: 22%; /* Adjust percentage as needed */
    position: relative; /* Needed for vertical offset */
}

.center-image {
     /* Takes up more space, adjust as needed based on actual image width */
    max-width: 40%; /* Adjust percentage as needed */
     /* Optional: make it slightly larger visually */
     transform: scale(1.05);
}

/* Vertical offset examples (adjust px values) */
.image-offset-up {
    position: relative; 
    /*top: -15px; /* Move this image up */
}
.image-offset-down {
    position: relative; 
    /*top: 15px; /* Move this image down */
}


/* Container for the text bullet points */
.solution-features {
    max-width: 700px; /* Control width of text block */
    margin: 0 auto; /* Center the text block */

    /* Animation base state */
    opacity: 0;
    transform: translateY(20px);
    /* Add a slight delay so text appears after images */
    transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;
}

/* Animation visible state */
.solution-features.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.solution-features ul {
    list-style: none;
    padding-left: 0;
    text-align: center; /* Center the list items within the UL */
}

.solution-features li {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-left: 0; /* Remove padding used for bullets */
    position: static; /* Reset position if it was relative */
    /* Text inside the LI will be centered because of the UL's text-align */
    /* If you want LI text left-aligned but centered block: */
    /* display: inline-block; text-align: left; */
}

/* Remove or comment out the custom bullet style */
.solution-features li::before {
    /* content: '✓'; */
    /* position: absolute; */
    /* left: 0; */
    /* top: 1px; */
    /* color: #ffb923; */
    /* font-weight: bold; */
    /* font-size: 1.2em; */
    display: none; /* Hide the pseudo-element */
}


/* --- Responsiveness for Solution Section --- */

@media (max-width: 768px) { /* Tablet */
    .solution-image-row {
        flex-direction: column; /* Stack images vertically */
        gap: 30px; /* Increase gap when stacked */
        align-items: center; /* Center stacked images */
    }

    .side-image,
    .center-image {
        max-width: 70%; /* Allow images to be larger when stacked */
        transform: scale(1); /* Reset scale */
        top: 0; /* Reset vertical offset */
    }

     .solution-features {
         max-width: 90%; /* Allow text to take more width */
         margin-top: 40px; /* Ensure space after stacked images */
         text-align: center; /* Center list items text */
     }
      .solution-features li {
         padding-left: 0; /* Remove padding */
         text-align: center;
         display: block;
     }
      .solution-features li::before {
        /* Hide bullet or reposition if needed for centered text */
         display: none;
        /* Alternatively, keep it but adjust centering */
        /* position: static; display: inline-block; margin-right: 10px; */
     }
}

@media (max-width: 480px) { /* Mobile */
    .side-image,
    .center-image {
        max-width: 85%; /* Even larger on small mobile */
    }
    .solution-features li {
        font-size: 1rem; /* Slightly smaller font */
    }
}

/* == End of Our Solution Section CSS == */
/* =================================== */

/* --- Ensure you REMOVE or COMMENT OUT old Solution CSS --- */
/* --- (e.g., .solution-grid, .solution-item) --- */

/* Make sure the general animation CSS is still present */
/* (If you removed it previously, add it back) */
/*
.animate-on-scroll {
     Initial state (defined within specific sections now)
}
.animate-on-scroll.is-visible {
     Visible state (defined within specific sections now)
}
*/


/* Difference Section Styling */
#difference {
    background-color: #ffffff; /* White background */
    padding: 60px 0;
}

#difference .container {
    max-width: 800px;
    text-align: center;
}

.difference-quote {
    font-size: 2.2rem; /* Large text */
    font-weight: bold;
    font-style: italic;
    color: #0d0f30; /* Dark blue */
    line-height: 1.4;
    margin: 0; /* Remove default paragraph margin */
}

/* Contact Section Styling */
#contact {
    background-color: #e9e6f1; /* Light purple/grey background */
    text-align: center;
}

#contact-form {
    max-width: 550px;
    margin: 30px auto 0 auto;
    text-align: left;
}

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

#contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #0d0f30;
}

#contact-form input[type="email"],
#contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

#contact-form button {
    background-color: #ffb923;
    color: #0d0f30;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    display: block;
    width: 100%;
    margin-top: 10px;
}

#contact-form button:hover {
    background-color: #e6a71e;
    color: #000000;
}
#contact-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#form-status {
    margin-top: 15px;
    font-weight: bold;
    min-height: 1.2em; /* Reserve space */
    text-align: center;
}


/* Footer Styling */
footer {
    background-color: #0d0f30;
    color: #ccc;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

/* Responsiveness Adjustments */
@media (max-width: 1024px) { /* Tablet */
     #hero .tagline {
        font-size: 1.8rem;
        max-width: 600px;
    }
    #logo {
        top: 40px;
        max-height: 100px;
    }
     #hero .hero-content {
        margin-top: 140px; /* Adjust spacing */
    }
    .difference-quote {
        font-size: 2rem;
    }
}


@media (max-width: 768px) { /* Smaller Tablet / Large Mobile */
    h2 {
        font-size: 2rem;
         margin-bottom: 40px;
    }
    section {
        padding: 60px 0;
    }
     #hero {
         height: auto; /* Don't force 100vh */
         min-height: 70vh; /* Still substantial */
         padding-top: 140px; /* Ensure space for logo */
         padding: 20px 0; /* Adjust overall section padding if needed, but keep 0 horizontal padding */
         padding-bottom: 60px;
     }

    #logo {
        top: 30px;
        max-height: 80px; /* Reduce logo size */
    }
/*     #hero .hero-content {
/*         margin-top: 20px; /* Less margin needed when logo is smaller */
/*
/*     }

    /* Container for the tagline */
    #hero .hero-content {
        margin-top: 160px; /* Keep existing top margin if needed */
        width: 100%; /* Ensure it spans the width */
        /* --- ADD Padding for side "margins" --- */
        padding-left: 3rem;  /* Approx 0.5 inch spacing */
        padding-right: 3rem; /* Approx 0.5 inch spacing */
        box-sizing: border-box; /* Ensure padding is included within width */
    }

    #hero .tagline {
        font-size: 1.6rem;
    }
    .problem-statement {
        font-size: 1.2rem;
    }
    .solution-grid {
         /* Switch to 2 columns */
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 30px;
    }
    .difference-quote {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) { /* Mobile */
    #hero {
         min-height: 60vh;
         padding-top: 100px;
     }
    #logo {
        top: 20px;
        max-height: 60px;
    }
     #hero .hero-content {
         margin-top: 10px;
     }
     #hero .tagline {
        font-size: 1.4rem;
    }
     .problem-statement {
        font-size: 1.1rem;
    }
    .solution-grid {
         /* Switch to 1 column */
         grid-template-columns: 1fr;
         gap: 25px;
    }
    .solution-item img {
        max-width: 60px;
    }
    .difference-quote {
        font-size: 1.5rem;
    }
     h2 {
         font-size: 1.8rem;
     }
}