* {
    margin: 0;
    padding: 0;
}

body {
    background: url('./backgrnd.jpeg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.box {
    background: #003c8c;
    width: 100vw;
    height: 100vh;
    clip-path: polygon(x y, x y, x y, x y, x y, x y);
    clip-path: polygon(0 0, 50% 0, 40% 40%, 37% 33%, 20% 100%, 0 100%);
    z-index: 2;

}

.box img {
    width: 400px;
    padding: 30px 40px;
}



.mobile-menu {
    display: none;
}

@media (max-width:1180px) {
    .box img {
        width: 300px;
        padding: 30px 40px;
    }

}

@media (max-width:800px) {
    .box img {
        width: 250px;
        padding: 30px 40px;
    }

}

@media(max-width:750px) {
    .box {
        clip-path: polygon(0 0, 100% 0, 50% 40%, 37% 33%, 0% 60%, 0 100%);
    }

    .box img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
   

    .mobile-menu {
        display: block;
    }
}