@media (min-width: 1170px) {
  .nav-button {display: none;}
  .bottom-navigation {display: none;}
}

@media (max-width: 1170px) {

  .preview-section .main-image {height: 230px}
  .nav-button > span {font-size: 3.4rem;}
  .nav-header {display: flex;align-items: center;}
  .nav-header .list-items {--gap:20px;gap:var(--gap);flex-direction: column;position: fixed;z-index: 4;background: var(--primary-color);right: 0;top: 0;bottom: 0;padding-top: 50px;width: min(300px, 30vw);transform: translateX(100%);transition: .4s;}
  html[dir="ltr"] .nav-header .list-items {transform: translateX(-100%);right: unset;left: 0;}
  .header.active-menu + .header-wrapper .list-items {transform: translateX(0);}
  .close-menu {position: absolute;top: 20px;order: -1;width: 20px;aspect-ratio: 1;align-self: start;padding-inline-start: 30px;}
  .close-menu:before {content: "\e92a";font-family: 'icomoon';color: hsl(204 100% 100% / 1);}

  .header-wrapper .list-items .list-item {width: 100%;text-align: center;}
  .header-wrapper .list-items .list-item a {width: 100%;}
  .header-wrapper .list-items .list-item:not(:nth-last-child(2)) a:before {content: "";display: block;position: absolute;left: 0;right: 0;top: calc(100% + (var(--gap) / 2));border: 1px solid transparent;border-image: linear-gradient(to left, rgba(179, 179, 179, 0) 0%, hsl(204 100% 46% / 1) 50%, rgba(179, 179, 179, 0) 100%);border-image-slice: 1;margin-inline: 20px}
  .nav-header .list-items .list-item a:after {display: none}
  .header .header-top {padding-inline: 10px}
  .nav-header .list-items .list-item a {color: hsl(204 100% 100% / 1);font-weight: 500}
  .nav-header .list-items .list-item:is(:hover, :focus, .active) a {color: hsl(204 100% 100% / 1);font-weight: 900}


  .submenu.list-items {position: static;opacity: 1;pointer-events: all;padding: 0;justify-content: start;gap: 0;max-height: 0;overflow: hidden;}
  .list-item:has(.submenu) {flex-direction: column;}

  .submenu.list-items .list-item {text-align: center;font-size: 1.4rem;}
  .submenu a {font-weight: 600 !important;}
  .submenu.list-items li a:before {content: "" !important;display: block;position: absolute;left: 0;right: 0;border: 1px solid transparent;border-image: linear-gradient(to left, rgba(179, 179, 179, 0) 0%, hsl(204 100% 46% / 1) 50%, rgba(179, 179, 179, 0) 100%);border-image-slice: 1;top: unset !important;bottom: -1px !important;margin-inline: 50px !important;}
  .submenu a:before {content: unset !important;}
  .nav-header .list-item:has( .submenu) a:after {content:"" !important}
  .list-item:has(.submenu):after {color: white;border-color: white;}
  .list-item:has(.submenu):after {content: unset}
  .list-item:has(.submenu) > a {display: flex;align-items: center;justify-content: center;gap: 10px;}
  .list-item:has(.submenu) > a span {font-size: 1.2rem;}
  .list-item:has(.submenu) .submenu {justify-content: start}
  .icon-arrow-bottom {transition: .4s;}
  .icon-arrow-bottom.rotated {transform: rotate(180deg);}
}




@media (min-width: 768px) {
  .hero-section .swiper-pagination {
    display: none;
  }
}


@media (max-width: 767px) {

  body {
    --padding-section: 20px;
  }

  .header-wrapper {padding: 0;}
  .search-wrapper.site-search {display: none;}
  .header-top .primary-button {display: none;}
  .header .header-top {justify-content: center;}
  .nav-header .list-items {justify-content: center; padding: 0;left: 0;width: 100%;}
  .header .header-top .logo img {}


  .header-wrapper .nav-button {display: none;}
  .bottom-navigation button.nav-button:before {content: "\e926";font-family: 'icomoon';}
  .bottom-navigation {position: fixed;bottom: 0;left: 0;right: 0;height: 60px;background: hsl(199 100% 36% / 1);z-index: 1;display: flex;align-items: center;justify-content: center;gap:40px;padding-inline: 20px;}
  .bottom-navigation .nav-button {font-size: 3rem;display: flex;align-items: center;justify-content: center;}
  .bottom-navigation button:not(:last-child):after {content: "";position: absolute;left: calc(-50% - 5px);transform: translateX(-50%);top: 0;bottom: 0;width: 1px;display: block;background: hsl(0 0% 100% / 1);}
  html[dir="ltr"] .bottom-navigation button:not(:last-child):after {left: unset;right: calc(-50% - 5px);transform: translateX(50%);}


  .nav-home:before {content: "\e94e";font-family: 'icomoon';}
  .search-button:before {content: "\e918";font-family: 'icomoon';}
  .nav-social:before {content: "\e913";font-family: 'icomoon';}
  .bottom-navigation button {width: 30px;height: 30px;background: transparent;color: white;font-size: 1.8rem;display: flex;align-items: center;justify-content: center;position: relative;}
  .bottom-navigation .search-button {font-size: 2.2rem;}
  .bottom-navigation .social-list {position: absolute;bottom: 35px;left: 50%;transform: translateX(-50%);opacity: 0;transition: .4s;display: flex;flex-direction: column;}
  .nav-social.active .social-list {opacity: 1;}
  .header {padding-block: 15px;}
  .header .logo {max-width: 200px}


  .swiper-pagination {bottom: 90px !important;display: flex;align-items: center;justify-content: center;gap: 10px;}
  .swiper-pagination-bullet {--size: 16px;width: var(--size);height: var(--size);}
  .swiper-pagination-bullet {margin: 0 !important;}
  .hero-section .swiper-wrapper {height: 450px;}
  .section.about-us-section {padding-inline: 20px;}
  /*.hero-section .swiper-wrapper img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}*/

  .about-us-section .about-details-wrapper {max-width: unset;position: relative;z-index: 2;}

  .about-us-section .cards-wrapper {grid-template-columns: 1fr;}

  .section.news-section {padding-inline: 20px;}

  .news-section .swiper-slide {padding: 0}
  .is-sub-inner-page h2.page-header__title {display: none;}
  .is-sub-inner-page li.breadcrumb__item:last-child {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
  .is-sub-inner-page .section.page-header.has-bg {min-height: 100px}
  .about-us-section .about-details:before {opacity: .4;z-index: 1;background-size: 64%;background-position: bottom;}

  .section.stats-section {padding-inline: 20px;padding-bottom: var(--padding-section);}

  .section.hero-section .swiper-pagination {bottom: 20px !important;}
  .stats-section .cards-wrapper {flex-direction: column;margin-inline: unset}
    .stats-section .cards-wrapper > .card {width: 100%;}
  .news-section .swiper-pagination {bottom: 0 !important;}
  .section.news-section .cards-wrapper {grid-template-columns: 1fr;}
  .partners-section .swiper-pagination {bottom: 0px !important;}
  .partners-section .swiper.partners-swiper , .news-section .news-swiper{padding-bottom: 30px !important;}
  .section.feedback-section {padding-inline: 20px;}
  .feedback-section .swipe-content {flex-direction: column-reverse;justify-content: start;align-items: start;}
  .mobile-swiper-content {display: flex;flex-direction: row-reverse;gap: 20px;align-items: center;}
  .feedback-section .swipe-title {flex-direction: column;align-items: start;gap:2px;}
  .partners-section .swiper-slide > * {width: calc(50% - 10px)}
  .feedback-section .swiper-button {bottom: 0px !important;top: unset !important;}
  .feedback-section .swiper-button.swiper-button-prev {left: 50%;transform: translateX(calc(50% - 35px + 25px));right: unset;}
  .feedback-section .swiper-button.swiper-button-next {left: 50%;transform: translateX(calc(50% - 35px - 25px));}
  .feedback-section .swipe-content {max-width: unset;}
  .swiper.feedback-swiper {padding-bottom: 50px;}
  .related-news, .section-album {padding-inline: 20px;}
  .section-video .swiper-button{--size: 30px;}






  html[dir="ltr"] .feedback-section .swiper-button.swiper-button-prev {left: unset;transform: scaleX(-1) translateX(calc(50% - 35px + 25px));right: 50%;}

  html[dir="ltr"] .feedback-section .swiper-button.swiper-button-next {right: 50%;left: unset;transform: scaleX(-1) translateX(calc(50% - 35px - 25px));}


  .partners-section .views-row .card {width: 100%;background: white;display: flex;align-items: center;justify-content: center;}
  .partners-section .views-row .card img{width: 80%;height: 80%;}
  .views-element-container .partners-section {padding: 0 20px;display: block;}
  .stats-section .card img {width: 50px;height: 50px;}
  .stats-section .card .number {line-height: 1;font-size: 2.4rem}
  .stats-section .card {padding: 12px;}
  .stats-section .card .label {font-size: 1.3rem;font-weight: 500}






  /*general style*/
  .inner-page .section-title {--section-title-size: clamp(1.8rem,3vw,2.2rem);}
  .cards-wrapper{grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;}
  .stats-section .cards-wrapper {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
  .page-header {padding-inline: 20px;min-height: 150px}
  .search-section, .search-results-section {padding-inline: 20px}
  .intro-section p, .page-desc {text-align: justify;}
  .section-film-video .card.overlay:first-child {grid-column: unset;}

  /*about page*/

  .intro-section {padding-inline: 20px;}
  .manager-section .image-wrapper {margin: 0;flex-shrink: 0;width: 120px;box-shadow: 0 0 0 6px white;align-self: start}
  .manager-section .inner-section {flex-direction: column-reverse;gap: 10px;}
  .manager-section .inner-section:before {opacity: .4;background-size: 80%}
  .manager-section .section-info {z-index: 2;}
  .flags-section .flags-items {grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));}
  .team-section {padding-inline: 20px;}
  .section-social {padding-inline: 20px;padding-top: calc(var(--padding-section) * 3);}
  .member-modal__body {padding-top: 40px}
  .member-modal__image-wrap {aspect-ratio: 1;width: 200px;height: auto;margin: 0 auto;}

  /*learning*/
  .preview-section {padding-inline: 20px;}
  .gallery-section {padding-inline: 20px;}
  .section-announcement {margin-inline: 20px;}
  .learning-online-section {padding-inline: 20px;}


  /*publications*/
  .sidebar .list-item {position: relative;}
  .app-inner {flex-direction: column;}
  .sidebar {position: static;width: auto;margin-bottom: 0;margin-inline: 20px}
  .content .cards-wrapper {grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));}
  #edit-actions input {width: 0;}
  .modal-body {flex-direction: column;margin-top: 20px;}
  .modal-image {overflow: hidden;width:100%}
  #edit-actions , #pub-topics-dock {display:none;}



  /*knowledge*/
  .sidebar-input.search-item input, .sidebar-input.date-item input {min-height: 32px;width:100%;background: transparent}
  .sidebar-input.date-item input.empty::before {content: "Choose a date";color: #888;position: absolute;margin-inline-start: 8px;pointer-events: none;}

  .section-video .swiper.video-swiper {max-width: calc(100vw - 40px);}
  .section-video .swiper-slide > * {max-width: unset}
  .section-form-inner {flex-direction: column;gap:30px}
  .section-form .form-details > * + * {margin-top: var(--spacer-1);}
  .sidebar .list-item:not(.not-clickable) a {calc(var(--padding-card) / 1.5) var(--padding-card)}
  .content {padding-inline: 0}
  .content .section-charts {padding-inline: 20px;}
  .content .section-questions {padding-inline: 20px;}
  .high-commission section#questions {padding-inline: 0;}
  .section-form {margin-inline: 20px;}
  .cards-by-type:has( .views-element-container) {padding-inline: 20px;}
  .cards-by-type .section.news-section {padding: 0;}
  .search-section .form {flex-direction: column;}
  .search-section .form input {min-height: 45px;}
  .inner-page.high-commission .content {padding: 20px;}
  .learning-online-section .cards-wrapper .views-element-container > * {flex-direction: column;}
  .learning-online-section .cards-wrapper .views-element-container > * .views-row {width: 100%;}

  main:has(#knowledge-exposed-form) .cards-wrapper:has(.swiper) .swiper-slide .card {max-width: unset; width: 100%;}
  main:has(#knowledge-exposed-form) .swiper-pagination {bottom: 0 !important;}
  main:has(#knowledge-exposed-form) .swiper {max-width: calc(100vw - 55px);padding-bottom: 0}
  main:has(#knowledge-exposed-form) .modal-image {min-height: 250px}
  /*footer*/
  .nav-wrapper {display: grid;grid-template-rows: 0fr;transition: .7s;}
  .nav-wrapper .nav-list {overflow: hidden;}
  .nav-column.active .nav-wrapper {grid-template-rows: 1fr;}
  .footer .nav-title:after {content: "\e923";font-family: 'icomoon' !important;font-size: 1.1rem;user-select: none;transition: .4s;}
  .nav-column.active .nav-title:after {transform: rotate(180deg);}
  .footer .nav-title {display: flex;align-items: center;gap: 8px;margin-bottom: var(--spacer-3);}
  .nav-column {align-self: start;}
  .footer .footer-columns > * {flex: unset;width: calc(50% - var(--spacer-2));}
  .footer .footer-columns {justify-content: start;padding-inline: 20px;}
  .footer .footer-columns > *:has(.nav-column.newsletter), .nav-column.newsletter {flex: unset;width: auto;}
  .footer .footer-columns > *:has(.logo-column) {width: 100%;}
  .logo-column {display: flex;flex-direction: column;justify-content: center;margin-bottom: 20px;align-items: start;}
  .logo-column img {max-width: 160px;}
  .footer .footer-contact {justify-content: center;align-items: center;}
  .nav-column.newsletter .nav-title:after {content: unset;}
  .footer .newsletter-input {width: 100%;}
  .footer .newsletter-wrapper {width: 100%;}
  .footer :is(.nav-list, .nav-desc) {font-size: 1.3rem}
  .footer {padding-bottom: 60px}
}


@media (max-width: 300px) {
  .team-section .cards-wrapper {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
  .logo-column {flex-wrap: wrap;justify-content: center;}
}