*{
    margin:0;
    font-family: Arial;
    border: border-box;
    /* background-color:grey ; */
}
.navbar{
    height: 60px;
    width: 100%;
    background-color:#131921;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.nav-logo{
    height: 50px;
    width:110px;
}
.logo{
    background-image: url(amazon_logo.png);
    height: 50px;
    width: 100%;
    background-size: cover;
}
.border{
    border: 1.5px solid transparent;
}
.border:hover{
    border:1.5px solid white;
    cursor: pointer;    
}
.de-add{
    font-size: 0.8rem;
    color: #ccc;
    margin-left: 15px;
}
.to-add{
    font-size:1rem;
    font-weight: 600;
    margin-left: 3px;
}
.icon-address{
    display: flex;
    align-items: center;
    /* text-align: center; */
}
.nav-address{
    margin: 5px 2px ;
    padding: 0px 8px 0px;
    border: 1px solid transparent;
    border-radius: 2px;
    /* height: 10px; */
    height: auto;
    /* width: fit-content; */
}
/* box 3 */
.nav-search{
    display: flex;
    justify-content: space-evenly;
    width: 700px;
    height: 40px;
    border-radius: 5px;
    border: 2px solid transparent;
}
.nav-search:hover{
    border: 2px solid orange ;
    border-radius: 7px;
}
.search-all{
    background-color:#e6e6e6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #cdcdcd;
    width: 52px;
    text-align: center;
    padding-left: 5px;
    border: 5px;
    height: 40px;
}
.search-all:hover{
    cursor: pointer;
    background-color: #d8d6d6;
}
.search-input{
    width: 100%;
    height: 40px;
    font-size: 1rem;
    border: none;
}
.search-icon{
    width: 45px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #febd69;
    color: #111;
    font-size: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}
.search-icon:hover{
    background-color: #f9a436;
}
/* box 4 */
.nav-sign-in-sec{
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
span{
    font-size: 12px;
    font-weight: 400;
    height: 14px;
}
.cart{
    display: flex;
    align-items: end;
}
.cart i{
    font-size: 30px;
}
/* NAVBAR DONE */

/* PANEL START */
.panel{
    display: flex;
    background-color:#232f3e;
    height:39px ;
    color: #fff;
    width: 100%px;
    padding-left: 11px;
    align-items: center;
}
.panel-elements p{
    display: inline;
    height: 28px;
    /* margin: 5px 6px; */
    margin-left: 10px; 
    padding: 8px 9px 8px;   
    font-size: 14.5px;
}
.panel-all{
    padding-left: 5px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel-all i{
    font-size: 19px;
    width: 17px;
    padding: 5px ;
}
.panel-elements p{
    border: 1.5px solid transparent;
}
.panel-elements p:hover{
    border:1.5px solid white;
    cursor: pointer; 
}
/* Panel ends */

/* hero image starts */
/* .hero-image{
    background-image: url(heroimage.jpg);
    height: 600px;
    background-size:cover;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.imageslider{
    position: relative;
    margin: auto;
    overflow: hidden;
    width:100%;
}
.slides img{
    width: 1600px;
    height: 600px;
    display:none;
}
img.displayslide{
    display:block;
    animation-name:fade;
    animation-duration: 1s;
}
.imageslider button{
    position:absolute;
    top:50%;
    font-size: 4rem;
    transform: translateY(-150%);
    /* background-color: hsla(0, 0%, 100%, 0.5); */
    background-color: transparent;
    border:none;
    /* color:white; */
    /* display: none; */
    color:transparent;
    padding:10px 15px;
}
.imageslider button:hover{
    cursor: pointer;
    color:  rgb(105, 104, 104);
    background-color: hsla(0, 0%, 100%, 0.5);
    /* display: contents; */
}
.leftmove{
    left:0;
}
.rightmove{
    right:0;    
}
@keyframes fade{
    from{opacity: .5}
    to{opacity: 1}
}
/* .imageslider{
    position: relative;
    margin: auto;
    overflow: hidden;
    width:100%;
}
/* .slides img{
    width: 1600px;
    height: 600px;
    display:none;
} */
/* img.displayslide{
    display:block;
    animation-name: fade;
    animation-duration: 1s;
}
.imageslider button{
    position:absolute;
    top:50%;
    font-size: 2rem;
    transform: translateY(-50%);
    background-color: hsl(0,0%, 0%, 0.5);
    border:none;
    color:white;
    padding:10px 15px;
    cursor: pointer;
}
.leftmove{
    left:0;
}
.rightmove{
    right:0;    
}
@keyframes fade{
    from{opacity: .5}
    to{opacity: 1}
} */ 
.hero-msg{
    background-color: #fff;
    color: #131921;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    width: 90%;
   margin-top: -340px;   
   z-index:2;
}
.hero-msg a{
    color: #007185;
}
/* hero image ends  */

/* Main Body */

/* BOX1 */
.boxes{
    display: flex;
    margin: 20px 30px;
    flex-wrap: wrap;
    justify-content:space-around;
    row-gap: 25px;
    margin-left: 10px;
    margin-right: 10px;
    /* z-index: 1; */
    }
.box{
    width: 290px;
    height: 410px;
    border:box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: -290px;
    background-color: white;
    /* border: 2px solid #007185; */
    text-align: start;
    z-index: 1;
}
h2{
    /* margin-bottom: 10px; */
    padding: 0 20px;
    font-size: 19px;
    color: #0f1111;
    margin-top: 20px;
    margin-right: 20px;
    font-weight: 700;
}
.nested{
    display: flex;
    margin-left: -15px;
    justify-content:center;
    align-items:center;
    /* box-sizing: border-box; */
}
.Accessories{
    /* border:2px solid black; */
    width: 145px;
    height: 140px;
    padding: 4px 5px;
    margin: -4px;
    margin-top: 9px;
    text-align:left;
    font-size: 13px;
}
.GA1{
    width: 150px;
    height: 130px;
    padding: 8px 9px;    
    /* margin: -4px;   */
    /* margin-bottom: -1        3px; */
}
.container-1,.container-2{
    margin-left: -9px;
    margin-bottom: 25px;
    margin-right: 1px;
}
.text{
    margin-left:25px;
    margin-top: -12px;
    color: #0f1111;
}
.see-more{
    padding: 5px 7px ;
    font-size: 12px;
    color:#007185;
    /* margin: 25px; */
    font-weight: 500;
    margin-bottom: 20px;
    margin-left: 9px;    
}
.see-more:hover{
    color:rgb(197, 132, 12);
    cursor: pointer;
}
/* BOX-2 */
.GA2{
    width: 125px;
    padding: 10px 10px;
    height: 120px;
    /* margin: 10px 10px 10px; */
    margin-left: 15px;
    margin-top: -5px;
}
.text2{
    margin-top: -10px;
}
.full-image{
    width:260px;
    padding: 10px 10px;
    height: 295px;
    margin-left: 5px;
    /* margin-bottom: 52px; */
}
body{
    background-color: #e9e6e7;
}
/* LINE 1 COMPLETES */
.full-image-2{
    /* Extra */
    height: 300px;          
    background-image: url(B-bs.jpg);
    background-size: cover;
    margin-top: 1rem;
    margin-bottom: 1rem;    
}
/* Extra */
.box-content{
    margin-left: 1rem;
    margin-right: 1rem;
}
.box-contnet p{
    color: #007185;
}
/* Extra ENDS */
.Bbox-2{
    width: 290px;
    height: 420px;
    border:box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* margin-bottom: -270px; */
    background-color: white;
    /* border: 2px solid #007185; */
    text-align: start;
}
/* LINE 2 COMPLETES */

.line3{
    width: 1225px;
    border:2px solid transparent;
    height: 281px;
    background-color:white;
    border: border-box;
    margin-left:17px;
    margin-right: 27px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.cbox img{
    width:150px;
    height:200px
}
.Cboxes{
    display: flex;
    flex-direction: row;
    margin: 4px;
}
/* LINE 3 COMPLETES */

.D img{
    width: 250px;
    height: 200px;
    margin-left: 5px;
}
/* LINE 4 COMPLETES */
.bottom-margin{
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;   
}
.GA3{
    height: 110PX;
}
.see-up{
    margin-top: -15px;
}
/* LINE 5 COMPLETES */

.line6{
    margin-left: 18px;
    /* margin-right: px; */
    position: relative;
    /* margin-bottom: 12px; */
}
.fbox img{
    width: 93px;
    height: 200px;
    margin-left: 50px;
    padding: 8px 9px;
}
.badimage img{
    width: 200px;

 }
 .line6 .products{
    gap: 20px;
    overflow-x:auto;
    margin-top: 10px;
}
.line6 .products::-webkit-scrollbar{
    display: none;
} 
.line6 .slide-button{
    position:absolute;
    height: 50px;
    /* top: 10%; */
    width: 50px;
    color: white;
    border: 2px solid transparent;
    outline: none;
    background:transparent;
    font-size: 2.2rem;
    cursor: pointer;
    border-radius: 1px;
    transform:translateY(220%) ;
}
.line6 .slide-button:hover{
    border: 1px solid black;
}
.line6 .slide-button#prevslide{
    left: -1px;
}

.line6 .slide-button#nextslide{
    right: -1px;
}
.line6 .slide-button#prevslide2{
    left: -1px;
}

.line6 .slide-button#nextslide2{
    right: -1px;
}
/* .line6 .products1{
    gap: 20px;
    overflow-x:auto;
    margin-top: 10px;
}
.line6 .products1::-webkit-scrollbar{
    display: none;
} */

.line3 .products1{
    /* gap: 20px; */
    overflow-x:auto;
    margin-top: 20px;
}
.line3 .products1::-webkit-scrollbar{
    display: none;
} 
.line3 .slide-button#prevslide3{
    left: 15px;
}

.line3 .slide-button#nextslide3{
    right: 15px;
}
 
.line3 .slide-button{
    position:absolute;
    height: 50px;
    /* top: 10%; */
    width: 50px;
    color: white;
    border: 2px solid transparent;
    outline: none;
    background:transparent;
    font-size: 2.2rem;
    cursor: pointer;
    border-radius: 1px;
    transform:translateY(220%) ;
}
.line3 .slide-button:hover{
    border: 1px solid black;
}
.line3 .slide-button#prevslide4{
    left: 15px;
}

.line3 .slide-button#nextslide4{
    right: 15px;
}
.line8{
    margin-right:10px;
}
/* FOOTER */
.foot-panel{
    background-color: #37475a;
    height: 50px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.foot-panel:hover{
    cursor: pointer;
    background-color:  #445871;
}
.sign-in{
    width: 100%px;
    height: 180px;
    margin-bottom: -30px;
}
.sign{
    width: 100%px;
    height: 150px;
    background-color: white;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 2px;
    /* margin-bottom: -1px; */
}
.sign-button{
    width: 238px;
    height: 30px;
    background-color: #f2c75c;
    font-weight: 700;
    /* text-shadow: 0 1px 0 #ffe093; */
    /* text-shadow: 1px #f0c14a; */
    border-radius: 5px;
    border: none;
}
.sign-button:hover{
    cursor: pointer;
}
.blue{
    color: 007185;
}
.blue:hover{
    text-decoration: underline;
    cursor: pointer;
}
.foot-panel2{
    background-color: #232f3e;
    color: #DDD;
    font-size: 14px;
    width: 100%px;
    height: 350px;
    display: flex;
    justify-content:space-evenly;
}
ul{
    margin-top: 50px;
}
 ul a {
    display: block;
    margin-top: 10px;
 }
 ul a:hover{
    cursor: pointer;
    text-decoration: underline;
 }
.panel-head{
    font-weight: 700;
    font-size: 15px;
}

.foot-panel3{
    background-color: #232f3e;
    border: 1px solid #364961;
    height: 100px;
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 5px;
}
.foot-logo{
    background-image: url(amazon_logo.png);
    height: 50px;
    width: 100px;
    background-size: cover;
}
.language-button{
    background-color: #232f3e;
    color: #DDD;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 4px;
}
.language-option:hover{
    cursor: pointer;
}
.language-option{
    border: 1px solid #364961;
    width: 156px;
    height: 33px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12PX;
    gap: 10px;
}

.foot-panel5{
    /* display: flex; */
    /* flex-direction: column; */
    background-color: #131A22;
    color: #DDD;
    text-align: center;
    font-size: 12px;
    height: 80px;
}
.foot-panel5 .pages {
    padding: 8px 5px;
    margin-top: px;
}
.foot-panel5 .pages a{
    padding-left: 10px;
}
.pages a:hover{
    cursor: pointer;
    text-decoration: underline;
}
.copy-rights:hover{
    cursor: pointer;
    text-decoration: underline;
}
img:hover{
    cursor: pointer;
}