body{
  font-family: 'Tajawal';
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.btn{
   line-height: 0;
   padding: 20px;
}
.h4, h4 {
    font-size: calc(1.205rem + .3vw);
}
.container{
  width: 100%;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
  margin-right: auto;
  margin-left: auto;
}
.offwhite{
  background-color: #FBFBFB;
}
.thank{
  text-align: center;
    position: relative;
    margin-top: 25px;
}
.section-title{
  font-size: 20px;
  text-align: center;
  padding-bottom: 10px;
  line-height: 1.7;
  margin-top: 15px;
}
.section-title h2{
  padding-top: 25px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #45505b;
}
.section-title h2::before{
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}
.section-title h2::after{
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #fcd053;
  bottom: 0;
  left: calc(50% - 20px);
}
.thankyou h2::after{
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: green;
  bottom: 0;
  left: calc(50% - 20px);
}
.section-title p{
  margin: 5px 0;
  text-align: center;
  direction: rtl;
}

.section-title .whats{
  font-weight: 500;
  width: 70%;
  margin-top: 10px;
  padding: 10px
}
.section-title .whats svg{
  position: relative;
  top: 2px;

}
.panner img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 25vh;
  width: 100%;
  max-width: 100%;

}
.price strong,.price2 strong{
  color: #0c8fee;
}
.info_product .price2{
  font-size: 18px;
  padding-right: 10px;
  background-color: #f5f5f5;
  padding: 15px 10px;
  border:3px dashed green;
  border-right: 3px solid green;
  margin-top: 10px;
}
.img_s2{
  position: relative;
  z-index: 99;
  border: 2px solid rgb(82 82 82);
  opacity: .5;
  width: 55px;
  margin: 5px 1px;
  cursor: pointer;
}

.btn_buy{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
}
.btn_buy a{
  font-weight: 500;
  padding: 20px 0;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media (min-width: 450px){
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }
}


@media (min-width: 450px){
  .resp-container{
    width: 70%;
    position: relative;
    overflow: hidden;
    padding-top: 40.25% !important;
    text-align: center;
    margin: auto;
  }
}

.row {
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x)/ -2);
    margin-left: calc(var(--bs-gutter-x)/ -2);
}
del{
  color: red;
  font-size: 14px
}
.hide{
  display: none;
}
.back_b{
  position: relative;
    width: 100%;
    top: 0;
  z-index: 99999;
  direction: rtl;
  border: 2px solid #ddd;
  background-color: #f5f5f5;
  padding: 5px 10px 10px
  /* margin-right: 10px */
}
.back_b a{
  font-size: 22px;
  font-weight: 600;
}
.back_b a svg{
  position: relative;
  top: 4px;
}
.back_b .nav-link{
  padding: 0
}
/* ------------------------- */
.info_product{
  margin-top: 8px;
  direction: rtl;
}
.info_product p{
  margin-bottom: 5px;
}
.accordion{
  margin: 25px auto;
}
.accordion-button{
  padding: .8rem 1.25rem;
}
.accordion-button::before{
  background-image: none;
  content: '\f0fe';
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 200;
  font-size: 22px;
  margin-left: 5px;
  transform: none;
}
.accordion-button::after{
  content: none;
}
/* f192 */
.accordion-button:not(.collapsed)::before{
    background-image: none;
    content: '\f14a';
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 200;
    font-size: 22px;
    margin-left: 5px;
    transform: none;
}

.accordion-item{
  margin-bottom: 15px;
}
@media (min-width: 450px){
  .item img{
      width: 60%;
    }

}
.accordion-button.collapsed ,.accordion-collapse {
    border-bottom-width:  1px;
}
.accordion-button:focus{
  box-shadow: none
}
.accordion-body>p>svg{
  color: #0d6efdcc
}
.accordion-body p{
  margin-bottom: 20px;
    font-size: 18px;
}
.accordion-body p:last-child{
  margin-bottom: 5px;

}
.collapsed{
  background-color: #f5f5f5
}
.accordion-body {
  padding: .7rem .9rem;
}
/* ***************************** */
.buy{
  margin-top: 15px;
}
.buy .alert{
  font-size: .9rem;
  direction: rtl;
}
.buy .form_head{
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 15px;
  font-size: 18px;
  padding: 25px;
}
.alert {
    padding: 0.6rem 1rem;
  }
.alert-dismissible {
    padding-right: 15px;
    padding-left: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  left:0;
  right: auto;
  z-index: 2;
  padding: 0.90rem 1rem;
  }
.form-floating>label {
  right: 0;
  left: auto;
}
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label{
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(1.15rem);
}
.form-select{
  font-size: .9rem;
  background-position: left .75rem center;
}
.form-floating>.form-select~label{
    transform: scale(.85) translateY(-.5rem) translateX(2.15rem);
}
.form-text {
    margin-top: .25rem;
    font-size: .775em;
    color: #22b4d4;
}


.offer_video{
  height: 200px;
  margin-bottom: 21px;
}
@media (min-width: 450px){

    .offer_video{
      height: 300px;
      margin-bottom: 21px;
    }
}
  
  /* ------------------------- */


.watches,.headphones,.offers,.product{
  direction: rtl;
}
.product{
  padding: 20px 0;
}
.item{
  position:relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  margin: 10px 0;
}
.item h4{
  margin-bottom: 1px;
}
.item p{
  font-size: 16px;
}
.item>img{
  padding: 0;
}
.item a{
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px 0;
  margin-top: 10px;
  border-radius: unset;
}
.info-item{
  padding: 0 5px;
  text-align: center;
}
.info-item h4{
  margin-top: 17px;
}
.info-item span
{
  font-weight: 600;
}
.sale{
  background-color: red;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
}
.sale span{
  position: relative;
  bottom: 2px;
  padding: 0 10px ;
  font-size: 10px;
}
.all-item_w,.all-item_h,.all-item_o{
  font-size: 18px;
  margin: 20px 0 10px;
}
.all-item_w svg,.all-item_h svg,.all-item_o svg{
  position: relative;
  bottom: 1px;
  font-size: 25px
}

@media (max-width: 450px){
  .sale{
    height: 32px;
    background-color: red;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
  }
  .sale span{
    position: relative;
    bottom: 3px;
    padding: 0 9px;
    font-size: 11px;
  }
}

.contact{
  padding: 10px 15px;
}
footer p{
  margin-bottom: 10px;
}
footer img{
  margin-bottom: 10px
}
footer{
  text-align: center;
  padding: 15px 0 70px;
  background-color: #212121;
  color: #fff;

}
/* ******************************** */
.card{
  overflow: hidden;
  display: block;
  
  background-color: #fff;
  border: 1px solid rgb(202 202 202);
}

@media (max-width: 1199px){
  .panner{
    background-color: #000;
  }
  .panner img {
    height: 25vh;
    width: 65%;
  }
  }
  @media (min-width: 1200px){
    .panner{
      background-color: #000;
    }
    .panner img {
      height: 25vh;
      width: 35%;
    }
    }
@media (max-width: 450px){
.panner{
  background-color: #000;
}
.panner img {
  height: 25vh;
  width: 100%;
}
}

.card-body {
  z-index: 99999;
  flex: 1 1 auto;
  padding: 15px 0 0;
  text-align: center;
}
.card-body p{
  font-size: 15px !important;
  margin-bottom: 0 !important;
}
.card-body h5{
  color: #31898a;
  margin-bottom: 0;
}
.card-body a{
  border-radius: 0!important;
  width:100%;
  margin-top: 10px;
}
.sec_info{
  margin-top: 10px;;
}
.sec_info p{
  font-size: 18px !important;
  margin-bottom: 12px;
}
.sec_info p>svg{
  color: #0084FF;
}
.str_info{
  color: #0084FF;
}
.sec_one{
  padding: 12px;
  margin-bottom: 0;
  background: #9c9c9c;
  color: #fff;
  font-size: 16px;
}
.sec_tow{
  padding: 12px;
  margin-bottom: 0;
  background: #0084FF;
  color: #fff;
  font-size: 16px;
}
.sec_three{
  padding: 12px;
  margin-bottom: 0;
  background: #fcd053;
  color: #fff;
  font-size: 16px;
}
#wrapper {
  perspective: 1200;
  perspective-origin: 50% 310px;
  -webkit-perspective: 1200;
  -webkit-perspective-origin: 50% 310px;
  -moz-perspective: 1200;
  -moz-perspective-origin: 50% 310px;
}
.img_product{
  width: 100%;
  margin:auto;
}
.img_s{
  position: relative;
  z-index: 99;
  border: 2px solid rgb(82 82 82);
  opacity: .5;
  width: 55px;
  margin: 5px 1px;
  cursor: pointer;
}

.info_product .price{
  margin-top: 65px;
  font-size: 18px;
  border-right: 3px solid #0c8fee;
  padding-right: 10px;
  background-color: #f5f5f5;
  padding: 25px 10px 10px;
}
.price strong{
  color: #0c8fee;
}

.button {
  direction: rtl;
  width: 100%;
  margin: 0 auto ;
  text-align: center;
}

.resp-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

  /* ***************************** */
  .buy{
    margin-top: 15px;
  }
  .buy .alert{
    font-size: .9rem;
    direction: rtl;
  }
  .buy .form_head{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 15px;
    font-size: 18px;
    padding: 25px;
  }
  .alert {
      padding: 0.6rem 1rem;
    }
  .alert-dismissible {
      padding-right: 15px;
      padding-left: 3rem;
  }
  .alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    left:0;
    right: auto;
    z-index: 2;
    padding: 0.90rem 1rem;
    }
  .form-floating>label {
    right: 0;
    left: auto;
  }
  .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label{
      opacity: .65;
      transform: scale(.85) translateY(-0.5rem) translateX(1.15rem);
  }
  .form-select{
    font-size: .9rem;
    background-position: left .75rem center;
  }
  .form-floating>.form-select~label{
      transform: scale(.85) translateY(-.5rem) translateX(2.15rem);
  }
  .form-text {
      margin-top: .25rem;
      font-size: .775em;
      color: #22b4d4;
  }
  
  
  .offer_video{
    height: 200px;
    margin-bottom: 21px;
  }
  @media (min-width: 450px){
  
      .offer_video{
        height: 300px;
        margin-bottom: 21px;
      }
  }

/* ************************* */
.vbox-left {
  cursor: pointer;
    background-color: unset !important;
    position: fixed;
    bottom: 15px;
    top: unset !important;
    left: unset;
    height: fit-content;
    overflow: hidden;
    line-height: 28px;
    font-size: 40px;
    font-weight: 500;
    z-index: 99;
    display: flex;
    align-items: center;
}
.vbox-content{
  margin-bottom: 0 !important;
}
img.vbox-figlio{
  width: 400px !important;
    height: 350px!important;
}
.vbox-container {
  max-height: 100%;
  top: 15px;
}

.vbox-next , .vbox-prev {
  margin-top: 0;
}

.vbox-title {
  width: 100%;
  height: 55px;
  float: left;
  text-align: center;
  line-height: 28px;
  font-size: 20px;
  padding: 14px 50px;
  overflow: hidden;
  position: fixed;
  display: none;
  left: 0;
  z-index: 89;
}
.vbox-close {
  cursor: pointer;
  position: fixed;
  top: -8px;
  right: 5px;
  width: 50px;
  height: 50px;
  padding: 6px;
  display: block;
  background-position: 10px center;
  overflow: hidden;
  font-size: 50px;
  line-height: 1;
  text-align: center;
  z-index: 99;
}
.video_f{
  width: 100%;

}


.products-details-carousel .owl-nav,.products-details-carousel .owl-dots {
  margin-top: 5px;
  text-align: center;
}

.products-details-carousel .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd !important;
}

.products-details-carousel .owl-dot.active {
  background-color: #0563bb !important;
}

.count_select{
  transform: scale(.85) translateY(-.5rem) translateX(0.85rem)!important;
}
.add_type{
  transform: scale(.85) translateY(-0.5rem) translateX(1.70rem)!important;
}
.add_type2{
  transform: scale(.85) translateY(-0.5rem) translateX(2.90rem)!important;
}

#demo{
  margin-bottom: 0;
  font-size: 20px;
  color: red;
  direction: rtl;
  text-align: center;
  margin-top: 3px;
}
.f_strong{
  color: #FF0000;
  margin-bottom: 5px;
  text-align: center;

}
.f_info p{
 margin-bottom: 5px;
}
.f_info p strong{
  color: #0d6efdcc
}

.no_info{
  margin-bottom: 13px;
}
.offer_note{
  margin-bottom: 15px !important;
}
.araa{
  margin-bottom: 10px;
}


.media{
  text-align: center;
  position: relative;
  margin-top: 15px;
}
.media del{
  position: absolute;
  right: 0;
  font-size: 35px;
}



.videoo,.videoo2{
  width: 50%;
  margin-bottom: 5px;
}
.img_w{
  width: 50%;
}
@media (max-width: 450px){
  .videoo,.videoo2{
    width: 100%;
  }
  .img_w{
    width: 100%;
  }
}

.mute,.play{
  padding: 10px;
  float: left;
  margin-top: 5px;
}
.mute svg,.play svg{
  font-size: 20px;
}
.policy{
  color: #0084FF;
  text-decoration: none;
  font-weight: bold;
}
.mb-3 {
  margin-bottom: 1.25rem!important;
}