/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Apply Lato font to the entire website */
body {
    font-family: 'Lato', sans-serif;
}

/* Sticky Header Styles */
.sticky-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #1f581c;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sticky-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    /* Adjust as needed */
    margin: 0 auto;
    padding: 10px 20px;
    min-height: 120px;
}

.logo {
    flex: 0 0 auto;
    /* Prevents logo from shrinking */
}

.logo img {
    height: 100px;
    /* Updated logo height */
    width: auto;
    display: block;
    /* Prevents any unwanted spacing */
}

/* Navigation Styles */
.navigation {
    display: flex;
    align-items: center;
    /* margin-left: auto;
    /* Pushes navigation to the right */
}

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

.nav-links li a {
    color: #f4f4f4;
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
}

.nav-links li a:hover,
.nav-links li a:active,
.nav-links li a:focus {
    color: #f4f4f4;
    text-decoration: underline;
}

/* Hamburger Menu Styles */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    height: fit-content;
}

.hamburger-inner-lines {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
}

.hamburger-inner-lines span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger-inner-lines span:first-child {
    top: 0;
}

.hamburger-inner-lines span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner-lines span:last-child {
    bottom: 0;
}

/* X transformation when menu is active */
.hamburger.active .hamburger-inner-lines span:first-child {
    transform: rotate(45deg);
    top: 50%;
}

.hamburger.active .hamburger-inner-lines span:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-inner-lines span:last-child {
    transform: rotate(-45deg);
    bottom: 50%;
}

/* 22222222222222222222222 Second Section Styles */
.section-two {
    background-image: url('images/background.png');
    background-size: cover;
    background-position: center;
    padding: 0;
    color: #f4f4f4;
    margin-top: 120px;
    background-repeat: no-repeat;
    /* Add this */
    border: none;
    /* Add this to remove any potential borders */
    outline: none;
    /* Add this to remove any outlines */
    min-height: 100vh;
    /* Optional: ensures full viewport height coverage */
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.section-two .column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;

}


.section-two .row {
    margin-bottom: 0;
}

.section-two h2 {
    font-size: 72px;
    color: #f4f4f4;
    margin-top: 50px;
    margin-bottom: 50px;
}

.section-two p {
    font-size: 18px;
    color: #f4f4f4;
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.cta-button {
    display: inline-block;
    background-color: #1f581c;
    color: #f4f4f4;
    padding: 15px 30px;
    font-size: 20px;
    border: none;
    border-radius: 28px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    animation: slideIn 1s ease-out;
    margin-bottom: 30px;
}

.cta-button:hover {
    background-color: #163d13;
}

/* 22222222222222222222222 Features Section Styles (Second Section) */

.features {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-column {
    flex: 1;
    padding: 20px;
    animation: slideIn 1s ease-out;
    text-align: center;

}

.feature-column h3 {
    font-size: 24px;
    min-width: 300px;
    font-weight: bold;
    color: #f4f4f4;
    margin-bottom: 15px;
}

.feature-column p {
    font-size: 18px;
    color: #f4f4f4;
    margin-top: 15px;
}

.feature-image {
    height: 100px;
    /* Image height */
    width: auto;
    margin-bottom: 15px;
}

/* 33333333333333333333333 Third Section Styles */
.section-three {
    background-color: #f4f4f4;
    padding: 0;
    color: #1f581c;
    /* Changed text color for better contrast */
    margin-top: 0;
    /* Adjust based on previous section's padding */

}

.section-three .column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;

}

.section-three .row {
    align-items: space-between;
    margin-bottom: 0;
}

.section-three h2 {
    margin-top: 50px;
    font-size: 48px;
    color: #1f581c;
    /* Changed to match background for readability */
    margin-bottom: 30px;
}

.section-three p {
    font-size: 16px;
    color: #1f581c;
    /* Changed to match background for readability */
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.third-features {
    display: flex;
    justify-content: space-between;
    gap: 100px;
    flex-wrap: wrap;
}

.third-feature-column {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
}

.feature-container {
    background-color: #1f581c;
    border-radius: 21px 21px 0 0;
    /* Top border radius for left and right corners */

    color: #f4f4f4;
    animation: slideIn 1s ease-out;
    text-align: left;
    height: 100%;
    min-width: 400px;
    /* Ensure equal height */
    display: flex;
    flex-direction: column;
    align-items: left;
    overflow: hidden
}

.third-feature-image {
    width: 100%;
    height: 70%;
    object-fit: cover;
    /* Ensures the image covers the container without distortioin*/
    margin-bottom: 15px;
}

.feature-container h3 {
    padding: 0 0 0 20px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.feature-container p {
    padding: 0 20px 0 20px;
    font-size: 16px;
    color: #f4f4f4;
}

/* Additional Text Row in Third Section */
.additional-text {
    margin-top: 20px;
}

.additional-text p {
    font-size: 32px;
    color: #1f581c;
}

/* Slide-in Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 444444444444444444444444444 Fourth Section Styles */
.section-four {
    background-image: url('images/background.png');
    background-size: cover;
    background-position: center;
    padding: 0;
    margin-top: 0;
    /* Adjust based on previous section's padding */
}

.section-four .column {
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.section-four .row {
    Margin-top: 50px;
    margin-bottom: 0;

}

.section-four h2 {
    font-size: 72px;
    color: #f4f4f4;
    margin-bottom: 40px;
    margin-top: 50px;
}

.section-four .testimonials {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;

}

.testimonial-column {
    flex: 1;
    min-width: 250px;
    margin-bottom: 100px;
    align-items: center;
    /* Adjust container size as needed */
}

.testimonial-container {
    background-color: #f4f4f4;
    border-radius: 8px;
    padding: 20px;
    color: #1f581c;
    animation: slideIn 1s ease-out;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*min-height: 370px;*/
}



.testimonial-image {
    height: 70px;
    /* Image height */
    width: auto;
    margin-bottom: 15px;
}

.testimonial-container2 {
    height: 150px;
}

.testimonial-container2 p {
    font-size: 16px;
    color: #1f581c;
    /* margin-bottom: 20px;*/
}

.star-rating {
    font-size: 16px;
    color: #1f581c;
    margin-bottom: 10px;
}

.testimonial-name {
    font-size: 16px;
    color: #1f581c;
    font-style: italic;
}

/* 555555555555555555555555555555 Fifth Section Styles */
.section-five {
    background-color: #f4f4f4;
    /* Fallback color */
    padding: 0;
    margin-top: 0;
    /* Adjust based on previous section's padding */
}

.section-five .columns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.column-left {
    flex: 2;
    min-width: 300px;
    text-align: left;
}

.column-left .row {
    margin-top: 50px;

}

.column-left h2 {
    font-size: 72px;
    color: #1f581c;

}

.column-left p {
    font-size: 24px;
    color: #1f581c;
    margin-bottom: 50px;
}

.column-left .cta-button {
    background-color: #1f581c;
    color: #f4f4f4;
    font-size: 20px;
    border: none;
    border-radius: 28px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    animation: slideIn 1s ease-out;
    max-width: 300px;
    width: auto;
}

.column-left .cta-button:hover {
    background-color: #163d13;
}

.column-right {
    flex: 1;
    min-width: 200px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.iphone-image {
    width: 100%;
    max-width: 300px;
    /* Adjust as needed */
    height: auto;
    /* Maintain aspect ratio */
}

/* 7777777777777777777777777 Seven Section Styles */
.section-seven {
    padding: 0;
    color: #f4f4f4;
    margin-top: 120px;
    background-repeat: no-repeat;
    /* Add this */
    border: none;
    /* Add this to remove any potential borders */
    outline: none;
    /* Add this to remove any outlines */
    min-height: 100vh;
    /* Optional: ensures full viewport height coverage */
}

.section-seven .row {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.section-seven .row h2 {
    font-size: 72px;
    color: #1f581c;
    margin-top: 40px;
    margin-bottom: 40px;
}

.section-seven .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 50px;
}

/* Content Layout */
.features-content {
    display: flex;
    gap: 49px;
    align-items: center;
    /* Makes both sides equal height */
}

/* Image Styles */
.features-image {
    flex: 1;
    /* display: flex;
    align-items: center;*/
}

.features-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 21px;
    display: block;
}

/* Text Content Styles */
.features-text {
    flex: 1;
    display: flex;
    flex-direction: column;

}

.primary-text {
    font-size: 42px;
    margin: 0 0 10px 0;
    color: #1f581c;
    line-height: 1.2;
}

.secondary-text {
    font-size: 28px;
    margin: 0 0 20px 0;
    color: #1f581c;
    line-height: 1.2;
}

.description-text {
    font-size: 21px;
    line-height: 1.5;
    color: #1f581c;
    margin: 0;
    line-height: 1.5;
}

/* 666666666666666666666666666 ixth Section Styles (Footer) */
.section-six {
    background-color: #1f581c;
    padding: 0;
    color: #f4f4f4;
    margin-top: 0;
    /* Adjust based on previous section's padding */
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px;

}

.footer-column {
    margin-top: 50px;
    flex: 1;
    min-width: 200px;
    text-align: left;
    margin-bottom: 50px;
}

.footer-column h3 {
    font-size: 26px;
    font-weight: bold;
    color: #f4f4f4;
    margin-bottom: 20px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    font-size: 16px;
    color: #f4f4f4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #d4ffd4;
}

.footer-copy {
    margin-top: 20px;
    font-size: 14px;
    color: #f4f4f4;
}

.footer-column .social-icons {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.footer-column .social-icons a {
    color: #f4f4f4;
    font-size: 28px;
    transition: color 0.3s ease;
}

.footer-column .social-icons a:hover {
    color: #d4ffd4;
}

.footer-column .app-download {
    display: flex;
    gap: 10px;
}

.download-badge {
    height: 70px;
    width: auto;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.download-badge:hover {
    transform: scale(1.05);
}

/* Slide-in Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sticky-header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .navigation ul {
        flex-direction: column;
        width: 100%;
    }

    .navigation li {
        width: 100%;
    }

    .navigation a {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    /* Adjust margin-top for second section based on header height */
    .section-two {
        margin-top: 150px;
        /* Increased margin for smaller screens if header height adjusts */
    }

    .section-two {
        padding: 80px 20px;
    }

    .section-two h2 {
        font-size: 48px;
    }

    .section-two p {
        font-size: 16px;
    }

    .features {
        flex-direction: column;
        align-items: center;
    }

    .feature-column {
        max-width: 400px;
    }

    /* Third Section Responsive Styles */
    .section-three {
        padding: 80px 20px;
    }

    .section-three h2 {
        font-size: 48px;
    }

    .section-three p {
        font-size: 16px;
    }

    .third-features {
        flex-direction: column;
        align-items: center;
    }

    .third-feature-column {
        max-width: 400px;
    }

    .additional-text p {
        font-size: 24px;
    }

    /* Fourth Section Responsive Styles */
    .section-four {
        padding: 80px 20px;
    }

    .section-four h2 {
        font-size: 48px;
        margin-bottom: 30px;
    }

    .testimonials {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-column {
        max-width: 500px;
    }

    .testimonial-container {
        padding: 15px;
    }

    .testimonial-container2 {
        height: 70px;
    }

    .testimonial-container p {
        font-size: 14px;
    }

    .star-rating {
        font-size: 14px;
    }

    .testimonial-name {
        font-size: 14px;
    }

    .additional-text p {
        font-size: 24px;
    }

    /* Fifth Section Responsive Styles */
    .section-five .columns {
        flex-direction: column;
        align-items: center;
    }

    .column-left {
        flex: 2;
        max-width: 100%;
        text-align: center;
    }

    .section-five h2 {
        font-size: 48px;
    }

    .section-five p {
        font-size: 20px;
    }

    .column-right {
        flex: 1;
        max-width: 100%;
        margin-top: 30px;
    }

    .iphone-image {
        max-width: 100%;
        height: auto;
    }

    .additional-text p {
        font-size: 24px;
    }

    /* Added Lastly */
    .section-five .cta-button {
        display: block;
        margin: 20px auto 0 auto;
    }

    .section-five .column-right {
        text-align: center;
    }

    /* Sixth Section (Footer) Responsive Styles */
    .footer-columns {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        max-width: 400px;
        text-align: center;
    }

    .footer-column ul {
        padding: 0;
        text-align: center;
    }

    .footer-column ul li {
        margin-bottom: 10px;
    }

    .footer-column ul li a {
        font-size: 16px;
    }

    .footer-copy {
        margin-top: 20px;
    }

    .social-icons {
        justify-content: center;
    }

    .app-download {
        justify-content: center;
    }

    /* Seventh Section (Footer) Responsive Styles */
    .features-content {
        flex-direction: column;
    }

    .features-image,
    .features-text {
        width: 100%;
    }

    .primary-text {
        font-size: 40px;
    }

    .secondary-text {
        font-size: 30px;
    }

    .description-text {
        font-size: 18px;
    }

}

/* Optional: Adjust main margin-top for larger screens if necessary */
@media (min-width: 769px) {
    main {
        margin-top: 20px;
        /* Minimal margin as section-two handles spacing */
    }
}

/* Hamburger Menu Styles */
.hamburger {
    display: none;
    /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger .hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger .hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    transition: all 0.3s ease;
}

.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger .hamburger-inner::before {
    top: -8px;
}

.hamburger .hamburger-inner::after {
    bottom: -8px;
}



/* Mobile Responsive Styles */
/* Show Hamburger and Hide Regular Nav Links on Small Screens */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #1f581c;
        padding: 20px;
        flex-direction: column;
        align-items: center;
    }

    .nav-links.active {
        display: flex;
    }

    .navigation {
        flex: 1;
        justify-content: flex-end;
        order: 2;
        /* height: 100%;
        display: flex;
        align-items: center;*/
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .nav-links li a {
        display: block;
        padding: 10px;
        color: #f4f4f4;
    }

    .nav-links li a:hover,
    .nav-links li a:active,
    .nav-links li a:focus {
        text-decoration: underline;
    }

    .hamburger {
        /*display: block;*/
        display: flex;
        align-items: center;
    }

    .sticky-header .container {
        /*flex-wrap: nowrap;*/
        flex-direction: row;
        /* Ensure horizontal layout */
        align-items: center;
        /* Center items vertically */
        min-height: 120px;
        /* Match the desktop height */
    }

    /* Update the margin-top for section-two */
    .section-two {
        margin-top: 120px;
        /* Match the header height */
    }

    .logo {
        order: 1;
        /* Ensures logo stays on the left */
    }
}

/* Adjust Footer Social Icons on Larger Screens */
@media (min-width: 769px) {
    .download-badge {
        height: 45px;
        /* As previously increased */
    }

    .social-icons a {
        font-size: 32px;
        /* Ensure visibility */
    }
}