*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
:root{
    font-size: 18px;
}
/* .navbar ul{
    border: solid;
} */
.dark{
    background-color: black;
    color: white;
}
.light{
    background-color: white;
    color: black;
}

.menu{
    margin-left: 60px;
    font-size: 1.3rem;
    font-weight: bold;
}
.nav-lik{
    margin-left: 250px;
}
.menu a:hover{
    box-shadow: 5px 4px 5px 0px;
}
.log{
    margin-left: 50px;
}
.nav-item .boot{
    height: 50px;
    background-color: white;
    color: red;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50px;
    border: solid red;
    width: 120px;
}
.nav-item .boot:hover{
    background-color: red;
    color: white;
    border: solid;
}
@media screen and (min-width:990px) and (max-width:1200px) {
    .nav-lik{
        margin-left: 0px;
    }
    .menu{
        margin-left: 10px;
        font-size: 1rem;
    }
    .nav-log{
        margin-left: 20px;

    }
    .log{
        margin-left: 20px;
    }
}
@media screen and (min-width:1200px) and (max-width:1550px) {
    .nav-lik{
        margin-left: 150px;
    }
    .menu{
        margin-left: 20px;
        font-size: 1.3rem;
    }
    .nav-log{
        margin-left: 20px;
    }
    .log{
        margin-left: 20px;
    }
}



/* style of the first section */
/* .buy div{
    border: solid;
} */
.buy{
    margin: auto;
    margin-top: 150px;
    width: 70%;
    display: flex;
    justify-content: space-evenly;
    /* margin-bottom: 200px; */
    height: 530px;
}
.buy .image{
    width: 35%;
    border-radius: 40px;
    border: 1.5px solid;
    box-shadow: 2px 1px 7px 1px;
    text-align: center;
}
.buy .image img{
    border-radius: 40px;
}
.buy .buynow{
    width: 40%;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}
.buy .buynow .buy1{
    font-size: 1.5rem;
    font-weight: bold;
}
.buy .buynow .buy2{
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 25px;
}
.buy .buynow .buy3{
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 25px;
}
.buy .buynow .buy4{
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 25px;
}
.buy .buynow .buy4 select{
    padding: 4px;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid;
}
.buy .buynow .buy5{
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 40px;
}
.buy .buynow .buy5 input{
    width: 100px;
    border: 1px solid;
    padding-left: 10px;
}
.buy .buynow .buy6{
    width: 50%;
    /* border: 1px solid; */
    height: 50px;
    margin-top: 20px;
}
.buy .buynow .buy6 button{
    width: 100%;
    height: 100%;
    font-size: .9rem;
    font-weight: bold;
    color: white;
    background-color: rgb(15, 15, 15);
    border: none;
}
.buy .buynow .buy6 button:hover{
    background-color: rgb(59, 58, 58);
}

@media screen and (min-width:0px) and (max-width:768px) {
    .buy{
        flex-direction: column;
        width: 90%;
    }
    .buy .image{
        width: 70%;
        height: 530px;
        margin: auto;

    }
    .buy .image img{
        height: 400px;
    }
    .buy .buynow{
        width: 70%;
        margin: auto;
    }
}
@media screen and (min-width:768px) and (max-width:1100px) {
    .buy{
        width: 90%;
    }
    .buy .image{
        width: 40%;
        height: 530px;
        margin: auto;

    }
    .buy .image img{
        height: 530px;
    }
    .buy .buynow{
        width:50%;
        margin: auto;
    }
}
@media screen and (min-width:1100px) and (max-width:1400px) {
    .buy{
        width: 80%;
    }
    .buy .image{
        width: 37%;
        height: 530px;
        margin: auto;

    }
    .buy .image img{
        height: 530px;
    }
    .buy .buynow{
        width:50%;
        margin: auto;
    }
}