*{margin:0px;
font-family: Arial, Helvetica, sans-serif;
border:border-box;}

.navbar{height:60px;
background-color:#0f1111;
color:white;
display:flex;
align-items: center;
justify-content: space-evenly;
}
.nav-logo{height:50;
width:100px;}

.logo{background-image: url(amazon.logo.png);
height:50px;
width:100%;
background-size: cover;
}
.border{border:2px solid transparent}
.border:hover{border:2px solid white;
}



.add-first{color:#cccccc;
    font-size: 0.85rem;
margin-left: 15px;}

.add-sec{font-size:1 rem;
margin-left: 3px;}

.add-icon{display:flex;
align-items: center;}

.nav-search{display: flex;
background-color:orange;
width:620px;
height:40px;
border-radius:4px }

.nav-search:hover{border:2px solid orange}


.search-select{background-color: #f3f3f3;
width:50px;
text-align: center;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border:none;}

.search-input{width:100%;
    font-size: 1 rem;
}

.search-icon{width:45px;
display:flex;
justify-content:center;
align-items: center;
font-size: 1.2 rem;
background-color:#febd68;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color:#0f1111
}


span{font-size: 0.7rem;}

.nav-sec{font-size: 0.85rem;}

.nav-cart{font-size: 18px;

}
.nav-cart{font-size: 0.85 rem;
font-weight: 400;}


.panel{height:40px;
background-color: #222f3d;
display: flex;
justify-content: space-evenly;
align-items: center;
color:white;
}

.panel-ops p{display:inline;
margin-left: 18px;
}

.panel-ops{width:70%;
font-size:0.85 rem;}

.panel-deals{font-size: 0.9rem;
font-weight: 700;}



.panel-border{border:2px solid transparent}
.panel-border:hover{border:2px solid white;
}

.shop-section{display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color:#e2e7e6;
}


.box{height:400px;
border:2px;
background-color: white;
width:24%;
margin-top:18px;
font-size:13px;
padding:20px 0px 15px ;
}

.box-image{height: 300px;
    background-size: cover;
    margin-top:1rem;
    margin-bottom: 1 rem;
    }

    .box-content{margin-left: 1rem;
        margin-right: 1rem;
        
    }


    .box-content p{color:#007185;
    margin-top: 25px;
    font-size:13px;}

    .fashion-image{background-image: cover;
     height:135px;
   margin-left: 10px;
   justify-content: right;
    width:135px;
}
.fashion-display{display:flex;
}

.recommendation-signin{
    height:150px;
    border:1px solid grey;
    border-left: #ccc;
    border-right: #ccc;
    margin-top:15px;
}

.signin-btn{
    background-color: #c59110;
    border:1px solid #985b0a;
    height:30px;
    margin-top:8px;
    margin-left: 45%;
     width:200px;
     border-radius: 9px;

}

.signin-text{
    margin-top:30px;
    margin-left: 45.5%;
    font-size: 12px;
}


.signin-text-bottom{
    margin-left: 47%;
    font-size: 12px;
    margin-top:7px;
}

.back-top-btn{
    height:60px;
    background-color: #263547;

}

.back-text{
    margin-top: 10px;
    color:white;
    margin-left:50%;
    padding-top: 20px;
}


.footer-info{
   height:370px;
   background-color:#222f3d;
   display: flex;
   font-size: 14px;
   font-variant: normal;
   flex-direction: row;
   color:#ccc;
   justify-content: space-evenly;

}
.foot-text{
    margin-top:50px;
}

.foot-language{
    height:170px;
background-color:#222f3d;;
}  

.foot-img{    margin-top:40px;
    height:80px;
    width:100px;
    margin-left: 260px;
}

.language{
    height:20px;
    width:160px;
    font-size: 14px;
    margin-top:40px;
    color:white;
    padding:14px;
    
    border:1px solid #ccc;
    margin-left:10px ;
}

.foot-language{
    display: flex;
    flex-direction: row;
 
    
}

.all-3{
margin-top: 20px;
width:400px;
display: flex;
margin-left: 100px;
flex-direction: row;
}



/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
  margin: auto;
  
  }
  
  .size-div{
    margin-top: 20%;
    margin-left: 20%;
  }
  /* Hide the images by default */
  .mySlides {
    display: none;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width:10px;
    margin-top: -22px;
    padding: 16px;
    color: rgb(26, 25, 25);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(242, 239, 239, 0.8);
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name:fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }