#navbar{
    display:inline;
   position: fixed;
  top: 0;
  width:100%;
}
#navbar>div:nth-child(1){
      display:flex;
      height:30px;
      background-color: #d4424c;
}
#navbar>div:nth-child(2){
      display:flex;
      /* border: 0.5px solid gray; */
      height:54px;
      background-color: white;
}
#navbar>div:nth-child(3){
      border: 0.01px solid rgb(0, 0, 0);
}
#navbar>div:nth-child(4){
    display:flex;
      /* border: 0.5px solid gray; */
      height:38px;
      width:100%;
      margin: auto;
      justify-content: space-evenly;
       background-color: white;
       box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
#navbar>div:nth-child(4)>div{
    width:80%;
    display: flex;
     justify-content: space-evenly;
     
}
#m1{
    justify-content: space-around;
    color:white;
    box-sizing: border-box;
}
#m1>p{
    margin-top: 5px;
    font-size: 12px ;
    font-style: latto;
    
}
#m2{
     justify-content: space-around;
     padding-top:10px;
     box-sizing: border-box;
     
}
#m2>div>img{
    height:27px;
    width:120px
}
#m2>div{
    display: flex;
}
#m2>div>input{
    width:350px;
    height:33px;
    outline: none;
    border: 1px solid gray;
     border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    box-sizing: border-box;
    padding-left: 5px;
}
#m2>div>button{
    display: flex;
    width:85px;
    height:33.15px;
    margin-left:-1px;
    background-color: #00afef;
    outline: none;
    border: 1px solid #00afef;
    color: white;
    box-sizing: border-box;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
#m2>div>input:hover{
   border: 1px solid #00afef;;
}
#cartdiv>div{
    display:flex;
    justify-content: space-around;
    width:100px;
    color:#00afef;
    margin-top: 3px;
}
#m2>div>button>i{
   margin-right: 10px;
   margin-top: 7px;
}
#m2>div>button>p{
   margin-top: 5px;
}
#circle{
    /* border:1px solid red; */
    border-radius: 50%;
    width:fit-content;
    padding-right: 6px;
    height:18px;
    margin-left: -25px;
    margin-top: -12px;
    /* padding-top: -20px; */
    color: white;
    font-weight: bold;
    box-sizing: border-box;
    padding-left:5px;
}

#m3>div>p{
    color: #5c5b5b;
    font-size: 12px;
    font-weight: 550;
    font-family: roboto;
    font-style: lato;
    
}
#m3>div>p:hover{
      color:#00afef;
      cursor: pointer
}
#cart,#login{
    color: #8a8a8a;
     font-weight: 550;
     margin-top: -1px;
     cursor: pointer;
}
#cartdiv>div>i{
    height:15px
}
#navbar{
    display:inline;
   position: fixed;
  top: 0;
  width:100;
}
#stline{
    border: 0.5px solid #afacac;
}
/* ************ */

#footer{
    height:1000px;
    /* border: 0.5px dotted rgb(182, 179, 179); */
    width:80%;
    margin:auto;
     margin-top: 50px;
}
#f1{
    display:flex
}
#f1>div:nth-child(1){
    width:25%;
     border: 0.5px dotted rgb(182, 179, 179);
     height:150px;
     justify-content: center;
     box-sizing: border-box;
     display: inline-block;
     text-align: center;
     line-height: 15px;
}
#s1>img{
    padding-top: 20px;
}
#f1>div:nth-child(2){
    width:75%;
     border: 0.5px dotted rgb(182, 179, 179);
     height:150px;
     margin-top: 0px;
      box-sizing: border-box;
       justify-content: space-evenly;
     box-sizing: border-box;
     display: flex;
     text-align: center;
     line-height: 15px;
}

#s2>div>img{
    padding-top: 20px;
}
#cont{
    margin-top:20px;
    height:45px;
    width:160px;
      border: 0.5px solid  #00afef;
      border-radius: 5px;
      color:#00afef;
      background-color: white;
      font-weight: bold;
}
#f2{
    display: flex;
    border: 0.5px dotted rgb(182, 179, 179);
}
#f2>div:nth-child(1){
    display: inline;
      /* border: 0.5px solid  #00afef; */
    width:50%;
    height:150px
}
#f2>div:nth-child(2){
    display: flex;
      /* border: 0.5px solid  #00afef; */
    width:50%;
    height:150px
}
#g{
    display: inline-block;
    
}
#g>div{
    justify-content: center;
    text-align: center;
    line-height: 25px;
}
#h2>img{
    height:20px;
    width:20px;
    margin-right: 5px;
    /* margin-top: 13px; */
}
#h2{
    color:#6da523;
    font-size: 18px;
     margin-bottom: 10px; 
}
#h1{
    margin-top:20px;
      color: #1d1d1d;
        font-weight: 500; 
        
}

#g2>div{
    display:inline;
    /* border: 0.5px dotted rgb(182, 179, 179); */
    height:100%;
    width:33%;
    justify-content: center;
    text-align: center;
    color:#333333
}
#g2>div>img{
     width:50%;
     height:50%;
     /* margin-left: 40px; */
     margin-top: 15px;

}
#link{
    width:100%;
    height:440px;
    display: flex;
     border: 0.5px dotted rgb(182, 179, 179)
}
#link>div{
     /* border: 0.5px dotted rgb(182, 179, 179); */
     width:25%;
     text-align: center;
     display: inline;
     color: #5c5c5c;
}
#award>img{
   width:70%;
   margin-top: 50px;
}
#love{
    height:100px;
     border: 0.5px dotted rgb(182, 179, 179);
     /* display:inline */
}
#love>div{
    display: flex;
     /* border: 0.5px dotted rgb(182, 179, 179); */
     height:50%;
    margin-bottom: 10px;
}
#last{
    text-align: center;
     color: #5c5c5c;
     border: 0.5px dotted rgb(182, 179, 179);
     height:50px;
     box-sizing: border-box;
     padding-top: 15px;
}

/* ******************* */
/* massagepopup */

.alert{
  /* background: #e1e6e9; */
  padding: 10px 20px;
  min-width: 180px;
  position: fixed;
  right: 0;
  top: 10px;
  border-radius: 4px;
  border-left: 8px solid #71f577;
  overflow: hidden;
  opacity: 0;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  pointer-events: none;
  margin-top: 30px;
  background-color: white;
}
.alert.showAlert{
  opacity: 1;
  pointer-events: auto;
   margin-right: 500px;
}
.alert.show{
  animation: show_slide 1s ease forwards;
  
}
@keyframes show_slide {
  0%{
    transform: translateY(0%);
    
  }
  40%{
    transform: translateY(100%);
  }
  80%{
    transform: translateY(0%);
  }
  100%{
    transform: translateX(0%);
  }
}
.alert.hide{
  animation: hide_slide 0.5s ease forwards;
}
@keyframes hide_slide {
  0%{
    transform: translateX(0%);
  }
  40%{
    transform: translateY(0%);
  }
  80%{
    transform: translateX(0%);
  }
  100%{
    transform: translatey(-300%);
  }
}

.alert .msg{
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: #2f2e30;
}
/* ************ */

.modal {

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  justify-content:start;
  align-items: center;
}

.contents {
  height: 170px;
  width: 150px;
  background-color: white;
  text-align: center;
  padding: 20px;
  position: fixed;
  border-radius: 4px;
  /* border: 1px solid red; */
  margin-left:1120px;
  margin-top: -270px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

/* *********************** */
#loginpop{
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
/* .close1 {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 42px;
  color: #333;
  transform: rotate(45deg);
  cursor: pointer;
  /* margin-top: 10px; */
  /* margin-left: -300px; */
 /* } */
/*.close1:hover {
  color: rgb(60, 58, 58); 
}*/
.contents>div{
  height:45px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
width:185px;
margin-left: -18px;
color:#5c5b5b;
text-align: center;
box-sizing: border-box;
padding-top: 10px;
font-size: larger;
}
#loginone{
  height:40px;
  width:100%;
  background-color: #00afef;
  color:white;
  font-size:17px;
  border: 1px solid #00afef;
  outline: none;
  font-weight: bold;
  cursor: pointer;
}
/* ==================== */

.mainlogin {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  justify-content:center;
  align-items: center;
  margin-left: -30px;
}

.modalmain {
  height: 500px;
  width: 350px;
  background-color: white;
  text-align: center;
  padding: 20px;
  position: relative;
  border-radius: 4px;
  
}

.modalmain>input {
  margin: 15px auto;
  display: block;
  width: 50%;
  padding: 8px;
  border: 1px solid gray;
}

.closemain {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 42px;
  color: #333;
  transform: rotate(45deg);
  cursor: pointer;
}
.closemain:hover {
  color: #666;
}
/* }======================= */

/* cartpopup */
.bg-modal {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  justify-content:end;
  align-items: center;
  margin-left: -30px;
}

.modal-contents {
  height: 100%;
  width: 450px;
  background-color: white;
  text-align: center;
  position:absolute;
  /* border-radius: 4px; */
  box-sizing: border-box;
  margin-right: -18px;
  
}

.modal-contents>input {
  margin: 15px auto;
  display:inline-block;
  width: 50%;
  padding: 12px;
  border: 1px solid gray;
}

.close {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 42px;
  color: rgb(242, 236, 236);
  transform: rotate(45deg);
  cursor: pointer;
}
.close:hover {
  color: rgb(71, 70, 70);
}
/* ******** */
#fixedtop{
    display: block;
     /* position: fixed; */
    height:50px;
    width:100%;
    background-color: #d4424c;
    color:white;
    /* align-items: center; */
    /* text-align: center; */
    font-size: 13px;
    box-sizing: border-box;
    padding-top:15px;
   font-weight: 500;
  
}
#abocenter{
     width:100%;
      box-sizing: border-box;
      scroll-behavior: auto;
      height:500px;
      /* border:1px solid red; */
      margin:auto;
      margin-top: 5px;
      overflow:scroll;
      background-color: white;
      /* position:absolute; */
    
}
/* width */
#abocenter::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#abocenter::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
#abocenter::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
#abocenter::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
#fixedbottom{

 background-color: #00afef;    
 color:white;
 font-size: 20px;
 font-weight: bold;
 display: block;
 height:50px;
 width:30%;
 box-sizing: border-box;
 padding-top: 13px;
 margin-top:0px;
 cursor: pointer;
}
/* ************************************************* */
#cart_bottom{
  display: flex;
justify-content: space-between;
}
#orderDetailsDiv {
  border: solid #e4e4e4 1px;
  border-radius: 5px;
  width: 45%;
  height: fit-content;
  padding: 2.5px;
}

#price_summary {
  display: flex;
  justify-content: space-between;
  margin: auto 3%;
}
#price_summary h3:first-child{
color: #21b9f1;
}
#frame {
  display: flex;
  border-bottom: solid #e4e4e4 1px;
  width: 95%;
  margin: auto;
}
#total_price_div h3{
  margin: 0;
}
#total_price_div{
  display: flex;
  flex-direction: column;
  margin: auto 5%;
}
#frame > div:first-child {
  width: 25%;
  height: 120px;
  padding: 5px;
  margin-right: 10px;
}
#frame div:first-child img {
  width: 100%;
  height: 100%;
  border: solid gray 1px;
  border-radius: 5px;
}

#secondDiv {
  width: 72%;
  height: fit-content;
}
#secondDiv div {
  display: flex;
  justify-content: space-between;
}
#secondDiv > div:last-child > div:last-child {
  border: solid black 1px;
  border-radius: 10px;
}

#secondDiv div p {
  margin: 5px;
  font-size: 20px;
  font-weight: bold;
}
#secondDiv div button {
  border: none;
  border-radius: 5px;
  font-size: 25px;
  background-color: transparent;
  width: 30px;
}
#secondDiv div button:hover {
  background-color: #21b9f1;
}
/* ******************************************************** */
/* ============ */
.contents{
  height:fit-content
}