/* style button */

:root {
  --custom-font: 'Cairo', sans-serif;
  --secondary-font: 'Poppins', sans-serif;
  --primary-color: #4e75a8;
  --secondary-color: #201D24;
  --thirds-color: rgba(53, 53, 53, 0.821);
  --font-color: #fff;
  --table-button-color: rgba(93, 93, 93, 0.924);
  --add-button: rgba(9, 109, 9, 0.622);
  --clear-button: rgba(93, 93, 93, 0.622);
  --update-button: rgba(42, 42, 249, 0.622);
  --delete-button: rgba(164, 24, 24, 0.622);
  --btn1-card-color: #fdfdfdce;
  --btn2-card-color: #FFE79B;
  --btn3-card-color: #07396b;
  --btn4-card-color: #DD58D6;
}

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500&family=IBM+Plex+Sans+Arabic:wght@500;600&display=swap');

body{
  height: 100% !important;
}

main{
  min-height: 100% !important;
}

.bg-car-header{
color:black;
background-color:#80808082;

border-radius: 20px 0 0 20px ;
}
.card_carr-img{
justify-content: center;
margin-inline:auto ;

}
.text_line{
height: 25px;

}
.ui-card{
border: solid 1px rgb(206, 206, 207);
border-radius: 18px ;
width: 350px;
height: 475px !important;
margin-inline:auto ;
}
.img_content{
  border-radius: 18px 18px 0px 0px ;
width: 100%;
height: 100%;
}
.button-car{
padding: 12px;
width: 200px;
  height: 70px; 
}
.imag-car{
height: 300px;
width: 100%;

}
.detailscarcard{

text-decoration: none;

}

.label__side_mebu{
padding-top: 22px;
vertical-align:middle;
justify-content: center;
text-align: center;
}
@media only screen and (max-width:1604px) {
  .ui-card{width:300px;
  height: 420px !important;}
  .imag-car{width:100%;
  height: 250px;}
}
@media only screen and (max-width:765px) {
  .ui-card{width:350px;

  }
  .imag-car{width:100%;
  height: 250px;}
}
@media  only screen and (max-width:990px){
  .button {
float: right !important;
  }
}
/* Variables */
:root {
  --bg: #f3f8fa;
  --white: #fff;
  --orgenal: #32649e;
  --fontstyle:'Cairo', sans-serif;
}

/* Mixins */
@mixin transition($property, $duration, $ease) {
  transition: $property $duration $ease;
}
.descr-hed{

color: var(--orgenal);
  
}
.mony
{color: rgba(211, 181, 12, 0.842); 
font-size: 25px;

}
/* Reset */
* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

/* Body Styles */
/* body {
  font-family: , sans-serif;
  font-family: , sans-serif;
  font-family: , sans-serif;
  font-family: , sans-serif;
  font-family: 
font-family: var(--fontstyle);
  font-size: 1rem;
  line-height: 1.5;
font-weight: 500;
  margin: 0;

} */

.buttondet {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background-color: var(--orgenal);
  padding: 5px  !important;
  margin-left:15px ;
  color: #f3f8fa;
  font-size: inherit;
  font-family: var(--fontstyle);
  font-weight: 500;
  border-radius: 50px !important;
}
/*style of scrole*/
.offcanvas-body{
  cursor: pointer;
}

.offcanvas-body::-webkit-scrollbar{
  width: 5px;
  cursor: pointer;
}

.offcanvas-body::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px white;
  border-radius: 10px;
  cursor: pointer;
}

.offcanvas-body::-webkit-scrollbar-thumb{
  background:#3100b8bd ;
  border-radius: 10px; 
   cursor: pointer !important;
}

.offcanvas-body::-webkit-scrollbar-thumb:hover{
  background:#2806e77a ;
  border-radius: 10px;
  cursor: pointer !important;
}
/* ebd style scroile */
.buttondet.learn-more {
  width: 10rem;
  height: auto;
margin-bottom: 12px;

}
.button-text{

  text-decoration: none !important;
}
/*radio
*/

.input {
  -webkit-appearance: none;
 /* remove default */
  display: block;

  margin: 10px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
  background-color: hsla(0,0%,0%,.2);
  background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, rgb(7, 43, 61) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );
  background-repeat: no-repeat;
  -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
    -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
  outline: none;
}

.input:checked {
  -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
    -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}

.input:active {
  -webkit-transform: scale(1.5);
  -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}



/* The up/down direction logic */

.input,
.input:active {
  background-position: 0 24px;
}

.input:checked {
  background-position: 0 0;
}

.input:checked ~ .input,
.input:checked ~ .input:active {
  background-position: 0 -24px;
}
/* button*/
.button {
  font-family: inherit;
  display: inline-block;
  width: 9em;
  height: 2.6em;
  line-height: 0.5em;
  margin: 20px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--btn3-card-color);
  transition: color .5s;
  z-index: 1;
  font-size: 17px !important;
  border-radius: 6px !important;
  font-weight: 600;
  color: var(--btn3-card-color) !important;
   background-color:#fff !important;
  text-decoration: none;
  float: left;
}
.button:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--btn3-card-color) !important;
  height: 150px;
  width: 200px;
  border-radius: 50%;

}
.crose-buton{
  font-size: 40px;
    background-color: transparent;
    border: none;
    margin-bottom: 15px;
  }
  
.button:hover {
  color: var(--btn1-card-color) !important;
  background-color: var(--btn3-card-color);
}


.button:before {
  top: 100%;
  left: 100%;
  transition: all .7s;
}

.button:hover:before {
  top: -30px;
  left: -30px;
}

.button:active:before {
  background: var(--btn3-card-color);
  transition: background 0s;
}

.text_card{

  background-color: var(--font-color);
  border-radius:  0 0 18px 18px;

  }
.serch-filter{
width: 250px;
height: 45px;
border-radius: 18px;
border: solid 2px var(--btn3-card-color);
padding: 5px;

}
.serch-filter:focus{ 
 outline: none;

}
.icon-serch{
color: #07396b;

}
.search-btn{

color: #07396b;
border: none;
background-color: transparent;
font-size: 30px;
}
/*header car card*/
.header-card-car{
position: absolute;

z-index: 2;

}
.header-card-car img{
border-radius: 40px;
  width: 80px;
  height: 80px;
  
margin: 12px;
}
.name-company{

width: 240px !important;
padding-right: 6px !important;

}
.name-company label{
font-size: 20px;
  text-shadow: rgb(16, 18, 19) 3px 0px 0px, rgb(16, 18, 19) 2.83487px 0.981584px 0px, rgb(16, 18, 19) 2.35766px 1.85511px 0px, rgb(16, 18, 19) 1.62091px 2.52441px 0px, rgb(16, 18, 19) 0.705713px 2.91581px 0px, rgb(16, 18, 19) -0.287171px 2.98622px 0px, rgb(16, 18, 19) -1.24844px 2.72789px 0px, rgb(16, 18, 19) -2.07227px 2.16926px 0px, rgb(16, 18, 19) -2.66798px 1.37182px 0px, rgb(16, 18, 19) -2.96998px 0.42336px 0px, rgb(16, 18, 19) -2.94502px -0.571704px 0px, rgb(16, 18, 19) -2.59586px -1.50383px 0px, rgb(16, 18, 19) -1.96093px -2.27041px 0px, rgb(16, 18, 19) -1.11013px -2.78704px 0px, rgb(16, 18, 19) -0.137119px -2.99686px 0px, rgb(16, 18, 19) 0.850987px -2.87677px 0px, rgb(16, 18, 19) 1.74541px -2.43999px 0px, rgb(16, 18, 19) 2.44769px -1.73459px 0px, rgb(16, 18, 19) 2.88051px -0.838247px 0px;
color: #ffffff;
vertical-align:middle  ;
overflow-wrap: break-word;

display: -webkit-box;
-webkit-box-clamp:2 ;  
-webkit-box-orient: vertical; 
}
.around-shear{
  margin-top: 3px !important;
  justify-content: center;
  margin-left:5px !important ;
  width: 40px;
  height: 40px;
  
  }
  .shear-icon{
    font-size: large;
    background-color: var(--orgenal);color: var(--btn1-card-color);
    border-radius: 20px !important;
    padding-top: 9px;
    padding-right: 25px !important;
    padding-inline:auto !important ;
    margin-right:5px ;
    border: solid 2px gray;
    }
  
  .content-cards{
    padding-top:1px ;
    background-color: #ffffff;
    border-radius: 12px;
    margin-top: 40px !important;
    }
    .around-bord{
      padding-top:1px ;
      background-color: #ffffff;
      border-radius: 12px;
    box-shadow: 1px 1px 6px 0.1px gray;
    }
    @media(max-width:400px){
      .ui-card {
        width: 260px;
      }
    }