/* Import the colors variables */
@import url('colors.css');


/* Section Styles */
.section {
    background-color: var(--primary-color);
}

/* Hide to show with JS */
#main-heading, #sub-heading, #activate-cta-after-element, #body-cta-button {
    visibility: hidden;
}

/* Home section */
#home-section {
    display: flex; /* Use flexbox for layout */
    flex-direction: column;
    min-height: calc(100vh - var(--navbar-height));
    min-height: calc(100dvh - var(--navbar-height));
    /*
    min-height: calc(100 * var(--dvh, 1vh) - var(--navbar-height));
    padding: 5%; Add padding for spacing
    */
}

#home-section > :first-child {
    display: flex; /* Use flexbox for layout */
    flex-direction: row;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out the text and image */
    padding: 0 5%;
}

#home-section::before,
#home-section::after {
    content: "";
    flex-grow: 1; /* Makes the pseudo-elements take up space */
}

#home-section::after {
    flex-grow: 2; /* Makes the bottom space twice the size of the top */
}

.home-section-text-container {
    flex: 1; /* Allow the text container to grow */
    max-width: 50%; /* Optional: Limit width of text */
}

.home-section-illustration-container {
    flex: 1; /* Allow the image container to grow */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center the image horizontally */
}

.home-section-svg-illustration {
    width: 100%; /* Make sure image is responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Adjusting text size for the home-section-text-container */
.home-section-text-container h1 {
    font-size: 6vw; /* Set size for heading 1 */
    margin-bottom: 0.5vw; /* Space below the heading */
    color: var(--secondary-color);
}

.home-section-text-container h2 {
    font-size: 1.5vw; /* Set size for heading 2 */
    margin-bottom: 2.5vw; /* Space below the subheading */
    color: var(--secondary-color-dark);
}

.home-section-text-container button {
    background-color: var(--secondary-color-dark);
    color: var(--primary-color-dark);
    border: none;
    padding: 1vw 2vw;
    cursor: pointer;
    
    border-radius: 1vw;
    font-size: 1.75vw;
    font-family: var(--font-montserrat);
    font-weight: var(--font-weight-extra-bold);
    font-style: normal;

    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}


.home-section-text-container button:hover {
    background-color: #FFFF00; /* Darker shade on hover */
    opacity: 0.9;
}


@media (max-width: 1024px) and (orientation: portrait){
    .home-section-text-container h1 {
        font-size: 10vw;
    }

}

@media (max-width: 768px) and (orientation: portrait){
    .home-section-text-container h1 {
        font-size: 12vw;
    }
}

@media (max-width: 768px) or (orientation: portrait) {
    #home-section > :first-child {
        flex-direction: column-reverse;
    }

    #home-section::after {
        min-height: 15vw;
    }

    .home-section-text-container {
        max-width: 90%;
        flex: unset;
    }

    .home-section-text-container h2 {
        font-size: 3.5vw;
        margin-bottom: 5vw;
    }

    .home-section-text-container button {
        font-size: 6vw;
        border-radius: 2vw;
        padding: 2vw 4vw;
    }

    .home-section-illustration-container {
        flex: unset;
    }
}


/* About section */
#about-section {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out the text and image */
    padding: calc(var(--stripe-height) + 12vw) 0 calc(var(--stripe-height) + 8vw) 5%;
/*    margin: var(--stripe-height) 0 0 0;*/
    overflow: hidden;
}

.about-section-vstack {
    display: flex;
    flex-direction: column;
    align-items: baseline; 
    gap: 1vw; /* Space between items */
}
.about-section-hstack {
    display: flex;
    flex-direction: row; /* Stack items horizontally */
    justify-content: center; /* Center items horizontally */
    gap: 1vw; /* Space between items */
}
.about-section-xstack {
    position: relative;
/*    overflow: hidden;*/
    align-items: center;
}

.about-section-text-container {
    flex: 1;
/*    width: 65%;*/
    z-index: 1;
}

.about-section-text-container-info {
    padding: 0 10% 0 0;
}

.about-section-vstack-numeration {
    font-family: var(--font-yearbook-outline);
    font-size: 6.25vw;
    color: var(--secondary-color-dark-s2);
}

.about-section-hstack-text-div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-section-hstack-text-div div {
    margin-top: auto;
    margin-bottom: auto;
}

.about-section-text-container h1 {
    font-size: 6vw;
    margin-bottom: 0.5vw;
    color: var(--secondary-color);
}

.about-section-text-container h2 {
    font-size: 2.75vw; 
    color: var(--secondary-color);
}

.about-section-text-container h3 {
    font-size: 1.55vw; 
    color: var(--secondary-color-dark);
}

.about-section-illustration-container {
    flex: 1;
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center the image horizontally */
/*    width: 45%;*/
}

.about-section-svg-illustration {
    width: 100%; /* Make sure image is responsive */
    height: auto; /* Maintain aspect ratio */
    position: absolute;
}

.about-section-svg-blob {
    width: 180%;
    transform: translateY(5vh) translateX(5vw) rotate(68deg);
    position: absolute;
    opacity: 40%;
    transform-origin: center;
}



@media (max-width: 768px) or (orientation: portrait) {
    #about-section {
        flex-direction: column-reverse;
        padding: calc(var(--stripe-height) + 2.5vw) 0 2vw 0%;
    }

    .about-section-text-container {
        padding: 2.5% 10%;
    }

    .about-section-text-container h1 {
        font-size: 10vw;
    }
    .about-section-text-container h2 {
        font-size: 6vw;        
    }
    .about-section-text-container h3 {
        font-size: 3vw;
    }

    .about-section-text-container-info {
        padding: unset;
    }

    .about-section-vstack-numeration {
        font-size: 12.5vw;
    }

    .about-section-illustration-container {
        width: 80%;
        position: relative;
        align-items: unset;
    }

    .about-section-svg-blob {
        width: 175vw;
        transform: translateY(-57.5vw) translateX(0vw) rotate(315deg);
    }
    .about-section-svg-illustration {
        position: unset;
        z-index: 1;
    }

    .about-section-vstack {
        gap: 2vw;        
    }

    .about-section-hstack {
        gap: 2vw;
    }
}


/* It’s the Thought That Shines additional info */
#its-thought-that-shines {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    background-color: var(--primary-color);
}

.its-thought-that-shines-illustration-container {
    flex: 1;
    display: flex; 
    justify-content: center;
}

.its-thought-that-shines-svg-illustration {
    width: 100%;
    height: auto;
}

.its-thought-that-shines-text-container {
    flex: 1;
    max-width: 50%;
}

.its-thought-that-shines-text-container h1 {
    font-size: 5vw;
    margin-bottom: 0.5vw;
    color: var(--secondary-color);
}

.its-thought-that-shines-text-container h2 {
    font-size: 1.5vw;
    margin-bottom: 2.5vw;
    color: var(--secondary-color-dark);
}

@media (max-width: 768px) or (orientation: portrait) {
    #its-thought-that-shines {
        flex-direction: column;
    }

    .its-thought-that-shines-illustration-container {
        width: 90%;
    }

    .its-thought-that-shines-text-container {
        max-width: 95%;
    }

    .its-thought-that-shines-text-container h1 {
        font-size: 10vw;
    }

    .its-thought-that-shines-text-container h2 {
        font-size: 3.5vw;
    }
}

/* Blog */
#blog-section {
    display: flex; /* Use flexbox for layout */
    flex-direction: column;
    padding-bottom: 10%;
    /*
    min-height: calc(100 * var(--dvh, 1vh) - var(--navbar-height));
    padding: 5%; Add padding for spacing
    */
}

#blog-section > :first-child {
    display: flex; /* Use flexbox for layout */
    flex-direction: row;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out the text and image */
    padding: 0 5%;
}

.blog-section-text-container {
    flex: 1; /* Allow the text container to grow */
    max-width: 50%; /* Optional: Limit width of text */
}

.blog-section-illustration-container {
    flex: 1; /* Allow the image container to grow */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center the image horizontally */
}

.blog-section-svg-illustration {
    width: 100%; /* Make sure image is responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Adjusting text size for the blog-section-text-container */
.blog-section-text-container h1 {
    font-size: 6vw; /* Set size for heading 1 */
    margin-bottom: 0.5vw; /* Space below the heading */
    color: var(--secondary-color);
}

.blog-section-text-container h2 {
    font-size: 1.5vw; /* Set size for heading 2 */
    margin-bottom: 2.5vw; /* Space below the subheading */
    color: var(--secondary-color-dark);
}

.blog-section-text-container button {
    background-color: var(--secondary-color-dark);
    color: var(--primary-color-dark);
    border: none;
    padding: 1vw 2vw;
    cursor: pointer;

    border-radius: 1vw;
    font-size: 1.75vw;
    font-family: var(--font-montserrat);
    font-weight: var(--font-weight-extra-bold);
    font-style: normal;

    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}


.blog-section-text-container button:hover {
    background-color: #FFFF00; /* Darker shade on hover */
    opacity: 0.9;
}


@media (max-width: 1024px) and (orientation: portrait){
    .blog-section-text-container h1 {
        font-size: 10vw;
    }

}

@media (max-width: 768px) and (orientation: portrait){
    .blog-section-text-container h1 {
        font-size: 12vw;
    }
}

@media (max-width: 768px) or (orientation: portrait) {
    #blog-section {
        padding: 15% 0;
    }

    #blog-section > :first-child {
        flex-direction: column-reverse;
    }

    .blog-section-text-container {
        max-width: 90%;
        flex: unset;
    }

    .blog-section-text-container h2 {
        font-size: 3.5vw;
        margin-bottom: 5vw;
    }

    .blog-section-text-container button {
        font-size: 6vw;
        border-radius: 2vw;
        padding: 2vw 4vw;
    }

    .blog-section-illustration-container {
        flex: unset;
    }

    .blog-section-svg-illustration {
        width: 90%;
    }
}


#contact-section > div:first-of-type {
    max-width: 80%;
    margin: auto;
    padding-bottom: 7.5vh;
}

@media (max-width: 768px) or (orientation: portrait) {
    #contact-section > div:first-of-type {
        padding-top: 5vw;
        padding-bottom: 15vw;
    }
}