@font-face {
    font-family: 'aso-font'; /* Name your font family */
    src: url('../fonts/IBMPlexSansArabic-Medium.ttf'); /* Locate the .ttf file within your directory*/
  }

body, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, q, blockquote,
s, span, strong, sub, sup, strong,
.h1, .h2, .h3, .h4, .h5, .h6{
    font-family: 'aso-font', sans-serif !important; /* Use the font family */
  }


.modal-dialog {
    max-width: 800px;
    margin: 100px auto;
}

.modal-body {
position:relative;
padding:0px;
}
.btn-close {
position:absolute;
right:-30px;
background-color: #fff;
top:0;
}

.carousel .carousel-control-prev {
  position: absolute;
  top: -58px;
  left: 0;
  width: 30px;
  font-size: 14px;
  opacity: 1 !important;
  background: #006f70 !important;
  color: #fff !important;
  padding: 5px 30px;
  border-radius: 30px;
  transition: 0.5s;
}

.carousel .carousel-control-prev:hover {
  background: #006f70 !important;
  color: #fff !important;
}

.carousel .carousel-control-next {
  position: absolute;
  top: -58px;
  right: 0;
  width: 30px;
  font-size: 14px;
  opacity: 1 !important;
  background: #006f70 !important;
  color: #fff !important;
  padding: 5px 30px;
  border-radius: 30px;
  transition: 0.5s;
}

.carousel .carousel-control-next:hover {
  background: #006f70 !important;
  color: #fff !important;
}

.col-6 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 992px) {
  .col-lg-2 {
      flex: 0 0 auto;
      width: 25%;
  }
}

.owl-item > div:after {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
width: 100% !important;
position: relative;
}

.active.center {
transform: scale(1) !important;
-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
}

.active {
transform: scale(.8) !important;
transition: .6s ease;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.custom_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-image: fill 0 linear-gradient(rgba(255, 255, 255, 0),#000);
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.custom_overlay_inner {
  position: absolute;
  left: 10px;
  /* right: 10px; */
  bottom: 50px;
}

.custom_overlay h4 a {
  position: relative;
  margin-bottom: 4px;
  font-size: 20px;
  color: #fff !important;
  background-color: #006f70;
  margin: 5px;
  padding: 5px;
  border-radius: 15px;
}

.custom_overlay h4 a:hover {

  color: #006f70 !important;
  background-color: #fff;

}



/*------------------- TABLET ------------------*/
@media only screen and ( min-width: 600px ) and ( max-width: 999px ) {
  .custom_overlay h4 { font-size: 80%;}

}

/*------------------- MOBILE ------------------*/
@media only screen and ( max-width: 599px ) {
  .custom_overlay h4 { font-size: 100%;}
}

.element {
  width: 200px;
  height: 200px;
  background-color: #2ecc71;
  clip-path: path('M40 1033H1766C1872.04 1033 1958 1118.96 1958 1225V1225H40V1033Z');
}

.active.center .post-img{
  position: relative;
  overflow: hidden;
}
.active.center .post-img img{
  width: 100%;
  height: auto;
  transform: scale(1);
  transition:transform 0.6s linear;
}
.active.center:hover .post-img img{
  transform: scale(1.1,1.1);
}

.navbar-brand{
    display: none !important;
}

.brand{
    display: block !important;
}

.display-block{
    display: block !important;
}

.navbar .navbar-nav .nav-item.active2{
    border-bottom: #006f70 solid 4px !important;
    color: #006f70 !important;
}

.navbar .navbar-nav .nav-item.active{
    border-bottom: #006f70 solid 4px !important;
    color: #006f70 !important;
}


@media only screen and ( min-width: 600px ) and ( max-width: 999px ) {
    .navbar-brand{
    display: block !important;
}
.brand{
    display: none !important;
}

}

/*------------------- MOBILE ------------------*/
@media only screen and ( max-width: 599px ) {
.navbar-brand{
    display: block !important;
}
.brand{
    display: none !important;
}
#topbar_social{
    display: none !important;
}
}

.second{
color:#006f70 !important;
a{
position:relative;
color:#353535 !important;
&:hover:after{
transform:scale(1);
}
}

a:after{
transform:scale(0);
content:'';
position:absolute;
height:2px;
width:100%;
bottom:-2px;
left:0;
transition:200ms ease-in;
background:#006f70 !important;
}
}

.fab:hover{
color: #006f70;
}

.btn{
margin: 0px !important;
border: none !important;
padding: 7px;
}

.navbar{
    padding: 0 !important;
}



/**********  ads component   *******/

.clip-box-1{
    z-index: 200;
    width: 100%;
    background-color: #faf6f9;
    clip-path: polygon(100% 100%,0% 100%,0% 92px,100% 0%);

    margin: 0 auto;
}

.clip-box-2{
    z-index: 200;
    width: 100%;
    background-color: #faf6f9;
    clip-path: polygon(0% 9.375%, 12.569% 9.375%, 88.819% 9.375%, 88.819% 9.375%, 89.157% 9.314%, 89.478% 9.136%, 89.777% 8.852%, 90.05% 8.471%, 90.293% 8.002%, 90.501% 7.456%, 90.67% 6.842%, 90.797% 6.169%, 90.876% 5.448%, 90.903% 4.688%, 90.903% 4.688%, 90.903% 4.688%, 90.93% 3.927%, 91.009% 3.206%, 91.135% 2.533%, 91.305% 1.919%, 91.513% 1.373%, 91.756% 0.904%, 92.029% 0.523%, 92.328% 0.239%, 92.648% 0.061%, 92.986% 0%, 100% 0%, 100% 90.625%, 30.972% 90.625%, 30.972% 90.625%, 30.634% 90.686%, 30.314% 90.864%, 30.015% 91.148%, 29.742% 91.529%, 29.499% 91.998%, 29.291% 92.544%, 29.121% 93.158%, 28.995% 93.831%, 28.916% 94.552%, 28.889% 95.313%, 28.889% 95.313%, 28.889% 95.313%, 28.862% 96.073%, 28.783% 96.794%, 28.656% 97.467%, 28.487% 98.081%, 28.279% 98.627%, 28.036% 99.096%, 27.763% 99.477%, 27.464% 99.761%, 27.143% 99.939%, 26.806% 100%, 0% 100%, 0% 9.375%);
    margin: 0 auto;
}

.parent {
    display:inline-block;
    max-height: 600px;
}
.child {

    position:abolute;
    margin-top:-50px;
}


@media screen and (min-width: 768px) and (min-width: 1024px) {
    .cta-block-with-image {
        padding-top: 90px;
    }
}
@media screen and (min-width: 768px) {
    .cta-block-with-image {
        margin-top: -70px;
        margin-bottom: -65px;
        padding-bottom: 0;
        padding-top: 50px;
    }
}
.cta-block-with-image {
    color: #FFFFFF;
    margin-top: -30px;
    margin-bottom: -30px;
    position: relative;
}

.cta-block-with-image__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 95%;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .cta-block-with-image__container {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-top: 0;
        padding-bottom: 0;
    }
}
.cta-block-with-image__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 72px;
    padding-bottom: 58px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

@media screen and (min-width: 1024px) {
    .cta-block-with-image__image {
        max-width: 640px;
    }
}
@media screen and (min-width: 768px) {
    .cta-block-with-image__image {
        padding: 0;
        margin: 0;
    }
}
.cta-block-with-image__image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 16px 15px 0;
    max-width: 530px;
}
@media screen and (min-width: 768px) {
    .cta-block-with-image__image .img-wrapper {
        margin-top: -130px;
        margin-bottom: -35px;
    }
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (min-width: 1200px) {
    .cta-block-with-image__content {
        padding: 0;
        margin: 70px 0 130px;
    }
}
@media screen and (min-width: 1024px) {
    .cta-block-with-image__content {
        max-width: 527px;
        width: 100%;
        margin: 0 auto 0 0;
    }
}
@media screen and (min-width: 768px) {
    .cta-block-with-image__content {
        padding-top: 40px;
        padding-bottom: 30px;
    }
}
/* .cta-block-with-image__content {
    max-width: 395px;
    margin: 0 auto;
} */

@media screen and (min-width: 768px) {
    .cta-block-with-image__title {
        text-align: start;
        margin-bottom: 24px;
    }
}

.cta-block-with-image__title {
    margin-bottom: 16px;
    text-align: center;
}
h1, .h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.1;
}
h2, .h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
}
h1, h2, h3, h4, h5 {
    margin-top: 0;
    letter-spacing: normal;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
.cta-block-with-image {
    color: #FFFFFF !important;
    margin-top: -30px;
    margin-bottom: -30px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .cta-block-with-image__description {
        text-align: start;
    }
}

.cta-block-with-image__description {
    text-align: center;
}

@media screen and (min-width: 1200px) {
    .cta-block-with-image__container .cta-block-with-image__btns--desktop {
        padding-bottom: 0;
    }
}

@media screen and (min-width: 768px) {
    .cta-block-with-image__container .cta-block-with-image__btns--desktop {
        padding-bottom: 60px;
    }
}
@media screen and (min-width: 768px) {
    .cta-block-with-image__btns--desktop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}
.cta-block-with-image__btns--desktop {
    display: none;
}
@media screen and (min-width: 768px) {
    .cta-block-with-image__btns {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        max-width: unset;
        margin: 40px 0 0;
    }
}
.cta-block-with-image__btns {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 395px;
    margin: 35px auto 0;
}


.navbar .navbar-nav .nav-item.active{
    transform: scale(1) !important;
-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
}