@font-face {
    font-family: font1;
    src: url(./fonts/Mona-Sans-870dff5a10221ba7d01cc47eca10d0b2f911bd4196bb941985490bd8c7363cd9.woff2);
}

@font-face {
    font-family: font2;
    src: url(./fonts/WFVisualSans-RegularText-46461986901f80620e484e70aa8cbb90ede25a01351d464819a4e47a3f38ea43.woff2);
}

@font-face {
    font-family: font3;
    src: url(./fonts/WFVisualSans-SemiBold-aa0e55353b6a1b897f76a0fcbf5561fa243ce1b8b9f6aebcb5a186f0536713b1.woff2);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: font1;
}

html,
body {
    height: 100%;
    width: 100%;
}

main {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 80px 52vh 80px 1fr;
    grid-template-areas: "header header header header"
        "section1 section1 section2 section2"
        "section3 section3 section3 section3"
        "section4 section4 section4 section4";
    grid-gap: 1rem;
    padding: 0px 1rem;
}

nav {
    grid-area: header;
    /* background-color: darkolivegreen; */
    padding: 1rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navleft {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.navleft>svg {
    width: 5.5rem;
}

.left2 {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.left2 h1 {
    font-family: font1;
    font-size: 0.9rem;
    font-weight: 600;
}

.navright {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.navright button {
    padding: 1rem 1.4rem;
    border-radius: 50px;
    border: none;
    outline: none;
    font-weight: 700;
}

#btn1 {
    background-color: white;
    border: 0.5px solid #222;
}

#btn2 {
    background-color: #333;
    color: white;
}

.section1 {
    grid-area: section1;
    /* background-color: darkcyan; */
    padding: 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    /* justify-content: space-around; */
}

.top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.btn button {
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    border: none;
    outline: none;
    margin-right: 10px;
}

.search {
    width: 100%;
    background-color: #f5f4f4;
    border-radius: 50px;
    padding: 0.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search .searchbtn {
    padding: 4px 6px;
    border-radius: 50px;
    border: none;
    background-color: palevioletred;
}

.searchbtn svg {
    color: white;
}

.search h1 {
    font-size: 0.8rem;
    font-weight: 400;
}

.top h1 {
    font-size: 3rem;
}

.top p {
    font-family: font2;
    width: 70%;
    font-size: 1rem;
}

.section2 {
    grid-area: section2;
    /* background-color: darkgreen; */
    padding-right: 4rem;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.section2 video {
    border-radius: 1rem;
    height: 100%;
    width: 80%;
    object-fit: cover;
    object-position: center;
}

.section3 {
    grid-area: section3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section3 .box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    height: 100%;
    width: 92%;
    border-radius: 1rem;
    background-color: #f3e5f2;
    padding-left: 2rem;
}

.section3 .box button {
    padding: 0.7rem 1.4rem;
    background-color: white;
    border-radius: 50px;
    border: none;
    outline: none;
    font-weight: 700;
}

.section3 .box p {
    font-size: 0.9rem;
}

.section4 {
    grid-area: section4;
    /* background-color: darkblue; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4rem;
}

#b1 {
    padding: 0.7rem 1.4rem;
    border-radius: 0.4rem;
    border: 2px solid #dadada;
    outline: none;
    background-color: white;
}

.m4 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
}

.m4 h1 {
    font-size: 0.9rem;
    font-weight: 600;
}

#text1 {
    background-color: #edebeb;
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
}