*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


        /* this is our navagation bar */
.navbar{
    display: flex;
    border-bottom: 1px solid;
    position: fixed;
    background-color: white;
    width: 100%;
}
.logo{
    height: 8vh;
    width: 20%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.logo img{
    width: 7vh;
    border-radius: 27px;
    height: 7vh;
}
.logo img:hover{
    width: 7.5vh;
    height: 7.5vh;
}
.menu{  
    width: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu ul{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.menu ul li{
    list-style: none;
    font-size: 3vmin;
    padding: 0 22px;
}
.menu ul li a{
    text-decoration: none;
    color: black;
    border: none;
    
}
.menu ul li a:hover{
    font-size: 1.4rem;
    color: blue;
    border-bottom: 2px solid blue;
}
.cont{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.search-btn{
    border: 2px solid gray;
    width: 20vw;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 20px;
}
.search-btn:hover{
    background-color: rgba(255, 0, 0, 0.109);
}
input[type="search"]{
    width: 18vw;
    height: 25px;
    border: none;
    font-size: 16px;
    background-color: transparent;
}
input[type="search"]:hover{
    background-color: transparent;
}
input[type="search"]:focus{
    outline: none;
}
.fas i{
    color: gray;
}
.fas i:hover{
    color: blue;
}
.fa i{
    display: none;
} 
    /* the end of navagation bar */

    /* this is our banner section */
.banner{
    height: 57vh;
    width: 100%;
    background-color: rgb(1, 1, 38);
    display: flex;
    margin-bottom: 10vh;
}
.main-contant{
    padding: 18vh 10vh 0;
    color: white;
    width: 60%;
}
.main-h{
    width: 13vw;
    height: 15vh;
    text-align: justify;
    font-size: 18px;
    line-height: 24px;
}
.or {
    color: orange;
}
.main-contant p {
    font-size: 17px;
    height: 15vh;
    width: 35vw;
}
.b1 {
    height: 35px;
    width: 100px;
    background-color: orange;
    font-weight: 600;
    border-radius: 7px;
    border: none;
}
.b1:hover{
    height: 39px;
    width: 105px;
    background-color: indigo;
    font-weight: 610;
    border-radius: 7px;
    color: white;
    border: none;
}

.main-img{
    width: 40%;
    display: flex;
    justify-content: end;
    align-items: center;
}
.main-img img{
    margin: 52px 0 0;
    width: 27vw;
    height: 49vh;
}

        /* the end of banner section */
        /* this is our about section */


.About-us{
    height: 48vh;
    width: 100%;
    background-color: rgb(1, 1, 38);
    display: flex;
    color: white;
}
.img2{
    width: 45%;
    display: flex;
    align-items: center;
}
.img2 img{
    width: 31vw;
    height: 54vh;
    margin-bottom: 33px;
}
.about-content{
    width: 55%;
    padding: 5vh 10vh;
}  
.about-content p{
    font-size: 17px;
    height: 20vh;
    width: 40vw;
    text-align: justify;
}      

        /* the end of about us section */

        /* this is our shop with us section */
.shop-with-us {
    height: 70vh;
    background-color: #a5a3a38c;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;       
}
.main-h2 {
    width: 13vw;
    height: 15vh;
    text-align: justify;
    font-size: 18px;
    line-height: 24px;
    margin-top: 7vh;
}
.main2 {
    display: flex;
    justify-content: space-evenly;
}
.box {
    width: 20vw;
    height: 55vh;
}
.box img {
    width: 18vw;
    height: 28vh;
    border-radius: 20px;
    box-shadow: 4px 4px 6px 5px rgb(108 108 108);
}
.box p {
    font-size: 14px;
    padding-top: 12px;
}
.sub-h {
    font-size: 17px;
    line-height: 50px;
}

    /* this is our services section */
.services{
    height: auto;
    width: 100%;
}
.main-h3{
    text-align: center;
    font-size: 23px;
    margin-top: 4vh;
}
.subh2{
    font-size: 19px;
    color: orange;
}
.upper{
    height: auto;
    width: 100%;
    display: flex;
}
.img3{
    height: 45vh;
    width: 50%;
    display: flex;
    margin: 34px 0px 0px 22px;
}
.img3 img {
    position: relative;
}
.non-move-pics{
    width: 40vw;
    border-radius: 18px;
}
.moving-pic{
    top: 129px;
    left: -150px;
    width: 22vw;
    height: 30vh;
    border-radius: 38px;
}
.contant2{
    height: 45vh;
    width: 50%;
    text-align: center;
}
.contant2 p{
    height: 30vh;
    width: 44vw;
    color: blue;
    text-align: justify;
    padding: 38px 0;
}
.lower{
    height: auto;
    width: 100%;
    display: flex;
    margin-top: 17vh;
}
.service-list{
    flex-direction: column;
    width: 22vw;
    text-align: center;
}
.service-list ul{
    text-align: justify;
    width: 22vw;
    margin: 5vh 0 5vh 9vh
}
.service-list ul li{
    list-style:  square;
    color: orange;
    line-height: 23px;
}
.service-list ul li a{
    text-decoration: none;
}
.img4{
    height: auto;
    display: flex;
    margin: 34px 0px 0px 22px;
}
.img4 img {
    position: relative;
}
.non-move-pics2{
    width: 36vw;
    border-radius: 18px;
    height: 37vh;
    z-index: 1;
}
.moving-pic2{
    width: 36vw;
    border-radius: 18px;
    top: 15vh;
    left: 18vw;
    height: 37vh;
    z-index: 2;
}




    /* the end of services section */