@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



@font-face {
  font-family: "helvetica_lt_geo_roman";
  src: url(/client/assets/fonts/HELVETICA_NEUE_LT_GEO_55_ROMAN.TTF);
}

@font-face {
  font-family: "helvetica_lt_geo_bold";
  src: url(/client/assets/fonts/HELVETICA_NEUE_LT_GEO_75_BOLD.TTF);
}

@font-face {
  font-family: "helvetica_lt_geo_medium";
  src: url(/client/assets/fonts/HELVETICA_NEUE_LT_GEO_65_MEDIUM.TTF);
}

@font-face {
  font-family: "mersad2";
  src: url(/client/assets/fonts/Mersad-26958361069.ttf);
}

/* Webfont: Mersad-Medium */@font-face {
    font-family: 'Mersad';
    src: url('/client/assets/fonts/Mersad/WebPS/MersadRegular.woff2') format('woff2'), /* Modern Browsers */
    url('/client/assets/fonts/Mersad/WebPS/MersadRegular.otf') format('opentype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Mersad-Thin */@font-face {
    font-family: 'MersadThin';
    src: url('/client/assets/fonts/Mersad/WebPS/MersadThin.woff2') format('woff2'), /* Modern Browsers */
    url('/client/assets/fonts/Mersad/WebPS/MersadThin.otf') format('opentype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Mersad-Bold */@font-face {
    font-family: 'MersadBold';
    src: url('/client/assets/fonts/Mersad/WebPS/MersadBold.woff2') format('woff2'), /* Modern Browsers */
         url('/client/assets/fonts/Mersad/WebPS/MersadBold.otf') format('opentype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: Mersad-Black */@font-face {
    font-family: 'MersadBlack';
    src: url('/client/assets/fonts/Mersad/WebPS/MersadBlack.woff2') format('woff2'), /* Modern Browsers */
         url('/client/assets/fonts/Mersad/WebPS/MersadBlack.otf') format('opentype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}



/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;


}

html, body{
    font-family: "mersad";
  height: 100%;
  position: relative;

}
body{
  color: #0D1E33;
  overflow-x: hidden;
}




*::after,
*::before {
    position: absolute;
    content: "";
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

ol, ul {
	list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}


a{
  text-decoration: none;

}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  background-color: #b7b7b7;
    border-radius: 10px;
}


button{
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}

.container{
    margin: auto;
    max-width: calc(1484px + 2rem);
    position: relative;


  }

  .main-padding{
    padding-left: 1rem;
    padding-right: 1rem;
  }





  .swiper {
    width: 100%;
    height: 100%;

  }

  .swiper-slide {


    -webkit-box-sizing: border-box;
    box-sizing: border-box;


  }

  .header{

    position: relative;

  }

  .lang-switcher{
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .lang-switcher li a{
    color: #0D1E33;
    opacity: 0.5;
    font-weight: bold;
    font-size: 0.875rem;
  }

  .lang-switcher li a.active{
    opacity: 1;
  }

  .switch {
  position: relative;
  display: inline-block;
  width: 41px;
  height: 19px;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid #AFD0EA;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: #00A5EF;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch.right .slider:before{
    left: initial;
    right: 2px;
}

.switch .slider.round {
  border-radius: 34px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

.header .content{
  display: flex;

  align-items: center;
  gap: 4rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.header .nav{
  display: flex;
  gap: 2rem;
    flex-wrap: wrap;
}

.language-container{
  margin-left: auto;
}

a{
  color: #0D1E33
}

.header .nav a.active{
  color: #00A5EF;
}

.site-background{
  background-color: #6FCAF3;
  position: relative;
    overflow: hidden;
}

.site-background .gradient{
  background: #6FCAF3;
background: -webkit-linear-gradient(11deg, rgba(111, 202, 243, 1) 0%, rgba(111, 202, 243, 1) 50%, rgba(252, 252, 244, 1) 100%);
background: -moz-linear-gradient(11deg, rgba(111, 202, 243, 1) 0%, rgba(111, 202, 243, 1) 50%, rgba(252, 252, 244, 1) 100%);
background: linear-gradient(11deg, rgba(111, 202, 243, 1) 0%, rgba(111, 202, 243, 1) 50%, rgba(252, 252, 244, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6FCAF3", endColorstr="#FCFCF4", GradientType=0);
height: 100%;
width: 100%;
position: absolute;
top: 0;

}


.btn{
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;

  width: fit-content;
  text-align: center;
  cursor: pointer;
  padding: 0 1rem;
  min-width: 240px;

}

.main-btn{
  background-color: #00A5EF;
  color: #F7F6DB;
  min-height: 67px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s;
  font-weight: bold;
}
.main-btn > span{
  position: relative;
  z-index: 1;
}
.main-btn .svg{
  position: absolute;
  width: 117%;

  transition: all 0.4s;
  left: 0;
  top: 0;
  transform: translateY(53%);
}

.main-btn .svg svg{
  width: 100%;
  height: auto;
}

.main-btn:hover{
  color: #00A5EF;
}

.main-btn:hover .svg{

  transform: translateY(-30%);
}

.white-btn{
  background-color: #FCFCF4;
  color: #00A5EF;
  min-height: 71px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s;
  font-weight: bold;
  min-width: 319px;
}



.section{
  position: relative;
}

.section-title{
  font-weight: bold;
  font-size: 1.2rem;
  padding-bottom: 0.25rem;
}






.text{
  line-height: 1.5;
}


.relative{
  position: relative;
}





.img{
  position: relative;
  overflow: hidden;
}


.main-slider-section{

}

.main-slider-section .bg-wrapper{
  position: relative;
  padding-top: 31%;

}

.main-slider-section .bg-wrapper > div{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.main-slider-section .bg-container{
  max-width: 1920px;
  margin: auto;
  position: relative;
  height: 100%;

}

.main-slider-section .bg-container img{

    opacity: 0;
    transition: all 0.2s;
}

.main-slider-section .background{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  pointer-events: none;
}

.main-slider-section .background > div{
  flex: 0 0 50%;
  width: 50%;
  position: relative;
    transition: all 0.2s;
}

.main-slider-section .background > div img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: contain;

}


.main-slider-section .background > div:first-child img{
  position: absolute;
  top: 0;
  mix-blend-mode:screen;
  transform: scale(1.2);

}

.main-slider-section .background.over{
  z-index: 2;
}
.main-slider-section .background.over > div:nth-child(2) img {
    position: absolute;
    width: 55%;
    padding-top: 14%;
    left: 30%;
    height: 100%;
    object-fit: contain;
}

.main-slider-section .container{
  height: 100%;
}

.main-slider-container{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}

.main-slider-over-container{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 2;
  pointer-events: none;
    left: 0;
}

.main-slider-over-container > div{
  flex: 0 0 50%;
  width: 50%;
  position: relative;
}


.main-slider-button-next{
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  cursor: pointer;
  pointer-events:all;
}
.main-slider-button-prev{
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  cursor: pointer;
  pointer-events:all;
}

.swiper-button-disabled{
  opacity: 0.3;
}

.main-slider-pagination{
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;


}

.main-slider-pagination .swiper-horizontal>.swiper-pagination-bullets, .main-slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;

}

.main-slider-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;

    background: #0D1E33;

}

.main-slider-pagination .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 7px;
}

.main-slider{
  overflow: initial;
  height: 100%;

}

.main-slide {
  display: flex;
  height: 100%;
    position: relative;

}
.main-slide > div {
  flex: 0 0 50%;
  width: 50%;
}

.main-slide .right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-slide .left{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-slide .title{
  font-family: 'MersadBlack';

  font-size: 3.75rem;
    line-height: 1.2;
}

.main-slide .text{
  padding: 2rem 0;
  max-width: 557px;
}

.main-slide .img{
  height: 100%;
  width: 100%;
}
.main-slide .img img{
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
    opacity: 0;
    transition: opacity 0.2s;
}
.img-loaded{
    opacity: 1 !important;
}
.loaded{
    opacity: 1 !important;
}

.small-title {
  font-size: 1.125rem;
  text-align: center;
}

.medium-title {
  font-size: 1.563rem;
  text-align: center;
  font-family: 'MersadBlack';
}

.big-title {
  font-size: 2.188rem;
  font-family: 'MersadBlack';
  text-align: center;
}

.home-products-section{
  padding-top: 2rem;
}

.home-products-section .big-title{
  margin: 1.5rem 0;
}

.product-list{
  display: grid;
}

.home-products-section .product-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-right: -15px;
}
.home-products-section .product-list > div{
  flex: 0 0 25%;
  padding-right: 15px;
  padding-bottom: 15px;
}


.product-item {
    display: block;

    background-color: white;
    border-radius: 1.8rem;
    padding: 1.75rem;
    height: 100%;

    transition: all 0.2s;
    position: relative;
    max-width: 355px;
    min-width: 355px;
}

.product-item .img {
    padding-top: 78%;
}
.product-item .img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    transition: all 0.2s;
}

.product-item .title{
  font-weight: bold;
  text-align: center;
    margin-top: 1rem;
}

.product-item .arrow{
  position: absolute;
  bottom: 1.1rem;
  right: 1.2rem;
  opacity: 0;
  transition: all 0.2s;
}

.product-item:hover {
  background-color: #00A5EF;
}
.product-item:hover .arrow {
  opacity: 1;
}

.home-products-section .btn-container{
  justify-items: center;
margin-top: 3rem;
}

.home-about-section{
  padding-top: 4rem;

}

.home-about-section .btn-container{
  justify-items: end;
margin-top: 0;
}

.home-about-section .bg-wrapper{
  position: relative;
  padding-top: 17%;
    pointer-events: none;

}

.about-tab-section{
  background-color: #00A5EF;

  border-radius: 2rem 2rem 0 0;
  position: relative;
  padding-top: 4rem;
}

.about-tab-section .content{
  display: flex;
    flex-wrap: wrap;
}

.about-tab-section .content > div{
  flex: 0 0 50%;
  width: 50%;
}

.about-tab-section .content > div:first-child{
  padding-right: 1rem;
}
.about-tab-section .content > div:last-child{
  padding-left: 1rem;
  display: flex;
  align-items: center;
}

.about-tab-section .content > div:first-child .img{

  border-radius: 1rem;
}


.about-tab-section .content > div:first-child .img img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

.about-tab-section .images{
  position: relative;

}
.about-tab-section .images > div:first-child{

  width: 60%;
}
.about-tab-section .images > div:last-child{
  position: absolute;
  width: 60%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.about-tab-section .images > div:first-child .img{
  padding-top: 125%;
}

.about-tab-section .images > div:last-child .img{
  padding-top: 75%;
}

.about-tab-section .title{
  font-size: 3.75rem;
  font-family: 'MersadBlack';
  text-align: right;
  line-height: 1.2;
}
.about-tab-section .title.mobile{
    display: none;
}

.about-tab-section .text{

  text-align: right;
  padding: 2rem 0;

}



.home-about-section .bg-wrapper > .img{
  pointer-events: none;
  position: absolute;
  width: 100%;
  top: 0;
}

.home-about-section .bg-wrapper .img img{

  width: 100%;
 height: 100%;
 object-fit: contain;
}

.home-about-section .bg-wrapper .img-1{
  left: 14%;
  width: 15%;
  top: -16%;
}

.home-about-section .bg-wrapper .img-1 svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-about-section .bg-wrapper .img-2{

}
.home-about-section .bg-wrapper .img-3{
  width: 25.8%;


  left: 37.2%;
  z-index: 2;
  padding-top: 11.8%;
}


.certificate-section{
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
    z-index: 1;
}

.certificate-list{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}

.certificate-item{
  padding: 3rem;
  background-color: #F4E9CE;
  border-radius: 1.5rem;
}

.certificate-item .img{
  padding-top: 85%;
}

.certificate-item .img img{
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.certificate-item:hover{

    background-color: #FCFCF4;

}

.split-background{
  position: relative;
  background-color: #00A5EF;
  padding-top: calc(4rem + 10%);
  overflow: hidden;

}

.split-background .bg{
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
 height: 100%;

  position: relative;
}
.split-background .bg-wrapper{
  position: absolute;
  width: 100%;
   height: calc(100% - 4rem);
}

.home-contact-section{
  padding-top: calc(15%);
  padding-bottom: 7rem;

}

.split-background .overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(38, 38, 38, 0.8);
  mix-blend-mode: normal;
}

input, textarea {
    padding: 1.75rem;
    border: 1px solid;
    outline: none;
    background-color: transparent;
    border-radius: 0.3rem;
    width: 100%;
    display: block;
}

.contact-form{
  width: 100%;
  max-width: 444px;
}
.contact-form .title{
  padding-bottom: 2rem;
  text-align: center;
  font-family: 'MersadBlack';
  font-size: 1.563rem;
  color: #FCFCF4;
}
.form-group{
  margin-bottom: 1rem;
}

.form-group:last-child{
  margin-bottom: 0;
}

.contact-form textarea {

    height: 180px;

}
.contact-form .main-btn{
  width: 100%;
}

.home-contact-section .contact-form input{
  border-color: #FCFCF4;
}
.home-contact-section .contact-form textarea{
  border-color: #FCFCF4;
}

.home-contact-section .contact-form{
  margin: auto;
}

.home-gallery-section{
  background-color: #E2F3F4;
  padding-top: 6rem;
}

.home-news-section{
  background-color: #E2F3F4;
  padding-top: 4rem;
}



.news-list{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3rem;
}

.home-news-section .news-list{
  margin-top: 2rem;
}


.news-item{
  display: block;
  padding: 1rem 1rem 4rem 1rem;
  border-radius: 1.5rem;
  transition: all 0.2s;
  position: relative;
}
.news-item .img{
  padding-top: 70%;
  border-radius: 1rem;
}



.news-item .img img{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-item .date{
  margin-top: 1rem;
  opacity: 0.4;
}
.news-item .title{
  margin-top: 1rem;
  font-family: 'MersadBlack';
  font-size: 1.125rem;
}
.news-item .text{
margin-top: 1rem;
}
.news-item .arrow{
  color: #00A5EF;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  opacity: 0;
  transition: all 0.2s;
  position: absolute;
  bottom: 1rem;
    transform: translateX(10%);
}

.news-item:hover{
  background-color: white;
}
.news-item:hover .arrow{
  opacity: 1;
    transform: translateX(0);
}

.home-news-section .btn-container {
    justify-items: center;
    margin-top: 3rem;
}

.home-contact-info-section{
  padding-top: 4rem;

  background-color: #E2F3F4;

  padding-bottom: 10%;
  overflow: hidden;
}

.home-contact-info-section .big-title{
  margin: 1.5rem 0 2rem 0;
}

.home-contact-info-section .bg{
 position: absolute;
 bottom: 0;
 width: 100%;
}

.home-contact-info-section .bg img{
  opacity: 0.25;
  width: 100%;
  height: auto;

}

.contact-info-box{
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;

backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.25);;
padding: 1rem;
}

.contact-info{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3rem;
  justify-items: center;
}


.contact-info li{
  max-width: 20rem;
}

.contact-info li .title{
  opacity: 0.3;
  margin-top: 1rem;
}

.contact-info li a{
  display: block;
  margin-top: 1rem;
  font-size: 1.375rem;
  line-height: 1.5;
}

.footer{
  background-color: #0D1E33;
  padding: 3rem 0;
}

.footer .nav {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.footer .nav a{
  color: white;
  font-size: 1.375rem;
}

.social-title{
  color: white;
  text-align: center;
  margin-top: 2rem;
}

.social-icons{
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 2rem;
}

.product-categories{
  display: grid;
  grid-template-columns: repeat(3,auto);
  justify-items: center;
  gap: 1rem;
  width: fit-content;
  margin: auto;
}
.product-categories li{
  display: block;
}
.product-categories li a{
  border: 1px solid #0D1E33;
  min-width: 211px;
  text-align: center;
  padding: 1.53rem;
  border-radius: 1rem;
  display: block;
    transition: all 0.2s;
}
.product-categories li a.active{
  background-color: #10AAF0;
  color: white;
  border-color: #10AAF0;
}

.products-section{
    overflow: hidden;
}

.products-section .product-list{
  margin: 4rem auto 0 auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width: fit-content;
  gap: 1rem;
    transition: all 0.3s;
}

#category-text{

}
#category-text.loaded-async{
    opacity: 1;
}

.product-list-wrapper{
    position: relative;
    transition: all 0.3s;

}
.product-list-wrapper .prods{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    pointer-events: none;
    position: absolute;
    width: fit-content;
    height: 100%;
    opacity: 1;
    transition: all 0.3s;
    gap: 1rem;
    justify-items: center;
    left: 50%;
    transform: translateX(-50%);

}
.product-list-wrapper .prods.loaded-async{
    transform: translateX(-100%);
    opacity: 0;
}

.products-section .product-list{
    opacity: 0;
    transform: translateX(50%);


}
.products-section .product-list.loaded-async{
    opacity: 1;
    transform: translateX(0);

}

.site-background.products{
  padding-bottom: 4rem;
}

.products-section .text{
  text-align: center;
  max-width: 1000px;
  margin: 2rem auto 0 auto;
}

.site-background.product{
  background-color: #F7F7F7;
}
.site-background.product .gradient{
  display: none;
}
.breadcrumb{
  display: flex;
  gap: 1rem;
}
.breadcrumb li{
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.breadcrumb li a{

  color: #0D1E33;
  opacity: 0.3;

}
.breadcrumb li:last-child a{


  opacity: 1;

}
.breadcrumb li:last-child svg{


    display: none;

}

.single-product-section{
    padding-bottom: 4rem;
}

.single-product-section .content{
  display: flex;
  margin-top: 2rem;
    flex-wrap: wrap;
}
.single-product-section .content > div{
  flex: 0 0 50%;
  width: 50%;
}

.single-product-section .content > div:first-child{
  padding-right: 1rem;
}


.slider-container{
  max-width: 635px;
}

.product-gallery-slider{
  border-radius: 1.5rem;
  background-color: #74C7F1;
}

.product-slide {
  position: relative;


  overflow: hidden;

}

.product-slide .img{
    width: 100%;
    height: 100%;
    padding-top: 100%;
}
.product-slide img{
  position: absolute;
  width: 100%;
  height: 100%;
    max-width: 100%;
    max-height: 100%;

  object-fit: contain;
  top: 0;
}

.single-product-section .content > div:last-child{
  padding-left: 1rem;
  display: flex;
  align-items: center;
}

.single-product-section .title{
  font-family: 'MersadBlack';
  font-size: 1.563rem;
}

.single-product-section .text{
  margin-top: 1rem;
}

.horizontal-separator{
  width: 100%;
  height: 1px;
  background-color: #E4E4E4;
  margin: 2rem 0;
}

.subtitle{
  font-weight: bold;
}

.specifications{
  opacity: 0.4;
  margin-top: 1rem;
  line-height: 2;
}

.slider-button-next{
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  cursor: pointer;
}
.slider-button-prev{
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  cursor: pointer;
}

.slider-pagination{
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;


}

.slider-pagination .swiper-horizontal>.swiper-pagination-bullets, .slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 1rem;

}

.slider-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;

    background: #ffffff;

}

.slider-pagination .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 7px;
}

.other-product-section{
  margin-top: 2rem;
  padding-bottom: 4rem;
}

.other-product-section .section-title{
  font-family: 'MersadBlack';
  font-size: 1.563rem;
}

.other-product-section .product-list{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.about-section-banner{
  padding-top: 20%;
}

.about-section-banner .bg{
  position: absolute;
  background-color: #262626;
  width: 100%;
  pointer-events: none;
  top: 0;
  height: 100%;
}

.about-section-banner .img{
  height: 100%;
}
.about-section-banner img{
  position: absolute;

  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}
.about-section-banner img:first-child{
  opacity: 0.6;


}
.about-section-banner img:last-child{
  clip-path: url(#myClip);


}

.about-section-banner .bg svg{

  position: absolute;
  top: 0;
  left: 0;
}

.about-section-banner .content{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.about-section-banner .breadcrumb{
  padding-top: 2rem;
}

.about-section-banner .breadcrumb a{
  color: white;
}
.about-section-banner .breadcrumb svg{
  fill: white;
}

.about-section-info{
  background-color: #00A5EF;
  border-radius: 0 0 2rem 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.about-section-info .content{
  display: flex;
    flex-wrap: wrap;
}

.about-section-info .content > div{
  flex: 0 0 50%;
  width: 50%;
  display: flex;

}
.about-section-info .content > div:first-child{
  padding-right: 1rem;
}
.about-section-info .content > div:last-child{
  justify-content: end;
  padding-left: 1rem;
}

.about-section-info .content > div:last-child > div{
  width: 100%;
  max-width: 642px;
}

.about-section-info .section-title{
  margin: 2rem 0 1rem 0;
}

.about-section-info .subtitle{
  color: white;
  font-size: 2.188rem;
}

.about-section-info .title{
  font-family: 'MersadBlack';
  font-size: 2.813rem;
  margin-top: 2rem;
  line-height: 1.2;
  max-width: 481px;
}
.about-section-info .text{

  margin-top: 2rem;
  max-width: 648px;
}
.about-section-info .img{
  border-radius: 1rem;
  padding-top: 82%;
}
.about-section-info .img img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}


.gallery-section{
  padding-bottom: 4rem;
  padding-top: 2rem;
  min-height: 400px;
}

.contact-section{
  padding-bottom: 17%;
}

.contact-section .content{
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 2rem;
}
.contact-section .content > div:first-child{
  padding-right: 1rem;
  border-right: 1px solid #B0B5BB;
}

.contact-section .content > div:last-child{
  padding-left: 1rem;
  display: flex;
  justify-content: flex-end;
}

.contact-section .content > div:last-child > div{
  width: 100%;
}

.contact-section .contact-info{

    grid-template-columns: repeat(2,1fr);
    gap: 3rem;
    justify-items: initial;
}

.contact-section .contact-form .title{
  color: #0D1E33;
}

.contact-section .bg{
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.contact-section .bg svg{

  width: 100%;
  height: auto;
}

.news-section{
  padding-bottom: 4rem;
}

.news-section .news-list{
  margin-top: 2rem;
}

.news-content {
    max-width: 635px;
    margin: auto;
}

.news-content .date {

    margin-top: 2rem;
    opacity: 0.4;
}

.news-content .img {
    margin-top: 1rem;
    border-radius: 1rem;
    overflow: hidden;
}

.news-content .img img {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    object-fit: contain;

}

.news-content .title {
  font-family: 'MersadBlack';
    font-size: 1.125rem;

    margin-top: 2rem;
}

.news-content .text {
    margin-top: 2rem;
    padding-bottom: 4rem;
}

.cke-image {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem auto;
}

.cke-image img {
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}


.gallery{

  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.gallery .row{
  display: grid;
    grid-template-columns: repeat(6, 1fr);

    gap: 20px;
    grid-auto-rows: minmax(0, 2fr);
    grid-auto-flow:dense;

}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    display: block;
    transition: all 0.2s;
  }

  .gallery .img {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    border-radius: 16px;

  }

  .gallery .item{
    position: relative;
    padding-top: 45%;
  }

.item1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .item2 { grid-column: 3 / 5; grid-row: 1 / 3; }
  .item3 { grid-column: 5 / 7; grid-row: 1 / 2; }
  .item4 { grid-column: 5 / 7; grid-row: 2 / 3; }
  .item5 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .item6 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .item7 { grid-column: 1 / 3; grid-row: 3 / 4; padding-top: 30% !important;}
  .item8 { grid-column: 3 / 4; grid-row: 3 / 4; padding-top: 30% !important;}
  .item9 { grid-column: 4 / 7; grid-row: 3 / 4; padding-top: 30% !important; }

  .gallery-hover{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(38, 38, 38, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  transition: all 0.2s;
  opacity: 0;


}

.gallery .img:hover img{
    transform: scale(1.1);
}

.gallery .img:hover .gallery-hover{
  opacity: 1;
}

.gallery-popup{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 2rem;


}

.gallery-popup .gallery-popup-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.gallery-popup div img {
    max-height: 100%;
    max-width: 100%;

    object-fit: contain;
}

.mobile-menu-btn{
    display: none;
    position: relative;
    z-index: 51;
}

.menu-btn div {
    width: 73px;
    height: 3px;
    margin: 7px 0;
    transition: all 0.5s;
    background-color: #0D1E33;
}

.mobile-menu-btn.clicked{
    position: fixed;
    right: 1rem;
    top: 37px;
}
.menu-btn.clicked div{
    /*background-color: white;*/
}


.menu-btn.clicked div:first-child {
    rotate: -135deg;
    translate: 0 3px;
}

.menu-btn.clicked div:last-child {
    rotate: -45deg;
    translate: 0 -7px;
}

.mobile-menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100dvh;

    z-index: 50;
    transition: all 0.5s;
    opacity: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;

    background: #FFFFFF;
    background: -webkit-linear-gradient(163deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
    background: -moz-linear-gradient(163deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
    background: linear-gradient(163deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#F7F7F7", GradientType=0);
}


.mobile-menu.opened{
    opacity: 1;
    right: 0px !important;

}

.mobile-menu .row-1{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
}

.mobile-menu .row-2 {
    margin-top: 2rem;
}

.mobile-menu .nav{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.25rem;
    gap: 1.2rem;
    max-width: 325px;
    margin: auto;
}

.mobile-menu .nav a{
    padding: 1.2rem 1.2rem;
    border: 1px solid;
    border-color: #F7F7F7;
    border-radius: 0.75rem;
    width: 100%;
    display: block;
    text-align: center;
}
.mobile-menu .nav li {
    width: 100%;
}

.mobile-menu .nav a.active{
    background-color: #F7F7F7;
    color: #00A5EF;
}



.mob-sale-office > div:first-child{
    font-size: 0.8rem;
    opacity: 0.3;
}

.mobile-menu .relative{
    height: 100%;
}

.mobile-menu .row-3{
    position: absolute;
    bottom: 0;
    padding-bottom: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.main-slider-section .mobile{
    display: none;

}
.btn-container.mobile{
    display: none;
    position: relative;
    justify-content: center;
    align-items: flex-end;
}


.main-slider-section .background > div.mobile {
    height: 131px;
}

.main-slider-section .background > div.mobile img {
    position: absolute;
    top: -40%;
    left: 0;
    mix-blend-mode: screen;
    transform: scale(1);
    width: 100%;
    height: auto;
    object-position: left;
    object-fit: contain;
}










@media (min-width: 1920px) {
  .main-slider-section .bg-wrapper {
    position: relative;
    padding-top: 0;
    height: 595px;
  }
}


@media (max-width: 1135px) {
    .product-item {

        max-width: 355px;
        min-width: initial;

    }
    .home-products-section .product-list > div {
        flex: 0 0 33.3%;
        padding-right: 15px;
        padding-bottom: 15px;
    }
}



@media (max-width: 1000px) {

    .header .content {

        gap: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }


}

@media (max-width: 900px) {
    .header .content {
        justify-content: space-between;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .header .content nav {

        display: none;
    }
    .language-container{
        display: none;
    }

    .mobile-menu-btn{
        display: block;
    }

    .header .logo img{
        width: 73px;
        height: auto;
    }

    .main-slider-section {

    }
    .main-slider-container {
        position: relative;
    }
    .main-slider-section .bg-wrapper {

        padding-top: 0;
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .main-slider-section .background {

        flex-direction: column;
        position: relative;
    }
    .main-slider-section .background.over {
        position: absolute;
        top: 0;
    }
    .main-slider-section .background > div {
        flex: initial;
        width: 100%;


    }

    .main-slider-section .background > div:nth-child(2) {
        padding-top: 67%;

    }

    .main-slider-section .background.over > div:nth-child(2) img {
        position: absolute;
        width: 59%;
        padding-top: 15%;
        left: 28%;
        height: 100%;
        object-fit: contain;
    }

    .main-slider-over-container {
        flex-direction: column;
        top: 0;
    }
    .main-slider-over-container > div {
        flex: initial;
        width: 100%;

    }
    .main-slider-over-container > div:nth-child(2) {
        padding-top: 67%;

    }

    .main-slide {
       flex-direction: column;
    }
    .main-slide > div {
        flex: 0 0 100%;
        width: 100%;

    }

    .main-slider-section .bg-wrapper > div {
        position: relative;
        height: initial;

    }
    .main-slider {


    }
    .main-slider-over-container {



    }

    .main-slide .img {
       padding-top: 67%;
    }

    .main-slide .btn-container{
        display: none;
    }

    .main-slider-section div.mobile{
        display: block;
    }

    .btn-container.mobile{
        padding-top: 64px;
        display: flex !important;
    }

    .main-slider-section .background > div:first-child img {

        display: none;

    }

    .main-slider-button-prev {

        left: 25px;
        top: initial;
        transform: translateY(0);
        bottom: 0;

    }
    .main-slide .text {
        padding: 2rem 0 0 0;
        text-align: center;
        max-width: initial;

    }
    .main-slider-button-next {

        right: 25px;
        top: initial;
        transform: translateY(0);
        bottom: 0;

    }

    .main-slide .title {
        text-align: center;
    }

}

@media (max-width: 768px) {

    .site-background .gradient {
        background: #6FCAF3;
        background: -webkit-linear-gradient(19deg, rgba(111, 202, 243, 1) 0%, rgba(111, 202, 243, 1) 75%, rgba(252, 252, 244, 1) 100%);
        background: -moz-linear-gradient(19deg, rgba(111, 202, 243, 1) 0%, rgba(111, 202, 243, 1) 75%, rgba(252, 252, 244, 1) 100%);
        background: linear-gradient(19deg, rgba(111, 202, 243, 1) 0%, rgba(111, 202, 243, 1) 75%, rgba(252, 252, 244, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6FCAF3", endColorstr="#FCFCF4", GradientType=0);
    }

    .home-products-section .product-list {

        margin-right: -10px;
    }
    .home-products-section .product-list > div {
        flex: 0 0 50%;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .about-tab-section .content > div {
        flex: 0 0 100%;
        width: 100%;
    }

    .home-about-section .bg-wrapper .img-1 {
        left: initial;
        right: -9%;
        width: 58%;
        top: -392%;
    }
    .home-products-section .product-list {

        justify-content: initial;

    }

    .about-tab-section {

        padding-top: 2rem;
    }
    .home-products-section {
        padding-top: 5rem;
        z-index: 1;
    }

    .news-list {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .contact-info {

        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
        justify-items: left;

    }

    .footer .nav {
        display: flex;
        gap: 2rem;
        justify-content: center;
    }

    .footer .nav li {
        width: 100%;
        text-align: center;
    }

    .certificate-list {

        grid-template-columns: repeat(1,1fr);
        gap: 1rem;
    }

    .certificate-section {
        position: relative;
        transform: translateY(0);
        padding-top: 1rem;
    }

    .gallery .row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        grid-auto-rows: minmax(0, 2fr);


        grid-auto-flow: dense;
    }

    .gallery .item {

        padding-top: 30%;
    }

    .item1 { grid-column: 1 / 4; grid-row: 1 / 2; }
    .item2 { grid-column: 1 / 2; grid-row: 2 / 3; }
    .item3 { grid-column: 2 / 4; grid-row: 2 / 3; }
    .item4 { grid-column: 1 / 4; grid-row: 3 / 4; }
    .item5 { grid-column: 1 / 3; grid-row: 4 / 6; }
    .item6 { grid-column: 3 / 4; grid-row: 4 / 5; }
    .item7 { grid-column: 3 / 4; grid-row: 5 / 6; padding-top: 30% !important;}
    .item8 { grid-column: 1 / 2; grid-row: 6 / 7; padding-top: 30% !important;}
    .item9 { grid-column: 2 / 4; grid-row: 6 / 7; padding-top: 30% !important; }



    .about-section-info .content > div {
        flex: 0 0 100%;
        width: 100%;

    }

    .product-categories {

        grid-template-columns: repeat(3,1fr);
        justify-items: initial;
        gap: 0.5rem;

    }

    .products-section .product-list {
        margin: 2rem 0 0 0;

        grid-template-columns: repeat(2,1fr);
        width: 100%;
        gap: 10px;

    }

    .product-list-wrapper .prods {

        grid-template-columns: repeat(2,1fr);

        justify-items: initial;

        width: 100%;
        gap: 10px;



    }

    .text{
        font-size: 0.875rem;
    }

    .product-categories li a {

        min-width: initial;

        padding: 1rem;
        font-size: 0.875rem;

    }

    .product-item .title {
       font-size: 0.875rem;
    }

    .contact-section .content {

        grid-template-columns: auto;
        margin-top: 2rem;
    }

    .contact-section .contact-info {
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;

    }
    .contact-section .content > div:first-child {
        padding-right: 0;
        border-right: 0;
    }

    .contact-section .content > div:last-child {
        padding-left: 0;
        margin-top: 2rem;

    }

    .contact-info li a {
        display: block;
        margin-top: 1rem;
        font-size: 1rem;
        line-height: 1.5;
    }




    .split-background {

        padding-top: 2rem;

    }
    .split-background .bg-wrapper {

        height: calc(100% );
    }



    .about-tab-section .content > div:last-child {
        padding-left: 0;
        margin-top: 2rem;
    }
    .about-tab-section .title {
        display: none;


    }
    .about-tab-section .title.mobile {
        display: block;
        font-size: 1.75rem;
        text-align: center;
        padding-bottom: 1rem;

    }
    .about-tab-section .text {
        text-align: center;
        padding: 0 0 2rem 0;
    }

    .home-about-section .btn-container {
        justify-items: center;
        margin-top: 0;
    }

    .single-product-section .content > div {
        flex: 0 0 100%;
        width: 100%;
    }

    .other-product-section .product-list {

        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }

    .single-product-section .content > div:first-child {
        padding-right: 0;
    }

    .single-product-section .content > div:last-child {
        padding-left: 0;
        margin-top: 2rem;

    }

    .slider-button-next {

        right: 10px;

    }
    .slider-button-prev {

        left: 10px;

    }

    .other-product-section .section-title {

        font-size: 1.125rem;
    }

    .product-item {

        padding: 2rem 1rem 2rem 1rem;


    }

    .product-item .arrow {

        bottom: 0.7rem;
        right: 1rem;

    }
    .product-item .arrow svg {

        width: 25px;

    }

    .main-slide .title {

        font-size: 1.75rem;
    }

    .certificate-item {
        padding: 2rem;

    }

    .social-title {

        margin-top: 4rem;
    }

    .about-section-info {

        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .about-section-info .subtitle {

        font-size: 1.188rem;
    }

    .about-section-info .title {
        margin-top: 1rem;
        font-size: 1.813rem;

    }
    .about-section-info .text {
        margin-top: 1rem;

    }

    .about-section-banner {
        padding-top: 50%;
    }

    .about-section-info .content > div:last-child {

        padding-left: 0;
        margin-top: 1rem;
    }

    .breadcrumb li a {
        font-size: 0.875rem;
    }

    .big-title {
        font-size: 1.5rem;

    }
    .small-title {
        font-size: 1rem;

    }

    .home-gallery-section {

        padding-top: 4rem;
    }

    .news-item {
       background-color: white;
    }
    .news-item .arrow {
        opacity: 1;
        transform: translateX(0);
    }
}