/* univarsal setting */

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

  /* Header */

.border{
    border: 2px solid transparent;
}

.border:hover{
    border: 1.5px solid white;
}

.navbar{
    height: 60px;
    background-color: #131921;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;

}

.navLogo{
    height: 50px;
    width: 100px;
    
    
    
}

.navlogobg{
    background-image: url("images/logo.png");
    background-size: cover;
    height: 50px;
    width: 100px;
}

.navloc{
    width: 120px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    
    
}

.navloc1{
       font-size: 12px;
}

.navloc2{
      display: inline;
      align-items: center;
      font-size: 1rem;

}

.nav_search{
    height: 50px;
    width: 80%;
    display: flex;
    border-radius: 4px;


}

.nav_search_option{
    background-color: #D4D4D4;
    color: black;
    font-size: 0.8rem;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;

}

.nav_search_icon{
    width: 45px;
    background-color: #F3A847;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.nav_search_box{
    font-size: 1rem;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav_flag_item{
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items:end;
    color: white;
}

.nav_flag_icon{
    font-size: 1.4rem;
}

.nav_flag_name{
       background-color: transparent;
       border: none;
       color: white;
}

.nav_signin{
    width: 150px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.nav_signin_item1{
    font-size: 12px;
}

.nav_signin_item2{
    font-size: 14px;
    font-weight: bold;
}

.nav_order{
    width: 80px;
    height: 50px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 10px;
}

.nav_order_item2{
    font-size: 14px;
    font-weight: bolder;
}

.nav_card{
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: end;
}

.nav_card_count{
    color: #B66B0C;
    position: relative;
    right: 50px;
    bottom: 20px;

}

.nav_card_item1{
    font-weight: bold;
}

   /* Header 2 */

.nav2{
    background-color: #232F3E;
    height: 40px;
    font-size: 14px;
    color: black;
    display: flex;
    justify-content: start;
    align-items: center;
    color: white;

}

.nav2_item1{
    height: 20px;
    padding: 10px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.nav2_item2{
    height: 20px;
    padding: 10px;
    margin-right: 5px;
}

.nav2_item3{
    height: 20px;
    padding: 10px;
    margin-right: 5px;
}

.nav2_item4{
    height: 20px;
    padding: 10px;
    margin-right: 5px;
}

.nav2_item5{
    height: 20px;
    padding: 10px;
    margin-right: 5px;
}

.nav2_item6{
    height: 20px;
    padding: 10px;
    margin-right: 5px;
}

    /* Main body */

.hero{
    height: 350px;
    background-image: url("images/hero_image.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.hero_msg{
    height: 40px;
    width: 80%;
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.80rem;
    border-radius: 10px;
    margin-bottom: 30px;

}

.hero_msg a{
    color: aqua;
    text-decoration: underline;
}

.box_item{
    height: 950px;
    background-color: rgb(204, 198, 198);
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

 .box_item .box{
    width: 328px;
    height: 400px;
    padding: 16px;
    margin: 15px;
    background-color: white;
} 

.box_img{
       height: 300px;
       margin-top: 10px;
       margin-bottom: 10px;
       background-size: cover;
       border: 1.5px solid rgb(182, 182, 182);
}

.box_img1{
    background-image: url("images/box1.jpg");
    background-size: cover;
}
.box_img2{
    background-image: url("images/box2.jpg");
    background-size: cover;
}
.box_img3{
    background-image: url("images/box3.jpg");
    background-size: cover;
}
.box_img4{
    background-image: url("images/box4.jpg");
    background-size: cover;
}
.box_img5{
    background-image: url("images/box5.jpg");
    background-size: cover;
}
.box_img6{
    background-image: url("images/box6.jpg");
    background-size: cover;
}
.box_img7{
    background-image: url("images/box7.jpg");
    background-size: cover;
}
.box_img8{
    background-image: url("images/box8.jpg");
    background-size: cover;
}

  /* Footer */

.footer1{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #485769;
}

.footer2{
    height: 300px;
    background-color: #232F3E;
    color: white;
    display: flex;
    justify-content: space-evenly;
    padding-top: 50px;
    font-size: 14px;

}

.footer2_list a{
    display: block;
    margin-top: 5px;
    
}

#headline{
    font-weight: bold;
    font-size: 16px;
}

.footer3{
    height: 100px;
    background-color: #131921;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 0.3px solid rgb(216, 204, 204);

}

.footer3_logo{
    height: 50px;
    position: relative;
    right: 60px;
}

.language{
    border: 1.5px solid rgb(226, 216, 216);
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    font-size: 14px;
}
.cranccey{
    border: 1.5px solid rgb(226, 216, 216);
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    font-size: 14px;
}
.country{
    border: 1.5px solid rgb(226, 216, 216);
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    font-size: 14px;
}