@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700;800;900&display=swap');

*{
      font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* banner | ansaf */
body{
    overflow: auto;
    overflow-x: hidden !important;
}

a{
    text-decoration: none;
    color: white !important;
}

.divbanner{
    width: 100%;
    height: 33vw;
}

#banner {
    background-size: cover;
}

/********** banner **********/
#banner header {
    overflow: hidden;
}

#banner header img {
    margin-top: 2rem;
    max-width: 200px;
/*
    max-width: 80px;
*/
}

.overflow-hidden {
    overflow: hidden !important;
}

.goBanner{
    color: white;
    font-size: 1rem;
    font-weight: 300;
}

.goBanner:hover{
    color: white;
    text-decoration:underline;
}

/* The title */
.title {
  font-weight: 700;
}

/* The description */
.desc {
  font-size: 1em;

}

/* Text-centering */
.title,
.desc,
.defi {
  text-align: center;
}

/* Categories section */
.defi{
  color: white;
  margin: 1.75em 0 .75em;
  margin-bottom: 1.75em;
}

.defi a {
    opacity: .7;
    color: white;
    text-decoration: none;
}

.defi a:hover {
    opacity: 1;
}

.defi h4{
    color: white;
    font-size: .825em;
    font-weight: 700;
    display: inline-block;
    margin: 0.25em 0.75em 0.75em;
}

.defi h4 a{
  background: transparent;
  font-weight: 400;
  color: white;
  text-decoration: none;
}


.conf {
  display: block;
  overflow: hidden;
  /* vertical-align: top !important; */

}

.filterDivf {
 vertical-align: top !important;
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.showf {
  display: block;
  background: transparent;
  border: none !important;
  outline: none !important;
}

.btnf{
    font-size: .825em;
    opacity: .7;
    color: white;
    text-decoration: none;
    display: inline-block;
    background: transparent;
    border: none !important;
    outline: none !important;
    cursor: pointer ;
}

 .btnf:hover{
      opacity: 1;
  }

.active {
        color: white;
        opacity: 1;
        font-size: .9em;
        display: inline-block;
        background: transparent;
        border: none !important;
        outline: none !important;;
}


/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 15px;
  column-fill: initial;
  vertical-align: top !important;
}

/* Masonry item */
.masonry .brick {
  width: 100% !important;
  margin-bottom: 10px;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
  white-space: nowrap;

}

.masonry .brick a{
    color: black !important;
    opacity: 1 !important;
    text-decoration: none;
}

/* Masonry image effects */
.masonry .brick img {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 1rem !important;
  transition: all .5s ease-in-out;
  backface-visibility: hidden;
  position: relative;
  object-fit: cover;
/* Remove Image flickering on hover*/
}

.masonry .brick:hover img {
  opacity: .80;
  color: black;
}

.masonry .brick h6{
    width: 100%;
    opacity: 0.90;
    font-size: 0.8rem;
    padding-top: 9px;
    padding-right: 10px;
    margin: 0;
    white-space: pre-wrap;
}

.brick:hover img{
    transform: scale(1.05);
    transition: transform 150ms linear
}

.brick:hover h6{
    opacity: 1;
    margin-bottom: 0px;
    color: black;
}

/*=====================================JQ===================================================*/
/* on Phone*/
@media only screen and (max-width: 768px) {
  .masonry {
    column-count: 2;
  }
     .divbanner{
        height: 80vw;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 3;
  }

}
/* Masonry on tablets */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 3;
  }

}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 3;
  }

}

@media (max-width: 575px) {
    #banner h1 {
        font-size: 3.6rem;
    }
    #banner header img {
    max-width: 150px;
/*
    max-width: 80px;
*/
}
     .divbanner{
        height: 80vw;
    }
}
@media (max-width: 768px) {
    .divbanner{
        height: 50vw;
    }
}
@media (max-width: 991px) {
    .divbanner{
        height: 40vw;
    }
}
@media (max-width: 1023px) {
    .divbanner{
        height: 40vw;
    }
}
@media (max-width: 1200px) {
    .divbanner{
        height: 33vw;
    }
}

:root {
    --white: #fff;
    --gray: #f5f5f5;
    --black1: #222;
    --black2: #999;
    --Polo-Blue:#eaeef7; /*gray*/
    --soft-blue:#547B9A;
    --Dark-moderate-blue:#4b6e8a;
    /*
        --Polo-Blue:#C5D7E5;
    */
}
/********** copyright **********/
#copyright {
    background: var(--soft-blue);
    padding: 2rem 3rem;
}

#copyright #social-media a {
    width: 40px;
    height: 40px;
    border-radius: 99%;
    background: var(--soft-blue);
    transition: .4s ease;
}

#copyright #social-media a i {
    color: var(--white);
    font-size: 1.2rem;
    line-height: 40px;
}

#copyright #social-media a:hover {
    background: var(--white);
    color: var(--soft-blue);
}

#copyright #social-media a:hover i {
    color: var(--soft-Blue);
}
ion-icon {
    font-size: 1.3rem;
}
.copyrightdiv{
    display: flex;
    align-items: center;
}
.policysection{
    text-align: left;
    color: #fff !important;
    font-size: 0.9rem;
}
.def{
    padding: 0 20px;
    text-align: center;
}

.fa {
    font-family: 'FontAwesome' !important;
}

#copyright {
    margin-bottom: 0 !important;
}

.page-link{
    color: #0275d8!important;
}

.page-item.active .page-link{
    color: white!important;
}