*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
img{
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
ul{
    list-style: none;
}
a{
    color: #1A1818;
    text-decoration: none;
}
body,
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  color: #1A1818;
  position: relative;
}
video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
button{
    border: none;
    outline: none;
    cursor: pointer;
}
.head-section.not-main{
    height: unset;
}
.head-section{
    width: 100%;
    height: 100vh;
    position: relative;
}  
.head-container{
    width: 100%;
    height: 100%;
}
.white-overlay{
    position: absolute;
    z-index: 1;
    top: 0px;
    width: 100%;
    height: max-content;
}
.company-input{
    display: none;
}
.navigation-open{
    width: 1125px;
    height: 100%;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px) brightness(1.25);
    background-color: rgba(255, 255, 255, 0.6); 
    position: fixed;
    top: 0px;
    right: -100%;
    box-shadow: 0px 0px 115px 105px rgba(255,255,255,0.98) inset;
    -webkit-box-shadow: 0px 0px 115px 105px rgba(255,255,255,0.98) inset;
    -moz-box-shadow: 0px 0px 115px 105px rgba(255,255,255,0.98) inset;
    padding: 150px 130px 60px 130px;
    transition: 0.3s linear;
    z-index: 15;
}
.navigation-list1{
    margin-left: auto;
    width: fit-content;
}
.navigation-list-item1{
    position: relative;
   text-align: right;
}
.navigation-link1::after{
    transition: all 0.3s ease;
    width: 0px;
    content: '';
    position: absolute;
    height: 2px;
    left: 4px;
    bottom: 0px;
    background-color: #E50019;
}
.navigation-list-item1 > a{
    color: #1A1818;
    text-decoration: none;
    position: relative;
    font-size: 50px;
    font-weight: 300;
    line-height: 80px;
}
.navigation-link1:hover.navigation-link1::after{
    width: 100%;
}
.navigation-link2{
    position: relative;
}
.navigation-link2::after{
    transition: all 0.3s ease;
    width: 0px;
    content: '';
    position: absolute;
    height: 1px;
    left: 4px;
    bottom: 0px;
    background-color: #E50019;
}
.navigation-link2:hover.navigation-link2::after{
    width: 100%;
}
.navigation-list2{
    position: absolute;
    left: -440px;
    display: none;
    padding-right: 100px;
    line-height: 60px;
    top: -150px;
    font-size: 35px;
    font-weight: 300;
    width: 500px;
}
.dorade-title{
    margin-top: -120px;
    margin-bottom: 120px;
}
.dorade-title.remuve{
    margin-top: -175px;
}
.transition-container1 > div.remuve{
    max-width: 100%!important;
    margin-bottom: 50px;
}
.navigation-list3{
    position: absolute;
    right: 100px;
    font-size: 23px;
    line-height: 40px;
    color: #6D6E71;
    width: fit-content;
    display: none;
}
.navigation-link3{
    position: relative;
}
.navigation-link3::after{
    transition: all 0.3s ease;
    width: 0px;
    content: '';
    position: absolute;
    height: 1px;
    left: 4px;
    bottom: -3px;
    background-color: #E50019;
}
.navigation-link3:hover.navigation-link3::after{
    width: 100%;
}
#pol-online-link{
    color: #E50019!important;
}
.navigation-open-line{
    width: 100%;
    height: 2px;
    background-color: #1A1818;
    margin-top: 55px;
}
.navigation-open-media-language{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lang{
    margin-right: 20px;
    transition:all 0.3s ease;
}
.navigation-open-media-language{
  padding: 40px 0px;
}
.instagram-icon{
    margin: 0px 10px;
}
.lang:hover{
    transform: scale(1.1);
}
.lang-container{
    display: flex;
}
.media-container a{
    transition: 0.3s ease;
}
.media-container a:hover{
    filter: brightness(0.7);
}
.navigation-bar{
    top: 0px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 20;
    width: 100%;
}
.arrow-svg{
    transition: 0.3s ease;
}.product-larger-height img{    max-height: 40px!important;}
.arrow-svg.active{
    transform: rotate(90deg);
}
.hamburger{
    position: fixed;
    right: 40px;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    transition: 0.3s ease;
}
.hamburger.active{
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    justify-content: center;
    padding-right: 12px;
}
.hamburger.clicked{
    background: none;
    box-shadow: none;
}
.hamburger div{
    height: 2px;
}
.hamburger-line1{
    width: 42px;
    background-color: #1A1818;
    transition: all 0.3s ease; 
}
.hamburger-line2{
    width: 48px;
    margin: 10px 0px;
    background-color: #1A1818;
    transition: all 0.3s ease; 
}
.hamburger.clicked .hamburger1-clicked{
    right: 8px;
}
.hamburger.clicked .hamburger2-clicked{
    right: 12px;
}
.hamburger-line3{
    width: 33px;
    background-color: #1A1818;
}
.opened{
    right: 0px;
}
.hamburger1-clicked{
    transform: rotatez(-45deg) translate(-6px, 0.5px);
            position: absolute;
            top: 34px;
            right: -4px;
            width: 40px;
}
.hamburger2-clicked{
    transform: rotatez(45deg);
    position: absolute; 
    top: 29px;
    right: 0px;
    width: 40px;
}
.hamburger3-clicked{
    opacity: 0;
}
.header-title-container{
    width: 800px;
    position: absolute;
    height: 200px;
    left: -100%;
    bottom: 70px;
    backdrop-filter: blur(15px) brightness(1.2);
    background-color: rgba(255, 255, 255, 0.2); 
    border-radius: 0px 0px 50px 0px;
    transition: all 1s ease-out;
    padding: 30px 0px 30px 130px;
}
.header-title-container.active{
    left: 0px;
}
.title{
    font-size: 60px;
    line-height: 70px;
    font-weight: 300;
    color: #1A1818;
}
.title b{
    font-weight: 600;
}
.about-us-section{
    width: 100%;
    background: url(../assets/about-us.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.about-us-container{
    padding: 120px 0px 120px 0px;
    max-width: 1500px;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.about-us-header img{
    width: 100%;
}
.about-us-text h2{
    font-size: 50px;
    font-weight: 700;
    position: relative;
   margin-bottom: 50px;
   padding-left: 60px;
}
.about-us-text{
    width: 600px;
}
.about-us-text p {
    font-size: 18px;
    line-height: 25px;
    max-width: 524px;
    margin-bottom: 30px;
}
.about-us-text h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 2px;
    width: 37px;
    background-color: #E50019;
}
.video-button{
    padding: 15px 40px;
    background-color: #E50019;
    color: white;
    border-radius: 50px;
    font-size: 15px;
    position: relative;
    box-shadow: 0px 0px 20px  rgba(229, 0, 25,0.4);
    transition: all 0.3s ease;
    margin-right: 30px;
}
.video-button::after{
    content: "";
    position: absolute;
    inset: -8px; 
    border-radius: 50px;
    border: 1px solid #E50019;
}
.video-button:hover{
    box-shadow: 0px 0px 40px  rgba(229, 0, 25,0.4);
}
.learn-more-button{
   padding: 12px 20px;
    border-radius: 50px;
    border: 2px solid #E50019;
    display: flex;
    align-items: center;
    color: #E50019;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}
.about-us-button-container{
    display: flex;
    margin-top: 35px;
    align-items: flex-end;
    justify-content: center;
    width: fit-content;
}
.learn-more-button:hover{
    background-color: #E50019;
    color: white;
}
.video-button img{
    transform:translateX(5px);
    transition: 0.3s linear;
    position: relative;
}
.video-button:hover.video-button img{
    transform:translateX(10px);
}
.about-us-counter-container{
    display: grid;
    margin-top: 60px;
    width: 100%;
    grid-template-columns: repeat(3,1fr);
    column-gap: 20px;
}
.about-us-counter{
    background-color: white;
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 40px 40px 0px 0px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.about-us-counter h3{
    padding: 5px 0px;
    color: #E50019;
    font-size: 40px;
    font-weight: 700;
}
.about-us-counter p{
    font-size: 16px;
    margin-bottom: 0px;
    text-align: center;
}
.swiper{
    width: 817px;
  height: 644px;
    border-radius: 0px 0px 0px 60px;
    margin: 0px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 1350px) {
    .about-us-container{
        flex-direction: column;
        align-items: center;
    }
    .about-us-text{
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 1280px) {
    .header-title-container{
        left: unset;
        transition: unset;
    }
    .header-title-container.active{
        left: unset;
    }
}
@media only screen and (max-width: 800px) {
    .swiper{
        width: 500px;
        height: 420px;
    }
    .about-us-text{
        width: 500px;
    }
    .about-us-text p {
        font-size: 15px;
        line-height: 19px;
    }
    .swiper img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media only screen and (max-width: 500px) {
    .about-us-text p {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 20px;
    }
    .about-us-counter-container{
        margin-top: 45px;
    }
    .about-us-text {
        width: 375px;
    }
    .about-us-counter p{
        text-align: center;
    }
    .about-us-counter h3 {
        font-size: 22px;
    }
    .about-us-counter p{
        font-size: 12px!important;
    }
    .about-us-text h2{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .swiper{
        width: 400px;
        height: 320px;
    }
}
@media only screen and (max-width: 500px) {
    .swiper{
        margin-left: auto;
        width: 100%;
    }
    .about-us-container{
        padding-left:0px ;
    }
    .about-us-text{
        width: 100%;
    }
    .about-us-section{
        padding-left: 20px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .about-us-text{
        padding-right: 20px;
    }
    .about-us-container{
        padding: 0px;
    }
}
@media only screen and (max-width: 400px) {
    .video-button{
        padding: 15px 10px;
        font-size: 13px;
    }
    .learn-more-button{
        font-size: 13px;
    }
    .about-us-counter h3{
        font-size: 18px;
    }
    .about-us-counter img{
        height: 25px;
    }
    .about-us-counter{
        padding: 7px;
    }
    .about-us-counter p{
        font-size: 10px!important;
        line-height: 13px;
    }
}
@media only screen and (max-width: 1125px) {
    .navigation-open{
        width: 100%;
    }
    .navigation-bar{
        padding: 20px 50px;
        justify-content: flex-start;
    }
}
.about-us-header img:nth-child(2){
    display: none;
}
@media only screen and (max-width: 1000px) {
    .lang-container{
        flex-wrap: wrap;
        margin-top: 20px;
    }
    .navigation-open-media-language{
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: 40px;
    }
    .navigation-open-line{
        display: none;
    }
    .navigation-list1{
        margin-left: unset;
    }
    .navigation-list-item1{
        text-align: left;
    }
    .navigation-open{
        padding: 120px 50px 0px 50px;
    }
    #tretman-list{
        left: 270px;
    }
    .navigation-list3 {
        right: 40px;
        font-size: 23px;
        line-height: 35px;
    }
        .navigation-list2 {
        left: 420px;
    }
    #tretman-list{
        left: 420px;
    }
}
@media only screen and (max-width: 630px) {
    .navigation-list-item1 > a{
        font-size: 35px;
    }
    .navigation-list2{
        font-size: 25px;
        left: 200px;
        line-height: 40px;
    }
    .navigation-list3{
        font-size: 20px;
        line-height: 30px;
        right: 16px;
    }
    #tretman-list{
        left: 200px;
    }
}
@media only screen and (max-width: 500px) {
    .about-us-header img:nth-child(1){
        display: none;
    }
    .about-us-header img:nth-child(2){
        width: 100%;
        display: block;
        object-fit: cover;
    }
    .about-us-header{
        margin-left: 0px!important;
    }
    .navigation-open{
        padding: 90px 0px 0px 20px!important;
    }
    .navigation-bar{
        padding-left: 20px;
    }
    .hamburger{
        right: 10px;
        height: 60px;
        width: 60px;
        padding-right: 12px;
        top: 10px;
    }
    .navigation-list2{
        width: 100%;
    }
}
@media only screen and (max-width: 460px) {
    .navigation-list-item1 > a{
        font-size: 18px;
        line-height: 40px;
    }
    .navigation-list2{
        padding-right: 0px;
    }
    #tretman-list{
        left: 164px;
    }
    .navigation-list2{
        font-size: 17px;
        line-height: 30px;
        left: 164px;
    }
    .navigation-list3{
        font-size: 15px;
        line-height: 20px;
        right: 0px;
    } 
    .navigation-list-item3{
        padding-left: 15px;
        margin-bottom: 8px;
    }
    .lang {
        margin-bottom: 7px;
    }
    .about-us-text p{
        margin-bottom: 10px;
    }
    .about-us-counter{
        justify-content: center;
    }
    .navigation-link3::before{
        position: absolute;
        width: 10px;
        content: "";
        left: -15px;
        top: 9px;
        height: 1px;
        background-color: #E50019;
    }
    .navigation-open-media-language{
        margin-top: 10px;
    }
    .navigation-link1::after{
        display: none;
    }
    .navigation-link2::after{
        display: none;
    }
    .navigation-link3::after{
        display: none;
    }
}
@media only screen and (max-width: 1095px) {
    .header-title-container{
        width: 600px;
        padding-left: 50px;
    }
    .title{
        font-size: 45px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 600px) {
    .header-title-container{
        width: 379px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-header img{
        width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: left;
    }
    .title{
        font-size: 45px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 380px) {
    .header-title-container{
        width: 100%;
        border-radius: unset;
    }
}
@media only screen and (max-width: 492px) {
    .product-header img{
        object-position: -200px;
    }
    .product-header.outdoor img{
        object-position: -326px;
    }
    .product-header.monofokal img{
        object-position: -550px;
    }
}
.products-section{
    width: 100%;
    padding: 120px 0px ;
}
.product-header img{
    width: 100%;
}
.products-container{
    width: 1100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 50px;
    grid-row-gap: 70px;
    margin: 0 auto;
}
.products-card{
    width: 508px;
    height: 267px;
    border-radius: 0px 0px 0px 64px;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    justify-content: center;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease;
}
.products-card:hover{
    box-shadow: 0px 0px 25px rgba(66, 48, 48, 0.35);
}
.products-card div:first-child{
    background-color: white;
    width: max-content;
    border-radius: 50%;
    padding: 8px;
    padding-bottom: 4px;
    position: absolute;
    top: -40px;
    left: 30px;
    z-index: 1;
}
#product-card1{
    background-color: #D1363C;
}
#product-card2{
    background-color: #5A5B5E;
}
#product-card3{
    background-color: #44A9CD;
}
#product-card4{
    background-color: #546BB1;
}
#product-card5{
    background-color: #C17DB3;
}
#product-card7{
    background-color: #724199;
}
.product-image{
    position: absolute;
    opacity: 0.3;
    width: 100%;
}
.product-text h3{
    font-size: 35px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.product-text p{
    font-size: 15px;
    line-height: 22px;
    color: white;
}
.product-text{
    padding-left: 40px;
    max-width: 350px;
    z-index: 1;
}
.products-text h3{
    font-size: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 50px;
    padding-left: 60px;
}
.products-text h3::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 2px;
    width: 37px;
    background-color: #E50019;
}
.products-text p{
    font-size: 25px;
    line-height: 35px;
    max-width: 680px;
}
.products-text{
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 100px;
}
.product-arrow{
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: white;
    right: 45px;
    bottom: 30px;
    transition: 0.3s ease;
}
.product-arrow::after{
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0; 
    height: 0; 
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid white;
}
.products-card:hover .product-arrow{
    width: 50px;
}
.swiper2 {
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    max-width: 1780px;
    border-radius: 0px 0px 60px 0px;
}
.swiper2 .swiper-button-prev{
    left: 140px;
    top: unset;
    background: url(../assets/slider-left.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: none;
    bottom: 70px;
    width: 63px;
    height: 63px;
    transition: transform 0.3s ease;
}
.swiper2 .swiper-button-prev:hover{
    transform: scale(1.2);
}
.swiper2 .swiper-button-prev::after,.swiper2 .swiper-button-next::after{
    display: none;
}
.swiper2 .swiper-button-next{
    left: 220px;
    top: unset;
    background: url(../assets/slider-right.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: none;
    bottom: 70px;
    width: 63px;
    height: 63px;
    transition: transform 0.3s ease;
}
.swiper2 .swiper-button-next:hover{
    transform: scale(1.2);
}
.slider-text img{
    max-height: 50px;
}
.slider-text h3{
    text-transform: uppercase;
    color: white;
    font-size: 60px;
    font-weight: 300;
}
.progresive-gallery .swiper2{
    padding-top: 40px;
    padding-right: 80px;
    box-shadow: unset;
}
.progresive-gallery .slider-image{
    border-radius: 0px 0px 50px 0px;
}
.progresive-gallery .slider-text {
    position: absolute;
    top: -40px;
    width: 100%;
    max-width: 1200px;
    right: -70px;
    left: unset;
    background-color: #DC4D4E;
    border-radius: 0px 0px 0px 50px;
}
.progresive-gallery .slider-text p{
    font-size: 30px;
    font-weight: 500;
    max-width: unset;
    text-align: right;
    padding: 20px 20px;
}
.slider-text p{
    font-size: 25px;
    max-width: 800px;
    line-height: 40px;
    color: white;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.9);
}
.slider-text{
    position: absolute;
    top: 125px;
    left: 140px;
}
.gallery{
    padding: 0px 100px 0px 0px;
    margin-bottom: -400px;
}
@media only screen and (max-width: 700px) {
    .gallery{
        padding: 0px 20px 0px 0px;
    }
    .slider-text{
        left: 50px;
    }
}
@media only screen and (max-width: 500px) {
    .slider-text img{
        max-height: 22px;
    }
    .slider-text h3{
        font-size: 25px;
        margin-bottom: 15px;
    }
    .slider-text p{
        font-size: 18px;
        line-height: 25px;
    }
    .slider-text{
        left: 20px;
        top: unset!important;
        bottom: 15px!important;
        z-index: 1;
    }
    .slider-image{
        filter: brightness(0.8);
    }
    .swiper2 .swiper-button-prev{
        display: none;
    }
    .swiper2 .swiper-button-next{
        display: none;
    }
    .products-section{
        padding: 50px 0px;
    }
}
@media only screen and (max-width: 1000px) {    
    .products-card{
        width: 376px;
        height: 222px;
    }
    .product-image{
        width: 100%;
        object-fit: cover;
        height: 100%;
    }
    .products-container{
        width: 800px;
    }
}
@media only screen and (max-width: 800px) {   
    .products-container{
        grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
    width: max-content;
    }
    .products-card{
        width: 480px;
        height: 267px;
    }
}
@media only screen and (max-width: 500px) {  
    .products-card{
        width: 376px;
        height: 222px;
    }
    .products-text p{
        font-size: 18px;
        line-height: 25px;
        max-width: 376px;
    }
    .product-text{
        padding-left: 20px;
    }
    .products-card div:first-child{
        top: -27px;
    left: 20px;
    }
    .products-card div:first-child img{
        height: 50px;
    }
    .products-text h3{
        font-size: 35px;
    }
    .products-container{
        grid-row-gap: 52px;
    }
    .products-text h3{
        margin-bottom: 30px;
    }
    .product-text h3{
        font-size: 25px;
    }
    .product-text p{
        font-size: 15px;
    }
}
@media only screen and (max-width: 395px) {  
    .products-card{
        width: 350px;
        height: 196px;
    }
    .products-text p{
        max-width: 350px;
    }
}
.tretman-section{
    width: 100%;
    background-color: #F2F2F2;
    padding-top: 540px;
    position: relative;
    padding-bottom: 239px;
}
.tretman-background{
    position: absolute;
   bottom: 645px;
    left: -233px;
}
.tretman-container1-text h3{
    font-size: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 50px;
    padding-left: 60px;
}
.tretman-container1-text h3::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 2px;
    width: 37px;
    background-color: #E50019;
}
.tretman-container1-text p{
    font-size: 24px;
    line-height: 35px;
    max-width: 480px;
}
.tretman-container1 {
    width: 1100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 50px;
    grid-row-gap: 70px;
    margin: 0 auto;
    margin-bottom: 70px;
}
.tretman-container1-card{
    width: 535px;
    height: 267px;
    border-radius: 0px 0px 0px 61px;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 25%);
    transition: 0.3s ease;
    overflow: hidden;
}
#tretman-container1-card1{
    background-color:rgb(0, 112, 178) ;
}
#tretman-container1-card2{
    background-color:#E50019 ;
}
#tretman-container1-card3{
    background-color:#6D6E71 ;
}
.tretman-container1-card h3{
    color: white;
    font-size: 35px;
    margin-bottom: 10px;
    z-index: 1;
}
.tretman-container1-card p{
    color: white;
    font-size: 18px;
    position: absolute;
    z-index: 1;
    top: 52%;
    opacity: 0;
    transition: 0.3s ease;
}
.tretman-container1-image{
    position: absolute;
    top: 0px;
    opacity: 0.7;
    width: 100%;
}
.tretman-container1-image2{
    position: absolute;
    top: 0px;
    left: 0px;
}
.product-arrow.tretman{
    z-index: 1;
    position: relative;
    right: unset;
    bottom: unset;
}
.tretman-container1-card:hover.tretman-container1-card p {
    opacity: 1;
}
.tretman-container1-card:hover .product-arrow.tretman {
    width: 50px;
}
.tretman-container1-card:hover{
box-shadow: 0px 0px 25px rgb(66 48 48 / 35%);
}
.tretman-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.tretman-container2{
    background-color: white;
    border-radius: 0px 0px 0px 25px;
    display: flex;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 25%);
    margin-left: 25px;
}
.tretman-container2-text{
    padding: 70px 35px 70px 70px;
}
.tretman-container2-text h3 {
    font-size: 35px;
    font-weight: 700;
}
.tretman-container2-text div{
    width: 37px;
    height: 2px;
    background-color: #E2A858;
    margin: 10px 0px ;
}
.tretman-container2-text p {
    font-size: 15px;
    max-width: 300px;
    line-height: 22px;
}
.tretman-container1.dorade{
    margin-top: 100px;
}
.tretman-container1-card.uv{
    background: rgb(140,108,255);
    background: linear-gradient(90deg, rgba(140,108,255,1) 0%, rgba(140,108,255,1) 100%);
}
.tretman-container1-card.remuve{
    background: rgb(107,206,245);
    background: linear-gradient(90deg, rgba(107,206,245,1) 0%, rgba(54,103,123,1) 100%);
}
.tretman-container1-card.transition{
    background: rgb(17,134,116);
    background: linear-gradient(90deg, rgba(17,134,116,1) 0%, rgba(41,168,216,1) 100%);
}
.tretman-container1-card.nupolar{
    background: rgb(226,131,88);
    background: linear-gradient(90deg, rgba(226,131,88,1) 0%, rgba(233,181,11,1) 100%);
}
.tretman-container1-card.drivewear{
    background: rgb(109,110,113);
    background: linear-gradient(90deg, rgba(109,110,113,1) 0%, rgba(55,55,57,1) 100%);
}
.tretman-container2-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.tretman-container2-card{
    width: 356px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #F9F9F9;
    border: 2px solid white;
    transition: 0.3s ease;
}
.arrow2{
    position: relative;
    width: 50px;
    height: 2px;
    background-color: white;
    transition: 0.3s ease;
    margin-top: 10px;
    transition: 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
.arrow2::after{
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0; 
    height: 0; 
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid white;
}
.tretman-container2-card h4{
    font-size: 18px;
    font-weight:normal;
    max-width: 140px;
    text-align: center;
}
.tretman-container2-card:hover{
    background-color: #E2A858;
    color: white;
    border: none;
}
.tretman-container2-card:hover .arrow2{
    opacity: 1;
    visibility:visible;
}
@media only screen and (max-width: 1100px) {    
    .tretman-container{
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }
    .tretman-container1{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
        width: unset;
    }
    .tretman-container2{
        flex-direction: column;
        margin-left: 0px;
    }
    .tretman-container2-card{
        height: 130px;
    }
}
@media only screen and (max-width: 700px) {  
    .tretman-container2-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 534px) {  
    .tretman-container1-card{
        width: 376px;
        height: 198px;
    }
    .tretman-container1-image2{
        width: 100%;
    }
    .tretman-container1-text p{
        max-width: 376px;
    }
}
@media only screen and (max-width: 480px) {  
    .tretman-container2-text{
        padding: 20px;
    }
    .tretman-container2-card{
        width: 184px;
        height: 104px;
    }
    .tretman-container2-card h4{
        font-size: 15px;
    }
}
@media only screen and (max-width: 450px) { 
    .products-section{
        padding: 50px 20px;
        padding-top: 0px;
    }
    .products-container{
        width: 100%;
        margin: unset;
    }
    .products-card{
        width: 100%;
    }
    .tretman-container{
        padding: 0px 20px;
    }
    .tretman-container1-image2{
        height: 100%;
    }
    .product-text{
        padding-right: 20px;
    }
    .product-arrow.tretman{
        width: 75px;
    }
    .tretman-container1-image{
        height: 100%;
    }
    .tretman-container1-card{
        width: 100%;
        padding: 66px 0px;
    }
    .tretman-container1-card h3{
        font-size: 25px;
    }
    .product-arrow{
        width: 75px;
    }
    .tretman-container1-card p{
        font-size: 13px;
    }
    .tretman-container2{
        width: 100%;
    }
    .tretman-container2-card{
        width: 100%;
    }
    .tretman-container2-grid{
        width: 100%;
    }
    .tretman-container2-text h3{
        font-size: 35px;
    }
    .tretman-container2-text p{
        font-size: 15px;
    }
}
.progresive-inner-flex-image{
    margin-left: -450px;
    margin-bottom: -120px;
}
.contact-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0px 50px;
    padding-bottom: 70px;
}
.contact-container{
    width: min(1640px,100%);
    background: url(../assets/contact-image.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: -139px;
    position: relative;
    border-radius: 55px 55px 0px 0px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.contact-stripe{
    position: absolute;
    top: 0px;
    left: 111px;
}
.contact-container-text{
    padding-top: 130px;
    padding-bottom: 143px;
    padding-left: 277px;
    height: 645px;
    position: relative;
    z-index: 1;
}
.contact-container-text p{
    padding: 66px 0px;
    max-width: 425px;
    font-size: 40px;
}
.contact-container-text div{
    position: relative;
}
.contact-container-text div img{
    padding-left: 60px;
}
.contact-container-text div::after {
    position: absolute;
    left: 0px;
    top: 40%;
    content: "";
    height: 2px;
    width: 37px;
    background-color: #E50019;
}
.contact-popout-button{
    padding: 12px 20px;
    border-radius: 50px;
    border: 2px solid #E50019;
    display: flex;
    align-items: center;
    color: #E50019;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    background-color: transparent;
    transition: 0.3s ease;
    font-size: 18px;
    margin-top: 70px;
}
.contact-popout-button svg{
    margin-left: 10px;
}
.arrow-svg path{
    transition: 0.3s ease;
}
.contact-popout-button:hover{
    background-color: #E50019;
    color: white;
}
.contact-popout-button:hover .arrow-svg path{
    stroke: white;
}
.contact-popout{
    width: min(1157px,100%);
    padding: 0px 40px;
}
.form{	position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.form-left{
    display: flex;
    flex-direction: column;
    max-width: 504px;
    width: 100%;
}
.form-left input{
    border: none;
    height: 60px;
    border-radius: 0px 0px 50px 0px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 24px;
}
form label{
    font-size: 15px;
    margin-bottom: 13px;
}
.form-right{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 504px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.form-right textarea{
    height: 292px;
    border-radius: 0px 0px 50px 0px;
    padding: 20px;
    font-family: inherit;
    resize: none;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    border: none;
}
.form-right textarea:focus-visible{
    outline: none;
    border: 2px solid #1A1818;
}
.form-send{
    padding: 12px 20px;
    border-radius: 50px;
    border: 2px solid #E50019;
    display: flex;
    align-items: center;
    color: #E50019;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    transition: 0.3s ease;
    font-size: 18px;
    margin: 0px auto;
    margin-top: 70px;
    transition: 0.3s ease;
}
.form-send:hover{
    background-color: #E50019;
    color: white;
}
.contact-popout{
  max-height: 0px;
  overflow: hidden;
   transition: max-height 0.5s ease;
z-index: 1;
}
.contact-popout-button.active{
    margin-bottom: 70px;
}
.footer-section{
    width: 100%;
    background-color: #1A1818;
    position: relative;
    border-radius: 50px 50px 0px 0px;
    padding: 70px 150px 20px 150px;
}
.footer-info a, .footer-info p{
    color: white;
    transition: 0.3s ease;
}
.footer-info a:hover{
    color: #E50019;
}
.download-container2{
    color: white;
}
.footer-container1{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.download-container2{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.download-container2 svg{ 
    margin-bottom: 20px;
}
.download-svg #Path_417{
    transition: 0.3s ease;
}
.download-svg:hover #Path_417{ 
   transform: translate(-186.711px ,5939.891px)!important;
}
.download-container2 h3{
    font-size: 25px;
    font-weight: normal;
    white-space: nowrap;
}
.footer-address1{
    display: flex;
    flex-direction: column;
}
.footer-info{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 200px;
}
.footer-address2{
    display: flex;
    flex-direction: column;
}
.footer-address2 div{
    margin-bottom: 5px;
}
.footer-address1 div{
    margin-bottom: 5px;
}
.footer-info p {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
}
.footer-info a {
    font-size: 15px;
    padding-left: 5px;
}
.footer-media{
    display: flex;
}
.instagram-media-footer{
    padding: 0px 10px;
    transition: 0.3s ease;
}
.instagram-media-footer:hover{
    transform: scale(1.1);
}
.facebok-media-footer{
    transition: 0.3s ease;
}
.facebok-media-footer:hover{
    transform: scale(1.1);
}
.youtube-media-footer{
    transition: 0.3s ease;
}
.youtube-media-footer:hover{
    transform: scale(1.1);
}
.footer-line{
    width: 100%;
    background-color: #E50019;
    height: 1px;
    margin-top: 65px;
    margin-bottom: 26px;
}
.footer-container2 a{
    color: white;
}
.footer-container2{
    color: white;
}
.footer-container2{
    display: flex;
    justify-content: space-between;
}
.impressum a{
    transition: 0.3s ease;
    font-size: 15px;
}
input{
    padding: 0 20px;
}
input:focus-visible{
    outline: none;
    border: 2px solid #1A1818
}
.impressum a:hover{
    color: #E50019;
}
.copyright p {
    font-size: 15px;
}
.mania p {
    font-size: 15px;
}
.mania a{
    transition: 0.3s ease;
    font-weight: bold;
}
.mania a:hover{
    color: #F5CB14;
}
.impressum{
    display: flex;
    align-items: center;
    justify-content: center;
}
.impressum div{
    height: 17px;
    width: 1px;
    background-color: white;
    margin: 0px 10px;
}
.grey-stripe{
    position: absolute;
    bottom: -306px;
    left: -131px;
    background: url(../assets/grey-stripe2.png);
    width: 850px;
   height: 305px;
   background-repeat: no-repeat;
   transition: 0.3s ease-in;
}
.grey-stripe.active{
    bottom: -836px;
    left: -131px;
    height: 834.61px;
    width: 850px;
}
@media only screen and (max-width: 1100px) {  
    .form-left{
        margin-right: 30px;
    }
}
@media only screen and (max-width: 1000px) {  
    .grey-stripe{
        display: none;
    }
    .contact-stripe{
        display: none;
    }
    .tretman-background{
        display: none;
    }
    .contact-container-text{
        padding: 50px;
        background: white;
        margin-top: 239px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        width: max-content;
    }
    .contact-container{
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contact-popout-button{
        margin-top: 120px;
    }
}
@media only screen and (max-width: 650px) {  
    .contact-container{
        background: url(../assets/contact-image-mobile.png);
        background-repeat: no-repeat ;
        background-size: cover;
        background-position: center;
        height: 467px;
    }
    .contact-container-text div img{
        height: 21px;
    }
    .contact-container-text p{
        font-size: 18px;
        line-height: 25px;
        max-width: 150px;
        padding: 25px 0px;
    }
    .contact-container-text button{
        margin-right: 0px;
        font-size: 15px;
        padding: 10px 25px;
    }
    .contact-popout-button{
        margin-top: 70px;
    }
    .contact-section{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 480px) {  
    .contact-section{
        padding: 0px;
        padding-bottom: 50px;
    }
    .contact-popout-button{
        margin-top: 190px;
    }
    .contact-container-text{
        width: 100%;
        margin: 0 20px;
        margin-top: 460px;
    }
}
@media only screen and (max-width: 650px) {  
    .form{
        flex-direction: column;
    }
    .form-left{
        margin-right: 0px;
    }
    .contact-popout{
        padding: 0 0px;
    }
}
@media only screen and (max-width: 480px) {  
    form{
        padding: 0px 20px;
    }
    .form-right textarea{
        height: 200px;
    }
    button{
        font-size: 15px!important;
    }
}
@media only screen and (max-width: 1600px) {  
    .footer-section{
        padding: 70px 50px 20px 50px;
    }
    .footer-info{
        padding: 0px 120px
    }
}
@media only screen and (max-width: 1150px) {  
    .footer-info{
        padding: 0px 50px
    }
}
.video{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.footer-container-mobile{
    display: none;
}
@media only screen and (max-width: 1150px) { 
    .footer-container{
        display: none;
    }
    .footer-container-mobile{
        display: flex;
        flex-direction: column;
        color: white;
        width: 100%;
    }
    .footer-container-mobile a{
        color: white;
    }
    .footer-container-mobile1{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer-container-mobile2{
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .footer-container-mobile2 p{
        margin-bottom: 10px;
    }
    .footer-container-mobile2 a{
        margin-bottom: 5px;
    }
    .footer-line{
        margin-top: 30px;
    }
}
.white-overlay img{
    width: 100%;
}
.footer-container2-mobile{
    display: none;
}
@media only screen and (max-width: 655px) { 
    .footer-media{
        margin-top: 30px;
    }
}
@media only screen and (max-width: 530px) { 
    .footer-address2{
        margin-top: 30px;
    }
}
@media only screen and (max-width: 625px) { 
    .footer-container2{
        display: none;
    }
    .copymania div:nth-child(2){
        height: 17px;
        width: 1px;
        background-color: white;
        margin: 0px 10px;
    }
    .copyright {
        display: flex;
    }
    .mania{
        display: flex;
    }
    .copymania{
        display: flex;
        margin-top: 10px;
    }
    .footer-container2-mobile{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
}
@media only screen and (max-width: 450px) { 
.footer-container-mobile a, .footer-container-mobile p{
    font-size: 15px;
}
.download-container2 h3{
    font-size: 18px;
}
.footer-logo img{
    height: 81.38px;
}
.footer-section{
    padding: 50px 20px 20px 20px;
}
.footer-container-mobile2{
    flex-direction: column;
    align-items: flex-start;
}
.footer-line{
    margin: 20px 0px;
}
.hamburger-line1{
    width: 34px;
}
.hamburger-line2{
    width: 39px;
}
.hamburger-line3{
    width: 27px;
}
.hamburger2-clicked{
    width: 34px;
    top: 19px;
    right: 15px;
}
.hamburger1-clicked{
    top: 24px;
    right: 11px;
}
.navigation-bar img{
    height: 36px;
}
}
 /* -------------------------> ABOUT US PAGE <---------------------------- */
 p{
     color: #6D6E71;
 }
 .about-us-container1-text p{
     max-width: 500px;
     font-size: 18px;
     line-height: 25px;
     margin-bottom: 30px;
 }
 .about-us-container1-text p:last-child{
    margin-bottom: 0px;
 }
 .optimizacija-lece-container2-text li p{
     margin-bottom: 0px;
     padding-left:30px;
 }
 .list-number{
     position: absolute;
 }
 .about-us-container1-text h2{
    font-size: 50px;
    font-weight: 700;
    position: relative;
   margin-bottom: 50px;
   padding-left: 60px;
}
.about-us-container1-text h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 2px;
    width: 37px;
    background-color: #E50019;
}
.about-us-container1{
    display: flex;
    margin-left: auto;
    max-width: 1500px;
    margin-bottom: 70px;
    justify-content: space-between;
}
.about-us-main-section{
    padding: 130px 0px;
    background: url(../assets/polygon-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.about-us-container1-image img{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 0px 70px;
}
.about-us-container2{
    background-color: #F0F0F0;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    width: 1640px;
    margin-top: 130px;
    padding-right: 130px;
    border-radius: 0px 70px 0px 0px;
}
.about-us-container2-content{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.about-us-container2-content1{
    display: flex;
    align-items: flex-end;
    margin-top: -70px;
    padding-right: 123px;
}
.about-us-container2-content1 img{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 0px 70px;
}
.about-us-container2-content1-text{
    max-width: 510px;
    margin-left: 50px;
}
.about-us-container2-content1-text h3{
    font-size: 50px;
    font-weight: 300;   
    position: relative;
    margin-bottom: 50px;
    padding-left: 60px;
}
.about-us-container2-content1-text h3::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 2px;
    width: 37px;
    background-color: #E50019;
}
.about-us-container2-content1-text p{
    max-width: 470px;
    font-size: 18px;
    line-height: 25px;
}
.about-us-container2-content2{
    margin-top: 70px;
    display: flex;
    align-items: flex-start;
    margin-bottom: -70px;
}
.about-us-container2-content1-text.second{
    max-width: unset;
}
.about-us-container2-content1-text div{
    display: flex;
}
.about-us-container2-content1-text div img{
   margin-left: 175px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
   border-radius: 0px 0px 0px 70px;
}
@media only screen and (max-width: 1000px) { 
    .about-us-header{
        margin-left: -460px;
    }
}
@media only screen and (max-width: 1600px) { 
    .about-us-container2{
        width: unset;
        background-color: transparent;
        box-shadow: unset;
        padding-right: 0px;
    }
    .about-us-container2-content{
        align-items: center;
    }
    .about-us-container1{
        padding-left: 50px;
        align-items: center;
    }
    .about-us-container1-image img{
        height: 372px;
    }
    .about-us-container2-content1-text.second{
        margin-left: 0px;
    }
}
.mobile-image-about-us{
    display: none;
}
@media only screen and (max-width: 1080px) { 
    .about-us-container1-text p{
        max-width: unset;
    }
    .about-us-container1{
        flex-direction: column;
    }
    .about-us-container1-image img{
        height: unset;
        margin-top: 50px;
        margin-left: 0px;
        width: 100%;
    }
    .about-us-container1{
        padding-left: 0px;
    }
    .about-us-main-section{
        padding: 130px 50px;
    }
    .about-us-container2-content1{
        flex-direction: column-reverse;
        align-items: center;
        margin-top: unset;
        padding-right: 0px;
    }
    .about-us-container2-content1 img{
        width: 100%;
        margin-top: 50px;
        border-radius: 0px 0px 0px 130px;
    }
    .about-us-container2-content1-text{
        max-width: unset;
    }
    .about-us-container2-content1-text p{
        max-width: unset;
    }
    .about-us-container2-content1-text img{
        display: none;
    }    
    .mobile-image-about-us{
        display: block;
        width: 100%;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        border-radius: 0px 0px 0px 130px;
        margin-top: 50px;
    }
    .about-us-container2-content2{
        flex-direction: column;
        margin-bottom: 0px;
    }
    .about-us-container2-content1-text{
        margin-left: 0px;
    }
}
@media only screen and (max-width: 800px) { 
    .about-us-main-section{
        padding: 80px 40px;
    }
    .about-us-container2{
        margin-top: 80px;
    }
}
@media only screen and (max-width: 700px) { 
    .mobile-image-about-us{
        border-radius: 0px 0px 0px 70px;
    }
    .about-us-container2-content1 img{
        border-radius: 0px 0px 0px 70px;
    }
}
.footer-container-mobile2 p{
    color: white;
}
@media only screen and (max-width: 500px) { 
    .about-us-main-section{
        padding: 50px 20px;
    }
    .about-us-container1-text h2{
        font-size: 35px;
        margin-bottom:30px;
    }
    .about-us-container2-content1-text h3{
        margin-bottom: 30px;
        font-size: 35px;
    }
    .about-us-container1-text p{
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 20px;
    }
    .mobile-image-about-us{
        border-radius: 0px 0px 0px 55px;
        margin-top: 30px;
    }
    .about-us-container2-content1 img{
        border-radius: 0px 0px 0px 55px;
        margin-top: 30px;
    }
    .footer-container-mobile a, .footer-container-mobile p{
        color: white;
    }
    .about-us-container1-image img{
        border-radius: 0px 0px 0px 30px;
        margin-top: 30px;
    }
    .about-us-container2{
        margin-top: 50px;
    }
    .about-us-container2-content2{
        margin-top: 50px;
    }
}
/* ------------------> PRODUCT PAGE <---------------------------- */
.product-section{
    background: url(../assets/polygon-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 130px 0px;
    background-position: center;
    position: relative;
}
.product-section.monofokal{
    padding-top: 240px;
}
.product-title{
    margin-top: 130px;
}
.product-title div img{
    height: 67px;
    margin-right: 20px;
}
.product-title div h3{
    font-size: 50px;
    text-transform: uppercase;
}
.product-title div{
    margin-bottom: 30px;
    display: flex;
}
.product-title p{
    color: #6D6E71;
    font-size: 25px;
    line-height: 35px;
    max-width: 500px;
    font-weight: 300;
}
.product-title{
    margin-bottom: 50px;
}
.product-container{
    max-width: 1080px;
    margin: 0 auto;
}
.product-list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: space-between;
    gap: 70px;
}
.product-list .product img{
    max-height: 30px;
}
.product{
    height: 180px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    background-color: rgba(220, 77, 78,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s ease;
}
.product.proffesional{
    background-color: rgba(109, 110, 113,0.8);
}
.product.proffesional:hover{
    background-color: #6D6E71;
}
.product p{
    color: white;
    font-size: 35px;
    text-transform: uppercase;
    text-align: center;
}
.product .product-arrow{
    opacity: 0;
    transition: 0.3s ease;
}
.product:hover{
    background-color: #DC4D4E;
    border-radius: 0px 0px 0px 50px;
}
.product:hover.product .product-arrow{
    opacity: 1;
}
@media only screen and (max-width: 1080px) { 
    .product-container{
        max-width: 800px;
    }
    .product{
        height: 133px;
    }
    .product p{
        font-size: 25px;
    }
}
@media only screen and (max-width: 800px) { 
    .product-list{
        grid-template-columns: unset;
        grid-template-columns: repeat(1,1fr);
        gap: 30px;
    }
    .product-container{
        max-width: 500px;
    }
}
@media only screen and (max-width: 500px) { 
    .product-title div h3{
        font-size: 24px;
    }
    .product-title div img {
        height: 40px;
        margin-right: 10px;
    }
    .product-title p{
        font-size: 18px;
        line-height: 25px;
    }
    .product-container{
        width: 100%;
        padding: 0px 20px;
    }
    .product-title{
        margin-bottom: 30px;
    }
    .product-section{
        padding: 50px 0px;
    }
}#alertMsg{	position: absolute;    bottom: -20px;}
.product.outdoor{
    background-color: rgba(0, 139, 229,0.8);
}
.product.polino{
    background-color: rgba(114, 65, 153,0.8);
}
.product.polino:hover{
    background-color: rgb(114, 65, 153);
}
.product.outdoor:hover{
    background-color: #008BE5;
}
.product.bifokal{
    background-color: rgba(84, 107, 177,0.8);
}
.product.bifokal:hover{
    background-color: rgb(84, 107, 177);
}
.product.monofokal{
    background-color: rgba(193, 125, 179,0.8);
}
.product.monofokal:hover{
    background-color: #C17DB3;
}
/* ---------------------> SINGLE PAGE PRODUCT <---------------------------- */
.single-page-section{
    padding: 130px 0px;
}
.single-page-title{
    display: flex;
    max-width: 1080px;
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 70px;
}
.single-page-title-text img{
    max-height: 50px!important;
    width: 100%;
    display: block!important;
}
.single-page-title div:first-child{
    display: flex;
    align-items: center;
}
.single-page-title div img{
    margin-right: 30px;
}
.single-page-title div p {
    color: black;
    text-transform: uppercase;
}
.single-page-title div p:last-child {
    font-size: 50px;
}
.single-page-title div p:first-child {
    font-size: 15px;
    margin-bottom: -13px;
}
.single-page-container{
    width: 95%;
    padding: 65px 0px;
    background: #DC4D4E;   
    border-radius: 0px 0px 50px 0px;
    position: relative;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.single-page-container-content h4 b{
    text-transform: uppercase;
}
.single-page-container.profesional{
    background-color: #6D6E71;
}
.single-page-container.outdoor{
    background-color: #008BE5;
}
.single-page-container.bifokal{
    background-color: #546BB1;
}
.single-page-container.monofokal{
    background-color: #C17DB3;
}
.single-page-container.polino{
    background-color: #724199;
}
.single-page-container-content{
    max-width: 575px;
    position: relative;
    padding-left: 50px;
}
.single-page-container-content p,.single-page-container-content h3, .single-page-container-content h4, .single-page-container-content ul li{
    color: white;
}
.single-page-container-content p{
    font-size: 18px;
    line-height: 35px;
}
.single-page-container-content span{
    font-weight: bold;
    text-decoration: underline;
}
.single-page-container-content h3{
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 30px;
    font-weight: normal;
}
.single-page-container-content h4{
    font-size: 50px;
    line-height: 60px;
    font-weight: normal;
    position: relative;
    margin-top: 40px;
    padding-left: 60px;
}
.single-page-container-content h4::after{
    position: absolute;
    left: 0px;
    top: 25px;
    content: "";
    height: 2px;
    width: 37px;
    background: white;
}
.single-page-inner-container{
    max-width: 1080px;
    margin: 0 auto;
}
.single-page-list {
    display: flex;
    margin-top: 40px;
    position: relative;
    align-items: center;
}
.single-page-list p{
    color: white;
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
}
/* .single-page-title div p:last-child{
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight: 600;
}
.single-page-title div p:last-child b{
    color: black;
    text-shadow: none;
} */
.single-product-image{
    position: absolute;
    right: -1000px;
    top: 0px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
    border-radius: 0 0 0 60px;
    overflow: hidden;
}
.single-page-container.tosmall .single-page-container-content{
    padding-left: 0px;
}
.single-page-container.tosmall .single-page-inner-container{
    width: 100%;
}
.inner-gallery{
    margin: 100px 0px;
    margin-bottom: 130px;
}
.inner-gallery .swiper2{
    max-width: 1840px;
    width: 100%;
}
.after-slider-title{
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    color: #2a2a2a;
    margin-bottom: -100px;
}
.after-slider-title.products{
    margin-bottom: 100px;
}
.after-slider-title.sport{
    margin: 100px 0px;
    margin-top: 150px;
}
.single-page-container.tosmall{
    min-height: 542px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}
.single-product-image.to-small{
    top: -250px;
}
.single-product-image video{
    display: block;
}
.single-product-image.shorten{
    top: -120px;
}
@media only screen and (max-width: 1820px){
    .single-product-image{
        right: -920px;
    }
    .progresive-inner-flex-image {
        margin-left: -325px;
    }
  }
  @media only screen and (max-width: 1700px){
    .progresive-inner-flex-text{
        flex: 1;
    }
    .single-product-image{
        position: absolute;
        right: -855px;
        max-width: 700px;
    }
    .progresive-inner-flex-image{
        max-width: 700px;
        width: 100%;
        margin-left: -267px;
    }
    .progresive-inner-flex-image img{
        width: 100%;
    }
  }
  @media only screen and (max-width: 1600px){
    .single-product-image{
        right: -804px;
    }
    .progresive-inner-flex-image{
        margin-left: -220px;
    }
  }
  @media only screen and (max-width: 1550px){
    .single-product-image{
        right: -754px;
    }
    .progresive-inner-flex-image{
        margin-left: -170px;
    }
  }
  @media only screen and (max-width: 1500px){
    .single-product-image{
        right: -704px;
    }
    .progresive-inner-flex-image{
        margin-left: -120px;
    }
  }
  @media only screen and (max-width: 1450px){
    .single-product-image{
        right: -830px;
    }
    .progresive-inner-flex-image{
        margin-left: 0px;
    }
    .single-page-container-content{
        padding-left: 30px;
    }
    .single-page-inner-container{
        max-width: 100%;
    }   
  }
  @media only screen and (max-width: 1400px){
    .single-product-image{
        right: -780px;
    }
  }
  @media only screen and (max-width: 1350px){
    .single-product-image{
        right: -730px;
    }
  }
  @media only screen and (max-width: 1300px){
    .single-product-image{
        right: -680px;
    }
  }
@media only screen and (max-width: 1080px) { 
    .single-page-title{
        padding: 0px 50px;
    }
}
@media only screen and (max-width: 1280px) { 
    .single-product-image{
        position: relative;
        top: 0px!important;
        right: unset;
        height: auto;
        margin: 30px 0px;
        width: 100%;
    }
    .single-page-container-content{
        padding-right: 50px;
    }
    .single-page-container-content{
        max-width: 100%;
    }
    .progresive-inner-flex-image{
        margin-left: 0px;
    }
}
@media only screen and (max-width: 600px) { 
    .single-page-container-content p{
        font-size: 18px;
        line-height: 25px;
    }
    .single-page-list{
        margin-top: 30px;
    }
    .single-page-container-content h4{
        margin-top: 0px;
    }
    .single-page-container-content h3{
        font-size: 25px;
        line-height: 35px;
        margin-bottom: 20px;
    }
    .single-page-container-content h4{
        font-size: 30px;
        line-height: 40px;
        padding-left: 45px;
    }
    .single-page-container-content h4::after{
        width: 25px;
    }
    .single-page-list img{
        height: 31px;
    }
    .single-page-list p{
        font-size: 18px;
        line-height: 25px;
    }
    .single-page-container-content{
        padding: 0 20px;
    }
    .single-page-title{
        padding: 0 20px;
    }
    .single-page-container{
        width: 96%;
    }
    .single-page-title div img{
        height: 46px;
    }
    .single-page-title div p:first-child{
        font-size: 12px;
        margin-bottom: -8px;
    }
    .single-page-title div p:last-child{
        font-size: 30px;
    }
    .single-page-title div img{
        margin-right: 15px;
    }
    .single-page-title img:last-child{
        height: 40px;
        display: none;
    }
    .single-page-title{
        margin-bottom: 40px;
    }
    .single-page-section{
        padding: 50px 0px;
    }
    .single-page-container{
        padding: 40px 0px;
    }
}
@media only screen and (max-width: 450px) { 
    .tretman-section{
        padding-bottom: 240px;
    }
    .about-us-container{
        padding-bottom: 0px;
    }
}
@media only screen and (max-width: 600px) { 
    .tretman-container1-text h3{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .tretman-container1-text p{
        font-size: 18px;
        line-height: 25px;
    }
    .tretman-container1{
        gap: 0px;
        margin-bottom: 50px;
    }
    .arrow2{
        display: none;
    }
    .tretman-section{
        padding-bottom: 190px;
    }
    .tretman-container1.dorade > a{
        margin-bottom: 30px;
    }
    .tretman-container1.dorade > a:last-child{
        margin-bottom: 0px;
    }
}
/* -----------------> DOWNLOAD PAGE <-------------------- */
.download-section{
    width: 100%;
    background: url(../assets/polygon-background.png);
    background-repeat: no-repeat;
    padding: 130px 50px;
    background-size: cover;
}
.download-container{
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.download-title h3{
    position: relative;
    font-size: 50px;
    color: #1A1818;
    padding-left: 60px;
}
.download-title h3::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.download-title{
    margin-bottom: 30px;
}
.download-name{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
}
.download-name p:first-child{
    text-transform: uppercase;
    font-size: 25px;
    font-weight: bold;
    color: #1A1818;
}
.download-name p:last-child{
    text-transform: uppercase;
    font-size: 18px;
    color: #1A1818;
}
.download-content{
    width: 100%;
}
.download-line{
    width: 100%;
    height: 1px;
    background-color: #1A1818;
    margin: 0px 0px 15px 0px;
}
.download-files{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 10px;
}
.download-files p{
    font-size: 25px;
    transition: 0.3s ease;
}
.download-files img{
    height: 27px;
    opacity: 0.5;
    transition: 0.3s ease;
}
.download-files:hover p{
    color: #1A1818;
}
.download-files:hover img{
    opacity: 1;
}
@media only screen and (max-width: 500px) { 
    .download-title h3{
        font-size: 35px;
    }
    .download-name p:first-child{
        font-size: 20px;
    }
    .download-name p:last-child{
        font-size: 15px;
    }
    .download-files p{
        font-size: 15px;
    }
    .download-files img{
        height: 23px;
    }
    .download-section{
        padding: 50px 20px;
    }
}
/* --------------------> IMPRESSUM PAGE <-------------------------- */
.impressum-section{
    width: 100%;
    padding: 130px 50px;
}
.impressum-container{
    max-width: 1080px;
    margin: 0 auto;
}
.impressum-container h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 50px;
}
.impressum-container h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.impressum-container h3{
    font-size: 25px;
    line-height: 31px;
    margin-bottom: 10px;
}
.impressum-container p{    
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 30px;
}
.impressum-container a{
    transition: color 0.3s ease;
}
.impressum-container a:hover{
    color: #E50019;
}
.impressum-container p:last-child{
    margin-bottom: 0px;
}
@media only screen and (max-width: 600px) { 
    .impressum-section{
        padding: 50px 20px;
    }
    .impressum-container h2{
        font-size: 35px;
    }
    .impressum-container h3{
        font-size: 25px;
        line-height: 31px;
    }
    .impressum-container p{    
        font-size: 18px;
        line-height: 25px;
    }
}
/* -----------------------> CONTACT PAGE<------------------------------- */
.contact-page-section{
    width: 100%;
    padding: 130px 50px 65px 50px;
}
.contact-page-container{
    max-width: 1080px;
    margin: 0 auto;
}
.contact-page-title-text h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 50px;
}
.contact-page-title-text h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.contact-page-title-text p{
    max-width: 515px;
    font-size: 18px;
    line-height: 35px;
    color: #1A1818;
}
.contact-page-title-text{
    margin-bottom: 60px;
}
.contact-map{
    margin-bottom: 60px;
    position: relative;
}
.contact-map iframe{
    width: 100%;
}
.contact-map img{
    width: 100%;
}
.city-container{
    background-color: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    padding: 60px 130px;
    position: absolute;
    width: max-content;
    top: 70px;
    left: -130px;
    border-radius: 0px 0px 50px 0px;
}
.city{
   margin-bottom: 10px;
   position: relative;
}
.city-container .city:last-child{
    margin-bottom: 0px;
}
.city-name{
    cursor: pointer;
}
.city-list{
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
}
.city-list li{
    margin-top: 5px;
    transition: 0.3s ease;
}
.city-list a:hover{
    color: #D1363C;
}
.city-list  img{
    width: unset;
    margin-right: 5px;
}
.city-arrow{
    position: absolute;
    height: 20px;
    width: 10px!important;
    top: 0px;
    left: -20px;
    transition: 0.3s ease;
}
.city-arrow.active-image{
    transform: rotate(90deg);
}
@media only screen and (max-width: 800px) { 
    .city-container{
        padding: 60px;
        left: -20px;
    }
}
@media only screen and (max-width: 600px) { 
    .contact-page-section{
        padding: 50px 0px;
    }
    .contact-page-title-text{
        padding: 0px 20px;
    }
    .city-container{
        padding: 60px;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    top: -40px;
    }
    .contact-page-title-text{
        margin-bottom: 70px;
    }
    .contact-page-title-text h2{
        margin-bottom: 30px;
        font-size: 35px;
    }
    .contact-page-title-text p{
        font-size: 18px;
        line-height: 25px;
    }
    .form-send{
        margin-top: 40px;
    }
}
#map{
    width: 100%;
    height: 600px;
}
/* --------------------------------> OSTALI TRETMANI <--------------------------------------- */
.tretmani-info-image{
    width: 100%;
}
.tretmani-info-image-mobile{
    display: none;
}
.tretmani-info-header{
    height: max-content;
}
@media only screen and (max-width: 600px) { 
    .tretmani-info-image{
        display: none;
    }
    .tretmani-info-image-mobile{
        width: 100%;
        display: block;
    }
}
.ostali-tretmani-section{
    width: 100%;
    padding: 130px 0px;
}
.ostali-tretmani-container{
    padding: 50px 0px;
    width: 95%;
    background: url(../assets/polygon-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 50px 0px;
    display: flex;
    background-position: center;
    justify-content: flex-end;
    padding-left: 50px;
    background-color: rgba(109, 110, 113,0.1);
}
.ostali-tretmani-text h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 70px;
}
.ostali-tretmani-text h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.ostali-tretmani-text h3{
    margin-bottom: 20px;
    font-size: 25px;
    line-height: 31px;
    color: #6D6E71;
}
.ostali-tretmani-text p{
    margin-bottom: 40px;
    font-size: 18px;
    max-width: 660px;
    line-height: 25px;
}
.ostali-tretmani-content{
    max-width: 1500px;
    display: flex;
}
.ostali-tretmani-text{
    max-width: 700px;
}
.ostali-tretmani-image{
    margin-left: 100px;
    margin-right: -100px;
    border-radius: 0px 0px 0px 60px;
}
.ostali-tretmani-image img{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0px 60px;
}
@media only screen and (max-width: 1350px) { 
    .ostali-tretmani-image img{
        height: 500px;
    }
}
@media only screen and (max-width: 1000px) { 
    .ostali-tretmani-container{
        justify-content: unset;
        align-items: center;
        padding: 50px;
    }
    .ostali-tretmani-content{
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .ostali-tretmani-image{
        height: unset;
        margin: 0px;
    }
    .ostali-tretmani-image img{
        width: 100%;
        height: unset;
    }
}
@media only screen and (max-width: 600px) { 
    .ostali-tretmani-section{
        padding: 0px;
    }
    .ostali-tretmani-container{
        width: 100%;
        box-shadow: unset;
        padding: 50px 20px;
        padding-right: 0px;
        background-color: transparent;
    }
    .ostali-tretmani-text{
        padding-right: 20px;
    }
    .ostali-tretmani-text h2{
        font-size: 35px;
        line-height: 40px;
        margin-bottom: 30px;
    }
    .ostali-tretmani-text h3{
        font-size: 25px;
        line-height: 31px;
    }
    .ostali-tretmani-text p{
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 30px;
    }
}
.optimizacija-lece-section{
    width: 100%;
    padding: 130px 0px;
}
.optimizacija-lece-container1{
    padding: 50px 0px;
    width: 95%;
    background: url(../assets/polygon-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 50px 0px;
    display: flex;
    justify-content: flex-end;
    padding-left: 50px;
    padding-right: 250px;
    background-color: rgba(109, 110, 113,0.1);
    background-position: center;
}
.optimizacija-lece-container1-content{
    display: flex;
    max-width: 1130px;
}
.optimizacija-lece-container1-text{
    max-width: 615px;
}
.optimizacija-lece-container1-text p{
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 35px;
}
.optimizacija-lece-container1-content h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    height: max-content;
    margin-right: 50px;
}
.optimizacija-lece-container1-content h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.optimizacija-lece-container2-content{
    display: flex;
    max-width: 1500px;
}
.optimizacija-lece-container2{
    display: flex;
    justify-content: flex-end;
    padding: 70px 50px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.optimizacija-lece-container2-text h3{
    font-size: 25px;
    font-weight: normal;
    line-height: 25px;
    color: #6D6E71;
}
.optimizacija-lece-container2-text li{
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.optimizacija-lece-container2-text p{
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 40px;
}
.optimizacija-lece-container2-text {
    margin-right: 100px;
    max-width: 610px;
}
.optimizacija-lece-image img{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 0px 60px;
}
.optimizacija-lece-line{
    width: 100%;
    background-color: #1A1818;
    height: 1px;
    margin: 20px 0px;
}
.optimizacija-lece-container2-text ul{
    margin-bottom: 40px;
}
.list-number{
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid #E19844;
    color: #E19844;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 1300px) { 
    .optimizacija-lece-container1{
        padding-right: 30px;
    }
    .optimizacija-lece-container2-content{
        flex-direction: column;
    }
    .optimizacija-lece-container2{
        justify-content: center;
    }
    .optimizacija-lece-container2-text{
        margin-right: 0px;
    }
}
@media only screen and (max-width: 1000px) { 
    .optimizacija-lece-container1{
        width: 100%;
        justify-content: center;
        border-radius: unset;
    }
    .optimizacija-lece-container1-content{
        flex-direction: column;
    }
    .optimizacija-lece-container1-content h2{
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 800px) { 
    .optimizacija-lece-container1{
        justify-content: flex-start;
        padding: 50px;
    }
    .optimizacija-lece-container1-text{
        max-width: unset;
    }
    .optimizacija-lece-container2{
        padding: 50px 0px;
        padding-left: 50px;
        padding-bottom: 0px;
    }
    .optimizacija-lece-container2-text{
        max-width: unset;
        padding-right:  50px;
    }
    .optimizacija-lece-container2-content{
        width: 100%;
    }
    .optimizacija-lece-image img{
        width: 100%;
    }
}
@media only screen and (max-width: 600px) { 
    .optimizacija-lece-section{
        padding: 0px;
    }
    .optimizacija-lece-container1{
        padding: 35px 20px;
        box-shadow: unset;
    }
    .optimizacija-lece-container1 h2{
        font-size: 35px;
    }
    .optimizacija-lece-container1 p{
        font-size: 18px;
        line-height: 35px;
        margin-bottom: 0px;
    }
    .optimizacija-lece-container2-text h3{
        font-size: 18px;
        line-height: 25px;
    }
    .optimizacija-lece-container2-text li{
        font-size: 18px;
    }
    .optimizacija-lece-container2-text p{
        font-size: 18px;
        line-height: 25px;
    }
    .optimizacija-lece-container2{
        padding: 50px 20px;
        padding-right: 0px;
    }
    .optimizacija-lece-container2-text{
        padding-right: 20px;
    }
}
/* ------------------------------>INDIVIDUALNI PARAMETRI PAGE<------------------------------ */
.individualni-parametri-section{
    padding: 220px 0px 130px 0px;
}
.individualni-parametri-title{
    display: flex;
    width: 1235px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    position: absolute;
    top: -147px;
    left: 0px;
}
.individualni-parametri-title img{
    height: 47px!important;
}
.individualni-parametri-title h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    height: max-content;
}
.individualni-parametri-title h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.individualni-parametri-container{
    width: 95%;
    padding: 50px 0px;
    background: url(../assets/polygon-background.png);
    background-repeat: no-repeat;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 50px 0px;
    background-color: #1a191a;
    background-position: center;
    display: flex;
    background-size: cover;
    justify-content: flex-end;
    padding-right: 100px;
}
.individualni-parametri-content{
    display: grid;
   position: relative;
    grid-template-columns:repeat(3,1fr);
    row-gap: 50px;
}
.individualni-parametri-content div p {
    color: #C7C9CB;
    margin-top: 10px;
    max-width: 250px;
    font-size: 18px;
    line-height: 17px;
}
.individualni-parametri-content div img{
    height: 350px;
}
@media only screen and (max-width: 1550px) { 
    .individualni-parametri-container{
        width: 100%;
        border-radius: unset;
        padding-right: 0px;
        justify-content: center;
        background: url(../assets/pattern2.png);
        background-color: #414042;
        background-size: cover;
    }
}
@media only screen and (max-width: 500px) { 
    .about-us-section{
        background-image: url(../assets/pattern2.png);
    }
}
@media only screen and (max-width: 1350px) { 
    .individualni-parametri-content div img {
        width: 350px;
    }
    .individualni-parametri-content{
        grid-template-columns: repeat(2,1fr);
    }
    .individualni-parametri-title img{
        display: none;
    }
    .individualni-parametri-title{
        width: unset;
    }
}
@media only screen and (max-width: 700px) { 
    .individualni-parametri-content{
        grid-template-columns: repeat(1,1fr);
    }
    .individualni-parametri-container{
        background: url();
        background-color: #414042;
        justify-content: unset;
        padding: 50px 20px;
        padding-bottom: 100px;
    }
    .individualni-parametri-section{
        padding: 0px;
    }
    .individualni-parametri-title{
        position: relative;
        color: white;
        top: 0px;
    }
    .individualni-parametri-title h2 {
        font-size: 35px;
        line-height: 40px;
    }
    .individualni-parametri-content{
        width: 100%;
    }
    .individualni-parametri-content div img{
        width: 100%;
        height: unset;
    }
    .individualni-parametri-section{
        margin-bottom: -50px;
    }
}
/* ------------------------------>TUMACENJE GRAVURA PAGE<----------------------------------- */
.tumacenje-gravura-section{
    padding: 130px 0px;
}
.tumacenje-gravura-container1{
    width: 95%;
    padding: 50px 0px;
    background: url(../assets/polygon-background.png);
    background-repeat: no-repeat;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 50px 0px;
    background-color: #1a191a;
    background-position: center;
    display: flex;
    background-size: cover;
    justify-content: center;
    position: relative;
}
.tumacenje-gravura-container1-content{
    max-width: 1130px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding-left: 50px;
}
.tumacenje-gravura-container1-text h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    color: white;
    margin-bottom: 50px;
    height: max-content;
}
.tumacenje-gravura-container1-text h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.tumacenje-gravura-container1-text P{
    color: white;
    font-size: 18px;
    line-height:25px;
    max-width: 510px;
}
.tumacenje-gravura-container1-text{
    margin-right: 50px;
}
.gravura-logo-container{
    display: flex;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: -45px;
    width: 780px;
    justify-content: space-between;
    padding-left: 50px;
}
.gravura-logo-container div{
    background: white;
    padding: 7px;
    border-radius: 50px;
}
.tumacenje-gravura-container2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}
.tumacenje-gravura-content2{
    width:min(1080px,100%) ;
    display: flex;
    justify-content: space-between;
}
.tumacenje-gravura-content2-table1 div{
    margin-bottom: 50px;
}
.tumacenje-gravura-content2-table2 div{
    margin-bottom: 50px;
}
.tumacenje-gravura-content2-table1 div:last-child{
    margin-bottom: 0px;
}
.tumacenje-gravura-content2-table2 div:last-child{
    margin-bottom: 0px;
}
.tumacenje-gravura-mobile{
    display: none
}
@media only screen and (max-width: 1200px){
    .gravura-logo-container{
        display: none;
    }
    .tumacenje-gravura-container1{
        width: 100%;
        border-radius: unset;
        padding: 50px;
        background-image: url(../assets/pattern2.png);
    }
    .tumacenje-gravura-container1-content{
        padding: 0px;
        width: 100%;
        max-width: unset;
    }
    .tumacenje-gravura-container2{
        padding: 50px;
        padding-top: 100px;
    }
    .tumacenje-gravura-section{
        padding-top: 0px;
    }
}
@media only screen and (max-width: 960px){
    .tumacenje-gravura-content2-table1{
        display: none;
    }
    .tumacenje-gravura-content2-table2{
        display: none;
    }
    .tumacenje-gravura-mobile{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .tumacenje-gravura-container1-content{
        flex-direction: column;
    }
    .tumacenje-gravura-container1-text{
        margin-right: 0px;
    }
}
@media only screen and (max-width: 500px){
    .tumacenje-gravura-container1-text h2{
        font-size: 35px;
        line-height: 40px;
        margin-bottom: 30px;
    }
    .tumacenje-gravura-container1-text p{
        font-size: 18px;
        line-height: 25px;
    }
    .tumacenje-gravura-container-image img{
        width: 100%;
    }
    .tumacenje-gravura-container1{
        padding: 50px 20px;
        padding-bottom: 0px;
    }
    .tumacenje-gravura-mobile div img{
        width: 100%;
        margin-bottom: 30px;
    }
    .tumacenje-gravura-container2{
        padding: 0 20px;
        padding-top: 50px;
        padding-bottom: 0px;
    }
    .tumacenje-gravura-section{
        padding-bottom: 20px;
    }
}
/* --------------------------->REMUVE PAGE <--------------------------------- */
.remuve-section{
    width: 100%;
    padding: 130px 0px;
    position: relative;
}
.remuve-text-container{
    max-width: 1080px;
    position: relative;
    margin: 0 auto;
}
.remuve-text-container h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 50px;
    height: max-content;
}
.remuve-text-container h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.remuve-text-container h3{
    font-size: 25px;
    line-height: 35px;
    font-weight: normal;
    max-width: 500px;
    margin-bottom: 30px;
    color: #6D6E71;
}
.remuve-text-container span{
    text-decoration: underline;
    font-weight: bold;
}
.remuve-text-container p{
    font-size: 18px;
    line-height: 25px;
}
.remuve-text-container-p1{
    max-width: 550px;
    margin-bottom: 30px;
}
.remuve-logo{
    position: absolute;
    right: 300px;
    top: 100px;
}
.remuve-image{
    width: 1080px;
}
@media only screen and (max-width: 1130px){
    .remuve-text-container{
        max-width: 100%;
        padding: 0px 50px;
    }
    .remuve-image{
        width: 100%;
    }
}
@media only screen and (max-width: 1024px){
    .remuve-logo{
        right: 180px;
    }
}
@media only screen and (max-width: 900px){
    .remuve-logo{
        right: 60px;
    }
}
@media only screen and (max-width: 780px){
    .remuve-logo{
        right: unset;
        top: unset;
        position: relative;
        margin-top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media only screen and (max-width: 600px){
    .remuve-text-container h2{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .remuve-text-container{
        padding: 0px 20px;
    }
    .remuve-section{
        padding: 50px 0px;
    }
}
@media only screen and (max-width: 400px){
    .remuve-logo{
        height: 140px;
    }
}
.remuve-question-container{
    width: 95%;
    background: url(../assets/remuve-question.png);
    background-size: cover;
    background-position: center;
    display: flex;
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
}
.remuve-question-container1{
    width: 1000px;
    background-color: #DFDFDF;
    border-radius: 0px 0px 50px 0px;
    padding: 60px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 40px;
    margin-top: -60px;
    max-height: 400px;
}
.remuve-question-container1-content{
    display: flex;
    flex-direction: column;
}
.remuve-question-container1-content h3{
    font-size: 18px;
    margin-bottom: 40px;
    color: #6D6E71;
}
.question p{
    font-size: 18px;
}
.question{
    display: flex;
    position: relative;
    align-items: center;
    margin-bottom: 30px;
    width: 525px;
    cursor: pointer;
    justify-content: space-between;
}
.question::after{
    position: absolute;
    content: "";
    background-color: white;
    width: 100%;
    left: 0px;
    height: 1px;
    bottom: -15px;
}
.question-plus{
    width: 15px;
    height: 1px;
    position: relative;
    background-color: #E50019;
}
.question-plus::after{
    position: absolute;
    content: "";
    height: 15px;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    width: 1px;
    background-color: #E50019;
    transition: 0.3s ease;
}
.question-plus.active::after{
    transform: translate(50%,-50%) rotate(90deg);
}
.remuve-question-container2{
    max-width: 450px;
    padding-top: 60px;
    padding-left: 60px;
    padding-bottom: 130px;
    height: 450px;
}
.remuve-question-container2 p {
    color: white;
    font-size: 18px;
    line-height: 25px;
}
.question-text2, .question-text3 , .question-text4{
    display: none;
}
@media only screen and (max-width: 1550px){
    .remuve-question-container1{
        width: 833px;
    }
}
@media only screen and (max-width: 1372px){
    .remuve-question-container1{
        width: 765px;
    }
}
@media only screen and (max-width: 1280px){
    .remuve-question-container{
        width: 100%;
    }
    .remuve-question-container1{
        width: unset;
        padding-left: 40px;
    }
}
.remuve-question-container-mobile{
    display: none;
}
@media only screen and (max-width: 1080px){
    .remuve-question-container{
        display: none;
    }
    .remuve-question-container-mobile{
        display: block;
        width: 100%;
        padding: 50px;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: #DFDFDF;
        margin-bottom: -50px;
        padding-bottom: 100px;
    }
    .mobile-question-name{
        display: flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    margin-bottom: 15px;
    justify-content: space-between;
    }
    .mobile-question{
        width: 500px;
        display: flex;
        margin-bottom: 15px;
        flex-direction: column;
    }
    .mobile-question-container h3{
        margin-bottom: 30px;
        color: #6D6E71;
    }
    .mobile-question-popout{
        max-height: 0px;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease-out;
    }
    .mobile-question-name::after{
        position: absolute;
        content: "";
        background-color: #F2F2F2;
        width: 100%;
        left: 0%;
        height: 1px;
        bottom: -15px;
    }
    .mobile-question-popout.active{
        margin-top: 15px;
    }
    .remuve-section{
        padding-bottom: 0px;
    }
}
@media only screen and (max-width: 550px){
    .remuve-question-container-mobile{
        padding: 50px 0px;
        padding-bottom: 100px;
    }
    .mobile-question{
        width: 100%;
    }
    .mobile-question-popout::after{
        position: absolute;
        content: "";
        background-color: #F2F2F2;
        width: 92%;
        left: 50%;
        transform: translateX(-50%);
        height: 1px;
        top: 0px;
    }
    .mobile-question-name{
        padding: 0px 20px;
    }
    .mobile-question-name::after{
        display: none;
    }
    .mobile-question-popout{
        max-height: 1px;
        padding: 0px 20px;
        background-color: transparent;
    }
    .mobile-question-popout.active{
        margin-top: 0px;
        background-color: #F2F2F2;
        transition: 0.3s ease;
    }
    .mobile-question-popout p{
        padding: 20px 0px;
        transition: 0.4s ease-out;
    }
    .mobile-question-container h3{
        padding: 0 20px;
    }
}
/* -------------------------->AR COLLECTION PAGE <------------------------------ */
.ar-collection-section{
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 130px 50px;
}
.ar-collection-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1080px;
    width: 100%;
}
.ar-collection-title h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 50px;
    height: max-content;
}
.ar-collection-card{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #1EA165;
}
.ar-collection-card-glass img{
    padding-right: 20px;
    width: 100%;
}
.ar-collection-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ar-collection-card-text img{
    margin-bottom: 15px;
}
.ar-collection-card-glass{
    min-height: 440px
}
.ar-collection-card-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.ar-collection-title h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.ar-collection-card-text{
    padding: 20px;
}
.ar-collection-card-text h3{
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #6D6E71;
}
.ar-collection-card-text p{
    font-size: 15px;
    line-height: 19px;
}
.ar-collection-title p{
    font-size: 18px;
    line-height: 25px;
}
.ar-collection-animation{
    margin: 70px 0px;
    margin-left: -60px;
}
.ar-collection-images{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
}
.ar-collection-card-text span{
    background-color: #6D6E71;
    padding: 1px 6px;
    border-radius: 50%;
    color: white;
}
@media only screen and (max-width: 1200px){
    .ar-collection-animation img{
        width: 100%;
    }
    .ar-collection-animation{
        margin-left: -40px;
    }
}
@media only screen and (max-width: 1000px){
    .ar-collection-images{
        grid-template-columns: repeat(2,1fr);
    }
}
@media only screen and (max-width: 600px){
    .ar-collection-section{
        padding: 50px 20px;
    }
    .ar-collection-title h2{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .ar-collection-animation{
        margin-left: 0px;
    }
}
@media only screen and (max-width: 750px){
    .ar-collection-images{
        grid-template-columns: repeat(1,1fr);
    }
    .ar-collection-card-glass{
        min-height: auto;
    }
}
/* ------------------------------------>BLUE BLOCKER PAGE<------------------------------------ */
.blue-blocker-section{
    width: 100%;
    padding: 120px 0px;
    position: relative;
    padding-top: 240px;
}
.blue-blocker-container1{
    background: url(../assets/polygon-background.png);
    background-position: center;
    background-size: cover;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 50px 0px;
    width: 95%;
    padding-bottom: 50px;
    background-color: rgba(109, 110, 113,0.1);
}
.blue-blocker-container1-content{
    display: flex;
    justify-content: flex-end;
    padding-left: 50px;
}
.blue-blocker-container1-text{
    max-width: 550px;
}
.blue-blocker-container1-text h2{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 50px;
    height: max-content;
    margin-top: -110px;
    margin-bottom: 110px;
}
.blue-blocker-container1-text h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.blue-blocker-container1-text h3{
    font-size: 25px;
    line-height: 35px;
    font-weight: normal;
    margin-bottom: 35px;
    max-width: 350px;
    color: #6D6E71;
}
.blue-blocker-container1-text p{
    font-size: 18px;
    line-height: 35px;
    margin-bottom: 35px;
}
.blue-blocker-container1-text p:last-child{
    margin-bottom: 0px;
}
.blue-blocker-container1-text span{
    text-decoration: underline;
    font-weight: bold;
}
.blue-blocker-container1-image{
    margin-top: -110px;
    margin-right: -100px;
    margin-left: 100px;
}
.blue-blocker-container1-image img{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 0px 60px;
}
.blue-blocker-container2-card{
    padding: 25px 35px;
    background-color: #F9F9F9;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
    min-height: 475px;
    position: relative;
    z-index: 1;
}
.blue-blocker-card-name p{
    font-size: 15px;
    line-height: 22px;
}
.blue-blocker-card-name{
    margin-bottom: 25px;
}
.blue-blocker-card-specs p{
    font-size: 15px;
    line-height: 22px;
}
.blue-blocker-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 0px;
    padding-bottom: 40px;
}
.blue-blocker-container2{
    width: 100%;
    padding: 0 50px;
    padding-top: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blue-blocker-container2-content{
        width: 1080px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 60px;
}
@media only screen and (max-width: 1080px){
    .blue-blocker-container2-content{
    grid-template-columns: repeat(2,1fr);
    }
}
@media only screen and (max-width: 680px){
    .blue-blocker-container2-content{
        grid-template-columns: repeat(1,1fr);
        }
}
@media only screen and (max-width: 600px){
    .blue-blocker-container2{
        padding: 0px 20px;
        padding-top: 50px;
    }
}
@media only screen and (max-width: 1380px){
    .blue-blocker-container1-image img{
        height: 500px;
    }
}
@media only screen and (max-width: 1120px){
    .blue-blocker-container1{
        width: 100%;
        box-shadow: unset;
    }
    .blue-blocker-section{
        padding-top: unset;
        padding-bottom: 50px;
    }
    .blue-blocker-container1-image{
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
    }
    .blue-blocker-container1-content{
        padding: 50px;
        padding-bottom: 0px;
        flex-direction: column;
        align-items: center;
    }
    .blue-blocker-container1-text h2{
        margin-top: 0px;
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 730px){
    .blue-blocker-container1-text{
        width: 100%;
    }
    .blue-blocker-container1-image img{
        width: 100%;
        height: 100%;
        display: block;
    }
}
@media only screen and (max-width: 600px){
    .blue-blocker-container1-text h2{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .blue-blocker-container1-text h3{
        margin-bottom: 20px;
    }
    .blue-blocker-container2-content{
        gap: 40px;
    }
    .blue-blocker-container1-text{
        padding-right: 20px;
    }
    .blue-blocker-container1-text p{
        line-height: 25px;
        margin-bottom: 20px;
    }
    .blue-blocker-container1-content{
        padding: 0px;
        padding-top: 50px;
        padding-left: 20px;
    }
    .blue-blocker-container1{
        padding-bottom: 0px;
    }
}
/* ---------------------------->TINT MIRROR PAGE<--------------------------- */
.tint-mirror-section{
    width: 100%;
    padding: 130px 0px;
}
.tint-mirror-container1{
    padding: 100px 50px;
    background: url(../assets/polygon-background.png);
    background-position: center;
    background-size: cover;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 50px 0px;
    width: 95%;
    background-color: rgba(109, 110, 113,0.1);
}
.tint-mirror-title{
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin: 0 auto;
    margin-bottom: 70px;
    max-width: 1080px;
}
.tint-mirror-title::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.tint-mirror-container1-content h2{
    display: none;
    font-size: 50px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 50px;
}
.tint-mirror-container1-content h2::after{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.tint-mirror-container1-content div{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.tint-mirror-container1-content div h3{
    font-size: 25px;
    text-decoration: underline;
    font-weight:600;
    color: #6D6E71;
}
.tint-mirror-container1-content div p{
    max-width: 750px;
    font-size: 18px;
    margin-right: -60px;
    line-height: 25px;
}
.tint-mirror-container1-content p{
    max-width: 680px;
    line-height: 22px;
    font-size: 15px;
}
.tint-mirror-container1-content{
    width: 1080px;
    margin: 0 auto;
    padding-left: 40px;
}
.tint-mirror-image{
    padding: 50px 0px;
    width: unset!important;
}
.tint-mirror-container2{
    width: 100%;
    padding: 100px 50px;
    position: relative;
}
.tint-mirror-container2-content{
    max-width: 1080px;
    margin: 0 auto;
}
.tint-mirror-container2-content1{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tint-mirror-container2-title{
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: flex-end;
}
.tint-mirror-container2-title h3{
    font-size: 25px;
    font-weight: 300;
}
.tint-mirror-container2-title p{
    font-size: 18px;
    font-weight: normal;
    color: #1A1818;
    text-transform: uppercase;
}
.tint-mirror-container2-line{
    width: 100%;
    height: 1px;
    background-color: #1A1818;
    margin-bottom: 24px;
}
.tint-mirror-container2-shade div{
    width: 66px;
    height: 66px;
    border-radius: 50%;
}
.tint-mirror-container2-shade{
    width: 135px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}
.orange{
    background-color: #F7941D;
}
.violet{
    background-color: #B82890;
}
.green{
    background-color: #419156;
}
.pink{
    background-color: #F06AA7;
}
.lavander{
    background-color: #6F3293;
}
.red{
    background-color: #A62435;
}
.blue{
    background-color: #006FBA;
}
.rose{
    background-color: #DC8694;
}
.tennis{
    background-color: #FFF251;
}
.ski{
    background-color: #FCB116;
}
.sailing{
    background-color: #ED2224;
}
.golf{
    background-color: #70421A;
}
.tint-mirror-container2-shade h3{
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    text-transform: uppercase;
    margin: 20px 0px;
}
.tint-mirror-container2-shade p{
    font-size: 15px;
    line-height: 22px;
    color: #1A1818;
    text-align: center;
}
.shades-container{
    display: flex;
    flex-wrap: wrap;
}
.tint-mirror-container3{
    width: 100%;
}
.tint-mirror-container3-content{
    display: flex;
}
.tint-mirror-container3-content div:nth-child(1){
    margin-right: 50px;
}
.tint-mirror-container4{
    width: 100%;
}
.tint-mirror-container4-content-outer{
    width: 95%;
    background: url(../assets/ZENA.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px;
    margin-left: auto;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 0px 50px;
    margin-top: -70px;
    background-color: white;
    z-index: 1;
    position: relative;
}
.tint-mirror-container4-content{
    width: 1080px;
    margin: 0 auto;
}
.tint-mirror-container4-title h3{
    text-transform: uppercase;
    font-size: 25px;
    text-decoration: underline;
    color: #6D6E71;
}
.tint-mirror-container4-title p{
    font-size: 18px;
    line-height: 25px; 
    max-width: 730px;
}
.tint-mirror-container4-title{
    display: flex;
    margin-bottom: 60px;
    justify-content: space-between;
}
.tint-mirror-container4-glass{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.tint-mirror-container4-glass-title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.tint-mirror-container4-glass-title h3{
    font-size: 25px;
    text-transform: uppercase;
}
.tint-mirror-container4-glass-title p{
    color: #1A1818;
    font-size: 18px;
    text-transform: uppercase;
}
.tint-mirror-container4-glass-line{
    width: 100%;
    height: 1px;
    background-color: #1A1818;
    margin-bottom: 70px;
}
.tint-mirror-container4-glass-grid-content{
    display: flex;
    flex-direction: column;
}
.tint-mirror-container4-glass-grid-content img{
    width: 100%;
}
.tint-mirror-container4-glass-grid-content div h3{
    font-size: 18px;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 20px;
}
.tint-mirror-container4-glass-grid-content div{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.tint-mirror-container4-glass-grid-content div div{
    width: 100%;
    height: 1px;
    background-color: #1A1818;
}
.tint-mirror-container4-glass-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 100px;
    margin-bottom: 90px;
}
.tint-mirror-container4-glass-info{
    width: 100%;
}
.tint-mirror-container4-glass-info p{
    font-size: 15px;
    line-height: 22px;
}
@media only screen and (max-width: 1350px){
    .tint-mirror-container1{
        width: 100%;
        box-shadow: unset;
        border-radius: unset;
    }
    .tint-mirror-container1-content{
        padding: 0px;
        width: 100%;
    }
    .tint-mirror-container1-content div p{
        margin: 0px;
    }
    .tint-mirror-image{
        overflow-x: scroll;
        margin: 50px 0px;
    }
    .tint-mirror-image{
        padding: 0px;
    }
    .tint-mirror-title{
        margin-left: 50px
    }
}
@media only screen and (max-width: 1000px){
    .tint-mirror-title{
        display: none;
    }
    .tint-mirror-section{
        padding-top: 0px;
    }
    .tint-mirror-container1-content h2{
        display: block;
    }
    .tint-mirror-container1-content div p{
        max-width: 600px;
    }
}   
@media only screen and (max-width: 860px){
    .tint-mirror-container1-content div p{
        max-width: 400px;
    }
}
.shade-text-mobile{
    display: none;
    font-size: 18px;
    color: #1A1818;
}
@media only screen and (max-width: 600px){
    .tint-mirror-container1-content h2{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .tint-mirror-image{
        margin: 30px 0px;
    }
    .tint-mirror-container2{
        padding: 50px 20px;
        padding-bottom: 0px;
    }
    .tint-mirror-container1-content div p{
        line-height: 25px;
    }
    .tint-mirror-container1-content div{
        flex-direction: column;
    }
    .tint-mirror-container1-content h3{
        margin-bottom: 20px;
    }
    .tint-mirror-container1{
        padding: 50px 20px;
    }
    .tint-mirror-image{
        display: block!important;
    }
    .tint-mirror-image img{
        height: 300px;
    }
    .tint-mirror-container2-title p{
        display: none;
    }
    .shade-text-mobile{
        display: block;
        text-transform: uppercase;
        margin-bottom: 24px;
    }
    .tint-mirror-container2-line{
        margin-bottom: 0px;
    }
    .tint-mirror-container2-shade p{
        font-size: 12px;
    }
    .tint-mirror-container2-shade{
        width: 100px;
    }
    .tint-mirror-container2-shade h3{
        margin-bottom: 15px;
    }
    .shades-container{
        justify-content: space-between;
    }
}
.tint-mirror-container2-shade.invisible{
    opacity: 0;
    display: none;
}
@media only screen and (max-width: 500px){
    .shades-container{
        justify-content: unset;
    }
}
@media only screen and (max-width: 440px){
    .shades-container{
        justify-content: space-between;
    }
    .tint-mirror-container2-shade.invisible{
        display: flex;
    }
}
@media only screen and (max-width: 340px){
    .tint-mirror-container2-shade.invisible{
        display: none;
    }
}
@media only screen and (max-width: 1530px){
    .tint-mirror-container3-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
    }
    .tint-mirror-container3-content div:nth-child(1){
        margin-right: 0px;
        margin-bottom: 50px;
    }
    .tint-mirror-container4-content-outer{
        margin-top: 0px;
    }
}
.mogucnost-bojenja-mobile{
    display: none;
}
@media only screen and (max-width: 860px){
    .tint-mirror-container3-content {
        width: 100%;
    }
    .tint-mirror-container3-content div:nth-child(1){
        width: 100%;
        padding-right: 50px;
    }
    .tint-mirror-container3-content div:nth-child(1) img{
        width: 100%;
    }
    .tint-mirror-container3-content div:nth-child(2){
        width: 100%;
        padding:0 50px;
    }
    .tint-mirror-container3-content div:nth-child(2) img{
        width: 100%;
    }
}
@media only screen and (max-width: 600px){
    .tint-mirror-container3-content div:nth-child(1){
        padding-right: 20px;
    }
    .tint-mirror-container3-content div:nth-child(2){
        padding: 0px 0px;
    }
    .tint-mirror-container3-content div:nth-child(2) img:first-child{
        display: none;
    }
    .mogucnost-bojenja-mobile{
        display: block;
    }
}
@media only screen and (max-width: 1200px){
.tint-mirror-container4-content-outer{
    width: 100%;
    margin-left: 50px;
}
.tint-mirror-container4-content{
    width: 100%;
}
.tint-mirror-container4-content-outer{
    padding: 50px;
    padding-right: 100px;
}
}
.coatings-mobile{
    display: none;
}
@media only screen and (max-width: 1050px){
    .tint-mirror-container4-title{
        flex-direction: column;
    }
    .tint-mirror-container4-title h3{
        margin-bottom: 30px;
    }
    .tint-mirror-section{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 750px){
    .tint-mirror-container4-glass-grid{
        gap: 50px;
    }
    .hide-div-on-mobile{
        display: none;
    }
}
@media only screen and (max-width: 650px){
    .tint-mirror-container4-glass-grid{
        gap: 20px;
    }
}
@media only screen and (max-width: 600px){
    .tint-mirror-container4-glass-grid{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
    }
    .tint-mirror-container4-title{
        margin-bottom: 30px;
    }
    .tint-mirror-container4-title h3{
        margin-bottom: 20px;
    }
    .ar-collection-animation{
        margin: 30px 0px;
        margin-top: 0px;
    }
    .optimizacija-lece-container2-text p{
        line-height: 25px;
        margin-bottom: 20px;
    }
    .optimizacija-lece-container2-text ul{
        margin-bottom: 30px;
    }
    .optimizacija-lece-container1 p{
        line-height: 25px;
    }
    .remuve-question-container-mobile{
        padding-bottom: 85px;
    }
    .remuve-text-container h3{
        margin-bottom: 20px;
        color: #6D6E71;
    }
    .remuve-image{
        margin-bottom: 30px;
    }
    .remuve-text-container p{
        margin-bottom: 20px;
        line-height: 25px;
    }
    .ar-collection-title p{
        line-height: 25px;
        margin-bottom: 20px;
    }
    .tint-mirror-container4-title p{
        line-height: 25px;
    }
    .tint-mirror-container4-content-outer{
        margin-left: 20px;
        padding: 50px 20px;
        padding-right: 40px;
    }
    .tint-mirror-container4-glass-grid{
        margin-bottom: 30px;
    }
    .coatings-mobile{
        display: block;
        color: #1A1818;
        font-size: 15px;
        text-transform: uppercase;
        margin-bottom: 50px;
    }
    .tint-mirror-container4-glass-title p{
        display: none;
    }
    .tint-mirror-container4-glass-line{
        margin-bottom: 30px;
        margin-top: 30px;
    }
    .tint-mirror-container4-glass-grid-content div h3{
        font-size: 16px;
    }
}
#logo-outline1{
    position: absolute;
    z-index: 1;
    right: 0px;
    bottom: 0px;
}
@media only screen and (max-width: 1665px){
    #logo-outline1{
        height: 400px;
    }
}
@media only screen and (max-width: 1400px){
    #logo-outline1{
        height: 200px;
    }
}
@media only screen and (max-width: 1000px){
    #logo-outline1{
        display: none;
    }
}
.products-section{
    position: relative;
}
#logo-outline2{
    top: 56px;
    left: -1024px;
    opacity: 0;
    position: absolute;
    transform: rotate(
90deg);
}
#logo-outline2.active{
    opacity: 1;
}
#logo-outline2 svg{
    height: 1100px;
}
#logo-outline3 svg{
    height: 1100px;
}
#logo-outline3{
    position: absolute;
    right: -484px;
    top: 30px;
    transform: rotate( 
180deg);
opacity: 0;
}
#logo-outline3.active{
    opacity: 1;
}
@media only screen and (max-width: 1600px){
    #logo-outline2{
        display: none;
    }
    #logo-outline3{
        display: none;
    }
}
#logo-outline4{
    position: absolute;
    right: -1005px;
    top: -31px;
    transform: rotate( 
270.1deg) scaleX(-1);
    opacity: 0;
}
#logo-outline4.active{
    opacity: 1;
}
#logo-outline4 svg{
    height: 1100px;
}
.single-page-title img{
    max-height: 67px;
}
.single-page-title img:last-child{
    display: none;
}
.logo-outline-product.polino{
    right: 0px;
}
.logo-outline-product{
    position: absolute;
    right: 0px;
    top: -400px;
}
.logo-outline-product.profesional{
    right: -230px;
}
@media only screen and (max-width: 1280px){
    .logo-outline-product{
        display: none;    
    }
}
.logo-outline-single1{
    position: absolute;
    top: 0px;
    left: 0px;
}
.logo-outline-single2{
    right: 0px;
    bottom: 0px;
    position: absolute;
}
@media only screen and (max-width: 1280px){
    .logo-outline-single1{
        display: none;
    }
    .logo-outline-single2{
        display: none;
    }
}
@media only screen and (max-width: 1700px){
    #logo-outline4{
        display: none;
    }
}
.logo-outline-tretmani1{
    position: absolute;
    right: 0px;
    bottom: 5px;
}
@media only screen and (max-width: 1280px){
    .logo-outline-tretmani1{
        display: none;
    }
    .logo-outline-blueblocker{
        display: none;
    }
    #tint-mirror-outline{
        display: none;
    }
    #tretmani-outline2{
        display: none;
    }
}
.logo-outline-blueblocker{
    position: absolute;
    bottom: -250px;
    right: 0px;
}
#tint-mirror-outline{
    top: 250px;
    right: 0px;
    position: absolute;
}
#tretmani-outline2{
    position: absolute;
    top: -378px;
    right: -400px;
}
#remuve-outline{
    bottom: -514px;
    left: -415px;
    position: absolute;
}
#products-list.active{
    display: block!important;
}
#tretman-list.active{
    display: block!important;
}
#transition-list.active{
    display: block!important;
}
#dorade-list.active{
    display: block!important;
}
#info-list.active{
    display: block!important;
}
::-webkit-scrollbar{
    width: 10px;
    height: 7px;
    }
    ::-webkit-scrollbar-thumb{
    background: #Dc4D4E;
    border-radius: 0px;
    }
    ::-webkit-scrollbar-thumb:hover{
    background: #F07676;
    }
    ::-webkit-scrollbar-track{
    background: #c7c7c7;
    border-radius: 0px;
    box-shadow: inset 0px 0px 0px 0px #c7c7c7;
    }
    @media only screen and (max-width: 1000px){
        html.active{
            overflow: hidden;
        }
    }
/* ----------------------->PRELOADER<----------------------- */
.preloader{
    height: 100vh;
    position: fixed;
    width: 100%;
    background-color: rgb(255, 255, 255,1);
    z-index: 50;
}
.preloader.active{
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;
}
.preloader-container{
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%,-50%);
    display: flex;
    align-items: center;
}
.preloader .preloader-container img{
    animation: preloader 1s linear infinite;
}
.preloader-container img{
    height: 150px;   
}
@keyframes preloader {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
 @-webkit-keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 3284.015380859375px;
      stroke-dasharray: 3284.015380859375px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 3284.015380859375px;
    }
  }
  @keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 3284.015380859375px;
      stroke-dasharray: 3284.015380859375px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 3284.015380859375px;
    }
  }
  .svg-elem-1 {
    -webkit-animation: animate-svg-stroke-1 3s linear 0s both;
            animation: animate-svg-stroke-1 3s linear 0s both;
  }
  @-webkit-keyframes animate-svg-stroke-2 {
    0% {
      stroke-dashoffset: 1523.5301513671875px;
      stroke-dasharray: 1523.5301513671875px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 1523.5301513671875px;
    }
  }
  @keyframes animate-svg-stroke-2 {
    0% {
      stroke-dashoffset: 1523.5301513671875px;
      stroke-dasharray: 1523.5301513671875px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 1523.5301513671875px;
    }
  }
  .svg-elem-2 {
    -webkit-animation: animate-svg-stroke-2 3s linear 0s both;
            animation: animate-svg-stroke-2 3s linear 0s both;
  }
  @-webkit-keyframes animate-svg-stroke-3 {
    0% {
      stroke-dashoffset: 2427.3095285713202px;
      stroke-dasharray: 2427.3095285713202px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 2427.3095285713202px;
    }
  }
  @keyframes animate-svg-stroke-3 {
    0% {
      stroke-dashoffset: 2427.3095285713202px;
      stroke-dasharray: 2427.3095285713202px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 2427.3095285713202px;
    }
  }
  .svg-elem-3 {
    -webkit-animation: animate-svg-stroke-3 3s linear 0s both;
            animation: animate-svg-stroke-3 3s linear 0s both;
  }
@-webkit-keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 2358.52587890625px;
      stroke-dasharray: 2358.52587890625px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 2358.52587890625px;
    }
  }
  @keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 2358.52587890625px;
      stroke-dasharray: 2358.52587890625px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 2358.52587890625px;
    }
  }
  .svg-elem-4 {
    -webkit-animation: animate-svg-stroke-1 6s linear 0s both;
            animation: animate-svg-stroke-1 6s linear 0s both;
  }
  @-webkit-keyframes animate-svg-stroke-2 {
    0% {
      stroke-dashoffset: 1730.117919921875px;
      stroke-dasharray: 1730.117919921875px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 1730.117919921875px;
    }
  }
  @keyframes animate-svg-stroke-2 {
    0% {
      stroke-dashoffset: 1730.117919921875px;
      stroke-dasharray: 1730.117919921875px;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 1730.117919921875px;
    }
  }
  .svg-elem-5 {
    -webkit-animation: animate-svg-stroke-2 6s linear 0s both;
            animation: animate-svg-stroke-2 6s linear 0s both;
  }
  @media only screen and (max-width: 1150px){
    .products-text{
        width: 100%;
        padding: 0px 50px;
    }
}
@media only screen and (max-width: 480px){
    .products-text{
        padding: 0px;
        margin-bottom: 50px;
    }
    #dorade-list{
        left: 159px;
        top: 15px;
    }
    #products-list, #tretman-list{
        top: 15px;
    }
    #info-list {
        left: 159px;
    }
}
/*DORADE TRANSITION*/
.transition-container{
    margin: 65px auto 0px auto;
    max-width: 1115px;
}
.transition-container1{
    display: flex;
    justify-content: space-between;
}
.transition-container1 > div:nth-child(1){
    max-width: 505px;
}
.transition-container1 > div ul li{
    position: relative;
    padding-left: 15px;
    font-size: 18px;
    line-height: 35px;
    color: #6D6E71;
}
.transition-container1 > div ul li::before{
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    background-color: #E50019;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}
.transition-container2.xtra{
    display: flex;
    gap: 100px;
}
.transition-container2.xtra2{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.transition-container2.xtra2 img{
    max-width: 350px;
}
.transition-container2 img{
    width: 100%;
}
.transition-container1 p{
    font-size: 18px;
    color: #6D6E71;
    line-height: 35px;
}
.transition-container1.uv p{
    margin-bottom: 30px;
    color: #6D6E71;
    line-height: 35px;
}
.transition-container1 > div:nth-child(2){
    max-width: 520px;
}
@media only screen and (max-width: 1130px){
    .dorade-title {
        margin-top: 0px!important;
        margin-bottom: 50px;
    }
    .transition-container1 img[alt="nupolar-illustration"]{
        width: 100%;
    }
    .transition-container1 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
    }
    .transition-container1 ul{
        margin-bottom: 50px;
    }
    .transition-container{
        padding: 0px 30px;
    }
    .transition-container2.xtra > div{
        flex-direction: column;
    }
    .transition-container2.xtra > div img{
        margin-bottom: 15px;
    }
}
.transition-container-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.transition-container-grid img{
    width: 100%;
}
@media only screen and (max-width: 480px){
    .transition-container{
        padding: 0px 20px;
    }
    .transition-container1 > div.remuve{
        margin-bottom:  0px;
    }
    .transition-container-grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .transition-container-grid img{
        display: block;
        width: 100%;
    }
    .transition-container2.xtra{
        flex-direction: column;
        gap: 30px;
    }
}
.transition-container2.xtra > div  > div{
    display: flex;
    justify-content: space-between;
}
.transition-container2.xtra > div img{
    max-width: 315px;
}
.transition-container2.xtra p{
    font-size: 18px;
    line-height: 35px;
    margin-bottom: 10px;
}
.blue-blocker-container1-text.transition ul li{
    position: relative;
    padding-left: 15px;
    font-size: 18px;
    color: #6D6E71;
    line-height: 35px;
}
.blue-blocker-container1-text.transition ul{
    margin-bottom: 30px;
}
.blue-blocker-container1-text.transition ul:last-child{
    margin-bottom: 0px;
}
.blue-blocker-container1-text.transition ul li::before{
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    background-color: #E50019;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}
.product.transition{
    transition:  0.3s ease;
}
.product.transition{
    background: linear-gradient(90deg, rgba(41,168,216,1) 0%, rgba(17,134,116,1) 100%);
    opacity: 0.8;
}
.product.transition:hover{
  opacity: 1;
}
.product-list h3{
    font-size: 35px;
    font-weight: bold;
    color: white;
}
.product-title.transition div h3{
    position: relative;
    padding-left: 50px;
}
.product-title.transition{
    margin-top: 0rem;
}
.product-title.transition div h3::before{
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    height: 3px;
    width: 37px;
    background-color: #E50019;
}
.logo-outline-product.transition{
    right: 0;
    top: -442px;
}
@media only screen and (max-width: 480px){
    .product-list h3{
        text-align: center;
        font-size: 20px;
    }
}
.product-pdf-buttons{
    position: absolute;
    right: -800px;
    bottom: 0px;
    display: flex;
    gap: 20px;
}
.product-pdf-buttons.short-text{
    position: relative;
    right: unset;
    margin-top: 50px;
}
.product-pdf-buttons a{
    padding: 12px 20px;
    border-radius: 0px 0px 0px 25px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    width: 250px;
    cursor: pointer;
    z-index: 1;
    background-color: transparent;
    transition: 0.3s ease;
    font-size: 17px;
    background-color: #DC4D4E;
}
.product-pdf-buttons.outdoor a{
    background-color: #008BE5;
}
.product-pdf-buttons.outdoor a:hover{
    color: #008BE5;
}
.product-pdf-buttons.polino a{
    background-color: #724199;
}
.product-pdf-buttons.polino a:hover{
    color: #724199;
}
.product-pdf-buttons.bifokal a{
    background-color: #546BB1;
}
.product-pdf-buttons.bifokal a:hover{
    color: #546BB1;
}
.product-pdf-buttons.monofokal a{
    background-color: #C17DB3;
}
.product-pdf-buttons.monofokal a:hover{
    color: #C17DB3;
}
.product-pdf-buttons.profesional a{
    background-color: #6D6E71;
}
.product-pdf-buttons.profesional a:hover{
    color: #6D6E71;
}
.product-pdf-buttons a:hover{
    background-color: #fff;
    color: #DC4D4E;
}
@media only screen and (max-width: 1800px){
    .product-pdf-buttons{
        right: -740px;
    }
}
@media only screen and (max-width: 1670px){
    .product-pdf-buttons{
        right: -680px;
    }
}
@media only screen and (max-width: 1540px){
    .product-pdf-buttons{
        right: -615px;
    }
}
@media only screen and (max-width: 1420px){
    .product-pdf-buttons{
        right: -555px;
    }
}
@media only screen and (max-width: 1280px){
    .product-pdf-buttons{
        right: unset;
        position: relative;
        margin-top: 50px;
    }
}
@media only screen and (max-width: 480px){
    .product-pdf-buttons{
        flex-direction: column;
    }
}
.container{
    margin: 0 auto;
    width: 100%;
    max-width: 1180px;
    padding: 0px 50px;
}
.about-us-flag-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
.about-us-flag-container img{
    max-width: 550px;
}
.about-us-flag-container p{
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 30px;
}
.about-us-flag-container p:last-child{
    margin-bottom: 0px;
}
.about-us-country{
    display: flex;
    width: 100%;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 50px;
}
.about-us-country p{
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.anglera-elegance-spacing{
    margin-bottom: 100px;
}
.progresive-inner-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 150px;
    margin-top: 250px;
}
.progresive-inner-flex.sport{
    margin-top: 70px;
}
.after-slider-title.progresive{
    margin: 100px 0px;
}
.progresive-inner-flex-image img{
    border-radius: 0px 0px 60px 0px;
}
.progresive-inner-flex-text{
    width: 100%;
}
.progresive-inner-flex-text p{
    font-size: 18px;
    line-height: 35px;
    color: #fff;
    padding-right: 30px;
}
.about-us-cards{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.about-us-cards-inner-container h3{
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    color: #2a2a2a;
    margin-bottom: 80px;
}
.about-us-cards img{
    max-width: 100px;
}
.about-us-cards > div{
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.about-us-cards.inner{
    z-index: 1;
    position: relative;
    margin-bottom: 70px;
}
.about-us-cards.inner img{
    margin-bottom: 20px;
}
.about-us-cards > div p{
    text-align: center;
    font-size: 18px;
    line-height: 25px;
}
.about-us-cards.inner > div{
    padding: 0;
}
.about-us-cards.inner p{
    font-size: 16px;
    line-height: 22px;
    color: #000;
}
.about-us-cards > div > div{
    height: 30px;
    width: 2px;
    background-color: #6D6E71;
    margin-bottom: 10px;
}
@media only screen and (max-width: 1080px){
    .about-us-flag-container{
        flex-direction: column;
        align-items: flex-start;
    }
    .container{
        padding: 0px;
    }
    .about-us-container1{
        margin-bottom: 50px;
    }
    .about-us-country{
        gap: 40px;
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 900px){
    .about-us-cards{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
}
@media only screen and (max-width: 780px){
    .about-us-flag-container img{
        max-width: 100%;
    }
}
@media only screen and (max-width: 600px){
    .about-us-cards{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 480px){
    .about-us-country{
        flex-wrap: nowrap;
        flex-direction: column;
        text-align: center;
    }
}
.materijali-section{
    padding: 130px 0px;
    background: url(../assets/polygon-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.materijali-container{
    margin-bottom: 100px;
}
.materijali-container h3{
    font-size: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 50px;
}
.materijali-container > p {
    margin-bottom: 30px;
}
.materijali-container p{
    font-size: 18px;
    line-height: 25px;
}
.materijali-container-logo{
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.materijali-container-logo img{
    margin-right: 50px;
    max-height: 70px;
    max-width: 170px;
}
.materijali-container-logo h4{
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 25px;
}
@media only screen and (max-width: 1080px){
    .materijali-section{
        padding-left: 50px;
        padding-right: 50px;
    }
}
@media only screen and (max-width: 650px){
    .materijali-container-logo{
        flex-direction: column;
    }
    .materijali-container-logo img{
        margin-right: 0px;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 480px){
    .materijali-section{
        padding: 50px 20px;
    }
    .materijali-container h3{
        font-size: 24px;
        margin-bottom: 30px;
    }
}
.materijali-container-logo-custom div{
    display: flex;
    flex-direction: column;
}
.materijali-container-logo-custom{
    gap: 50px;
}
.materijali-container-logo-custom img{
    margin-right: 0px;
    margin-top: 30px;
}
.materijali-section .container .materijali-container:last-child{
    margin-bottom: 0px;
}
.remuve420-image{
    display: flex;
    width: 100%;
}
.remuve420-image img{
    width: 100%;
}
@media only screen and (max-width: 480px){
    .remuve420-image{
        flex-direction: column;
    }
}
.nupolar-illustration{
    width: 100%;
}
.nupolar-table{
    margin-top: 50px;
}
.image-width100{
    width: 100%;
}
.photomatic-table{
    background: #4a4a4a;
}
img[alt="xtractive-table"]{
    max-width: 500px!important;
}
.blue-blocker-card-image img{
    max-width: 235px;
}
.dorade-title img[alt="photomatic-logo"]{
    max-width: 300px;
}
.ar-collection-title p{
    margin-bottom: 30px;
}
.antireflex-card{
    display: flex;
    height: 300px;
    border-radius: 0px 0px 30px 0px;
    overflow: hidden;
    justify-content: space-between;
    margin-bottom: 30px;
}
.antireflex-card.pure{
    border: 2px solid #737577;
}
.antireflex-card.polar{
    border: 2px solid #ACAEB1;
}
.antireflex-card.blueglide{
    border: 2px solid #2B3990;
}
.antireflex-card.nano{
    border: 2px solid #67A86E;
}
.antireflex-card.ultra{
    border: 2px solid #008955;
}
.antireflex-card.multi{
    border: 2px solid #00783D;
}
.antireflex-card-text{
    display: flex;
    padding: 20px;
    position: relative;
    width: 100%;
    padding-left: 100px;
}
.antireflex-card-text > img{
    width: 250px;
    height: 40px;
    position: absolute;
    transform: rotate(270deg);
    left: -74px;
    bottom: 126px;
}
.antireflex-card-text > div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.antireflex-card-text > div > p{
    font-size: 17px;
    line-height: 23px;
}
.antireflex-card-text > div > div p{
    font-size: 16px;
    line-height: 16px;
}
.antireflex-card-image{
    max-width: 315px;
    display: grid;
}
.antireflex-card-image img{
    width: 100%;
    height: 100%;
}
.antireflex-cards{
    width: 100%;
}
.antireflex-card.rotate{
    flex-direction: row-reverse;
    border-radius: 0px 0px 0px 30px;
}
.antireflex-card.rotate .antireflex-card-text{
    padding-left: 30px;
    padding-right: 100px;
}
.antireflex-card.rotate .antireflex-card-text > img{
    transform: rotate(90deg);
    left: unset;
    right: -74px;
    bottom: 126px;
}
.antireflex-cards .antireflex-card:last-child{
    margin-bottom: 0rem;
}
@media only screen and (max-width: 1080px){
    .antireflex-card{
        height: unset;
    }
    .antireflex-card-text > div > div p{
        line-height: 20px;
    }
}
@media only screen and (max-width: 1000px){
    .contact-container-text{
        height: unset;
    }
}
@media only screen and (max-width: 850px){
    .antireflex-card{
        flex-direction: column!important;
    }
    .antireflex-card-text{
        padding: 20px!important;
        flex-direction: column!important;
    }
    .antireflex-card-text > img{
        position: relative;
        transform: unset!important;
        left: unset!important;
        right: unset!important;
        bottom: unset!important;
        width: 230px;
        height: 30px;
        margin-bottom: 20px;
    }
    .antireflex-cards{
        max-width: 315px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 480px){
    .antireflex-card-text > div > p{
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 400px){
    .antireflex-cards{
        max-width: 100%;
    }
    .antireflex-card-image{
        max-width: 100%;
    }
}
.materijali-container.optimizacija > div h4{
    color: #6D6E71;
    font-size: 25px;
    margin-bottom: 30px;
}
.materijali-container.optimizacija > div p{
    margin-bottom: 30px;
}
.materijali-container.optimizacija > div p:last-child{
    margin-bottom: 0px;
}
.materijali-container.optimizacija > div{
    margin-bottom: 50px;
}
.materijali-container.optimizacija > div:last-child{
    margin-bottom: 0px;
}
.materijali-container.optimizacija .price{
    background-image: linear-gradient(to right, rgb(109, 110, 113,1), rgba(255,0,0,0));
    width: 180px;
    color: #fff;
    padding-left: 5px;
}
.optimizacija-sociva-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-bottom: 100px;
}
.optimizacija-sociva-grid img{
    width: 100%;
    max-width: 360px;
}
.optimizacija-dark-overlay{
    background-color: rgba(0,0,0,0.8);
    margin: 80px 0px;
    padding: 80px 0px;
}
.sociva-grid-text{
    padding-top: 70px;
}
.sociva-grid-text p{
    color: rgb(209, 211, 212);
    font-size: 18px;
    line-height: 25px;
}
.sociva-grid-text .price-white{
    background-image: linear-gradient(to right, rgb(209, 211, 212,1), rgba(0,0,0,0));
    width: 180px;
    color: #3d3e41;
    padding-left: 5px;
    font-size: 25px;
    margin-top: 30px;
}
.optimizacija-sociva-grid2{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 120px;
    gap: 40px;
}
.optimizacija-sociva-grid2 div img{
    width: 100%;
}
.optimizacija-dark-overlay h3{
    font-size: 50px;
    font-weight: 700;
    position: relative;
    margin-bottom: 50px;
    color: rgb(209, 211, 212);
}
.optimizacija-sociva-wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.optimizacija-sociva-wrap > div img{
    width: 100%;
}
.optimizacija-sociva-wrap > div{
    display: flex;
}
.optimizacija-sociva-wrap > div > div{
    width: 100%;
}
.optimizacija-title-flex{
    display: flex;
    justify-content: space-between;
    gap: 70px;
    margin-top: 120px;
}
.optimizacija-title-flex > div{
    flex: 1;
}
.optimizacija-title-flex p{
    color: rgb(209, 211, 212);
    font-size: 18px;
    line-height: 25px;
}
.optimizacija-standard-table{
    width: 100%;    
}
.optimizacija-standard-table img{
    width: 100%;
}
.optimizacija-title-flex h3{
    margin-bottom: 0px;
}
.tolerancije-tables{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.tolerancije-tables > div{
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 30px;
}
.tolerancije-tables img{
    margin-bottom: 30px;
    width: 100%;
}
.tolerancije-tables img:last-child{
    margin-bottom: 0rem;
}
.materijali-section .optimizacija-dark-overlay:last-child{
    margin-bottom: 0px;
}
@media only screen and (max-width: 1080px){
    .materijali-section.optimizacija{
        padding-left: 0px;
        padding-right: 0px;
    }
    .materijali-section .container{
        padding-left: 50px;
        padding-right: 50px;
    }
}
@media only screen and (max-width: 800px){
    .optimizacija-title-flex{
        flex-direction: column;
        gap: 30px;
    }
}
@media only screen and (max-width: 480px){
    .optimizacija-dark-overlay h3{
        font-size: 30px;
        margin-bottom: 30px;
    }
    .materijali-container.optimizacija {
        margin-bottom: 80px;
    }
    .materijali-section .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .optimizacija-sociva-grid{
        grid-template-columns: repeat(1,1fr);
    }
    .optimizacija-sociva-grid2{
        grid-template-columns: repeat(1,1fr);
    }
    .optimizacija-sociva-wrap > div{
        flex-direction: column;
    }
    .optimizacija-dark-overlay{
        margin: 80px 0px;
    }
    .optimizacija-standard-table img{
        min-width: 600px;
    }
    .optimizacija-standard-table{
        overflow-x: scroll;
    }
    .tolerancije-tables > div{
        grid-template-columns: repeat(1,1fr);
    }
    .tolerancije-tables{
        overflow-x: scroll;
    }
    .tolerancije-tables img{
        min-width: 600px;
    }
    .tolerancije-tables > div img{
        min-width: 300px;
    }
    .tolerancije-tables > div{
        gap: 0px;
    }
}
.antireflex-card-text > div > div > div img{
    width: 20px;
    height: 20px;
    margin-right: 20px;
}
.antireflex-card-text > div > div > div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.antireflex-card-text > div > div > div:last-child{
    margin-bottom: 0px;
}
.download-content a.progresiv p{
    color: #DC4D4E;
}
.download-content a.profesional p{
    color: #6D6E71;
}
.download-content a.sport p{
    color: #008BE5;
}
.download-content a.polino p{
    color: #724199;
}
.download-content a.bifokal p{
    color: #546BB1;
}
.download-content a.monofokal p{
    color: #C17DB3;
}
.download-content.colored a p{
    opacity: 0.7;
}
.download-content.colored a:hover p{
    opacity: 1;
}
.tint-mirror-container4-glass-title div{
    display: flex;
    max-width: 513px;
    width: 100%;
    align-items: flex-end;
    gap: 15px;
    justify-content: space-between;
}
.tint-mirror-container4-glass-title div img{
    max-width: 90px;
}
.transition-container1.nupolar{
    align-items: center;
}
.slider-image{
    width: 100%;
    display: block;
    max-height: 800px;
}
.proffesional-image-text{
    position: relative;
    border-radius: 0px 0px 0px 50px;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 100px;
}
.proffesional-image-text img{
    display: block;
}
.proffesional-image-text h3{
    position: absolute;
    right: 30px;
    bottom: 30px;
    max-width: 681px;
    text-align: end;
    font-size: 30px;
    color: #fff;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
}
@media only screen and (max-width: 480px){
    .nupolar-illustration{
        margin-top: 30px;
    }
    .transition-container1.nupolar{
        margin-bottom: 0px;
    }
    .transition-container2.nupolar{
        overflow-x: auto;
    }
    .transition-container2.nupolar img{
        min-width: 600px;
    }
    .gallery{
        margin-bottom: -100px;
    }
    .tretman-section{
        padding-top: 150px;
    }
    .anglera-elegance-spacing {
        margin-bottom: 0px;
    }
}
.lang a{display: flex;}.lang a img{ display: block;max-width: 22px;margin-left: 5px;}@media only screen and (max-height: 900px){.navigation-open{padding: 110px 130px 60px 130px;}.navigation-list-item1{line-height: 40px;}.navigation-open-line{margin-top:30px;}}
@media only screen and (max-width: 800px) {
    .navigation-open {
        padding: 110px 30px 60px 30px;
    }
}
.back-to-top{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background-color: #E50019;
    border-radius: 50%;
    display: flex;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.5s;
}
.back-to-top.active{
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
.back-to-top .arrowup{
    opacity: 1;
    height: 25px;
    width: 3px;
    background-color: #fff;
    visibility: visible;
    position: relative;
}
.back-to-top .arrowup::after {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -70%);
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid white;
    border-left: 5px solid transparent;
}
.image-comparison {
    margin-right: auto;
    margin-left: auto;
  }
  .image-comparison__slider-wrapper {
    position: relative;
  }
  .image-comparison__label {
    font-size: 0;
    line-height: 0;
  }
  .image-comparison__label,
  .image-comparison__range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    cursor: ew-resize;
    z-index: 11;
  }
  @media (hover) {
    .image-comparison__range:hover ~ .image-comparison__slider .image-comparison__thumb {
      transform: scale(1.2);
    }
  }
  .image-comparison .image-comparison__slider-wrapper .image-comparison__range:active ~ .image-comparison__slider .image-comparison__thumb,
  .image-comparison .image-comparison__slider-wrapper .image-comparison__range:focus ~ .image-comparison__slider .image-comparison__thumb,
  .image-comparison .image-comparison__slider-wrapper .image-comparison__range--active ~ .image-comparison__slider .image-comparison__thumb {
    transform: scale(0.8);
    background-color: #ed222552;
  }
  .image-comparison__image-wrapper--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% + 1px);
    height: 100%;
    overflow: hidden;
  }
  .image-comparison{
    margin-top: 200px;
    margin-bottom: 130px;
  }
  .image-comparison__figure {
    margin: 0;
  }
  .image-comparison__figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
  }
  .image-comparison__figure:not(.image-comparison__figure--overlay) {
    position: relative;
    padding-top: 46.666667%;
  }
  .image-comparison__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 0 50%;
       object-position: 0 50%;
    overflow: hidden;
  }
  .image-comparison__figure--overlay .image-comparison__image {
    z-index: 1;
  }
  .image-comparison__caption {
    position: absolute;
    bottom: 12px;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
  }
  @media screen and (max-width: 40.063em) {
    .image-comparison__caption {
      font-size: 12px;
    }
  }
  .image-comparison__caption--before {
    left: 12px;
    z-index: 2;
  }
  .image-comparison__caption--after {
    right: 12px;
    text-align: right;
  }
  .image-comparison__caption-body {
    max-width: 40vmin;
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.55);
  }
  .image-comparison__slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #fff;
    transition: background-color 0.3s ease-in-out;
    z-index: 10;
  }
  .image-comparison__range--active ~ .image-comparison__slider {
    background-color: rgba(255, 255, 255, 0);
  }
  .image-comparison__thumb {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ED2224;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
    transform-origin: center;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  .image-comparison__range::-webkit-slider-runnable-track {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
  .image-comparison__range::-moz-range-thumb {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
  .image-comparison__range::-webkit-slider-thumb {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
  .image-comparison__range::-ms-fill-lower {
    background-color: transparent;
  }
  .image-comparison__range::-ms-track {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: transparent;
    outline: none;
    cursor: col-resize;
  }
  .image-comparison__range::-ms-thumb {
    width: 0.5%;
    height: 100%;
    opacity: 0;
  }
  .image-comparison__range::-ms-tooltip {
    display: none;
  }
  .progresive-gallery{
    margin-bottom: 170px;
  }
  @media only screen and (max-width: 1280px){
    .progresive-inner-flex{
        flex-direction: column;
        padding: 0px 20px;
        margin-top: 50px;
        gap: 50px;
    }
    .progresive-inner-flex-text p{
        padding-right: 0px;
    }
    .progresive-inner-flex-image{
        margin: 0;
    }
    .single-page-container-content{
        max-width: 100%;
    }
    .monofokalSlider{
        width: 100%;
        height: 100%;
    }
    .progresive-inner-flex-image img{
        width: 100%;
    }
    .progresive-inner-flex-image{
        width: 100%;
    }
  }
  @media only screen and (max-width: 480px){
    .single-page-container.tosmall .single-page-container-content{
        padding-left: 20px;
    }
    .image-comparison{
        margin-top: 50px;
    }
    .progresive-gallery{
        margin-bottom: 50px;
        margin-top: 50px;
    }
    .after-slider-title.progresive{
        margin: 50px 0px;
        margin-bottom: 0px;
    }
    .after-slider-title{
        font-size: 20px;
    }
    .about-us-cards-inner-container h3{
        font-size: 20px;
        padding: 0px 20px;
    }
    .product{
        padding: 0px 20px;
    }
    .product-list .product img{
        max-width: 100%;
    }
    .after-slider-title{
        margin-bottom: 0px;
    }
    .inner-gallery{
        margin: 50px 0px;
    }
  }
  .blue-blocker-flex{
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-top: 80px;
  }
  .blue-blocker-flex-image img{
    border-radius: 0px 0px 50px 0px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  }
  .blue-blocker-flex-text{
    font-size: 18px;
    line-height: 35px;
    padding-right: 30px;
  }
  .blue-blocker-flex-image{
    margin-bottom: -120px;
  }
  @media only screen and (max-width: 1280px){
    .blue-blocker-flex{
        flex-direction: column;
    }
    .blue-blocker-flex-image{
        margin-bottom: 0px;
    }
    .blue-blocker-flex-text{
        padding-left: 30px;
    }
  }
  @media only screen and (max-width: 1280px){
    .blue-blocker-flex-image img{
        width: 100%;
    }
    .blue-blocker-flex-image{
        padding-right: 30px;
    }
  }
  @media only screen and (max-width: 480px){
    .tretman-container1.dorade{
        margin-top: 0px;
    }
    .tretman-container1-text p{
        margin-bottom: 40px;
    }
    #dorade-list {
        top: -102px;
    }
    .materijali-container {
        margin-bottom: 50px;
    }
    .materijali-container-logo img{
        margin-bottom: 0px;
    }
    .materijali-container.optimizacija{
        margin-bottom: 50px;
    }
    .optimizacija-dark-overlay {
        margin: 50px 0px;
    }
    .optimizacija-dark-overlay{
        padding: 50px 0px;
    }
    .optimizacija-sociva-grid2{
        margin-bottom: 50px;
    }
    .optimizacija-title-flex{
        margin-top: 50px;
        gap: 0px;
    }
    .materijali-section.custom .container{
        padding-left: 0px;
        padding-right: 0px;
    }
    .blue-blocker-container1-image{
        margin-top: 30px;
    }
    .transition-container1{
        margin-bottom: 0px;
    }
    .transition-container{
        margin-top: 50px;
    }
    .transition-container2.xtra > div img {
        margin-bottom: -25px;
    }
    .transition-container2.xtra{
        gap: 20px;
    }
    .dorade-title{
        margin-bottom: 30px;
    }
    .blue-blocker-section.drivewear-page{
        padding-bottom: 0px;
    }
    .blue-blocker-section.drivewear-page .blue-blocker-container1{
        padding-bottom: 80px;
        border-radius: 0px;
        margin-bottom: -30px;
    }
    .blue-blocker-container1-content{
        padding-bottom: 50px;
    }
    .blue-blocker-flex{
        margin-top: 0px;
        gap: 50px;
    }
    .blue-blocker-flex-text{
        padding: 0px 20px;
    }
    .blue-blocker-flex-image{
        padding-right: 20px;
    }
    .product-title{
        margin-top: 50px;
    }
    .image-comparison{
        margin-bottom: 0px;
    }
    .after-slider-title.products{
        margin-bottom: 30px;
    }
    .product-section.monofokal {
        padding-top: 50px;
    }
    .proffesional-image-text{
        margin: 0px 20px;
        margin-bottom: 50px;
    }
    .proffesional-image-text h3 {
        padding-left: 20px;
        right: 20px;
        bottom: 20px;
        font-size: 17px;
    }
    .about-us-cards-inner-container h3{
        margin-bottom: 30px;
    }
    .after-slider-title.progresive{
        margin: 0px 20px;
        margin-top: 50px;
    }
    .about-us-cards > div{
        padding-bottom: 0px;
    }
    .progresive-inner-flex-text p{
        line-height: 25px;
    }
}
@media only screen and (max-width: 1250px) {
    .progresive-gallery .slider-text p{
        font-size: 20px;
    }
}
@media only screen and (max-width: 850px) {
    .progresive-gallery .slider-text{
        top: 0;
        right: 0;
        max-width: 600px;
    }
    .progresive-gallery .swiper2{
        padding-top: 0;
        padding-right: 0;
    }
    .progresive-gallery .slider-text p {
        font-size: 18px;
        line-height: 25px;
    }
    .proffesional-image-text img{
        width: 100%;
    }
}
@media only screen and (max-width: 480px) {
    .progresive-inner-flex.sport{
        margin-top: 30px;
        gap: 30px;
    }
    .materijali-container-logo > div:first-child img{
        margin-bottom: 30px;
    }
    .after-slider-title.sport {
        margin: 0px 0px;
        margin-top: 30px;
    }
    .inner-gallery{
        margin: 0!important;
        margin-top: 30px!important;
    }
    .progresive-gallery .slider-text{
        background-color: transparent;
        top: 0!important;
        right: unset;
        bottom: unset;
        position: relative;
    }
    .progresive-gallery .swiper2{
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        border-radius: 0px 0px 40px 0px;
    }
    .progresive-gallery .slider-text p{
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        width: fit-content;
        text-shadow: unset;
        color: #8b8b8b;
        padding: 10px;
    }
    .progresive-gallery .slider-text p br{
        display: none;
    }
    .tint-mirror-container4-glass-title{
        flex-direction: column;
    }
    .tint-mirror-container4-glass-title div{
        justify-content: flex-start;
        margin-top: 20px;
    }
    .tint-mirror-container4-glass-title h3 {
        font-size: 20px;
    }
    .ar-collection-title h2::after{
        width: 25px;
    }
    .ar-collection-title h2 {
        font-size: 28px;
        padding-left: 40px;
    } 
    .progresive-gallery .swiper2 .swiper-slide{
        display: flex;
        flex-direction: column-reverse;
        background-color: #fff;
    }
    .progresive-gallery .slider-image{
        border-radius: 0px;
    }
    .tretman-container1{
        grid-template-rows: unset;
    }
    .tretman-container1 > a{
        margin-bottom: 30px;
    }
    .tretman-container1 > a:last-child{
        margin-bottom: 0px;
    }
    .contact-container-text p{
        max-width: 100%;
    }
    .contact-container-text{
        padding: 30px 20px;
    }
}
.transition-subtitle-text p{
    font-size: 25px;
    line-height: 35px;
    font-weight: 300;
    margin-bottom: 30px;
}
.transition-subtitle-text p:last-child{
    margin-bottom: 50px;
}
@media only screen and (max-width: 500px) {
    .transition-subtitle-text p {
        font-size: 18px;
        line-height: 25px;
    }
    .transition-subtitle-text p:last-child{
        margin-bottom: 30px;
    }#alertMsg {    position: relative;    bottom: 0px;    margin-top: 20px;}
}

.news-letter-popout-section{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    align-items: center;
    display: none;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}
.news-letter-popout-section.visible {
    display: flex; /* Display as flex when visible */
    opacity: 1; /* Full opacity when visible */
  }
.news-letter-popout #alertMsg{
    font-size: 16px;
    left: 95px;
    bottom: 0px;
}
.news-letter-popout-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.news-letter-popout p{
    font-size: 20px;
    text-align: center;
    line-height: 25px;
    margin-bottom: 30px;
}
.news-letter-popout{
    z-index: 1;
    background-color: white;
    width: 100%;
    border-radius: 0px 0px 0px 25px;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 25%);
    max-width: 700px;
    padding: 60px 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.news-letter-popout form{
    width: 100%;
    max-width: 515px;
    border-radius: 30px;
    height: 50px;
    display: flex;
    border: 1px solid #E50019;
    justify-content: space-between;
    overflow: hidden;
    gap: 20px;
}
.news-letter-popout form input{
    background-color: transparent;
    height: 100%;
    padding: 0;
    outline: none;
    border: none;
    padding-left: 20px;
    width: 100%;
}
.news-letter-popout form button{
    border: 1px solid #E50019;
    padding: 0px 20px;
    color: #fff;
    border-radius: 30px;
    background-color: #E50019;
}
.news-letter-close-button{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #E50019;
    color: #fff;
    font-size: 18px;
}

.contact-popout-flex{
    display: flex;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 25px;
    align-items: center;
    width: fit-content;
}
.contact-popout-flex > div > img{
    width: 100px;
}
.contact-popout-flex > div:first-child{
    padding: 70px;
}
.contact-popout-flex > div:last-child{
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 30px;
}
.contact-popout-flex > div:last-child h3{
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 10px;
}
.contact-popout-flex > div:last-child h3 span{
    font-weight: 600;
}
.contact-popout-flex > div:last-child p{
    font-size: 16px;
    margin-bottom: 30px;
}
.contact-popout-flex > div:last-child input{
    width: 100%;
    border-radius: 50px;
    height: 40px;
    border: 2px solid #E50019!important;
    margin-bottom: 20px;
}

.contact-popout-flex > div:last-child input::placeholder{
    text-align: center;
}

.contact-popout-flex > div:last-child button{
    width: 100%;
    border-radius: 50px;
    height: 40px;
    color: #fff;
    background-color: #E50019;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif
}

@media only screen and (max-width: 600px) {
    .news-letter-popout{
        margin: 0px 20px;
        padding: 30px 20px;
        padding-bottom: 50px;
    }
    .news-letter-popout form{
        padding: 0px;
    }
    .news-letter-popout #alertMsg {
        font-size: 14px;
        text-align: left;
        bottom: -22px;
        left: 25px;
        position: absolute;
        line-height: 19px;
    }
    .contact-popout-flex{
        flex-direction: column;
        box-shadow: none;
        border-radius: none;
        margin: none;
        padding: 0px 20px;
    }
    .contact-popout-flex > div:first-child{
        padding: 0px;
    }
    .contact-popout-flex > div:last-child h3 {
        font-size: 24px;
        text-align: center;
        font-weight: 500;
    }
    .contact-popout-flex > div:last-child p{
        text-align: center;
    }
    .contact-popout-flex > div:last-child{
        padding-right: 0px;
        padding-bottom: 0px;
    }
}

@media only screen and (min-width:600px) and (max-height: 800px) {
    .navigation-list-item1 > a{
        line-height: 65px;
        font-size: 40px;
    }
}
@media only screen and (min-width:600px) and (max-height: 700px) {
    .navigation-open {
        padding: 80px 130px 60px 130px;
    }
    .navigation-list-item1 > a {
        line-height: 55px;
        font-size: 35px;
    }
    .navigation-link2 {
        line-height: 30px;
        font-size: 24px;
    }
    .navigation-list2{
        line-height: 40px;
    }
}
@media only screen and (min-width:600px) and (max-height: 580px) {
    .navigation-list-item1 > a {
        line-height: 35px;
        font-size: 28px;
    }
    .navigation-list2{
        top: -100px;
    }
}
@media only screen and (min-width:600px) and (max-height: 500px) {
    .navigation-open{
        overflow-y: auto;
    }
}