header{
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    z-index: 1000;
}

header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
header nav img{
    width: 5opx;
    height: 50px;
}

header nav ul{
    display: flex;
    gap: 70px;
}

header nav ul li {
    font-size: 18px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: #3f3f3f;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
}

header nav ul li::before {
    content: ''; 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px; 
    background-color: #5565b4; 
    transition: width 1s; 
}

header nav ul li:hover::before {
    width: 100%;
}

header nav ul li:hover{
    transition: 1s;
    color: #6355b4;
}


header nav :nth-child(3){
    display: flex;
    gap: 40px;
}

header nav :nth-child(3) div{
    background-color: #5590b4;
    border-radius: 50%;
}

header nav :nth-child(3)  i{
    font-size: 15px;
    color: #ffffff;
    padding: 20px;
}

header nav #mobileBar i{
    font-size: 30px;
    color: #3f3f3f;
}

header nav #mobileBar{
    display: none;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #000;
    font-family: "Inter", sans-serif;
}

section{
    position: absolute;
    top: 150px;
    display: grid;
    grid-template-columns: 2fr 2fr;
    z-index: -1;
}

.pic{
    padding: 50px;
    padding-left: 10vh;
}

.mainImg {
    width: 79%;
    margin-left: 9vh;
    height: auto;
}

.mainImg:hover{
    cursor: zoom-in;
}

.pic > div{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 9vh;
    gap: 7px;
}


.pic > div img{
    width: 21.5%;
}

section > :last-child{
    padding: 50px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

section > :last-child h1{
    font-size: 150%;
    font-weight: 400;
    letter-spacing: 1.44px;
}

section > :last-child h2{
    font-size: 350%;
    font-weight: 500;
    letter-spacing: 1px;
}

section > :last-child h2 span{
    color: #5565b4;
}

section > :last-child h3{
    font-size: 300%;
    font-weight: 700;
    letter-spacing: 1px;
}

select{
    border: 3px solid #575757;
    font-size: 120%;
    letter-spacing: .5px;
    padding: 10px 30px;
    width: 13%;
}

::-webkit-scrollbar {
    width: 12px; /* width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #b0cdff; /* color of the track */
}

::-webkit-scrollbar-thumb {
    background: #5563b4;
    border-radius: 8px; /* color of the thumb */
}

input{
    border: 3px solid #575757;
    font-size: 120%;
    letter-spacing: .5px;
    width: 9%;
    padding: 20px 10px;
}

section button{
    background-color: #2c1e7c;
    border: 1px solid #f8f9fa;
    border-radius: 5px;
    padding: 20px 30px;
    color: #ffff;
    font-size: 120%;
    margin-left: 20px;
}

section .dis{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

section .dis h1{
    font-size: 180%;
    font-weight: 500;
    letter-spacing: 1px;
}

section .dis p{
    font-size: 140%;
    font-weight: 400;
    width: 70%;
    letter-spacing: 0.5px;
}

/* Media Query */

@media screen and (max-width: 1440px) {
    section > :last-child h2 {
        font-size: 260%;
    }

    section > :last-child h3 {
        font-size: 210%;
    }

    select {
        font-size: 120%;
        width: 21%;
    }

    section .dis h1 {
        font-size: 150%;
    }

    section .dis p {
        font-size: 120%;
    }

}

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

    section > :last-child h1 {
        font-size: 90%;
    }

    section > :last-child h2 {
        font-size: 200%;
    }

    section > :last-child h3 {
        font-size: 150%;
    }

    select {
        font-size: 98%;
        width: 18%;
        padding: 5px 7px;
    }

    section .dis > h1{
        font-size: 119%;
    }

    section .dis p {
        font-size: 100%;
        width: 85%;
    }

    .mainImg {
        width: 109%;
        margin-left: -1vh;
    }

    .pic > div {
        margin-left: -1vh;
    }

    .pic > div img {
        width: 25.5%;
    }

    input {
        width: 10%;
        padding: 10px 5px;
    }

    section button {
        padding: 20px 30px;
        font-size: 89%;
    }

}

@media screen and (max-width: 768px){
    header nav ul{
        display: none;
    }

    header nav :nth-child(3){
        display: none;
    }

    header nav #mobileBar{
        display: block;
        margin-right: 10px;
    }

    section {
        grid-template-columns: 1fr;
    }

    .mainImg {
        width: 99%;
    }

    .pic > div img {
        width: 23.5%;
    }

    section > :last-child {
        text-align: center;
    }

    select {
        font-size: 98%;
        width: 18%;
        padding: 5px 7px;
    }

    select {
        margin-left: 32vh;
    }

    section .dis p {
        width: 78%;
        margin-left: 8vh;
    }
}

@media screen and (max-width: 425px){
    select {
        margin-left: 16vh;
        width: 23%;
    }

    section .dis p {
        width: 78%;
        margin-left: 6vh;
    }

    section > :last-child h2 {
        margin-left: 25px;
    }

    .mainImg {
        width: 119%;
        margin-left: -40px;
        margin-top: -79px;
    }

    .pic > div {
        margin-left: -3vh;
    }
}

@media screen and (max-width: 375px){

    section .dis p {
        width: 78%;
        margin-left: 5vh;
    }

    .mainImg {
        width: 119%;
        margin-left: -40px;
        margin-top: -79px;
    }

    .pic > div {
        margin-left: -5vh;
    }

}

@media screen and (max-width: 320px){

    header nav #mobileBar {
        display: block;
        margin-right: 37px;
    }

    .pic > div {
        margin-left: -6vh;
    }
}