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

.container{
    max-width: 100vw;
    max-height: 100vh;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url(../img/beach1.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    font-family: "Poppins";
}

    .nav{
        height: 15vh;
        display: flex;
        justify-content: space-between;
        padding: 1.5rem 6rem 0;
        position: relative;
        background-color: white;
        mix-blend-mode: lighten;
        overflow: hidden;
    }

        #navbg{
            position: absolute;
            top: -80px;
            left: -120px;
            pointer-events: none;
        }

        #logo h2{
            color: rgb(36, 36, 36);
            font-size: 4rem;
        }

        #logo p{
            color: rgb(36, 36, 36);
            font-size: 1rem;
            text-align: end;
            margin-top: -1.7rem;
        }

        .search-menu{
            display: flex;
            align-items: center;
        }

            #search{
                display: flex;
            }

                #search img{
                    margin-right: 0.5rem;
                }

                #search input{
                    border: none;
                }

            .search-menu img{
                width: 22px;
                margin-left: 4rem;
            }

    .hero{
        height: 85vh;
        display: flex
    }

        #left{
            flex: 40%;
            background-color: white;
            height: 100%;
            mix-blend-mode: lighten;
        }

            #catagory{
                display: flex;
                align-items: center;
                padding-top: 6rem;
            }

                #catagory hr{
                    width: 26%;
                    border: 2px solid #000;
                    margin-right: 2rem;
                }

                #catagory h2{
                    font-size: 1.1rem;
                    font-weight: 400;
                }

            #header-disc{
                margin-top: 5%;
                margin-left: 30%;
            }

                #header-disc h2{
                    font-size: 6rem;
                    line-height: 1;
                }

                #header-disc h3{
                    font-size: 1.5rem;
                    margin: 1rem 0 0.5rem 0;
                }

                #header-disc p{
                    font-size: 0.8rem;
                    width: 60%;
                    margin-bottom: 3rem;
                    font-weight: 400;
                }

                #header-disc input[type="submit"]{
                    padding: 1rem 2.5rem;
                    background-color: white;
                    border: 2px solid #000;
                    text-decoration: none;
                    font-size: 1rem;
                    font-weight: bold;
                    letter-spacing: 1.5px;
                    color: black;
                    cursor: pointer;
                }

        #right{
            flex: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

            .mask-area{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                mix-blend-mode: lighten;
            }

                .mask-anim{
                    position: absolute;
                    height: 90%;
                    width: 65%;
                }

                .shape1{
                    animation: rotateAnim1 12s infinite linear;
                    opacity: 0.85;
                }

                .shape2{
                    animation: rotateAnim2 20s infinite linear;
                    opacity: 0.9;
                }

                .shape3{
                    height: 85%;
                    width: 60%;
                    animation: rotateAnim3 28s infinite linear;
                }

            #location{
                position: absolute;
                bottom: 20%;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
            }

                #location h2{
                    font-size: 3rem;
                    color: rgb(255, 255, 255);
                    text-shadow: 2px 2px 4px rgba(26, 26, 26, 0.8);
                }

                #location h3{
                    font-size: 1.2rem;
                    font-weight: 400;
                    margin-top: -0.9rem;
                    text-shadow: 2px 2px 2px rgba(26, 26, 26, 0.7);
                }


/* Keyframes */
@keyframes rotateAnim1{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(-360deg)
    }
}

@keyframes rotateAnim2{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}

@keyframes rotateAnim3{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}