/*This site designed by Ramez Noshey ( Ramez_Leeno@hotmail.com , 01002439858 )*/

:root {
    --c-light-man : #ecf0f1;
    --c-dark-man : #34495e;
    --c-darker-man : #2c3e50;
    --c-white-pure : #FFFFFF;
    --c-white-light : #F7F7F7;
    --c-white-dark : #eeeeee;
    --c-grey-light : #ccd0d9;
    --c-grey-dark : #aab2bd;
    --c-grey2-light : #656d78;
    --c-grey2-dark : #434a54;
    --c-black-light : #2b2b2b;
    --c-black-dark : #262626;
    --c-black-pure : #000000;


    
    --c-blue-light : #19b5fe;
    --c-blue-dark : #2980b9;
    --c-green-light : #2ecc71;
    --c-green-dark : #2d5036;
    --c-red-light : #eb1c1c;
    --c-red-dark : #c91a1a;
    --c-orange-light : #e67e22;
    --c-orange-dark : #d35400;
    --c-ruby-light : #d9334b;
    --c-ruby-dark : #bf263b;
    --c-purble-light : #8067b8;
    --c-purble-dark : #6a50a7;
    
    --c-light-man-h : #d4d4d4;
    --c-dark-man-h : #293644;
    --c-darker-man-h : #1d2833;
    --c-white-pure-h : #f0f0f0;
    --c-white-light-h : #e7e7e7;
    --c-white-dark-h : #dadada;
    --c-grey-light-h : #c2c3c5;
    --c-grey-dark-h : #9a9fa7;
    --c-grey2-light-h : #5b6066;
    --c-grey2-dark-h : #32363b;
    --c-black-light-h : #1d1d1d;
    --c-black-dark-h : #161515;
    --c-black-pure-h : #000000;
    --c-blue-light-h : #179bd8;
    --c-blue-dark-h : #286892;
    --c-green-light-h : #25ac5d;
    --c-green-dark-h : #366b43;
    --c-red-light-h : #c74132;
    --c-red-dark-h : #9c3226;
    --c-orange-light-h : #ca6f1e;
    --c-orange-dark-h : #cf6219;
    --c-ruby-light-h : #a12c3e;
    --c-ruby-dark-h : #dd4156;
    --c-purble-light-h : #604e88;
    --c-purble-dark-h : #9875eb;
}


html,
body {
    background-color: var(--c-white-dark);
    margin: 0px;
    scroll-behavior: smooth;
}


*::-webkit-scrollbar:not(.table) {
    display: none;
  }
  
*:not(.table) {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
  }

.allload {
    position: fixed;
    z-index: 3000;
    background-color: var(--c-white-pure);
    width: 100%;
    height: 100%;
    top: 0;
}

.includedbut {
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 0;
    background-color: var(--c-white-light);
}

.carousel-control-prev{
    width: 80px;
    transition: all 0.5s;
    font-size: 20px;
    opacity: 0.2;
}
.carousel-control-prev:hover{
    width: 50px;
    opacity: 0.8;
    color: var(--c-orange-light);
    background-color: var(--c-white-light);
    border-right: var(--c-orange-light) thin solid;
}
.carousel-control-next{
    width: 80px;
    font-size: 20px;
    opacity: 0.2;
    transition: all 0.5s;
}
.carousel-control-next:hover{
    width: 50px;
    opacity: 0.8;
    color: var(--c-orange-light);
    background-color: var(--c-white-light);
    border-left: var(--c-orange-light) thin solid;
}


select {
    text-align-last: center;
    direction: rtl;
}

.mar1 {
    margin: 1px;
}

.navbar-nav {
    margin: 0 auto;
    text-align: center;
}

.navbar-nav>li {
    display: inline-block;
    float: none;
}

.navbar {
    background-color: var(--c-orange-light);
    transition: all 0.5s;
    padding: 2px;
}

.navbar2 {
    background-color: var(--c-black-light);
    padding: 0px;
    opacity: 0.9;
    transition: all 0.5s;
}

.navbar-brand {
    display: none;
}

.nav-link {
    margin-right: 5px;
    color: var(--c-white-light);
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
}

.nav-link:hover {
    color: var(--c-white-pure);
}

.nav-link:before {
    content: '';
    position: absolute;
    z-index: 2000;
    top: 40px;
    left: 0px;
    width: 0px;
    height: 1px;
    background-color: var(--c-black-light);
    transition: all .5s ease;
}

.nav-link:hover:before {
    width: 100%;
}

.dropdown-menu {
    background-color: var(--c-white-light);
    border-radius: 3px;
    font-size: 15px;
    margin-top: 5px;
}

.dropdown-menu-center {
    left: 50%;
    right: auto;
    text-align: center;
    transform: translate(-50%, 0);
  }

.dropdown-item {
    background-color: var(--c-white-light);
    margin-right: 10px;
    border-radius: 2px;
    color: var(--c-grey2-dark);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
    padding-left: 5px;
    padding-right: 5px;
}

.dropdown-item:hover {
    background-color: var(--c-black-dark);
    color: var(--c-white-light);
    padding-left: 15px;
    padding-right: 15px;
}

.selectlocation {
    height: 30px;
    width: 97px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    color: var(--c-black-pure);
    background-color: var(--c-white-light);
}

.category-bar {
    margin-top: 60px;
}

.txt-light-all{
    color: #eeeeee;
}

.bg-light-all{
    color: #eeeeee;
}

.txt-dark-all{
    color: #262626;
}

.bg-dark-all{
    color: #262626;
}

.orangetxt {
    color: var(--c-orange-light);
}
.orangebg {
    background-color: var(--c-orange-light);
}
.bg-light-man {
    background-color:  var(--c-light-man);
}
.bg-dark-man {
    background-color:  var(--c-dark-man);
}
.bg-darker-man {
    background-color:  var(--c-darker-man);
}
.bg-white-pure{
	background-color:  var(--c-white-pure);
}
.bg-white-light{
	background-color:  var(--c-white-light);
}
.bg-white-dark{
	background-color:  var(--c-white-dark);
}
.bg-grey-light{
	background-color:  var(--c-grey-light);
}
.bg-grey-dark{
	background-color:  var(--c-grey-dark);
}
.bg-grey2-light{
	background-color:  var(--c-grey2-light);
}
.bg-grey2-dark{
	background-color:  var(--c-grey2-dark);
}
.bg-black-light{
	background-color:  var(--c-black-light);
}
.bg-black-dark{
	background-color:  var(--c-black-dark);
}
.bg-blue-light{
	background-color:  var(--c-blue-light);
}
.bg-blue-dark{
	background-color:  var(--c-blue-dark);
}
.bg-green-light{
	background-color:  var(--c-green-light);	
}
.bg-green-dark{
	background-color:  var(--c-green-dark);
}
.bg-red-light{
	background-color:  var(--c-red-light);
}
.bg-red-dark{
	background-color:  var(--c-red-dark);
}
.bg-orange-light{
	background-color:  var(--c-orange-light);
}
.bg-orange-dark{
	background-color:  var(--c-orange-dark);
}
.bg-ruby-light{
	background-color:  var(--c-ruby-light);
}
.bg-ruby-dark{
	background-color:  var(--c-ruby-dark);
}
.bg-purble-light{
	background-color:  var(--c-purble-light);
}
.bg-purble-dark{
	background-color:  var(--c-purble-dark);
}
.txt-light-man {
    color: var(--c-light-man);
}
.txt-dark-man {
    color: var(--c-dark-man);
}
.txt-darker-man {
    color: var(--c-darker-man);
}
.text-white-pure{
	color: var(--c-white-pure);
}
.text-white-light{
	color: var(--c-white-light);	
}
.text-white-dark{
	color: var(--c-white-dark);	
}
.text-grey-light{
	color: var(--c-grey-light);	
}
.text-grey-dark{
	color: var(--c-grey-dark);	
}
.text-grey2-light{
	color: var(--c-grey2-light);	
}
.text-grey2-dark{
	color: var(--c-grey2-dark);	
}
.text-black-light{
	color: var(--c-black-light);	
}
.text-black-dark{
	color: var(--c-black-dark);	
}
.text-blue-light{
	color: var(--c-blue-light);	
}
.text-blue-dark{
	color: var(--c-blue-dark);	
}
.text-green-light{
	color: var(--c-green-light);	
}
.text-green-dark{
	color: var(--c-green-dark);	
}
.text-red-light{
	color: var(--c-red-light);	
}
.text-red-dark{
	color: var(--c-red-dark);	
}
.text-orange-light{
	color: var(--c-orange-light);	
}
.text-orange-dark{
	color: var(--c-orange-dark);	
}
.text-ruby-light{
	color: var(--c-ruby-light);	
}
.text-ruby-dark{
	color: var(--c-ruby-dark);	
}
.text-purble-light{
	color: var(--c-purble-light);	
}
.text-purble-dark{
	color: var(--c-purble-dark);	
}

.border-white-pure{
	border: var(--c-white-pure) thin solid;
}
.border-white-light{
	border: var(--c-white-light) thin solid;
}
.bg-white-dark{
	border: var(--c-white-dark) thin solid;
}
.border-grey-light{
	border: var(--c-grey-light) thin solid;
}
.border-grey-dark{
	border: var(--c-grey-dark) thin solid;
}
.border-grey2-light{
	border: var(--c-grey2-light) thin solid;
}
.border-grey2-dark{
	border: var(--c-grey2-dark) thin solid;
}
.border-black-light{
	border: var(--c-black-light) thin solid;
}
.border-black-dark{
	border: var(--c-black-dark) thin solid;
}
.border-blue-light{
	border: var(--c-blue-light) thin solid;
}
.border-blue-dark{
	border: var(--c-blue-dark) thin solid;
}
.border-green-light{
	border: var(--c-green-light) thin solid;
}
.border-green-dark{
	border: var(--c-green-dark) thin solid;
}
.border-red-light{
	border: var(--c-red-light) thin solid;
}
.border-red-dark{
	border: var(--c-red-dark) thin solid;
}
.bg-red-dark{
	border: var(--c-red-dark) thin solid;
}
.border-orange-light{
	border: var(--c-orange-light) thin solid;
}
.border-orange-dark{
	border: var(--c-orange-dark) thin solid;
}
.border-ruby-light{
	border: var(--c-ruby-light) thin solid;
}
.border-ruby-dark{
	border: var(--c-ruby-dark) thin solid;
}
.border-purble-light{
	border: var(--c-purble-light) thin solid;
}
.border-purble-dark{
	border: var(--c-purble-dark) thin solid;
}

.bg-h-light-man {
    background-color: var(--c-light-man);
transition: all 0.3s;
}
.bg-h-dark-man {
    background-color: var(--c-dark-man);
transition: all 0.3s;
}
.bg-h-darker-man {
    background-color: var(--c-darker-man);
transition: all 0.3s;
}
.bg-h-white-pure{
	background-color: var(--c-white-pure);
transition: all 0.3s;	
}
.bg-h-white-light{
	background-color: var(--c-white-light);
transition: all 0.3s;	
}
.bg-h-white-dark{
	background-color: var(--c-white-dark);
transition: all 0.3s;	
}
.bg-h-grey-light{
	background-color: var(--c-grey-light);
transition: all 0.3s;	
}
.bg-h-grey-dark{
	background-color: var(--c-grey-dark);
transition: all 0.3s;	
}
.bg-h-grey2-light{
	background-color: var(--c-grey2-light);
transition: all 0.3s;	
}
.bg-h-grey2-dark{
	background-color: var(--c-grey2-dark);
transition: all 0.3s;	
}
.bg-h-black-light{
	background-color: var(--c-black-light);
transition: all 0.3s;	
}
.bg-h-black-dark{
	background-color: var(--c-black-dark);
transition: all 0.3s;	
}
.bg-h-blue-light{
	background-color: var(--c-blue-light);
transition: all 0.3s;	
}
.bg-h-blue-dark{
	background-color: var(--c-blue-dark);
transition: all 0.3s;	
}
.bg-h-green-light{
	background-color: var(--c-green-light);
transition: all 0.3s;	
}
.bg-h-green-dark{
	background-color: var(--c-green-dark);
transition: all 0.3s;	
}
.bg-h-red-light{
	background-color: var(--c-red-light);
transition: all 0.3s;	
}
.bg-h-red-dark{
	background-color: var(--c-red-dark);
transition: all 0.3s;	
}
.bg-h-orange-light{
	background-color: var(--c-orange-light);
transition: all 0.3s;	
}
.bg-h-orange-dark{
	background-color: var(--c-orange-dark);
transition: all 0.3s;	
}
.bg-h-ruby-light{
	background-color: var(--c-ruby-light);
transition: all 0.3s;	
}
.bg-h-ruby-dark{
	background-color: var(--c-ruby-dark);
transition: all 0.3s;	
}
.bg-h-purble-light{
	background-color: var(--c-purble-light);
transition: all 0.3s;	
}
.bg-h-purble-dark{
	background-color: var(--c-purble-dark);
transition: all 0.3s;	
}
.bg-h-light-man :hover{
    background-color: var(--c-light-man-h);
}
.bg-h-dark-man :hover{
    background-color: var(--c-dark-man-h);
}
.bg-h-darker-man :hover{
    background-color: var(--c-darker-man-h);
}
.bg-h-white-pure:hover{
	background-color: var(--c-white-pure-h);
}
.bg-h-white-light:hover{
	background-color: var(--c-white-light-h);
}
.bg-h-white-dark:hover{
	background-color: var(--c-white-dark-h);
}
.bg-h-grey-light:hover{
	background-color: var(--c-grey-light-h);
}
.bg-h-grey-dark:hover{
	background-color: var(--c-grey-dark-h);
}
.bg-h-grey2-light:hover{
	background-color: var(--c-grey2-light-h);
}
.bg-h-grey2-dark:hover{
	background-color: var(--c-grey2-dark-h);
}
.bg-h-black-light:hover{
	background-color: var(--c-black-light-h);
}
.bg-h-black-dark:hover{
	background-color: var(--c-black-dark-h);
}
.bg-h-blue-light:hover{
	background-color: var(--c-blue-light-h);
}
.bg-h-blue-dark:hover{
	background-color: var(--c-blue-dark-h);
}
.bg-h-green-light:hover{
	background-color: var(--c-green-light-h);
}
.bg-h-green-dark:hover{
	background-color: var(--c-green-dark-h);
}
.bg-h-red-light:hover{
	background-color: var(--c-red-light-h);
}
.bg-h-red-dark:hover{
	background-color: var(--c-red-dark-h);
}
.bg-h-orange-light:hover{
	background-color: var(--c-orange-light-h);
}
.bg-h-orange-dark:hover{
	background-color: var(--c-orange-dark-h);
}
.bg-h-ruby-light:hover{
	background-color: var(--c-ruby-light-h);
}
.bg-h-ruby-dark:hover{
	background-color: var(--c-ruby-dark-h);
}
.bg-h-purble-light:hover{
	background-color: var(--c-purble-light-h);
}
.bg-h-purble-dark:hover{
	background-color: var(--c-purble-dark-h);
}
.bigdth-modal{
	max-width: 1900px !important;
}
.rounded10{
    border-radius: 10px 10px 10px 10px;
}
.rounded20{
    border-radius: 20px 20px 20px 20px;
}
.rounded30{
    border-radius: 30px 30px 30px 30px;
}
.rounded40{
    border-radius: 40px 40px 40px 40px;
}

.rndsendrch{
    border-radius: 15px 15px 0px 15px;
}

.rndrecvch{
    border-radius: 15px 15px 15px 0px;
}

#main_pg_div,#big_nav,#small_nav,#btns_spacer{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.sessdata {
    position: fixed;
    z-index: 1100;
    color: var(--c-grey2-dark);
    top: 10px;
    right: 10px;
    transition: all 0.3s;
}

.sessdata:hover {
    color: var(--c-white-dark);
    right: 30px;
}

.allbody {
    margin-top: 40px;
}

input {
    text-align: center;
}

.txt10 {
    font-size: 10px;
}

.txt11 {
    font-size: 11px;
}
.txt12 {
    font-size: 12px;
}

.txt14 {
    font-size: 14px;
}
.txt16 {
    font-size: 16px;
}
.txt18 {
    font-size: 18px;
}
.txt20 {
    font-size: 20px;
}
.txt22 {
    font-size: 22px;
}
.txt24 {
    font-size: 24px;
}
.txt26 {
    font-size: 26px;
}
.txt28 {
    font-size: 28px;
}

.color1 {
    background-color: var(--c-white-light);
}

.color2 {
    background-color: var(--c-black-light);
}

.color3 {
    background-color: var(--c-grey2-light);
}

.color4 {
    background-color: var(--c-white-light);
}

.color5 {
    background-color: var(--c-blue-dark);
}

.color6 {
    background-color: var(--c-grey2-dark);
}

.btnsmallall {
    font-size: 12px;
}

.colortxt1 {
    color: var(--c-white-light);
}

.colortxt2 {
    color: var(--c-black-light);
}

.colortxt3 {
    color: var(--c-black-dark);
}

.colortxt4 {
    color: var(--c-blue-dark);
}

.colortxt5 {
    color: var(--c-grey-light);
}
.shdbox{
    box-shadow: 0px 5px 5px var(--c-grey-light);
}
.colorbtn1 {
    background-color: var(--c-white-light);
    color: var(--c-black-light);
    transition: all 0.3s;
}

.colorbtn1:hover {
    background-color: var(--c-black-light);
    color: var(--c-white-light);
}

.colorbtn2 {
    background-color: var(--c-black-light);
    color: var(--c-white-light);
    transition: all 0.3s;
}

.colorbtn2:hover {
    background-color: var(--c-black-light);
    color: var(--c-black-light);
}

.imageheight {
    height: 180px;
}

.image_main_height {
    height: 720px;
}

.headertitlesize {
    font-size: 14px;
}

.ahovforpro {
    transition: all 0.3s;
}

.ahovforpro:hover {
    box-shadow: 3px 3px 5px var(--c-grey-light);
}

.imagespre.is-loading {
    .loadingimg{
      background: #eee;
      background: linear-gradient(110deg, #dddddd 8%, #f5f5f5 18%, #dddddd 33%);
      border-radius: 5px;
      background-size: 200% 100%;
      animation: 1.5s shine linear infinite;
    }
  }

.imagespre.is-loadingmoredark {
    .loadingimgmoredark{
      background: #eee;
      background: linear-gradient(110deg, #dddddd 8%, #f5f5f5 18%, #dddddd 33%);
      border-radius: 5px;
      background-size: 200% 100%;
      animation: 1.5s shine linear infinite;
    }
  }
  
  @keyframes shine {
    to {
      background-position-x: -200%;
    }
  }


.color8btn {
    color: var(--c-black-dark);
    background-color: var(--c-white-light);
    transition: all 0.3s;
}

.color8btn:hover {
    color: var(--c-white-light);
    background-color: var(--c-orange-light);
}
.color7btn {
    color: var(--c-blue-light);
    background-color: var(--c-white-light);
    transition: all 0.3s;
}

.color7btn:hover {
    color: var(--c-white-light);
    background-color: var(--c-blue-light);
}
.color6btn {
    color: var(--c-white-light);
    background-color: var(--c-blue-light);
    transition: all 0.3s;
}

.color6btn:hover {
    color: var(--c-white-light);
    background-color: var(--c-blue-dark);
}

.color5btn {
    color: var(--c-white-light);
    background-color: var(--c-grey2-light);
    transition: all 0.3s;
}

.color5btn:hover {
    color: var(--c-white-light);
    background-color: var(--c-grey2-dark);
}

.color4btn {
    color: var(--c-white-light);
    background-color: var(--c-orange-dark);
    transition: all 0.3s;
}

.color4btn:hover {
    color: var(--c-white-light);
    background-color: var(--c-red-dark);
}

.color3btn {
    color: var(--c-white-light);
    background-color: var(--c-black-light);
    transition: all 0.3s;
}

.color3btn:hover {
    color: var(--c-white-light);
    background-color: var(--c-black-light);
}

.color1btn {
    color: var(--c-dark-man);
    background-color: var(--c-white-light);
    transition: all 0.2s;
}

.color1btn:hover {
    color: var(--c-dark-man);
    background-color: var(--c-white-pure);
    border: var(--c-dark-man) thin dashed;
}

.colorhoverborder {
    transition: all 0.2s;
}

.colorhoverborder:hover {
    border: var(--c-dark-man) thin dashed;
}


.color2btn {
    color: var(--c-darker-man);
    background-color: var(--c-white-light);
    transition: all 0.2s;
}

.color2btn:hover {
    color: var(--c-darker-man);
    background-color: var(--c-white-pure);
    border: var(--c-darker-man) thin dashed;
}
.colorbtn3 {
    background-color: #bf263b;
    color: #dadfe1;
    transition: all 0.3s;
}

.colorbtn3:hover {
    background-color: #d9334b;
    color: #e7e7e7;
    padding-left: 20px;
    padding-right: 20px;
}

.outlinerhov {
    transition: all 0.2s;
}

.outlinerhov:hover {
    border: var(--c-dark-man) thin dashed;
}

.outlinerhovlight {
    transition: all 0.2s;
}

.outlinerhovlight:hover {
    border: var(--c-white-light) thin dashed;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1002;
    top: 0;
    right: 0;
    background-color: var(--c-black-dark);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#des {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--c-ruby-light);
    position: absolute;
    left: 0;
    color: var(--c-white-light);
    font-size: 12px;
    width: 40px;
    z-index: 100;
}

#newpro{
    top: 0px;
    position: absolute;
    z-index: 100;
    left: 0px;
}



#soldd {
    padding: 10px;
    border-radius: 5px;
    background-color: var(--c-grey-dark);
    position: absolute;
    right: 5px;
    color: var(--c-white-light);
}

#lastpp {
    padding: 10px;
    border-radius: 5px;
    background-color: var(--c-grey-dark);
    position: absolute;
    right: 5px;
    color: var(--c-grey2-dark);
}

#free {
    padding: 10px;
    border-radius: 5px;
    background-color: var(--c-grey2-dark);
    position: absolute;
    left: 5px;
    color: var(--c-white-light);
}

.logosmainbar {
    position: relative;
}

.logomaintxt {
    position: absolute;
    bottom: 0px;
}

.owl-theme .owl-nav {
    width: 100%;
    position:absolute;
}

.owl-theme .owl-nav .owl-next {
position:absolute;
height: 100%;
left: 0;
top: 0;
opacity: 0.5 !important;
}

.owl-theme .owl-nav .owl-prev {
position:absolute;
height: 100%;
right: 0;
top: 0;
opacity: 0.5 !important;
}

.imgcliserv{
position: absolute;
z-index: 100;
bottom: 0;
opacity: 0.9;
}



.looprowsup {
    color: var(--c-black-dark);
    background-color: var(--c-white-light);
    transition: all 0.3s;
}

.looprowsup:hover {
    color: var(--c-black-dark);
    background-color: var(--c-grey-light);
}

.looprowsdwn {
    color: var(--c-black-dark);
    background-color: var(--c-grey-light);
    transition: all 0.3s;
}

.looprowsdwn:hover {
    color: var(--c-black-dark);
    background-color: var(--c-grey-light);
}


#added {
    display: none;
}

#numm {
    display: none;
}

#result {
    width: 100%;
    padding: 10px;
    height: 50vh;
    overflow-y: scroll;
    border: rgb(20, 20, 20) thin dashed;
}


#result::-webkit-scrollbar {
    display: none;
}


#result {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#chatboxx {
    background: none repeat scroll 0 0 var(--c-white-light);
    border: 1px solid var(--c-grey-light);
    border-radius: 2px 2px 2px 2px;
    color: var(--c-grey2-light);
    height: 35px;
    margin-top: 10px;
    outline: medium none;
    padding: 10px 10px;
    width: 65.5%;
    height: 60px;
    font-size: 20px;
    font-weight: 300
}

#chatboxx:focus {
    background: none repeat scroll 0 0 var(--c-white-pure);
    border-color: var(--c-grey2-light);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
    color: var(--c-grey-light);
    content: "";
}


.martopmob{
    margin-top: 85px;
}
.martopmob2{
    margin-top: 115px;
}
/*This site designed by Ramez Noshey ( Ramez_Leeno@hotmail.com , 01002439858 )*/

@font-face {
font-family:ar_light;
src:url('fonts/arlight.ttf');
font-weight:normal;
font-style:normal;
}

@font-face {
font-family: ar_bold;
src:url("fonts/arbold.ttf");
font-weight:normal;
font-style:normal;
}

@font-face {
font-family: elham;
src:url("fonts/Elham.ttf");
font-weight:normal;
font-style:normal;
}

.txtfontlight {
    font-family: ar_light;
}

.txtfontbold {
    font-family: ar_bold;
}

.txtfontlightbtn {
    padding-top: 10px !important;
    font-family: ar_light;
}
.txtfontboldbtn {
    padding-top: 10px !important;
    font-family: ar_bold;
}

.txtfontarial{
    font-family: Arial, Helvetica, sans-serif;
}

.carolimage {
    width: 330px;
    height: 330px;
}

.promainclassmarg{
    margin-top:-20px;
    border-radius:20px;
}

.main_wid{
    width: 100%;
}

.bignav_wid{
    width: 20%;
}

.bignavsp_wid{
    width: 20%;
}

.main_wid_sm{
width: 100%;
}
.smallnav_wid{
width: 50px;
}
.smallnavsp_wid{
width: 50px;
}

.rep_fields{
    width: 100%;
}

@media (min-width: 576px) {
    .carolimage {
        width: 500px;
        height: 500px;
    }

    .selectlocation {
        height: auto;
        width: auto;
        padding-top: auto;
        padding-bottom: auto;
        font-size: 14px;
        color: var(--c-blue-light);
    }
    .searchhome{
        position:static;
        z-index:999;
        background-color: var(--c-white-light);
        
    }
    .martopmob{
        margin-top: 0;
    }
    .martopmob2{
        margin-top: 0;
    }

    .main_wid{
        width: 100%;
    }

    .bignav_wid{
        width: 20%;
    }
    
    .bignavsp_wid{
        width: 20%;
    }
}

@media (min-width: 768px) {
    .imageproductres {
        width: 320px;
        height: 320px;
    }
    .promainclassmarg{
        margin-top:0px;
        border-radius:20px;
        z-index:0;
    }

    .main_wid{
        width: 75%;
    }
    .bignav_wid{
        width: 25%;
    }
    .bignavsp_wid{
        width: 25%;
    }
    
    .rep_fields{
        width: 150px;
    }
}

@media (min-width: 992px) {
    .imageproductres {
        width: 400px;
        height: 400px;
    }
    .container{
        max-width: 1100px;
    }

    .carousel-control-prev{
        width: 80px;
        transition: all 0.5s;
        font-size: 30px;
        opacity: 0.2;
    }
    .carousel-control-prev:hover{
        width: 50px;
        opacity: 0.8;
        color: var(--c-orange-light);
        background-color: var(--c-white-light);
        border-right: var(--c-orange-light) thin solid;
    }
    .carousel-control-next{
        width: 100px;
        font-size: 30px;
        opacity: 0.2;
        transition: all 0.5s;
    }
    .carousel-control-next:hover{
        width: 50px;
        opacity: 0.8;
        color: var(--c-orange-light);
        background-color: var(--c-white-light);
        border-left: var(--c-orange-light) thin solid;
    }
    .proimgsid{
        transition: all 0.2s;
        border-radius:20px;
        width: 60px;
        height: 60px;
    }
    
    .proimgsid:hover{
        width: 65px;
        height: 65px;
        box-shadow: 0px 8px 8px var(--c-grey2-light);
    }

    .main_wid{
        width: 80%;
    }
    .bignav_wid{
        width: 20%;
    }
    .bignavsp_wid{
        width: 20%;
    }
}

@media (min-width: 1200px) {
    .imageproductres {
        width: 520px;
        height: 520px;
    }
    .container{
        max-width: 1200px;
    }

    .main_wid{
        width: 82%;
    }
    .bignav_wid{
        width: 18%;
    }
    .bignavsp_wid{
        width: 18%;
    }
}

@media (min-width: 1350px) {
    .imageproductres {
        width: 520px;
        height: 520px;
    }
    .container{
        max-width: 1400px;
    }

    .main_wid{
        width: 85%;
    }
    .bignav_wid{
        width: 15%;
    }
    .bignavsp_wid{
        width: 15%;
    }
    

}

@media (min-width: 1500px) {

    .main_wid{
        width: 88%;
    }
    .bignav_wid{
        width: 12%;
    }
    .bignavsp_wid{
        width: 12%;
    }


}

@media (min-width: 1900px) {


}