*{
    direction: ltr;
/*    #f5f5f7*/
}

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@800&display=swap');

body {
    overflow-x: hidden;
    font-family: cairo, PHILOSOPHER ;
     text-align: center;
     color: #222;
    
 }
.cardButton{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 150px;
    height: 150px;
}

.cardButtonSize{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        min-width: 65px;
    min-height: 65px;
    max-width: 150px;
    max-height: 150px;
    font-size: 24px;
}
.cardButtonBath{
        box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
        width: auto;
        height: auto;
    min-height: 50px;
}
.imgBath{
    height: 100;
    width: 100;
    margin-top: inherit;
}
.margin-auto{
    margin:auto !important; 
}

a {
 
    color: black !important; 
     text-decoration: none;
 }
 
 a:link {
     color: black !important;
     text-decoration: none;
 }
 a:hover{
     
     color: #018842;
 }
.inline-flex{
    display: inline-flex !important;
}
 .color-1{
    color: #018842 !important;
 }
 .color-bg-1{
     color: #fff!important;
      border: 5px !important;
    background-color: #018842 !important;
}.color-bg-1:hover{
    border: 2px #018842 solid !important;
    border-color: #018842 !important;
    color: #018842 !important;
    background-color: #fff !important;
    
    
}

.color-bg-2{
     color: #018842!important;
      border: 2px #018842 solid !important;
    border-color: #018842 !important;
    background-color: #fff !important;
}.color-bg-2:hover{
    border: 2px #018842 solid !important;
    border-color: #018842 !important;
    color: #018842 !important;
    background-color: #fff !important;
    
    
}


.color-bg-link{
    color: #018842!important;
      
    
}
.color-bg-link:hover{
   
    color: #018842 !important;
    background-color: #fff !important;
}
 .icon-img {
     margin: auto;
 }
 
 .card-border {
     border-width: 2px;
     border-radius: 15px;
     border-color: #018842;
     padding-top: 25px;
    
 }
.btn-start{
        width: 25%;
        height: 25%;
    padding: 0.5rem 1rem;
    font-size: 2.25rem !important;
    border-radius: 0.3rem;
    margin: 10px;
    background-color: #0188427d !important;
        border-radius: 200px !important;
    animation: spinStartBtn 10.2s linear infinite;
}
.btn-start:hover{
    border: none !important;
    color:#fff !important;
    background-color: #0188427d !important;
}



.navbar-btn{
    display: inline-flex;
        align-items: baseline;
}
.th{
    font-size: 13px;
}

.position-1{
   position: -webkit-sticky !important;
  position: sticky;
  top: 0;

  z-index:900;
}


.btn-lang{
    
    font-size: 12px !important;
   

}

.btn-lang-ul{
    
     position: absolute; 
     z-index: 1000; 
     display: none; 
     padding: .5rem 0; 
     margin: 0; 
     font-size: 7px; 
     color: #212529; 
     text-align: left; 
     list-style: none; 
     background-color: #fff; 
     background-clip: padding-box; 
     border: 1px solid rgba(0,0,0,.15); 
     border-radius: .25rem; 
    max-width: 3rem !important;
}

.hidden{
    margin: auto;
    display:none;
     

}


.img_card{
    height: 250PX;
    
}

.bg{
     color: #fff!important;
    
    background-color: #018842 !important;
}









.selectedCard{
    border-bottom: 5px solid #018842 !important;
}




.cd-cart__layout {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  height: 72px;
  width: 72px;
  border-radius: var(--radius);
  transition: height .4s .1s, width  .4s .1s, box-shadow .3s;
  transition-timing-function: cubic-bezier(.67,.17,.32,.95);
  background: var(--cd-color-3);
  box-shadow: 0 4px 30px rgba(#000, .17);
}

.cd-cart--open .cd-cart__layout {
  height: 100%;
  width: 100%;
  transition-delay: 0s;
}






#sectionbrand{
/*    position: absolute;*/
    bottom: 30px;
    
}








.cd-cart__trigger,
.cd-cart__content {
  position: fixed;
  bottom: 20px;
  right: 5%;
  transition: transform .2s;
}

.cd-cart--empty .cd-cart__trigger,
.cd-cart--empty .cd-cart__content { 
  transform: translateY(150px);
}


.cd-cart__product--deleted { 
  position: absolute;
  left: 0;
  width: 100%; 
  opacity: 0;
  animation: cd-item-slide-out .3s forwards;
}

@keyframes cd-item-slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}




/*popup*/

#show {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.modalOTP {
    
   
    background-color: white;
    display: none;
    position: fixed;
    top: auto;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%) translateY(-92%);
    width: 350px;
    height: 200px;
    justify-content: center!important;
    padding: 10px;
    color: black;
    border-bottom: 5px solid #018842;
    border-radius: 5px;
    box-shadow: 0 4px 80px 0 rgb(1 88 42), 0 6px 20px 0 rgb(1 88 42);

  
}

#seactionGroubItems{
    overflow-y: scroll;
    height: 700px;
}
.modaldelete{
    margin:0 auto;
    background-color: white;
    display: none;
    position:absolute;
    top: 75%;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%) translateY(-92%);
   
    justify-content: center!important;
    padding: 10px;
    color: black;
    border-bottom: 5px solid #018842;
    border-radius: 5px;
    box-shadow: 0 4px 80px 0 rgb(1 88 42), 0 6px 20px 0 rgb(1 88 42);

    
}.cause{
    margin: 2px!important;
    width: 30px;
    height:30px;
}
.form-check-label{
    font-size: 22px;
}
.cardCatogary{
    justify-content: center!important;
}
h1 {
    color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

#close {
  float: right;
  margin: 10px 10px 0 0;
  background-color: #018842;
  color: white;
  border: none;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
}


.sub-menu03{
 transform:translate(31px, 31px);
}


.textOnImageCard{
    margin-top: 20%;
    width: 100%;
    color: #018842;
   
    background: rgba(255, 255, 255, 0.8);
}
.CardBorderRadius{
    border-radius: 8px !important;
}

.div-scroll {
    margin-top: 5px;
    margin-bottom: 5px;
/*    display: flex;*/
/*    height:5vh;*/
    color: #222 !important;
    width:1000px;
    
     overflow-y: auto;
   
/*   box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);*/

    
}
/* width */
.div-scroll::-webkit-scrollbar {
  width: 1px;
}

/* Track */
.div-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey; 
  border-radius: 10px;
}
 
/* Handle */
.div-scroll::-webkit-scrollbar-thumb {
  background: #018842; 
  border-radius: 10px;
}

/* Handle on hover */
.div-scroll::-webkit-scrollbar-thumb:hover {
  background: #018842; 
}

.btn-cate {
    background-color: #f5f5f7 ;
    border-color: #f5f5f7 ;
    color: #222 ;
}

.display-grid {
     margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    height:auto;
    color: #222 !important;
    display: grid  ;
    height:85vh;
    justify-items: center;
    overflow-x: auto;
}
/* width */
.display-grid::-webkit-scrollbar {
  width: 5px;
    
}

/* Track */
.display-grid::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey; 
  border-radius: 10px;
}
 
/* Handle */
.display-grid::-webkit-scrollbar-thumb {
  background: #018842; 
  border-radius: 10px;
}

/* Handle on hover */
.display-grid::-webkit-scrollbar-thumb:hover {
  background: #018842; 
}

.width-input{
    
/*    width:  50px !important;*/
    height: 50px;
    margin: auto;
    text-align: center;
    font-size: 28px !important;
}

.grid-container {
  display: grid;
  row-gap: 50px;
  grid-template-columns: auto;
  
}
.labels{
    display: flex;
    justify-content: flex-end;
}



.animation-delay{
    animation-delay: 2s;
}

.cardItem{
        border-radius: 10px;
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
}



.navbarViewProdects{
        position: fixed;
        width: 100%;
        z-index: 1;
}













.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow
{
	min-height: 450px;
}
 /*
 *  STYLE 15
 */

#seactionGroubItems::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#seactionGroubItems::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#seactionGroubItems::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#018842),
									   to(#19911D),
									   color-stop(.6,#018842))
}










/* for inpu amount */
.ctrl1 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			border-bottom: 1px solid #D5DCE6;
			background-color: #fff;
			border-radius: 5px;
			font-size: 30px;
		}

	
	
	
		
		.ctrl-button {
			width: 90px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			cursor: pointer;
			background-color: #747474;
			-webkit-transition: background-color 100ms ease-in;
			transition: background-color 100ms ease-in;
		}
		.ctrl-button:hover {
			background-color: #90a2b0;
			-webkit-transition: background-color 100ms ease-in;
			transition: background-color 100ms ease-in;
		}
		.ctrl-button:active {
			background-color: #778996;
			-webkit-transition: background-color 100ms ease-in;
			transition: background-color 100ms ease-in;
		}
		.ctrl-button-decrement {
			border-radius: 5px   ;
		}
		.ctrl-button-increment {
			border-radius:    5px;
		}








.imagespin {
    justify-content: center;
    width: 64px;
    height: 64px;
  position: absolute;
}

.imagespin img {
  position: absolute;
  top: 50%;
  left: 50%;
}

.spin {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  
   animation: spin 15.2s linear infinite;
}



@keyframes spin {
  0% {
    transform: rotate(0);
    
  }
 
  50% {
    transform: rotate(2800deg);
  }
    100% {
    transform: rotate(0);
  }
   
}







.bgVideo{
      position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.divStartBtn{
     position: fixed;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
    height: 100%;
}








.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 100%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}