@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Funnel Display", sans-serif;
}

html, body {
  scroll-behavior: smooth;
  background: #ECE9E1;
}

h2.h2 {
  font-size: 70px;
  color: #0F0D08;
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1600px) {
  h2.h2 {
    font-size: 55px;
  }
}
@media only screen and (max-width: 1300px) {
  h2.h2 {
    font-size: 45px;
  }
}
@media only screen and (max-width: 900px) {
  h2.h2 {
    font-size: 38px;
  }
}
@media only screen and (max-width: 700px) {
  h2.h2 {
    font-size: 27px;
  }
}
h4.h4 {
  font-size: 20px;
  color: #0F0D08;
  font-weight: 300;
  text-align: center;
}

@media only screen and (max-width: 1600px) {
  h4.h4 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 1300px) {
  h4.h4 {
    font-size: 16px;
  }
}
@media only screen and (max-width: 900px) {
  h4.h4 {
    font-size: 15px;
  }
}
@media only screen and (max-width: 700px) {
  h4.h4 {
    font-size: 14px;
  }
}
header {
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}
header .logo img {
  height: 2.5rem;
}
header .right_nav {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 55px;
}
header .right_nav nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
header .right_nav nav.navigation__menu {
  gap: 35px;
}
header .right_nav nav a {
  font-size: 17px;
  color: #0F0D08;
  font-weight: 300;
  text-decoration: none;
  position: relative;
  transition: 0.25s ease;
}
header .right_nav nav a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: #0F0D08;
  opacity: 0;
  transition: 0.25s ease;
}
header .right_nav nav a.active, header .right_nav nav a:hover {
  font-weight: 600;
}
header .right_nav nav a.active::after, header .right_nav nav a:hover::after {
  opacity: 1;
}
header .ham {
  display: none;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
}
header .ham svg {
  height: 35px;
  width: 35px;
  color: #000;
  stroke-width: 2.5;
}
header .logout__btn {
  background: none;
  border: none;
}
header .logout__btn a {
  color: #000;
  text-decoration: none;
}
header .logout__btn a svg {
  color: #000;
  height: 30px;
  width: 30px;
}

.offcanvas {
  display: none;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  transition: 0.5s ease-in-out;
  z-index: 40;
  background: #0F0D08;
  overflow: hidden;
}
.offcanvas .circle {
  height: 700px;
  width: 700px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
}
.offcanvas .circle.purple {
  background: #F72A62;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.offcanvas .circle.yellow {
  background: #FFCD60;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}
.offcanvas .circle.blue {
  background: #62A9D4;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}
.offcanvas #close__offcanvas {
  position: absolute;
  top: 25px;
  right: 25px;
  background: none;
  border: none;
  z-index: 4;
}
.offcanvas #close__offcanvas svg {
  height: 35px;
  width: 35px;
  color: #fff;
  stroke-width: 2.5;
}
.offcanvas .offcanvas__content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  backdrop-filter: blur(50px);
  background: rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 3;
}
.offcanvas .offcanvas__content a {
  display: block;
  width: 80%;
  text-align: center;
  color: #fff;
  padding: 1rem 0;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 2px solid #fff;
}
.offcanvas .offcanvas__content a:last-child {
  border-bottom: none;
}
.offcanvas .offcanvas__content .offcanvas-active {
  text-decoration: underline;
}

@media only screen and (max-width: 1300px) {
  header .logo img {
    height: 2rem;
  }
  header .right_nav {
    gap: 20px;
  }
  header .right_nav nav {
    gap: 10px;
  }
  header .right_nav nav.navigation__menu {
    gap: 15px;
  }
  header .right_nav nav a {
    font-size: 15px;
  }
  header .right_nav .btn {
    font-size: 14px;
  }
}
@media only screen and (max-width: 900px) {
  header .logo {
    font-size: 1.5em;
  }
  header .right_nav nav.navigation__menu, header .right_nav .btn {
    display: none;
  }
  header #ham {
    display: flex;
  }
  .offcanvas {
    display: flex;
  }
}
@media only screen and (max-width: 700px) {
  header {
    padding: 0 10%;
  }
  header nav {
    display: none;
  }
  header .ham {
    display: flex;
  }
}
footer {
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer .logo img {
  height: 50px;
}
footer nav {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 35px;
}
footer nav a {
  font-size: 18px;
  color: #0F0D08;
  text-decoration: none;
}

@media only screen and (max-width: 1300px) {
  footer .logo img {
    height: 40px;
  }
  footer nav a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 900px) {
  footer .logo img {
    height: 35px;
  }
  footer nav a {
    font-size: 14px;
  }
}
@media only screen and (max-width: 700px) {
  footer {
    flex-flow: column;
    gap: 15px;
  }
  footer .logo img {
    height: 30px;
  }
  footer nav {
    flex-flow: column;
    gap: 15px;
  }
  footer nav a {
    font-size: 14px;
  }
}
.btn {
  background: #F72A62;
  padding: 12px 15px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  border-radius: 7px;
  transition: 0.25s ease !important;
  border: none;
  outline: none;
}
.btn:hover {
  transform: scale(1.05) !important;
}
.btn.second {
  background: #62A9D4;
}
.btn.soon {
  background: #FFCD60;
  color: #0F0D08;
  cursor: not-allowed;
}
.btn.soon:hover {
  transform: none !important;
}

.hero {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-flow: column;
  padding: 50px 7.5% 350px;
  position: relative;
  overflow: hidden;
}
.hero h2 {
  font-size: 20px;
  font-weight: 400;
  color: #0F0D08;
}
.hero .main__heading {
  position: relative;
  margin: 35px 0 35px;
}
.hero .main__heading h1 {
  font-size: 150px;
  text-align: center;
  line-height: 1em;
  font-weight: 900;
  color: #0F0D08;
}
.hero .main__heading h1 .border {
  color: transparent;
  -webkit-text-stroke: 2px rgba(15, 13, 8, 0.6);
  paint-order: stroke fill;
}
.hero .main__heading .dot {
  border-radius: 50%;
  position: absolute;
}
.hero .main__heading .dot.yellow {
  background: #FFCD60;
  height: 29px;
  width: 29px;
}
.hero .main__heading .dot.yellow.hp {
  top: 22px;
  left: 454px;
}
.hero .main__heading .dot.yellow.weby {
  top: 22px;
  left: 576px;
}
.hero .main__heading .dot.yellow.eshopy {
  top: 22px;
  left: 543px;
}
.hero .main__heading .dot.yellow.sablony {
  top: 22px;
  left: 586px;
}
.hero .main__heading .dot.yellow.servis {
  top: 22px;
  left: 516px;
}
.hero .main__heading .dot.yellow.portfolio__dot {
  top: 22px;
  left: 717px;
}
.hero .main__heading .dot.yellow.thanks {
  top: 22px;
  left: 548px;
}
.hero .main__heading .dot.blue {
  background: #62A9D4;
  height: 23px;
  width: 23px;
}
.hero .main__heading .dot.blue.hp {
  left: 1049px;
  top: 87px;
}
.hero .main__heading .dot.blue.weby {
  top: 88px;
  left: 300px;
}
.hero .main__heading .dot.blue.eshopy {
  top: 88px;
  left: 266px;
}
.hero .main__heading .dot.blue.sablony {
  top: 88px;
  left: 308px;
}
.hero .main__heading .dot.blue.servis {
  top: 88px;
  left: 240px;
}
.hero .main__heading .dot.blue.portfolio__dot {
  top: 89px;
  left: 352px;
}
.hero .main__heading .dot.blue.thanks {
  display: none;
}
.hero .main__heading .dot.purple {
  background: #F72A62;
  height: 29px;
  width: 29px;
}
.hero .main__heading .dot.purple.hp {
  top: 105px;
  left: 1290px;
}
.hero .main__heading .dot.purple.weby {
  top: 103px;
  left: 1080px;
}
.hero .main__heading .dot.purple.eshopy {
  top: 103px;
  left: 1050px;
}
.hero .main__heading .dot.purple.sablony {
  top: 103px;
  left: 1090px;
}
.hero .main__heading .dot.purple.servis {
  top: 103px;
  left: 1020px;
}
.hero .main__heading .dot.purple.portfolio__dot {
  top: 103px;
  left: 860px;
}
.hero .main__heading .dot.purple.thanks {
  top: 103px;
  left: 590px;
}
.hero .under__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.hero .under__header .left {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 10px;
}
.hero .under__header .left img {
  width: 45px;
  height: 45px;
}
.hero .under__header .left span {
  font-size: 16px;
}
.hero .under__header .right {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 25px;
}
.hero .under__header .right img {
  height: 35px;
  width: auto;
}
.hero .hero__img {
  position: absolute;
  bottom: 0;
  left: 750px/2;
  width: 750px;
}
.hero.weby .hero__img, .hero.eshopy .hero__img, .hero.servis__hero .hero__img {
  width: 600px;
  left: 650px/2;
}
.hero .buttons {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  width: 100%;
}
.hero .buttons .btn {
  font-size: 18px;
}
.hero.portfolio__hero, .hero.thanks {
  padding: 50px 7.5%;
}
.hero.thanks {
  height: calc(100vh - 11rem);
  justify-content: center;
}
.hero.en .main__heading .dot.yellow.hp {
  left: 405px;
}
.hero.en .main__heading .dot.yellow.weby {
  left: 552px;
}
.hero.en .main__heading .dot.yellow.eshopy {
  left: 641px;
}
.hero.en .main__heading .dot.yellow.servis {
  left: 552px;
}
.hero.en .main__heading .dot.yellow.portfolio__dot {
  left: 707px;
}
.hero.en .main__heading .dot.yellow.thanks {
  display: none;
}
.hero.en .main__heading .dot.blue.hp {
  left: 908px;
  top: 88px;
}
.hero.en .main__heading .dot.blue.weby {
  top: 89px;
  left: 195px;
}
.hero.en .main__heading .dot.blue.eshopy {
  top: 89px;
  left: 285px;
}
.hero.en .main__heading .dot.blue.servis {
  top: 89px;
  left: 196px;
}
.hero.en .main__heading .dot.blue.portfolio__dot {
  top: 89px;
  left: 342px;
}
.hero.en .main__heading .dot.blue.thanks {
  display: none;
}
.hero.en .main__heading .dot.purple.hp {
  top: 103px;
  left: 975px;
}
.hero.en .main__heading .dot.purple.weby {
  top: 103px;
  left: 917px;
}
.hero.en .main__heading .dot.purple.eshopy {
  left: 1000px;
}
.hero.en .main__heading .dot.purple.servis {
  left: 920px;
}
.hero.en .main__heading .dot.purple.portfolio__dot {
  left: 845px;
}
.hero.en .main__heading .dot.purple.thanks {
  display: none;
}
.hero.hu .main__heading .dot.yellow.hp {
  left: 549px;
}
.hero.hu .main__heading .dot.yellow.weby {
  left: 626px;
}
.hero.hu .main__heading .dot.yellow.eshopy {
  left: 752px;
}
.hero.hu .main__heading .dot.yellow.servis {
  left: 626px;
}
.hero.hu .main__heading .dot.yellow.thanks {
  left: 390px;
}
.hero.hu .main__heading .dot.blue.hp {
  height: 15px;
  width: 15px;
  top: 100px;
  left: 472px;
}
.hero.hu .main__heading .dot.blue.weby {
  left: 197px;
}
.hero.hu .main__heading .dot.blue.eshopy {
  left: 323px;
}
.hero.hu .main__heading .dot.blue.servis {
  left: 197px;
}
.hero.hu .main__heading .dot.blue.thanks {
  display: block;
  left: 422px;
  top: 22px;
  height: 29px;
  width: 29px;
}
.hero.hu .main__heading .dot.purple.hp {
  top: 105px;
  left: 725px;
}
.hero.hu .main__heading .dot.purple.weby {
  left: 1110px;
}
.hero.hu .main__heading .dot.purple.eshopy {
  left: 1230px;
}
.hero.hu .main__heading .dot.purple.servis {
  left: 1110px;
}
.hero.hu .main__heading .dot.purple.thanks {
  left: 815px;
}

@media only screen and (max-width: 1600px) {
  .hero h2 {
    font-size: 18px;
  }
  .hero .main__heading h1 {
    font-size: 120px;
  }
  .hero .main__heading .dot.yellow {
    height: 23px;
    width: 23px;
  }
  .hero .main__heading .dot.yellow.hp {
    top: 17px;
    left: 363px;
  }
  .hero .main__heading .dot.yellow.weby {
    top: 18px;
    left: 462px;
  }
  .hero .main__heading .dot.yellow.eshopy {
    top: 18px;
    left: 435px;
  }
  .hero .main__heading .dot.yellow.sablony {
    top: 18px;
    left: 469px;
  }
  .hero .main__heading .dot.yellow.servis {
    top: 18px;
    left: 413px;
  }
  .hero .main__heading .dot.yellow.portfolio__dot {
    top: 18px;
    left: 573px;
  }
  .hero .main__heading .dot.yellow.thanks {
    top: 18px;
    left: 439px;
  }
  .hero .main__heading .dot.blue {
    height: 19px;
    width: 19px;
  }
  .hero .main__heading .dot.blue.hp {
    top: 70px;
    left: 840px;
  }
  .hero .main__heading .dot.blue.weby {
    top: 70px;
    left: 239px;
  }
  .hero .main__heading .dot.blue.eshopy {
    top: 70px;
    left: 213px;
  }
  .hero .main__heading .dot.blue.sablony {
    top: 70px;
    left: 247px;
  }
  .hero .main__heading .dot.blue.servis {
    top: 70px;
    left: 191px;
  }
  .hero .main__heading .dot.blue.portfolio__dot {
    top: 70px;
    left: 280px;
  }
  .hero .main__heading .dot.purple {
    height: 23px;
    width: 23px;
  }
  .hero .main__heading .dot.purple.hp {
    top: 83px;
    left: 1030px;
  }
  .hero .main__heading .dot.purple.weby {
    top: 83px;
    left: 860px;
  }
  .hero .main__heading .dot.purple.eshopy {
    top: 83px;
    left: 835px;
  }
  .hero .main__heading .dot.purple.sablony {
    top: 83px;
    left: 870px;
  }
  .hero .main__heading .dot.purple.servis {
    top: 83px;
    left: 817px;
  }
  .hero .main__heading .dot.purple.portfolio__dot {
    top: 83px;
    left: 680px;
  }
  .hero .main__heading .dot.purple.thanks {
    top: 83px;
    left: 478px;
  }
  .hero .hero__img {
    width: 650px;
  }
  .hero.en .main__heading .dot.yellow.hp {
    left: 324px;
  }
  .hero.en .main__heading .dot.yellow.weby {
    left: 442px;
  }
  .hero.en .main__heading .dot.yellow.eshopy {
    left: 513px;
  }
  .hero.en .main__heading .dot.yellow.servis {
    left: 442px;
  }
  .hero.en .main__heading .dot.yellow.portfolio__dot {
    left: 565px;
  }
  .hero.en .main__heading .dot.blue.hp {
    left: 725px;
    top: 70px;
  }
  .hero.en .main__heading .dot.blue.weby {
    top: 70px;
    left: 157px;
  }
  .hero.en .main__heading .dot.blue.eshopy {
    top: 70px;
    left: 228px;
  }
  .hero.en .main__heading .dot.blue.servis {
    top: 70px;
    left: 157px;
  }
  .hero.en .main__heading .dot.blue.portfolio__dot {
    left: 273px;
    top: 70px;
  }
  .hero.en .main__heading .dot.purple.hp {
    top: 83px;
    left: 775px;
  }
  .hero.en .main__heading .dot.purple.weby {
    top: 83px;
    left: 730px;
  }
  .hero.en .main__heading .dot.purple.eshopy {
    top: 83px;
    left: 805px;
  }
  .hero.en .main__heading .dot.purple.servis {
    top: 83px;
    left: 733px;
  }
  .hero.en .main__heading .dot.purple.portfolio__dot {
    top: 83px;
    left: 675px;
  }
  .hero.hu .main__heading .dot.yellow.hp {
    left: 439px;
  }
  .hero.hu .main__heading .dot.yellow.weby, .hero.hu .main__heading .dot.yellow.servis {
    left: 500px;
  }
  .hero.hu .main__heading .dot.yellow.eshopy {
    left: 603px;
  }
  .hero.hu .main__heading .dot.yellow.thanks {
    left: 311px;
  }
  .hero.hu .main__heading .dot.blue.hp {
    height: 13px;
    width: 13px;
    top: 80px;
    left: 379px;
  }
  .hero.hu .main__heading .dot.blue.weby, .hero.hu .main__heading .dot.blue.servis {
    left: 156px;
  }
  .hero.hu .main__heading .dot.blue.eshopy {
    left: 260px;
  }
  .hero.hu .main__heading .dot.blue.thanks {
    height: 23px;
    width: 23px;
    top: 18px;
    left: 339px;
  }
  .hero.hu .main__heading .dot.purple.hp {
    top: 81px;
    left: 575px;
  }
  .hero.hu .main__heading .dot.purple.weby, .hero.hu .main__heading .dot.purple.servis {
    top: 81px;
    left: 890px;
  }
  .hero.hu .main__heading .dot.purple.eshopy {
    top: 81px;
    left: 985px;
  }
  .hero.hu .main__heading .dot.purple.thanks {
    left: 650px;
  }
}
@media only screen and (max-width: 1300px) {
  .hero.weby .hero__img, .hero.eshopy .hero__img, .hero.servis .hero__img {
    width: 550px;
  }
  .hero h2 {
    font-size: 17px;
  }
  .hero .main__heading {
    margin: 25px 0;
  }
  .hero .main__heading h1 {
    font-size: 85px;
  }
  .hero .main__heading .dot.yellow {
    height: 16px;
    width: 16px;
  }
  .hero .main__heading .dot.yellow.hp {
    top: 12px;
    left: 259px;
  }
  .hero .main__heading .dot.yellow.weby {
    top: 12px;
    left: 328px;
  }
  .hero .main__heading .dot.yellow.eshopy {
    top: 12px;
    left: 308px;
  }
  .hero .main__heading .dot.yellow.sablony {
    top: 13px;
    left: 332px;
  }
  .hero .main__heading .dot.yellow.servis {
    top: 13px;
    left: 293px;
  }
  .hero .main__heading .dot.yellow.portfolio__dot {
    top: 13px;
    left: 406px;
  }
  .hero .main__heading .dot.yellow.thanks {
    top: 13px;
    left: 311px;
  }
  .hero .main__heading .dot.blue {
    height: 13px;
    width: 13px;
  }
  .hero .main__heading .dot.blue.hp {
    top: 50px;
    left: 595px;
  }
  .hero .main__heading .dot.blue.weby {
    top: 50px;
    left: 170px;
  }
  .hero .main__heading .dot.blue.eshopy {
    top: 50px;
    left: 152px;
  }
  .hero .main__heading .dot.blue.sablony {
    top: 50px;
    left: 175px;
  }
  .hero .main__heading .dot.blue.servis {
    top: 49px;
    left: 136px;
  }
  .hero .main__heading .dot.blue.portfolio__dot {
    top: 49px;
    left: 198px;
  }
  .hero .main__heading .dot.purple {
    height: 16px;
    width: 16px;
  }
  .hero .main__heading .dot.purple.hp {
    top: 58px;
    left: 730px;
  }
  .hero .main__heading .dot.purple.weby {
    top: 58px;
    left: 610px;
  }
  .hero .main__heading .dot.purple.eshopy {
    top: 58px;
    left: 590px;
  }
  .hero .main__heading .dot.purple.sablony {
    top: 58px;
    left: 615px;
  }
  .hero .main__heading .dot.purple.servis {
    top: 58px;
    left: 580px;
  }
  .hero .main__heading .dot.purple.portfolio__dot {
    top: 58px;
    left: 482px;
  }
  .hero .main__heading .dot.purple.thanks {
    top: 58px;
    left: 335px;
  }
  .hero .hero__img {
    width: 550px;
  }
  .hero.weby .hero__img, .hero.eshopy .hero__img, .hero.servis .hero__img {
    width: 500px;
  }
  .hero.en .main__heading .dot.yellow.hp {
    left: 229px;
    top: 12px;
  }
  .hero.en .main__heading .dot.yellow.weby {
    left: 314px;
  }
  .hero.en .main__heading .dot.yellow.eshopy {
    top: 12px;
    left: 364px;
  }
  .hero.en .main__heading .dot.yellow.servis {
    top: 12px;
    left: 314px;
  }
  .hero.en .main__heading .dot.yellow.portfolio__dot {
    top: 12px;
    left: 401px;
  }
  .hero.en .main__heading .dot.blue.hp {
    left: 514px;
    top: 50px;
  }
  .hero.en .main__heading .dot.blue.weby {
    top: 49px;
    left: 112px;
  }
  .hero.en .main__heading .dot.blue.eshopy {
    top: 49px;
    left: 162px;
  }
  .hero.en .main__heading .dot.blue.servis {
    top: 49px;
    left: 112px;
  }
  .hero.en .main__heading .dot.blue.portfolio__dot {
    top: 49px;
    left: 194px;
  }
  .hero.en .main__heading .dot.purple.hp {
    top: 58px;
    left: 550px;
  }
  .hero.en .main__heading .dot.purple.weby {
    top: 58px;
    left: 520px;
  }
  .hero.en .main__heading .dot.purple.eshopy {
    top: 58px;
    left: 570px;
  }
  .hero.en .main__heading .dot.purple.servis {
    top: 58px;
    left: 520px;
  }
  .hero.en .main__heading .dot.purple.portfolio__dot {
    top: 58px;
    left: 475px;
  }
  .hero.hu .main__heading .dot.yellow.hp {
    left: 311px;
  }
  .hero.hu .main__heading .dot.yellow.weby, .hero.hu .main__heading .dot.yellow.servis {
    left: 355px;
  }
  .hero.hu .main__heading .dot.yellow.eshopy {
    left: 427px;
  }
  .hero.hu .main__heading .dot.yellow.thanks {
    left: 220px;
    top: 12px;
  }
  .hero.hu .main__heading .dot.blue.hp {
    height: 9px;
    width: 9px;
    top: 57px;
    left: 265px;
  }
  .hero.hu .main__heading .dot.blue.weby, .hero.hu .main__heading .dot.blue.servis {
    left: 112px;
  }
  .hero.hu .main__heading .dot.blue.eshopy {
    left: 183px;
  }
  .hero.hu .main__heading .dot.blue.thanks {
    left: 240px;
    top: 12px;
    height: 16px;
    width: 16px;
  }
  .hero.hu .main__heading .dot.purple.hp {
    top: 58px;
    left: 410px;
  }
  .hero.hu .main__heading .dot.purple.weby, .hero.hu .main__heading .dot.purple.servis {
    left: 630px;
    top: 58px;
  }
  .hero.hu .main__heading .dot.purple.eshopy {
    top: 58px;
    left: 700px;
  }
  .hero.hu .main__heading .dot.purple.thanks {
    left: 460px;
  }
}
@media only screen and (max-width: 900px) {
  .hero.weby, .hero.eshopy, .hero.sablony, .hero.servis {
    padding: 25px 7.5% 250px;
  }
  .hero h2 {
    font-size: 15px;
  }
  .hero .main__heading {
    margin: 20px 0;
  }
  .hero .main__heading h1 {
    font-size: 65px;
  }
  .hero .main__heading .dot.yellow {
    height: 12px;
    width: 12px;
  }
  .hero .main__heading .dot.yellow.hp {
    top: 10px;
    left: 197px;
  }
  .hero .main__heading .dot.yellow.weby {
    top: 10px;
    left: 251px;
  }
  .hero .main__heading .dot.yellow.eshopy {
    top: 10px;
    left: 236px;
  }
  .hero .main__heading .dot.yellow.sablony {
    top: 10px;
    left: 254px;
  }
  .hero .main__heading .dot.yellow.servis {
    top: 10px;
    left: 224px;
  }
  .hero .main__heading .dot.yellow.portfolio__dot {
    top: 10px;
    left: 311px;
  }
  .hero .main__heading .dot.yellow.thanks {
    top: 9px;
    left: 238px;
  }
  .hero .main__heading .dot.blue {
    height: 9px;
    width: 9px;
  }
  .hero .main__heading .dot.blue.hp {
    top: 39px;
    left: 456px;
  }
  .hero .main__heading .dot.blue.weby {
    top: 39px;
    left: 131px;
  }
  .hero .main__heading .dot.blue.eshopy {
    top: 39px;
    left: 115px;
  }
  .hero .main__heading .dot.blue.sablony {
    top: 39px;
    left: 135px;
  }
  .hero .main__heading .dot.blue.servis {
    top: 39px;
    left: 104px;
  }
  .hero .main__heading .dot.blue.portfolio__dot {
    top: 39px;
    left: 154px;
  }
  .hero .main__heading .dot.purple {
    height: 12px;
    width: 12px;
  }
  .hero .main__heading .dot.purple.hp {
    top: 44px;
    left: 560px;
  }
  .hero .main__heading .dot.purple.weby {
    top: 44px;
    left: 465px;
  }
  .hero .main__heading .dot.purple.eshopy {
    top: 44px;
    left: 451px;
  }
  .hero .main__heading .dot.purple.sablony {
    top: 44px;
    left: 470px;
  }
  .hero .main__heading .dot.purple.servis {
    top: 44px;
    left: 440px;
  }
  .hero .main__heading .dot.purple.portfolio__dot {
    top: 44px;
    left: 370px;
  }
  .hero .main__heading .dot.purple.thanks {
    top: 44px;
    left: 258px;
  }
  .hero .under__header .left {
    grid-template-columns: 33px 1fr;
    gap: 5px;
  }
  .hero .under__header .left img {
    height: 33px;
    width: 33px;
  }
  .hero .under__header .left span {
    font-size: 13px;
  }
  .hero .under__header .right img {
    height: 27px;
  }
  .hero .hero__img {
    width: 425px;
  }
  .hero.weby .hero__img, .hero.eshopy .hero__img, .hero.servis .hero__img {
    width: 350px;
  }
  .hero .buttons {
    width: 100%;
    bottom: 50px;
  }
  .hero .buttons .btn {
    font-size: 15px;
  }
  .hero.en .main__heading .dot.yellow.hp {
    left: 175px;
    top: 10px;
  }
  .hero.en .main__heading .dot.yellow.weby {
    left: 239px;
    top: 10px;
  }
  .hero.en .main__heading .dot.yellow.eshopy {
    top: 10px;
    left: 278px;
  }
  .hero.en .main__heading .dot.yellow.servis {
    top: 10px;
    left: 239px;
  }
  .hero.en .main__heading .dot.yellow.portfolio__dot {
    top: 10px;
    left: 307px;
  }
  .hero.en .main__heading .dot.blue.hp {
    left: 395px;
    top: 39px;
  }
  .hero.en .main__heading .dot.blue.weby {
    left: 86px;
    top: 39px;
  }
  .hero.en .main__heading .dot.blue.eshopy {
    top: 39px;
    left: 125px;
  }
  .hero.en .main__heading .dot.blue.servis {
    top: 39px;
    left: 86px;
  }
  .hero.en .main__heading .dot.blue.portfolio__dot {
    top: 39px;
    left: 149px;
  }
  .hero.en .main__heading .dot.purple.hp {
    top: 44px;
    left: 420px;
  }
  .hero.en .main__heading .dot.purple.weby {
    top: 44px;
    left: 395px;
  }
  .hero.en .main__heading .dot.purple.eshopy {
    left: 435px;
    top: 44px;
  }
  .hero.en .main__heading .dot.purple.servis {
    left: 395px;
    top: 44px;
  }
  .hero.en .main__heading .dot.purple.portfolio__dot {
    left: 365px;
    top: 44px;
  }
  .hero.hu .main__heading .dot.yellow.hp {
    left: 238px;
  }
  .hero.hu .main__heading .dot.yellow.weby, .hero.hu .main__heading .dot.yellow.servis {
    left: 272px;
  }
  .hero.hu .main__heading .dot.yellow.eshopy {
    left: 327px;
  }
  .hero.hu .main__heading .dot.yellow.thanks {
    left: 168px;
    top: 9px;
  }
  .hero.hu .main__heading .dot.blue.hp {
    height: 7px;
    width: 7px;
    top: 43px;
    left: 203px;
  }
  .hero.hu .main__heading .dot.blue.weby, .hero.hu .main__heading .dot.blue.servis {
    top: 39px;
    left: 86px;
  }
  .hero.hu .main__heading .dot.blue.eshopy {
    left: 141px;
    top: 39px;
  }
  .hero.hu .main__heading .dot.blue.thanks {
    left: 183px;
    top: 9px;
    height: 12px;
    width: 12px;
  }
  .hero.hu .main__heading .dot.purple.hp {
    top: 45px;
    left: 315px;
  }
  .hero.hu .main__heading .dot.purple.weby, .hero.hu .main__heading .dot.purple.servis {
    top: 45px;
    left: 480px;
  }
  .hero.hu .main__heading .dot.purple.eshopy {
    top: 45px;
    left: 535px;
  }
  .hero.hu .main__heading .dot.purple.thanks {
    left: 355px;
  }
}
@media only screen and (max-width: 700px) {
  .hero {
    padding: 25px 5% 350px;
  }
  .hero.weby {
    padding: 25px 7.5% 225px;
  }
  .hero h2 {
    font-size: 10px;
  }
  .hero .main__heading {
    margin: 15px 0;
  }
  .hero .main__heading h1 {
    font-size: 37px;
  }
  .hero .main__heading h1 .border {
    color: transparent;
    -webkit-text-stroke: 1px rgba(15, 13, 8, 0.6);
    paint-order: stroke fill;
  }
  .hero .main__heading .dot.yellow {
    height: 7px;
    width: 7px;
  }
  .hero .main__heading .dot.yellow.hp {
    top: 5px;
    left: 112px;
  }
  .hero .main__heading .dot.yellow.weby {
    top: 5px;
    left: 143px;
  }
  .hero .main__heading .dot.yellow.eshopy {
    top: 5px;
    left: 134px;
  }
  .hero .main__heading .dot.yellow.sablony {
    top: 5px;
    left: 145px;
  }
  .hero .main__heading .dot.yellow.servis {
    top: 5px;
    left: 128px;
  }
  .hero .main__heading .dot.yellow.portfolio__dot {
    top: 5px;
    left: 177px;
  }
  .hero .main__heading .dot.yellow.thanks {
    top: 5px;
    left: 136px;
  }
  .hero .main__heading .dot.blue {
    height: 6px;
    width: 6px;
  }
  .hero .main__heading .dot.blue.hp {
    top: 21px;
    left: 258px;
  }
  .hero .main__heading .dot.blue.weby {
    top: 21px;
    left: 75px;
  }
  .hero .main__heading .dot.blue.eshopy {
    top: 21px;
    left: 65px;
  }
  .hero .main__heading .dot.blue.sablony {
    top: 21px;
    left: 76px;
  }
  .hero .main__heading .dot.blue.servis {
    top: 21px;
    left: 59px;
  }
  .hero .main__heading .dot.blue.portfolio__dot {
    top: 21px;
    left: 87px;
  }
  .hero .main__heading .dot.purple {
    height: 7px;
    width: 7px;
  }
  .hero .main__heading .dot.purple.hp {
    top: 25px;
    left: 318px;
  }
  .hero .main__heading .dot.purple.weby {
    top: 25px;
    left: 265px;
  }
  .hero .main__heading .dot.purple.eshopy {
    top: 25px;
    left: 258px;
  }
  .hero .main__heading .dot.purple.sablony {
    top: 25px;
    left: 268px;
  }
  .hero .main__heading .dot.purple.servis {
    top: 25px;
    left: 252px;
  }
  .hero .main__heading .dot.purple.portfolio__dot {
    top: 25px;
    left: 212px;
  }
  .hero .main__heading .dot.purple.thanks {
    top: 25px;
    left: 147px;
  }
  .hero .under__header {
    flex-flow: column;
    gap: 15px;
  }
  .hero .under__header .left {
    grid-template-columns: 31px 1fr;
  }
  .hero .under__header .left img {
    height: 31px;
    width: 31px;
  }
  .hero .under__header .left span {
    font-size: 12px;
  }
  .hero .under__header .right img {
    height: 25px;
  }
  .hero .hero__img {
    width: 400px;
  }
  .hero.weby .hero__img, .hero.eshopy .hero__img, .hero.servis .hero__img {
    width: 300px;
  }
  .hero .buttons {
    gap: 10px;
  }
  .hero .buttons .btn {
    font-size: 11px;
  }
  .hero.portfolio__hero {
    padding-bottom: 0;
  }
  .hero.en .main__heading .dot.yellow.hp {
    left: 100px;
    top: 5px;
  }
  .hero.en .main__heading .dot.yellow.weby {
    top: 5px;
    left: 136px;
  }
  .hero.en .main__heading .dot.yellow.eshopy {
    top: 5px;
    left: 158px;
  }
  .hero.en .main__heading .dot.yellow.servis {
    top: 5px;
    left: 136px;
  }
  .hero.en .main__heading .dot.yellow.portfolio__dot {
    top: 5px;
    left: 175px;
  }
  .hero.en .main__heading .dot.blue.hp {
    left: 224px;
    top: 21px;
  }
  .hero.en .main__heading .dot.blue.weby {
    top: 21px;
    left: 48px;
  }
  .hero.en .main__heading .dot.blue.eshopy {
    top: 21px;
    left: 70px;
  }
  .hero.en .main__heading .dot.blue.servis {
    top: 21px;
    left: 48px;
  }
  .hero.en .main__heading .dot.blue.portfolio__dot {
    top: 21px;
    left: 84px;
  }
  .hero.en .main__heading .dot.purple.hp {
    top: 25px;
    left: 240px;
  }
  .hero.en .main__heading .dot.purple.weby {
    top: 25px;
    left: 225px;
  }
  .hero.en .main__heading .dot.purple.eshopy {
    top: 25px;
    left: 250px;
  }
  .hero.en .main__heading .dot.purple.servis {
    top: 25px;
    left: 225px;
  }
  .hero.en .main__heading .dot.purple.portfolio__dot {
    top: 25px;
    left: 206px;
  }
  .hero.hu .main__heading .dot.yellow.hp {
    left: 136px;
  }
  .hero.hu .main__heading .dot.yellow.weby, .hero.hu .main__heading .dot.yellow.servis {
    left: 154px;
  }
  .hero.hu .main__heading .dot.yellow.eshopy {
    left: 179px;
  }
  .hero.hu .main__heading .dot.yellow.thanks {
    left: 96px;
    top: 5px;
  }
  .hero.hu .main__heading .dot.blue.hp {
    height: 5px;
    width: 5px;
    top: 24px;
    left: 115px;
  }
  .hero.hu .main__heading .dot.blue.weby, .hero.hu .main__heading .dot.blue.servis {
    top: 21px;
    left: 47px;
  }
  .hero.hu .main__heading .dot.blue.eshopy {
    top: 21px;
    left: 73px;
  }
  .hero.hu .main__heading .dot.blue.thanks {
    left: 104px;
    top: 5px;
    height: 7px;
    width: 7px;
  }
  .hero.hu .main__heading .dot.purple.hp {
    top: 25px;
    left: 180px;
  }
  .hero.hu .main__heading .dot.purple.weby, .hero.hu .main__heading .dot.purple.servis {
    left: 273px;
    top: 25px;
  }
  .hero.hu .main__heading .dot.purple.eshopy {
    left: 297px;
    top: 25px;
  }
  .hero.hu .main__heading .dot.purple.thanks {
    left: 200px;
  }
}
.offer {
  padding: 50px 7.5%;
}
.offer h2.h2 {
  margin-bottom: 10px;
}
.offer .offer__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.offer .offer__content .item {
  background: #0F0D08;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.offer .offer__content .item .circle {
  height: 175px;
  width: 175px;
  border-radius: 50%;
}
.offer .offer__content .item:nth-of-type(1) .circle1 {
  background: #FFCD60;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.offer .offer__content .item:nth-of-type(1) .circle2 {
  background: #F72A62;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}
.offer .offer__content .item:nth-of-type(2) .circle1 {
  background: #F72A62;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}
.offer .offer__content .item:nth-of-type(2) .circle2 {
  background: #62A9D4;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.offer .offer__content .item:nth-of-type(3) .circle1 {
  background: #62A9D4;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.offer .offer__content .item:nth-of-type(3) .circle2 {
  background: #F72A62;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}
.offer .offer__content .item:nth-of-type(4) .circle1 {
  background: #F72A62;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}
.offer .offer__content .item:nth-of-type(4) .circle2 {
  background: #FFCD60;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.offer .offer__content .item .item__content {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
}
.offer .offer__content .item .item__content .item__heading {
  width: calc(100% - 30px);
  background: #FFFDF5;
  margin: 15px;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
}
.offer .offer__content .item .item__content .item__heading__top__bar {
  width: 100%;
  background: #ECE9E1;
  padding: 10px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}
.offer .offer__content .item .item__content .item__heading__top__bar .red, .offer .offer__content .item .item__content .item__heading__top__bar .orange, .offer .offer__content .item .item__content .item__heading__top__bar .green {
  height: 15px;
  width: 15px;
  border-radius: 50%;
}
.offer .offer__content .item .item__content .item__heading__top__bar .red {
  background: #F72A62;
}
.offer .offer__content .item .item__content .item__heading__top__bar .orange {
  background: #FFCD60;
}
.offer .offer__content .item .item__content .item__heading__top__bar .green {
  background: #1BCB00;
}
.offer .offer__content .item .item__content .item__heading__content {
  padding: 50px 10px;
}
.offer .offer__content .item .item__content .item__heading__content h3 {
  font-size: 55px;
  color: #0F0D08;
  font-weight: 800;
  text-align: center;
}
.offer .offer__content .item .item__content .item__heading__content img {
  height: 31px;
  width: 31px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  transform: rotate(-35deg);
}
.offer .offer__content .item .item__content .item__points {
  width: calc(100% - 30px);
  margin: 15px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-flow: column;
  gap: 10px;
}
.offer .offer__content .item .item__content .item__points .point {
  display: grid;
  grid-template-columns: 29px 1fr;
  align-items: center;
  gap: 15px;
}
.offer .offer__content .item .item__content .item__points .point img {
  height: 29px;
  width: 29px;
}
.offer .offer__content .item .item__content .item__points .point span {
  font-size: 16px;
  color: #ECE9E1;
}
.offer .offer__content .item .item__content .price {
  font-size: 30px;
  color: #ECE9E1;
  text-align: center;
  padding: 10px 0;
}
.offer .offer__content .item .item__content .price a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}
.offer .offer__content .item .item__content .btn {
  margin: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 30px);
}
.offer.eshopy .offer__content {
  grid-template-columns: repeat(3, 1fr);
}
.offer.sablony .offer__content {
  grid-template-columns: repeat(3, 1fr);
  gap: 75px;
}
.offer.sablony .offer__content .item {
  width: 100%;
  background: none;
  border-radius: none;
  text-decoration: none;
  color: #0F0D08;
  overflow: visible;
}
.offer.sablony .offer__content .item:hover .item__display {
  transform: scale(1.025);
}
.offer.sablony .offer__content .item__display {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: #0F0D08;
  transition: 0.25s ease;
}
.offer.sablony .offer__content .item__display__heading {
  width: 100%;
  background: #0F0D08;
  padding: 10px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}
.offer.sablony .offer__content .item__display__heading .red, .offer.sablony .offer__content .item__display__heading .orange, .offer.sablony .offer__content .item__display__heading .green {
  height: 13px;
  width: 13px;
  border-radius: 50%;
}
.offer.sablony .offer__content .item__display__heading .red {
  background: #F72A62;
}
.offer.sablony .offer__content .item__display__heading .orange {
  background: #FFCD60;
}
.offer.sablony .offer__content .item__display__heading .green {
  background: #1BCB00;
}
.offer.sablony .offer__content .item__display__content {
  width: 100%;
}
.offer.sablony .offer__content .item__display__content img {
  width: 100%;
}
.offer.sablony .offer__content .item__desc {
  background: none;
  margin-top: 5px;
}
.offer.sablony .offer__content .item__desc h3 {
  font-size: 35px;
  font-weight: 600;
}
.offer.sablony .offer__content .item__desc p {
  font-size: 20px;
  font-weight: 500;
}

@media only screen and (max-width: 1600px) {
  .offer .offer__content .item .item__content .item__heading__top__bar .red, .offer .offer__content .item .item__content .item__heading__top__bar .orange, .offer .offer__content .item .item__content .item__heading__top__bar .green {
    height: 13px;
    width: 13px;
  }
  .offer .offer__content .item .item__content .item__heading__content {
    padding: 40px 10px;
  }
  .offer .offer__content .item .item__content .item__heading__content h3 {
    font-size: 40px;
  }
  .offer .offer__content .item .item__content .item__points .point {
    grid-template-columns: 25px 1fr;
  }
  .offer .offer__content .item .item__content .item__points .point img {
    height: 25px;
    width: 25px;
  }
  .offer .offer__content .item .item__content .item__points .point span {
    font-size: 15px;
  }
  .offer .offer__content .item .item__content .price {
    font-size: 25px;
  }
  .offer.sablony .offer__content {
    gap: 50px;
  }
  .offer.sablony .offer__content .item__desc h3 {
    font-size: 31px;
  }
  .offer.sablony .offer__content .item__desc p {
    font-size: 19px;
  }
}
@media only screen and (max-width: 1300px) {
  .offer {
    padding: 50px 5%;
  }
  .offer .offer__content {
    gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
  .offer .offer__content .item .item__content .item__heading__top__bar {
    padding: 7px;
  }
  .offer .offer__content .item .item__content .item__heading__top__bar .red, .offer .offer__content .item .item__content .item__heading__top__bar .orange, .offer .offer__content .item .item__content .item__heading__top__bar .green {
    height: 11px;
    width: 11px;
  }
  .offer .offer__content .item .item__content .item__heading__content {
    padding: 35px 10px;
  }
  .offer .offer__content .item .item__content .item__heading__content h3 {
    font-size: 30px;
  }
  .offer .offer__content .item .item__content .item__heading__content img {
    height: 25px;
    width: 25px;
  }
  .offer .offer__content .item .item__content .item__points .point {
    grid-template-columns: 23px 1fr;
  }
  .offer .offer__content .item .item__content .item__points .point img {
    height: 23px;
    width: 23px;
  }
  .offer .offer__content .item .item__content .item__points .point span {
    font-size: 13px;
  }
  .offer .offer__content .item .item__content .price {
    text-align: start;
    font-size: 27px;
    padding: 10px 5%;
  }
  .offer .offer__content .item .item__content .btn {
    margin: 10px;
    font-size: 13px;
    width: calc(100% - 20px);
  }
  .offer.sablony .offer__content {
    gap: 25px;
  }
  .offer.sablony .offer__content .item__display {
    border-radius: 10px;
  }
  .offer.sablony .offer__content .item__display__heading {
    padding: 7px;
  }
  .offer.sablony .offer__content .item__display__heading .red, .offer.sablony .offer__content .item__display__heading .orange, .offer.sablony .offer__content .item__display__heading .green {
    height: 11px;
    width: 11px;
  }
  .offer.sablony .offer__content .item__desc h3 {
    font-size: 27px;
  }
  .offer.sablony .offer__content .item__desc p {
    font-size: 19px;
  }
}
@media only screen and (max-width: 900px) {
  .offer .offer__content {
    grid-template-columns: 1fr 1fr;
  }
  .offer .offer__content .item .item__content .price {
    font-size: 25px;
  }
  .offer .offer__content .item .item__content .btn {
    font-size: 15px;
  }
  .offer.sablony .offer__content {
    gap: 25px;
    grid-template-columns: 1fr 1fr;
  }
  .offer.sablony .offer__content .item__display {
    border-radius: 10px;
  }
  .offer.sablony .offer__content .item__display__heading {
    padding: 7px;
  }
  .offer.sablony .offer__content .item__display__heading .red, .offer.sablony .offer__content .item__display__heading .orange, .offer.sablony .offer__content .item__display__heading .green {
    height: 11px;
    width: 11px;
  }
  .offer.sablony .offer__content .item__desc h3 {
    font-size: 27px;
  }
  .offer.sablony .offer__content .item__desc p {
    font-size: 19px;
  }
  .offer.eshopy .offer__content {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 700px) {
  .offer .offer__content {
    grid-template-columns: 1fr;
  }
  .offer .offer__content .item .item__content .item__heading__content h3 {
    font-size: 25px;
  }
  .offer .offer__content .item .item__content .btn {
    font-size: 15px;
  }
  .offer.sablony .offer__content {
    gap: 25px;
    grid-template-columns: 1fr;
  }
  .offer.sablony .offer__content .item__display {
    border-radius: 10px;
  }
  .offer.sablony .offer__content .item__display__heading {
    padding: 7px;
  }
  .offer.sablony .offer__content .item__display__heading .red, .offer.sablony .offer__content .item__display__heading .orange, .offer.sablony .offer__content .item__display__heading .green {
    height: 11px;
    width: 11px;
  }
  .offer.sablony .offer__content .item__desc h3 {
    font-size: 24px;
  }
  .offer.sablony .offer__content .item__desc p {
    font-size: 15px;
  }
}
.collabs .top {
  width: 100%;
  height: 50px;
  background: linear-gradient(0deg, rgb(15, 13, 8) 0%, rgba(236, 233, 225, 0) 100%);
}
.collabs .collabs__content {
  background: #0F0D08;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  gap: 75px;
  width: 100%;
  padding: 25px 7.5%;
}
.collabs .collabs__content img {
  height: 50px;
}
.collabs .bottom {
  width: 100%;
  height: 50px;
  background: linear-gradient(0deg, rgba(236, 233, 225, 0) 0%, rgb(15, 13, 8) 100%);
}

@media only screen and (max-width: 1600px) {
  .collabs .top, .collabs .bottom {
    height: 45px;
  }
  .collabs .collabs__content img {
    height: 45px;
  }
}
@media only screen and (max-width: 1300px) {
  .collabs .top, .collabs .bottom {
    height: 40px;
  }
  .collabs .collabs__content img {
    height: 40px;
  }
}
@media only screen and (max-width: 900px) {
  .collabs .top, .collabs .bottom {
    height: 35px;
  }
  .collabs .collabs__content img {
    height: 35px;
  }
}
@media only screen and (max-width: 700px) {
  .collabs .top, .collabs .bottom {
    height: 25px;
  }
  .collabs .collabs__content {
    gap: 15px;
  }
  .collabs .collabs__content img {
    height: 25px;
  }
}
.portfolio {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-flow: column;
  padding: 50px 7.5%;
}
.portfolio .h2 {
  margin-bottom: 10px;
}
.portfolio .h4 {
  margin-bottom: 10px;
}
.portfolio .buttons {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.portfolio .buttons .btn {
  font-size: 18px;
}
.portfolio__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
  row-gap: 35px;
  margin-top: 50px;
}
.portfolio__content .item {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: 0.25s ease;
}
.portfolio__content .item:hover {
  transform: scale(1.05);
}
.portfolio__content .item .item__heading {
  width: 100%;
  background: #0F0D08;
  padding: 10px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}
.portfolio__content .item .item__heading .red, .portfolio__content .item .item__heading .orange, .portfolio__content .item .item__heading .green {
  height: 13px;
  width: 13px;
  border-radius: 50%;
}
.portfolio__content .item .item__heading .red {
  background: #F72A62;
}
.portfolio__content .item .item__heading .orange {
  background: #FFCD60;
}
.portfolio__content .item .item__heading .green {
  background: #1BCB00;
}
.portfolio__content .item .item__content {
  width: 100%;
}
.portfolio__content .item .item__content img {
  width: 100%;
}

@media only screen and (max-width: 1600px) {
  .portfolio__content {
    gap: 70px;
    row-gap: 25px;
  }
}
@media only screen and (max-width: 1300px) {
  .portfolio .buttons {
    margin-top: 10px;
  }
  .portfolio .buttons .btn {
    font-size: 16px;
  }
  .portfolio__content {
    gap: 20px;
    row-gap: 20px;
    margin-top: 30px;
  }
  .portfolio__content .item {
    border-radius: 10px;
  }
  .portfolio__content .item .item__heading {
    padding: 7px;
  }
  .portfolio__content .item .item__heading .red, .portfolio__content .item .item__heading .orange, .portfolio__content .item .item__heading .green {
    height: 9px;
    width: 9px;
  }
}
@media only screen and (max-width: 900px) {
  .portfolio .buttons {
    margin-top: 5px;
  }
  .portfolio .buttons .btn {
    font-size: 15px;
  }
  .portfolio__content {
    gap: 20px;
    row-gap: 20px;
    margin-top: 30px;
    grid-template-columns: 1fr 1fr;
  }
  .portfolio__content .item {
    border-radius: 10px;
  }
  .portfolio__content .item .item__heading {
    padding: 7px;
  }
  .portfolio__content .item .item__heading .red, .portfolio__content .item .item__heading .orange, .portfolio__content .item .item__heading .green {
    height: 9px;
    width: 9px;
  }
}
@media only screen and (max-width: 700px) {
  .portfolio .buttons {
    margin-top: 5px;
  }
  .portfolio .buttons .btn {
    font-size: 14px;
  }
  .portfolio__content {
    gap: 20px;
    row-gap: 20px;
    margin-top: 30px;
    grid-template-columns: 1fr;
  }
  .portfolio__content .item {
    border-radius: 10px;
  }
  .portfolio__content .item .item__heading {
    padding: 7px;
  }
  .portfolio__content .item .item__heading .red, .portfolio__content .item .item__heading .orange, .portfolio__content .item .item__heading .green {
    height: 9px;
    width: 9px;
  }
}
.contacts {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.contacts .gradient__bar {
  height: 50px;
  width: 100%;
}
.contacts .gradient__bar.top {
  background: linear-gradient(180deg, rgb(236, 233, 225) 0%, rgb(15, 13, 8) 100%);
}
.contacts .gradient__bar.bottom {
  background: linear-gradient(0deg, rgb(236, 233, 225) 0%, rgb(15, 13, 8) 100%);
}
.contacts__content {
  position: relative;
  padding: 75px 10%;
  background: #0F0D08;
}
.contacts__content .h2, .contacts__content .h4 {
  color: #ECE9E1;
  position: relative;
  z-index: 2;
}
.contacts__content__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 0.33fr 0.66fr;
  gap: 250px;
  margin-top: 50px;
  position: relative;
  z-index: 2;
}
.contacts__content__grid .details {
  padding: 25px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: start;
  align-items: start;
  flex-flow: column;
  gap: 15px;
  border-radius: 15px;
}
.contacts__content__grid .details .lang-note {
  color: #fff;
  font-size: 16px;
}
.contacts__content__grid .details__group h3 {
  font-size: 30px;
  color: #ECE9E1;
  margin-bottom: 10px;
  font-weight: 500;
}
.contacts__content__grid .details__group .link {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 10px;
  text-decoration: none;
}
.contacts__content__grid .details__group .link svg {
  height: 25px;
  width: 25px;
  color: white;
}
.contacts__content__grid .details__group .link span {
  font-size: 18px;
  color: white;
}
.contacts__content__grid .details__group .details__text {
  font-size: 18px;
  color: white;
  display: block;
}
.contacts__content__grid .details__group .social__icons {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}
.contacts__content__grid .details__group .social__icons a img {
  height: 31px;
  width: 31px;
}
.contacts__content__grid form {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-flow: column;
  gap: 15px;
}
.contacts__content__grid form .inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  width: 100%;
}
.contacts__content__grid form .inputs.full {
  grid-template-columns: 1fr;
}
.contacts__content__grid form .inputs .input__parent {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-flow: column;
  gap: 10px;
}
.contacts__content__grid form .inputs .input__parent label {
  color: #ECE9E1;
  font-size: 18px;
}
.contacts__content__grid form .inputs .input__parent input {
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  width: 100%;
  border: none;
  border-radius: 7px;
  font-size: 20px;
  color: #fff;
}
.contacts__content__grid form .inputs .input__parent input:focus {
  outline: 1px solid #fff;
}
.contacts__content__grid form .inputs .input__parent textarea {
  padding: 13px 15px;
  height: 75px;
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  border: none;
  border-radius: 7px;
  color: #fff;
}
.contacts__content .earth {
  position: absolute;
  bottom: 75px;
  left: 3.5%;
  height: 150px;
}
.contacts__content .moon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  height: 80%;
}

@media only screen and (max-width: 1600px) {
  .contacts__content__grid {
    gap: 150px;
  }
  .contacts__content__grid .details__group h3 {
    font-size: 27px;
  }
  .contacts__content__grid .details__group .link {
    grid-template-columns: 21px 1fr;
  }
  .contacts__content__grid .details__group .link svg {
    height: 21px;
    width: 21px;
  }
  .contacts__content__grid .details__group .link span {
    font-size: 16px;
  }
  .contacts__content__grid .details__group .details__text {
    font-size: 16px;
  }
  .contacts__content__grid .details__group .social__icons a img {
    height: 27px;
    width: 27px;
  }
  .contacts__content__grid form .inputs .input__parent label {
    font-size: 16px;
  }
  .contacts__content__grid form .inputs .input__parent input {
    padding: 10px 13px;
    font-size: 18px;
  }
  .contacts__content__grid form .inputs .input__parent textarea {
    padding: 10px 13px;
    font-size: 18px;
  }
}
@media only screen and (max-width: 1300px) {
  .contacts .gradient__bar {
    height: 45px;
  }
  .contacts__content {
    padding: 65px 7.5%;
  }
  .contacts__content__grid {
    gap: 75px;
    grid-template-columns: 0.4fr 0.6fr;
  }
  .contacts__content__grid .details__group h3 {
    font-size: 20px;
  }
  .contacts__content__grid .details__group .link svg {
    height: 21px;
    width: 21px;
  }
  .contacts__content__grid .details__group .link span {
    font-size: 15px;
  }
  .contacts__content__grid .details__group .details__text {
    font-size: 15px;
  }
  .contacts__content__grid form .inputs {
    gap: 25px;
  }
  .contacts__content__grid form .btn {
    font-size: 15px;
  }
}
@media only screen and (max-width: 900px) {
  .contacts .gradient__bar {
    height: 40px;
  }
  .contacts__content__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .contacts__content__grid .details {
    order: 2;
  }
  .contacts__content__grid form {
    order: 1;
  }
}
@media only screen and (max-width: 700px) {
  .contacts .gradient__bar {
    height: 35px;
  }
  .contacts__content__grid form .inputs .input__parent label {
    font-size: 15px;
  }
  .contacts__content__grid form .inputs .input__parent input {
    font-size: 16px;
  }
}
.process {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.process .gradient__bar {
  height: 50px;
  width: 100%;
}
.process .gradient__bar.top {
  background: linear-gradient(180deg, rgb(236, 233, 225) 0%, rgb(15, 13, 8) 100%);
}
.process .gradient__bar.bottom {
  background: linear-gradient(0deg, rgb(236, 233, 225) 0%, rgb(15, 13, 8) 100%);
}
.process__content {
  position: relative;
  padding: 75px 10%;
  background: #0F0D08;
  width: 100%;
}
.process__content .h2, .process__content .h4 {
  color: #ECE9E1;
}
.process__content .points {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-flow: column;
  row-gap: 100px;
  width: 100%;
  margin-top: 50px;
}
.process__content .points .point {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 250px;
  position: relative;
  width: 100%;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.process__content .points .point:last-child .point__text::after {
  display: none;
}
.process__content .points .point.is-active {
  opacity: 1;
}
.process__content .points .point__heading h3 {
  font-size: 45px;
  color: #ECE9E1;
}
.process__content .points .point__text {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 35px;
  position: relative;
}
.process__content .points .point__text::after {
  content: "";
  position: absolute;
  width: 3px;
  height: calc(100% + 125px);
  background: #ECE9E1;
  left: 11px;
}
.process__content .points .point__text__dot {
  height: 25px;
  width: 25px;
  outline-offset: 5px;
  outline: 2px solid #ECE9E1;
  background: #ECE9E1;
  border-radius: 50%;
}
.process__content .points .point__text__p {
  font-size: 18px;
  color: #ECE9E1;
  transform: translateY(-5px);
  font-weight: 300;
}
.process__content .button__parent {
  padding-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.process__content .button__parent .btn {
  font-size: 20px;
}

@media only screen and (max-width: 1600px) {
  .process .gradient__bar {
    height: 45px;
  }
  .process__content .points {
    row-gap: 50px;
  }
  .process__content .points .point__heading h3 {
    font-size: 37px;
  }
  .process__content .points .point__text::after {
    left: 9px;
    height: calc(100% + 50px);
  }
  .process__content .points .point__text__dot {
    height: 21px;
    width: 21px;
  }
  .process__content .points .point__text__p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1300px) {
  .process .gradient__bar {
    height: 40px;
  }
  .process__content .points {
    row-gap: 50px;
  }
  .process__content .points .point {
    gap: 175px;
  }
  .process__content .points .point__heading h3 {
    font-size: 31px;
  }
  .process__content .points .point__text::after {
    left: 9px;
    height: calc(100% + 50px);
  }
  .process__content .points .point__text__dot {
    height: 21px;
    width: 21px;
  }
  .process__content .points .point__text__p {
    font-size: 15px;
  }
  .process__content .button__parent .btn {
    font-size: 17px;
  }
}
@media only screen and (max-width: 900px) {
  .process .gradient__bar {
    height: 35px;
  }
  .process__content .points {
    row-gap: 35px;
  }
  .process__content .points .point {
    gap: 100px;
  }
  .process__content .points .point__heading h3 {
    font-size: 26px;
  }
  .process__content .points .point__text::after {
    left: 8px;
    height: calc(100% + 50px);
  }
  .process__content .points .point__text__dot {
    height: 19px;
    width: 19px;
  }
  .process__content .points .point__text__p {
    font-size: 14px;
  }
  .process__content .button__parent .btn {
    font-size: 17px;
  }
}
@media only screen and (max-width: 700px) {
  .process .gradient__bar {
    height: 30px;
  }
  .process__content {
    padding: 50px 5%;
  }
  .process__content .points {
    row-gap: 35px;
  }
  .process__content .points .point {
    gap: 15px;
    grid-template-columns: 1fr;
  }
  .process__content .points .point__heading {
    padding-left: 50px;
  }
  .process__content .points .point__heading h3 {
    font-size: 20px;
  }
  .process__content .points .point__text {
    gap: 15px;
    grid-template-columns: 1fr 25px;
    position: initial;
    padding-left: 50px;
  }
  .process__content .points .point__text::after {
    left: initial;
    top: 3px;
    left: 8px;
    height: calc(100% + 50px);
  }
  .process__content .points .point__text__dot {
    height: 19px;
    width: 19px;
    order: 2;
    position: absolute;
    top: 3px;
    left: 0;
  }
  .process__content .points .point__text__p {
    font-size: 13px;
  }
  .process__content .button__parent .btn {
    font-size: 15px;
  }
}
.reviews {
  padding: 50px 7.5%;
}
.reviews h2.h2 {
  margin-bottom: 10px;
}
.reviews .buttons {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.reviews .buttons .btn {
  font-size: 18px;
}
.reviews__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-top: 125px;
}
.reviews__content__item__inner {
  width: 100%;
  position: relative;
}
.reviews__content__item__inner img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 155px;
  width: 155px;
  border-radius: 50%;
  border: 3px solid #0F0D08;
  z-index: 2;
}
.reviews__content__item__inner__parent {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: #0F0D08;
}
.reviews__content__item__inner__parent .circle {
  height: 151px;
  width: 151px;
  position: absolute;
  border-radius: 50%;
}
.reviews__content__item__inner__parent .circle.purple {
  left: 0;
  top: 0;
  background: #F72A62;
  transform: translate(-50%, -50%);
}
.reviews__content__item__inner__parent .circle.yellow {
  right: 0;
  bottom: 0;
  background: #FFCD60;
  transform: translate(50%, 50%);
}
.reviews__content__item__inner__parent__content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 90px 25px 25px;
  border-radius: 20px;
}
.reviews__content__item__inner__parent__content h5 {
  font-size: 15px;
  text-align: center;
  color: #ECE9E1;
  font-weight: 400;
}
.reviews__content__item__inner__parent__content h3 {
  font-size: 35px;
  color: #ECE9E1;
  text-align: center;
  margin-top: 5px;
}
.reviews__content__item__desc {
  font-size: 15px;
  font-weight: 300;
  margin-top: 20px;
}

@media only screen and (max-width: 1600px) {
  .reviews .buttons .btn {
    font-size: 17px;
  }
  .reviews__content__item__inner img {
    height: 137px;
    width: 137px;
  }
  .reviews__content__item__inner__parent .circle {
    height: 121px;
    width: 121px;
  }
  .reviews__content__item__inner__parent__content h5 {
    font-size: 14px;
  }
  .reviews__content__item__inner__parent__content h3 {
    font-size: 32px;
  }
  .reviews__content__item__desc {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1300px) {
  .reviews .buttons .btn {
    font-size: 16px;
  }
  .reviews__content {
    gap: 25px;
    margin-top: 80px;
  }
  .reviews__content__item__inner img {
    height: 99px;
    width: 99px;
  }
  .reviews__content__item__inner__parent .circle {
    height: 99px;
    width: 99px;
  }
  .reviews__content__item__inner__parent__content {
    padding: 65px 25px 25px;
  }
  .reviews__content__item__inner__parent__content h5 {
    font-size: 13px;
  }
  .reviews__content__item__inner__parent__content h3 {
    font-size: 27px;
  }
  .reviews__content__item__desc {
    font-size: 14px;
  }
}
@media only screen and (max-width: 900px) {
  .reviews .buttons .btn {
    font-size: 15px;
  }
  .reviews__content {
    grid-template-columns: 1fr;
    gap: 75px;
    margin-top: 80px;
  }
  .reviews__content__item__inner img {
    height: 99px;
    width: 99px;
  }
  .reviews__content__item__inner__parent .circle {
    height: 99px;
    width: 99px;
  }
  .reviews__content__item__inner__parent__content {
    padding: 65px 25px 25px;
  }
  .reviews__content__item__inner__parent__content h5 {
    font-size: 13px;
  }
  .reviews__content__item__inner__parent__content h3 {
    font-size: 27px;
  }
  .reviews__content__item__desc {
    font-size: 14px;
  }
}
@media only screen and (max-width: 700px) {
  .reviews {
    padding: 50px 5%;
  }
  .reviews .buttons {
    gap: 5px;
  }
  .reviews .buttons .btn {
    font-size: 11px;
  }
  .reviews__content {
    grid-template-columns: 1fr;
    gap: 75px;
    margin-top: 80px;
  }
  .reviews__content__item__inner img {
    height: 85px;
    width: 85px;
    border: 2px solid #0F0D08;
  }
  .reviews__content__item__inner__parent .circle {
    height: 99px;
    width: 99px;
  }
  .reviews__content__item__inner__parent__content {
    padding: 55px 17px 17px;
  }
  .reviews__content__item__inner__parent__content h5 {
    font-size: 11px;
  }
  .reviews__content__item__inner__parent__content h3 {
    font-size: 23px;
  }
  .reviews__content__item__desc {
    font-size: 13px;
    margin-top: 15px;
  }
}
.video {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-flow: column;
  padding: 50px 7.5%;
}
.video .h4 {
  margin-bottom: 10px;
}
.video .buttons {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.video .buttons .btn {
  font-size: 18px;
}
.video .video__content {
  width: 90%;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  margin-top: 50px;
}
.video .video__content__header {
  width: 100%;
  background: #0F0D08;
  padding: 15px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}
.video .video__content__header .red, .video .video__content__header .orange, .video .video__content__header .green {
  height: 17px;
  width: 17px;
  border-radius: 50%;
}
.video .video__content__header .red {
  background: #F72A62;
}
.video .video__content__header .orange {
  background: #FFCD60;
}
.video .video__content__header .green {
  background: #1BCB00;
}
.video .video__content__player {
  width: 100%;
  height: 42.1875vw;
}

@media only screen and (max-width: 1600px) {
  .video .buttons {
    margin-top: 10px;
  }
  .video .buttons .btn {
    font-size: 17px;
  }
  .video .video__content__header {
    padding: 12px;
  }
  .video .video__content__header .red, .video .video__content__header .orange, .video .video__content__header .green {
    height: 15px;
    width: 15px;
  }
}
@media only screen and (max-width: 1300px) {
  .video .buttons {
    margin-top: 7px;
  }
  .video .buttons .btn {
    font-size: 16px;
  }
  .video .video__content {
    margin-top: 35px;
  }
  .video .video__content__header {
    padding: 10px;
    gap: 7px;
  }
  .video .video__content__header .red, .video .video__content__header .orange, .video .video__content__header .green {
    height: 12px;
    width: 12px;
  }
}
@media only screen and (max-width: 900px) {
  .video .buttons {
    margin-top: 5px;
  }
  .video .buttons .btn {
    font-size: 15px;
  }
}
@media only screen and (max-width: 700px) {
  .video .buttons {
    gap: 5px;
  }
  .video .buttons .btn {
    font-size: 12px;
  }
  .video .video__content {
    width: 100%;
    margin-top: 25px;
  }
  .video .video__content__player {
    height: 50.625vw;
  }
}
#gdpr__parent {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
#gdpr__parent input {
  height: auto;
  width: auto;
  cursor: pointer;
}
#gdpr__parent label {
  color: #ECE9E1;
  cursor: pointer;
}
#gdpr__parent label a {
  color: #ECE9E1;
}

@media only screen and (max-width: 1300px) {
  #gdpr__parent label {
    font-size: 15px;
  }
}
@media only screen and (max-width: 700px) {
  #gdpr__parent label {
    font-size: 0.8em;
  }
}/*# sourceMappingURL=style.css.map */