styles.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
body
{
    background-color: rgb(0, 0, 33);
    color: white;
}

nav
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 65px;
    background-color: rgb(18, 18, 62);
}
nav ul
{
    display: flex;
    justify-content: center;
}
nav ul li
{
    list-style: none;
    margin: 0 1.5vw;
}
nav ul li a
{
    text-decoration: none;
    color: white;
}
nav ul li a:hover
{
    color: rgb(153, 153, 226);
}

main hr
{
    border: 0;
    background: #9c97f1;
    height: 1.2px;
    margin: 9vh 6vw;
}

.left
{
    /* text-align: left; */
    padding-left: 6vw;
    font-size: 1.3rem;
}

.right
{
    padding-right: 2vw;
}

.firstSection
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 100px 0;
}
.firstSection > div
{
    width: 34%;
}

.leftSection
{
    font-size: 2.4rem;
    margin: 70px 0;
    margin-left: 6vw;
}
.leftSection .buttons
{
    padding: 30px 0;
}
.leftSection .btn
{
    background-color: #1e2167;
    padding: 12px;
    border: 2px solid white;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

.rightSection img
{
    width: 75%;
}
.purple
{
    color: rgb(170, 107, 228);
}
#element
{
    color: rgb(170, 107, 228);
}

.secondSection
{
    max-width: 80vw;
    margin: auto;
    height: 42vh;
}
.secondSection h1
{
    font-size: 1.9rem;
}
.secondSection .box
{
    background: white;
    width: 78vw;
    height: 2px;
    margin: 70px 0;
    display: flex;
}
.secondSection .vertical
{
    height: 93px;
    width: 1px;
    background-color: white;
    margin: 0 13vw;
}

.secondSection .exp-heading
{
    display: flex;
    justify-content: space-between;
    padding: 2px;
}

.secondSection li
{
    margin-top: 10px;
}

.image-top
{
    position: relative;
    width: 30px;
    top: -35px;
    left: -9px;
}
.vertical-title
{
    position: relative;
    width: 150px;
    top: 75px;
    font-size: 16px;
}
.vertical-desc
{
    position: relative;
    width: 150px;
    top: 86px;
    font-size: 10px;
    color: gray;
}

.thirdSection
{
    max-width: 80vw;
    margin: auto;
    height: 88vh;
}
.thirdSection h1
{
    font-size: 1.9rem;
}
.list
{
    margin-top: 20px;
}
.list ul li
{
    padding: 3px 0;
    margin: 10px 20px;
}

.fourthSection
{
    max-width: 80vw;
    margin: auto;
    height: 37vh;
}
.fourthSection h1
{
    font-size: 1.9rem;
}
.pfs
{
    margin-top: 20px;
}
.pfs ul li
{
    padding: 3px 0;
    margin: 10px 20px;
}
svg
{
    width: 20px;
}
svg:hover
{
    width:21px;
}
.atc-link:hover
{
    width:22px;
}

.text-gray
{
    color: gray;
}
footer
{
    background-color: #0e0e1a;
}
.footer-heading
{
    display: flex;
    padding-top: 30px;
    justify-content: center;
}
.footer
{
    display: flex;
    padding: 23px 122px;
    justify-content: space-evenly;
}
.footer ul
{
    list-style: none;
    display: flex;
    justify-content: center;
}
.footer ul li
{
    list-style: none;
    margin: 0 10px;
}
.footer > div
{
    width: 220px;
}
footer .footer-rights
{
    text-align: center;
    color: gray;
    padding: 12px 0;
}

@media only screen and (max-width:600px)
{
    body
    {
        font-size: 8px;
    }
    .left
    {
        font-size: 0.8rem;
    }
    .firstSection > div
    {
        width: 33%;
    }
    main hr
    {
        margin: 8vh 7vw;
    }
    .leftSection
    {
        font-size: 1.2rem;
        margin: 50px 0;
        margin-left: 6vw;
    }
    .leftSection .buttons
    {
        padding: 20px 0;
    }
    .leftSection .btn
    {
        padding: 12px;
        border: 2px solid white;
        border-radius: 4px;
    }

    .rightSection img
    {
        width: 75%;
    }
    .secondSection
    {
        max-width: 80vw;
        height: 45vh;
    }
    .secondSection h1
    {
        font-size: 0.9rem;
    }
    .secondSection .box
    {
        width: 78vw;
        height: 2px;
        margin: 70px 0;
    }
    .secondSection .vertical
    {
        height: 75px;
        width: 1px;
        margin: 0 13vw;
    }
    .image-top
    {
        width: 30px;
        top: -35px;
        left: -9px;
    }
    .vertical-title
    {
        width: 90px;
        right: 3px;
        top: 65px;
        font-size: 7px;
    }
    .vertical-desc
    {
        width: 90px;
        right: 3px;
        top: 72px;
        font-size: 5px;
    }
    .thirdSection
    {
        height: 37vh;
    }
    .thirdSection h1
    {
        font-size: 0.9rem;
    }
    .list ul li
    {
        padding: 3px 0;
        margin: 10px 10px;
    }
    .fourthSection
    {
        height: 30vh;
    }
    .fourthSection h1
    {
        font-size: 0.9rem;
    }
    .pfs ul li
    {
        padding: 3px 0;
        margin: 10px 10px;
    }
    svg
    {
        width: 14px;
    }
    svg:hover
    {
        width:15px;
    }
    .atc-link
    {
        width:15px;
    }
    .atc-link:hover
    {
        width:16px;
    }
    .footer-heading
    {
        padding-top: 20px;
    }
    .footer
    {
        padding: 8px 122px;
    }
    footer .footer-rights
    {
        padding: 5px 0;
    }
}

@media only screen and (min-width:601px) and (max-width:1050px)
{
    body
    {
        font-size: 12px;
    }
    .left
    {
        font-size: 1.2rem;
    }
    .firstSection > div
    {
        width: 33%;
    }
    main hr
    {
        margin: 9vh 7vw;
    }
    .leftSection
    {
        font-size: 1.1rem;
        margin: 50px 0;
        margin-left: 6vw;
    }
    .leftSection .buttons
    {
        padding: 20px 0;
    }
    .leftSection .btn
    {
        padding: 12px;
        border: 2px solid white;
        border-radius: 4px;
    }

    .rightSection img
    {
        width: 75%;
    }
    .secondSection
    {
        max-width: 80vw;
        height: 58vh;
    }
    .secondSection h1
    {
        font-size: 1rem;
    }
    .secondSection .box
    {
        width: 78vw;
        height: 2px;
        margin: 70px 0;
    }
    .secondSection .vertical
    {
        height: 85px;
        width: 1px;
        margin: 0 13vw;
    }
    .image-top
    {
        width: 30px;
        top: -35px;
        left: -9px;
    }
    .vertical-title
    {
        width: 90px;
        right: 3px;
        top: 65px;
        font-size: 10px;
    }
    .vertical-desc
    {
        width: 90px;
        right: 3px;
        top: 72px;
        font-size: 7px;
    }
    .thirdSection
    {
        height: 45vh;
    }
    .thirdSection h1
    {
        font-size: 1rem;
    }
    .fourthSection
    {
        height: 33vh;
    }
    .fourthSection h1
    {
        font-size: 1rem;
    }
    svg
    {
        width: 15px;
    }
    svg:hover
    {
        width:16px;
    }
    .atc-link
    {
        width:16px;
    }
    .atc-link:hover
    {
        width:17px;
    }
    .footer-heading
    {
        padding-top: 20px;
    }
    .footer
    {
        padding: 8px 122px;
    }
    footer .footer-rights
    {
        padding: 5px 0;
    }
}