/*************** Stert Comments ******************/
.edNews__commentPendingApproval,
.edNews_errorMessage {
  position: absolute;
  top: 105%;
  right: 0;
  transition: all ease-in-out 0.3s;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: block;
}

.edNews__commentPendingApproval.show,
.edNews_errorMessage.show {
  max-height: 3rem;
  opacity: 1;
  background: var(--warning-color-1);
  padding: 0.2rem 0.4em;
  color: var(--White);
  border-radius: var(--radius);
  z-index: 1;
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  -o-border-radius: var(--radius);
}

.edNews__commentsWrapper .btn-submit {
  color: var(--White);
  transition: all ease-in-out 0.3s;
  cursor: pointer;
  font-weight: bold;
}

.edNews__commentsWrapper .btn-submit:hover {
  background: var(--accent-color4);
}

.edNews__commentsWrapper
  :where(input[type="text"], input[type="email"], textarea) {
  outline: unset !important;
  padding: 1rem;
  width: -webkit-fill-available;
  background-color: var(--lsilver);
  transition: all ease-in-out 0.3s;
  border: 0.1em solid var(--silverLight);
}

.edNews__commentsWrapper
  :where(input[type="text"], input[type="email"], textarea)::placeholder {
  text-align: right !important;
  font-family: IranSite;
  color: var(--Silver-Secondary-Color);
  transition: all ease-in-out 0.3s;
}

input:where([type="email"], [type="cell"]) {
  direction: ltr;
}

.edNews__commentsWrapper .form-group label {
  padding: 0.4rem 0;
}

.edNews__commentsWrapper
  :where(input[type="text"], input[type="email"], textarea):focus {
  border-color: var(--Accent-Color);
}

.edNews__commentsWrapper
  :where(input[type="text"], input[type="email"], textarea):focus::placeholder {
  letter-spacing: -0.05rem;
  font-size: 0.9rem;
}

.edNews__commentsWrapper .GDPR input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.2em;
  gap: 1rem;
}

.edNews__commentsWrapper .GDPR input[type="checkbox"] {
  display: none;
}

.edNews__commentsWrapper .GDPR input[type="checkbox"] + label:before {
  content: "\2714";
  border: 0.1em solid var(--Black-Color);
  border-radius: 0.2em;
  display: flex;
  color: transparent;
  transition: 0.2s;
  padding: 0 0.5em;
  border: 0.1rem solid var(--blgnav);
}

.edNews__commentsWrapper .GDPR input[type="checkbox"] + label:active:before {
  transform: scale(0);
}

.edNews__commentsWrapper .GDPR input[type="checkbox"]:checked + label:before {
  background-color: #3cb371;
  border-color: #3cb371;
  color: var(--White);
}

.edNews__commentsWrapper .GDPR input[type="checkbox"]:disabled + label:before {
  transform: scale(1);
}

.edNews__commentsWrapper
  .GDPR
  input[type="checkbox"]:checked:disabled
  + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

.edNews__commentsCommentFormWrapper .edNews__replyingToMessage {
  opacity: 0;
  visibility: hidden;
  transition: all ease-in-out 0.3s;
}

.edNews__commentsCommentFormWrapper.edNews__replyingToComment
  .edNews__replyingToMessage {
  opacity: 1;
  visibility: visible;
}

.edNews__commentsCollapseWrapper {
  width: 100%;
}

.edNews_commentDetails .media-body {
  flex: 1 0 80%;
  border: 0.1rem solid var(--silverLight);
  border-radius: calc(var(--b-rasiud) * 2);
}

.edNews__commentVoting_upvote .fa-thumbs-o-up:before {
  color: green;
  font-size: 1.5rem;
}

.edNews__commentVoting_downvote .fa-thumbs-o-down:before {
  color: red;
  font-size: 1.5rem;
}

.edNews_commentActions span {
  color: var(--accent-color1);
}

.edNews_numberVotes {
  color: var(--accent-color1);
}

.edNews_loadMoreTriggerWrapper {
  display: flex;
  justify-content: center;
}

.edNews_loadMoreTriggerWrapper button {
  background: var(--accent-color3);
  border: 1px solid var(--accent-color2);
  padding: 1rem;
  margin-bottom: 2rem;
  cursor: pointer;
}

.edNews_loadMoreTriggerWrapper .loadingOverlay {
  display: none;
}

.edNews_loadMoreTriggerWrapper.loading,
.edNews__editingComment .edNews__editCommentContainer {
  display: block;
}

.edNews_loadMoreTriggerWrapper.hide,
.edNews__editCommentContainer {
  display: none;
}

.edNews_userAvatar img {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--b-radius);
}

.edn_recentCommentContainer {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.ItemTitleComment svg {
  width: 1.5rem;
}

.edNews__commentContent {
  font-size: 1rem;
}

.edNews_commentDate {
  font-size: 0.8rem;
  padding-top: 6px;
}

.edNews__childCommentsContainer {
  border-right: solid 2px var(--accent-color);
  margin-bottom: 0.6rem;

  .edNews__itemCommentContainer {
    margin-right: 2rem;
    border-top: 0.1rem solid var(--dark-gray);
  }
}

.edNews_adminEdit .btn-submit {
  background: transparent !important;
  color: var(--accent-color);

  .edNews__editComment,
  .edNews__deleteComment {
    display: none;
  }
}

.arrow_slider_bargh {
  position: absolute;
  top: 10px;
  z-index: 5;
  cursor: pointer;
}

.swiper-barghnetprev {
  left: 1%;
}

.swiper-barghnetnext {
  left: 12%;
}

.arrow_slider_bargh.swiper-button-disabled {
  opacity: 0.5;
}

.barghpaganition {
  width: unset !important;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.barghpaganition span {
  margin-bottom: 15px !important;

  width: 8px;
  background-color: #ffb403;
  height: 10px;
  border-radius: 5px;
}

.barghpaganition span.swiper-pagination-bullet-active {
  height: 20px;
}

.holder_slider_bargh {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.fig_caption {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgb(0 0 0 / 13%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
  display: flex;
  padding: 4px;
  display: none;
  align-items: center;
  justify-content: space-evenly;
}

.txt_slider {
  display: flex;
  gap: 20px;
}

.swiper-barghnetnext > span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cg id='Path_1273' data-name='Path 1273' fill='rgba(152,147,147,0.34)'%3E%3Cpath d='M29,0A29,29,0,1,0,58,29,29,29,0,0,0,29,0Z' stroke='none'/%3E%3Cpath d='M 29 1 C 25.21958160400391 1 21.55278015136719 1.740180969238281 18.1014404296875 3.199970245361328 C 14.76734161376953 4.61016845703125 11.77280044555664 6.629219055175781 9.201011657714844 9.201011657714844 C 6.629219055175781 11.77280044555664 4.61016845703125 14.76734161376953 3.199970245361328 18.1014404296875 C 1.740180969238281 21.55278015136719 1 25.21958160400391 1 29 C 1 32.78041839599609 1.740180969238281 36.44721984863281 3.199970245361328 39.8985595703125 C 4.61016845703125 43.23265838623047 6.629219055175781 46.22719955444336 9.201011657714844 48.79898834228516 C 11.77280044555664 51.37078094482422 14.76734161376953 53.38983154296875 18.1014404296875 54.80002975463867 C 21.55278015136719 56.25981903076172 25.21958160400391 57 29 57 C 32.78041839599609 57 36.44721984863281 56.25981903076172 39.8985595703125 54.80002975463867 C 43.23265838623047 53.38983154296875 46.22719955444336 51.37078094482422 48.79898834228516 48.79898834228516 C 51.37078094482422 46.22719955444336 53.38983154296875 43.23265838623047 54.80002975463867 39.8985595703125 C 56.25981903076172 36.44721984863281 57 32.78041839599609 57 29 C 57 25.21958160400391 56.25981903076172 21.55278015136719 54.80002975463867 18.1014404296875 C 53.38983154296875 14.76734161376953 51.37078094482422 11.77280044555664 48.79898834228516 9.201011657714844 C 46.22719955444336 6.629219055175781 43.23265838623047 4.61016845703125 39.8985595703125 3.199970245361328 C 36.44721984863281 1.740180969238281 32.78041839599609 1 29 1 M 29 0 C 45.01625823974609 0 58 12.98374176025391 58 29 C 58 45.01625823974609 45.01625823974609 58 29 58 C 12.98374176025391 58 0 45.01625823974609 0 29 C 0 12.98374176025391 12.98374176025391 0 29 0 Z' stroke='none' fill='rgba(152,147,147,0.43)'/%3E%3C/g%3E%3Cpath id='arrow-ios-forward-outline' d='M14.245,17.933a.747.747,0,0,1-.575-1.225l3.346-4L13.79,8.7a.763.763,0,1,1,1.2-.941L18.6,12.235a.747.747,0,0,1,0,.948l-3.734,4.481a.747.747,0,0,1-.62.269Z' transform='translate(13.456 16.544)' fill='%23989393'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;

  fill: #fff;
  width: 40px;
  background-color: #000000;
  border-radius: 50%;
  height: 40px;
  background-color: #000000;
  border-radius: 50%;
  display: block;
}

.swiper-barghnetprev > span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cg id='Path_1273' data-name='Path 1273' fill='rgba(152,147,147,0.34)'%3E%3Cpath d='M29,0A29,29,0,1,0,58,29,29,29,0,0,0,29,0Z' stroke='none'/%3E%3Cpath d='M 29 1 C 25.21958160400391 1 21.55278015136719 1.740180969238281 18.1014404296875 3.199970245361328 C 14.76734161376953 4.61016845703125 11.77280044555664 6.629219055175781 9.201011657714844 9.201011657714844 C 6.629219055175781 11.77280044555664 4.61016845703125 14.76734161376953 3.199970245361328 18.1014404296875 C 1.740180969238281 21.55278015136719 1 25.21958160400391 1 29 C 1 32.78041839599609 1.740180969238281 36.44721984863281 3.199970245361328 39.8985595703125 C 4.61016845703125 43.23265838623047 6.629219055175781 46.22719955444336 9.201011657714844 48.79898834228516 C 11.77280044555664 51.37078094482422 14.76734161376953 53.38983154296875 18.1014404296875 54.80002975463867 C 21.55278015136719 56.25981903076172 25.21958160400391 57 29 57 C 32.78041839599609 57 36.44721984863281 56.25981903076172 39.8985595703125 54.80002975463867 C 43.23265838623047 53.38983154296875 46.22719955444336 51.37078094482422 48.79898834228516 48.79898834228516 C 51.37078094482422 46.22719955444336 53.38983154296875 43.23265838623047 54.80002975463867 39.8985595703125 C 56.25981903076172 36.44721984863281 57 32.78041839599609 57 29 C 57 25.21958160400391 56.25981903076172 21.55278015136719 54.80002975463867 18.1014404296875 C 53.38983154296875 14.76734161376953 51.37078094482422 11.77280044555664 48.79898834228516 9.201011657714844 C 46.22719955444336 6.629219055175781 43.23265838623047 4.61016845703125 39.8985595703125 3.199970245361328 C 36.44721984863281 1.740180969238281 32.78041839599609 1 29 1 M 29 0 C 45.01625823974609 0 58 12.98374176025391 58 29 C 58 45.01625823974609 45.01625823974609 58 29 58 C 12.98374176025391 58 0 45.01625823974609 0 29 C 0 12.98374176025391 12.98374176025391 0 29 0 Z' stroke='none' fill='rgba(152,147,147,0.43)'/%3E%3C/g%3E%3Cpath id='arrow-ios-forward-outline' d='M14.245,17.933a.747.747,0,0,1-.575-1.225l3.346-4L13.79,8.7a.763.763,0,1,1,1.2-.941L18.6,12.235a.747.747,0,0,1,0,.948l-3.734,4.481a.747.747,0,0,1-.62.269Z' transform='translate(13.456 16.544)' fill='%23989393'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;

  fill: #fff;
  width: 40px;
  background-color: #000000;
  border-radius: 50%;
  height: 40px;
  background-color: #000000;
  border-radius: 50%;
  transform: rotate(180deg);
  display: block;
}

.txt_slider h2,
.txt_slider h1,
.txt_slider strong {
  color: white;
  font-size: 1rem;
  margin-bottom: 0px;
}

.txt_slider p,
.txt_slider span {
  color: #ececec;
  font-size: 1rem;
  margin-bottom: 0px;
}

.btn_moreslider {
  align-items: center;
  color: #000000 !important;
  cursor: pointer;
  padding: 5px 26px;
  position: relative;
  display: inline-block;
  border-radius: 5px;
  background-image: linear-gradient(#f7f8fa, #e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-width: 1px;
  border-style: solid;
  height: 40px;
  transition: all 0.4s;
}

.btn_moreslider:hover {
  border-color: #e77600;
  box-shadow: rgba(228, 121, 17, 0.5) 0 0 3px 2px;
  outline: 0;
}

.holder_btn_slide {
  display: flex;
  justify-content: center;
}

@media (min-width: 520px) {
  .fig_caption {
    display: flex;
  }

  .swiper-barghnetnext {
    left: 8%;
  }
}

@media (min-width: 920px) {
  .txt_slider h2,
  .txt_slider h1,
  .txt_slider strong {
    font-size: 1.2rem;
  }

  .txt_slider {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

@media (min-width: 1270px) {
  .holder_btn_slide {
    width: 100%;
  }

  .txt_slider h2,
  .txt_slider h1,
  .txt_slider strong {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .fig_caption {
    background: rgb(0 0 0 / 21%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 50vw;
    height: 100%;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
  }
}

.slider_barghnet {
  margin-top: 20px;
}

.blog {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #efefef;
  padding: 20px 20px 0px 20px;
  border-radius: 20px;
}

.blog h2 {
  font-size: 15px;
  color: #504e4e;
  -webkit-transition: color 0.3s linear;
  -khtml-transition: color 0.3s linear;
  -moz-transition: color 0.3s linear;
  -ms-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  transition: color 0.3s linear;
}

.blog a {
  display: flex;
  align-items: center;
  justify-content: center;

  outline: none;
  -moz-outline-style: none;
  outline-style: none;
  background: transparent url("assets/images/common/blank.png");
}

.blog img {
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  width: 100%;
  max-width: unset;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.blog:hover img {
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.blog:hover .edn_articleSummary {
  padding: 0;
  color: dimgray;
}

.blog:hover h2 {
  color: #504e4e;
}

.edn_mediaContainer {
  overflow: hidden;
  position: relative;
  margin: 0;
  border-radius: 20px;
}

.blog .text-image {
  background: #ffa40b;
  border-radius: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transform: translateY(1rem);
}

.breadcrumbs-blog {
  margin-bottom: 1rem;
}

.list-blog {
  margin-bottom: 3rem;
}

.edn_simpleArticle2 .text-image .maker {
  padding-right: 20px;
  color: #000 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.edn_simpleArticle2 .text-image .maker:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.254' height='10.442' viewBox='0 0 5.254 10.442'%3E%3Cpath id='arrow-ios-forward-outline' d='M18.005,17.9a.744.744,0,0,0,.573-1.221l-3.334-3.989,3.215-4a.761.761,0,1,0-1.2-.938l-3.595,4.465a.744.744,0,0,0,0,.945l3.721,4.465a.744.744,0,0,0,.618.268Z' transform='translate(-13.497 -7.456)'/%3E%3C/svg%3E%0A");
  margin-left: 20px;
  position: relative;
  border-right: 1px solid #000;
  padding-right: 10px;
  height: 100%;
  height: 13px;
  display: flex;
  align-items: center;
}

.article_pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.article_pager a {
  background-color: #efefef;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border: 0.1rem solid #b3b3b3;
}

.article_pager a:hover,
.article_pager a.active {
  background-color: #ffa40b;
  color: #000;
  border: 0.1rem solid #ffa40b;
}

/***************** Start Home Slider *******************/
.home-slider-section {
  margin: 2.7rem 0;

  .home-slider {
    .swiper-slide {
      border-radius: 0.61rem;
      overflow: hidden;
    }

    .TextSlider {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      strong {
        color: var(--text-dark-0);
        font-size: 1.3rem;
      }

      p {
        color: var(--text-dark-2);
        font-size: 1.1rem;
      }
    }

    @media (max-width: 480px) {
      .TextSlider {
        padding-right: 0.5rem;
        width: unset;
        strong {
          color: var(--text-dark-0);
          font-size: 0.8rem;
        }

        p {
          color: var(--text-dark-2);
          font-size: 0.6rem;
        }
      }
    }
  }
  .home-slider-bottom {
    .swiper-slide {
      border-radius: 0.61rem;
      overflow: hidden;
    }

    .TextSlider {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      strong {
        color: var(--text-dark-0);
        font-size: 1.3rem;
      }

      p {
        color: var(--text-dark-2);
        font-size: 1.1rem;
      }
    }

    @media (max-width: 480px) {
      .TextSlider {
        padding-right: 0.5rem;
        width: unset;
        strong {
          color: var(--text-dark-0);
          font-size: 0.8rem;
        }

        p {
          color: var(--text-dark-2);
          font-size: 0.6rem;
        }
      }
    }
  }

  .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 1rem;

    .swiper-pagination-bullet {
      width: 0.6rem;
      height: 0.6rem;
      margin: 0px 2px;
      background-color: var(--text-light-3);
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      transition: all 0.3s ease;
      opacity: 1;

      &.swiper-pagination-bullet-active {
        width: 4.8rem;
        background-color: var(--primary-main);
      }
    }
  }

  @media (max-width: 1130px) {
    /* margin: 5rem 0 2rem; */
  }

  @media (max-width: 760px) {
    margin: 1.6rem 0 0.8rem;

    .swiper-pagination {
      margin-top: 0;

      .swiper-pagination-bullet {
        width: 0.4rem;
        height: 0.4rem;

        &.swiper-pagination-bullet-active {
          width: 2rem;
        }
      }
    }
  }

  .home-top-slider {
    .img-box {
      position: relative;

  

      
     
      >div {
        position: absolute;
        width: 40%;
        height: 100%;
        /* max-width: 100%; */
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

       
        strong {
          color: var(--text-light-4);
          font-weight: bold;
          font-size: 1.5625rem;

        }
        span {
          color: var(--text-light-4);
          /* font-size: 1.375rem; */
          font-weight: normal;
        }

       
      }

        @media (min-width:768px) and  (max-width:992px) {

          >div {
             width:52%;

             strong {
               font-size:1rem;
             }
             span{
                font-size:0.8rem
             }
              
           }

          
           
        }

       @media (max-width:767px) {
        >div {
          width:65%;

          strong {
            font-size:1rem
          }
          span {
            font-size:0.8rem
          }
        }
      }
    }

     
    
  }
}




/***************** End Home Slider *******************/
.BlogsHome {
  img {
    border-radius: 0.6rem;
  }
}

.BlogsHome {
  .boxarticle {
    box-shadow: 0rem 0.28rem 0.57rem 0rem rgba(96, 97, 112, 0.16);
  }

  .item {
    border-radius: 0.6rem;
    overflow: hidden;

    &:hover {
      color: inherit;
    }

    img {
      border-radius: 0.6rem;
    }
  }
}

/* top slier home  */

.home-slider-section {
  margin-top: 1rem;

  .home-slider {
    .swiper-slide {
      .img-box {
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .slider-controller {
    width: 100%;
    bottom: 0.92rem;
    gap: 0.3rem;

    .swiper-pagination {
      position: relative;
      display: flex;
      align-items: center;
      width: auto;
      padding: 0.317rem 0.5rem;
      bottom: auto;
      gap: 0.3rem;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 1rem;

      .swiper-pagination-bullet {
        position: relative;
        margin: 0;
        background-color: var(--text-light-2);
        opacity: 1;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;

        &.swiper-pagination-bullet-active {
          width: 2.46rem;
          border-radius: 0.3rem;
          background-color: var(--primary-main);
        }
      }
    }
  }
}

.home-slider-side {
  margin-top: 1rem;

  .img-box {
    width: 100%;
    overflow: hidden;
  }
}

/* end top slier home  */

/***************** Start Article List *******************/
.article-list-3-col {
  margin-top: 2rem;

  .item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.6rem;

    .img-box {
      display: block;
      height: 100%;
      position: relative;
      border-radius: 2.3rem 2.3rem 0 0;
      -webkit-border-radius: 2.3rem 2.3rem 0 0;
      -moz-border-radius: 2.3rem 2.3rem 0 0;
      -ms-border-radius: 2.3rem 2.3rem 0 0;
      -o-border-radius: 2.3rem 2.3rem 0 0;
      aspect-ratio: 1.65 / 1;
      overflow: hidden;

      > a {
        display: block;
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .cat-label {
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: 2.3rem 0 0 0;
        overflow: hidden;

        a {
          display: inline-block;
          color: var(--White);
          padding: 0.3rem 1.7rem;

          &.EDNcategorycolor-orange {
            background-color: var(--secondary-color-light-1);
          }

          &.EDNcategorycolor-green {
            background-color: var(--accent-color);
          }
        }
      }
    }

    .content-box {
      padding: 0.9rem;
      background-color: var(--text-light-3);
      border-radius: 0 0 2.3rem 2.3rem;
      -webkit-border-radius: 0 0 2.3rem 2.3rem;
      -moz-border-radius: 0 0 2.3rem 2.3rem;
      -ms-border-radius: 0 0 2.3rem 2.3rem;
      -o-border-radius: 0 0 2.3rem 2.3rem;

      .date-time {
        margin-bottom: 0.7rem;

        span {
          display: inline-block;
          vertical-align: middle;
          color: var(--accent-color);
          line-height: 0.91rem;

          &:first-child {
            font-weight: 500;
            padding-left: 0.6rem;
            margin-left: 0.6rem;
            border-left: solid 1px var(--accent-color);
          }
        }
      }

      .title-box {
        display: block;
        margin-bottom: 0.9rem;

        .title {
          font-size: 1rem;
        }
      }
    }
  }
}

/***************** End Article List *******************/

/***************** Start Article Details *******************/
.article-details {
  .detail-cover-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3.5 / 1;
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0) 50%
      );
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .custom-breadcumb {
      position: absolute;
      z-index: 1;
      right: 0.91rem;
      left: 0.91rem;
      padding: 0.91rem 0;
      color: var(--White);
      font-size: 0.91rem;
      white-space: nowrap;
      overflow: auto;

      a {
        color: var(--White);
        font-size: 0.91rem;
      }
    }

    .text-holder {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding-bottom: 3rem;
      z-index: 1;

      .title {
        font-size: 1rem;
        font-weight: bold;
        color: var(--White);
        line-height: 2;
      }

      .summary {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        color: var(--White);
        margin-top: 0.9rem;

        p {
          margin: 0;
        }
      }
    }
  }

  .content-box {
    .article-info {
      margin-bottom: 2.46rem;

      .item {
        padding-left: 0.6rem;
        margin-left: 0.6rem;
        border-left: solid 1px var(--accent-color);
        margin-bottom: 0.7rem;

        span {
          display: inline-block;
          vertical-align: middle;
          color: var(--accent-color);
          line-height: 0.91rem;

          &:first-child {
            margin-left: 0.2rem;
          }
        }

        &:last-child {
          border: none;
        }
      }
    }

    .desc {
      font-size: 0.91rem;
      color: var(--text-dark-3);

      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 1rem;
        font-weight: bold;
        color: var(--text-dark-3);
        margin-bottom: 1.07rem;
      }

      p {
        font-size: 0.91rem;
        color: var(--text-dark-3);
        margin-bottom: 1.07rem;
      }

      img {
        max-width: 100%;
        height: auto !important;
        margin: 0 auto 1.07rem;
      }
    }
  }

  .sidebar {
    .article-heading-holder {
      position: sticky;
      top: 1rem;
      border-radius: 1.1rem;
      background-color: var(--text-light-3);
      overflow: hidden;
      padding: 1rem;

      .main-title {
        display: block;
        align-items: center;
        justify-content: start;
        font-size: 1.1rem;
        color: var(--Black);
        margin-bottom: 1rem;
      }

      .article-heading {
        list-style: none;

        li {
          a {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0 0;
            margin-bottom: 1rem;
            color: var(--texture-color-4);

            &: before {
              content: "";
              width: 0.3rem;
              height: 0.3rem;
              background-color: var(--texture-color-4);
              border-radius: 50%;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              -ms-border-radius: 50%;
              -o-border-radius: 50%;
            }

            .title {
              font-size: 0.91rem;
              font-weight: normal;
              margin: 0;
            }
          }

          &.active {
            a {
              color: var(--text-dark-3);

              &: before {
                background-color: var(--accent-color);
              }
            }
          }
        }
      }
    }

    margin: 0;
  }

  @media (max-width: 990px) {
    .detail-cover-image {
      aspect-ratio: 2.5 / 1;
    }
  }

  @media (max-width: 768px) {
    .detail-cover-image {
      aspect-ratio: 1.5/1;
    }
  }

  @media (max-width: 480px) {
    .detail-cover-image {
      aspect-ratio: 1.8 / 1;

      &:after {
        display: none;
      }

      .text-holder {
        position: relative;
        margin-top: 0.91rem;
        padding: 0;

        .title {
          font-size: 1rem;
          color: var(--text-dark-3);
        }

        .summary {
          font-size: 0.91rem;
          color: var(--texture-color-2);
        }
      }
    }
  }
}

/***************** End Article Details *******************/

.comments-frame {
  background-color: var(--lightGray);
  border-radius: 025rem;
  -webkit-border-radius: 025rem;
  -moz-border-radius: 025rem;
  -ms-border-radius: 025rem;
  -o-border-radius: 025rem;
  padding: 1.5rem;
}

.comments-form {
  .sec-title {
    display: block;
    color: var(--Black);
    font-size: 1.1rem;
    margin-bottom: 0.91rem;
  }

  .field-holder {
    position: relative;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: 0.3rem;

    .form-control-label {
      display: block;
      font-weight: normal;
      color: var(--text-dark-3);

      .star {
        color: var(--warning-color-1);
      }
    }

    .form-control {
      width: 100%;
      height: 3rem;
      border: none !important;
      outline: none;
      font-size: 0.91rem;
      padding: 0.3rem 1rem;
      resize: none;
      text-align: right;
      border: solid 1px var(--text-light-0) !important;
      background-color: var(--White);
      border-radius: 0.91rem;
      padding: 0.3rem 0.91rem;
      -webkit-border-radius: 0.91rem;
      -moz-border-radius: 0.91rem;
      -ms-border-radius: 0.91rem;
      -o-border-radius: 0.91rem;

      &::placeholder {
        color: #959595;
        font-size: 0.91rem;
        font-weight: normal;
      }

      &:disabled {
        background-color: transparent;
      }
    }

    textarea {
      min-height: 11.3rem;
    }
  }

  .rating-in-comment {
    .caption {
      color: var(--Black);
    }
  }

  .submit-btn {
    font-size: 0.91rem;
    color: var(--White);
    border: none;
    padding: 0.3rem 1.5rem;
    border-radius: 025rem;
    background-color: var(--accent-color2);
    cursor: pointer;
  }
}

.comments-list {
  margin: 2rem 0;

  .avatar {
    width: 3.07rem;
    min-width: 3.07rem;
    height: 3.07rem;
    background-color: var(--accent-color);
    border-radius: 0.6rem;
    margin: 0.3rem 0 00.91rem;
    -webkit-border-radius: 0.6rem;
    -moz-border-radius: 0.6rem;
    -ms-border-radius: 0.6rem;
    -o-border-radius: 0.6rem;

    svg {
      width: 2rem;
      stroke: var(--White);
      fill: none;
    }
  }

  .comment-head {
    position: relative;
    width: 100%;
    min-height: 3.9rem;
    padding: 025rem0.91rem;
    background-color: var(--bg-2);
    border-radius: 025rem;
    border: solid 1px var(--texture-color-7);

    &:before {
      content: "";
      position: absolute;
      left: 100%;
      top: 50%;
      width: 8px;
      aspect-ratio: 1 / 2;
      clip-path: polygon(0px 0, 100% 50%, 0 100%);
      background: var(--texture-color-7);
    }

    .date {
      .item {
        font-size: 0.8rem;
        color: var(--Black);

        svg {
          width: 1rem;
          height: 1rem;
          margin-left: 0.3rem;
          fill: var(--accent-color);
        }

        &:nth-child(2n) {
          margin-right: 0.91rem;
          padding-right: 0.91rem;
          border-right: solid 1px var(--texture-color-7);

          svg {
            fill: none;
            stroke: var(--accent-color);
          }
        }
      }
    }
  }

  .author {
    font-size: 0.91rem;
    font-weight: bold;
    color: var(--Black);
  }

  @media (max-width: 760px) {
    display: block !important;
    height: auto;

    .date {
      flex-direction: column;
    }
  }
}

.comment-body {
  padding: 0.91rem;

  .comment-content {
    font-size: 0.91rem;
    color: var(--Black);
  }

  .edNews__replyComment {
    cursor: pointer;
  }

  .action-btns {
    svg {
      cursor: pointer;
    }

    .like {
      .like-couner {
        color: var(--Black);
        margin-top: -3px;
        margin-left: 2px;
      }
    }
  }

  @media (max-width: 760px) {
    display: block !important;
    height: auto;
  }
}

.edn_article_gallery {
  ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;

    li {
      aspect-ratio: 1/1;
    }
  }
}

@media (max-width: 480px) {
  .categories-container {
    .item {
      width: 45%;
    }
  }
}