:root{
    --main: #4759FA;
    --menu-bg: #ffffffb8;
    --menu-color: rgb(0, 0, 0);
}
h1{letter-spacing: -0.7px; line-height: 86.1%; font-weight: 800;}
h1 span{color: var(--main);}
p{color: rgba(0, 0, 0, 0.7); line-height: 100.1%; /* 20.262px */
  letter-spacing: -0.14px; font-weight: 300;}
  p span{font-weight: 500; color: rgba(0, 0, 0, 0.8);}

a{cursor: none;}

.outline{
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: var(--main);
    position: fixed;
    top: 0;left: 0;
    z-index: 999999999;
    mix-blend-mode: difference;
    transform: translate(-64px, -64px);
    transition: all 0.2s cubic-bezier(.215, .61, .355, 1);
    pointer-events: none;
}
.outline.hover{background: rgba(0, 0, 0, 0.3); border: 2px solid var(--main);height: 30px; width: 30px;}

.cursor{
    width: 0px;height: 0px;
    border-radius: 100%;
    background: #000;
    position: fixed;
    top: 0;left: 0;
    z-index: 9999999;
    transform: translate(-8px, -8px);
    pointer-events: none;
}

@media (max-width: 768px) {
    .outline{display: none;}
    .cursor{display: none;}
    body{cursor: auto;}
}

/* Menu */

.header{ background-color: var(--menu-bg); position: fixed; top:0;  left:0; z-index: 9999; width: 100%; padding: 20px 15px; border-bottom: 0.7px solid rgba(0, 0, 0, 0.231);}
.header__content{max-width: 1200px; width: 100%;margin: 0 auto; display: flex;justify-content: space-between;}

.header__logo{display: flex; align-items: center;color:var(--menu-color);}
.header__logo img{width: 50px; height: 50px;}

.header__menu{padding: 0;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{color:var(--menu-color); opacity: 0.8;display: block;padding: 16px;font-size: 18px; font-weight: 400;}

@media (max-width: 768px) {
  .header__menu{   
    position: absolute; top:60px; left:0; background-color: var(--menu-bg); width: 100%; height: 100vh;
    height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }
  .header__logo img{width: 40px;height: 40px;}
  .header__menu li{width: 100%;border-bottom: 1px solid #444}
  .menu-open .header__menu{height: 100vh;padding: 3%;}

  .icon-hamburger{height: 50px;width: 40px;margin-left: 20px;padding-top: 13px;}
  .icon-hamburger span{height: 2px; width: 30px;background: var(--menu-color);position: relative;display: block;margin-top: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}

  .menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-9px);}

  .header__quick{display: flex; justify-content: flex-end; width: 50%;}
  
}
@media (min-width: 768px) {
  .header__quick{display: none;}
}




.hero{
    width: 100%;height: 100vh;
    padding-top: 150px;
    margin-bottom: 100px;
}
.hero .col-50:nth-child(1){padding-left: 0px;}
.hero p:nth-child(1){padding-top:80px; padding-bottom: 0;}
.hero h1{
    font-size: 3.4rem;
    font-weight: 800
}
.hero p{padding-right: 20px;font-weight: 300; font-size: 1.55rem; padding-bottom: 13px; padding-top: 10px;}
.hero img{max-width: 570px; max-height: 450px; margin-top: 50px; margin-left: 40px; border-radius: 10px; box-shadow: 0 5px 40px rgba(0,0,0,.5); z-index: 3; position: relative;}
.hero .blob{position: absolute; top: -45%; left: -15%; width: 145%; z-index: 1; opacity: 0.9;}
.button { 
  text-transform: uppercase;background: rgb(113,127,255);
  background: linear-gradient(-385deg, rgba(113,127,255,1) 0%, rgba(0,25,247,1) 72%); color:#fff;
  text-decoration: none;padding: 27px 30px; display: inline-block; font-size: 16px; letter-spacing: 1.4px;
  font-weight: 700; transition: all 0.5s cubic-bezier(.215, .61, .355, 1); opacity: 0.9; cursor: none; font-weight: 900;
}
.button:hover{letter-spacing: 2.2px; opacity: 1;}
.arrow{display: flex; width: 100%; height: 30px; justify-content: center; align-items: center; flex-direction: column; padding-top: 130px; color: var(--main);}
.arrow i{font-size: 50px; opacity: 0.9; font-weight: 100; animation: arrow 2s infinite ease; text-shadow: 0 5px 20px rgba(0,0,0,.5);}
@media (max-width: 768px) {
  .arrow{padding-top: 0px}
}
@keyframes arrow {
    0%{transform: translateY(0px);}
    50%{transform: translateY(20px);}
    100%{transform: translateY(0px);}
}


@media (max-width: 768px) {
  .hero{padding-top: 10px; text-align: center; transform: translateY(20px);}
  .hero .col-50:nth-child(1){padding-left:0px; padding-right: 0;}
  .hero h1{font-size: 2.3rem;}
  .hero p{padding-right: 0px; font-size: 1.2rem; padding-top: 5px;}
  .hero p:nth-child(1){padding-bottom: 0 !important;}
  .hero img{max-width: 380px; margin-left: 15px; transform: translateX(-20px) translateY(-30px);}
  .hero .blob{top: -50%; left: -40%;}
  .button{display: block; margin-bottom: 5px; font-size: 14px; padding: 25px 25px;}
  .hero .button{margin: 5px;}

  .header{padding: 20px;}
  .header__menu{background: #efefef; top: 0%; }
  .menu-open .header__menu{padding-top: 150px;}

  .header__menu li a{font-size: 1.4rem; font-weight: 600; text-transform: uppercase;}

  .header__menu li a{transform: translateX(-30px); opacity: 0; border-bottom: 0px solid #000; color: var(--main);}

  .menu-open .header__menu li a{transform: translateX(0px); transition: all 1s cubic-bezier(.215, .61, .355, 1); opacity: 1;}
  
  #u1{transition-delay: 400ms;}
  #u2{transition-delay: 600ms;}
  #u3{transition-delay: 800ms;}
  #u4{transition-delay: 1000ms;}
  #u5{transition-delay: 1200ms;}
  

}

/* ! Grid System */
.grid { margin: 0 auto; padding: 0 15px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-50{ width: 50%; }

@media (max-width: 991px) {

    .tab-50 { width: 50%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-50 { width: 50%; }
}

.relative{position: relative;}

.section{width: 100%; height: 100vh;}
.section:nth-child(1){margin-top: 400px;}
.section .txt{padding-top: 50px;}
.section .txt:nth-child(1){padding-left: 40px}
.section .txt p{padding-right: 30px; font-size: 1.2rem;}
.section h1{font-size: 3.2rem; border-left: 6px solid var(--main); padding-left: 9px;}
.section img{width: 600px;max-height: 400px; margin-left: 20px; box-shadow: 0 5px 20px rgba(0,0,0,.2);}
.section .button{padding: 24px 30px; font-size: 14px; text-align: center;}

@media (max-width: 768px) {
  .grid{padding: 0;}
  .section .txt:nth-child(1){padding-left: 0px;}
  .section .txt p{padding-right: 10px;}
  .section h1{font-size: 2.3rem; margin-top: 100px;}
  .two{margin-top: 0 !important;}
  .section img{max-width: 360px; margin-left: 5px; margin-top: 20px; border: 0.3px solid rgb(0, 0, 0);}
  .button{font-size: 13px !important; padding: 22px 25px !important;}
}

.design{display: flex; width: 100%; height: 100%; align-items: center; flex-direction: column;}
.portfolio{padding-top: 100px;}
.portfolio img{max-width: 60%; height: 70%; margin: 20px; border-radius: 2%; box-shadow: 0 5px 20px rgba(0,0,0,.10);}
@media (max-width: 768px) {
  .portfolio img{margin: 20px; max-width: 100%; height: 250px !important; object-fit: cover; margin-left: 0; margin-right: 0; margin-left: 10px;}
}

.cs{
  width: 100%;height: 100vh;
  display: flex; width: 100%; height: 100%; align-items: center; flex-direction: column;
}

.cs h1{text-align: center; padding: 0px 350px; font-size: 3.9rem; padding-bottom: 10px; margin-top: 200px;}
.cs p{text-align: center; padding: 0px 250px; font-size: 1.3rem;}
.cs img{max-width: 60%;border-radius: 3px;}
.cs a{padding-bottom: 10px; color: var(--main); text-decoration:underline; font-size: 23px;}
@media (max-width: 768px) {
  .cs h1{font-size: 2.5rem; padding: 0px 0px;}
  .cs p{padding: 0 10px;}
  .cs img{max-width: 90%;}
}

/* blog */
.blog{padding-top: 10px;}
.blog h1{text-align: center; padding: 0px 300px; font-size: 3.8rem; padding-bottom: 10px; margin-top: 200px;}
.flex{width: 80%; height: 100vh; display: flex; position: absolute; margin-left: 10%; margin-top: 30px;}
.card .box{width: 100%; background: rgba(0, 0, 0, 0.21); height: 60%;}
.card{margin: 20px;}
.card h3{font-size: 1.4rem; font-weight: 300; padding-top: 10px;}
.card p{font-size: 1.1rem; font-weight: 200; transform: translateY(-6px);}
.card a{color: var(--main); text-decoration:underline; font-size: 1.1rem; padding: 0; transform: translateY(-20px);}

@media (max-width: 768px) {

  .blog h1{font-size: 2.1rem; padding: 0px 0px;} 
  .flex{
    position:unset;
    display: block;
    margin-left: 0%;
    width: 100%;

  }
  .card .box{width: 100%; height: 400px;}
  .card p{padding-right: 5%;}
}

/* faq */

.icon{transition: all 0.4s cubic-bezier(.215, .61, .355, 1);}
.icon{width: 20px; height: 20px; margin-left: 40px; margin-top: 13px; display: flex; justify-content: center; align-items: center;}
.icon span{width: 22%; height: 4px; background: rgba(0, 0, 0, 0.2); transition: all 1s cubic-bezier(.215, .61, .355, 1);}


.faq__container{margin-top: 80vh; width: 100%; height: 30vh; display: block; position: relative; margin-bottom: 100vh;} 
.faq__container h1{text-align: center; font-size: 3rem; padding-bottom: 30px;}

.faq{
  width: 60%; margin-left: 20%; margin-top: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

.question{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 30px;
}

.question h3{
  font-size: 1.8rem;
  padding-top: 10px;
  font-weight: 400;
}

.answer{
  height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(.215, .61, .355, 1);
}

.answer p{
  padding-top: 0.4rem;
  font-size: 1.3rem;
  padding-left: 40px;
  padding-right: 50px;
  font-weight: 300;
  transform: translateY(20px);
  opacity: 0;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transition-delay: 200ms;
}

.faq.active .answer p{transform: translateY(0px); opacity: 1;}
.faq.active .answer {
  height: 70px ;
}
.faq.active .icon span{background: var(--main);}
@media (max-width: 768px) {
  .faq__container{margin-top: 180vh;}
  .faq__container h1{font-size: 2.4rem}

  .faq{width: 100%; margin-left: 0%;}
  .question{padding: 0px 8px;}
  .answer p{padding-left: 10px; padding-right: 10px;}
  .faq.active .answer{height: 190px;}

  .icon{width: 30px; height: 30px;}
  
}

.start{width: 100%; text-align: center; height: 30vh;}
.start h1{color: var(--main); text-transform: uppercase; padding-bottom: 10px; font-size: 5.5rem;}
@media (max-width: 768px) {
  .start h1{font-size: 2.8rem;}
  .start{height: 20vh; width: 95%; margin-left: 2.5%; margin-bottom: 30px;}
}

footer{width: 100%; height: 70vh; background: var(--main); align-items: flex-start; padding-top: 130px;}
.content{display: flex; justify-content: space-between; padding: 0% 5%; padding-bottom: 0;}
.content a{font-weight: 300; color: #efefef;}
a{padding: 10px;}
footer h1{text-align: center;padding: 6% 10%; padding-bottom: 7%; font-size: 2.6rem; color: #efefef;} 
@media (max-width: 768px) {
  footer{height: 50vh;}
  footer h1{font-size: 2rem; padding: 15% 1%; padding-bottom:8%;}
}









.hidden{
  transition-delay: 100ms;
  opacity: 0;
  transform: scale(0.9);
  transition: all 2s cubic-bezier(.215, .61, .355, 1);
}
.hidden.delay{transition-delay: 600ms; transform: translateY(-40px);}
.show, .show.delay{
  opacity: 1;
  transform: scale(1);
}
.delay--1{transition-delay: 200ms;}
.delay--2{transition-delay: 400ms;}
.delay--3{transition-delay: 600ms;}

.intersection{
  display: block; padding-top: 110vh;
  align-items:center; text-align: center; 
}

.ptt{margin-top: 120vh !important;}