@font-face {
    font-family: font1;
    src: url(./fonts/HeyWow-Book.woff2);
}

#menu .line{
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
}
#line1{
    transform-origin: 0 100%;
}
#menu #line2{
    width: 70%;
    transform-origin: 30% 50%;
}

#full-scr-nav a{
    font-family: font1;
    font-weight:500;
}


#full-scr-nav a:hover{
    opacity: 70%;
    cursor: pointer;
}


#nav-right {
    display: flex;
    gap: 4px;
    align-items: center;
    transition: all 0.9s ease-linear;
    /* position: relative;  */
}

#menu {
    width: 5vw;
    height: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

#menu .line {
    height: 0.5vh;
    background-color: #cecece;
    border-radius: 1vw;
    transition: all 0.3s ease;
}


.nav-links {
    display: flex; 
    /* position: absolute; */
    top: 0;
}

#full-scr-nav {
    display: none; 
    top: -100%; 
    overflow: hidden;
}


/* 400 less */

@media (max-width: 400px) {
    nav {
        height: 10vh; 
        padding: 0vh 1.5vh; 
    }

    #logo {
        width: 12%; 
        margin-left: 1vh; 
        margin-top: 0.5vh; 
    }

    #logo-text {
        font-size: 4vw;
        margin-top: 0.5vh;
        letter-spacing: 0.05em;
    }

    /* Menu */
    #nav-right {
        justify-content: flex-end;
        padding-right: 5px; 
    }

    #menu {
        width: 8vw; 
        height: 3vh; 
    }

    #menu .line {
        height: 0.5vh; 
    }
    
    /* Navigation Links */
    .nav-links {
        display: none; 
        top: -200%;
        position: absolute;
    }

    #full-scr-nav {
        display: block;
        top: -100%; 
        overflow: hidden;
    }

    #full-scr-nav {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        gap: 2vh; 
    }

    /* Adjust font sizes and spacing for better readability */
    #full-scr-nav a {
        font-size: 3.8vh; 
        text-align: center; 
        text-decoration: none; 
        padding: 0.5vh 1.5vh; 
    }

    /* Style for the highlighted button */
    #full-scr-nav a.font-bold {
        padding: 1.5vh 1.8vh; 
        font-size: 2.5vh; 
    }

    /* Style for the Instagram icon */
    #full-scr-nav a i {
        font-size: 5vh; 
    }

        /* Section 1 (s1) */
        #s1 {
            gap: 0.5vh; 
            padding: 1rem; 
        }
    
        #s1 h1 {
            font-size: 7vw; 
            line-height: 1.2; 
        }
    
        #s1 h3 {
            font-size: 4.5vw; 
            margin-bottom: 0.5rem; 
        }
    
        #s1 p {
            font-size: 4.5vw; 
            line-height: 1.5; 
        }
    
        #s1 a {
            font-size: 4vw; 
            padding: 0.2rem 1rem; 
        }
    
        /* Section 2 (s2) */
        #s2 {
            margin-top: -15vw; 
            padding: 1rem; 
            gap: 2vh; 
            height: auto; 
        }
    
        #s2 h1 {
            font-size: 5vw; 
        }
    
        #s2 p:nth-of-type(1) {
            font-size: 7.5vw; 
            line-height: 8vw; 
            width: 90%; 
        }
    
        #s2 p:nth-of-type(2) {
            font-size: 4.2vw; 
            line-height: 1.5; 
            width: 100%; 
        }
    
        #s2 a {
            font-size: 4.5vw; 
            padding: 0.5rem 1rem; 
        }
    
        /* Section 3 (s3) */
        #s3 {
            padding: 1rem; 
            height: auto; 
        }
    
        #s3 > div {
            flex-direction: column; 
            gap: 2rem; 
        }
    
        #s3 > div > div:nth-of-type(1) h1 {
            font-size: 5.2vw; 
        }
    
        #s3 > div > div:nth-of-type(2) {
            flex-direction: column; 
            gap: 1.8rem; 
        }
    
        #s3 h1 {
            font-size: 5vw; 
        }
    
        #s3 a {
            font-size: 3.5vw; 
        }
    
        #s3 div:nth-of-type(3) h1:last-child {
            font-size: 3.5vw; 
        }    

        #about {
            padding: 3vh 5vw;
            gap: 3vh;
            height: auto;
        }
    
        #about p:nth-of-type(1) {
            width: 100%;
            font-size: 5vh;
            line-height: 13vh;
        }
    
        #about p:nth-of-type(2) {
            width: 85%;
            font-size: 2.6vw;
            line-height: 1.6;
        }
    
        #about a {
            font-size: 2.5vw;
            padding: 0.5rem 1.5rem;
        }
}



@media (min-width: 400px) and (max-width: 500px) {
    /* logo */

    nav {
        height: 12vh; 
        padding: 0vh 2vh;
    }

    #logo {
        width: 15%; 
        margin-left: 2vh; 
        margin-top: 1vh; 
    }

    #logo-text {
        font-size: 4vw; 
        margin-top: 1vh; 
        letter-spacing: 0.1em; 
    }

    
    /* separate menu */


    #nav-right {
        justify-content: flex-end;
        padding-right: 10px; 
    }

    #menu {
        width: 6vw; 
        height: 2vh;
    }

    #menu .line {
        height: 0.6vh; 
    }
    
    /* nav */
    .nav-links {
        display: none;
        top: -200%;
        position: absolute;
    }

    #full-scr-nav {
        display: block;
        top: -100%; 
        overflow: hidden;
    }

    #full-scr-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
        gap: 3vh; 
    }

    /* Adjust font sizes and spacing for better readability */
    #full-scr-nav a {
        font-size: 2.5vh; 
        text-align: center; 
        text-decoration: none; 
        padding: 0.5vh 2vh; 
    }

    /* Style for the highlighted button */
    #full-scr-nav a.font-bold {
        padding: 1vh 3vh;
        font-size: 2.8vh;
    }

    /* Style for the Instagram icon */
    #full-scr-nav a i {
        font-size: 5vh;
    }

    /* section 1 */
    #s1 {
        gap: 0.1vh; 
        padding: 1rem; 
    }

    #s1 h1 {
        font-size: 6vw; 
        line-height: 1.2; 
    }

    #s1 h3 {
        font-size: 4vw; 
        margin-bottom: 0.1rem; 
    }

    #s1 p {
        font-size: 4vw; 
        line-height: 1.5; 
    }

    #s1 a {
        font-size: 4vw; 
        padding: 0rem 1rem 0rem 1rem;
    }

    /* section 2  */
    #s2 {
        margin-top: -20vw;
        padding: 1rem; 
        gap: 2vh; 
        height: auto; 
    }

    /* Heading #InvestWisely */
    #s2 h1 {
        font-size: 4.5vw; 
    }

    /* Gradient text (Why investment is important?) */
    #s2 p:nth-of-type(1) {
        font-size: 8vw; 
        line-height: 9vw; 
        width: 90%; 
    }

    /* Description paragraph */
    #s2 p:nth-of-type(2) {
        font-size: 4.5vw; 
        line-height: 1.6; 
        width: 100%; 
    }

    /* Enroll Now button */
    #s2 a {
        font-size: 4vw; 
        padding: 0.6rem 1.2rem; 
    }

    /* section 3 */
    #s3 {
        padding: 1rem; 
        height: auto; 
    }

    /* Flex container adjustments */
    #s3 > div {
        flex-direction: column; 
        gap: 1.5rem; 
    }

    /* Left side heading (Fortune Funders) */
    #s3 > div > div:nth-of-type(1) h1 {
        font-size: 5vw; 
    }

    /* Right side flex container */
    #s3 > div > div:nth-of-type(2) {
        flex-direction: column; 
        gap: 2rem; 
    }

    /* Section titles (About, Follow Us, Contact) */
    #s3 h1 {
        font-size: 4vw;
    }

    /* Links inside columns */
    #s3 a {
        font-size: 3vw; 
    }

    /* Contact text */
    #s3 div:nth-of-type(3) h1:last-child {
        font-size: 3.5vw;
    }

    #about {
        padding: 3vh 5vw;
        gap: 3vh;
        height: auto;
    }

    #about p:nth-of-type(1) {
        width: 100%;
        font-size: 6vh;
        line-height: 13vh;
    }

    #about p:nth-of-type(2) {
        width: 85%;
        font-size: 2.8vw;
        line-height: 1.6;
    }

    #about a {
        font-size: 2.8vw;
        padding: 0.5rem 1.5rem;
    }

}


@media (min-width: 500px) and (max-width: 768px) {
    /* logo */

    nav {
        height: 12vh; /* Reduce height for smaller devices */
        padding: 0vh 2vh; 
    }

    #logo {
        width: 12%; 
        margin-left: 2vh; 
        margin-top: 1vh; 
    }

    #logo-text {
        font-size: 3vw; 
        margin-top: 1vh; 
        letter-spacing: 0.1em; 
    }

    
    /* separate menu */


    #nav-right {
        justify-content: flex-end;
        padding-right: 10px;
    }

    #menu {
        width: 6vw; 
        height: 2vh;
    }

    #menu .line {
        height: 0.6vh;
    }
    
    /* nav */
    .nav-links {
        display: none;
        top: -200%;
        position: absolute;
    }

    #full-scr-nav {
        display: block;
        top: -100%; 
        overflow: hidden;
    }

    #full-scr-nav {
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: center; 
        gap: 3vh; 
    }

    /* Adjust font sizes and spacing for better readability */
    #full-scr-nav a {
        font-size: 2.5vh; 
        text-align: center; 
        text-decoration: none;
        padding: 0.5vh 2vh;
    }

    /* Style for the highlighted button */
    #full-scr-nav a.font-bold {
        padding: 1vh 3vh; 
        font-size: 2.8vh; 
    }

    /* Style for the Instagram icon */
    #full-scr-nav a i {
        font-size: 5vh; 
    }

    /* section 1 */
    #s1 {
        gap: 0.1vh; 
        padding: 1rem; 
    }

    #s1 h1 {
        font-size: 4vw; 
        line-height: 1.4; 
    }

    #s1 h3 {
        font-size: 3vw; 
        margin-bottom: 0.2rem; 
    }

    #s1 p {
        font-size: 3vw; 
        line-height: 1.5; 
    }

    #s1 a {
        font-size: 3vw; 
        padding: 0rem 1rem 0rem 1rem;
    }

    /* section 2  */
    #s2 {
        margin-top: -10vw;
        padding: 1rem; 
        gap: 2vh; 
        height: auto; 
    }

    /* Heading #InvestWisely */
    #s2 h1 {
        font-size: 4vw; 
    }

    /* Gradient text (Why investment is important?) */
    #s2 p:nth-of-type(1) {
        font-size: 6vw; 
        line-height: 9vw; 
        width: 90%; 
    }

    /* Description paragraph */
    #s2 p:nth-of-type(2) {
        font-size: 3.5vw; 
        line-height: 1.6; 
        width: 100%; 
    }

    /* Enroll Now button */
    #s2 a {
        font-size: 3vw; 
        padding: 0.6rem 1.2rem; 
    }

    /* section 3 */
    #s3 {
        padding: 1rem; 
        height: auto; 
    }

    /* Flex container adjustments */
    #s3 > div {
        flex-direction: column; 
        gap: 1.5rem; 
    }

    /* Left side heading (Fortune Funders) */
    #s3 > div > div:nth-of-type(1) h1 {
        font-size: 4vw; /* Scale down font size for the heading */
    }

    /* Right side flex container */
    #s3 > div > div:nth-of-type(2) {
        flex-direction: column; 
        gap: 2rem; 
    }

    /* Section titles (About, Follow Us, Contact) */

    #s3 h1 {
        font-size: 2.9vw;
    }

    /* Links inside columns */
    #s3 a {
        font-size: 2.4vw; 
    }

    /* Contact text */
    #s3 div:nth-of-type(3) h1:last-child {
        font-size: 3vw;
    }

    #about {
        padding: 3vh 5vw;
        gap: 3vh;
        height: auto;
    }

    #about p:nth-of-type(1) {
        width: 100%;
        font-size: 5vh;
        line-height: 13vh;
    }

    #about p:nth-of-type(2) {
        width: 85%;
        font-size: 2.6vw;
        line-height: 1.6;
    }

    #about a {
        font-size: 2.6vw;
        padding: 0.5rem 1.5rem;
    }

}


@media (min-width: 768px) and (max-width: 1024px) {
    /* logo */

    nav {
        height: 12vh; /* Reduce height for smaller devices */
        padding: 0vh 2vh; 
    }

    #logo {
        width: 12%; 
        margin-left: 2vh; 
        margin-top: 1vh; 
    }

    #logo-text {
        font-size: 2vw; 
        margin-top: 1vh; 
        letter-spacing: 0.1em; 
    }

    
    /* separate menu */


    #nav-right {
        justify-content: flex-end;
        padding-right: 10px;
    }

    #menu {
        width: 6vw; 
        height: 2vh;
    }

    #menu .line {
        height: 0.6vh;
    }
    
    /* nav */
    .nav-links a{
        font-size: 2.2vh;
        /* display: none; */
        /* top: -100%; */
    }

    #full-scr-nav {
        display: block;
        top: -100%; 
    }

    #full-scr-nav {
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: center; 
        gap: 3vh; 
    }

    /* Adjust font sizes and spacing for better readability */
    #full-scr-nav a {
        font-size: 2.5vh; 
        text-align: center; 
        text-decoration: none;
        padding: 0.5vh 2vh;
    }

    /* Style for the highlighted button */
    #full-scr-nav a.font-bold {
        padding: 1vh 3vh; 
        font-size: 2.8vh; 
    }

    /* Style for the Instagram icon */
    #full-scr-nav a i {
        font-size: 5vh; 
    }

    /* section 1 */
    #s1 {
        gap: 0.1vh; 
        padding: 1rem; 
    }

    #s1 h1 {
        font-size: 3.3vw; 
        line-height: 1.4; 
    }

    #s1 h3 {
        font-size: 2.2vw; 
        margin-bottom: 0.2rem; 
    }

    #s1 p {
        font-size: 2.5vw; 
        line-height: 1.5; 
    }

    #s1 a {
        font-size: 2.2vw; 
        padding: 0rem 1rem 0rem 1rem;
    }

    /* section 2  */
    #s2 {
        margin-top: -10vw;
        padding: 1rem; 
        gap: 2vh; 
        height: auto; 
    }

    /* Heading #InvestWisely */
    #s2 h1 {
        font-size: 3.2vw; 
    }

    /* Gradient text (Why investment is important?) */
    #s2 p:nth-of-type(1) {
        font-size: 4.5vw; 
        line-height: 9vw; 
        width: 90%; 
    }

    /* Description paragraph */
    #s2 p:nth-of-type(2) {
        font-size: 2.5vw; 
        line-height: 1.6; 
        width: 100%; 
    }

    /* Enroll Now button */
    #s2 a {
        font-size: 2.2vw; 
        padding: 0.6rem 1.2rem; 
    }

    /* section 3 */
    #s3 {
        padding: 1rem; 
        height: auto; 
    }

    /* Flex container adjustments */
    #s3 > div {
        flex-direction: column; 
        gap: 1.5rem; 
    }

    /* Left side heading (Fortune Funders) */
    #s3 > div > div:nth-of-type(1) h1 {
        font-size: 3.6vw; /* Scale down font size for the heading */
    }

    /* Right side flex container */
    #s3 > div > div:nth-of-type(2) {
        flex-direction: column; 
        gap: 2rem; 
    }

    /* Section titles (About, Follow Us, Contact) */

    #s3 h1 {
        font-size: 2.5vw;
    }

    /* Links inside columns */
    #s3 a {
        font-size: 2.1vw; 
    }

    /* Contact text */
    #s3 div:nth-of-type(3) h1:last-child {
        font-size: 2.2vw;
    }

    #about {
        padding: 3vh 5vw;
        gap: 3vh;
        height: auto;
    }

    #about p:nth-of-type(1) {
        width: 100%;
        font-size: 6vh;
        line-height: 13vh;
    }

    #about p:nth-of-type(2) {
        width: 85%;
        font-size: 2.4vw;
        line-height: 1.6;
    }

    #about a {
        font-size: 2.4vw;
        padding: 0.5rem 1.5rem;
    }

}

@media (min-width: 1024px) and (max-width: 1200px)  {
    /* logo */

    nav {
        height: 12vh; /* Reduce height for smaller devices */
        padding: 0vh 2vh; 
    }

    #logo {
        width: 13%; 
        margin-left: 2vh; 
        margin-top: 1vh; 
    }

    #logo-text {
        font-size: 2.2vw; 
        margin-top: 1vh; 
        letter-spacing: 0.1em; 
    }

    
    /* separate menu */


    #nav-right {
        justify-content: flex-end;
        padding-right: 10px;
    }

    #menu {
        width: 6vw; 
        height: 2vh;
    }

    #menu .line {
        height: 0.6vh;
    }
    
    /* nav */
    .nav-links a{
        font-size: 2.5vh;
        /* display: none; */
        /* top: -100%; */
    }

    #full-scr-nav {
        display: block;
        top: -100%; 
    }

    #full-scr-nav {
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: center; 
        gap: 3vh; 
    }

    /* Adjust font sizes and spacing for better readability */
    #full-scr-nav a {
        font-size: 2.5vh; 
        text-align: center; 
        text-decoration: none;
        padding: 0.5vh 2vh;
    }

    /* Style for the highlighted button */
    #full-scr-nav a.font-bold {
        padding: 1vh 3vh; 
        font-size: 2.8vh; 
    }

    /* Style for the Instagram icon */
    #full-scr-nav a i {
        font-size: 5vh; 
    }

    /* section 1 */
    #s1 {
        gap: 0.1vh; 
        padding: 1rem; 
    }

    #s1 h1 {
        font-size: 2.8vw; 
        line-height: 1.4; 
    }

    #s1 h3 {
        font-size: 1.8vw; 
        margin-bottom: 0.2rem; 
    }

    #s1 p {
        font-size: 2.2vw; 
        line-height: 1.5; 
    }

    #s1 a {
        font-size: 1.8vw; 
        padding: 0rem 1rem 0rem 1rem;
    }

    /* section 2  */
    #s2 {
        margin-top: -10vw;
        padding: 1rem; 
        gap: 1vh; 
        height: auto; 
    }

    /* Heading #InvestWisely */
    #s2 h1 {
        font-size: 2.8vw; 
    }

    /* Gradient text (Why investment is important?) */
    #s2 p:nth-of-type(1) {
        font-size: 3.5vw; 
        line-height: 9vw; 
        width: 90%; 
    }

    /* Description paragraph */
    #s2 p:nth-of-type(2) {
        font-size: 2vw; 
        line-height: 1.6; 
        width: 100%; 
    }

    /* Enroll Now button */
    #s2 a {
        font-size: 2vw; 
        padding: 0.6rem 1.2rem; 
    }

    /* section 3 */
    #s3 {
        padding: 1rem; 
        height: auto; 
    }

    /* Flex container adjustments */
    #s3 > div {
        flex-direction: column; 
        gap: 1.5rem; 
    }

    /* Left side heading (Fortune Funders) */
    #s3 > div > div:nth-of-type(1) h1 {
        font-size: 3.3vw; /* Scale down font size for the heading */
    }

    /* Right side flex container */
    #s3 > div > div:nth-of-type(2) {
        flex-direction: column; 
        gap: 2rem; 
    }

    /* Section titles (About, Follow Us, Contact) */

    #s3 h1 {
        font-size: 2.1vw;
    }

    /* Links inside columns */
    #s3 a {
        font-size: 1.8vw; 
    }

    /* Contact text */
    #s3 div:nth-of-type(3) h1:last-child {
        font-size: 1.8vw;
    }

    #about {
        padding: 3vh 5vw;
        gap: 3vh;
        height: auto;
    }

    #about p:nth-of-type(1) {
        width: 100%;
        font-size: 6vh;
        line-height: 13vh;
        /* margin-top: 20vh; */
    }

    #about p:nth-of-type(2) {
        width: 85%;
        font-size: 2vw;
        line-height: 1.6;
    }

    #about a {
        font-size: 2vw;
        padding: 0.5rem 1.5rem;
    }

}


@media (min-width: 1024px) and (max-width: 1800px){

    #about p:nth-of-type(1) {
        width: 100%;
        font-size: 6vh;
        line-height: 13vh;
        margin-top: 40vh;
    }
}