@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Arimo:ital,wght@0,400..700;1,400..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');




@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');




@import url('../fonts/franie/stylesheet.css');

@import url('../fonts/stylesheet.css');

:root {

  --albert-sans-font-family: "Albert Sans", sans-serif;
  --franie-regular-font-family: "Franie Regular", sans-serif;
  --franie-light-font-family: "Franie Light", sans-serif;
  --franie-semi-light-font-family: "Franie Semi Light", sans-serif;
  --franie-bold-font-family: "Franie Bold", sans-serif;
  --franie-extra-bold-font-family: "Franie Extra Bold", sans-serif;
  --franie-semi-bold-font-family: "Franie Semi Bold", sans-serif;
  --cabin-font-family: "Cabin", sans-serif;
  --din-pro-bold-font-family: "DIN Pro Bold", sans-serif;

  --white-color: #FFFFFF;
  --dark-color: #313131;
  --gray-color: #D8D8D8;
  --dark-gray-color: #A2A2A2;
  --dark-blue-color: #002139;
  --gray-bg-color: #FAFAFA;
  --gray-bg-color-2: #E5E5E5;
  --navbar-height: 96px;




  --green-color: #38B54A;


  --light-gray-color: #B9B9B9;
  --border-gray-color: #E8E8E8;
  --gray-2-color: #FCFCFC;
  --icon-gray-color: #465254;
}



html {
  font-size: 16px;
}


body {
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: var(--cabin-font-family);
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
}


.text-1half {
  font-size: rem;
}

.text-2 {
  font-size: 2rem;
}

.text-3 {
  font-size: 3rem;
}

.text-4 {
  font-size: 4rem;
}

.text-center {
  text-align: center;
}

.custom-container {
  width: 100%;
  padding: 0 7%
}

.cursor-pointer {
  cursor: pointer;
}

.color-white {
  color: var(--white-color);
}




.header-logo{
	width: %70 !important;
}



.navbar-dropdown {
  background-color: white;
  width: max-content;
  left: -178px;
  font-family: var(--franie-regular-font-family);
  font-size: 1rem;
  top: 2rem;
  padding: 2rem 2rem 3rem 2rem;
  opacity: 0;
  z-index: -99;
  visibility: hidden;
  transition: opacity .2s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.navbar-dropdown-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.navbar-links-wrapper {
  width: auto;
}

.dropdown-title {
  font-family: var(--franie-regular-font-family);
  font-size: 1.3rem;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-color);
  line-height: 3rem;
}


.half-border-container {
  border-left: 1px solid;
  border-top: 1px solid;
  border-bottom: 1px solid;
  width: 85%;
  height: 92%;
}

.half-border-container-wrap {
  width: 10%;
  height: 42%;
  display: flex;
  align-items: flex-end;
}

.half-border-container-content {
  width: 40%;
  height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.t-white-stroke-50 {
  color: transparent;
  font-size: 2rem;
  font-weight: 500;
  -webkit-text-stroke: 1px #ffffff;
  letter-spacing: -4px;
}

.hero-slider-title {
  color: var(--white-color);
  font-size: 3rem;
  font-weight: 500;
}

.hero-slider-title2 {
  color: var(--white-color);
  font-size: 1.1rem;
  font-weight: 200;
}


.home-slick-1-item {
  height: calc(100vh - var(--navbar-height));
  color: white;
  background-repeat: no-repeat;
  background-size: cover;
}

.custom-btn {
  font-size: 1rem;
  font-family: var(--cabin-font-family);
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  color: var(--c);
  background-color: var(--b);
  width: 9rem;
  transition: all .2s ease-in-out;
  height: 3rem;
}

.custom-btn-white {
  --b: var(--white-color)
}

.custom-btn-red {
  --b: #ED1B25;
  --c: #FFFFFF;
  --hover-color: #040045;
}

.custom-btn:hover {
  background-color: var(--hover-color);
}


.custom-btn-dark-blue {
  --b: var(--dark-blue-color);
}



.custom-btn p {
  margin: 0;
}

.custom-btn i {
  opacity: 0;
  margin-bottom: .3rem;
  transform: rotate(45deg);
  transition: all .2s ease-in-out;
}



.custom-transparent-btn {
  border: none;
  outline: none;
  background-color: transparent;
  display: none;
}




.hero-cards-section {
  height: 25vh;
  position: relative;
}

.hero-cards {
  height: 100%;
  position: absolute;
  bottom: 50%;
}

.promation-video-section-play {
  text-decoration: none;
  /* background-color: var(--white-color); */
  /* border: 1px solid white; */
  color: white;
  border-radius: 50%;
  padding: 15px;
  position: relative;
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}


.promation-video-section-play::after {
  position: absolute;
  content: '';
  bottom: -7px;
  top: -7px;
  left: -7px;
  right: -7px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 0px;
  opacity: 1;
  transform-origin: center;
  animation: anim2 800ms linear 600ms infinite;
}

.promation-video-section-play::before {
  position: absolute;
  content: '';
  bottom: -7px;
  top: -7px;
  left: -7px;
  right: -7px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 0px;
  opacity: 0.8;
  transform-origin: center;
  animation: anim 600ms linear 600ms infinite;
}

@keyframes anim {
  from {
    margin: -10px;
    opacity: 1;
  }

  to {
    margin: -20px;
    opacity: 0;
  }
}


@keyframes anim2 {
  from {
    margin: 0px;
    opacity: 1;
  }

  to {
    margin: -10px;
    opacity: 0;
  }
}

.hero-cards2 {
  background-color: #ED1B25;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: var(--cabin-font-family);
  font-weight: 200;
  font-size: 1.3rem;
}

.hero-cards2 img {
  float: inline-end;
}

.hero-cards3 {
  background-color: #040045;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: var(--cabin-font-family);
  font-weight: 200;
  font-size: 1.3rem;
}

.hero-cards3 img {
  float: inline-end;
}

.hero-cards4 {
  background-color: #E0E0E0;
  color: #040045;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: var(--cabin-font-family);
  font-weight: 200;
  font-size: 1.3rem;
}

.hero-cards4 img {
  float: inline-end;
}

/* home section 2 */

.home-section-2-title-1 {
  font-family: var(--cabin-font-family);
  font-size: 2.3rem;
  font-weight: 600;
}

.home-section-2-content {
  font-family: var(--cabin-font-family);
  font-size: 1rem;
  font-weight: 500;
}

.home-section-2-img {
  background-size: cover;
  background-repeat: no-repeat;
}

.home-section-2-img img {
  width: 100%;
  opacity: -1;
}



.parallax-section {
  width: 100%;
  height: 60vh;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 2rem;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
}

.parallax-section .parallax-section-text {
  color: var(--white-color);
  font-size: 3rem;
  padding: .6rem 1.7rem;

}


/* home product section */

.home-product-section-title {
  font-family: var(--cabin-font-family);
  font-weight: 600;
  color: #040045;
  font-size: 2.5rem;
}

.home-product-arrow {
  aspect-ratio: 1/1;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #040045;
}



.product-card {
  width: 20%;
}

.product-card-banner {
  width: 100%;
  height: 100%;
  bottom: 0;
  position: absolute;
  background: linear-gradient(0, #040045a7, #ffffff00 70%);
  z-index: 3;
  opacity: 1;
  transition: all 0.7s ease-in-out;
  display: flex;
  align-items: end;
  color: white;
  padding: 1.4rem;
  font-size: 2rem;
}


.product-card:hover .product-card-banner {
  opacity: 1;
  background: linear-gradient(0, #040045a7, #ffffff00 100%);
}

#home-slick-product .slick-slide {
  margin: 0 20px;
}

.home-slider-2-section {
  color: #FFFFFF;
  font-family: var(--cabin-font-family);
  font-weight: 500;
  font-size: 1rem;
  min-height: 60vh;
  position: relative;
}

.home-slider-2-section-bg {
  background-color: #040045;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 100% 60%, 50% 60%, 50% 100%, 0 100%, 0% 60%, 0 0);
}

.home-slider-2-section-content {
  position: absolute;
}

#home-slider-2 {
  width: 50%;
}

.home-slider-2-item {
  width: 50% !important;
  height: 100% !important;
}



.home-slider-2-section-title {
  font-family: var(--cabin-font-family);
  font-weight: 700;
  font-size: 3rem;
}


.home-slider-2-section-arrows {
  position: absolute;
  top: 60%;
  left: 50%;
  color: #ED1B25;
  font-size: 2.5rem;
  width: 4rem;
  align-items: center;
  z-index: 5;
}

.home-slider-2-img {
  padding-left: 4rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.home-slider-2-alt {
  width: 50%;
  position: absolute;
  bottom: 0;
  color: #ED1B25;
  left: 50%;
  border-bottom: 1px solid #E0E0E0;
}

.home-slider-2-alt p {
  width: 75%;
  padding-left: 4rem;
  padding-bottom: 1rem;
  font-size: .8rem;
}

#home-slider-2-title-alt {
  width: 70%;
}

#home-slider-2-title-alt2 {
  color: #ED1B25;
}

/* hiposan css */


.b-6-box {
  height: 29rem;
  width: 100%;
  display: grid;
  padding: 2rem 0 0 2rem;
  position: relative;
  overflow: hidden;
}

.b-6-box .adobe img {
  width: 3.75rem;
}

.b-6-box .katalog img {
  width: 18rem;
}

.b-6-box .t-white-stroke-160 {
  position: absolute;
  bottom: -5rem;
  left: 0;
}

.b-6-box .t-gray-40,
.b-6-box .t-red-62 {
  line-height: 3.5rem;
}

.t-white-16 {
  font-family: var(--cabin-font-family);
  font-size: 1rem;
  font-weight: 300;
  color: #ffffff;
}

.t-white-30 {
  font-family: var(--cabin-font-family);
  font-size: 1.85rem;
  font-weight: 500;
  color: #ffffff;
}

.t-white-stroke-160 {
  font-family: var(--din-pro-bold-font-family);
  font-size: 10rem;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 0.05rem #ffffff;
}

.t-gray-16-2 {
  font-family: var(--cabin-font-family);
  font-size: 1rem;
  font-weight: 500;
  color: #1C1D22;
}

.t-red-30 {
  font-family: var(--cabin-font-family);
  font-size: 1.87rem;
  font-weight: 600;
  color: #E50019;
}

.t-gray-40 {
  font-family: var(--cabin-font-family);
  font-size: 2.5rem;
  font-weight: 200;
  color: #1C1D22;
}

.t-red-62 {
  font-family: var(--cabin-font-family);
  font-size: 3.85rem;
  font-weight: 600;
  color: #E50019;
}

.bg-blue {
  background-color: #092A5E;
}

.bg-red {
  background-color: #E71B27;
}

.bg-gray {
  background-color: #F7F7F7;
}











.footer-wrap-1 {
  font-size: 1.8rem;
  text-align: right;
  font-family: var(--cabin-font-family);
  border-bottom: 1px solid #B4B4B4;
  padding-bottom: 2rem;
  font-weight: 400;
}

.footer-wrap-2 {
  font-family: var(--cabin-font-family);
  border-bottom: 1px solid #B4B4B4;
  padding-bottom: 8rem;
}


.footer-wrap-2-title {
  font-size: 1.1rem;
  font-family: var(--cabin-font-family);
  font-weight: 600;
}

.footer-wrap-2-text {
  margin-top: 1rem;
  color: #B4B4B4;
  font-size: 1rem;
  font-weight: 300;
}


.footer-wrap-2-navtitle {
  font-size: 1.1rem;
  font-family: var(--cabin-font-family);
  font-weight: 800;
}

.footer-wrap-2-navitem {
  font-size: .9rem;
  font-family: var(--cabin-font-family);
  color: #1C1D22;
  margin-bottom: 1rem;
  margin-top: 1rem;
}


.footer-social {
  display: flex;
  justify-content: end;
  gap: 1rem;
  font-size: 1.6rem;
}

.footerToTopBtn {
  width: 8rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  font-size: 1rem;
  background-color: #032545;
  text-align: center;
  cursor: pointer;
}

.footer-copy {
  padding: 1.5rem 0;
  color: #CBCBCB;
  font-size: .8rem;
  font-family: var(--cabin-font-family);
}



.footer-logo-wrapper {
  width: 25%;
}






@keyframes anim2 {
  from {
    margin: 0px;
    opacity: 1;
  }

  to {
    margin: -10px;
    opacity: 0;
  }
}

@keyframes anim {
  from {
    margin: -10px;
    opacity: 1;
  }

  to {
    margin: -20px;
    opacity: 0;
  }
}


@media screen and (max-width: 1520px) {
  .nav-links {
    gap: 4rem;
  }
}

@media screen and (max-width: 1390px) {
  .nav-links {
    gap: 3rem;
  }

}


@media screen and (max-width: 1366px) {
  .t-white-16 {
    font-size: 1rem;
  }

  .t-white-30 {
    font-size: 1.7rem;
  }

  .b-6-box {
    height: 19rem;
    padding: 1.2rem 0 0 1.2rem;
  }

  .b-6-box .katalog img {
    width: 15rem;
  }

  .b-6-box .t-white-stroke-160 {
    font-size: 8rem;
    bottom: -4rem;
    left: 0;
  }

  .b-6-box .t-red-30 {
    font-size: 1.7rem;
  }

  .b-6-box .t-gray-40 {
    font-size: 1.9rem;
  }

  .b-6-box .t-red-62 {
    font-size: 2.1rem;
  }

  .b-6-box .t-gray-40,
  .b-6-box .t-red-62 {
    line-height: 2rem;
  }

  .b-6-box .adobe img {
    width: 3rem;
  }
}

@media screen and (max-width: 1290px) {
  :root {
    --navbar-height: 114px;
  }

  .nav-links {
    gap: 2rem;
  }

  .navbar-links-wrapper {
    width: 100%;
  }

  .navbar-logo-wrap {
    width: 30%;
    margin: auto;
  }

  .home-section-2-title1 {
    font-size: 1.4rem;
  }


  .home-section-2-title2 {
    font-size: 2.5rem;
  }

  .home-section-4-card {
    width: 22%;
  }
}


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


@media screen and (max-width: 992px) {
  html {
    font-size: 14px;
  }


  :root {
    --navbar-height: 96px;
  }

  .custom-transparent-btn {
    display: block;
    font-size: 1.5rem;
  }

  .nav-links-lang {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .navbar-links-wrapper {
    width: auto
  }

  .navbar-logo-wrap {
    width: fit-content;
    margin: 0;
  }

  .navbar-logo-wrap img {
    width: 75%;
  }

  .t-white-16 {
    font-size: 1rem;
  }

  .b-6-box {
    height: 16rem;
    padding: 1rem 0 0 1rem;
  }

  .b-6-box .adobe img {
    width: 1.9rem;
  }

  .t-white-16 {
    font-size: 1rem;
  }

  .t-white-30 {
    font-size: 1.5rem;
  }

  .b-6-box .katalog img {
    width: 12rem;
  }

  .b-6-box .t-white-stroke-160 {
    font-size: 7rem;
    bottom: -3.5rem;
    left: 0;
  }

  .b-6-box .t-red-30 {
    font-size: 1.5rem;
  }

  .b-6-box .t-gray-40 {
    font-size: 1.7rem;
  }

  .b-6-box .t-red-62 {
    font-size: 1.9rem;
  }

  .b-6-box .t-gray-40,
  .b-6-box .t-red-62 {
    line-height: 1.7rem;
  }





  .home-slider-2-section {
    min-height: 80vh;
  }

  .home-slider-2-section-bg {
    background-color: #040045;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 50% 100%, 0 100%, 0% 60%, 0 0);
  }

  .home-slider-2-section-arrows {
    top: 87%;
    left: 65%;
  }



}




@media screen and (max-width: 768px) {
  html {
    font-size: 13px;
  }

  .navbar-logo-wrap {
    width: 75%;
    margin: 0;
  }

  .navbar-logo-wrap img {
    width: 80%;
  }

  .home-slick-1-item {
    height: calc(65vh - var(--navbar-height));
  }

  .half-border-container-content {
    width: 75%;
  }

  .hero-slider-title {
    font-size: 1.4rem;
  }

  .b-6-box {
    height: 15rem;
    padding: 0.8rem 0 0 0.8rem;
  }

  .b-6-box .adobe img {
    width: 1.7rem;
    margin-right: 0.3rem;
  }

  .t-white-16 {
    font-size: 1rem;
  }

  .t-white-30 {
    font-size: 1.4rem;
  }

  .b-6-box .katalog img {
    width: 10rem;
  }

  .b-6-box .t-white-stroke-160 {
    font-size: 6rem;
    bottom: -3rem;
    left: 0;
  }

  .b-6-box .t-red-30 {
    font-size: 1.4rem;
  }

  .b-6-box .t-gray-40 {
    font-size: 1.5rem;
  }

  .b-6-box .t-red-62 {
    font-size: 1.6rem;
  }

  .b-6-box .t-gray-40,
  .b-6-box .t-red-62 {
    line-height: 1.5rem;
  }

  .footer-wrap-2-text {
    margin-top: .1rem;
  }

  .home-slider-2-section {
    min-height: 80vh;
  }

  .home-slider-2-section {
    min-height: 100vh;
}

  .home-slider-2-section-arrows {
    top: 88%;
    left: 85%;
}

.home-slider-2-section-title {
  font-size: 2rem;
}

.footer-logo-wrapper {
  width: 50%;
}


}




@media screen and (max-width: 576px) {
  html {
    font-size: 12px;
  }

  .nav-links-lang {
    display: none;
  }

  .home-slick-1-item {
    height: calc(55vh - var(--navbar-height));
  }

  .hero-slider-title {
    font-size: 1.2rem;
  }



  .t-white-16 {
    font-size: 1rem;
  }


  .b-6-box {
    min-height: 12rem;
    padding: 0.5rem 0 0 0.5rem;
  }

  .b-6-box .adobe img {
    width: 1.5rem;
    margin-right: 0.2rem;
  }

  .t-white-16 {
    font-size: 1rem;
  }

  .t-white-30 {
    font-size: 1.2rem;
  }

  .b-6-box .katalog img {
    width: 6rem;
  }

  .b-6-box .t-white-stroke-160 {
    font-size: 3.8rem;
    bottom: -2rem;
    left: 0;
  }

  .b-6-box .t-red-30 {
    font-size: 1.2rem;
  }

  .b-6-box .t-gray-40 {
    font-size: 1.3rem;
  }

  .b-6-box .t-red-62 {
    font-size: 1.5rem;
  }

  .b-6-box .t-gray-40,
  .b-6-box .t-red-62 {
    line-height: 1.5rem;
  }


  .footer-wrap-1 {
    font-size: 1.2rem;
}

}

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

  .hero-slider-title {
    font-size: 1rem;
  }

  .hero-cards {

    bottom: 20%;
  }




}


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