/* General Baseline Styles Website */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    /* Lighter weight for regular text for readability */
    line-height: 1.6;
    background: rgb(255, 255, 255);
}

h2,
p {
    padding: 0;
    margin: 0;
}


/* Styles for Logo in Text Form */
div.brand span {
    color: #00c8c8;
    font-weight: 800;
}


/* Styles for Navigation Bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand img {
    height: 40px;
    width: 40px;
    margin-right: 15px;
}

.brand {
    display: flex;
    align-items: center;
}

.menu {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
}

.menu li a {
    text-decoration: none;
    color: black;
    transition: color 0.3s;
}

.menu li a:hover {
    color: gray;
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.hamburger-menu span {
    width: 30px;
    height: 3px;
    background-color: black;
}

#menuToggle {
    display: none;
}


/* Styles for hero section */
.hero {
    position: relative;
    max-width: 100%;
}

.hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.quote {
    position: absolute;
    top: 50%;
    /* Center vertically */
    left: 5%;
    /* Horizontally slightly to the left*/
    transform: translateY(-50%);
    /* Center the div perfectly */

    /* Style for the quote text */
    font-size: 1.7em;
    color: #FFF;
    /* Bright text color for contrast */
    background: rgba(0, 0, 0, 0.7);
    /* Dark background with a bit of transparency for visibility */
    padding: 0px 10px 0px 10px;
    border-radius: 10px;
    /* Ensuring the quote doesn't take up full width */
    text-align: left;
}

.custom-h1 {
    font-size: inherit;
    /* Inherit font size from parent */
    color: inherit;
    /* Inherit text color from parent */
    font-weight: inherit;
    /* Inherit font weight from parent */
}


/* Styles for Container - Statement Sections */
.statement-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2em 0;
    padding: 0 20px;
}

.icon-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.icon-wrapper,
.title-wrapper {
    display: inline-flex;
    /* This ensures that they don't take up more space than their content */
    justify-content: center;
    /* Center their content */
}

.statement-section h2 {
    margin: 0;
    /* The h2 will naturally occupy the remaining space beside the icon within the icon-title-wrapper */
}

.statement-section p {
    flex: 2;
    /* Takes up 2/3 of the space */
    margin: 10px;
}

.statement-icon {
    width: 60px;
    height: 60px;
    margin-right: 1em;
}

.statement-section h2 {
    flex-grow: 1;
    /* This ensures the h2 takes up the remaining space beside the icon */
}


/* Styles for Container - Brain Hack section */
.brain-lifehacks {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
}

.center-h2 {
    text-align: center;
}

.lifehack-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 2em;
    width: calc(33.33% - 2em);
    /* This allows for roughly equal spacing */
    margin: 1em;
    text-align: center;
    transition: transform 0.2s;
}

.lifehack-card:hover {
    transform: scale(1.05);
}

.lifehack-icon {
    width: 60px;
    height: 60px;
}

.lifehack-description {
    margin-top: 1em;
    margin-bottom: 2em;
}

.cta-button {
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 5px;
    background-color: #64e1dc;
    color: black;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cta-button:hover {
    background-color: #fcd770;
}
.no-decoration {
    text-decoration: none;
}


/* Styles for Container - video section */
.video-section h2 {
    text-align: center;
}

.video-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px;
}

/* Individual video containers */
.video-box {
    flex: 0 0 calc(33.33% - 20px);
    /* 33.33% width with spacing */
    margin-bottom: 20px;
    border: 4px outset #00c8c8;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    font-weight: 800;
}

/* Individual Video Caption */
div.video-box p {
    text-align: center;
    padding: 5px;
    border: 4px inset #00c8c8;
    border-radius: 10px;
}

/* Responsive iframe to avoid using 100% width */
.responsive-iframe {
    width: 100%;
    height: 315px;
}


/* Styles for Contact Form */
.contact-info {
    background-color: #fff;
    color: #222;
    padding: 30px 0 50px 0;
    text-align: center;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #dad4c8;
}

.image-section,
.form-section {
    width: 50%;
    /* They will take half the width on desktop */
    box-sizing: border-box;
}

.image-section img {
    width: 100%;
    height: auto;
    display: block;
}

.form-section {
    padding: 20px;
    align-self: center;
}

form {
    display: flex;
    flex-direction: column;
}

input,
textarea {
    margin-bottom: 15px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #282c35;
    color: #fff;
    cursor: pointer;
}


/*Styles for Hacks - FAQ Style*/
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.faq-checkbox {
    display: none;
}

.faq-item {
    background-color: rgba(203, 203, 193, 1);
    margin: 10px 0;
    border-radius: 5px;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

.faq-header h2 {
    margin: 0;
    color: black;
}

.toggle-icon::before {
    content: '+';
    font-size: 24px;
    color: #00c8c8;
    transition: transform 0.3s ease;
}

.faq-checkbox:checked+.faq-item .toggle-icon::before {
    content: '-';
    color: #00c8c8;
    /* Ensure the color is blue when expanded */
}

.faq-content {
    display: none;
    padding: 10px;
    background-color: rgba(253, 253, 253, 1);
    border-radius: 0 0 5px 5px;
    color: #333;
}

.faq-checkbox:checked+.faq-item .faq-content {
    display: block;
}


/* Styles for Footer */
footer {
    background-color: #282c35;
    padding: 20px 0;
    color: white;
    text-align: center;
}

footer p {
    margin: 10px 0 0;
    font-size: 0.9em;
}

footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

footer .social-icons a {
    color: #a0a5aa;
    transition: color 0.3s;
}

footer .social-icons a:hover {
    color: white;
}


/* Media Query for Mobile */
@media screen and (max-width: 768px) {

    /* Hero Section Quote */
    /* For responsiveness, font size can be adjusted for smaller screens */
    .quote {
        font-size: 0.8em;
        padding: 4px 4px;
    }


    /* Mobile Styles for Navigation Bar*/
    .menu {
        display: none;
        width: 100%;
        position: absolute;
        /* Make Navigation links stand out from bar*/
        top: 70px;
        left: 0;
        background-color: white;
        flex-direction: column;
        gap: 5px;
    }

    .menu li {
        width: 100%;
        text-align: center;
    }

    .hamburger-menu {
        display: flex;
    }

    #menuToggle:checked+.hamburger-menu+.menu {
        display: flex;
    }


    /* Mobile Styles for Statement Section container*/
    .statement-section {
        flex-direction: column;
        text-align: center;
    }

    .statement-icon {
        margin-right: 0;
        margin-bottom: 1em;
    }

    .icon-title-wrapper {
        flex-direction: column;
        /* Stack children vertically */
        align-items: center;
        /* Center children horizontally */
    }

    .icon-wrapper,
    .title-wrapper {
        width: 100%;
        /* Allow them to take the full width of their parent */
    }


    /* Mobile Styles for Brain Hack section's container */
    .brain-lifehacks {
        flex-direction: column;
        align-items: center;
    }

    .lifehack-card {
        width: 80%;
        /* Adjust this value for a different width for mobile */
    }


    /* Mobile Styles for video section's container */
    .video-container {
        flex-direction: column;
    }

    .video-box {
        flex: 0 0 100%;
        /* Full width on mobile */
    }


    /* Mobile Styles for contact form */
    .image-section,
    .form-section {
        width: 100%;
        /* They will stack and take full width */
    }


    /* Mobile Styles for footer */
    footer nav ul {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}