.btn{
  text-transform: uppercase;
}
.sign-up-section{
  background-color: #f6f6f6;
  margin-top: 2px;
  margin-bottom: 2px;
}
.sign-up-container{
  background-color: #fff;
  padding: 1rem 2rem;
}
.wrapper-signup{
  display: flex;
  flex-direction: row;
  padding-top: 2rem;
  padding-bottom: 5rem;
}

@media (max-width:942px) {
  .wrapper-signup{
    display: flex;
    flex-direction: column;
  }
}

.form-contact{
  margin-top: 35px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

.input-group{
  padding-bottom: 5px;
  padding-top: 12px;
  max-width: 450px;
}

.btn-submit{
  color: white;
  font-size: 13px;
  font-weight: 500;
  background-color: #3492eb;
}

.btn-submit:hover{
  color: #3492eb;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #3492eb;
}


.img-detail-iphone{
  width: 350px;
  height: 390px;
  object-fit: contain;
}

.img-detail-ipad{
  width: 325px;
  height: 325px;
  object-fit: contain;
}

.img-detail-watch{
  width: 250px;
  height: 300px;
  object-fit: contain;
  padding-top: 1rem;
}

.img-detail-airpod{
  width: 250px;
  height: 325px;
  object-fit: contain;
}

.div-space{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}
.pre-order-wrapper{
  padding: 1rem;
}
.model-input{
  position: absolute;
  opacity: 0;
}

.model-pre{
  border-radius: 7px;
  height: 70px;
  width: 375px;
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
}

.model-pre:hover{
  cursor: pointer;
  border: 2px solid #3492eb;
}

.selected{
  border: 2px solid #3492eb;
}

.model-pre p{
  margin: 0;
}

.model-title{
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 3px;
}

.model-price{
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 3px;
}

.model-display{
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #1d1d1f;
}

.colorWrapper{
  display: flex;
  gap: 10px;
}
.colorSwicth{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.color-active{
  width: 31px;
  height: 31px;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.colorSwicth:hover{
  cursor: pointer;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.storage{
  border:#ddd solid 1px;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 15px;
}

.storage-active{
  border:#3492eb solid 1px;
  color: #fff;
  background-color: #3492eb;
}

.storage:hover{
  border:#3492eb solid 1px;
  cursor: pointer;
  color: #fff;
  background-color: #3492eb;
}

.flash-frontend{
  width: 70%;
  margin: auto;
  padding-top: 1rem;
}

.qty .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  padding: 0 2px
  ;min-width: 35px;
  text-align: center;
}
.qty .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: white;
  font-size: 16px;
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 50%;
  }
.qty .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: white;
  font-size: 16px;
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}

.minus:hover{
  background-color: #3492eb !important;
}
.plus:hover{
  background-color: #3492eb !important;
}
/*Prevent text selection*/
span{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
input{  
  border: 0;
  width: 2%;
}
nput::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:disabled{
  background-color:white;
}

h3{
  padding-top: 1rem;
  font-size: 24px;
  font-weight: 400;
  color: #232323;
  text-transform: uppercase;
}

h4{
  text-align: center;
  padding-top: 1rem;
  font-size: 24px;
  font-weight: 400;
  color: #232323;
  text-transform: uppercase;
}

h5{
  color: #232323;
  margin-bottom: 0;
  font-size: 18px;
}

.fa-square-check{
  color: #232323;
  padding-right: 4px;
}

.carousel-indicators{
  margin-bottom: 0;
}

.carousel-indicators [data-bs-target]{
  width: 9px;
  height: 9px;
  background-color: #808080;
  border-radius: 50%;
}
.feature{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature ul{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: square;
}

.legal{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
}

.legal ul{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-check{
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
}

.form-check-input:checked{
  background-color: #3492eb;
  border-color: #3492eb;
}

.cod{
  width: 90px;
  height: 55.13px;
  border-radius: 5px;
  background-color: #3492eb;
  text-align: center;
  vertical-align: middle;
  padding-top: 14px;
  color:#fff;
  text-transform: uppercase;
  font-size: 18px;
}

.div-pay{
  display: flex;
  padding-bottom: 2rem;
  gap: 4rem;
}

.form-label{
  text-transform:capitalize;
  font-size: 16px;
}

.cardDate{
  display: flex;
  gap: 1rem;
}
.emptyCart{
  padding: 1rem 2rem;
  border-radius: 5px;
}

.go-shop{
  color: #fff;
  background-color: #3492eb;
  padding: 5px 14px;
  border-radius: 5px;
  text-transform: uppercase;
}

.go-shop:hover{
  color: #3492eb;
  background-color: #fff;
  border: solid 1px #3492eb;
}

.form-select{
  border-radius: 0;
}

.container-checkout{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  padding-top: 2rem;
}

@media (max-width:980px) {
  .container-checkout{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

}

.payment{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  border: 1px solid #ced4da;
}
.order-div{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  border: 1px solid #ced4da;
  padding-bottom: 1rem;
}

.order{
  display: flex;
  justify-content: space-between;
  width: 20em;
}
.order p{
  margin-bottom: 0;
  padding-bottom: 5px;
}

.list-order{
  border: 1px solid #ced4da;
  padding: 5px 12px;
}

.order-date{
  text-align: center;
  border: 1px solid #ced4da; 
  padding-top: 1rem;
  background-color: #ddd;
  line-height: 2rem;
}
.btn-purchase{
  text-transform: uppercase;
  background-color: #3492eb;
  color: #fff;
  border: 1px solid #3492eb;
  margin-top: 5px;
  padding: 9px 0px;
  width: 100%;
}

.btn-purchase:hover{
  background-color: #fff;
  color: #3492eb;
  font-weight: 500;
  border: 1px solid #3492eb;
}

.wrapper-map{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

#circle {
  background-size: cover;
  border-radius:50% 50% 50% 50%;
  width:120px;
  height:120px;
  position: absolute;
  z-index: 9;
}

.box{
  position: relative;
  width: 100%;
  height: 40rem;
  margin-top: 2rem;
  display: flex;
  text-align: center;
  justify-content: center;
}

.card-map{
  border: 1px #f6f6f6;
  background-color: #f6f6f6;
  text-align: center;
  width: 100%;
  height: 102px;
  padding-top: 4.2rem;
  position: absolute;
  top: 4rem;
}

.map{
  width: 100%;
  position: absolute;
  top: 10.5rem;
}

@media (max-width:993px) {
  .wrapper-map{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .box{
    position: relative;
    width: 100%;
    height: 40rem;
    margin-top: 1rem;
    display: flex;
    text-align: center;
    justify-content: center;
  }
  .form-contact{
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

}

input[type='radio']{
  width: 15px;
  height: 15px;
}

.cart-count{
  position: absolute;
  top: 19px;
  right: 16px;
  text-align: center;
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: #ef5b25;
  border-radius: 50%;
  font-size: 13px;
}

@media (max-width: 941px) {
  .cart-count{
    position: absolute;
    top: 83px;
    right: 15px;
    text-align: center;
    width: 18px;
    height: 18px;
    color: #fff;
    background-color: #ef5b25;
    border-radius: 50%;
    font-size: 13px;
  }
}

.verify-wrapper{ 
  padding-left: 20rem;
  padding-right: 20rem;
}

.verify-content{
  background-color: #d1e6fa;
  font-size: 14px;
  border-radius: 5px;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.verify-form{
  display: flex;
  justify-content: space-between;
}

.btn-verify{
  background-color: #3492eb;
  color: #fff;
  border: 1px solid #3492eb;
  padding: 7px 7px;
  border-radius: 5px;
  font-size: 14px;
}

.btn-verify:hover{
  background-color: #fff;
  color: #3492eb;
  border: 1px solid #3492eb;
  padding: 7px 7px;
  border-radius: 5px;
}

.btn-verify-logout{
  background-color: #fff;
  color: #3492eb;
  border: 1px solid #3492eb;
  padding: 7px 7px;
  border-radius: 5px;
}

.btn-verify-logout:hover{
  background-color: #3492eb;
  color: #fff;
  border: 1px solid #3492eb;
  padding: 7px 7px;
  border-radius: 5px;
}

.stock-span{
  position: absolute;
  right: 0;
  top: 25px;
  background-color: #ddd;
  padding: 1px 5px;
  font-size: 14px;
}

.invoice-logo{
  object-fit: contain;
  width: 150px;
}

.invoice-header{
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pad{
  padding-left: 1.5rem;
}

.pad-item{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.pad-note{
  padding-top: 1rem;
  padding-bottom: 5px;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: space-between;
}

.invoice-bill{
  display: flex;
  padding-left: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.line{
  height:2px;
  border-width:0;
  background-color:#232323;
}

.invoice-tb{
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
}

.invoice-wrapper{
  width: 793px;
  height: 850px;
  margin: auto;
  border: solid 1px #ddd;
  box-shadow: 8px 8px 5px #ddd
}

.carousel-wrapper{
  text-align: center;
}