@media (max-width: 1400px) {
    .container{
     max-width: 1200px;
    }
    .news-image-wrapper{
     width: 400px;
     height: 320px;
    }
    .news-image{
     height: 320px;
    }
    .nav-menu a{
     padding: 15px 8px;
    }
 }
 @media (max-width: 1024px) {
     .top-banner {
         display: none;
     }
     .top-banner .search-section {
         display: none;
     }
     .mobile-logo-section{
         width: 90%;
     }
     .top-banner .logo-section {
         display: none;
     }
     .news-image-wrapper{
         width: 100%;
     }
     .mobile-nav-header {
         display: flex;
     }
 
     .mobile-menu-toggle {
         display: flex;
     }
 
     .mobile-search-toggle {
         display: flex;
     }
     .nav-menu {
         display: none;
         flex-direction: column;
         position: fixed;
         top: 60px;
         left: 0;
         right: 0;
         bottom: 0;
         background: var(--dark-blue);
         box-shadow: var(--shadow-lg);
         z-index: 9999;
         padding: 0;
         margin: 0;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
     }

     .nav-menu.active {
         display: flex;
     }

     body.menu-open .main-content,
     body.menu-open .hero-carousel,
     body.menu-open .footer {
         display: none;
     }
     
     body.menu-open main,
     body.menu-open .list-section,
     body.menu-open .article-section {
         display: none;
     }

     body.menu-open {
         overflow: hidden;
         position: fixed;
         width: 100%;
     }

     body.menu-open .main-nav {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         z-index: 10000;
     }
 
     .nav-menu li {
         width: 100%;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }
 
     .nav-menu li:last-child {
         border-bottom: none;
     }
 
     .nav-menu a {
         padding: 15px 20px;
         width: 100%;
     }
 
     .nav-menu a::after {
         display: none;
     }
 
     .nav-menu a.active,
     .nav-menu a:hover {
         background: rgba(255, 255, 255, 0.1);
     }
     .nav-menu .has-submenu .submenu {
        position: static;
         display: flex;
         flex-wrap: wrap;
         opacity: 1;
         visibility: visible;
         transform: none;
         box-shadow: none;
         background: rgba(0, 0, 0, 0.2);
         padding: 8px 10px;
         margin: 0 0 0 0;
         border-radius: 0;
         max-height: none;
         overflow: visible;
         gap: 8px;
     }
 
     .submenu li {
        width: auto;
        border-bottom: none;
        flex-shrink: 0;
     }
 
     .submenu li:last-child {
         border-bottom: none;
     }
 
     .submenu a {
         padding: 8px 16px;
         color: rgba(255, 255, 255, 0.85);
         font-size: 14px;
         display: inline-block;
         transition: var(--transition);
         white-space: nowrap;
         border-radius: 4px;
     }
 
     .submenu a:hover {
         background: rgba(255, 255, 255, 0.15);
         padding-left: 16px;
         color: var(--white);
     }
     .main-nav {
         top: 0;
     }
 
     .top-banner {
         padding-top: 10px;
         padding-bottom: 10px;
         min-height: auto;
     }
 
     .top-banner-content {
         min-height: auto;
     }
 
     .news-grid {
         flex-direction: column;
     }
 
     .news-box,
     .announcement-box {
         flex: 1 1 auto;
         width: 100%;
     }
     .news-content {
         flex-direction: column;
     }
 
     .news-pagination-custom {
         top: 10px;
         left: 10px;
         gap: 6px;
     }
     .news-pagination-custom{
         top: 15px !important;
     }
     .news-nav{
         bottom: 1px;
     }
     .news-page-num {
         width: 28px;
         height: 28px;
         font-size: 12px;
     }
     .dynamics-grid {
         flex-direction: column;
     }
 
     
 
     .dynamics-box{
         width: 100%;
     }
 
     .service-station-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 25px;
     }
 
     
 }
 
 @media (max-width: 768px) {
     .top-banner-content {
         flex-wrap: wrap;
     }
 
     .service-station-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
     }
 
     .logo-text {
         font-size: 14px;
     }
 
     .search-input {
         width: 200px;
     }
     .news-image-wrapper{
         height: auto;
         max-height: 339px;
     }
     .news-image{
         height: auto;
         max-height: 339px;
     }
     .search-input:focus {
         width: 220px;
     }
 
     .hero-carousel {
         height: 300px;
     }
 
     .hero-swiper .swiper-button-next,
     .hero-swiper .swiper-button-prev {
         width: 40px;
         height: 40px;
     }
 
     .hero-swiper .swiper-button-next::after,
     .hero-swiper .swiper-button-prev::after {
         font-size: 20px;
     }
 
     
 
     .section-header h2 {
         font-size: 20px;
     }
 
     .news-content {
         flex-direction: column;
     }
 
     .news-pagination-custom {
         top: 10px;
         left: 10px;
         gap: 6px;
     }
     .news-pagination-custom{
         top: 15px !important;
     }
     .news-nav{
         bottom: 5px;
     }
     .news-page-num {
         width: 28px;
         height: 28px;
         font-size: 12px;
     }
 
     .role-model-section {
         padding: 30px 20px;
     }
     
     .role-model-section .section-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
     }
     
     .role-model-section .section-header .more-link {
         align-self: flex-end;
     }
 
     .footer-content {
         flex-direction: column;
         text-align: center;
     }
 
     .footer-left,
     .footer-right {
         flex: 1 1 auto;
         width: 100%;
     }
 }
 @media (max-width: 600px) {
     .mobile-logo-section img{
         height: 35px;
     }
 }
 @media (max-width: 480px) {
     .container {
         padding: 0 15px;
     }
     .mobile-logo-section img{
         width: 100%;
         height: auto;
     }
     .mobile-search-toggle{
         padding: 2px;
     }
     .logo-text {
         font-size: 12px;
     }
 
     .search-input {
         width: 150px;
         font-size: 12px;
         padding: 8px 12px;
     }
 
     .hero-carousel {
         height: 250px;
     }
 
     .role-model-item {
         min-width: 180px;
     }
 
     .role-model-item.active {
         min-width: 250px;
     }
 
     .role-model-image {
         width: 80px;
         height: 80px;
     }
 
     .role-model-item.active .role-model-image {
         width: 100px;
         height: 100px;
     }
 
     .main-content {
         padding: 20px 0;
     }
 
     .news-box,
     .announcement-box,
     .dynamics-box {
         padding: 20px;
     }
 
     .service-station-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }
 
     .service-station-icon {
         width: 70px;
         height: 70px;
     }
 
     .service-station-icon svg {
         width: 28px;
         height: 28px;
     }
 
     .service-station-label {
         font-size: 13px;
     }
 }