@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    --color-primary: #002169;
    --color-secondary: #E1251B;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html{
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 400;
    height: 100%;
    width: auto;
    margin: 0%;
    padding: 0%;
    overflow-x: hidden;
}

body,main {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 0;
}

main section:only-child {
    flex: 1 0 0;
}

h1,h2,h3{
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 800;
}



section{
    padding: 8.6vw 10.42vw;
}


img {
    display: block;
    max-width: 100%;
}

a:-webkit-any-link{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.showPopupForm {
    cursor: pointer;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Flex', sans-serif;
    width: 13.55vw;
    height: 2.9vw;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    text-align: center;
    padding:  0.5vw 1vw;
    font-size: 0.83vw;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
}

.btn:hover{
    border: 2px solid #ebebeb;
    color: #ebebeb;
}

.top-image{
    background-image: url("/static/img/color-line-f.png");
    background-size: cover;
    position: relative;
    display: flex;
    width: 100%;
    height: 5px;
    z-index: 4000;
}
.heading{
    display: flex;
    position: relative;
    flex-direction: column;
    background-color: #fff;
    padding: 0.7vw 10.42vw;
    font-size: 0.5vw;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    z-index: 3000;
}

.heading h2{
    font-weight: 400;
    margin: 0;
}

.head-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #002169;
}

.head-info img{
    width: 1vw;
    height: auto;
}

.right-head-info{
    width: 40%;
    display: flex;
    font-size: 0.73vw;
    justify-content: end;
    align-items: center;
    margin-left: auto;
}
.email-info{
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.75vw;
    margin-right: 4vw;
    text-transform: uppercase;
}

.lang{
    margin-left: 1.75vw;
    display: flex;
    align-items: center;
    gap: 0.7vw;
}

.divider{
    border: none;
    border-right: 2px solid #002169;
    width: 0;
    height: 0.75vw;
    box-sizing: border-box;
}

.navbar{
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: #fff;
    padding: 0vw 10.4vw;
    justify-content: space-between;
    z-index: 3000;
}


.container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

.logo{
    width: 10.42vw;
    height: auto;
    margin-bottom: 2.5vw;
}

.nav-links{
    width: 76.2%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.nav-links li{
    list-style: none;
    padding: 0;
}

.nav-links a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #002169;
    font-weight: 800;
    font-size: 0.83vw;
    gap: 0.32vw;
    height: 5.72vw;
    text-transform: uppercase;
    cursor: pointer;
}

.dropdown-arrow{
    width: 0.4vw;
    height: auto;
}

.menu-icon{
    display: none;
}

.nav-outer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
  }


.about-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 97%;
    background: #F8FAFB;
    padding: 3vw 1.6vw;
    display: none;
    flex-direction: column;
    z-index: 3500;
}


.products-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    background: #F8FAFB;
    padding-left: 16.08vw;
    padding-right: 19vw;
    padding-top: 1.7vw;
    padding-bottom: 5vw;
    display: none;
    flex-direction: column;
    z-index: 3500;
}

.dropdown.open ~ .nav-outer-container {
    display: block;
}

.dropdown.open .about-menu{
    display: flex;
}

.dropdown.open .nav-name{
    border-bottom: 2px solid #E1251B;
}

.dropdown.open .dropdown-arrow{
    transform: rotate(180deg);
}

.dropdown.open nav{
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.dropdown-menu {
    width: 100%;
}

.dropdown.open .products-menu{
    display: flex;
}

.dropdown-close{
    position: absolute;
    width: 0.85vw;
    top: 1vw;
    right: 11vw;
    background: none;
    border: none;
    cursor: pointer;
}

.close{
    width: 0.85vw;
    height: 0.85vw;
}

.about-menu ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-direction: row;
    padding: 0;
    margin-left: 27.5vw;
    gap: 7vw;
    flex-wrap: wrap;
    row-gap: 2vw;
    margin-right: 10vw;
}

.products-menu ul{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3vw;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.about-menu li{
    height: auto;
}

.about-menu a{
    height: auto;
    font-size: 0.82vw;
    font-weight: 600;
    color: #002169;
    text-decoration: none;
    text-transform: none;
}

.products-menu li {
    position: relative;
    height: 11.5vw;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: start;
}


.nav-product{
    position: absolute;
    left: 0;
    width: auto;
    height: 6.7vw;
    margin-bottom: 0.8vw;
}

.big-nav{
    height: 6vw;
    top: 0.75vw;
}

.big-nav-1{
    height: 6.25vw;
    top: 0.5vw;
}

.products-menu a.product-link{
    margin-top: 8vw;
    font-size: 0.82vw;
    height: auto;
    font-weight: 800;
    color: #002169;
    text-decoration: none;
}


.products-menu a.product-link:hover {
    color: #E1251B;
}


.products-menu span{
    margin-top: 0.3vw;
    font-size: 0.65vw;
    color: #002169;
}

.container-1{
    background-image: url(/static/img/bg-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    height: 100%;
}

.container-1-info{
    width: 25.5vw;
}

.container-1 h1{
    font-size: 4.17vw;
    margin: 0;
    margin-bottom: 0.3vw;
}

.container-1 h2{
    font-size: 2.1vw;
    font-weight: 800;
    margin: 0;
    margin-bottom: 1.3vw;
}

.container-1 p{
    width: 25vw;
    line-height: 1.5;
    font-weight: 800;
    margin-bottom: 1.9vw;
}

.clients{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #002169;
    color: #fff;
    padding: 4.1vw 10.4vw;
    padding-bottom: 5.3vw;
}

.clients h1{
    font-size: 2.1vw;
    margin: 0;
    margin-bottom: 2.2vw;
}

.clients-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.1vw;
}
.client-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 26vw;

}
.frame-client-company{
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    height: 13.5vw;
    justify-content: center;
    align-items: center;
}
.frame-client-company img{
    width: 60%;
    height: auto;
    max-height: 50%;
}

.client-box p{
    font-size: 0.831vw;
    line-height: 1.2;
    margin-top: 1.3vw;
    padding: 0vw 1.2vw;
}

.production{
    padding: 3.5vw 10.4vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.production h1{
    color: #002169;
    font-size: 2.1vw;
    margin: 0;
    margin-bottom: 0.8vw;
}
.subhead{
    color: rgba(0,0,0,0.7);
    font-size: 0.83vw;
}

.grid-production-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2.6vw;
    gap: 0;
    width: 100%;
}

.product-card-mp{
    width: 100%;
    height: 17vw;
    padding-bottom: 2vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blue-1,.blue-2, .blue-3{
    background-image: url("/static/img/bg-blue.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.red-1, .red-2{
    background-image: url("/static/img/bg-red.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.white-1, .white-2{
    background-image: url("/static/img/bg-white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cyan-1, .cyan-2{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/static/img/bg-cyan.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.product-p{
    width: 100%;
    height: 10.417vw;
    position: relative;
    z-index: 2;
    object-fit: scale-down;
}

.product-p img{
    width: 100%;
    height: 10.417vw;
}

.motor-oil-bottle{
    top: 2vw;
    width: 100%;
    position: absolute;
    height: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-info{
    color: #fff;
    text-align: center;
    font-weight: 400;
    margin-top: auto
}

.product-info.white{
    color: #002169;
}

.product-title{
    display: flex;
    width: 100%;
    font-size: 1.05vw;
    margin: 0;
    margin-bottom: 0.5vw;
    justify-content: center;
}

.available-products{
    font-size: 0.83vw;
    font-weight: 200;
    margin: 0;
}


.shadow1{
    z-index: 1;
}

.small{
    width: 5.2vw;
    height: auto;
    position: absolute;
    transform: translateY(+5.2vw);
    z-index: 1;
}

.small-2{
    width: 4.5vw;
    height: auto;
    position: absolute;
    transform: translateY(+5.2vw);
    z-index: 1;
}

.medium{
    width: 7vw;
    height: auto;
    position: absolute;
    transform: translateY(+5.2vw);
    z-index: 1;
}

.big{
    width: 9vw;
    height: auto;
    position: absolute;
    transform: translateY(+5.2vw);
    z-index: 1;
}

.big-2{
    width: 6.5vw;
    height: auto;
    position: absolute;
    transform: translateY(+4.6vw);
    z-index: 1;
}

.red{
    transform: translateY(+5.2vw);
}

.blue{
    width: 3.5vw;
    transform: translateY(+5.2vw);
}

.big-i{
    transform: translateX(-0.8vw);
}
.container-2{
    background-color: #E1251B;
    padding: 0;
    display: flex;
    flex-direction: row;
}
.left-content{
    width: 50%;
    padding: 6vw 10.4vw;
    display: flex;
    flex-direction: row;
    color:#fff;
}
.motor-oil{
    position: relative;
    width: 14.5vw;
    height: auto;
    z-index: 2;
    display: initial;
    max-width: initial;
}
.shadow{
    position: absolute;
    width: 14.5vw;
    transform: translateX(-99%) translateY(+23vw);
    height: auto;
    z-index: 1;
        display: initial;
    max-width: initial;
}



.back-shadow{
    position: absolute;
    transform: translateX(-77%) translateY(-5%);
    z-index: 0;
    opacity: 0.5;
    width: 27.29vw;
    height: 27.29vw;
        display: initial;
    max-width: initial;

}

.content-info-2{
    padding: 0vw 2.3vw;
    height: 100%;
    z-index: 2;
}

.content-info-2 h1{
    font-size: 2.1vw;
    margin: 0;
    margin-top: 0.7vw;
}

.content-info-2 p{
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    margin-top: 1.5vw;
    margin-bottom: 2.2vw;
}

.right-content{
    width: 100%;
    background-image: url("/static/img/bg-2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}


.video-box-2{
    width: 15.5vw;
    height: auto;
}

.videos{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4.1vw 10.4vw;
}

.video-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.video-header h1 {
    position: absolute;
    color: #002169;
    font-size: 2.1vw;
    margin: 0 auto;
}

.video-header button {
    margin-left: auto;
}

.btn1 {
    font-family: 'Roboto Flex', sans-serif;
    background: transparent;
    border: 2px solid #002169;
    color: #002169;
    text-align: center;
    padding: 0.6vw 1.8vw;
    font-size: 0.83vw;
    font-weight: 800;
    cursor: pointer;
}

.btn1:hover {
    background-color: #002169;
    color: #fff;
}

.swiper-container-outer {
    width: 100%;
    margin-top: 2.2vw;
    overflow: visible;
}

.swiper-wrapper{
    overflow-y: visible;
}

.video-cards {
    width: 99.9%;
}

.swiper-slide {
    box-sizing: border-box;
}

.video-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    height: 99%;
}

.video-content {
    padding: 0.52vw;
    position: relative;
    width: 96%;
}

.video-content video {
    width: 100%;
    height: auto;
    display: block;
  }

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.5vw;
    height: 3.5vw;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-card span {
    color: #002169;
    padding: 1vw 1.5vw 2vw;
    font-weight: 600;
    font-size: 1.05vw;
}

.videos .swiper-pagination,
.news .swiper-pagination {
  position: relative !important;
  margin-top: 1.5vw;
  text-align: center;
}

.videos .swiper-pagination-bullet,
.news .swiper-pagination-bullet {
  width: 0.3125vw;
  height: 0.3125vw;
  background-color: #000;
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 0 0.4vw;
}

.videos .swiper-pagination-bullet-active,
.news .swiper-pagination-bullet-active {
  width: 1.75vw;
  border-radius: 0.26vw;
  background-color: #000;
}

.video-footer{
    display: none;
}

.news{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.8vw 10.4vw;
    background-color: #F5F7FA;
}

.news-header{
    width: 100%;
    display: flex;
    justify-content: center;
}

.news-header h1{
    color: #002169;
    font-size: 2.1vw;
    margin: 0;
}

.news-header .news-b{
    margin-left: auto;
}

.news-cards{
    margin-top: 1.7vw;
    display: flex;
    flex-direction: row;
    gap: 2vw;
}

.news-card{
    width: 100%;
    height: auto;
    background-color: #fff;
}

.news-img img{
    width: 96%;
    height: auto;
    padding: 0.51vw;
}

.news-content{
    padding: 1.1vw 1.6vw;
    padding-bottom: 2.4vw;
}
.news-card h2{
    font-size: 1.05vw;
    color: #002169;
    font-weight: 600;
    margin: 1.1vw 0vw;
}
.news-card span{
    color: rgba(0,0,0,0.6);
    font-weight: 400;
    display: flex;
    font-size: 0.73vw;
    width: 90%;
}

.news-footer{
    display: none;
}

.pre-footer{
    background-color: #242E3B;
    color: #fff;
    padding: 0 10.42vw;
    padding-top: 3.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inner{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.72vw;
    gap: 3vw;
}

.content-1{
    display: flex;
    flex-direction: column;
    width: 15vw;
    margin-right: 1vw;
}

.content-1 img{
    width: 11.8vw;
    height: auto;
}

.content-1 span{
    color: #7D8388;
    font-weight: 100;
    line-height: 1.5;
    margin-top: 2.3vw;
}
.dropdown-footer li{
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-footer a{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    font-size: 0.7vw;
    line-height: 1.4;
}

.dropdown-footer{
    display: flex;
    flex-direction: column;
    gap: 0.6vw;
    padding: 0;
    margin: 0;
}

.content-2, .content-3, .content-4, .content-5, .content-6{
    width: 8.5vw;
}

.footer-title{
    font-size: 0.95vw;
    margin: 0;
    margin-top: 0.5vw;
    margin-bottom: 1.2vw;
    font-weight: 400;
}

.no-options{
    padding: 1vw 0vw;
}

.footer{
    width: 100%;
}

.line{
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    margin-top: 2.7vw;
}

.end-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2.4vw 0vw;
}

.trademark{
    font-weight: 200;
}

.instagram-icon-footer{
    margin-right: 1.5vw;
    margin-left: auto;
}

.email-footer{
    font-size: 0.71vw;
    font-weight: 200;
    display: flex;
    align-items: center;
    gap: 0.7vw;
    margin-right: 7.5vw;
}

.lang-footer{
    font-size: 0.72vw;
    font-weight: 200;
    display: flex;
    align-items: center;
    gap: 0.7vw;
}

.divider-f{
    border: none;
    border-right: 1px solid #fff;
    width: 0;
    height: 0.75vw;
    box-sizing: border-box;
}

.bottom-image{
    background-image: url("/static/img/color-line-f.png");
    background-size: cover;
    display: flex;
    width: 100%;
    height: 10px;
}

.top-contacts-m{
    display: none;
}

/* Mobile Menu */

.mobile-menu{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 98%;
    background: #F8FAFB;
    padding-top: 7.5vw;
    padding-bottom: 0;
    flex-direction: column;
    z-index: 5500;
    overflow-y: auto;
}

.head-of-mobile-menu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0vw 5vw;
}

.lang-m{
    display: flex;
    align-items: center;
    gap: 3vw;
    font-size: 4vw;
    color: #002169;
}

.divider-m{
    border: none;
    border-right: 2px solid #002169;
    width: 0;
    height: 4vw;
    box-sizing: border-box;
}

.container-m{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 2vw;
    gap: 5vw;
    height: 100%;
}

.nav-links-m{
    display: flex;
    flex-direction: column;
    /* gap: 3.5vw; */
    padding: 0;
    margin: 0;
}

.navigation-m{
    background-color: transparent;
    display: flex;
    flex-direction: column;
    z-index: 6000;
}

.navigation-m ul{
    list-style: none;
    padding: 0;
}

.dropdown-point{
    position: relative;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #002169;
    font-weight: 800;
    font-size: 3.3vw;
    gap: 0.32vw;
    height: 14.04vw;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}



.dropdown-arrow-m{
    width: 2.5vw;
    height: auto;
}

.close-mobile-menu{
    width: 7vw;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}
.close-mobile-menu img{
    width: 7vw;
    height: auto;
}

.contacts-mobile-menu{
    display: flex;
    flex-direction: row;
    margin-top: auto;
    gap: 2.5vw;
    padding: 0vw 5vw;
    padding-bottom: 10vw;
}

.contacts-mobile-menu img{
    width: 5vw;
    height: auto;
}

.email-info-m{
    display: flex;
    align-items: center;
    font-size: 3vw;
    gap: 3vw;
    color: #002169;
}

a.nav-name-m{
    position: relative;
    font-size: 3.3vw;
    font-weight: 800;
    color: #002169;
    margin: 0vw 5vw;
}

.mobile-menu.open{
    display: flex;
}


.dropdown-menu-m {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #F8FAFB;
}

.dropdown-menu-m ul{
    display: flex;
    flex-direction: column;
    gap: 7vw;
    padding: 0;
    margin: 0;
    padding: 7vw 12vw;
}

.dropdown-menu-m a{
    text-decoration: none;
    color: #002169;
    font-weight: 800;
    font-size: 3vw;
}


.dropdown-m.open .dropdown-menu-m {
    max-height: 120vw;
    opacity: 1;
}

.dropdown-m.navigation-m.open {
    background-color: #F5F7FA;
}

.dropdown-m.open .about-menu-m{
    background-color: #F5F7FA;
}

.dropdown-m.open .products-menu-m{
    background-color: #F5F7FA;
}




.dropdown-m.open .dropdown-arrow-m{
    transform: rotate(180deg);
    /* transition: transform 0.1s ease; */
}

/*--- Catalog styles ---*/

.catalog{
    padding: 4vw 10.42vw;
}

.main-head-1{
    margin-top: 0.75vw;
    display: flex;
    flex-direction: column;
    color: #fff;
    margin-bottom: 2vw;
}

.main-head-1 h1{
    font-size: 2.1vw;
    margin: 0;
    margin-bottom: 0.5vw;
}

.catalog-btns{
    width: 100%;
}
.catalog-btns:not(.swiper-initialized) .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5vw;
    align-items: center;
}

.catalog-btns:not(.swiper-initialized) .swiper-slide {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

a.btn-c, .btn-c{
    display: block;
    font-family: 'Roboto Flex', sans-serif;
    width: auto;
    height: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    text-align: center;
    padding:  0.65vw 1vw;
    font-size: 0.83vw;
    font-weight: 600;
    cursor: pointer;
}

.product-catalog a.btn-c, .product-catalog .btn-c {
    background: #002169;
    border: none;
    color: #fff;
    text-align: center;
    margin-right: 1rem;
}

a.btn-c.active, .btn-c.active{
    background-color: #fff;
    color: #002169;
    border: none;
    font-weight: 800;
}

.product-catalog a.btn-c.active, .product-catalog .btn-c.active {
    background: #fff;
    color: #002169;
    border: none;
    font-weight: 800;
}

.product-catalog{
    padding: 4vw 10.42vw;
    background-color: #F5F7FA;
}

.products-general-info{
    display: flex;
    flex-direction: column;
    margin-bottom: 4.3vw;
}

.products-general-info h1{
    font-size: 1.55vw;
    color: #002169;
    margin: 0;
}

.products-general-info span{
    width: 57%;
    font-size: 0.83vw;
    color: rgba(0,0,0,0.7);
    font-weight: 400;
    line-height: 1.5;
}

.grid-catalog-products{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    margin-top: 3.2vw;
}

.product-card-ctg{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.2vw 2vw;
}

.product-card-ctg img{
    width: 11.5vw;
    height: 11.5vw;
    object-fit: contain;
}

.product-card-ctg h2{
    font-size: 1.05vw;
    color: #002169;
    margin: 0;
    margin-top: 3vw;
    align-self: flex-start;
}

.product-card-ctg span{
    font-size: 0.72vw;
    color: rgba(0,0,0,0.5);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0.5vw;
    margin-bottom: 1.5vw;
}

.buy-more-btns{
    margin-top: auto;
    display: flex;
    flex-direction: row;
    gap: 0.2vw;
}

.buy-now-btn{
    font-family: 'Roboto Flex', sans-serif;
    width: 7.3vw;
    height: 2.08vw;
    background: #E1251B;
    border: none;
    color: #fff;
    text-align: center;
    padding:  0.5vw 1vw;
    font-size: 0.65vw;
    font-weight: 600;
    cursor: pointer;
}

.more-details-btn{
    font-family: 'Roboto Flex', sans-serif;
    width: 7.3vw;
    height: 2.08vw;
    background: #0082CA;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 0.65vw;
    font-weight: 600;
    cursor: pointer;
}

.pagination-catalog{
    margin-top: 4.75vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}

.page-numbers{
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
}

.page-number{
    font-weight: 600;
    font-size: 1.1vw;
    color: #002169;
    background-color: transparent;
    border: none;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

.prev-page, .next-page{
    font-weight: 600;
    font-size: 1vw;
    color: #002169;
    background-color: transparent;
    border: none;
    width: 2vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.prev-page img, .next-page img{
    width: 0.7vw;
    height: auto;
}

.active-1{
    text-decoration: underline;
}

/*--- Product styles ---*/

.hero-container{
    display: flex;
    flex-direction: row;
    background-color: #F5F7FA;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    gap: 5.2vw;
    padding: 4.7vw 10.4vw;
    align-items: flex-start;
}

.product-image-p{
    display: flex;
    width: calc(712 / 1920 * 100vw);
    padding: 0vw 0vw;
    flex-flow: wrap;
    gap: 0;
}



.product-images-slider{
    display: flex;
    width: 100%;
    height: 6vw;
    overflow: hidden;
    margin-top: 1vw;
}

.product-images-slider .swiper-slide {
    background-color: #fff;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.product-images-slider .swiper-slide-thumb-active {
    border: 2px solid var(--color-secondary);
}

.product_image_slider-main {
    height: 32.3vw;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

.product_image_slider-main img {
    margin: auto;
}

.product-image-p img{
    height: 100%;
    object-fit: scale-down;
}

.product-images-slider img {
    width: 100%;
    height: 100%;
}

.right-side-p{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.product-information{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pages-p{
    display: flex;
    color: #002169;
    gap: 0.5vw;
    font-size: 0.72vw;
    margin-bottom: 0.75vw;
}

.head-product h1{
    font-size: 2.1vw;
    color: #002169;
    margin: 0;
    margin-bottom: 1.5vw;
}

.line-p{
    border: none;
    border-top: 2px solid rgba(0,0,0,0.1);
    width: 100%;
    margin-bottom: 1.5vw;
}

.product-description{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.description{
    font-size: 0.83vw;
    color: rgba(0,0,0,0.7);
    line-height: 1.5;
    margin-bottom: 2.5vw;
}

.specification{
    display: flex;
    flex-direction: column;
    margin-bottom: 2.3vw;
}

.specification h2{
    font-size: 1vw;
    color: #000;
    margin: 0;
    margin-bottom: 0.8vw;
}

.specification span{
    width: 87%;
    font-size: 0.83vw;
    color: rgba(0,0,0,0.7);
    line-height: 1.5;
}

.variants{
    display: flex;
    flex-direction: column;
}

.variants h2{
    font-size: 1vw;
    color: #000;
    margin: 0;
    margin-bottom: 0.8vw;
}

.variants span{
    width: 87%;
    font-size: 0.83vw;
    color: rgba(0,0,0,0.7);
    line-height: 1.5;
}

.btns-p{
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
    margin-top: auto;
}

.btn-p, a.btn-p{
    font-family: 'Roboto Flex', sans-serif;
    width: 100%;
    height: 2.9vw;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 0.85vw;
    font-weight: 600;
    cursor: pointer;
}

.buy-now{
    background: #E1251B;
}

.broucher{
    background: #0082CA;
}

.other-products{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5vw 10.4vw 5vw;
    background-color: #F5F7FA;
}

.other-products h1{
    font-size: 2.1vw;
    color: #002169;
    margin: 0;
    margin-bottom: 3.5vw;
    font-weight: 700;
}

.grid-product-cards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    width: 100%;
}

.product-card-p{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.2vw 2vw;
}

.product-card-p img{
    width: 11.5vw;
    object-fit: contain;
    height: 100%;
}

.product-card-p h2{
    font-size: 1.05vw;
    color: #002169;
    margin: 0;
    margin-top: 3vw;
}

.product-card-p span{
    font-size: 0.72vw;
    color: rgba(0,0,0,0.5);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0.2vw;
}

.head-product-mobile{
    display: none;
}

/* History section */
.main-history{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.7vw 23.8vw;
    background-color: #002169;
    color: #fff;
    padding-bottom: 6vw;
}

.main-history-head{
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 1.5vw;
    width: 100%;
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.text-with-divider-h{
    font-size: 0.72vw;
    font-weight: 200;
    display: flex;
    gap: 0.55vw;
    margin-bottom: 0.2vw;
}

.main-history-head h1{
    font-size: 2.1vw;
    margin: 0;
    margin-bottom: 1.5vw;
}

.short-story {
    font-size: 1.25vw;
    line-height: 1.4;
    margin: 0;
    color: #fff;
    width: 100%;
    margin-bottom: 4.5vw;
    font-weight: 600;
}

.short-story p{
    margin: 0;
}

.history-images{
    display: flex;
    flex-direction: row;
    gap: 1.5vw;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.newspaper{
    width: 12.34vw;
    height: auto;
}

.barrel-1{
    width: 19.5vw;
    height: auto;
}

.barrel{
    width: 8.8vw;
    height: auto;
}


.creators, .certificate, .racer-1965, .oil-bottles-1965, .brand-new-oil-bottle-2000{
    width: 20.9vw;
    height: auto;
}


.timelapse{
    padding: 3.3vw 23.7vw;
    padding-bottom: 6vw;
    position: relative;
}

.timeline-image{
    position: absolute;
    left: +5.5vw;
    width: 1.92vw;
    top: 0rem;
    height: 100%;
    object-fit: cover;
}

.timelapse img {
    display: initial;
    max-width: revert;
}


.timeperiod{
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: 100%;
    position: relative;
}

.period{
    display: flex;
    flex-direction: row;
    gap: 6.6vw;
}

.year{
    display: flex;
    align-items: flex-start;
    height: 100%;
}

.year span{
    font-size: 1.5625vw;
    font-weight: 800;
    color: #002169;
}

.event-content{
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: 100%;
}

.event-content span{
    margin-top: 0.2vw;
    font-size: 0.83vw;
    font-weight: 400;
    line-height: 1.5;
    color: #363F4C;
}

.period-3{
    margin-top: 0.5vw;
}
.period-4{
    margin-top: 1vw;
}

.period-4 .event-content{
    gap:1.3vw;
}

.period-5{
    margin-top: 0.6vw;
}

.period-6{
    margin-top: 1vw;
}

.period-7{
    margin-top: 1vw;
}

.period-8{
    margin-top: 0.1vw;
}

.period-10{
    margin-top: 0.2vw;
}

.period-11{
    margin-top: 0.9vw;
}
.period-12{
    margin-top: 1vw;
}

.period-13{
    margin-top: 0.9vw;
}

.period-14{
    margin-top: 0.9vw;
}

/* News section */
.news-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.6vw 10.4vw;
    background-color: #002169;
    color: #fff;
}

.news-head h1{
    font-size: 2.1vw;
    color: #fff;
    margin: 0;
    margin-top: 0.1vw;
}

.news-head span{
    font-size: 0.72vw;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.news-catalog{
    background-color: #F5F7FA;
    padding: 3.1vw 10.4vw;
}

.grid-news{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5vw 2vw;
}

/* News-inside section */
.hero-news-inside{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4.2vw 23.8vw;
    background-color: #002169;
    color: #fff;
}

.hero-news-inside-head{
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 1vw;
    width: 100%;
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.hero-news-inside-head h1{
    font-size: 2.1vw;
    margin: 0;
    margin-bottom: 1.2vw;
    margin-top: 0.5vw;
}

.date-news-inside{
    font-size: 0.83vw;
    font-weight: 400;
    margin: 0;
    margin-bottom: 1.2vw;
}

.hero-news-inside-content{
    margin: 0;
    width: 100%;
    font-weight: 600;
}

.hero-news-inside-content h2{
    font-size: 1.25vw;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 2.4vw;
    font-weight: 600;
}

.hero-news-inside-content img{
    width: 100%;
}

.article-1{
    padding: 3.3vw 23.8vw;
    font-size: 0.83vw;
    line-height: 1.5;
    color: #363F4C;
    font-weight: 400;
}

.sub-article{
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

.list-article{
    display: flex;
    flex-direction: column;
}

.list-article h2{
    font-size: 1.25vw;
    margin: 0;
    font-weight: 600;
    margin-top: 2.4vw;
    margin-bottom: 0.7vw;
}

.text {
    font-size: 1.6rem;
    line-height: 1.5;
}

.headron .text {
    color: #fff;
    margin-bottom: 2.4rem;
}

.text p {
    margin-bottom: 0.8vw;
}

.text a {
    color: var(--color-primary);
    text-decoration: underline;
}

.text p:last-child {
    margin-bottom: 0;
}

.list-component-news, .text ul{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
}

.list-component-news li, .text ul li{
    position: relative;
    padding-left: 1.5vw;
    margin-bottom: 0.8vw;
}

.list-component-news li::before, .text ul li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.5vw;
    width: 0.3125vw;
    height: 0.3125vw;
    background-color: #E1251B;
    border-radius: 30%;
}


.news-image-slider{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F5F7FA;
    padding: 2vw 0vw;
    padding-bottom: 3vw;
}

.news-inside-image .swiper-slide {
    width: 52vw;
}

.news-inside-image-card{
    height: 31.31vw !important;
}

.news-inside-image-card img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.nascar{
    transform: translateY(-30vw);
}

.news-inside-image {
    padding-left: 23vw;
    padding-right: 25vw;
}

.swiper.news-image-slider{
    position: relative;
    overflow: visible !important;
    padding-left: 3vw;
    padding-right: 3vw;
    box-sizing: border-box;
}

.lower-news-image-slider{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 2vw;
    gap: 1vw;
    margin-top: 1vw;
}

.pagination-news-inside-images{
    position: relative !important;
    margin-top: 1.5vw;
    text-align: center;
}

.pagination-news-inside-images .swiper-pagination-bullet {
    width: 0.3125vw;
    height: 0.3125vw;
    background-color: #002169;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0 0.4vw;
}

.pagination-news-inside-images .swiper-pagination-bullet-active {
    width: 1.75vw;
    border-radius: 0.26vw;
    background-color: #002169;
}

.btn-ni{
    position: relative;
    font-family: 'Roboto Flex', sans-serif;
    border: none;
    color: #002169;
    text-align: center;
    cursor: pointer;
}

.btn-ni-n{
    position: relative;
    font-family: 'Roboto Flex', sans-serif;
    border: none;
    color: #002169;
    text-align: center;
    cursor: pointer;
}


.btn-ni-n.swiper-button-next::after, .btn-ni.swiper-button-prev::after{
    font-size: 1.2vw;
    color: #002169;
    font-weight: 600;
}

.article-2{
    padding: 4.2vw 23.8vw;
    font-size: 0.83vw;
    line-height: 1.5;
    color: #363F4C;
    font-weight: 400;
    padding-bottom: 2vw;
}

.ordered-list-article{
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}

.ordered-list-article h2{
    font-size: 1.25vw;
    margin: 0;
    font-weight: 600;
    margin-top: 2.6vw;
}

.o-list-component-news{
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    list-style: none;
    counter-reset: my-counter;

}

.o-list-component-news li{
    display: flex;
    flex-direction: row;
    counter-increment: my-counter;
    position: relative;
    margin-bottom: 0.8vw;
    padding-left: 0.5vw;
}

.o-list-component-news li::before{
    content: counter(my-counter);
    position: absolute;
    font-size: 0.8vw;
    left: -2.2vw;
    top: -0.1vw;
    width: 1.3vw;
    height: 1.3vw;
    background-color: #E1251B;
    font-weight: 400;
    color:#fff;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vw 23.8vw;
    background-color: #E1251B;
    color: #fff;
    padding-bottom: 5vw;
}

.quote{
    display: flex;
    flex-direction: column;
    padding-left: 4vw;
    border-left: 3px solid #fff;
}

.quote-1{
    font-size: 1.25vw;
    line-height: 1.3;
    margin: 0;
    font-weight: 600;
}

.author{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.6vw;
}

.author img{
    width: 5.2vw;
    height: auto;
    margin-top: 2vw;
    margin-right: 2vw;
}

.author-info{
    display: flex;
    flex-direction: column;
}

.name{
    font-size: 1.25vw;
    font-weight: 600;
    margin: 0;
    margin-top: 2vw;
}

.occupation{
    width: 20vw;
    font-size: 0.83vw;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    margin-top: 0.2vw;
}

.company{
    font-size: 0.83vw;
    font-weight: 400;
    margin: 0;
    margin-top: 0.2vw;
    color: rgba(255,255,255,0.8);
}

.article-3{
    padding: 3.7vw 23.8vw;
    font-size: 0.83vw;
    line-height: 1.5;
    color: #363F4C;
    font-weight: 400;
    padding-bottom: 5vw;
}

.article-3 img{
    width: 100%;
    margin-top: 3.7vw;
    margin-bottom: 3.7vw;
}

.hero-news-article{
    display: flex;
    font-size: 1.25vw;
    line-height: 1.4;
    font-weight: 600;
    flex-direction: column;
    align-items: center;
    padding: 2.7vw 4.5vw;
    background-color: transparent;
    border: 4px solid #E1251B;
    color: #363F4C;
    margin: 3.7vw 0vw;
}

.news-ni{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F5F7FA;
    padding: 5vw 10.42vw;
    padding-bottom: 4.5vw;
}

.news-header-ni{
    font-size: 0.78vw;
    color: #002169;
}

.news-header-ni h1{
    margin: 0   ;
}

.swiper-container-outer-1 {
    width: 100%;
    margin-top: 2.2vw;
}

/* About section */
.headron{
    display: flex;
    flex-direction: column;
    background-color: #002169;
    padding: 3.7vw 10.42vw;
    padding-bottom: 5.1vw;
}

.main-head{
    display: flex;
    flex-direction: column;
    color: #fff;
    padding-bottom: 1.5vw;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.text-with-divider{
    font-size: 0.72vw;
    font-weight: 200;
    display: flex;
    gap: 0.55vw;
    margin-bottom: 0.2vw;
}

.main-head h1{
    font-size: 2.1vw;
    margin: 0;
    margin-top: 0.2vw;
}

.short-description{
    margin-top: 1.5vw;
    display: flex;
    flex-direction: column;
}

.short-description span{
    width: 100%;
    font-size: 1.25vw;
    color: rgba(255,255,255,1);
    line-height: 1.3;
    font-weight: 600;
}

.about-info-1{
    background-color: #F5F7FA;
    padding: 5vw 23.8vw;
    padding-bottom: 4.5vw;
    font-size: 0.83vw;
    line-height: 1.5;
    color: #363F4C;
    font-weight: 400;
}

.content {padding: 5vw 23.8vw;}

.about-info-2{
    background-color: #E1251B;
    color: #fff;
    display: flex;
    flex-direction: row;
    padding: 0;
}

.about_table {
    width: calc(100% + 47.6vw);
    margin-left: -23.8vw;
    margin-top: 4.8vw;
    margin-bottom: 4.8vw;
}

.left-content-about{
    width: 50%;
    display: flex;
    flex-direction: column;
}

.left-content-content, .about_table td:first-child{
    padding: 5.6vw 11.9vw 3.5vw 10.3vw;
    background: var(--color-secondary);
    color: #fff;
}

.about_table {
    width: calc(100% + 47.6vw);
    margin-left: -23.8vw;
    margin-top: 4.8vw;
    margin-bottom: 4.8vw;
}

.about_table tr{
    display: flex;
}

.about_table tr td {
    display: flex;
    flex-direction: column;
    position: relative;
}

.about_table td:first-child{
    width: 50%;
    display: flex;
    flex-direction: column;
}

.about_table td:last-child{
    flex-direction: row;
    flex: 1;
    color: #fff;
}

.about_table td:last-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.racers-nascar{
    width: 100%;
    height: auto;
}
.content-about-info{
    padding: 2.3vw 0vw;
    height: auto;
    z-index: 2;
}

.content-about-info h1{
    font-size: 1.55vw;
    margin: 0;
    margin-top: 1.6vw;
}

.content-about-info p, .about_table td:last-child p{
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    margin-top: 1.7vw;
    font-size: 1.2vw;
}

.right-content-about{
    width: 50%;
    background-image: url("/static/img/about-info-2-red.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
}

.right-about{
    padding-left: 10.4vw;
    margin-top: auto;
    margin-bottom: 5.2vw;
}

.right-p{
    margin-top: 1.1vw !important;
}

.about-info-3{
    background-color: #F5F7FA;
    padding: 4vw 23.8vw;
    padding-bottom: 4.5vw;
    font-size: 0.83vw;
    line-height: 1.5;
    color: #363F4C;
    font-weight: 400;
}

/* Career section */

.career-bg{
    padding: 0;
    background-image: url(/static/img/career-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 30.8vw;
}

.career-points{
    display: flex;
    flex-direction: row;
    background-color: #E1251B;
    justify-content: center;
    gap: 8vw;
    color: #fff;
    padding: 3vw 9.5vw;
}

.point-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.inner-point{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inner-point img{
    width: 2.60417vw;
    height: 2.60417vw;
}

.inner-point h1{
    font-size: 3.125vw;
    margin: 0;
    margin-top: 1vw;
    margin-bottom: 0.2vw;
}

.inner-point span{
    font-size: 1.0417vw;
    font-weight: 600;
    text-align: center;
}

.divider-point{
    border: none;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    width: 0;
    height: 10.47vw;
    box-sizing: border-box;
}

.career-info{
    background-color: #fff;
    padding: 3vw 23.8vw;
    padding-bottom: 2.5vw;
    font-size: 0.8vw;
    line-height: 1.5;
    color: #002169;
    font-weight: 400;
}


.vacancy-container ul{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    margin-top: 1.7vw;
}

.vacancy-point{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    font-size: 1.0417vw;
    position: relative;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    padding: 0vw 0vw 1.2vw;
    cursor: pointer;
}


.vacancy a{
    text-decoration: none;
    color: #002169;
    font-weight: 700;
}

.vacancy-status{
    font-weight: 700;
}

.vacancy-info{
    display: none;
    flex-direction: column;
    gap: 2vw;
    position: relative;
    margin-top: 1.5vw;
}

.vacancy-info.open{
    display: flex;
}

.vacancy-info-more{
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
    font-size: 0.83vw;
    line-height: 1.5;
    color: #363F4C;
    font-weight: 400;
}

.vacancy-info-more p {
    margin: 0;
}

.btns-vacancy{
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
    margin-top: 2vw;
    width: 100%;
}

.btn-vac{
    font-family: 'Roboto Flex', sans-serif;
    width: 100%;
    height: 2.9vw;
    border: none;
    background-color: #002169;
    color: #fff;
    text-align: center;
    font-size: 0.85vw;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-info{
    color: #002169;
    background-color: transparent;
    border: 2px solid #002169;
}

/* Contact section */

.contact-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.6vw 10.4vw;
    background-color: #002169;
    color: #fff;
}

.contact-head h1{
    font-size: 2.1vw;
    color: #fff;
    margin: 0;
    margin-top: 0.1vw;
}

.contact-head span{
    font-size: 0.72vw;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.contact-info-map{
    display: flex;
    flex-direction: row;
    padding: 0;
}

.sidebar {
    position: relative;
    width: 29.219vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 34.45vw;
}

.sidebar-inner{
    padding: 4.5vw 0vw 0vw 5.5vw;
    height: 100%;
    overflow: hidden;
}

.swiper-sidebar {
    position: relative;
    height: 100%;
    padding-right: 1vw;
    flex: 1;
    box-sizing: border-box;
}

.swiper-slide {
    display: block;
}

.office-card {
    margin-right: 4vw;
    background: #fff;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 2vw;
    padding-right: 3vw;
    margin-bottom: 1.5vw;
}

.office-card h2 {
    margin: 0 0 1vw 0;
    color: #002169;
    font-size: 1.0417vw;
}

.office-card p {
    margin: 5px 0;
    font-size: 0.82vw;
    color: rgba(0,0,0,0.7);
}

.address{
    margin: 1.4vw 0vw !important;
}

.btn-contacts {
    font-family: 'Roboto Flex', sans-serif;
    border: none;
    background-color: #002169;
    width: 11.719vw;
    color: #fff;
    text-align: center;
    font-size: 0.72vw;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7vw 0vw;
}

.map >div#map{
    width: 70.708vw;
    height: 38.95vw;
}

.swiper-scrollbar {
    position: absolute;
    top: 0;
    height: 34.45vw;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    width: 0.3125vw;
    right: 0.3vw;
    z-index: 10;
    bottom: 0;
    margin-top: 2vw;
}

.swiper-scrollbar-drag {
    background: #002169;
    border-radius: 4px;
}

.images-h {
    display: flex;
    flex-direction: row;
    gap: 0.1vw;
}

.modal.active {
    display: block;
    opacity: 1;
  }
  
  .modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
  }
  
  .modal::after {
    content: "";
    background: #002169;
    opacity: 0.95;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .noscroll {
    overflow: hidden;
  }
  
  .modal__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .popup {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    background: #fff;
    transform: translate(-50%, -50%);
    padding: 2.104vw 4.229vw 2.25vw;
  }

  .form-title {
    font-size: 3vw;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
  }
  
  .modal-close {
    position: absolute;
    right: 3rem;
    top: 3rem;
    width: 3.65rem;
    background: url('/static/img/close.svg') no-repeat;
    background-size: cover;
    height: 3.65rem;
    cursor: pointer;
  }
  
  .form-field {
    width: 100%;
    padding: 0.831vw 1.15vw;
    outline: none;
    border: 1px solid var(--color-primary);
    font-size: 0.831vw;
  }

  .motor-oil-image {position: relative;}
  
  .form-row {
    margin-bottom: 1vw;
  }
  
  .wrapper {
    margin-top: 3.1rem;
  }
  
  .form-row:last-child {
    margin-bottom: 0;
  }
  
  .errorMessage {
    color: var(--color-secondary);
    font-size: 0.52vw;
  }
  
  .modal .btn {
    width: 100%;
  }
  
  .form-row select {
    width: 100%;
    padding: 1.7rem 2.3rem;
    outline: none;
    border: 1px solid var(--color-primary);
    background-color: #fff;
    color: var(--color-primary);
    font-size: 2rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/static/img/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: right 2.3rem center;
    background-size: 1.2rem;
    cursor: pointer;
  }
  
  .form-row select option {
    font-size: 1.6rem;
    padding: 1rem;
  }
  
  .form-row select:focus {
    border-color: var(--color-secondary);
  }
  
  .form-row select option[value=""] {
    color: #999;
  }
  
  @supports not (background-image: url('/static/img/arrow-down.svg')) {
    .form-row select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23002169' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }
  }
  
  @supports not (background-image: url('/static/img/arrow-down.svg')) {
    .form-row select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23002169' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }
  }
  
  .form-row.checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5vw 0 1.552vw;
  }
  
  .form-row.checkbox .form-checkbox {
    width: 1.3vw;
    height: 1.3vw;
    cursor: pointer;
    accent-color: var(--color-primary);
  }
  
  .form-row.checkbox label {
    font-size: 0.703vw;
    font-weight: 550;
    color: var(--color-primary);
    cursor: pointer;
  }
  
  .form-row.checkbox .errorMessage {
    margin-top: 0.25vw;
    font-size: 0.703vw;
  }
  
  .form-result {
    font-size: 1.042vw;
  }

  .form-btn {
    border: none;
    background: #E1251B;
    color: #fff;
    width: 100%;
}

.popup-form {
    margin-top: 2.083vw;
}

.form-label {
    font-size: 0.52vw;
    color: var(--color-primary);
}

.page.rubric .container{
    padding: 8vw 10.4vw;
}

.fancybox-active {
    height: 100%;
}

@media (max-width: 480px) {

    html {
        font-size: calc(10/480*100vw);
    }

    .heading{
        display: none;
    }

    .btn1{
        display: none;
    }

    .navbar{
        align-items: center;
        justify-content: center;
        padding: 5.9vw 3.4vw;
    }

    
    .page.rubric .container{
        padding: 5.9vw 4vw;
    }

    .logo{
        width: 33.42vw;
        margin: 0;
    }

    .top-image{
        background-image: url("/static/img/color-line-1-m.png");
    }

    .nav-links{
        display: none;
    }

    .video-footer, .news-footer{
        display: none;
    }

    .container{
        align-items: center;
    }

    .menu-icon{
        display: block;
        width: 7vw;
        height: auto;
    }

    .container-1{
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(/static/img/bg-1-m.png);
        background-size: cover;
        background-position: 0 -15vw;
        background-repeat: no-repeat;
        text-align: center;
        width: 100%;
        height: 145vw;
        padding: 11.6vw 7.42vw;
    }

    .container-1 h1{
        width: 100%;
        font-size: 8.5vw;
        margin-bottom: 3vw;
    }

    .container-1 h2{
        width: 100%;
        font-size: 4.8vw;
    }

    .container-1-info{
        height: auto;
        display: flex;
        flex-direction: column;
        width: auto;
        justify-content: center;
        align-items: center;
    }

    .container-1-info p{
        width: 70%;
        font-size: 2.5vw;
        margin-bottom: 5vw;
    }

    .btn{
        width: 55%;
        height: 10vw;
        font-size: 2.5vw;
        padding: 2vw 1vw;
    }

    .clients{
        padding: 8.1vw 4vw;
        padding-bottom: 15vw;
    }

    .clients h1{
        font-size: 5vw;
        margin-bottom: 5.2vw;
    }

    .clients-container{
        flex-direction: column;
        width: 100%;
        justify-content: center;
        gap: 3vw;
    }

    .client-box{
        flex-direction: row;
        width: 100%;
    }

    .frame-client-company{
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 30vw;
        height: 15vw;
        margin-right: 7vw;
        padding: 3vw 7vw;
        margin: 0;
    }

    .frame-client-company img{
        width: 100%;
        height: auto;
    }

    .client-box p{
        font-size: 2.7vw;
        margin: 0;
        margin-left: 5vw;
        padding: 0vw 1vw;
        width: 50vw;
    }

    .production{
        padding: 8.5vw 4vw;
    }

    .production h1{
        font-size: 5vw;
        margin-bottom: 2.8vw;
    }

    .production span{
        width: 85%;
        font-size: 2.5vw;
        text-align: center;
    }

    .grid-production-container{
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 0;
    }

    .product-card-mp{
        width: 100%;
        height: 40vw;
        padding-bottom: 8vw;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-p{
        width: 20vw;
        height: 25vw;
    }
    .motor-oil-bottle{
        top: 10vw;
        width: 20vw;
        position: absolute;
        height: 10vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .product-info{
        display: flex;
        flex-direction: column;
        color: #fff;
        text-align: center;
        align-items:  center;
        font-weight: 400;
        margin-top: 30vw;
        margin-bottom: auto;
    }

    .product-info h2{
        display: flex;
        width: 100%;
        font-size: 3.1vw;
        margin: 0;
    }


    .available-products{
        font-size: 0.83vw;
        font-weight: 200;
        margin-top: 3vw;
    }

    .other-span{
        margin-top: 6vw;
    }

    .shorter{
        width: 85%;
    }
    .blue-whole{
        top: 10vw
    }

    .red-whole{
        top: 9vw
    }

    .white{
        color: #002169;
    }

    .product-p{
        position: relative;
        z-index: 2;
    }

    .shadow1{
        z-index: 1;
    }

    .small{
        width: 9vw;
        height: auto;
        position: absolute;
        transform: translateY(+8.5vw);
        z-index: 1;
    }

    .small-2{
        width: 6vw;
        height: auto;
        position: absolute;
        transform: translateY(+7.5vw);
        z-index: 1;
    }

    .medium{
        width: 15vw;
        height: auto;
        position: absolute;
        transform: translateY(+10vw);
        z-index: 1;
    }

    .big{
        width: 18vw;
        height: auto;
        position: absolute;
        transform: translateY(+8vw);
        z-index: 1;
    }

    .big-2{
        width: 15vw;
        height: auto;
        position: absolute;
        transform: translateY(+8.5vw);
        z-index: 1;
    }

    .red{
        transform: translateY(+12.6vw);
    }

    .blue{
        width: 8vw;
        transform: translateY(+9.8vw);
    }


    .swiper-outer-container{
        margin-top: 0;
    }

    .swiper.video-cards, .swiper.news-cards{
        overflow: visible !important;
        padding-left: 3vw;
        padding-right: 3vw;
        box-sizing: border-box;
    }

    .container-2{
        flex-direction: column-reverse;
    }

    .right-content{
        width: 100%;
        height: 60vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video-box-2{
        width: 40vw;
        height: auto;
    }

    .left-content{
        padding: 11vw 6vw;
        width: 88%;
    }

    .motor-oil{
        width: 29vw;
        height: auto;
        z-index: 2;
    }

    .back-shadow{
        width: 60vw;
        height: auto;
        position: absolute;
        transform: translateX(-69%) translateY(-11%);
    }

    .shadow{
        width: 29.5vw;
        transform: translateX(-98%) translateY(+46vw);
        height: auto;
        z-index: 1;
    }

    .content-info-2{
        padding: 0vw 0vw;
        margin-left: 8vw;
        height: auto;
        z-index: 2;
    }

    .content-info-2 h1{
        font-size: 4.5vw;
        margin-top: 0;
    }

    .content-info-2 p{
        font-size: 2.2vw;
        margin-top: 3.5vw;
        margin-bottom: 5.2vw;
        font-weight: 400;
    }

    .cont-2{
        width: 100%;
    }

    .swiper.video-cards, .swiper.news-cards {
        overflow: visible !important;
        box-sizing: border-box;
    }

    .videos{
        padding: 8.1vw 4vw;
    }

    .video-header h1{
        position: relative;
        font-size: 5vw;
        padding-bottom: 2vw;
    }

    .video-cards{
        margin-bottom: 2vw;
    }


    .video-content{
        padding: 1.5vw;
    }

    .video-card span{
        font-size: 3vw;
        padding: 2vw 3vw 6vw;
    }

    .play-icon{
        width: 7vw;
        height: 7vw;
    }

    .btn1-m{
        font-family: 'Roboto Flex', sans-serif;
        background: transparent;
        border: 2px solid #002169;
        color: #002169;
        text-align: center;
        padding: 2.5vw 6.5vw;
        font-size: 2.5vw;
        font-weight: 800;
        cursor: pointer;
    }

    .video-footer{
        margin-top: 2vw;
        display: block;
    }

    .videos .swiper-pagination,
    .news .swiper-pagination {
    position: relative !important;
    margin-top: 1.5vw;
    text-align: center;
    }

    .videos .swiper-pagination-bullet,
    .news .swiper-pagination-bullet {
    width: 0.7vw;
    height: 0.7vw;
    background-color: #002169;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0 6vw;
    }

    .videos .swiper-pagination-bullet-active,
    .news .swiper-pagination-bullet-active {
    width: 4vw;
    border-radius: 0.26vw;
    background-color: #002169;
    }

    .news{
        padding: 8.1vw 4vw;
    }

    .news-header h1{
        font-size: 5vw;
        padding-bottom: 2vw;
    }

    .news-img{
        padding: 1.5vw 1.5vw;
    }

    .news-img img{
        width: 100%;
        height: auto;
        padding: 0;
    }

    .news-cards{
        margin-bottom: 2vw;
    }

    .news-content{
        padding: 3vw 7vw;
        padding-bottom: 6vw;
    }

    .news-content h2{
        font-size: 3vw;
        margin: 1.5vw 0vw;
    }

    .news-content span{
        font-size: 2.5vw;
    }

    .news-footer{
        margin-top: 2vw;
        display: block;
    }

    .pre-footer{
        padding: 0 4vw;
        padding-top: 12vw;
    }

    .content-1 img, .content-2, .content-3, .content-4, .content-5, .content-6, .line, .instagram-icon-footer, .email-footer, .lang-footer{
        display: none;
    }

    .inner{
        flex-direction: column;
        align-items: center;
        gap: 6vw;
    }

    .top-contacts-m{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 3vw;
    }

    .email-footer-m{
        display: flex;
        align-items: center;
        gap: 3vw;
        margin-left: 5vw;
    }

    .content-1{
        width: 100%;
        align-items: center;
        margin: 0
    }

    .content-1 span{
        width: 85vw;
        text-align: center;
        font-size: 2.5vw;
        margin-top: 0;
    }

    .end-info{
        flex-direction: column;
        gap: 3vw;
        padding: 5vw 0vw 10vw;
        font-size: 2.5vw;
    }

    .bottom-image{
        background-image: url("/static/img/color-line-1-m.png");
    }

    /*--- Catalog styles ---*/

    .catalog{
        padding: 4.4rem 2rem 5.5rem;
    }

    .heading-catalog{
        align-items: center;
        text-align: center;
        margin-bottom: 2vw;
    }

    .heading-catalog h1{
        font-size: 5vw;
        margin-bottom: 2.8vw;
    }

    .text-with-divider{
        flex-direction: row;
        gap: 1.5vw;
        justify-content: center;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .heading-catalog span{
        font-size: 2.5vw;
        line-height: 1.5;
    }

    .catalog-btns {
        overflow: visible !important;
        display: block;
        gap: 0;
    }

    .main-head-1 {
        text-align: center;
    }

    .main-head-1 h1 {
        font-size: 3rem;
        margin-bottom: 2.3rem;
    }

    .btn-c, a.btn-c{
        font-size: 1.4rem;
        padding: 1.4rem 2rem;
        width: auto;
    }

    .product-catalog{
        padding: 10vw 4vw;
    }

    .products-general-info{
        margin-bottom: 4vw;
    }

    .products-general-info h1{
        font-size: 5vw;
    }
    .products-general-info span{
        width: 100%;
        font-size: 3.5vw;
    }

    .grid-catalog-products{
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
    }

    .product-card-ctg{
        padding: 4vw 4vw 5vw;
    }

    .product-card-ctg img{
        width: 27vw;
        height: 27vw;
    }

    .product-card-ctg h2{
        font-size: 3.5vw;
        margin-top: 10vw;
    }

    .product-card-ctg span{
        font-size: 3vw;
        margin-top: 3vw;
        margin-bottom: 5vw;
    }

    .buy-more-btns{
        width: 100%;
        flex-direction: column;
        margin-top: auto;
        gap: 1.5vw;
    }

    .buy-now-btn, .more-details-btn{
        width: 100%;
        height: 7.5vw;
        font-size: 2.5vw;
        padding: 2.5vw 1vw;
    }

    .additional-card{
        display: none;
    }

    .pagination-catalog{
        gap: 3vw;
        margin-top: 6vw;
    }

    .page-numbers{
        gap: 2vw;
    }

    .page-number{
        font-size: 3vw;
        width: 5vw;
        height: 5vw;
    }

    .prev-page, .next-page{
        font-size: 3vw;
        width: 6vw;
        height: 6vw;
    }

    .prev-page img, .next-page img{
        width: 2vw;
    }

    /*--- Product styles ---*/
    .hero-container{
        flex-direction: column;
        padding: 8vw 4vw;
        gap: 5vw;
    }
    .product-image-p{
        width: 100%;
        padding: 0;
        gap: 0;
    }

    .product_image_slider-main {
        height: 44rem;
    }

    .product-images-slider {
        height: 11rem;
    }

    .product-image-p img{
        width: 50vw;
    }
    .right-side-p{
        width: 100%;
    }
    .product-information{
        width: 100%;
    }
    .head-product{
        display: none;
    }

    .head-product-mobile{
        display: block;
        color: #002169;
    }
    .pages-p-m{
        display: flex;
        flex-direction: row;
        font-size: 3vw;
        gap: 2vw;
        margin-bottom: 2vw;
    }
    .head-product-mobile h1{
        font-size: 5.5vw;
        margin-bottom: 1.5vw;
    }

    .line-p{
        display: none;
    }

    .description{
        font-size: 3.5vw;
        margin-bottom: 5vw;
    }

    .specification h2, .variants h2{
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .specification span, .variants span{
        font-size: 3.5vw;
        width: 100%;
        margin-bottom: 5vw;
    }

    .btns-p{
        gap: 2vw;
    }

    .btn-p, a.btn-p{
        width: 100%;
        height: 10vw;
        font-size: 2.5vw;
        padding: 2.5vw 1vw;
    }

    .other-products{
        padding: 8vw 4vw 10vw;
    }

    .other-products h1{
        font-size: 5vw;
        margin-bottom: 5vw;
    }

    .grid-product-cards{
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
        width: 100%;
    }

    .product-card-p{
        padding: 4vw 4vw 5vw;
    }

    .product-card-p img{
        width: 27vw;
        height: 100%;
        object-fit: contain;
    }

    .product-card-p h2{
        font-size: 3.5vw;
        margin-top: 10vw;
    }

    .product-card-p span{
        font-size: 3vw;
        margin-top: 3vw;
        margin-bottom: 4vw;
    }

    /* History section */

    img.timeline-image{
        display: none;
    }

    .main-history{
        padding: 8.1vw 4vw;
    }

    .main-history-head h1{
        font-size: 5vw;
        margin-bottom: 2.8vw;
    }

    .text-with-divider-h{
        flex-direction: row;
        gap: 1.5vw;
        margin-bottom: 1.5vw;
        font-size: 1.4rem;
        align-items: center;
    }

    .hero-news-inside span {
        font-size: inherit;
    }

    .main-history p{
        font-size: 4vw;
    }

    .newspaper{
        width: 21.45vw;
        height: auto;
    }

    .barrel-1{
        width: 34.08vw;
        height: auto;
    }

    .timelapse{
        padding: 8.1vw 4vw;
    }

    .timeperiod{
        display: flex;
        gap: 7vw;
    }

    .period{
        flex-direction: column;
        gap: 3vw;
    }

    .year span{
        font-size: 5vw;
    }

    .event-content span{
        font-size: 3.33vw;
    }

    .creators, .certificate, .racer-1965, .oil-bottles-1965, .brand-new-oil-bottle-2000{
        width: 45vw;
        height: auto;
    }

    .mobile-1939{
        flex-direction: row;
    }

    .barrel{
        width: 16.7vw;
        height: auto;
    }

    .period-1, .period-2, .period-3, .period-4, .period-5, .period-6, .period-7, .period-8, .period-9, .period-10, .period-11, .period-12, .period-13, .period-14{
        margin: 0;
    }

    /* News section */
    .news-head{
        padding: 8.1vw 4vw;
    }

    .news-head h1{
        font-size: 5vw;
        margin-bottom: 2.8vw;
    }

    .news-head span{
        font-size: 2.5vw;
        line-height: 1.5;
    }

    .grid-news{
        grid-template-columns: repeat(1, 1fr);
        gap: 5vw;
    }

    .additional-news{
        display: none;
    }

    .pagination-catalog{
        margin-bottom: 5vw;
    }

    /* News-inside section */
    .hero-news-inside{
        padding: 8.1vw 4vw;
    }

    .hero-news-inside h1{
        font-size: 3rem;
        margin-bottom: 2.8vw;
    }

    .date-news-inside{
        margin-bottom: 4vw;
    }

    .hero-news-inside-content h2{
        font-size: 4.17vw;
        margin-top: 4vw;
    }

    .article-1, .article-2, .article-3{
        padding: 8.1vw 4vw;
    }

    .sub-article{
        font-size: 3.3vw;
        gap: 3vw;
    }

    .list-article h2, .ordered-list-article h2{
        font-size: 4.17vw;
    }

    .list-component-news, .text ul{
        gap: 3vw;
    }

    .list-component-news li, .text ul li{
        font-size:  3.3vw;
        padding-left: 5vw;
    }

    .text p {
        margin-bottom: 2rem;
    }

    .list-component-news li::before, .text ul li::before{
        content: "";
        position: absolute;
        left: 0;
        top: 2vw;
        width: 1.25vw;
        height: 1.25vw;
        background-color: #E1251B;
        border-radius: 50%;
    }

    .news-ni{
        padding-bottom: 7vw;
    }

    .news-ni h1{
        font-size: 5.1vw;
        margin-bottom: 2vw;
    }

    .news-cards-ni{
        overflow: visible !important;
        padding-left: 3vw;
        padding-right: 3vw;
    }

    .news-image-slider{
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #F5F7FA;
        padding: 2vw 0vw;
        padding-bottom: 5vw;
    }

    .news-inside-image .swiper-slide {
        width: 91.7vw;
    }

    .news-inside-image-card{
        height: 54.8vw !important;
    }

    .news-inside-image-card img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .nascar{
        transform: translateY(-50vw);
    }

    .news-inside-image {
        padding-left: 5vw;
        padding-right: 3vw;
    }

    .swiper.news-image-slider{
        position: relative;
        overflow: visible !important;
        padding-left: 3vw;
        padding-right: 3vw;
        box-sizing: border-box;
    }

    .lower-news-image-slider{
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 1vw;
        gap: 1vw;
        margin-top: 4vw;
    }

    .pagination-news-inside-images{
        position: relative !important;
        margin-top: 3vw;
        text-align: center;
    }

    .pagination-news-inside-images .swiper-pagination-bullet {
        width: 0.6vw;
        height: 0.6vw;
        background-color: #002169;
        opacity: 1;
        border-radius: 50%;
        transition: all 0.3s ease;
        display: inline-block;
        margin: 0 0vw;
    }

    .pagination-news-inside-images .swiper-pagination-bullet-active {
        width: 3vw;
        border-radius: 0.26vw;
        background-color: #002169;
    }

    .btn-ni{
        position: relative;
        font-family: 'Roboto Flex', sans-serif;
        border: none;
        color: #002169;
        text-align: center;
        cursor: pointer;
        margin-top: 0vw;
    }

    .btn-ni-n{
        position: relative;
        font-family: 'Roboto Flex', sans-serif;
        border: none;
        color: #002169;
        text-align: center;
        cursor: pointer;
        margin-top: 0vw;
    }


    .btn-ni-n.swiper-button-next::after, .btn-ni.swiper-button-prev::after{
        font-size: 2vw;
        color: #002169;
        font-weight: 600;
    }

    .o-list-component-news{
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
        list-style: none;
        margin-top: 3vw;

    }

    .o-list-component-news li{
        font-size:  3.3vw;
        padding-left: 5vw;;
        display: flex;
        flex-direction: row;
        position: relative;
        margin-bottom: 0.8vw;
        padding-left: 0.5vw;
    }

    .o-list-component-news li::before{
        position: absolute;
        font-size: 3.3vw;
        left: -8vw;
        top: -0.1vw;
        width: 5.2vw;
        height: 6.7vw;
        background-color: #E1251B;
        font-weight: 400;
        color:#fff;
        border-radius: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quote-section{
        padding: 8.1vw 4vw;
    }

    .quote{
        border-left: 2px solid #fff;
    }

    .quote-1{
        font-size: 4.17vw
    }

    .author img{
        width: 16.7vw;
        height: 16.7vw;
    }

    .name{
        font-size: 5vw;
    }

    .occupation{
        font-size: 3.2vw;
        width: 100%;
    }

    .hero-news-article{
        padding: 6.7vw 5.5vw;
        font-size: 4.17vw;
    }

    /* About section */
    .headron{
        padding: 4.4rem 2rem 5.5rem;
    }

    .headron span{
        font-size: 1.4rem;
    }

    .main-head{
        margin-bottom: 3vw;
    }

    .main-head h1{
        font-size: 5vw;
        margin-bottom: 2.8vw;
    }

    .main-head span{
        font-size: 2.5vw !important;
        line-height: 1.5;
    }

    .about-info-1, .about-info-3, .content{
        padding: 8.1vw 4vw;
    }

    .about_table {
        width: calc(100% + 8vw);
        margin-left: -4vw;
        margin-top: 8vw;
        margin-bottom: 8vw;
    }

    .about_table tr {
        flex-direction: column;
    }

    .about_table td:first-child {
        width: 100%;
    }

    .about_table td:last-child {
        flex-direction: column;
    }

    .text {
        font-size: 1.6rem;
    }

    .about-info-2{
        flex-direction: column;
    }

    .left-content-about{
        width: 100%;
        padding: 0;
    }

    .left-content-content, .about_table td:first-child{
        padding: 8.1vw 4vw;
    }

    .content-about-info h1{
        font-size: 5.1vw;
    }

    .content-about-info p{
        font-size: 3.3vw;
        font-weight: 400;
    }

    .right-content-about, .about_table td:last-child{
        width: 100%;
        height: 72.917vw;
        flex: revert;

    }

    .right-about{
        padding: 0vw 4vw;
        margin-bottom: 12vw;
        font-size: 3.3vw;
    }

    /* Career section */
    .career-bg{
        height: 59.375vw;
        background-position: -20vw 0vw;
    }

    .career-points{
        flex-direction: column;
        padding: 5.1vw 4vw;
        gap: 5vw;
    }

    .divider-point{
        border:none;
        height: 0;
        width: 100%;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    }

    .inner-point{
        flex-direction: row;
        justify-content: start;
        gap: 10vw;
    }

    .point-info{
        align-items: start;
    }

    .inner-point img{
        width: 10.417vw;
        height: 10.417vw;
    }

    .inner-point h1{
        font-size: 8.3vw;
        margin: 0;
        margin-top: 1vw;
        margin-bottom: 0.2vw;
    }

    .inner-point span{
        font-size: 3.3vw;
        font-weight: 600;
        text-align: center;
    }

    .career-info{
        padding: 8.1vw 4vw;
    }

    .career-info h1{
        font-size: 5vw;
    }

    .vacancy a{
        font-size: 4.17vw;
        margin-bottom: 0vw;
        padding-bottom: 2vw;
    }


    .vacancy-point{
        margin-top: 2vw;
        font-size: 4.17vw;
    }

    .vacany-name{
        width: 90%;
    }

    .vacancy-status{
        font-weight: 700;
    }

    .vacancy-info-more{
        font-size: 3.3vw;
        gap: 2vw;
    }

    .btns-vacancy{
        margin-bottom: 3vw;
    }

    .btn-vac{
        font-size: 3.3vw;
        height: 9.9vw;
    }

    /* Contact section */

    .contact-head{
        padding: 8.1vw 4vw;
    }

    .contact-head h1{
        font-size: 5vw;
    }

    .contact-head span{
        font-size: 2.5vw;
    }

    .contact-info-map{
        flex-direction: column-reverse;
    }

    .map >div#map{
        width: 100vw;
        height: 81.7vw;
    }

    .sidebar{
        width: 91%;
        padding: 8.1vw 4.5vw;
        height: auto;
    }

    .sidebar-inner{
        padding: 0;
    }

    .office-card{
        padding: 8.1vw 7vw;
        margin: 0;
        border: 1px solid rgba(0, 0, 0, 0.3)
    }

    .office-card h2{
        font-size: 4.17vw;
        margin-bottom: 3vw;
    }

    .office-card p{
        font-size: 3.3vw;
    }

    .btn-contacts{
        width: 100%;
        font-size: 3.3vw;
        margin-top: 5vw;
        padding: 3.5vw 0;
    }

    .address{
        margin: 4vw 0vw !important;
    }

    
  .popup {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    background: #fff;
    transform: translate(-50%, -50%);
    padding: 1rem 2rem;
    width: calc(100% - 4rem);
  }

  .form-field {
    font-size: 1rem;
    padding: 0.8rem 1rem;
  }

  .modal-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 1rem;
    height: 1rem;
  }

  .form-row.checkbox label {
    font-size: 1rem;
  }

  .wrapper {
    margin-top: 2rem;
  }

  .form-row select {
    background-position: right 1rem center;
  }

  .form-row.checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 2.1rem;
  }

  .form-result {
    font-size: 1.2rem;
    text-align: center;
  }

}