:root {
  --main-font: 'Cairo', sans-serif;
  --second-font: 'Almarai', sans-serif;
  --main-color: #AB0534; /* #ac0834; */
  --gray-color: #b8b2b321;
}

body {
  direction: rtl;
  font-family: var(--main-font);
}

/* h1 is treated always as page title */
h1, h2 {
  text-align: center;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  /* color: var(--main-color); */
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0px;
}

ol {
  padding: 0px;
}

.main-color {
  color: var(--main-color);
  a {
    color: var(--main-color);
  }
}
.nav-link {
  color: #fff;
  font-weight: 600;
  margin-right: 10px;
  margin-left: 10px;
}

.nav-link:hover {
  border-bottom: 3px solid #fff;
  color: #fff;
}

.site-logo {
  width: 200px;
  /* height: 120px; */
}

.bg-color {
  background-color: var(--main-color);
}

.container, .container-fluid {
  padding-left: 5rem;
  padding-right: 5rem;
}

.form-control {
  padding: .5rem 1rem;
}

.fa-check {
  color: green;
}

.fa-times {
  color: red;
}

.article-img {
  width: 100%;
  height: 200px;
}

.main-article-img {
  width: 100%;
  height: 300px;
}

.article-cover-image {
  width: 100%;
}

.article-list-img {
  width: 100%;
  height: 150px;
}

.custom-btn, .custom-btn:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
  border-radius: 10px;
}

.fa-play {
  color: #fff;
}

.pagination {
  justify-content: center;
}

.page-item:last-child .page-link, .page-item:first-child .page-link {
  border-radius: 0px;
}

.article-card {
  background-color: #fff;
  margin: 5px;
  padding: 15px;
}

.content-section {
  min-height: 1000px;
  background-color: #b8b2b321;
}

.custom-border {
  border-right: 5px solid var(--main-color);
}

.podcast-cover-image {
  width: 100%;
}

.podcast-list-img {
  width: 100%;
  height: 150px;
}

.main-podcast-img {
  width: 100%;
  height: 300px;
}

.podcast-img {
  width: 100%;
  height: 200px;
}

.program-cover-image {
  max-width: 100%;
}

.ad-image {
  width: 100%;
  max-height: 250px;
}

footer {
  background-color: var(--main-color);
  a {
    color: #fff;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 auto;
}

.grid-box {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
  min-height: 100px;
}

.links-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  font-size: x-large;
  /* height: 400px; */

  .fa-solid {
    color: var(--main-color)
  }
}

.secondary-nav {
  .fa-solid {
    color: var(--main-color);
  }

  a {
    font-size: small;
  }
}

.link-box {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease-in-out;
}

.link-box-content {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.link-box:hover {
  transform: scale(1.05);
}

.image-overlay-wrapper {
  position: relative;
  overflow: hidden;

  .article-img {
    width: 100%;
    display: block;
  }
}

.image-overlay-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgb(231 223 223 / 70%);
  padding: 5px 10px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
}

.artilcle-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 1.5rem;
}

.custom-btn-small {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
  border-radius: 999px;
  padding: 5px 5px;
}

.see-more-btn a {
  color: #fff !important;
  font-weight: bold;
}

.category-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: white !important;
  background-color: var(--main-color);
  padding: 10px;
  border-radius: 5px;
}

.made-by-footer {
  background-color: #000;
  color: var(--main-color);
  text-align: center;
  font-size: small;
}

.made-by-img {
  width: 70px;
  height: auto;
}
@media (max-width: 800px) {
  .container, .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 0px 5px;
  }

  .site-logo {
    width: 150px;
    height: auto;
  }

  h5.offcanvas-title a {
    color: #000;
  }

  .nav-link {
    /* color: var(--main-color); */
    color: #000;
  }

  .nav-link:hover {
    border-bottom: none;
  }

  .navbar-toggler {
    border: none;
  }

  #offcanvasNavbar {
    background-color: #b8b2b3;
  }

  .fa-bars {
    color: var(--main-color);
  }

  .custom-btn, .custom-btn:hover {
    border-radius: 25px;
  }

  .container-m {
    margin-top: 180px;
  }

  .navbar {
    background-color: #fff;
  }

  .article-card {
    background-color: var(--gray-color);
    margin: 5px;
    padding: 15px;
  }
  .content-section {
    min-height: 500px;
    background-color: transparent;
  }
  .ad-image {
    width: 100%;
    min-height: 90px;
  }
  .dropdown-menu {
    background-color: #b8b2b3;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .link-box {
    height: 150px;
  }

  .main-article-img, .article-img {
    height: inherit;
  }
}

/* Article status */
.new {
  background-color: white;
}

.published {
  background-color: green;
  color: white;
}

.follow_up {
  background-color: yellow;
}

.rejected {
  background-color: red;
}
.main-page-links {
  font-size: x-large;
  .fa-solid {
    color: var(--main-color)
  }
}