@font-face {
  font-family: "news";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/News-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "news";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/News-Medium.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "news";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/News-Bold.woff2") format("woff2");
  font-display: swap;
}

body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "news", sans-serif;
  font-weight: normal;
  text-align: right;
  direction: rtl;
  background-color: #e6e6e6;
}
.color1 {
  color: #078f7e;
}
.dirLTR {
  direction: ltr;
}
a {
  text-decoration: none;
}
.text-left {
  text-align: left;
}
.mb0 {
  margin-bottom: 0 !important;
}

/* ------ header ---------------------- */
.header {
  background:linear-gradient(to right, #618051, #618051);
  padding: 10px 0;
}

/* ---------------------------- */
.newsCard {
  width: 100%;
  margin: 20px auto;
  border-radius: 16px;
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

.newsCard .imageWrapper {
  position: relative;
}

.newsCard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}

.newsCard .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(180, 33, 33, 0.8);
  color: #fff;
  padding: 12px 20px;
  font-size: 18px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  box-sizing: border-box;
}

/* ------------------------- */
.categorySection {
  direction: rtl;
  text-align: center;
  padding: 40px 20px;
}

.categorySection .categories {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 22px;
  padding: 15px 15px 30px;
  flex-wrap: wrap;
}
.categorySection .categories a {
  color: #444;
  transition: all 0.3s;
}
.categorySection .categories a.active,
.categorySection .categories a:hover {
  color: #be2130;
}

.categorySection .carImg {
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  overflow: hidden;
}
.categorySection .categoryTitle {
  color: #be2130;
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: normal;
}
.categorySection .categoryTitle a {
  color: #be2130;
}

.categoryCards {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.categoryCards .cardItem {
  width: calc(33% - 18px);
  padding: 15px;
  background-color: white;
}

.categoryCards .cardItem img {
  width: 100%;
  display: block;
}

.categoryCards .cardItem p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: #000;
  text-align: right;
}
.categoryCards .cardItem .link {
  display: block;
  width: 100%;
  margin-bottom: 0;
}
.categoryCards .cardItem span {
  display: inline-block;
  padding: 5px 15px;
  background-color: #ddd;
  color: black;
  font-size: 12px;
}

/* ------------------------- */
.categorySection2 {
  direction: rtl;
  text-align: center;
  padding: 40px 20px;
}

.categorySection2 .carImg {
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  overflow: hidden;
}
.categorySection2 .categoryTitle {
  color: #be2130;
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: normal;
}
.categorySection2 .categoryTitle a {
  color: #be2130;
}

.categoryCards2 {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.categoryCards2 .cardItem {
  width: calc(25% - 18px);
}

.categoryCards2 .cardItem img {
  width: 100%;
  border-radius: 15px;
  display: block;
}

.categoryCards2 .cardItem p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: #be2130;
  text-align: right;
}

/* ----------------------------- */
.videoSection {
  background-color: #222;
  padding: 50px 20px;
  text-align: center;
  direction: rtl;
}

.videoSection .videoTitle {
  color: #fff;
  font-size: 22px;
  margin-bottom: 40px;
}
.videoSection .videoTitle a {
  color: #fff;
}

.videoSection .videoGrid {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.videoSection .videoItem {
  width: calc(33% - 18px);
  border-radius: 20px;
  overflow: hidden;
}

.videoSection .videoItem img {
  width: 100%;
  display: block;
}

/* ------------------------------- */
.photoStory {
  background-color: #b5232d;
  padding: 50px 20px;
  direction: rtl;
  text-align: center;
}

.photoStory .photoTitle {
  color: #fff;
  font-size: 22px;
  margin-bottom: 40px;
}
.photoStory .photoTitle a {
  color: #fff;
}

.photoStory .photoGrid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.photoStory .photoItem {
  position: relative;
  width: calc(50% - 15px);
  border-radius: 16px;
  overflow: hidden;
}

.photoStory .photoItem img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.photoStory .photoItem .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 16, 40, 0.7);
  color: #fff;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.photoStory .photoItem.borderBlue {
  border: 2px solid #0a7eff;
  border-radius: 18px;
}

/* --------- footer ----------------- */
.mainFooter {
  background-color: #fff;
  text-align: center;
}

.mainFooter .footerContent {
  padding: 40px 20px 20px;
}

.mainFooter .footerLogo {
  width: 120px;
  height: auto;
  margin-bottom: 20px;
}

.mainFooter .socialIcons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.mainFooter .socialIcons a {
  background-color: #1c1c1c;
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.mainFooter .socialIcons a:hover {
  background-color: #d32f2f;
}

.mainFooter .footerBottom {
  background-color: #1c1c1c;
  color: #fff;
  padding: 15px 10px;
  font-size: 14px;
}

/* ----------------------------------------- */
.singlePostMain {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.singlePost {
  flex: 1;
  direction: rtl;
  background-color: #fff;
  padding: 30px 40px;
}

.singlePost .postHeader {
  margin-bottom: 20px;
}

.singlePost .postLabel {
  background-color: #c22d2d;
  color: #fff;
  padding: 7px 15px;
  font-size: 14px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 0;
}

.singlePost .postTitle {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6;
  margin: 0;
}

.singlePost .postImage {
  position: relative;
  margin: 30px 0;
}

.singlePost .postImage img {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.singlePost .postTime {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 14px;
  color: #999;
}

.singlePost .postContent p {
  font-size: 16px;
  line-height: 2.2;
  color: #111;
  margin-bottom: 20px;
}

.singlePost .postAuthor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}
.singlePost .postAuthor .author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.singlePost .postAuthor .author .img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e6e6e6;
}
.singlePost .postAuthor .author .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.singlePost .author .txt .title {
  color: #003366;
  margin-top: 0;
}
.singlePost .author .txt .subT {
  margin-bottom: 0;
}

/* ------------------------------------------- */
.sideBar {
  padding: 30px 20px;
  direction: rtl;
  width: 320px;
}

.sideBar .sideTitle {
  font-size: 18px;
  font-weight: bold;
  color: #003366;
  border-bottom: 2px solid #c22d2d;
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 5px;
  padding-left: 20px;
}

.sideBar .sideNewsList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sideBar .newsItem {
  background-color: #fff;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 4px;
  color: #111;
  border-radius: 10px;
}

/* --------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 40px 15px 10px;
}
.pagination a {
  display: inline-block;
  padding: 5px 14px;
  background-color: white;
  color: #c22d2d;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s;
}
.pagination a.active,
.pagination a:hover {
  color: white;
  background-color: #c22d2d;
}
.pagination a.left,
.pagination a.right {
  width: 37px;
  height: 34px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination a.left span,
.pagination a.right span {
  position: relative;
  top: -3px;
}

#sync1 {
  direction: ltr;
  text-align: left;
}
#sync1 .imageWrapper {
  text-align: right;
  direction: rtl;
}

/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* / */
/* ---- responsive ----------------- */
@media only screen and (max-width: 1399px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}
@media only screen and (min-width: 992px) {
  .header .headIn {
    justify-content: center;
  }
  .header .headCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header .headCenter .top {
    padding-bottom: 10px;
  }
  .header .headCenter .btm {
    position: relative;
  }
  .header .headCenter .btm::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, white, transparent);
  }
  .header .headCenter .btm .navbar-nav {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px;
  }
  .header .headCenter .btm a {
    font-size: 24px;
    color: white;
  }
}

@media only screen and (max-width: 991px) {
  .header .headCenter .btm {
    position: relative;
    margin-top: 20px;
  }
  .header .headCenter .btm::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, white, transparent);
  }
  .header .headCenter .btm .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 15px;
  }
  .header .headCenter .btm a {
    font-size: 14px;
    color: white;
  }
  .header .navbar-toggler {
    border-color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 46px;
  }
  .header .navbar-toggler:focus {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  .header .navbar-toggler .navbar-toggler-icon {
    background: none;
    width: 70%;
    height: 1px;
    position: relative;
    background-color: white;
    border-radius: 1px;
  }
  .header .navbar-toggler .navbar-toggler-icon::before,
  .header .navbar-toggler .navbar-toggler-icon::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: -10px;
    background-color: white;
    position: absolute;
  }
  .header .navbar-toggler .navbar-toggler-icon::after {
    top: 10px;
  }

  .categoryCards,
  .videoSection .videoGrid,
  .categoryCards2,
  .photoStory .photoGrid {
    flex-direction: column;
    align-items: center;
  }
  .categoryCards .cardItem,
  .videoSection .videoGrid .videoItem,
  .categoryCards2 .cardItem,
  .photoStory .photoItem {
    width: 100%;
    max-width: 500px;
  }
  .categoryCards .cardItem p,
  .categoryCards2 .cardItem p,
  .newsCard .caption {
    text-align: center;
  }
  .newsCard .caption {
    position: relative;
    display: block;
  }
  .newsCard img {
    border-radius: 15px 15px 0 0;
  }

  .singlePostMain {
    flex-direction: column;
  }
}

@media only screen and (max-width: 767px) {
  .singlePost .postAuthor {
    flex-direction: column;
  }
}