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

:root{
    --Night-Black: #0E0F12;
    --Palatine-Blue: #0038FF;
    --Brandeis-Blue: #1C79FF;
    --Light-Grey: #EBECF0;
    --White: #FAFAFC;
    --Mid-Grey: #EDEEF2;
    --Dark-Grey: #8C8F9D;

}
body{
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
    overflow-x: hidden;
    background-color: var(--White);
}

main{
  background: 
  radial-gradient(circle at 110% 40%, #0037ff1e, #0e0f1200 25%),
  radial-gradient(circle at -40% 70%, #0037ff28, #0e0f1200 30%),
  radial-gradient(circle at 150% 100%, #0037ff28, #0e0f1200 30%);
}

/* Animations */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    opacity: 0;
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fadein {
    opacity: 0;
}


h1{
    font-size: clamp(2.6rem, 2.1658rem + 2.3158vw, 4.25rem);
    font-weight: 700;
    line-height: 1.4;
}
h2{
  font-size: clamp(2.35rem, 2.0474rem + 1.614vw, 3.5rem);
  font-weight: 700;
  line-height: 1.4;
}
  h3{
  font-size: clamp(2rem, 1.7368rem + 1.4035vw, 3rem);
  font-weight: 700;
  line-height: 1.4;
}
h4{
  font-size: clamp(1.75rem, 1.6184rem + 0.7018vw, 2.25rem);
  font-weight: 700;
  line-height: 1.6;
}
h5{
  font-size: clamp(1.375rem, 1.3092rem + 0.3509vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
}
h6{
  font-size: clamp(1.125rem, 1.0592rem + 0.3509vw, 1.375rem);font-size: clamp(1.125rem, 1.0592rem + 0.3509vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
}

p{
  font-size: clamp(1rem, 0.9671rem + 0.1754vw, 1.125rem);
  font-weight: 400;
  line-height: 2;
  max-width: 900px;
}

.mw-450{
  max-width: 480px;
}
.mg-btm-16{
  margin-bottom: 16px;
}
.hero-textbox{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 60px;
  justify-content: center;
  align-items: center;
}
.hero-bg{
  background-image: url(img/pattern-hero.svg);
  background-size: cover;
}
.hero-mockup{
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  margin-top: 20px;
}

.img-hero{
  max-height: 44dvh;
}
.section-1{
  background: rgb(235,240,255);
  background: linear-gradient(0deg, rgba(235,240,255,1) 0%, rgba(250,250,252,1) 62%);
}

.button-outline{
  padding: 18px 36px;
  background-color: transparent;
  border: 2px solid var(--Palatine-Blue);
  justify-content: center;
  border-radius: 50px;
  cursor: pointer;
  width: max-content;
  color: var(--Palatine-Blue);
  margin: 30px auto;
  display: flex;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  gap: 10px;
  transition: all ease 300ms;
}

.button-outline:hover{
  background-color: var(--Palatine-Blue);
  color: var(--White);
}

.button-outline:hover .store-icon {
  fill: var(--White);
}

.store-icon{
  height: 23px;
  width: auto;
  fill: var(--Palatine-Blue);
}


.sheet-hero{
  height: max-content;
  padding: 60px 60px 0px 60px;
  max-width: 1400px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: auto;
}

.sheet-basic{
  height: 100vh;
  padding: 0 40px;
  max-width: 1400px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: auto;
}

.sheet-small{
  height: 300px;
  max-width: 1400px;
  display: flex;
  padding: 50px 60px;
  align-items: center;
  justify-content: space-between;
  margin: auto;
}
.sheet-half{
  height: max-content;
  max-width: 1400px;
  margin: auto;
  padding: 300px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-flex{
  height: max-content;
  max-width: 1400px;
  padding: 0px 60px;
  margin: auto;
  display: flex;
  padding-bottom: 300px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sheet-box{
  height: max-content;
  max-width: 1400px;
  padding: 0px 60px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.end{
  justify-content: end;
}
.apartment{
  position: absolute;
  left: 26%;
  height: 160px;
  width: auto;
  border-radius: 22px;
  -webkit-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  -moz-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
}
.merac{
  position: absolute;
  left: 15%;
  bottom: 5%;
  height: 90px;
  width: auto;
  border-radius: 22px;
  -webkit-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  -moz-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
}
.vodomer{
  position: absolute;
  right: 19%;
  height: 90px;
  width: auto;
  border-radius: 22px;
  -webkit-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  -moz-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
}

.ubytovna{
  position: absolute;
  right: 15%;
  bottom: 10%;
  height: 100px;
  width: auto;
  border-radius: 22px;
  -webkit-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  -moz-box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
  box-shadow: 0px 42px 56px -9px rgba(23, 37, 94, 0.24);
}

.ui-box{
  scale: 1;
  transition: all 300ms ease;
}

.ui-box:hover{
 transform: scale(1.1);
}

.benefit-container{
  background-color: var(--Palatine-Blue);
  background-image: url(img/pattern.png);
  background-size: cover;
  border-radius: 36px;
  color: var(--White);
  width: 100%;
  height: 500px;
  padding: 80px 32px 0px;
  justify-content: center;
}
.benefit-row{
  display: flex;
  gap: 34px;
  width: 100%;
  justify-content: center;
  margin-top: 80px;
  
}
.benefit-box{
  display: flex;
  height: 480px;
  width: 380px;
  background: linear-gradient(0deg, rgba(235,240,255,1) 0%, rgba(250,250,252,0) 62%);
  background-color: var(--Light-Grey);
  color: var(--Night-Black);
  padding: 30px 30px 0px 30px;
  border-radius: 30px;
  flex-direction: column;
  align-items: center;
}
.benefit-box-center{
  display: flex;
  height: 480px;
  width: 380px;
  background: linear-gradient(0deg, rgba(235,240,255,1) 0%, rgba(250,250,252,0) 62%);
  background-color: var(--Light-Grey);
  color: var(--Night-Black);
  padding: 30px;
  border-radius: 30px;
  flex-direction: column;
  align-items: center;
}

.benefit-img{
  width: 65%;
  height: auto;
}
.benefit-title{
  flex: 1;
  align-items: center;
  display: flex;
}

.platform-container{
  background-color:#Ffffff;
  border-radius: 36px;
  padding: 60px;
  width: 100%;
  height: 70vh;
  display: flex;
  margin: auto;
}

.platform-icon{
  width: auto;
  height: 40px;
}
.img-box{
  display: flex;
  height: 100%;
  width: 50%;
  justify-content: center;
  object-fit: cover;
  align-items: center;
}

.img-box-r{
  display: flex;
  height: 100%;
  width: 50%;
  justify-content:end;
  object-fit: cover;
}


.dashboard{
 width: 80%;
 height: auto;
 object-fit: contain;
 margin: auto;

}
.dgrey{
  color: var(--Dark-Grey);
}

.blue{
  color: var(--Palatine-Blue);
}
.center{
  text-align: center;
}
.text-box{
  width: 50%;
  gap: 16px;
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: center;
}

.stats-row{
  display: flex;
  gap: 80px;
  margin-top: 80px;
}
.stats-box{
  display: flex;
  flex-direction: column;
}

.monter-box{
  background: linear-gradient(0deg, rgba(235,240,255,1) 0%, rgba(250,250,252,0) 62%);
  background-color: var(--Light-Grey);
  border-radius: 36px;
  width: 80%;
  max-height: 500px;
  display: flex;
  align-items: end;
  justify-content: center;

}
.monter-img{
  width: 90%;
  height: auto;
}
.feature-row{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}
.arrow-container{
  display: flex;
  gap: 14px;
}
.arrow-left{
  padding:13px 26px;
  display: flex;
  height: max-content;
  border-radius: 50vmax;
  align-items: center;
  width: max-content;
  border: 2px solid var(--Palatine-Blue);
  cursor: pointer;
}
.arrow-right{
  padding:14px 26px;
  display: flex;
  height: max-content;
  border-radius: 50vmax;
  align-items: center;
  width: max-content;
  background-color: var(--Palatine-Blue);
  cursor: pointer;
}


.feature-slider::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px; 
  background: linear-gradient(to right, rgba(255,255,255,0), rgb(250, 250, 252));
  pointer-events: none; 
  z-index: 1; 
}


.feature-slider{
  width: 100%;
  position: relative;
  height: max-content;
  margin-top: 50px;
  display: flex;
  overflow: hidden;
  gap: 30px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.feature-slider::-webkit-scrollbar {
  display: none;
}

.feature-wrapper{
  display: flex;
  background: #Ffffff;
  flex-direction: column;
  padding: 30px;
  height: 480px;
  min-width: 480px;
  border-radius: 30px;
}

.feature-img{
  width: 300px;
  height: auto;
}

.feature-img-half{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.feature-text-half{
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.version-container{
  display: flex;
  margin: 50px 0px;
}

.version-box{
  justify-content: center;
  gap: 80px;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.mockup-img{
  max-height: 600px;
}

.function-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  padding: 40px;
}
.function-box{
  display: flex;
  gap: 6px;
  flex-direction: column;
  max-width: 250px;
  text-align: left;
}
.function-icon-container{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D6DFFF;
  width: 50px;
  height: 50px;
  padding: 14px;
  border-radius: 16px;
  margin-bottom: 10px;
}
.function-icon{
  height: 30px;
  width: 30px;
}
.text-half-space{
  display: flex;
  width: 100%;
  gap: 50px;
  justify-content: space-between;
}
/* Button slider */

.navigation {
  position: relative;
  display: inline-flex;
  background: var(--White);
  padding: 10px 4px;
  border-radius: 50px;
  border: 2px solid #D6DFFF;
  font-size: 18px;
  font-weight: 500;
}

.navigation__active-state {
  position: absolute;
  background: var(--Palatine-Blue);
  height: calc(100% - 8px);
  width: 80px;
  border-radius: 50px;
  top: 4px;
  left: 4px;
  opacity: 0;
  color: var(--White);
  transition: left 0.4s ease-out, width 0.4s ease-out,
  opacity 0.4s ease-out 0.4s;

}

.navigation__btn {
  cursor: pointer;
  color: #D6DFFF;
  padding: 10px 20px 10px 24px;
  transition: color 0.3s ease-out;
  z-index: 1;
  margin-right: 5px;
}

.navigation__btn:last-child {
  margin-right: 4px;
}

.navigation__btn:hover {
  color: var(--Palatine-Blue);
}

.navigation__btn--active {
  pointer-events: none;
}
/* Button slider */

.cta-title{
  max-width: 900px;
}


@media only screen and (min-width: 1740px)  {
.apartment{
  left: 28%;
}
.merac{
  left: 20%;
  bottom: 7%;
}
.vodomer{
  right: 22%;
}
.ubytovna{
  right: 20%;
  bottom: 10%;
}

}

@media only screen and (min-width: 1281px)  and (max-width: 1640px) {
.apartment{
    left: 22%;
}
.merac{
  left: 10%;
}
.vodomer{
  right: 10%;
}
.ubytovna{
  right: 6%;
  bottom: 10%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .apartment{
    left: 18%;
}
.merac{
  left: 10%;
  height: 80px;
}
.vodomer{
  right: 10%;
  bottom: 30%;
  height: 80px;
}
.ubytovna{
  right: 10%;
  bottom: 10%;
  height: 80px;
}
}

@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    .sheet-small{
      height: 30vh;
    }
    .sheet-basic{
      height: 70vh;
      padding: 40px 26px;
    }
    .sheet-hero{
      height: max-content;
      padding: 60px 26px 0px 26px;
    }
    .sheet-flex{
     padding: 100px 26px;
    }
    .sheet-half{
      padding: 200px 26px;
    }
    .apartment{
      display: none;
    }
    .merac{
      display: none;
    }
    .vodomer{
      display: none;
    }
    .ubytovna{
      display: none;
    }
    .stats-row{
      gap: 30px;
    }
    .hero-bg{
      background-image: url(img/pattern-hero.svg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .function-grid{
      padding: 0px;
    }
    .platform-container{
      height: max-content;
    }
    .img-box{
      height: auto;
    }
    .dashboard{
      width: 100%;
      padding-right: 40px;
    }
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {

  .hero-bg{
    background-image: url(img/pattern-hero.svg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .apartment{
    left: 6%;
    height: 130px;
}
.merac{
  left: 2%;
  height: 70px;
}
.vodomer{
  right: 2%;
  bottom: 30%;
  height: 70px;
}
.ubytovna{
  right: 2%;
  bottom: 10%;
  height: 60px;
}

.benefit-img{
  width: 90%;
  height: auto;
}
.stats-row{
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
.version-box{
  justify-content: center;
  gap: 40px;
  padding: 0px 30px;
  flex-wrap: wrap;
}
.mockup-img {
  height: 80vw;
}
.benefit-box{
  height: 460px;
  gap:30px;
}
.benefit-box-center{
  height: 460px;
  gap:30px;
}
}
@media only screen  and (min-width: 480px) and (max-width: 768px) {
  
  main{
    background: 
    radial-gradient(circle at 110% 40%, #0037ff1e, #0e0f1200 25%),
    radial-gradient(circle at -40% 70%, #0037ff28, #0e0f1200 12%);
  }
  .platform-icon{
    width: auto;
    height: 34px;
  }
  
  .apartment{
    display: none;
  }
  .merac{
    display: none;
  }
  .vodomer{
    display: none;
  }
  .ubytovna{
    display: none;
  }
.img-hero{
  max-height: 44vh;
}
.hero-mockup{
  margin-top: 50px;
}
.sheet-small{
  height: 60vh;
}
.sheet-basic{
  height: max-content;
  padding:  60px 26px;
}
.sheet-hero{
  height: max-content;
  padding: 80px 26px 0px 26px;
}

.sheet-half{
  padding: 60px 26px;
  flex-wrap: wrap-reverse;
  gap: 20px;
}
.sheet-flex{
  padding: 80px 26px;
}
.sheet-box{
  padding: 0px 26px;
}
.dashboard{
  width: 100%;
}

.text-half-space{
  width: 100%;
  gap: 40px;
  flex-wrap: wrap;
}
.stats-row{
  margin-top: 20px;
}
.monter-box{
  width: 100%;
  max-height: 500px;
}
.feature-row{
  flex-wrap: wrap;
  gap: 30px;
}
.platform-container{
  flex-wrap: wrap;
  height: max-content;
  gap: 40px;
}
.img-box{
  width: 100%;
}
.img-box-r{
  width: 100%;
}
.text-box{
  width: 100%;
}
.benefit-container{
  height: max-content;
  padding: 80px 32px 32px;
  border-radius: 50px;
}
.benefit-row{
  flex-wrap: wrap;
}
.feature-wrapper{
  padding: 30px;
  height: 400px;
  width: 360px;
  min-width: unset; 
  border-radius: 40px;
}

.feature-img{
  width: 100%;
  max-width: 200px;
  height: auto;
}

.version-box{
  flex-wrap: wrap;
  gap: 30px;
}
.monter-img{
  width: auto;
  max-height: 450px;
  height: auto;
}
.mockup-img{
  height: 80vw;
}

}
@media only screen and (min-width: 280px) and (max-width: 480px) {

  main{
    background: 
    radial-gradient(circle at 110% 40%, #0037ff1e, #0e0f1200 25%),
    radial-gradient(circle at -40% 70%, #0037ff28, #0e0f1200 12%);
  }
  .hero-bg{
    background-image: url(img/pattern-hero.svg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .platform-icon{
    width: auto;
    height: 33px;
  }
  .apartment{
    display: none;
  }
  .merac{
    display: none;
  }
  .vodomer{
    display: none;
  }
  .ubytovna{
    display: none;
  }
.img-hero{
  max-height: 30vh;
}
.hero-mockup{
  margin-top: 50px;
}
.sheet-small{
  height: 60vh;
}
.sheet-basic{
  height: max-content;
  padding:  60px 26px;
}
.sheet-hero{
  height: max-content;
  padding: 80px 26px 0px 26px;
}

.sheet-half{
  padding: 60px 26px;
  flex-wrap: wrap-reverse;
  gap: 20px;
}
.sheet-flex{
  padding: 50px 26px;
}
.sheet-box{
  padding: 0px 26px;
}
.dashboard{
  width: 100%;
}

.text-half-space{
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
}
.stats-row{
  margin-top: 20px;
  gap: 10px;
}
.monter-box{
  width: 100%;
  max-height: 500px;
}
.feature-row{
  flex-wrap: wrap;
  gap: 20px;
}
.platform-container{
  flex-wrap: wrap;
  height: max-content;
  gap: 40px;
  padding: 30px;
}
.img-box{
  width: 100%;
}
.img-box-r{
  width: 100%;
}
.text-box{
  width: 100%;
  gap: 12px;
}
.benefit-container{
  height: max-content;
  padding: 80px 32px 32px;
  border-radius: 50px;
  background-size: cover;
}
.benefit-row{
  flex-wrap: wrap;
}
.feature-wrapper{
  padding: 30px;
  height: 450px;
  width: 84vw;
  min-width: unset; 
  border-radius: 40px;
}
.feature-slider::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px; 
  background: transparent;
  pointer-events: none; 
  z-index: 1; 
}

.feature-img{
  width: 100%;
  max-width: 200px;
  height: auto;
}

.version-box{
  flex-wrap: wrap;
  gap: 30px;
}
.monter-img{
  width: 100%;
  height: auto;
  padding: 0px 10px;
}
.benefit-img{
  width: 90%;
  height: auto;
}

.benefit-box{
  height: max-content;
  width: 100%;
  gap: 30px;
}

.benefit-box-center{
  height: max-content;
  width: 100%;
  gap: 30px;
}
.mockup-img{
  width: 80%;
}
.function-grid{
  padding: 0px;
  grid-column-gap: 34px;
  grid-row-gap: 34px;

}

.button-outline{
  padding: 14px 22px;
  font-size: 16px;
}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    .sheet-small{
      height: 100vh;
    }
    .sheet-basic{
      height: 800px;
      padding: 40px 26px;
    }
    .sheet-hero{
      height: max-content;
      padding: 80px 26px 0px 26px;
    }
    .sheet-flex{
     padding: 100px 26px;
     height: 1200px;
    }
    .sheet-half{
      padding: 200px 26px;
    }
    .apartment{
      display: none;
    }
    .merac{
      display: none;
    }
    .vodomer{
      display: none;
    }
    .ubytovna{
      display: none;
    }
    .stats-row{
      gap: 30px;
    }
    .hero-bg{
      background-image: url(img/pattern-hero.svg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .function-grid{
      padding: 0px;
    }
    .platform-container{
      height: max-content;
    }
    .img-box{
      height: auto;
    }
    .dashboard{
      width: 100%;
      padding-right: 40px;
    }


}




/* Header section */

header {
    background-color: rgba(237, 238, 242, 0.0);
    -webkit-backdrop-filter: blur(16px);
     backdrop-filter: blur(16px);
    color: var(--Night-Black);
    display: flex;
    align-items: center;
    position: fixed;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    transition: all 200ms ease-in-out;
}
header.scrolled {
  background-color: rgba(237, 238, 242, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.header-sheet{
    max-width: 1440px;
    flex-direction: row;
    display: flex;
    width: 100%;
    padding: 12px 60px;  
}
header .logo {
    flex: 1;
    align-items: center;
    display: flex;
}
.logo-img {
    height: 18px;
    width: auto;
}
.button-login{
  width: auto;
  height: max-content;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 1.125rem;
  border: 2px solid var(--Palatine-Blue);
  border-radius: 50vmax;
  text-decoration: none;
  transition: all 0.2s ease;
  color: var(--Palatine-Blue);
}

.button-login:hover{
  background-color: var(--Palatine-Blue);
  color: var(--White);
}

.header-link{
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--Night-Black);
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-link:hover {
    color: var(--Palatine-Blue);
    text-decoration: none;
    transition: all 100ms ease-in-out;
 
}
#hamburger {
display: none;
}

#hamburger.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#hamburger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

@media screen and (min-width: 768px) and (max-width:1080px){

.header-link{
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.logo-img {
    height: 14px;
    width: auto;
}
.button-login{
  font-size: 1rem;
}


}


/* Základné štýly pre skryté menu */

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

    .header-sheet{
        padding: 0px 30px;
    }

    .logo-img {
        height: 24px;
        width: auto;
    }

    .nav-links {
        flex-direction: column;
        position: absolute;
        display: flex;
        align-items: center;
        margin: auto;
        top: 0px;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0s ease-in-out, visibility 0s linear 0.2s;
        text-align: center;
        background-color: rgba(237, 238, 242, 0.6);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px); 
  
    }
    
    #hamburger {
        display: block;
    }
    
    #hamburger span {
        display: block;
        width: 28px;
        height: 3px;
        background-color: var(--Night-Black);
        margin: 7px auto;
        transition: 0.3s;
        border-radius: 2px;
    }

    .menu-open {
        height: 100vh; 
        justify-content: center;
        display: flex;
        align-items: center;
        background-color: rgba(237, 238, 242, 1);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease-in-out, visibility 0s linear 0s;
    } 


    .nav-links a {
        font-size: 1.8rem;
        margin: 0px auto;
    }


.container {
    cursor: pointer;
    display: flex;
    width: auto;
    margin-right: -20px;
 
  }
  svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .active svg {
    transform: rotate(90deg);
  }
  path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  path:nth-child(1) {
    transform-origin: 36% 40%;
  }
  path:nth-child(2) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(3) {
    transform-origin: 35% 63%;
  }
  path:nth-child(4) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(5) {
    transform-origin: 61% 52%;
  }
  path:nth-child(6) {
    transform-origin: 62% 52%;
  }
  .active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  .active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  
}

@media screen and (max-width: 325px){
    .logo-img {
        height: 18px;
        width: auto;
    }

    

}


/* End of Header section */



/* Footer section */

.section-f{
  background-color: var(--Palatine-Blue);
  color: var(--White);
}
.caption-footer{
  color: var(--White);
}
.sheet-footer{
  max-width: 1440px;
  width: 100%;
  padding: 60px;
  display: flex;
  align-items: center;
  margin: auto;
  flex-direction: column;
  
}
.link-row{
  display: flex;
  width: 100%;
  margin-right: 0px;
  justify-content: end;
}
.link-box{
  margin: 0 30px;
}

.link-text{
  transition: color 100ms ease-in-out;
  color: var(--White);
  text-decoration: none;
}

.link-text:hover{
  color: var(--Brandeis-Blue);
}

.row-1{
  display: flex;
  width: 100%;
  flex: 1;
  margin-bottom: 100px;
}
.row-1-box{
  display: flex;
  flex-direction: row;
  width: 100%;
}
.mobile-flex{
  display: flex;
}

.backtop-box{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-right: 0px;
  margin-left: 40px;
  
}
.button-top{
  background-color: var(--White);
  display: flex;
  flex-direction: column;
  height: 45px;
  border-radius: 50px;
  width: 120px;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.arrow-up{
  transition: transform 200ms ease-in-out;
}

.button-top:hover .arrow-up{
  transform: translateY(-4px);
}

.row-2{
  display: flex;
  width: 100%;
  flex: 1;
  margin-bottom: 70px;
}

.social-icon-row{
  display: flex;
  gap: 20px;
  width: max-content;
  align-items: end;
}
.social-icon{
  transition: transform 200ms ease-in-out;
}

.social-icon:hover{
  transform: scale(1.1);
}
.logo-footer-box{
  height: max-content;
  display: flex;
  justify-content: end;
  width: 100%;
}
.logo-footer{
  width: 75%;
}
.row-3{
  display: flex;
  width: 100%;
  flex: 1;
}

.rights-text{
  margin-right: auto;
  margin-left: 0px;
}
.link-mail{
  color: var(--White);
  text-decoration: none;
}
.link-tel{
  color: var(--White);
  text-decoration: none;
  margin-top: 14px;
}




@media only screen and (max-width: 360px) {
  .link-box:nth-child(2) {
      order: 3;
      width: 175px;
      margin: 0 calc(30vw - 150px) 0 0;
    }
}

@media only screen and (min-width: 300px) and (max-width: 510px) {

  .sheet-footer{
      padding: 60px 28px;
  }
  .row-1{
      margin-bottom: 50px;
  }
  .link-row{
    justify-content: end;
    margin-bottom: 30px;
    flex-wrap: wrap;

  }
  .link-box{
      margin: 0 10px 0 0;
  }
  .link-box:nth-child(1) {
      order: 1;
      width: calc(50% - 10px);
      margin-bottom: 30px;
  }
  .link-box:nth-child(2) {
      order: 3;
      width: calc(50% - 10px);
  }
  .link-box:nth-child(3) {
      order: 4;
      margin-right: 0px;
      width: auto;
      margin-left: auto;
  }
  .backtop-box:nth-child(4) {
      order: 2;
      width: auto;
      margin-left: auto;
  }

  .button-top{
      margin: 0 auto 0 auto;
  }


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

  .row-2{
     flex-wrap: wrap;
     margin-bottom: 50px;
  }
  
  .social-icon-row{
      margin-bottom: 50px;
  }

  .logo-footer-box{
      justify-content: start;
  }
  .logo-footer{
      width: 100%;
  }
  .row-3{
      flex-wrap: wrap;
  }
 

}



@media only screen  and (min-width: 480px) and (max-width: 768px) {
  .row-1{
      margin-bottom: 50px;
  }
  .link-row{
      justify-content: end;
      margin-bottom: 30px;
      flex-wrap: wrap;
  }
  .link-box:nth-child(1) {
      order: 1;
      width: 175px;
      margin-bottom: 30px;
    }
    .link-box:nth-child(2) {
      order: 3;
      width: 175px;
      margin: 0 calc(30vw - 130px) 0 0;
    }
    .link-box:nth-child(3) {
      order: 4;
      margin-right: 0px;
      width: 175px;
      margin-left: auto;
    }
    .backtop-box:nth-child(4) {
      order: 2;
      width: 175px;
      margin-left: auto;
    }

    .button-top{
      margin: 0 auto 0 auto;
    }
 
  .link-box{
      margin: 0 30px 0 0;
  }

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

  .row-2{
     flex-wrap: wrap;
  }
  
  .social-icon-row{
  margin-bottom: 50px;
  }

  .logo-footer-box{
      justify-content: start;
  }
  .logo-footer{
      width: 100%;
  }
  .row-3{
      flex-wrap: wrap;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .row-1{
      margin-bottom: 50px;
  }
  .link-row{
      justify-content: space-between;
      margin-bottom: 30px;
     
  }
  .link-box{
      margin: 0 30px 0 0;
  }

  .row-1-box{
      flex-direction: column-reverse;
      width: 100%;
  
  }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .row-1-box{
      flex-direction: row;
      width: 100%;
  }
  .link-row{
    justify-content: end;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

  }

/* End of Footer section */


/* Made by worq. */
.worq-container{
  display: flex;
  width: 100%;
  justify-content: center;
  height: max-content;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  margin-top: 30px;
  background: #0035F0;
}
.text-worq{
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--White);
}
.logo-worq{
  height: 20px;
  width: auto;
  margin-top: 6px;
}
/* Made by worq. */