@font-face {
  font-family: 'readex_1';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/static/ReadexPro-Regular.ttf');
}

@font-face {
  font-family: 'readex_Bold';
  src: url('../fonts/static/ReadexPro-Bold.ttf');
}

@font-face {
  font-family: 'readex_SemiBold';
  src: url('../fonts/static/ReadexPro-SemiBold.ttf');
}

@font-face {
  font-family: 'readex_Medium';
  src: url('../fonts/static/ReadexPro-Medium.ttf');
  font-weight: 500;
}

* {
  font-family: readex_1;
}

body {
  direction: rtl;
  color: #434343;
  font-size: 1rem;
}

:root {
  --Basic_color: #CAB15B;
  --secondary-color: #0076B1;
  --body-color: #434343;
}

h1 {
  color: #434343;
}

.nav-link {
  color: var(--body-color);
  /* font-weight: 500; */
  font-size: 1.1rem;
  font-family: readex_Medium;
}

.nav-link i {
  color: var(--Basic_color);

}

.logo {
  height: 100px;
}

#main {
  margin-left: 10%;
  margin-right: 10%;
}

#main_post {
  margin-top: 2%;
  margin-bottom: 4%;
}

.cover {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  /* background-position: 50% 50%; */
  border-radius: 10px;
  background-position: center !important;
}

#main_post .cover {
  height: 550px;
  float: none;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  /* box-shadow: inset 0 -4em 14em rgb(0 0 0 / 87%), 0 0 0 2px rgb(58 52 52 / 0%), 0.3em 0.3em 1em rgb(0 0 0 / 30%); */
}

#main_post .title {
  color: white;
  width: 38%;
  margin: 5%;
}

/* #main_post .title h4 {
  padding-bottom: 5%;
  border-bottom: 3px solid;
  border-image: linear-gradient(to left, var(--Basic_color) 26%, transparent 25%) 100% 1;
} */
#main_post .title h4 a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 3px solid var(--Basic_color);
  width: 100px;
}

#slider .card {
  border: none;
  margin: auto;
  margin-top: 8%;
  margin-bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#slider .card-link {
  color: var(--secondary-color);
  text-decoration: none;
  /* font-weight: 700; */
  /* border-bottom: 2px solid; */
  /* border-image: linear-gradient(to left, var(--secondary-color) 69px, transparent 30%) 100% 1; */
  padding-bottom: 13px;
  position: relative;
}

#slider .card-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--secondary-color);
  width: 30px;
}

#slider .card img {
  height: 50px;
  object-fit: contain;
}

#slider .card-body {
  padding-bottom: 0;
  padding-top: 0;
  padding-bottom: 6%;
  padding-right: 0;
}

#slider1 .card-text {
  padding-top: 15px;
}

.card-body a {
  text-decoration: none;
}

.card-title {
  color: var(--Basic_color);
  font-weight: lighter;
}

.more-btn {
  background-color: var(--Basic_color);
  color: white;
  text-decoration: none;
  padding: 5px;
  width: max-content;
  font-size: 1rem;
  border-radius: 10px;
  /* font-weight: 500; */
  font-family: readex_Medium;
}

.more-btn:hover {
  color: gray;
  text-decoration: none;
}

#next {
  height: 33px;
  top: 15%;
  left: -35px;
  z-index: 1;
  background-position: center;
  background-size: contain;
  width: 100px;
  background-repeat: no-repeat;
  cursor: pointer;
}

#prev {
  display: none;
  height: 33px;
  top: 15%;
  left: -35px;
  z-index: 10;
  background-position: center;
  background-size: contain;
  width: 100px;
  background-repeat: no-repeat;
  cursor: pointer;
}

#slider2 {
  display: none;
}

#slider1 {}

#daily {
  padding-top: 5%;
}

#daily .card {
  border: none;
}

#daily .card .cover {
  height: 300px;
}

#daily p {
  padding-top: 1%;
  font-weight: lighter;
  padding-bottom: 1%;

}

#daily h1 {

  font-family: readex_Medium;
}

#daily .daily_title {
  font-family: readex_Medium;
}

#daily .card-link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 100;
  /* border-bottom: 2px solid; */
  /* border-image: linear-gradient(to left, var(--secondary-color) 69px, transparent 30%) 100% 1; */
  padding-bottom: 13px;

  position: relative;
}

#daily .card-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--secondary-color);
  width: 30px;
}

#daily .card-body {
  padding-right: 0;
  padding-top: 20px;
  padding-bottom: 0;
}

#radio {
  margin-top: 10%;
  margin-bottom: 10%;
}

#radio .cover {
  height: 400px;
  /* float: none;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  direction: ltr;
  text-align: center;
  padding-left: 13%; */
}

#radio .title {
  color: white;
  width: 20%;
  margin: 5%;
  display: none;
}

#radio .title h4 {
  position: relative;
  padding-bottom: 5%;

  border-bottom: none;

  /* border-image: linear-gradient(to right, var(--Basic_color) 43px, transparent 40%) 100% 1; */


}

#radio .title h4::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  border-bottom: 3px solid var(--Basic_color);
  width: 60%;
}

#about h5 {
  margin-bottom: 3%;
  position: relative;
  padding-bottom: 2%;
}

#about h5:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 2px solid black;
  width: 10%;
}

/* #about:first-child p{text-align: justify;
  padding-left: 40px;} */
#about p {
  text-align: justify;
}

.aboutus-p {
  padding-left: 40px;
}

/* ========slider============= */
.mySlides {
  display: none;
}

/* img {vertical-align: middle;} */

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  border-radius: 10px;
  background-color: var(--Basic_color);
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #e7dfdf66;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #ffffffa8;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 0.1s;
}

.mySlides img {
  width: 100%;
  /* width: 518px; */
  border-radius: 9px;
  height: 400px;
  object-fit: cover;
}

.circles {
  text-align: center;
  bottom: 3%;
  right: 39%;
  position: absolute;
}

.in_the_file_title {
  font-size: 1.6rem;
  color: var(--Basic_color);
}

.in_the_file_title:before {
  border-bottom: 0px !important;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {

  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

#slider-political {
  margin-top: 3%;
  color: white;
}

#slider-political h1 {
  margin-bottom: 3%;
  font-family: readex_Medium;
}

#full_width_background_mobile {
  display: none;
}

#slider-political .slider-text {
  padding-right: 3%;
  padding-left: 4%;
}

#slider-political a h2 {
  margin-bottom: 20px;
  position: relative;
  /* width: 85%; */
  padding-top: 14%;
  padding-bottom: 4%;
  color: white;
}

#slider-political a {
  text-decoration: none;
  color: white;
}

#slider-political h2:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 2px solid rgb(255, 255, 255);
  width: 36%;
}

.slider-text .more-btn {

  border: 2px solid white;
}

.slider-text h6 {
  margin-bottom: 11%;
  /* font-weight: 600; */
  margin-top: 24px;
  font-family: readex_SemiBold;
}

.slider-text p {
  font-weight: 100;
  padding-top: 2px;
}

.max-lines {
  display: block;
  /* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

#full_width_background {
  width: 100%;
  height: auto;
  min-height: 400px;
  margin-top: 5%;
  margin-bottom: 5%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  color: white;
  direction: ltr;
  text-align: center;
  padding-bottom: 1%;
  position: relative;
  display: flex;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

#full_width_background .title {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
}

#full_width_background .title h1 {
  font-size: 2.3vw;
  color: white;
}

#full_width_background .title h5 {
  position: relative;
  border-top: none;
  padding-top: 1%;
  margin-top: 1%;
}

#full_width_background .title h5::before {
  content: '';
  position: absolute;
  top: 0;
  border-top: 3px solid white;
  width: 8%;
  left: 46%;
}

#opacity-cover {
  height: 200px;
  margin-top: 5%;
  /* background-color: #43434319; */
  width: 100%;
  bottom: 0;
  position: absolute;
}

#footer {
  text-align: center;
  padding-bottom: 5%;
  margin-top: 5%;
}

#footer .logo {
  height: 140px;
}

#footer .more-btn {
  padding: 8px;
}

#footer .fa {
  padding: 6px;
  border-radius: 50%;
  width: 27px;
  text-align: center;
  font-size: 16px;
  text-decoration: none !important;
  background: #434343;
  color: white;
}

#footer ul {
  padding-left: 3%;
  padding-top: 12px;
  /* margin-bottom: 5%; */
  margin-top: 0;
}

#footer ul li {
  margin-right: 10px;
}

#daily-page {
  direction: rtl;
  margin-top: 4%;
  padding-left: 10%;
  padding-right: 10%;
}

#daily-page .title {
  font-family: readex_SemiBold;
}

#daily-page .card {
  border: none
}

#daily-page img {
  border-radius: 10px;
  height: 220px;
  object-fit: cover;
}

#daily-page .card-body {
  padding-right: 0;
  padding-bottom: 9%;
}

#daily-page .card-body h6 {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.pagination {
  --bs-pagination-color: var(--Basic_color);
}

.page-link {
  border-radius: 50%;
  border: none;
}

.default .page-link {
  color: inherit;
}

.active_page .page-link {
  border: 2px solid var(--Basic_color);
}

/* overwrite Bootstrap default css */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: 50%;
}

#prev-pg,
#next-pg {
  border: none;
  border-radius: 0px;
}

.page-item {
  margin-left: 5px;
}

#political {
  direction: rtl;
  margin-top: 4%;
  padding-left: 4%;
  padding-right: 4%;
}

#political .cover {
  height: 650px;
  float: none;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  box-shadow: inset 0 -4em 14em rgb(0 0 0 / 87%), 0 0 0 2px rgb(58 52 52 / 0%), 0.3em 0.3em 1em rgb(0 0 0 / 30%);
}

.page-title {
  font-family: readex_Medium;
}

#political .card {
  border: none;
  width: 22rem;
}

#political img {
  border-radius: 10px;
}

#political.card-body {
  padding-right: 0;
  padding-bottom: 9%;
}

#political .card-body h6 {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

#political .title {
  color: white;
  width: 100%;
  margin: 0;
  padding-bottom: 2%;
  padding-right: 11px;
}

.link_style {
  color: inherit;
  text-decoration: none;
}

.link_style:hover {
  color: inherit;
}

#political .title h1 {
  padding-bottom: 1%;
  color: white;
}

#political .card {
  border: none;
}

#political img {
  border-radius: 10px;
  height: 220px;
  object-fit: cover;
}

#political .card-body {
  padding-right: 0;
  padding-bottom: 9%;
}

#political .card-body h6 {
  color: var(--secondary-color);
}


#political .title p {
  color: var(--Basic_color);
  /* font-weight: 700; */
  font-size: 1.3rem;
  font-family: readex_SemiBold;
}

#line {

  border-bottom: 6px solid var(--Basic_color);

  display: none;
}

#single_article {
  margin-top: 7%;
  /* margin: auto; */
  padding-left: 10%;
  padding-right: 10%;
}

#single_article .title {
  position: relative;
  padding-bottom: 2%;
  font-family: readex_Medium;
}

#single_article .title:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 1px solid black;
  width: 10%;
}

#single_article h6 {
  /* font-weight: 500; */
  color: var(--Basic_color);
  font-size: 1.2rem;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 5px;
  margin-bottom: 9px;
  font-family: 'readex_1';
}

#single_article a {

  text-decoration: none;
}

#single_article .date {
  color: var(--secondary-color);
  font-weight: 100;
  font-size: 0.8rem;
}

#single_article .cover {
  height: 500px;
  margin-top: 4%;
}

#single_article .more-btn {
  background-color: var(--Basic_color);
  color: white;
  text-decoration: none;
  padding: 1px 5px 4px 5px;
  width: max-content;
  font-size: 0.9rem;
  border-radius: 10px;
  /* font-weight: 500; */
  font-family: readex_Medium;
}

.article_text {
  padding: 4% 13% 4% 13%;
  /* font-weight: lighter; */
}

.article_text p {
  line-height: 2.6rem;
  font-size: 1.2rem;
  text-align: justify;
}

#writer {
  margin-top: 5%;
  display: flex;
}

#writer .cover {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin: auto;
  margin: 16px;
}

#writer .desc {
  margin: auto;
  padding-left: 6%;
  margin-right: 0;
  margin-bottom: 2%;
  /* margin-top: 2%; */
}

.desc h3 {
  color: var(--Basic_color);
  margin-bottom: 3%;
}

.desc h6 {
  color: var(--secondary-color) !important;
  font-weight: 100 !important;
  font-size: 1rem;
  margin-bottom: 2%;
}

.desc h5 {
  color: var(--Basic_color);
  padding-bottom: 15px;
}

.desc a h5 {
  color: var(--Basic_color);
  padding-bottom: 15px;
  text-decoration: none;
}

.desc a {
  text-decoration: none;
}

.desc p {
  font-weight: 100;
  font-size: 1rem;
  padding-left: 9%;
  line-height: 2rem;
  text-align: justify;
}

#posters {
  direction: rtl;
  margin-top: 4%;
  padding-left: 10%;
  padding-right: 10%;
}

#posters .card {
  border: none;
}

#posters .card-img-top {
  height: 367px;
  width: 87%;
  margin-bottom: 11%;
  border-radius: 4%;
}

#posters .cover {
  height: 550px;
  width: 31%;
  margin-right: 2%;
  margin-bottom: 2%;
}

#photographers {
  direction: rtl;
  margin-top: 4%;
  padding-left: 10%;
  padding-right: 10%;
}

#photographers .card-img-top {
  height: 220px;
  width: 220px;
  border-radius: 50%;
  margin: auto;
}

#photographers .card {

  border: none;
  margin: auto;
}

#photographers .card-body {
  text-align: center;
}

.photo_Slides {
  display: none;
  cursor: pointer;
}

#Gallery {
  position: relative;
  margin-bottom: 2%;
}


/* Next & previous buttons */
.Galleryprev,
.Gallerynext {
  text-decoration: unset;
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #ffffff78;
  font-size: 35px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.Gallerynext {
  left: 13px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.Galleryprev:hover,
.Gallerynext:hover {
  /* background-color: rgba(0, 0, 0, 0.8); */
  color: var(--Basic_color);
}

/* Number text (1/3 etc) */
#Gallery .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
#Gallery .caption-container {
  text-align: center;
  background-color: #ffffff;
  padding: 0;
  color: white;
}

#Gallery .row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
/* #Gallery .column {
  float: left;
  width: 16.66%;
} */
#Gallery .column {
  float: left;
  width: 8.69%;
  margin-right: 5px;
  padding-bottom: 5px;
}

/* Add a transparency effect for thumnbail images */
#Gallery .demo2 {
  opacity: 0.6;
  height: 80px;
  width: 110px;
}

#Gallery .active,
#Gallery .demo:hover {
  opacity: 1;
}

#Gallery img {
  vertical-align: middle;
  height: 800px;
  /* object-fit: cover; */
}

/* Position the image container (needed to position the left and right arrows) */
#Gallery .container {
  position: relative;
}

#Gallery .cursor {
  cursor: pointer;
}

.cards-container {
  display: flex;
  justify-content: center;
  padding-right: 10px;
}

.writer_name {
  color: black !important;
}

.photo_Slides img {

  border-radius: 10px;
}

.dropdown-toggle::after {
  color: var(--Basic_color);
  vertical-align: unset;
}

#slider2 .card-text {
  padding-top: 15px;
}

::selection {
  background: var(--Basic_color);
  /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: var(--Basic_color);
  /* Gecko Browsers */
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-item {
  text-align: right;
  padding: 4px 10px 0 0;
  color: var(--body-color);
}

#editions {
  direction: rtl;
  margin-top: 4%;
  padding-left: 4%;
  padding-right: 4%;
}

#editions .card {
  border: none;
  text-align: right;
  padding-right: 0;
  display: inline-flex;
  width: 24%;
}

#editions .card-body {
  padding-right: 0;
  /* padding-bottom: 9%; */
}

#editions .card-body h6 {
  color: var(--secondary-color);
}

#editions .card-title {
  color: inherit;
  font-weight: lighter;
  padding-bottom: 10px;
  margin-bottom: 13px;
}

#editions .card-title a {
  text-decoration: none;
  border-bottom: 2px solid #434343;
  padding-bottom: 10px;
}

#editions .more-btn {
  background-color: var(--Basic_color);
  color: white;
  text-decoration: none;
  padding: 2px 7px 2px 7px;
  width: max-content;
  font-size: 1rem;
  margin-left: 3px;
  border-radius: 5px;
  letter-spacing: 5px;
  margin-bottom: 4%;
  margin-top: 4%;
}

#editions .disactive {
  background-color: #ccc;
}

.editions_cnt {
  display: none;
  padding-right: 0;
}

.years {
  cursor: pointer;
}

.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f8f9fa;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1rem;
  color: #434343;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#mobile_nav {
  display: none;
}

.copyright {
  position: absolute;
}

.pages {
  text-align: center;
  justify-content: center;
  display: flex;
  margin-bottom: 5%;
  margin-top: 5%;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

.dropdown-toggle {
  --bs-btn-padding-y: 0.475rem;
  color: var(--body-color) !important;
  font-family: 'readex_Medium';
}

.myImg7 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

.myImg7:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal7 {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 11;
  /* Sit on top */
  padding-top: 0px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content7 {
  margin: auto;
  display: block;
  height: 80%;
  max-width: 700px;
  margin-top: 7%;
}

/* Add Animation */
.modal-content7,
#caption7 {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
.close7 {
  position: absolute;
  top: 80px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

.close7:hover,
.close7:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#cat img {
  height: auto;
  margin-left: 22px;
  vertical-align: middle;
  float: left;
}

.cat-cnt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5%;
  flex-direction: column;
}


/* Fixed sidenav, full height */
/* .sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;

  overflow-x: hidden;

} */



/* On mouse-over */
.sidenav a:hover,
.dropdown-btn:hover {
  color: #434343;
  border: none;
  background-color: #9acd3200;
}

/* Main content */
.main {
  margin-left: 200px;
  /* Same as the width of the sidenav */
  font-size: 20px;
  /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {

  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;

  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: left;
  padding-right: 10px;
  vertical-align: middle;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

.dropdown-btn {
  border: none;
  background-color: transparent;
  padding-right: 10px;
}

.dropdown-container .branch-links {

  /* padding: 8px 30px 8px 32px; */
  background-color: #c0c0c042;
}

#single_article #img-desc {
  color: #7D7D7D;
  position: relative;
  font-weight: 100;
  margin-top: 20px;
  padding-bottom: 7px;
  font-size: 0.8rem;
}

#single_article h6#img-desc::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #7D7D7D;
  width: 30%;
}






/* ////////////////////////////? */
blockquote {
  width: 80%;
  margin: 30px auto;
  position: relative;
  /* padding-left: 21%; */
  padding-right: 0;
  text-align: revert;
  padding-bottom: 0;
  padding-top: 0;
  font-family: inherit;
  margin-bottom: 0;
}


blockquote:before {
  content: '';
  position: absolute;
  bottom: 12%;
  right: -6%;
  top: 10px;
  border-right: 11px solid var(--Basic_color);
  height: 20%;
}

blockquote:after {
  content: '';
  position: absolute;
  bottom: 12%;
  right: -4%;
  top: 10px;
  border-right: 11px solid var(--Basic_color);
  height: 40%;
}

.article_text blockquote p {
  position: relative;
  padding-bottom: 23px;
  margin-bottom: 8px;
  font-family: readex_Medium;
}

.article_text blockquote p:after {
  content: '';
  position: absolute;
  border-bottom: 2px solid var(--Basic_color);
  bottom: 0;
  width: 30%;
  right: 0;
}

blockquote~h3 {
  color: var(--body-color);
  font-size: 1.2rem;
  font-weight: lighter;
  margin-right: 10%;
}

.sticky {
  position: fixed;

  top: 0;
  width: 100%;


}

.stiky-header {
  display: none;
  /* padding: 10px 16px; */
  background: #fff;
  color: #322424;
  border-bottom: 1px solid #ccc6;
  z-index: 11;


}

.article_text blockquote {
  margin-right: 10%;
}

.stiky-logo {
  height: 80px;
  /* animation: 1s ease-out 0s 1 scalelogo; */

}

@keyframes scalelogo {
  0% {
    transform: scale(0%);
  }

  100% {
    transform: scale(100%);
  }
}

.article-img {
  width: 1000px;
  border-radius: 10px;
  height: auto;
  margin-top: 4%;
}

#main_post .title h4 {
  font-size: 2rem;
  position: relative;
  padding-bottom: 17px;
}

#main_post .title h2 {
  font-size: 2.6rem;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 63px;
  background-size: cover;
  right: 60px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #ff000000;
  color: white;
  cursor: pointer;
  padding: 15px;
  width: 36px;
  height: 36px;
}


.share-article {
  text-align: center;
}

.share-article ul {
  direction: rtl;
  justify-content: center;
}

.share-article h6 {
  padding-left: 16px;
  font-size: 1.4em;
}

.share-article .fa {

  padding: 9px;

  border-radius: 50%;

  width: 38px;

  text-align: center;

  font-size: 1.2rem;

  text-decoration: none !important;

  background: #ccccccb5;

  color: rgb(0 118 177);
}

.icons8-whatsapp {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAsMCwyNTYsMjU2IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIHRyYW5zZm9ybT0iIj48ZyBmaWxsPSIjMDA3NmFhIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48ZyB0cmFuc2Zvcm09InNjYWxlKDEwLjY2NjY3LDEwLjY2NjY3KSI+PHBhdGggZD0iTTE5LjA3Nyw0LjkyOGMtMS44ODYsLTEuODg3IC00LjM5NCwtMi45MjcgLTcuMDY2LC0yLjkyOGMtNS41MDYsMCAtOS45ODcsNC40NzkgLTkuOTg5LDkuOTg1Yy0wLjAwMSwxLjc2IDAuNDU5LDMuNDc4IDEuMzMzLDQuOTkybC0xLjM1NSw1LjAyM2w1LjIzMywtMS4yMzdjMS40NTksMC43OTYgMy4xMDEsMS4yMTUgNC43NzMsMS4yMTZoMC4wMDRjNS41MDUsMCA5Ljk4NiwtNC40OCA5Ljk4OSwtOS45ODVjMC4wMDIsLTIuNjY5IC0xLjAzNiwtNS4xNzggLTIuOTIyLC03LjA2NnpNMTYuODk4LDE1LjU1NGMtMC4yMDgsMC41ODMgLTEuMjI3LDEuMTQ1IC0xLjY4NSwxLjE4NmMtMC40NTgsMC4wNDIgLTAuODg3LDAuMjA3IC0yLjk5NSwtMC42MjRjLTIuNTM3LC0xIC00LjEzOSwtMy42MDEgLTQuMjYzLC0zLjc2N2MtMC4xMjUsLTAuMTY3IC0xLjAxOSwtMS4zNTMgLTEuMDE5LC0yLjU4MWMwLC0xLjIyOCAwLjY0NSwtMS44MzIgMC44NzQsLTIuMDgxYzAuMjI5LC0wLjI1IDAuNDk5LC0wLjMxMiAwLjY2NiwtMC4zMTJjMC4xNjYsMCAwLjMzMywwIDAuNDc4LDAuMDA2YzAuMTc4LDAuMDA3IDAuMzc1LDAuMDE2IDAuNTYyLDAuNDMxYzAuMjIyLDAuNDk0IDAuNzA3LDEuNzI4IDAuNzY5LDEuODUzYzAuMDYyLDAuMTI1IDAuMTA0LDAuMjcxIDAuMDIxLDAuNDM3Yy0wLjA4MywwLjE2NiAtMC4xMjUsMC4yNyAtMC4yNDksMC40MTZjLTAuMTI1LDAuMTQ2IC0wLjI2MiwwLjMyNSAtMC4zNzQsMC40MzdjLTAuMTI1LDAuMTI0IC0wLjI1NSwwLjI2IC0wLjExLDAuNTA5YzAuMTQ2LDAuMjUgMC42NDYsMS4wNjcgMS4zODgsMS43MjhjMC45NTQsMC44NSAxLjc1NywxLjExMyAyLjAwNywxLjIzOWMwLjI1LDAuMTI1IDAuMzk1LDAuMTA0IDAuNTQxLC0wLjA2M2MwLjE0NiwtMC4xNjYgMC42MjQsLTAuNzI4IDAuNzksLTAuOTc4YzAuMTY2LC0wLjI1IDAuMzMzLC0wLjIwOCAwLjU2MiwtMC4xMjVjMC4yMjksMC4wODMgMS40NTYsMC42ODcgMS43MDUsMC44MTJjMC4yNSwwLjEyNSAwLjQxNiwwLjE4NyAwLjQ3OCwwLjI5MWMwLjA2MiwwLjEwMyAwLjA2MiwwLjYwMyAtMC4xNDYsMS4xODZ6Ij48L3BhdGg+PC9nPjwvZz48L2c+Cjwvc3ZnPg==') 50% 50% no-repeat;
  background-size: 100%;
  margin-top: 9px;
  vertical-align: sub;
}

.share-article span {
  padding: 9px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none !important;
  background: #ccccccb5;
  color: rgb(0 118 177);
}

#search-form input {
  margin-top: 0;
  text-align: right;
  z-index: 0;
}

#search-form #close_search {
  font-size: 33px;
  margin-right: 2%;
  color: #080707;
  text-decoration: none;
}

#search-form {
  text-align: left;
  display: none;
  padding-right: 39%;
}

#search-form .btn {
  color: #ffffff;
  left: 4px;
  bottom: 0;
  background-color: var(--Basic_color);
  border-color: var(--Basic_color);
  border-radius: 5px;
}

#search-form .input-group {

  width: 42%;
}

.bee_creative {
  color: var(--Basic_color) !important;
}

.search-form input {
  margin-top: 0;
  text-align: right;
  z-index: 0;
}

.search-form #close_search {
  font-size: 33px;
  margin-right: 2%;
  color: #080707;
  text-decoration: none;
}

.search-form {
  /* text-align: left;
   
  padding-right: 39%; */
  margin-bottom: 2%;
}

.search-form .btn {
  color: #ffffff;
  left: 4px;
  bottom: 0;
  background-color: var(--Basic_color);
  border-color: var(--Basic_color);
  border-radius: 5px;
}

.small_alert_fixed {
  width: auto;
  position: fixed;
  top: 30%;
  text-align: center;
}

#today {
  font-size: 0.9rem;
}

#photographer_desc h3 {
  font-size: 1.5rem;
  margin-bottom: 2%;
}

#photographer_desc h6 {
  font-size: 0.9rem;
}

#radio_web {
  width: 100%;
  border-radius: 10px;
}

#poster-desc {
  /* font-weight: 500; */
  color: var(--Basic_color);
  font-size: 1.1rem;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 5px;
  line-height: 2rem;
  font-family: readex_Medium;
}

.slider_img_cnt {
  text-align: center;
  background-color: #2b2727;
  border-radius: 10px;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {

  border-radius: 5px !important;
}

#copyright {
  font-size: 0.8rem;
}

#copyright .fa {
  font-size: 12px;
  background: none;
  color: #434343;
  padding: 0;
  margin: 0;
  text-align: left;
  vertical-align: middle;

}

#edition_page {
  margin-left: 10%;
  margin-right: 10%;

}

#edition_page h1 {
  text-align: center;
  margin-top: 4%;
  margin-bottom: 4%;
}

.article_text p:has(>img) {

  padding-bottom: 0;
  margin-bottom: 0;
}

.article_text p:has(>img)+pre {
  color: #7D7D7D;
  position: relative;
  font-weight: 100;
  margin-top: 20px;
  margin-top: 7px;
  padding-bottom: 7px;
  font-size: 0.8rem;
  font-family: 'readex_1';
}

.article_text pre::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #7D7D7D;
  width: 30%;
}

.infile {
  display: inline-flex;
  margin-bottom: 4%;
}

.infile .card {

  border: none;
}

.infile .card img {

  border-radius: 11px;

  height: 220px;

  object-fit: cover;
}

.article_keywords {
  padding: 4% 13% 4% 13%;
}

.article_keywords a.tag {
  background: #E1E1E1;
  border-radius: 6px;
  color: var(--secondary-color);
  padding: 4px 8px;
  font-weight: 400;
}
.ltr_article{
  direction: ltr;
  .desc p{
    padding-left: 0px;
  }
  #writer .desc{
    padding-left: 0;
    padding-right: 6%;
    margin-left: 0px;
  }
}
.ltr_article h6#img-desc::after,.ltr_article .article_text pre::after,
.ltr_article .title:before{
  right: unset;
  left: 0px;
}