@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
.rtl {
    direction: rtl;
}

h2{
    font:bold 20px Arial, Helvetica, sans-serif;
    color:#222;
    margin-bottom:20px;
    margin-left:350px;
}
.button{
    position:relative;
}
.hoverMTop:after{
    position:absolute;
    bottom:100%;
    left:0;
    width:0;
    height:2px;
    background:#222;
    display:block;
    content:'';
    transition: width 0.5s ease-in-out;
}
.hoverMTop:hover:after{
    width:100%;
}
.hoverMebottom:after{
    position:absolute;
    top: 98%;
    left:0%;
    width: 0;
    height:3px;
    background:#ebeb00;
    display:block;
    content:'';
    z-index: 100%;
transition: width 0.3s ease-in-out;
}
.hoverMebottom:hover:after{
    width:100%;
}
.hoverMeleft:after{
    position:absolute;
    top:0%;
    left:100%;
    width:2px;
    height:0;
    background:#222;
    display:block;
    content:'';
    transition: height 0.5s ease-in-out;
}
.hoverMeleft:hover:after{
    height:100%;
}
.hoverMeRight:after{
    position:absolute;
    top:0%;
    right:100%;
    width:2px;
    height:0;
    background:#222;
    display:block;
    content:'';
    transition: height 0.5s ease-in-out;
}
.hoverMeRight:hover:after{
    height:100%;
}
/* can be done with just TW by extending
`
variants: {
extend: {
width: ['group-hover'],
height: ['group-hover'],
},
},
`
in tw.config.js
*/

.one:hover :last-child {
    width: 100%;
}

.two:hover  {
    width: 50%;
}

.three:hover  {
    height: 100%;
}
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0,-100%, 0);
    transform: translate3d(0,-100%, 0);
}
.search {
    animation: fadeIn linear 7s;
    -webkit-animation: fadeIn linear 7s;
    -moz-animation: fadeIn linear 7s;
    -o-animation: fadeIn linear 7s;
    -ms-animation: fadeIn linear 7s;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #f00;
}
/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}


  /* The dots/bullets/indicators */
.vid-btn{
    cursor: pointer;
    display: inline-block;
    transition: background-color 1ms ease-in-out;
}
.vid-btn-active , .vid-btn:active {
    color: white;
    background-color: #007798;
    -moz-box-shadow:    inset 0 0 5px #000000;
    -webkit-box-shadow: inset 0 0 5px #000000;
    box-shadow:         inset 0 0 5px #000000;;
    transition: 0.1s ease;
}

.shadow{
  -moz-box-shadow:    inset 0 0 5px ;
  -webkit-box-shadow: inset 0 0 5px ;
  box-shadow:         inset 0 0 5px ;
}

  /* Slideshow container */


.fade-in-image {
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.select2-selection__rendered {
    line-height: 38px !important;
    text-align: center !important;
    border-color: #d1d5db !important;
    /*width:302px;*/
}

.select2-container .select2-selection--single {
    height: 38px !important;
    text-align: center !important;
    border-color: #d1d5db !important;
    /*width: 302px;*/
}
.select2-selection__arrow {
    height: 38px !important;
    text-align: center !important;
    border-color: #d1d5db !important;
    /*left: 270px*/
}