/* ===== TABLET ===== */
@media (max-width: 1024px) {

    .similar-grid{
        grid-template-columns: 1fr 1fr;
    }
    .product-single-grid{
        grid-template-columns: 1fr;
    }
    .what-we-aim-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aim-card:nth-child(2) {
        border-right: none;
    }

    .aim-card:nth-child(1),
    .aim-card:nth-child(2) {
        border-bottom: 1px solid #e5e7eb;
    }

    .footer-actions {
        grid-template-columns: 1fr;
        gap: 32px;
    }

     .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar {
        border-right: none;
        padding-right: 0;
    }

     .about-page .about-grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-page .about-icons {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-page .about-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-page .about-iso {
        flex-direction: column;
        text-align: center;
    }

     .about-services-inner {
        grid-template-columns: 1fr;
    }

    .about-services-left {
        padding: 50px 40px;
    }

    .about-services-left h2 {
        font-size: 30px;
    }

    .about-services-right {
        min-height: 300px;
    }

      .lobp-circles {
        gap: 20px;
    }

    .lobp-circle {
        margin-left: 0;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {

    .hero-slider .hero-slide{
        text-align: left !important;
    }

    .catalog-page{
        padding: 30px 0;
    }

    .category-hero-content, .page-hero-content{
        padding: 20px 0;
    }

    .uo-categories-grid {
        grid-template-columns: 1fr;
    }
    .uo-cat,
    .uo-cat-wide {
        grid-column: span 1;
        height: 220px;
    }

    .similar-grid{
        grid-template-columns: 1fr;
    }

    .similar-products{
        margin: 50px 0 100px 0;
    }

    .products-grid{
        grid-template-columns: 1fr;
    }

    .product-short-description ul li{
        font-size: 13px;
    }

    .category-hero p, .page-hero p{
        font-size: 14px;
    }

    .search-toggle{
        display: none;
    }

    .about-section .about-icons{
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .distributor > .container > .distributor-title{
        font-size: 28px;
    }

    .distributor{
        padding: 50px 0;
    }

    .distributor-text{
        font-size: 14px;
    }

    .distributor > .container{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }

    .about-page .about-iso{
        gap: 20px;
    }

    .product-info .product-excerpt p{
        font-size: 14px;
    }

    .product-actions .btn{
        padding: 10px;
    }

    .product-safety-buttons a{
        padding: 10px;
    }

    .container-partners{
        grid-template-columns: 1fr;
    }

    .api-class-circles{
        flex-wrap: wrap;
        justify-content: center;
    }

    .api-class-box h3{
        text-align: center;
    }

    .api-class-top {
        grid-template-columns: 1fr;
    }

    .eolcs-container{
        padding: 0;
    }

    .eolcs-section{
        background: #fff;
    }

    .category-hero, .page-hero{
        padding: 20px 0;
        background-attachment: unset; 
    }

    .about-page .about-cert{
        grid-template-columns: 1fr;
    }

    .header-container .box{
        justify-content: space-between;
        width: 100%;
    }

    .site-header .header-container{
        padding: 0;
    }
    
    .hero-slider {
        /* margin-top: 56px; */
    }

    .hero-slider .hero-slide {
        min-height: 420px;
        text-align: center;
    }

    .hero-slider .hero-inner {
        justify-content: center;
    }

    .hero-slider .hero-content {
        max-width: 100%;
        padding: 0 24px;
    }

    .hero-slider .hero-content h1 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .hero-slider .hero-content p {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .hero-slider .btn-primary {
        padding: 12px 24px;
        margin: 0 auto;
        font-size: 12px;
    }
    .swiper-pagination{
        bottom: 3px !important;
    }

    /* Усиливаем затемнение */
    .hero-slider .hero-overlay {
        background: rgba(30, 39, 73, 0.85);
    }

    /* Убираем стрелки */
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .why-us{
        padding: 50px 0;
    }

    .global-network-title{
        font-size: 20px;
        margin-bottom: 32px;
    }

    .global-network-text{
        font-size: 14px;
    }

    .global-network{
        padding: 50px 0;
    }

    .why-us-title{
        font-size: 20px;
        margin-bottom: 32px;
    }

    .why-us-text{
        font-size: 14px;
        margin: 0 auto 50px;
    }

    .why-us-center{
        display: none;
    }

    .why-us-layout{
        grid-template-columns: 1fr;
    }

    .container{
        width: 98%;
        padding: 0 10px;
    }

    .what-we-aim {
        padding: 50px 0;
    }

    .global-network-image img{
        margin: 20px 0;
    }

    .about-section{
        padding: 30px 0;
    }

    .what-we-aim-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .what-we-aim-grid {
        grid-template-columns: 1fr;
    }

    .aim-card {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 36px 24px;
    }

    .aim-card:last-child {
        border-bottom: none;
    }

     .site-footer {
        padding: 50px 0 32px 0;
    }

    .footer-title {
        font-size: 20px;
    }

    .footer-contacts {
        gap: 24px;
    }

    .footer-contact {
        font-size: 14px;
    }

    .footer-btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .about-section h2{
        font-size: 20px;
    }

    .about-section p{
        font-size: 14px;
    }

    .product-card {
        grid-template-columns: 1fr;
    }

      .about-page .about-hero h1 {
        font-size: 28px;
    }

    .about-page .about-section {
        padding: 60px 0;
    }

    .about-page .about-section h2 {
        font-size: 26px;
    }

    .about-page .about-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .about-page .about-focus span {
        width: 100%;
        text-align: center;
    }

     .about-services-block {
        margin: 60px 16px;
    }

    .about-services-left {
        padding: 40px 24px;
    }

    .about-services-left h2 {
        font-size: 26px;
    }

    .about-services-list li {
        font-size: 15px;
    }

      .lobp-capacity {
        padding: 60px 16px;
    }

    .lobp-title {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .lobp-circles {
        gap: 16px;
    }

    .lobp-circle {
        width: 130px;
        height: 130px;
    }

    .lobp-circle strong {
        font-size: 14px;
    }

    .lobp-text {
        font-size: 14px;
    }

      .additives-section {
        padding: 60px 0;
    }

    .additives-title {
        font-size: 22px;
        margin-bottom: 36px;
    }

    .additives-row {
        padding: 18px 18px;
    }

    .additives-col {
        font-size: 13px;
    }

      .eolcs-section {
        padding: 40px 0;
    }

    .eolcs-main-title {
        font-size: 22px;
    }

    .eolcs-subtitle {
        font-size: 16px;
    }

    .eolcs-block {
        padding: 30px 0;
    }

    .eolcs-title {
        font-size: 16px;
    }

       .lubricants-main-title {
        font-size: 22px;
    }

    .lubricants-term,
    .lubricants-desc {
        padding: 14px 16px;
    }

    .api-class-title {
    font-size: 22px;
  }

  .api-class-table th,
  .api-class-table td {
    font-size: 11px;
  }


  .tech-title-main {
    font-size: 22px;
  }
  .tech-title {
    font-size: 16px;
  }
}


@media (max-width: 900px) {
    .product-single-grid {
        grid-template-columns: 1fr;
    }

     .additives-row {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .additives-head {
        display: none;
    }

    .additives-type {
        font-size: 13px;
    }

      .eolcs-grid-2 {
        grid-template-columns: 1fr;
    }

    .eolcs-image img {
        max-width: 220px;
    }

     .lubricants-row {
        grid-template-columns: 1fr;
    }

    .lubricants-term {
        background: #eef2f7;
    }

    .api-class-top {
        grid-template-columns: 1fr;
    }

    .uo-partner > .uo-container > .uo-advantages{
        padding: 15px;
    }
}


@media (max-width: 768px) {
    /* .category-hero,
    .page-hero {
        min-height: 240px;
    } */

    .category-hero h1,
    .page-hero h1 {
        font-size: 24px;
    }

    .technical-tabs-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .tech-tab {
        text-align: left;
    }

    .uo-404 {
        padding: 100px 0;
    }

    .uo-404-code {
        font-size: 96px;
    }

    .uo-404-title {
        font-size: 26px;
    }

    .uo-404-text {
        font-size: 15px;
    }

    .uo-partner > .uo-container > .uo-title {
    font-size: 28px;
  }

  .uo-partner > .uo-container > .uo-subtitle {
    font-size: 20px;
  }
}



/* =========================
   SMALL MOBILE (<= 480px)
   ========================= */
@media (max-width: 480px) {

    .hero-slider .hero-slide {
        min-height: 360px;
    }

    .hero-slider .hero-content h1 {
        font-size: 20px;
    }

    .hero-slider .hero-content p {
        font-size: 13px;
    }

    .swiper-pagination {
        bottom: 3px !important;
    }
}


@media (min-width: 900px) and (max-width: 1199px) {
    .hero-slider .hero-content h1 {
        font-size: 22px;
    }

    .hero-slider .hero-content p {
        font-size: 12px;
    }

    .hero-slider .hero-content {
        padding: 0 0 0 20px;
    }

    .hero-slider .btn-primary{
        font-size: 12px;
    }
}


@media (max-width: 1200px) {
  .uo-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .uo-cat-wide {
    grid-column: span 2;
  }
}