/* general */
.hamburger{display: none;flex-direction: column;gap: 1px;width: 36px;height: 36px;justify-content: space-evenly;padding: 3px;cursor: pointer;}
.hamburger .bar{height: 4px; width: 100%; background-color: #003055; border-radius: 30px;}


/* header */

header{z-index: 5;}
.header-pillow{height: 70px;}
body.scrolled header{position: fixed; top: 0; max-width: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 0; background: white; height: auto; z-index: 5;}
body.scrolled header .content .logo{padding: 10px 0;}
body.scrolled header .content .logo img{margin-top: 5px;}
body.scrolled header .content .logo img{height: 35px;}

header{position: fixed; top: 0; width: 100%; left: 0; right: 0; height: 70px; transition: all 300ms; background: transparent; z-index: 5; background-color: white; display: flex; align-items: center;}
header .content{display: flex; justify-content: space-between; align-items: center;}
header .content .logo img{height: 50px; transition: all 250ms;}

header .content .menu-container{display: flex; gap: 70px; align-items: center;}
header .content .menu-container .menu{display: flex; align-items: center;}
header .content .menu-container .menu ul{display: flex; gap: 21px; list-style: none; align-items: center;}

header .content .menu-container .menu ul li{position: relative; cursor: pointer;}
header .content .menu-container .menu ul li.has-dropdown::before{content: ''; width: 100%; height: 30px; position: absolute; top: 10px; background-color: transparent; left: 0;}
header .content .menu-container .menu ul li.has-dropdown .toggler{display: flex; gap: 10px;}
header .content .menu-container .menu ul li .dropdown{opacity: 0;position: absolute;pointer-events: none;transition: all 250ms;top: 25px; left: -17px; z-index: 1;background: white;box-shadow: 1px 1px 20px #0000001f;display: flex;padding: 20px;min-width: 250px;flex-direction: column;align-items: flex-start;}
header .content .menu-container .menu ul li:hover .dropdown{opacity: 1; top: 35px; pointer-events: all;}
header .content .menu-container .menu ul li{position: relative;}

header .content .menu-container .menu .call-us{padding: 10px 20px; background-color:#E7434E; color: white; border-radius: 6px; margin-left: 30px; transition: all 250ms;}
header .content .menu-container .menu .call-us:hover{background-color:#c02b35; color: white;}

header .content .menu-container .menu .navigate{width: 100%; padding: 10px 20px; background-color:#717171; color: white; border-radius: 6px; transition: all 250ms; display: none; position: relative; top: 27px;}
header .content .menu-container .menu .navigate:hover{background-color:#434343; color: white;}

header .content .menu-container .menu ul li a{color: #000;font-size: 0.937rem;font-style: normal;font-weight: 400;line-height: normal; transition: all 300ms;}
header .content .menu-container .menu ul li:hover a{color: #540b0b;}
header .content .menu-container .menu ul li.has-dropdown:hover a{color: #540b0b;}
header .content .menu-container .menu ul li.has-dropdown:hover .dropdown a{color: #000000;}
header .content .menu-container .menu ul li.has-dropdown .dropdown li{transition: all 250ms;}
header .content .menu-container .menu ul li.has-dropdown .dropdown li:hover a{color: #540b0b;}

header .content .menu-container .socials{display: flex; gap: 3px; align-items: center;}
header .content .menu-container .socials a svg path{transition: all 300ms;}
header .content .menu-container .socials a:hover svg path{fill: #b82b2b;}
header .content .menu-container .menu .socials{display: none;}

/* banner */

.banner{height: 750px; z-index: 1; position: relative;}
.banner .content{display: flex; height: 100%; overflow: hidden; position: relative;}
.banner .content .text-separator{width: 50%;}
.banner .content .image{width: 100%; height: 100%; position: relative;}

.banner .content .image img{height: 100%; object-fit: cover; width: 100%;}
.banner .content .image .splide{width: 100%; height: 100%;}
.banner .content .image .splide .splide__slide{height: 100%;}
.banner .content .image .splide .splide__track{height: 100%;}
.banner .content .image .splide .splide__slide img{width: 100%; height: 100%; object-fit: cover;}
.banner .text-content{position: absolute;width: 100%;height: 100%;display: flex; z-index: 2;}
.banner .text-content .text{max-width: 50%; width: 100%; margin-top: 200px; padding: 50px; margin-left: -50px; background-color: #2d2d2dfa;}
.banner .text-content .text .prefix{color: #ffffff;font-size: 1.062rem;font-style: normal;font-weight: 500;line-height: normal; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59);}
.banner .text-content .text h1{color: #ffffff;font-size: clamp(2.125rem, 2.010rem + 0.513vw, 2.625rem) /*42px->34px*/;font-style: normal;font-weight: 800;line-height: normal;margin-left: -3px;margin-top: 8px;max-width: 509px;text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59);}
.banner .text-content .text .sufix{color: #ffffff;font-size: 1.3rem /*27px*/;font-style: normal;font-weight: 600;line-height: normal; margin-top: 10px; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59);}
.banner .text-content .text .content{color: #ffffff;font-size: 1.187rem /*19px*/;font-style: normal;font-weight: 400;line-height: normal; margin-top: 15px; height: auto; max-width: 444px; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59);}
.banner .text-content .text .btn{margin-top: 60px; color: #FFF;font-size: 18px;font-style: normal;font-weight: 600;line-height: 14px; /* 77.778% */letter-spacing: 0.02em;}


/* product grid */
.product-grid{display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 100px; margin-bottom: 70px;}
.product-grid .product-tile-big{max-width: 445px; max-height: 493px; height: 100%; width: 100%; overflow: hidden; position: relative;}
.product-grid .product-tile-big::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.2; z-index: 1;}
.product-grid .product-tile-big a img{transition: all 250ms;}
.product-grid .product-tile-big a:hover img{transform: scale(1.1);}
.product-grid .product-tile{width: 100%;display: flex; gap: 10px; flex-wrap: wrap; position: relative;}
.product-grid .product-tile a{max-width: 283px; max-height: 240px; height: 100%; width: 100%; overflow: hidden; position: relative;}
.product-grid .product-tile a img{width: 100%; height: 100%; object-fit: cover; transition: all 250ms; position: relative;}
.product-grid .product-tile a:hover img{transform: scale(1.1);}
.product-grid .product-tile a.mobile{display: none;}

.product-grid .product-tile a::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.2; z-index: 1;}

.product-grid .product-tile a .bb-middle-top,
.product-grid .product-tile-big a .bb-middle-top{position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;padding: 20px;z-index: 1;top: 0;left: 0;display: flex;flex-direction: column;gap: 10px; color: white; text-shadow: 0 0px 3px #777777;}



.product-grid div a .bb-middle-top h3{font-size: 1.5rem;}
.product-grid div a .bb-middle-top h4{font-size: 1.1rem;}
.product-grid div a .bb-middle-top .mobile{display: none; font-size: 16px; color: #ffffff; font-weight: 500; text-shadow: 0 0px 3px #777777; text-align: center;}


/* top products */
.top-products{display: flex; flex-direction: column; gap: 40px;}
.top-products .content{width: 100%; display: flex; flex-direction: column; gap: 40px; justify-content: center; align-items: center;}
.top-products .content .tabs{display: flex; gap: 30px; justify-content: center; align-items: center;}
.top-products .content .tabs .tab{padding: 10px 25px; border: 1px solid rgb(185, 185, 185); cursor: pointer; font-weight: 300; background-color: white; color: #000; transition: all 250ms;}
.top-products .content .tabs .tab.active{border: 1px solid rgb(255, 255, 255); background-color: rgb(48, 48, 48); color: #fff;}
.top-products .content .tabs .tab:hover{background-color: rgb(214, 214, 214);}
.top-products .content .tabs .tab.active:hover{background-color: rgb(48, 48, 48);}

.top-products .content .gallery-container{display: flex; justify-content: center; margin-top: 30px; margin-bottom: 60px;}
.top-products .content .gallery-container .gallery{display: none; justify-content: center; gap: 30px;}
.top-products .content .gallery-container .gallery.active{display: flex;}

.top-products .content .gallery-container .gallery.active a{flex-basis: calc(33.33333% - 18px); max-height: 500px; height: 100%; overflow: hidden; border-radius: 4px;}
.top-products .content .gallery-container .gallery.active a img{width: 100%; height: 100%; object-fit: cover;}


/* logos list of partners */
.logos-list{margin-top: 60px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px;}
.logos-list .logo{display: flex; justify-content: center; align-items: center;}
.logos-list .logo img{filter: grayscale(1); transition: all 250ms;}
.logos-list .logo img:hover{filter: grayscale(0);}
.logos-list .splide__slide{display: flex; align-items: center; justify-content: center;}
/* end of partners section */

/* services */
.services{margin-bottom: 60px;}
.services .tiles{display: flex; gap: 10px; margin-top: 60px;}
.services .tiles .tile{flex-basis: calc(33.3333% - 10px); display: flex; flex-direction: column; gap: 10px; border: 1px solid #ececec; padding: 20px; transition: all 250ms;}
.services .tiles .tile .icon img{width: 60px; height: 60px; padding: 10px;}
.services .tiles .tile .icon{display: flex; justify-content: center; align-items: center;}
.services .tiles .tile .title{font-size: 1.4rem; font-weight: 400; color: #000; width: 100%; text-align: center;}
.services .tiles .tile .description{font-size: 15px; font-weight: 300; color: rgb(26, 26, 26); width: 100%; text-align: center;}
.services .tiles .tile .description a{color: rgb(184, 54, 54); transition: all 250ms;}
.services .tiles .tile .description a:hover{color: rgb(129, 31, 31);}
.services .tiles .tile:hover{background-color: #ececec;}

/* opinions */
.company-page .opinions-container{padding-top: 60px;}
.opinions-container{background-color: #eaeaea;padding: 0 30px;padding-top: 40px;padding-bottom: 40px; border-radius: 8px; margin-bottom: 60px;}
.opinions-container .sectionTitle{margin-bottom: 40px;}
.opinions-container .headline{font-size: 28px; color: #181818;}
.opinions-container .subtitle{padding-bottom: 55px; margin-top: 5px;}
.opinions-container .wrap .splide__slide .opinion{background-color: white; border-radius: 6px; padding: 32px; max-height: 310px; height: 100%;}
.opinions-container .wrap .splide__slide .opinion .stars{color:#FF9D28; margin-bottom: 20px; font-size: 25px;}
.opinions-container .wrap .splide__slide .opinion .content{font-size: 16px; color: #3D3E50; margin-bottom: 30px; max-height: 114px; overflow-y: scroll; padding-right: 5px;}
.opinions-container .wrap .splide__slide .opinion .content::-webkit-scrollbar {width: 6px;}
.opinions-container .wrap .splide__slide .opinion .content::-webkit-scrollbar-track {background: rgba(56, 56, 56, 0);}
.opinions-container .wrap .splide__slide .opinion .content::-webkit-scrollbar-thumb {background-color: gray;    /* color of the scroll thumb */border-radius: 20px;       /* roundness of the scroll thumb */border: 3px solid rgba(56, 56, 56, 0);  /* creates padding around scroll thumb */}
.opinions-container .wrap .splide__slide .opinion .author{color: #3D3E50; font-weight: bold;}
.opinions-container .splide__arrow--prev{left: -1.5em;}
.opinions-container .splide__arrow--next{right: -1.5em;}
.opinions-container .splide__arrow{width: 3em; height: 3em; background: #000;}
.opinions-container .splide__arrow svg{fill: white;}
/* end of opinions */

/* footer */
.footer {padding: 30px 0px;color: #4D4D4F;background-color: #FAFAFA;border-top: 1px solid #e5e5e5;}
.footer .footer-content{display: flex; flex-flow: row wrap; gap: 20px;}
.footer .footer-content .footer-info{max-width: 270px; width: 100%;}

.footer .footer-content .footer-info .logo{width: auto; height: 80px; background-image: url(../images/logo.png);background-position: center center;background-size: 100% auto;background-repeat: no-repeat;display: block;aspect-ratio: 2/1;transition: all 300ms; margin-bottom: 30px;}
.footer > * {flex:  1 100%;}
.footer ul {list-style: none;padding-left: 0;}
.footer li {line-height: 2em;}
.footer a {text-decoration: none; font-size: 16px; color: #4D4D4F !important; transition: all 250ms;}
.footer a:hover{color: #BE1522 !important;}
.footer__nav {display: flex;flex-flow: row wrap; gap: 20px;}
.footer__nav > * {flex: 1 50%;margin-right: 1.25em; margin-left: 2rem;}
.nav__ul a {color: #999;}
.nav__ul--extra {column-count: 2;column-gap: 1.25em;}
.footer .nav__title{font-weight: 600; font-size: 1.05rem; color: #3E3E3E; margin-bottom: 10px;}
.footer .legal{flex-basis: 100%;padding-top: 30px;border-top: 1px solid #e5e5e5;display: flex;gap: 50px;justify-content: space-between;padding-bottom: 10px;}

/* pageTitle */
.pageTitle{height: 400px; width: 100%; background-size: cover; background-position: center center; position: relative; margin-bottom: 100px;}
.pageTitle::before{content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; background-color: #31313187;}
.pageTitle .content{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
.pageTitle .content .title{font-style: normal;font-weight: 800;font-size: clamp(1.563rem, 1.346rem + 0.962vw, 2.500rem) /*40px->25px*/;line-height:clamp(1.813rem, 1.596rem + 0.962vw, 2.750rem) /*44px->29px*/;color: #FFFFFF;text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59);}
.pageTitle .content .breadcrumbs{position: absolute; bottom: 20px; left: 0; font-style: normal;font-weight: 500;font-size: clamp(0.813rem, 0.755rem + 0.256vw, 1.063rem) /*17px->13px*/;line-height: clamp(1.063rem, 0.962rem + 0.449vw, 1.500rem) /*24px->17px*/;color: #FFFFFF;}
.pageTitle .content .breadcrumbs span{padding-right: 10px;}
.pageTitle .content .breadcrumbs .link{font-style: normal;font-weight: 500;font-size: clamp(0.813rem, 0.755rem + 0.256vw, 1.063rem) /*17px->13px*/;line-height: clamp(1.063rem, 0.962rem + 0.449vw, 1.500rem) /*24px->17px*/;color: #FFFFFF; padding-right: 20px; position: relative;}
.pageTitle .content .breadcrumbs .link::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 2px; background-image: url(../images/icons/arrow-right.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 8px; width: 12px;}
.pageTitle .content .breadcrumbs .link.main::before{content: none;}

.pageTitle.shorter{height: 250px;}

.map{margin-top: 60px;}

.mapouter{position:relative;text-align:right;height:300px;width:100%;}
.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:100%;}


/* product gallery */
.product-gallery{margin-bottom: 60px; display: flex; gap: 10px; flex-wrap: wrap;}
.product-gallery a{flex-basis: calc(33.333333% - 7px);}
.product-gallery a img{width: 100%; height: 100%; object-fit: cover;}

/* height */
@media screen and (max-height: 820px){
  .banner{height: 650px;}
  
}



@media screen and (max-width: 500px) and (max-height: 770px) {
  header .content .menu-container .menu{padding-top: 100px !important;}
}

@media screen and (max-height: 770px){
  header .content .menu-container .menu.active{max-height: 725px; overflow: auto; padding-bottom: 30px;}
}

/* width */

@media screen and (min-width: 40.375em) {
  .footer__nav > * {flex: 1;}
  .nav__item--extra {flex-grow: 2;}
  .footer__addr {flex: 1 0px;}
  .footer__nav {flex: 2 0px;}
}

@media screen and (max-width: 1024px) {
  .opinions-container .headline{font-size: clamp(1.125rem, 0.835rem + 1.290vw, 2.125rem); line-height: clamp(1.000rem, 0.464rem + 1.905vw, 2.750rem);}
}

@media screen and (max-width: 1110px){

  .banner .text-content .text{margin-left: 0; max-width: 100%;}

  .product-grid{flex-wrap: wrap;}
  .product-grid .product-tile-big{display: none;}
  .product-grid .product-tile a.mobile{display: block;}
  .product-grid .product-tile{justify-content: center;}
}

@media screen and (max-width: 970px) {
  .logos-list{margin-top: 60px; margin-bottom: 60px;}
}

@media screen and (max-width: 960px){
  .animate{opacity: 1 !important;}
  .hamburger{display: flex; z-index: 5;}
  header .content .menu-container{gap: 30px;}
  header .content .menu-container .menu{position: fixed;right: -350px;top: 0;background: white;width: 350px;height: 100vh;padding: 30px 30px;padding-top: 90px;z-index: 1; box-shadow: 1px 1px 10px #cdcdcd; transition: all 150ms; flex-direction: column; align-items: flex-start;}
  header .content .menu-container .menu.active{right: 0;}
  header .content .menu-container .menu .actions{margin-top: 25px; display: flex; flex-direction: column; gap: 15px; width: 100%;}
  header .content .menu-container .menu ul{flex-direction: column; align-items: flex-start;}
  header .content .menu-container .menu .call-us{margin-left: 0; top: 30px; position: relative; max-width: 180px; text-align: center;}
  header .content .menu-container .menu .navigate{display: block; max-width: 180px; text-align: center;}

  header .content .menu-container .menu ul li .dropdown.active{position: relative; box-shadow: none; top: 0; left: 0; opacity: 1; border-left: 1px solid #f4f4f4; height: auto; pointer-events: all; padding: 20px;}
  header .content .menu-container .menu ul li .dropdown{position: relative; top: 0; left: 0; opacity: 0; height: 0; overflow: hidden; transition: all 250ms; padding: 0;}

  .banner .text-content .text{margin-top: 150px;}

  .product-grid{margin-top: 70px;}

  .top-products .content .tabs{flex-wrap: wrap;}

  .services .tiles{flex-wrap: wrap; justify-content: center;}
  .services .tiles .tile{padding: 15px; flex-basis: calc(50% - 10px);}

  .product-grid .product-tile a::before{content: none;}
}

@media screen and (max-width: 767px){

  .pageTitle::before{background-color: #00000070;}

  .product-gallery a{flex-basis: calc(50% - 5px);}
}

@media screen and (max-width: 650px){
  .product-grid .product-tile a{max-width: calc(50% - 10px); max-height: auto; height: auto;}
  .footer__nav > * {margin-left: 0rem;}
  .footer .footer-content .footer-info .logo{background-position: left; width: auto; height: 61px; background-size: contain; aspect-ratio: auto;}
  }

@media screen and (max-width: 601px){

  .pageTitle{height: 340px; margin-bottom: 60px;}

  header .content .menu-container .menu{padding-top: 140px;}
  .banner .text-content .container-grid{padding: 0;}
  .banner .text-content .text{margin: 0; padding: 100px 20px; background-color: #2d2d2d82;}
  .banner{min-height: auto; height: auto;}
  .banner .content .image{display: none;}
  .banner .text-content{position: relative; background-image: url('../images/banner/banner.webp'); background-repeat: no-repeat; background-size: cover;}
  

  .product-grid .product-tile a{max-width: 100%;}

  .product-grid .product-tile a .bb-middle-top, .product-grid .product-tile-big a .bb-middle-top{left: 0;bottom: 0;top: auto;width: fit-content;padding: 10px 40px;border-top-right-radius: 4px;
    background: #e7434e; height: auto;
  }

  .product-grid div a .bb-middle-top h3{display: none;}
  .product-grid div a .bb-middle-top h4{display: none;}
  .product-grid div a .bb-middle-top .mobile{display: block;}


  .top-products .content .tabs{flex-wrap: wrap; gap: 5px; width: 100%;}
  .top-products .content .tabs .tab{width: calc(50% - 5px);}

  .top-products .content .gallery-container .gallery{flex-wrap: wrap; gap: 10px;}
  .top-products .content .gallery-container .gallery.active a{flex-basis: calc(50% - 10px); max-height: 350px;}

  .services .tiles .tile{flex-basis: 100%;}
  
}


@media screen and (max-width: 500px){
  .top-products .content .gallery-container .gallery.active a{flex-basis: 100%; max-height: 54vh; padding: 0 30px; overflow: hidden; border-radius: 4px;}
  .top-products .content .gallery-container .gallery.active a img{border-radius: 4px;}
  .top-products .content .gallery-container .gallery{gap: 20px;}
  
  .opinions-container{padding: 0 15px; background-color: transparent;}
  .opinions-container .wrap .splide__slide .opinion{border: 1px solid #E5E5E6;}
  .opinions-container .splide__arrow--prev{left: auto; right: 55px; bottom: 0; top: auto; border-radius: 8px;}
  .opinions-container .splide__arrow--next{right: auto;top: auto;right: 10px;bottom: 0;border-radius: 8px;}

  .opinions-container .container-grid{padding: 0;}

  .pageTitle .content .title{padding: 0 15px;}
}


@media screen and (max-width: 460px){
  .footer .legal{flex-direction: column-reverse; gap: 20px;}
  .footer .footer-content .footer-info{max-width: 100%;}

  .opinions-container .wrap .splide__slide .opinion{padding: 23px; padding-right: 13px;}
  .opinions-container .wrap .splide__slide .opinion .content,
  .opinions-container .wrap .splide__slide .opinion .content p{font-size: 14px !important;}
  .opinions-container .wrap .splide__slide .opinion .content{max-height: 142px; overflow: scroll; padding-right: 10px;}
}

@media screen and (max-width: 400px){
  header .content .menu-container .menu{width: 310px;}
  .top-products .content .gallery-container .gallery.active a{max-height: 50vh; padding: 0 20px;}
}