@font-face {
  font-family: Cairo-Bold;
  src: url('./fonts/cairo/Cairo-Bold.ttf');
}
@font-face {
  font-family: Cairo-SemiBold;
  src: url('./fonts/cairo/Cairo-SemiBold.ttf');
}
@font-face {
  font-family: Tajawal;
  src: url('./fonts/tajawal/Tajawal-Regular.ttf');
}
body { 
  padding-top: 4.5rem;
  font-family: Tajawal;
  color: #646464;
}
 body *, not(.btn){
  font-family: Tajawal;
  color: #646464;
 }

a{
  text-decoration: none;
  color:#000;
}

h1,h2,h3,h4,h5,h6{
  font-family: Cairo-Bold; 
}

h1{
  font-family: Cairo-Bold;  
  color: #000000;
}

.ff-cairo-bold{
  font-family: Cairo-Bold;  
}

h1,h2,h3,h4,h5,h6{
  color: #000000;
}

.btn, .btn *{
  font-weight: 700;
} 

.navbar .nav-item{
  padding-right: 10px;
  padding-bottom: 20px;
}

.navbar.bg-primary .nav-link{
  color: #FFFFFF;
  font-size: 16px; 
  padding: 0px 12px 7px 12px; 
  font-family: Cairo-SemiBold; 
}

.navbar.bg-primary .nav-link.active,.navbar.bg-primary .nav-link:hover{
  border-bottom: 2px solid #fff; 
}


.bg-primary{
  background-color: #D30000 !important;
}

.bg-primary * {
  color: #FFFFFF;
}
 
.text-primary{
  color: #D30000  !important;
} 

.border-primary{
  border-color: #D30000 !important;
}

.filter-primary { 
  filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7313%) hue-rotate(6deg) brightness(92%) contrast(110%);
}

.filter-echo-system-grey-30 { 
  filter: brightness(0) saturate(100%) invert(77%) sepia(0%) saturate(715%) hue-rotate(147deg) brightness(93%) contrast(96%);
}

.text-echo-system-black-100{
color: #000; 
}

.text-echo-system-grey-90{
  color: #393939 !important; 
}
 
.text-echo-system-grey-70,.text-echo-system-grey-70 *{
  color: #646464; 
}
 
.text-echo-system-grey-50,.text-echo-system-grey-50 *{
  color: #989898; 
}

.text-echo-system-grey-30{
  color: #B5B5B5; 
}

.text-echo-system-grey-10{
  color: #E4E4E4; 
}
.text-echo-system-grey-5{
  color: #EFEFEF; 
}
.text-treatery-secondary-1,.text-treatery-secondary-1 *{
  color: #136371;
}
.text-treatery-secondary-2{
  color: #FECC0F;
}
.text-echo-system-grey-10{
  color: #E4E4E4; 
}

.bg-echo-system-grey-10{
  background-color: #E4E4E4; 
}

.bg-echo-system-grey-5{
  background-color: #EFEFEF; 
}

.bg-primary-10{
  background-color: #FFB1B1;
}

.bg-treatery{
   background-color: #F0F2F2;
}

.text-green-50{
  color: #136371;
}
 
.clear-both{
  clear: both;
}
.spacer-200{
  display: block;
  height: 200px;
}

.spacer-128{
  display: block;
  height: 128px;
}

.spacer-64{
  display: block;
  height: 64px;
}

.spacer-40{
  display: block;
  height: 40px;
}

.spacer-32{
  display: block;
  height: 32px;
}

.spacer-16{
  display: block;
  height: 16px;
}

.spacer-8{
  display: block;
  height: 8px;
}


.fw-400,.fw-400 *{
  font-weight: 400;
}

.fw-700,.fw-700 *{
  font-weight: 700;
}

.fs-1,.fs-1 *{
  font-size: 48px !important; 
}

.fs-2,.fs-2 *{
  font-size: 32px !important; 
}

.fs-3,.fs-3 *{
  font-size: 24px !important; 
}

.fs-4,.fs-4 *{
  font-size: 20px !important; 
}

.fs-5,.fs-5 *{
  font-size: 18px !important; 
}

.fs-6,.fs-6 *{
  font-size: 16px !important; 
}

.fs-7,.fs-7 *{ 
  font-size: 14px !important; 
}

.fs-8,.fs-8 *{ 
  font-size: 12px !important; 
}

input[type=text].form-control, input[type=number].form-control,select.form-control{
  padding: 15px 20px;
  background-color: #EFEFEF;
  border-color: #EFEFEF;
  font-family: Tajawal;
}

.input-group .input-group-text{
  background-color: #EFEFEF;
  border-color: #EFEFEF;
}

.pg-echo-system-white{
  background-color: #FFFFFF; 
}

.text-echo-system-white,.text-echo-system-white *{
  color: #FFFFFF; 
}

#search input[type=text].form-control { 
  background-color: #EFEFEF;
  padding-left:45px; 
}

#search i{
  top: 16px;
  right: 15px;
  position: absolute;
  z-index: 1000;
  cursor: pointer;
  border: 0;
}

.form-control{
  background-color: #EFEFEF;
}
#winners #search input[type=text].form-control { 
  background-position: 13px 9px;
}
 
.card .card-title{
  color: #000;
  font-family: Cairo-Bold;
}

.text-treatery-secondary-1{
  color: #136371;
}

.text-primary-50{
  color: #D30000;

}

.border-primary{
  border-color: #D30000;
}

.icon-google-icon{
  content: url('./images/google-icon.svg')
}

.icon-chevron-left{
  content: url('./images/chevron-left.svg')
}
.icon-chevron-right{
  content: url('./images/chevron-right.svg')
}

.icon-favorite{
  content: url('./images/favorite.svg');
}

.icon-favorite-o{
  content: url('./images/favorite-o.svg');
}

.empty{
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(580%) hue-rotate(202deg) brightness(93%) contrast(91%);

}

.icon-favorite:hover,.icon-favorite.active{
  content: url('./images/favorite-o.svg')
}

.icon-trash{
  content: url('./images/trash.svg')
}
 


.icon-notification{
  content: url('./images/notification.svg')
}

.icon-favorite-navbar{
  content: url('./images/favorite-navbar.svg')
}

.icon-shopping-cart-navbar{
  content: url('./images/shopping-cart-navbar.svg')
}
 
.icon-shopping-cart{
  content: url('./images/shopping-cart.svg')
}

.icon-shopping-cart:hover,.icon-shopping-cart.active{
  content: url('./images/shopping-cart-full.svg')
}


.icon-whatsapp{
  content: url('./images/whatsapp.svg');
  width:23px;
} 

.icon-long-arrow{
  content: url('./images/long-arrow.svg');
   rotate: 180deg;
}

.icon-share{
  content: url('./images/share.svg'); 
}

.icon-footer-facebook{
  content: url('./images/footer-facebook.svg'); 
}

.icon-footer-instagram{
  content: url('./images/footer-instagram.svg'); 
}

.icon-footer-tumblr{
  content: url('./images/footer-tumblr.svg'); 
}

.icon-footer-twitter{
  content: url('./images/footer-twitter.svg'); 
}

.icon-footer-telegram{
  content: url('./images/footer-telegram.svg'); 
}

.icon-footer-whatsapp{
  content: url('./images/footer-whatsapp.svg'); 
}

.icon-footer-youtube{
  content: url('./images/footer-youtube.svg'); 
}

.icon-star-small{
  content: url('./images/star-small.svg'); 
}


.icon-heart-small{
  content: url('./images/heart-small.svg')
}

.icon-share-small{
  content: url('./images/share-small.svg')
}

.icon-message-small{
  content: url('./images/message-small.svg')
}
.icon-comment-submit{
  content: url('./images/comment-submit.svg')
}

.icon-comment-emotions{
  content: url('./images/comment-emotions.svg')
}

.icon-employee-group{
  content: url('./images/employee-group.svg')
}

.icon-global-partner{
  content: url('./images/global-partner.svg')
}
.icon-plus{
  content: url('./images/plus.svg');
  transition: .2s;
}

.icon-minus{
  content: url('./images/minus.svg');
  transition: .2s;
}

.icon-clock{
  content: url('./images/clock.svg')
}

.icon-alert-triangle{
  content: url('./images/alert-triangle.svg')
}

.icon-done-o{
  content: url('./images/done-o.svg')
}

.icon-arrow-up{
  content: url('./images/arrow-up.svg')
}

.icon-arrow-down{
  content: url('./images/arrow-down.svg')
}

.icon-arrow-right{
  content: url('./images/arrow-right.svg')
}

.icon-messeges-alert{
  content: url('./images/messeges-alert.svg')
}
.icon-no-messeges-alert{
  content: url('./images/no-messeges-alert.svg')
}

.icon-delete{
  content: url('./images/delete.svg')
}

.icon-camera{
  content: url('./images/camera.svg')
}
.icon-search{
  content: url('./images/search.svg')
}
.btn.btn-outline-primary .icon-plus,.btn.btn-outline-primary .icon-minus{
  filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7313%) hue-rotate(6deg) brightness(92%) contrast(110%);
}

.btn.btn-outline-primary:hover .icon-plus,.btn.btn-outline-primary:hover .icon-minus,
.btn.btn-outline-primary:active:focus .icon-minus,.btn.btn-outline-primary:focus .icon-minus,
.btn.btn-outline-primary:active:focus .icon-plus,.btn.btn-outline-primary:focus .icon-plus,
.btn:hover .icon-long-arrow.active{
  filter: inherit;
}

.btn:hover .icon-plus,.btn .icon-plus.active,.icon-long-arrow.active,.btn:hover .icon-minus,
.btn:hover .icon-long-arrow {
  filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7313%) hue-rotate(6deg) brightness(92%) contrast(110%);

  transition: .2s;
}



.btn-primary{
  background: #D30000; 
  border-color: #D30000; 
}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active:focus {
  background: #ffffff;
  border-color: #D30000; 
  color: #D30000;
}


.bg-primary .btn-outline-primary{ 
  background: #D30000;
  border-color: #ffffff; 
  color: #ffffff; 
}

.btn-outline-primary{ 
  background: #ffffff;
  border-color: #D30000; 
  color: #D30000;
}

.bg-primary .btn-outline-primary:hover,.bg-primary .btn-outline-primary:active:focus,.bg-primary .btn-outline-primary:focus {
  background: #ffffff;
  border-color: #ffffff; 
  color: #D30000;
}

.btn-outline-primary:hover,.btn-outline-primary:active:focus,.btn-outline-primary:focus {
  background: #D30000;
  border-color: #D30000; 
  color: #fff;
}
 

.bg-primary .btn-outline-primary:hover,.bg-primary .btn-outline-primary:active:focus,.bg-primary .btn-outline-primary:focus {
  background: #ffffff;
  border-color: #ffffff; 
  color: #D30000;
}
 
#promotions-tabs button.nav-link{
  color: #646464;
  font-size: 18px;
  border: 0;
}

#promotions-tabs button.nav-link:hover,#promotions-tabs button.nav-link.active{
  border-bottom: 2px solid #D30000;
  color: #D30000;
  background-color: inherit;
  font-weight: 700;
}

.row-card{
   flex-direction: row;
   border: 0; 
   border-radius: 16px;
}
.row-card img.card-img-top{
  width: 30%;
}
 
.bg-primary-50{
  background-color: #FFF0F0;
}

.text-secondary-red-75{
  color: #E36262;
}

.bg-title{
  background: url('./images/title.svg') no-repeat scroll 13px 15px;
  background-position: center; 
}


.carousel { 
  padding: 0 85px;
}

.carousel .item {   
  overflow: hidden;
}

.carousel-control-prev, .carousel-control-next {
  height: 44px;
  width: 30px;
  margin: auto 0;
  border-radius: 4px;
  opacity: 0.8;
}
.carousel-control-prev:hover, .carousel-control-next:hover { 
  opacity: 1;
}
.carousel-control-prev i, .carousel-control-next i {
  font-size: 36px;
  position: absolute;
  top: 50%;
  display: inline-block;
  margin: -19px 0 0 0;
  z-index: 5;
  left: 0;
  right: 0;
  color: #fff;
  text-shadow: none;
  font-weight: bold;
}
.carousel-control-prev {
  margin-left: 60px;
}
.carousel-control-next  {
  margin-right: 55px;
}    


.card.product .card-footer{
  border: 0;
  padding: 0;
  background-color: inherit;
}

.dropdown-toggle::after { 
  margin-left: 1.0em;
  vertical-align: 0.076em;
}

/* faqs and Messages*/

#faqs .accordion-item,#faqs .accordion-header,#faqs .accordion-button,
#messages .accordion-item,#messages .accordion-header,#messages .accordion-button{
  border-radius: 8px;
  border: 0;
  box-shadow:initial;
}

#faqs .accordion-button:active:focus,#messages .accordion-button:active:focus{
  border: 0; 
}



.accordion-button:not(.collapsed) {
  background-color: #ffffff ;
  color: initial; 
}

.shadow{
  box-shadow: 0 12px 64px rgb(156, 59, 5, 0.15) !important;
}


.modal .modal-title{
  max-width: 90%;
}

.modal .modal-header{
  background-color: #F0F2F2;
  justify-content: unset;
  display:block;
  position: relative;
}
.modal .btn-close{ 
  margin: auto; 
  right: 15px;
  position: absolute;
  top: 15px;
}
.modal .modal-footer{
  background-color: #F0F2F2; 
  display: unset !important;
}


#product .card  img.card-img-top{
  max-width: 20%;
  margin: 0 auto;
}

  
#product .product-details div[class^="col"]:nth-of-type(even) {
background-color:#F5F6FF;
}
 

.rate { 
  padding: 0 10px;
  transform: scale(2);
} 
.rate.readonly{
  padding: 0;
  transform: scale(1);
}
.rate:not(:checked) > input {
  position:absolute;
  top:-9999px;
}
.rate:not(:checked) > label {
  float:right;
  width:1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:30px;
  color:#ccc;
}

.rate.readonly:not(:checked) > label{
  font-size:25px;
  cursor:default;
}

.rate:not(:checked) > label:before {
  content: url('./images/star.svg');
}
.rate > input:checked ~ label {
  filter: brightness(0) saturate(100%) invert(29%) sepia(6%) saturate(6000%) hue-rotate(142deg) brightness(101%) contrast(86%); 
}
.rate:not(.readonly):not(:checked) > label:hover,
.rate:not(.readonly):not(:checked) > label:hover ~ label {
    filter: brightness(0) saturate(100%) invert(29%) sepia(6%) saturate(6000%) hue-rotate(142deg) brightness(101%) contrast(86%); 
}
.rate:not(.readonly) > input:checked + label:hover,
.rate:not(.readonly) > input:checked + label:hover ~ label,
.rate:not(.readonly) > input:checked ~ label:hover,
.rate:not(.readonly) > input:checked ~ label:hover ~ label,
.rate:not(.readonly) > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.cursor-pointer{
  cursor: pointer;
}

.scale-2{
  transform: scale(2);
}

.scale-3{
  transform: scale(3);
}

.scale-4{
  transform: scale(4);
}

#contact-us ::placeholder{
  color: #989898; 
}

 .title-bg{
  background-image: url("./images/title-bg.svg");
  background-repeat: no-repeat;
  background-position: center center;   
}

.border-8{
  border-width: 8px !important;
}

#home #cover .card{
  background-image: url("./images/bg-white.svg");
  background-repeat: no-repeat;
  background-position: center center;   
}

#home{
  background-image: url("./images/bg-red.png");
  background-repeat: repeat-x;
  background-position: top center;   
}

.btn{
  border-width: 2px !important;
}

.scale-075{
  transform: scale(.75);
} 

#home #winners,#home #download-app {
  background-image: url("./images/bg-red-big.png");
  background-repeat: no-repeat;  
  background-size: cover;
}

#profile-tabs{
  border-color: #D30000;
}

#profile-tabs button.nav-link{
  color: #D30000;
  font-size: 18px;
  border: 0;
}

#profile-tabs button.nav-link:hover,#profile-tabs button.nav-link.active{
  border-bottom: 5px solid #D30000;
  color: #D30000;
  background-color: inherit;
  font-weight: 700;
}


.form-floating label {
  left: 0;
  right: auto;
  padding: 1rem 0.25rem;
}

.form-floating label::after{
  background-color: inherit !important;
}

.form-floating input[type=text],.form-floating input[type=email],.form-floating input[type=password],
.form-floating select,.form-floating textarea{
  border: 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  color: #000;
  font-size: 16px;
}

#login .form-floating input[type=text],#login .form-floating input[type=email],
#login .form-floating input[type=password]{
  border: 0;
  background-color: #EFEFEF;
  border-radius: 8px;
  color: #000;
  font-size: 16px;
}

.card .form-floating input[type=text],.card .form-floating input[type=email],
.card .form-floating input[type=password],.card .form-floating select,.card .form-floating textarea,
.modal .form-floating input[type=text],.modal .form-floating input[type=email],
.modal .form-floating input[type=password],.modal .form-floating select,.modal .form-floating textarea,
.modal textarea{
  background-color: #EFEFEF; 
}

.form-check{
  background-color: #EFEFEF;
  border-radius: 8px;
  font-size: 16px;
  padding: 15px 5px;
}

.form-check .form-check-input{
  border: 2px solid #989898;
  background-color: #EFEFEF;
  padding: 10px; 
}

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

.form-check .form-check-input:checked {
  border: 2px solid #D30000;
  background-color: #D30000; 
}

.form-floating textarea.form-control{
  height: auto;
}

#exchange input[type=number]::-webkit-outer-spin-button,
#exchange input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#exchange input[type=number] {
  -moz-appearance: textfield;
}

#profile-tabs-content label .icon-clock,
#profile-tabs-content label .icon-alert-triangle,
#profile-tabs-content label .icon-done-o,
#profile-tabs-content .icon-arrow-right{
  margin-bottom: -8px;
}

#profile-tabs-content .modal .modal-header{
  background-color: #EFEFEF;
  border:0; 
}


#page-2-tabs,#page-3-tabs{
  margin: 0 auto;
}
#page-2-tabs button.nav-link,#page-3-tabs button.nav-link{ 
  margin: 0 auto;
  color:#646464; 
}

#page-2-tabs button.nav-link:hover,#page-2-tabs button.nav-link.active,
#page-3-tabs button.nav-link:hover,#page-3-tabs button.nav-link.active{
  border: 1px solid #D30000;
  border-radius: 5px;
  color: #D30000;
  background-color: #FFB1B1;
  font-weight: 700;
}

#home{
  padding-top: 125px;
}

.active>.page-link, .page-link.active { 
  background-color: #D30000 !important;
    border-color: #D30000 !important;
}

#articles .bg-echo-system-grey-5:hover,#articles .bg-echo-system-grey-5:active:focus{ 
  color: #fff;
  background-color: #D30000;
  transition: .2s;
}

#articles .bg-echo-system-grey-5:hover i,#articles .bg-echo-system-grey-5:active:focus i{ 
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(73deg) brightness(106%) contrast(100%);

  transition: .2s;
}
 
 

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (max-width: 576px) {   
  #home #cover .card {
    padding-bottom: 25px;
  } 

  .carousel {
    margin: auto auto;
    padding: 20px 20px;
  }

  .carousel-control-prev, .carousel-control-next { 
    width: 25px;
  }

  .carousel .card-body {
    padding: 5px 0px 5px 5px;
  } 

}

.navbar-toggler-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler{
  border-color: #fff !important;
  border-width: 2px;
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
  .navbar .container-fluid{
    padding: 0px 100px;
  }

  .navbar .nav-item { 
    padding-bottom: 0px;
  }

  #home{
    padding-top: 200px;
  }
}

@media (min-width:1281px) {  /* hi-res laptops and desktops */  }