.news-section {
  width: 100%;
  font-family: "Nassim";
}

.news-section>.my-container {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

.news-section .my-container .news-header strong {
  font-size: 20px;
  font-family: "Nassim";
}

.news-section>.my-container>.news-header>strong i {
  font-size: 15px;
  position: relative;
  bottom: -1px;
  margin-left: 8px;
}

.news-section:hover>.my-container>.news-header>strong {
  margin-right: 10px;
  color: #483d8b;
}

.news-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  justify-items: start;
  align-items: center;
  width: 100%;
  border-top: 3px solid #483d8b;
}

.news-header-icons {
  grid-area: 1/-1/1/-1;
}

.news-header-icons i {
  padding: 8px 16px;
  margin: 5px;
  margin-left: 0;
  cursor: pointer;
  color: #666;
  background-color: #e0e0e0;
  line-height: 1;
}

.news-header-icons i:hover {
  background-color: aqua;
}

.news-section>.my-container>.news-header>strong {
  padding: 5px;
  transition: margin-right 0.5s ease;
  cursor: pointer;
  color: #483d8b;
  font-size: 20px;
}

.news-section>.my-container>.news-header>i.fa-chevron-left {
  margin-left: 10px;
  position: relative;
  bottom: 1px;
  color: #483d8b;
  font-weight: bolder;
  margin-right: 5px;
}

.news-section>.my-container .nav li {
  margin: 5px;
  padding: 0 5px;
  font-size: 17px;
}

.news-header-icons .fa-rss:hover {
  color: #fff;
  background-color: orange;
}

.news-header-icons .fa-cog:hover {
  color: #fff;
  background-color: gray;
}

/* ردیف دوم */
.news-main-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  gap: 5px;
}

.news-main-content>* {
  height: 300px;
  margin-bottom: 25px;
  cursor: pointer;
}

.news-card {
  background-color: #fff;
  padding: 5px;
  border: solid #dfdfdf;
  border-width: 0 0 1px 1px;
  height: 100%;
}

.news-card .news-card-img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.news-card .news-card-img img {
  width: 100%;
  transition: scale 0.7s ease;
}

.news-card .news-card-img img:hover {
  scale: 1.01;
}

.news-card:hover h2,
.news-card:hover h5 {
  color: #483d8b;
}

.news-card .news-card-content {
  padding: 10px;
  height: 97px;
  cursor: pointer;
}

.news-card .news-card-content h5 {
  font-size: 16px;
  font-weight: normal;
  color: #555;
  font-family: "NassimN";
  margin-bottom: 0;
}

.news-card .news-card-content h2 {
  font-size: 23px;
}

.news-billboard {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  max-width: 400px;
  padding: 0 12px;
  padding-top: 5px;
  border: solid #dfdfdf;
  border-width: 0 0 0.1rem 0.1rem;
  height: 100%;
}

.news-billboard .news-item:last-child {
  border-bottom: none;
}

.news-item {
  padding: 15px 5px 15px 15px;
  border-bottom: 1px solid #dfdfdf;
  cursor: pointer;
}

.news-item:hover h2,
.news-item:hover h3 {
  color: #483d8b;
}

.news-item-img {
  width: 92px;
  height: 69px;
  scale: 1;
}

.news-item-img:hover img {
  scale: 1.01;
}

.news-item-content {
  flex: 2;
  text-align: right;
  padding-right: 10px;
}

.news-item-content h3 {
  margin: 0;
  font-size: 15px;
  font-family: "NassimN";
  font-weight: normal;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.news-item-content h2 {
  font-size: 15px;
}

.news-item-img {
  float: right;
  padding-left: 8px;
  overflow: hidden;
}

.news-item-img img {
  width: 100%;
  height: auto;
  scale: 1;
  transition: scale 0.5s ease;
}

.news-list {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  border: solid #dfdfdf;
  border-width: 0 0 0.1rem 0.1rem;
}

.news-list .news-list-items {
  height: 100%;
}

.news-ad-box {
  height: 100%;
}

.news-ad-box img {
  height: 100%;
  width: 100%;
}

.news-list .news-list-items ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0;
  margin: 0;
  overflow: hidden;
  padding: 2px 12px 8px;
}

.news-list .news-list-items ul li {
  flex: none;
  height: 23px;
  display: flex;
  align-items: center;
  flex-direction: row;
  position: relative;
  list-style: none;
  overflow: hidden;
  border-bottom: 1px solid #dfdfdf;
  margin: 5px 0;
  white-space: nowrap;
}

.news-list .news-list-items ul li:last-child {
  border: none;
}

.news-list .news-list-items ul li:last-child:hover {
  border: none !important;
}

.news-list .news-list-items ul li:hover {
  color: #483d8b;
  border-bottom: 1px solid #483d8b;
}

.news-list .news-list-items ul li::before {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  background-color: #483d8b;
  border-radius: 50%;
  line-height: 1;
  position: relative;
  margin-left: 5px;
}

.news-list .news-list-items ul li a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 15px;
  font-family: "NassimN";
  cursor: pointer;
}

.news-section .my-container .news-header>span>ul {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 35px;
  width: 550px;
}

.news-section .my-container .news-header>span>ul li {
  font-family: "NassimN";
  font-weight: 200;
  cursor: pointer;
}

/**
 * بخش سفارشی سازی منو ردیف اول 
 */

.news-section.Money .my-container .news-header>span>ul li:hover {
  color: #483d8b;
}

/* Capital */
.news-section.Capital>.my-container>.news-header>strong,
.news-section.Capital>.my-container>.news-header .fa-chevron-left,
.Capital .news-card:hover h2,
.Capital .news-card:hover h5,
.Capital .news-item:hover h2,
.Capital .news-item:hover h3,
.news-section.Capital .my-container .news-header>span>ul li:hover {
  color: #228b22;
}

.Capital .news-list .news-list-items ul li::before {
  background-color: #228b22;
}

.Capital .news-list .news-list-items ul li:hover {
  color: #228b22;
  border-bottom: 1px solid #228b22;
}

.Capital .news-header {
  border-top: 3px solid #228b22;
}

/* Face */
.news-section.Face>.my-container>.news-header>strong,
.news-section.Face>.my-container>.news-header .fa-chevron-left,
.Face .news-card:hover h2,
.Face .news-card:hover h5,
.Face .news-item:hover h2,
.Face .news-item:hover h3,
.news-section.Face .my-container .news-header>span>ul li:hover {
  color: #7f05a1;
}

.Face .news-list .news-list-items ul li::before {
  background-color: #7f05a1;
}

.Face .news-list .news-list-items ul li:hover {
  color: #7f05a1;
  border-bottom: 1px solid #7f05a1;
}

.Face .news-header {
  border-top: 3px solid #7f05a1;
}

/* Economy */
.news-section.Economy>.my-container>.news-header>strong,
.news-section.Economy>.my-container>.news-header .fa-chevron-left,
.Economy .news-card:hover h2,
.Economy .news-card:hover h5,
.Economy .news-item:hover h2,
.Economy .news-item:hover h3,
.news-section.Economy .my-container .news-header>span>ul li:hover {
  color: #7b68ee;
}

.Economy .news-list .news-list-items ul li::before {
  background-color: #7b68ee;
}

.Economy .news-list .news-list-items ul li:hover {
  color: #7b68ee;
  border-bottom: 1px solid #7b68ee;
}

.Economy .news-header {
  border-top: 3px solid #7b68ee;
}

/* Culture */
.news-section.Culture>.my-container>.news-header>strong,
.news-section.Culture>.my-container>.news-header .fa-chevron-left,
.Culture .news-card:hover h2,
.Culture .news-card:hover h5,
.Culture .news-item:hover h2,
.Culture .news-item:hover h3,
.news-section.Culture .my-container .news-header>span>ul li:hover {
  color: #0040ad;
}

.Culture .news-list .news-list-items ul li::before {
  background-color: #0040ad;
}

.Culture .news-list .news-list-items ul li:hover {
  color: #0040ad;
  border-bottom: 1px solid #0040ad;
}

.Culture .news-header {
  border-top: 3px solid #0040ad;
}

/* Sports */
.news-section.Sports>.my-container>.news-header>strong,
.news-section.Sports>.my-container>.news-header .fa-chevron-left,
.Sports .news-card:hover h2,
.Sports .news-card:hover h5,
.Sports .news-item:hover h2,
.Sports .news-item:hover h3,
.news-section.Sports .my-container .news-header>span>ul li:hover {
  color: #ff8c00;
}

.Sports .news-list .news-list-items ul li::before {
  background-color: #ff8c00;
}

.Sports .news-list .news-list-items ul li:hover {
  color: #ff8c00;
  border-bottom: 1px solid #ff8c00;
}

.Sports .news-header {
  border-top: 3px solid #ff8c00;
}

/* Cars */

.news-section.Cars>.my-container>.news-header>strong,
.news-section.Cars>.my-container>.news-header .fa-chevron-left,
.Cars .news-card:hover h2,
.Cars .news-card:hover h5,
.Cars .news-item:hover h2,
.Cars .news-item:hover h3,
.news-section.Cars .my-container .news-header>span>ul li:hover {
  color: #daa520;
}

.Cars .news-list .news-list-items ul li::before {
  background-color: #daa520;
}

.Cars .news-list .news-list-items ul li:hover {
  color: #daa520;
  border-bottom: 1px solid #daa520;
}

.Cars .news-header {
  border-top: 3px solid #daa520;
}

/* City */

.news-section.City>.my-container>.news-header>strong,
.news-section.City>.my-container>.news-header .fa-chevron-left,
.City .news-card:hover h2,
.City .news-card:hover h5,
.City .news-item:hover h2,
.City .news-item:hover h3,
.news-section.City .my-container .news-header>span>ul li:hover {
  color: #283803;
}

.City .news-list .news-list-items ul li::before {
  background-color: #283803;
}

.City .news-list .news-list-items ul li:hover {
  color: #283803;
  border-bottom: 1px solid #283803;
}

.City .news-header {
  border-top: 3px solid #283803;
}

/* Life */
.news-section.Life>.my-container>.news-header>strong,
.news-section.Life>.my-container>.news-header .fa-chevron-left,
.Life .news-card:hover h2,
.Life .news-card:hover h5,
.Life .news-item:hover h2,
.Life .news-item:hover h3,
.news-section.Life .my-container .news-header>span>ul li:hover {
  color: #c71585;
}

.Life .news-list .news-list-items ul li::before {
  background-color: #c71585;
}

.Life .news-list .news-list-items ul li:hover {
  color: #c71585;
  border-bottom: 1px solid #c71585;
}

.Life .news-header {
  border-top: 3px solid #c71585;
}

/* Green */
.news-section.Green>.my-container>.news-header>strong,
.news-section.Green>.my-container>.news-header .fa-chevron-left,
.Green .news-card:hover h2,
.Green .news-card:hover h5,
.Green .news-item:hover h2,
.Green .news-item:hover h3,
.news-section.Green .my-container .news-header>span>ul li:hover {
  color: #006400;
}

.Green .news-list .news-list-items ul li::before {
  background-color: #006400;
}

.Green .news-list .news-list-items ul li:hover {
  color: #006400;
  border-bottom: 1px solid #006400;
}

.Green .news-header {
  border-top: 3px solid #006400;
}

/* Traveling */
.news-section.Traveling>.my-container>.news-header>strong,
.news-section.Traveling>.my-container>.news-header .fa-chevron-left,
.Traveling .news-card:hover h2,
.Traveling .news-card:hover h5,
.Traveling .news-item:hover h2,
.Traveling .news-item:hover h3,
.news-section.Traveling .my-container .news-header>span>ul li:hover {
  color: #008b8b;
}

.Traveling .news-list .news-list-items ul li::before {
  background-color: #008b8b;
}

.Traveling .news-list .news-list-items ul li:hover {
  color: #008b8b;
  border-bottom: 1px solid #008b8b;
}

.Traveling .news-header {
  border-top: 3px solid #008b8b;
}

/* Health */
.news-section.Health>.my-container>.news-header>strong,
.news-section.Health>.my-container>.news-header .fa-chevron-left,
.Health .news-card:hover h2,
.Health .news-card:hover h5,
.Health .news-item:hover h2,
.Health .news-item:hover h3,
.news-section.Health .my-container .news-header>span>ul li:hover {
  color: #f08080;
}

.Health .news-list .news-list-items ul li::before {
  background-color: #f08080;
}

.Health .news-list .news-list-items ul li:hover {
  color: #f08080;
  border-bottom: 1px solid #f08080;
}

.Health .news-header {
  border-top: 3px solid #f08080;
}

/* Helper */
.news-section.Helper>.my-container>.news-header>strong,
.news-section.Helper>.my-container>.news-header .fa-chevron-left,
.Helper .news-card:hover h2,
.Helper .news-card:hover h5,
.Helper .news-item:hover h2,
.Helper .news-item:hover h3,
.news-section.Helper .my-container .news-header>span>ul li:hover {
  color: #ba55d3;
}

.Helper .news-list .news-list-items ul li::before {
  background-color: #ba55d3;
}

.Helper .news-list .news-list-items ul li:hover {
  color: #ba55d3;
  border-bottom: 1px solid #ba55d3;
}

.Helper .news-header {
  border-top: 3px solid #ba55d3;
}

/* Many */
.news-section.Many>.my-container>.news-header>strong,
.news-section.Many>.my-container>.news-header .fa-chevron-left,
.Many .news-card:hover h2,
.Many .news-card:hover h5,
.Many .news-item:hover h2,
.Many .news-item:hover h3,
.news-section.Many .my-container .news-header>span>ul li:hover {
  color: #555555;
}

.Many .news-list .news-list-items ul li::before {
  background-color: #555555;
}

.Many .news-list .news-list-items ul li:hover {
  color: #555555;
  border-bottom: 1px solid #555555;
}

.Many .news-header {
  border-top: 3px solid #555555;
}

/* Map */
.Map .news-header {
  border-top: 3px solid #444;
}

/* Needs */
.Needs .news-header {
  border-top: 3px solid #cc4129;
}

.news-section.Needs>.my-container>.news-header>strong,
.news-section.Needs>.my-container>.news-header .fa-chevron-left {
  color: #cc4129;
}

.news-section .my-container .news-header>span>ul li:hover {
  color: #cc4129;
}

@media screen and (max-width: 768px) {
  .news-header {
    grid-template-rows: 30px auto;
  }

  .news-section .my-container .news-header>span {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: nowrap;
    width: 100%;
  }

  .news-header-icons {
    grid-area: 1/4;
  }

  .news-section .my-container .news-header>span>ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
    max-height: 45px;
  }

  .news-section .my-container .news-header>span>ul>li {
    white-space: nowrap;
  }

  .news-billboard {
    display: none;
  }

  .news-main-content {
    grid-template-columns: repeat(3, 1fr);
  }

  .news-main-content>* {
    height: 240px;
  }

  .news-section {
    padding: 0 15px;
  }
}

@media screen and (max-width: 425px) {
  .news-main-content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .news-main-content>* {
    width: 100%;
    height: 300px;
    margin-bottom: 0;
  }

  .news-ad-box img {
    width: 100%;
  }

  .news-section .my-container .news-header>span>ul {
    background-color: #aaa;
  }

  .news-section {
    margin-bottom: 40px;
  }

  .news-header-icons i {
    margin: 0;
  }
}