@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Generic Code */
.hook-title {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    margin: 1.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.05rem;
    color: #2d3436;
}
  
.section-title {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin: 1.25rem 0 1rem;
    line-height: 1.3;
    color: #2d3436;
}
  
  /* Subtitle Styles */  
.section-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0.5rem 0 1rem;
    line-height: 1.5;
    color: #2d3436;
}
  
  /* Body Text Style */

.hook-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0.75rem 0 1.25rem;
    line-height: 1.4;
    color: #636e72;
}


.section-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    margin: 0.5rem 0 1rem;
    line-height: 1.6;
    color: #636e72;
    max-width: 65ch;
}


.info-box {
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    padding: 0.5rem 1rem;
    display: inline-flex;
    border: 0.1rem solid #858b92;
}

.info-box i {
    width: 1rem;
    height: 1rem;
    color: black;
}

.info-box span {
    font-size: 1rem;
    color: black;
}

.container {
    width: 100%;
    padding: 0 2rem;
    position: relative;
    height: 100%;
}

.section-spacing {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.grey-bg {
    background-color: #f8f9fa;
}

.black-bg {
    background-color: black;
}

/* Solid Button Style */
.link-button {
    display: inline-block;
    padding: 0.5rem 2rem;
    background-color: #097a38; /* Green color */
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.link-button:hover {
    background-color: #27ae60; /* Darker green */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Text Link with Arrow Style */
.text-link {
    display: inline-flex;
    align-items: center;
    color: #097a38;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    gap: 8px;
}

.text-link::after {
    content: '→';
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.text-link:hover::after {
    transform: translateX(3px);
}

/* Navigation Bar Styles */
#hook .container .hook-content .content .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#hook .container .hook-content .content .nav-container .logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Host Grotesk', sans-serif;
}

#hook .container .hook-content .content .nav-container .nav-links {
    display: flex;
    gap: 2rem;
    font-family: 'Host Grotesk', sans-serif;
}

#hook .container .hook-content .content .nav-container .nav-links a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

#hook .container .hook-content .content .nav-container .nav-links a:hover {
    color: #4CAF50; /* Green hover color */
}


/* Hook Section Styles */
#hook {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

#hook .container {
    width: 100%;
    padding: 0 2rem;
    position: relative;
    height: 100%;
}

#hook .container .hook-content {
    height: 100%;
}

#hook .hook-content .content {
    display: flex;
    flex-direction: column;
    height: 90%;
}

#hook .hook-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#hook .hook-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(75%); /* Darken the image */
}

#hook .hook-image .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    pointer-events: none; /* Allows clicks to pass through to the image if needed */
}

#hook .container .hook-content .content .hook-info {
    max-width: 1100px;
    margin-top: auto;
}

#hook .container .hook-content .content .hook-info #info-box {
    border: none;
}

#hook .container .hook-content .content .hook-info #info-box i {
    color: white;
}

#hook .container .hook-content .content .hook-info #info-box span {
    color: white;
}


#hook .container .hook-content .content .hook-info h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    max-width: 1100px;
    color: white;
}

#hook .container .hook-content .content .hook-info p {
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 900px;
    color: white;
}

#hook .container .hook-content .content .hook-info button {
    padding: 0.6rem 2rem;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

#hook .container .hook-content .content .hook-info button:first-child {
    background-color: white;
    color: black;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#hook .container .hook-content .content .hook-info button:last-child {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: bold;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* About Us */
#about .about-content {
    display: flex;
    justify-content: space-between;
    gap: 2rem; /* optional: adjust spacing between the two parts */
    height: 20vh;
    padding-bottom: 3rem;
}

#about .container .about-info {
    padding-bottom: 2rem;
}

#about .about-content .title-learn {
    align-items: flex-start;
    width: 50%;
    max-width: 600px;
}

#about .about-content .title-learn h2 {
    font-size: 2rem;
}

#about .impact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: stretch; /* Critical for equal heights */
    gap: 2rem;
    padding-top: 2rem;
}

#about .impact .impact-item {
    display: grid; /* Switch to grid layout */
    grid-template-rows: auto 1fr; /* First row: auto height, second row: equal space */
    align-items: start; /* Align content to the top */
    gap: 0.5rem;
    height: 100%; /* Ensure all items match parent height */
}

#about .impact .impact-item .metric-text {
    align-self: end; /* Anchor text to the bottom grid line */
    width: 100%; /* Ensure full width */
}

/* Keep your existing font styles */
#about .container .impact .impact-item .metric-header h3 {
    font-family: 'Host Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 450;
}

#about .container .impact .impact-item .metric-header p {
    font-family: 'Nunito Sans', sans-serif;
    margin: 0.5rem 0 1rem;
    line-height: 1.5;
    color: #2d3436;
    font-weight: 700;
}

#about .container .impact .impact-item .metric-text p {
    font-family: 'Inter', sans-serif;
    margin: 0; /* Remove default margins */
}

/* ---------------------- */
/* Impact Section Structure */
/* ---------------------- */

/* Make the overall impact container a row with evenly spaced items */
#about .impact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;  /* optional: adjust spacing between impact items */
    margin-top: 2rem;  /* provides some breathing room above the impact section */
}

/* For each impact item, align the internal content (h3 and p) in a column */
#about .impact .impact-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 0.5rem; /* optional: spacing between the heading and text */
    flex: 1; /* allows each item to expand equally, if desired */
    justify-content: space-between;
}

/* Products Section Styles */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(33vw, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.product-category {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-category img {
    border-radius: 1rem;
    width: 100%;
    flex: 1;
    object-fit: cover;
    min-height: 200px;
}

.product-category h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: #636e72;
    max-width: 65ch;
}

.product-category p {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #2d3436;
}

/* Community Section Styles */
/* --- Split the main container into two columns --- */
#community .container {
    display: flex;
    flex-wrap: wrap; /* in case of responsiveness */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 50vh;
    color: white;
}
  
  /* Ensure the two main columns take roughly equal space */
#community .container .community-info {
    flex: 1 1 45%;
    height: 100%;
    /* (Do not add any styling here that affects .container or .info-box) */
}


#community .community-members {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
    align-items: center;

}
  
  /* If the last <p> (“Join us in our mission…”) is meant to appear below the two columns */
#community .container > p {
    flex-basis: 100%;
    text-align: center;
    margin-top: 2rem;
}
  
  /* --- Split the header and text inside the info section --- */
  /* If you can wrap the header and text inside a container (with class "community-content") */
#community .container .community-info .community-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 75%;
}
  
  /* (Optional) Ensure a bit of gap between the header and text */
#community .community-content > .community-header,
#community .community-content > .community-text {
    margin-bottom: 1rem;
}

#community .container .community-info .community-content > .community-text {
    margin-top: auto;
}
  
  /* Remove extra margin on the last child if needed */
#community .community-content > .community-text:last-child {
    margin-bottom: 0;
}

#community .community-members,
#community .community-members .side-image {
    height: 100%;
    width: 100%;
}


#community .community-members .side-image .product-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
  
  /* Scale down the image to 80% width and 75% height of its container */
#community .community-members .side-image .product-image img {
    height: 90%;
    width: 80%;
    object-fit: cover; /* Use 'contain' if you want to ensure the whole image is visible */
    border-radius: 1rem;
}
  

/* Why Choose Us Section Styles */
/* Why Header Styles */
.why-header {
    display: flex;
    flex-direction: row; /* Reverse order to position title on right */
    justify-content: space-between;
    gap: 40px;
}

.why-title, 
.why-header .why-info {
    flex: 0 0 60%; /* 50% width for both sections */
}

.why-header .why-info {
    max-width: 35%;
}

/* Why Features Grid */
.why-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4-column grid */
    grid-template-rows: repeat(3, auto); /* 3-row grid */
    gap: 30px;
    margin-top: 40px;
}

/* Feature Positioning */
.feature:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
}

.feature:nth-child(2) {
    grid-row: 2;
    grid-column: 2;
}

.feature:nth-child(3) {
    grid-row: 3;
    grid-column: 3;
}

/* Updated Feature Illustration Styles */
.feature-illustration {
    grid-row: 1 / -1; /* Span all rows */
    grid-column: 4; /* 4th column */
    position: relative;
    min-height: 600px; /* Adjust based on needs */
}

.feature-picture {
    position: relative;
    height: 100%;
}

.feature-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Overlay Content Positioning */
.feature-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-header {
    align-self: flex-start;
    padding: 15px;
    border-radius: 4px;
    font-family: 'Host Grotesk', sans-serif;
}

.info-header > p {
    color: white;
    font-size: 1.75rem;
    font-weight: 500;
}

.info-tags {
    display: flex;
    gap: 15px;
    align-self: flex-end;
    padding: 10px 20px;
    margin-right: auto;
    padding-bottom: 2rem;
}

.info-tags button {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.6rem 2rem;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Host Grotesk', sans-serif;
}



/* Updated Grid Positioning */
.why-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
    gap: 30px;
}

.feature:nth-child(1) { grid-area: 1 / 1; }
.feature:nth-child(2) { grid-area: 2 / 2; }
.feature:nth-child(3) { grid-area: 3 / 3; }

/* Testimonials Section Styles */
/* Testimonials Header */
.header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    position: relative;
}

.header-text {
    flex: 0 0 50%;
}

/* Testimonial Scroll Section */

#testimonials {
    width: 100%;
}

#testimonials .container {
    width: 100%;
    height: auto;
}

.testimonial-scroll {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 2rem 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    cursor: grab;
}

.testimonial-scroll:active {
    cursor: grabbing;
}

.testimonial-slide {
    max-height: 50vh;
    display: flex;
    gap: 2rem;
    padding: 2rem;
    flex: 0 0 calc(100% - 4rem); /* Adjust based on container padding */
    scroll-snap-align: start;
    min-width: 60vw; /* Controls how much of next slide is visible */
}

.testimonial-grey-bg {
    background: #f5f5f5;
    border-radius: 1rem;
}

.testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-picture {
    flex: 1;
    border-radius: 1rem;
    overflow: hidden;
}

.testimonial-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.testimonial-quote {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 1.25rem 0 1rem;
    line-height: 1.3;
    color: #2d3436;
}

.testimonial-person {
    margin-top: auto;
    padding-top: 1.5rem;
}

.testimonial-person p:first-child {
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #2d3436;
    max-width: 65ch;
}

.testimonial-person p:last-child {
    color: #666;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #636e72;
    max-width: 65ch;
}

/* Hide scrollbar for cleaner look */
.testimonial-scroll::-webkit-scrollbar {
    display: none;
}

.testimonial-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
  
/* Message Section Styles */
/* Contact Us Section */
.contact-us {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.contact-picture,
.contact-form {
    flex: 1 1 50%; /* Equal flexible basis */
    min-width: 0; /* Allows items to shrink below 50% */
}

.contact-picture img {
    width: 100%;
    height: 100%;
    max-height: 600px; /* Optional max-height */
    object-fit: cover;
    border-radius: 1rem;
}

/* Ensure all form elements maintain proportions */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 2rem;
    border: 0.1rem solid #858b92;
    border-radius: 1rem;

}

.contact-form input,
.contact-form textarea,
.contact-form button {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

/* Form Layout */
.contact-form-header {
    margin-bottom: 15px;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 0.9rem;
    font-size: 16px;
}

.contact-form button {
    border-radius: 2rem;
}

/* Name Fields */
.contact-form div:has(> input[type="text"]) {
    display: flex;
    gap: 15px;
}

input[type="text"] {
    flex: 1;
}

.contact-names {
    display: flex;
    gap: 15px;
    width: 100%;
}

.contact-names input {
    flex: 1;
    width: 100%;
}

/* If you need exact 50/50 split accounting for the gap */
.contact-names input {
    flex: 0 0 calc(50% - 7.5px); /* 15px gap divided by 2 */
}

h2 {
    margin-bottom: 15px;
}

p {
    color: #666;
    margin-bottom: 30px;
}

/* Footer Styles */
footer {
    padding: 40px 0;
    background: #f8f9fa;
    /* Remove flex properties from footer */
}

footer .container { /* Add flex to container */
    display: flex;
    gap: 40px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Keep other styles but remove duplicate .footer-left declaration */
.footer-left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-right {
    flex: 0 0 50%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
  
.logo-info {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 20px; /* Space between text and logos */
}

.logo-text {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.logos {
    display: flex;
    gap: 20px; /* Space between logos */
    align-items: center;
}

.logos img {
    height: 40px;
    width: auto;
}

.copyright-info {
    margin-top: auto;
    padding-top: 30px;
} 
/* Right Side Styles */
.footer-right {
    flex: 0 0 50%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
  
.footer-column {
    flex: 1;
}
  
.footer-column h3 {
    margin-bottom: 15px;
    font-size: 18px;
}
  
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
  
.footer-column li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
    padding-bottom: 1rem;
}

.footer-column li:hover {
    color: #4CAF50; /* Green hover color */
    cursor: pointer;
}