@font-face {
  font-family: "Xolonium";


  src: 
  url('../fonts/Xolonium-Regular.woff2') format('woff2'),
       url("../fonts/Xolonium-Regular.woff") format("woff"),
       url('../fonts/Xolonium-Regular.ttf') format('truetype');
       font-weight: normal;
    font-style: normal;
       font-display: swap;
}

@font-face {
  font-family: "Xolonium";

  src: 

       url('../fonts/Xolonium-Bold.ttf') format('truetype');
         font-weight: bold;
    font-style: normal;
       font-display: swap;
}





@font-face {
    font-family: 'SF UI Display';
    src: url('../fonts/SFUIDisplay-Light.woff2') format('woff2'),
        url('../fonts/SFUIDisplay-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('../fonts/SFUIDisplay-Bold.woff2') format('woff2'),
        url('../fonts/SFUIDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

a:hover{text-decoration: none;opacity: 0.8}
.bg-1{background: rgb(0,0,23);background: -moz-linear-gradient(135deg, rgba(0,0,23,1) 0%, rgba(3,14,50,1) 50%, rgba(20,17,79,1) 100%);background: -webkit-linear-gradient(135deg, rgba(0,0,23,1) 0%, rgba(3,14,50,1) 50%, rgba(20,17,79,1) 100%);background: linear-gradient(135deg, rgba(0,0,23,1) 0%, rgba(3,14,50,1) 50%, rgba(20,17,79,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000017",endColorstr="#14114f",GradientType=1);}
.bg-2{background:#7a00ff!important;}
.bg-3{background:#00001f!important;}
.bg-4{background: #010130!important;}
.bg-5{background: #010130;background: -moz-linear-gradient(180deg, rgba(1,1,48,1) 0%, rgba(0,0,32,1) 70%);background: -webkit-linear-gradient(180deg, rgba(1,1,48,1) 0%, rgba(0,0,32,1) 70%);background: linear-gradient(180deg, rgba(1,1,48,1) 0%, rgba(0,0,32,1) 70%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010130",endColorstr="#000020",GradientType=1);}
.bg-green{background: #69b87e;}
.bg-black{background: #000;}
.bg-white{background: #fff;}
.opacity-0{opacity: 0;-webkit-transition: opacity 0.3s ease-in-out;-moz-transition: opacity 0.3s ease-in-out;-ms-transition: opacity 0.3s ease-in-out;-o-transition: opacity 0.3s ease-in-out;transition: opacity 0.3s ease-in-out;}


.left-1{left: 100px!important;transition-property: left;transition-duration: 0.5s;}
.left-2{left: 400px!important;transition-property: left;transition-duration: 0.2s;}



.large-text-1{font-size: 38px;font-weight: bold;}
.large-text-2{font-size: 26px;}
.large-text-3{font-size: 22px;}
.color-white, .color-white a{color: #fff;}
.color-1, .color-1 a{color: #6699ff;}
.color-2, .color-2 a{color: #69b87e;}
.color-3, .color-3 a{color: #00001f;}
.color-4, .color-4 a{color: #fc0aff;}
.margin-top-20px{margin-top:20px;}
.margin-top-50px{margin-top:50px;}
.margin-top-100px{margin-top:100px;}

.margin-bottom-30px{margin-bottom: 30px;}
.margin-bottom-100px{margin-bottom: 100px;}
.margin-bottom-200px{margin-bottom: 200px;}

.padding-20px{padding: 20px;}
.padding-30px{padding: 30px;}

.border-radius-15px{border-radius: 15px;}

.text-center{text-align: center;}
.text-bold{font-weight: bold;}
.span-bold span{font-weight: bold;}
.nowrap{white-space: nowrap;}

.relative{position: relative;}

.btn-1{padding: 10px 20px;border-radius: 50px;text-decoration: none;cursor: pointer;}
.btn-1:hover{opacity: 0.8;}
.btn-gradient-1{background: rgb(74,78,250);background: -moz-linear-gradient(90deg, rgba(74,78,250,1) 0%, rgba(189,47,219,1) 65%, rgba(236,89,206,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(74,78,250,1) 0%, rgba(189,47,219,1) 65%, rgba(236,89,206,1) 100%);
background: linear-gradient(90deg, rgba(74,78,250,1) 0%, rgba(189,47,219,1) 65%, rgba(236,89,206,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4a4efa",endColorstr="#ec59ce",GradientType=1);}
.text-gradient-1{background: -webkit-linear-gradient(45deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.font-sf-ui-display{font-family: 'SF UI Display', sans-serif}
.hidden{display: none!important;}

h1{font-size: 38px;font-weight: bold;font-family: 'Xolonium', sans-serif;}
h1 span{display: block;font-size: 34px;line-height: 1.1;white-space: nowrap;font-weight: normal;}
h2{font-size: 24px;font-weight: normal;}
h2 span{font-weight: bold;white-space: nowrap;}
html{font-family: "Xolonium", "Arial", sans-serif;font-weight: normal;line-height: 1.4;background: gray;color:#fff;}
body{margin: 0;}
img{max-width: 100%;height: auto;}
.container-full{position: relative;display: flex;width: 100%;box-sizing: border-box;border-right: 0;overflow: hidden;}
.container{position: relative;display: flex;width: 100%;max-width: 1400px;margin: 0 auto;box-sizing: border-box;border-right: 0;}
.container-inner{box-sizing: border-box;padding: 20px;}

.col-50{width: 100%;}
.col-100{width: 100%;}
.col-inner-1{box-sizing: border-box;padding: 20px;}
.content-center{justify-content: center;}

.flex{display: flex;}
.space-around{justify-content: space-around;}
.direction-column{flex-direction: column;}
.justify-center{justify-content: center;}
.items-center{align-items: center;}

header{display:block;width:100%;position:fixed;padding-top: 0px;z-index: 3}
.header-top{display:block;width:100%;height:15px;}
.header-content{display:block;width:100%;height:65px;background:none;text-align:left;box-sizing:border-box;padding: 8px 10px 10px 10px;
clip-path: polygon(0 60px, 0 0, 100% 0, 100% 40px, 50% 40px, 46% 60px, 32% 60px, 30% 60px);}
.header-content-bg{position: absolute;background: #050e3d;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;opacity: 0.7;}
.header-border{display:block;width:100%;height:52px;position:absolute;top:30px;background: #fff;
clip-path: polygon(0px 30px, 25px 30px, 30% 30px, 32% 30px, 46% 30px, 50% 10px, calc(100% - 0px) 10px, calc(100% - 0px) 12px, 50% 12px, 46% 32px, 32% 32px, 50% 32px, 25px 32px, 0px 32px);}

.header-border:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background: linear-gradient(45deg, #454ebe, #525cd4, #7a00ff);
    position: absolute;
    top: 2px;
    left: 0;
    background-size: 200%;
    z-index: 1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
}

.header-logo-container{float:left;}
.header-logo{width:100%;font-size:22px;font-weight: bold;}
.header-title{width:100%;float:right;font-size:12px;}
.header-after-logo{display: inline-flex;float: right;width: auto;justify-content: space-between;}
.header-after-logo .top-info-text{margin-top: 3px;}
.header-left-container{display:block;width:30%;height:0px;box-sizing:border-box;margin-top: 0px;margin-left: 10px;padding: 10px;border-left: 0px;}
.header-content .arrows-container-1{display: none;width:50px;height:25px;float: left;margin:0px 5px;}
.arrow-1{display:inline-block;width:20%;height:100%;margin-right:2px;clip-path: polygon(55% 0%, 100% 50%, 55% 100%, 0% 100%, 45% 50%, 0% 0%);background:#7a00ff;}
.header-left-text{float-left;margin-left: 0;padding: 0 10px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
.header-right-container{display:block;width:52%;height:50px;float:right;box-sizing:border-box;margin-top: -40px;margin-right: 0px;padding: 0px 10px 10px 5px;}
.contact-btns-container{width:auto;float:left;box-sizing: border-box;padding: 0 0 0 10px;}
.header-contact-btn{display:block;width:25px;float:left;margin: 0 5px 0px 5px;border-radius:50%;}
.header-contact-btn img{width: auto;max-width:25px;height:auto;}

.top-info-container{width:calc(100% - 270px);float:left;padding:15px 0 0 0;text-align:center;}
.top-info-text{font-size:10px;line-height: 17px;}
.top-info-text span{font-size:16px;}


.screen-1{height: 100vh;height: calc(100vh - 60px);min-height: 370px;overflow: hidden;}
.screen-1-content-1{display: flex;flex-direction: column;justify-content: space-around;position: relative;margin: 20px 0 0 10px;z-index: 2;}
.screen-1-content-1 h1{display: flex;flex-direction: column;}
.screen-1-bg-2{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: rgb(0,0,23);
background: -moz-linear-gradient(160deg, rgba(0,0,23,1) 0%, rgba(49 19 126) 70%, rgba(90 45 138) 100%);
background: -webkit-linear-gradient(160deg, rgba(0,0,23,1) 0%, rgba(49 19 126) 70%, rgba(90 45 138) 100%);
background: linear-gradient(160deg, rgba(0,0,23,1) 0%, rgba(49 19 126) 70%, rgba(90 45 138) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000017",endColorstr="#14114f",GradientType=1);opacity: 0.2;z-index: 1}

.film-container{display: flex;position: absolute;top: -150px;right: -300px;bottom: 0;flex-direction: row;gap:20px;overflow: hidden;transform-origin: 170% 0%;transform: perspective(800px) rotateX(25deg) rotateY(-15deg);opacity: 0.8;}
.film{width: 600px;height: 1200px;display: flex;flex-direction: column;gap: 10px;}
.frame{display: block;width: 600px;height: auto;min-height: 100px;float: left;box-sizing: border-box;background: #fff;position: relative;border: 1px solid #7a00ff;border-radius: 3px;overflow: hidden;}
.frame img{width: 100%;height: 100%;}


.screen-2{padding: 0px 0px 50px 0px;}
.screen-2 h2{font-size: 22px;margin-bottom: 0px;} 
.services{display: grid;grid-template-columns: repeat(1, 1fr);grid-gap: 30px;margin-top: 40px;}
.service-item{display: flex;flex-direction: column;justify-content: space-between;gap: 20px;border: 2px solid #fff;border-radius: 15px;box-sizing: border-box;padding: 20px 25px 25px 25px;opacity: 0.9;transform: translateY(30px);transform: scale(0.8);transition: all 0.5s, opacity 0.5s;}
.service-title{font-size: 32px;font-weight: bold;}
.service-title span{font-size: 14px;white-space: nowrap;}
.service-btn{margin-bottom: 10px;}


.screen-3{clip-path: polygon(0px 17px, 25px 17px, 109px 17px, 125px 0px, 100% 0px, 100% 0, 100% 100%, 0 100%);}
.screen-3-top{width: 100%;height: 24px;background: #6699ff;clip-path: polygon(0px 17px, 25px 17px, 109px 17px, 125px 0px, 100% 0px, 100% 4px, 127px 4px, 110px 21px, 0 21px);}
.screen-3-top-stripes{position: absolute;width: 120px;height: 14px;background-image: url("../img/stripes.svg");background-size: cover;background-repeat: no-repeat;background-position: right top;}
.screen-3-bottom{width: 100%;height: 20px;position: absolute;bottom: 0;background: #6699ff;clip-path: polygon(0 16px, calc(100% - 70px) 16px, calc(100% - 50px) 0px, 100% 0px, 100% 20px, 0px 20px);}
.screen-3-inner-bg{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-image: url("../img/grid.svg");background-size: 2000px;background-repeat: no-repeat;background-position: center bottom -5%;}
.screen-3-inner{min-height: 500px;flex-direction: column;}
.screen-3-height{min-height: 500px;}
.fish{position: absolute;width: 100px;align-items: center;}
#fish_1{top: 150px;left: 200px;}
#fish_2{top: 260px;left: 400px;}
.fish-inner{position: absolute;width: 100px;align-items: center;animation: fish 4s infinite;}

.fish-tale{animation: fishTale 3s infinite;}
.fish-tale svg{max-width: 100%;}
.fish-tale .str0 {animation: fishTaleColor 3s infinite;}

.screen-4{flex-direction: column;}
.screen-4-col-1{display: flex;flex-direction: column;column-gap: 20px;padding: 30px;}
.screen-4-col-2{display: flex;flex-direction: column;}
.projects-container{position: relative;display: flex;flex-direction: row;justify-content: space-around;align-items: center;padding-bottom: 160px;}
.project-item-frame{display: flex;max-width: 50%;animation: phone_animation 4s ease-in-out infinite;border-top: 6px solid #000;border-right: 4px solid #000;border-bottom: 6px solid #000;border-left: 4px solid #000;border-radius: 15px;
  transform: perspective(400px) rotate3d(-1,3, 0, -8deg);box-shadow: 2px 1px 1px #989898;overflow: hidden;}
.project-item{position: relative;display: flex;flex-direction: column;justify-content: space-around;align-items: center;}
#next-project, #prev-project{cursor: pointer;}

.project-description-container{position: absolute;width: 1000px;bottom: 30px;left: 0px;padding: 20px 60px;left: 0; transition-property: left;transition-duration: 0.5s;}
.project-description-bg{position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: rgb(102,153,255);
background: -moz-linear-gradient(80deg, rgba(102,153,255,0) 0%, rgba(102,153,255,1) 70%);
background: -webkit-linear-gradient(80deg, rgba(102,153,255,0) 0%, rgba(102,153,255,1) 70%);
background: linear-gradient(80deg, rgba(102,153,255,0) 0%, rgba(102,153,255,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6699ff",endColorstr="#6699ff",GradientType=1);}
.project-description{position: relative;font-size: 12px;z-index: 1;left: 0; transition-property: left;transition-duration: 0.3s;}

.screen-5{flex-direction: column-reverse;justify-content: space-around;}

.text-stripe{padding: 30px 10px;font-size: 26px;}

.question{font-size: 20px;font-weight: bold;}

.contacts-container{gap:10px;}
.contact-item{width: 300px;gap:10px;}



.block {
      width:700px;
      height:200px;
      overflow:hidden;
      background:#000000;
    }
    .block-scroll > div {
      width:300px;
      height:200px;
      margin-right:50px;
      background:#bc1b1b;
      float:left;
      position: relative;
    }
    .block-scroll{
      position: relative;
      width: 20000em;
    }
    

.scale-1{
  transform-style: preserve-3d;
  transform: scale(1);
  animation-delay: 250ms;
  animation: scale 1s infinite; animation-iteration-count:1;
}
.scale-2{
  transform-style: preserve-3d;
  transform: scale(1);
  animation-delay: 750ms;
  animation: scale 1.5s infinite; animation-iteration-count:1;
}
.scale-3{
  transform-style: preserve-3d;
  transform: scale(1);
  animation-delay: 1250ms;
  animation: scale 2s infinite; animation-iteration-count:1;
}


@keyframes fish {
  0% {
    transform: perspective(400px) rotate3d(2, 3, 0, 8deg);

  }
  50% {
    transform: perspective(800px) rotate3d(-2, -3, 1, -8deg) ;


  }
  100% {
    transform: perspective(400px) rotate3d(2, 3, 0, 8deg);


  }
}

@keyframes fishTale {
  0% {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg);
    transform-origin: 0% 0%; 

  }
  25% {
    transform: perspective(400px) rotateX(0deg) rotateY(-18deg);
    transform-origin: 0% 0%; 


  }
  50% {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg);
    transform-origin: 0% 0%; 


  }
  75% {
    transform: perspective(400px) rotateX(3deg) rotateY(18deg);
    transform-origin: 0% 0%; 


  }
  100% {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg);
    transform-origin: 0% 0%; 


  }
}

@keyframes fishTaleColor {
  0% {
    stroke:#9900CC;

  }
  25% {
    stroke:#710296;


  }
  50% {
    stroke:#9900CC;


  }
  75% {
    stroke:#b421e7;


  }
  100% {
    stroke:#9900CC;


  }
}

@keyframes phone_animation {
  0% {
    transform: perspective(400px) rotate3d(-1, 3, 0, -8deg);
    box-shadow: 2px 1px 1px #989898;
  }
  50% {
    transform: perspective(400px) rotate3d(-1, -3, 0, -8deg) ;
    box-shadow: -2px 1px 1px #989898;

  }
  100% {
    transform: perspective(400px) rotate3d(-1, 3, 0, -8deg);
    box-shadow: 2px 1px 1px #989898;

  }
}

@keyframes scale {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale_h {
  0% {
    transform: scale(1, 0.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes scale_h_to_small {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 0.1);
  }
}
@keyframes scale_push {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes rotate {
  50% {
    transform: rotateY(90deg);
  }
}
@keyframes rotateA {
  50% {
    transform: rotateY(0deg);
  }
}


.content-1{display:block;width:calc(100% - 20px);height:300px;position:relative;float:left;margin:10px;box-sizing:border-box;}
.content-1-inner-bg{width:100%;height: 300px;position:absolute;background:#525cd4;clip-path: polygon(0 300px, 0 60px, 10px 50px, 10px 10px, 20px 0, 100% 0, 100% 100%);}
.content-1-inner-bg:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background: linear-gradient(45deg, #ffffff, #7a00ff, #ffffff);
    position: absolute;
    top: 2px;
    left: 0;
    background-size: 200%;
    z-index: 1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    transition: opacity .3s ease-in-out;
}
.content-1-inner-content{width: 100%;height:300px;position:relative;background: linear-gradient(45deg, #000000, #000000, #28084a);clip-path: polygon(2px 298px, 2px 60px, 12px 52px, 12px 12px, 22px 2px, calc(100% - 2px) 2px, calc(100% - 2px) 298px);overflow:hidden;}
.content-tr-bg----{width:100%;height:100%;position:absolute;background:linear-gradient(90deg, #000000, #28084a);opacity:0.5;}
.content-1-title{width:100%;box-sizing:border-box;padding:5px 10px 5px 60px;text-align:left;color:#fff;border-bottom:1px solid #7a00ff;}
.content-1-content{padding: 10px 10px 10px 20px;text-indent:10px;overflow:auto;}
.content-1-text{}

.container-1{width: 100%;}
.container-2{min-width: 70%;position: unset;}
.bottom-nav-container{position: absolute;bottom: 67px;display: flex;flex-direction: row;gap: 30px;align-items: baseline;}


.form-container{display: none;position: fixed;top: 0;right: 0;bottom: 0;left: 0;padding: 10px;background: #000125;}

.modal-container{display: contents;position: absolute;width: 100%;min-height: 450px;top: 0;}


.glow-on-hover {width: 100px;height: 100px;outline: none;color: #fff;background: #030011;cursor: pointer;position: relative;z-index: 0;border-radius: 50%;}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background: linear-gradient(45deg, #454ebe, #525cd4, #7a00ff);
    position: absolute;top: -2px;left:-2px;background-size: 400%;z-index: -1;filter: blur(5px);width: calc(100% + 4px);height: calc(100% + 4px);animation: glowing 20s linear infinite;opacity: 0;transition: opacity .3s ease-in-out;border-radius: 50%;}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #030011;
    left: 0;
    top: 0;
    border-radius: 50%;
}




.btn-active:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background: linear-gradient(45deg, #454ebe, #525cd4, #7a00ff);
    position: absolute;top: -2px;left:-2px;background-size: 400%;z-index: -1;filter: blur(5px);width: calc(100% + 4px);height: calc(100% + 4px);animation: glowing 20s linear infinite;opacity: 0;transition: opacity .3s ease-in-out;border-radius: 50%;}



.btn-active:after {
    background: transparent;
}

.btn-active:before {
    opacity: 1;
}

.btn-active:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #030011;
    left: 0;
    top: 0;
    border-radius: 50%;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@keyframes show {
    from {
    opacity: 0;
    }

    to {
    opacity: 1;
    }
}





.footer{display: flex;position: fixed;width: calc(100% - 20px);height: 45px;right: 10px;bottom: 0;left: 10px;box-sizing: border-box;justify-content: space-between;}
.footer-left-block{flex-grow: 3;padding-top: 3px;padding-right: 3px;padding-left: 0px;box-sizing: border-box;border-top: 2px solid #6699ff;}
.footer-btn{display: flex;height: 30px;margin-right: -10px;background: #fb0cff;flex-wrap: wrap;justify-content: center;align-content: center;clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 10px, 100% 100%, 0 100%);}
.footer-btn:hover{opacity: 0.8;}
.footer-right-block{float: right;}
.footer-right-block img{height: 35px;}



.modal-1{position: absolute;top: 60px;right: 10px;bottom: 60px;left:10px;box-sizing: border-box;padding-top: 5px;clip-path: polygon(0px 100%, 0px 0px, 100% 0px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);overflow: hidden;}
.modal-top-border{height: 25px;background: #6a9cff;clip-path: polygon(0px 23px, 20px 0px, 150px 0px, 170px 23px, 100% 23px,100% 25px, 168px 25px, 148px 2px, 22px 2px, 2px 25px, 0px 25px);}
.modal-right-border{position: absolute;width: 2px;background: #6a9cff;top: 30px; right: 0px;bottom: 50px;}
.modal-bottom-border{position: absolute;height: 50px;right: 0;bottom: 0;left: 0;background: #6a9cff;clip-path: polygon(0px 48px, calc(100% - 50px) 48px, calc(100% - 2px) 0px, 100% 0, calc(100% - 50px) 50px, 0 50px);}
.modal-left-border{position: absolute;width: 2px;background: #6a9cff;top: 30px; left: 0px;bottom: 0px;}
.modal-title{position: absolute; width: 160px;height: 20px; top: 10px;left: 5px;box-sizing: border-box;padding: 3px 15px 0 15px;background: #6a9cff;font-size: 12px;line-height: 12px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;clip-path: polygon(0px 20px, 18px 0px, 143px 0px, 160px 20px, 0 20px);}
.modal-content-bg{position: absolute;top: 33px; right: 5px;bottom: 5px;left: 5px;background: #673ab7;background: rgb(167,132,231);background: -moz-linear-gradient(0deg, rgba(167,132,231,1) 0%, rgba(68,58,183,1) 15%, rgba(68,58,183,1) 85%, rgba(167,132,231,1) 100%);background: -webkit-linear-gradient(0deg, rgba(167,132,231,1) 0%, rgba(68,58,183,1) 15%, rgba(68,58,183,1) 85%, rgba(167,132,231,1) 100%);background: linear-gradient(0deg, rgba(167,132,231,1) 0%, rgba(68,58,183,1) 15%, rgba(68,58,183,1) 85%, rgba(167,132,231,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a784e7",endColorstr="#a784e7",GradientType=1);clip-path: polygon(0px 100%, 0px 0px, 100% 0px, 100% calc(100% - 46px),  calc(100% - 46px) 100%, 0 100%);opacity: 0.3;}
.modal-content-outer{position: absolute;top: 33px; right: 5px;bottom: 5px;left: 5px;clip-path: polygon(0px 100%, 0px 0px, 100% 0px, 100% calc(100% - 46px),  calc(100% - 46px) 100%, 0 100%);}
.modal-content{position: absolute;top: 10px; right: 10px;bottom: 10px;left: 10px;overflow: auto;scrollbar-width:thin;scrollbar-color:#5a4bdc black;}
.modal-close{position: absolute;width: 24px;height: 24px;top: 0;right: 0;box-sizing: border-box;border: 2px solid #6a9cff;text-align: center;cursor: pointer;}
.modal-close svg{width: auto;height: 20px;fill: #fc0aff;}
.modal-1-active{display: block;opacity: 1;animation: show 1s;transform-style: preserve-3d;
  transform: scale(1);
  animation-delay: 250ms;
  animation: scale_h 0.3s infinite; animation-iteration-count:1;}
.modal-1-hidden-t{display: block;filter: alpha(opacity=0);opacity: 0;-webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  transform-style: preserve-3d;
  transform: scale(1, 1);
  animation-delay: 250ms;
  animation: scale_h_to_small 0.3s infinite; animation-iteration-count:1;
}
.modal-1-hidden{display: none;opacity: 0;}



.modal-2{position: fixed;top: 100px;right: 10px;bottom: 80px;left:10px;box-sizing: border-box;padding-top: 5px;clip-path: polygon(0px 100%, 0px 0px, 100% 0px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);overflow: hidden;z-index: 999}
.modal-top-border{height: 25px;background: #6a9cff;clip-path: polygon(0px 23px, 20px 0px, 150px 0px, 170px 23px, 100% 23px,100% 25px, 168px 25px, 148px 2px, 22px 2px, 2px 25px, 0px 25px);}
.modal-right-border{position: absolute;width: 2px;background: #6a9cff;top: 30px; right: 0px;bottom: 50px;}
.modal-bottom-border{position: absolute;height: 50px;right: 0;bottom: 0;left: 0;background: #6a9cff;clip-path: polygon(0px 48px, calc(100% - 50px) 48px, calc(100% - 2px) 0px, 100% 0, calc(100% - 50px) 50px, 0 50px);}
.modal-left-border{position: absolute;width: 2px;background: #6a9cff;top: 30px; left: 0px;bottom: 0px;}
.modal-title{position: absolute; width: 160px;height: 20px; top: 10px;left: 5px;box-sizing: border-box;padding: 3px 15px 0 15px;background: #6a9cff;font-size: 12px;line-height: 12px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;clip-path: polygon(0px 20px, 18px 0px, 143px 0px, 160px 20px, 0 20px);}
.modal-content-bg{position: absolute;top: 33px; right: 5px;bottom: 5px;left: 5px;background: #673ab7;background: rgb(167,132,231);background: -moz-linear-gradient(0deg, rgba(167,132,231,1) 0%, rgba(68,58,183,1) 15%, rgba(68,58,183,1) 85%, rgba(167,132,231,1) 100%);background: -webkit-linear-gradient(0deg, rgba(167,132,231,1) 0%, rgba(68,58,183,1) 15%, rgba(68,58,183,1) 85%, rgba(167,132,231,1) 100%);background: linear-gradient(0deg, rgba(167,132,231,1) 0%, rgba(68,58,183,1) 15%, rgba(68,58,183,1) 85%, rgba(167,132,231,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a784e7",endColorstr="#a784e7",GradientType=1);clip-path: polygon(0px 100%, 0px 0px, 100% 0px, 100% calc(100% - 46px),  calc(100% - 46px) 100%, 0 100%);opacity: 0.3;}
.modal-content-outer{position: absolute;top: 33px; right: 5px;bottom: 5px;left: 5px;clip-path: polygon(0px 100%, 0px 0px, 100% 0px, 100% calc(100% - 46px),  calc(100% - 46px) 100%, 0 100%);}
.modal-content{position: absolute;top: 10px; right: 10px;bottom: 10px;left: 10px;overflow: auto;scrollbar-width:thin;scrollbar-color:#5a4bdc black;}
.modal-close{position: absolute;width: 24px;height: 24px;top: 0;right: 0;box-sizing: border-box;border: 2px solid #6a9cff;text-align: center;cursor: pointer;}
.modal-close svg{width: auto;height: 20px;fill: #fc0aff;}
.modal-2-active{display: block;opacity: 1;animation: show 1s;transform-style: preserve-3d;
  transform: scale(1);
  animation-delay: 250ms;
  animation: scale_h 0.3s infinite; animation-iteration-count:1;}
.modal-2-hidden-t{display: block;filter: alpha(opacity=0);opacity: 0;-webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  transform-style: preserve-3d;
  transform: scale(1, 1);
  animation-delay: 250ms;
  animation: scale_h_to_small 0.3s infinite; animation-iteration-count:1;
}
.modal-2-hidden{display: none;opacity: 0;}
#modal-2-overlay{display: none;position: fixed;top: 0; right: 0;bottom: 0;left: 0px;background: #000;opacity: 0.9;}


.mobile{display: unset;}
.desktop{display: none;}

@media only screen
and (min-width : 360px) 
{
  .header-logo{width:100%;font-size:24px;font-weight: bold;}
  .top-info-text {font-size: 12px;line-height: 17px;}
  .large-text{font-size: 44px;font-weight: bold;}
  .header-content  .arrows-container-1{display: block;}

  .project-description{position: relative;font-size: 9px;z-index: 1;left: 0; transition-property: left;transition-duration: 0.3s;}
}

@media only screen
and (min-width : 380px) 
{
    .top-info-text{font-size:13px;}
    .top-info-text span{font-size:18px;}

    .project-description{position: relative;font-size: 14px;z-index: 1;left: 0; transition-property: left;transition-duration: 0.3s;}

}

@media only screen
and (min-width : 481px) 
{
    .header-border{clip-path: polygon(0px 30px, 25px 30px, 90px 30px, 150px 30px, 170px 30px, 190px 10px, 100% 10px, 100% 12px, 190px 12px, 170px 32px, 160px 32px, 150px 32px, 25px 32px, 0px 32px);}
    .header-content{clip-path: polygon(0 60px, 0 0, 100% 0, 100% 40px, 190px 40px, 170px 60px, 10px 60px, 0px 60px)}
}


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

.left-1{left: 100px!important;transition-property: left;transition-duration: 1s;}
.left-2{left: 800px!important;transition-property: left;transition-duration: 0.5s;}

.header-after-logo{width: calc(100% - 180px);}
.header-right-container{float: left;margin-left: 190px;}

.services{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 15px;}
.service-item{border: 2px solid #fff;border-radius: 15px;box-sizing: border-box;padding: 10px;}
.service-title{font-size: 24px;font-weight: bold;}
   
.modal-container{display: flex;}
.modal-1{top: 30px;}

.mobile{display: none;}
.desktop{display: unset;}
}

@media only screen and (orientation:landscape) and (min-width : 767px) {
  .col-50{width: 50%;}
  .screen-3-inner{min-height: 500px;flex-direction: row;}
.screen-3-height{min-height: 500px;}
.screen-4{flex-direction: row;}
.projects-container{display: flex;flex-direction: row;}
.project-item{display: flex;justify-content: space-around;}
.project-item img{max-height: 500px}

.screen-5{flex-direction: row;justify-content: space-around;}
}


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


h1{font-size: 68px;}
h1 span{font-size: 44px;}
h2{font-size: 32px;}
.header-right-container{float: left;margin-left: 190px;}

.large-text-1{font-size: 58px;font-weight: bold;}

.col-50{width: 50%;}
.col-100{width: 100%;}

.top-info-text {font-size: 18px;}
.top-info-text span {font-size: 22px;}

.header-contact-btn {margin: 0 7px 0px 7px;}

.screen-1{height: 100vh;overflow: hidden;}
.screen-1-content-1{margin: 20px 0 0 90px;}


.film-container{display: flex;position: absolute;top: -150px;right: 0;bottom: 0;flex-direction: row;gap:20px;overflow: hidden;transform-origin: 170% -50%;transform: perspective(800px) rotateX(25deg) rotateY(-15deg);opacity: 0.8;}
.film{width: 600px;height: 1200px;display: flex;flex-direction: column;gap: 10px;}
.frame{display: block;width: 600px;height: auto;float: left;box-sizing: border-box;background: #fff;position: relative;overflow: hidden;}
.frame img{width: 100%;height: 100%;}

.screen-2{padding: 20px 50px;}
.screen-2 h2{font-size: 32px;}
.services{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 50px;margin-bottom: 40px}
.service-item{border: 2px solid #fff;border-radius: 15px;box-sizing: border-box;padding: 20px 25px 25px 25px;}
.service-title{font-size: 36px;font-weight: bold;}
.service-title span{font-size: 18px;white-space: nowrap;}

.screen-3{clip-path: polygon(0px 30px, 25px 30px, 240px 30px, 270px 0px, 100% 0px, 100% 0, 100% 100%, 0 100%);}
.screen-3-top{width: 100%;height: 34px;background: #6699ff;clip-path: polygon(0px 30px, 25px 30px, 240px 30px, 270px 0px, 100% 0px, 100% 4px, 272px 4px, 243px 34px, 0 34px);}
.screen-3-top-stripes{position: absolute;width: 260px;height: 28px;background-image: url("../img/stripes.svg");background-size: cover;background-repeat: no-repeat;background-position: right top}
.screen-3-bottom{height: 30px;clip-path: polygon(0 26px, calc(100% - 70px) 26px, calc(100% - 50px) 0px, 100% 0px, 100% 30px, 0px 30px);}
.screen-3-inner{min-height: 500px;flex-direction: row;}
.screen-3-height{min-height: 500px;}


.screen-4{flex-direction: row;}
.screen-4-col-2{display: flex;flex-direction: column;}
.projects-container{display: flex;flex-direction: row;}
.project-item{display: flex;justify-content: space-around;}
.project-item img{max-height: 700px}

.text-stripe{padding: 50px 30px;font-size: 36px;}

.screen-5{flex-direction: row;justify-content: space-around;}

.modal-container{display: flex;}
.modal-1{top: 30px;right: 20px;left: 20px;}



.footer{width: 30%;margin-left: calc(70% - 10px);padding-right: 10px;padding-left: 0px;}
.footer-left-block{padding-left: 3px;}

.mobile{display: none;}
.desktop{display: unset;}
}


@media only screen
and (min-width : 1400px) 
{
h1{font-size: 88px;}
h1 span{display: block;font-size: 64px;line-height: 1.1;white-space: nowrap;font-weight: normal;}
.screen-2 h2{margin-bottom: 40px;}

.header-border{height:62px;top:30px;clip-path: polygon(0px 50px, 35px 50px, 90px 50px, 250px 50px, 270px 50px, 290px 30px, 100% 30px, 100% 32px, 290px 32px, 270px 52px, 260px 52px, 250px 52px, 35px 52px, 0px 52px);}
.header-content{height:85px;padding: 8px 10px 10px 20px;clip-path: polygon(0 80px, 0 0, 100% 0, 100% 60px, 290px 60px, 270px 80px, 10px 80px, 0px 80px);}
.header-logo-container {float: left;}
.header-logo{width:100%;font-size:36px;}
.header-title{width:100%;float:right;font-size:20px;}
.header-after-logo {width: calc(100% - 300px);}
.header-after-logo .top-info-text {margin-top: 7px;}
.top-info-text{font-size:32px;line-height: 32px;}
.top-info-text span{font-size:38px;}
.header-content .arrows-container-1 {width: 60px;height: 40px;}
.contact-btns-container {padding: 0 20px 0 10px;font-size: 32px;}
.header-contact-btn {width: 40px;margin: 0 15px 0px 15px;}
.header-contact-btn img {max-width: 40px;}

.services{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 70px;}
.service-item{border: 2px solid #fff;border-radius: 15px;box-sizing: border-box;padding: 30px;}
.service-title{font-size: 24px;font-weight: bold;}

}