@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
@import url('https://use.fontawesome.com/releases/v6.4.2/css/all.css');

#home{
    background-image:linear-gradient(rgb(0,0,0,0.9),rgb(0,0,0,0.6)),url('../bg_1.jpg');
    background-size:cover;
    z-index:999;
    position:relative;
}

#about{
    background:#fff;
}



.socials{
   
   display:flex;
   justify-content:center;
   align-items:center;
   margin:0;
  
}

#mobile-lang{
    display: none;
    position: absolute;
    top: 25%;
    right: 0;
    z-index: 1000;
    margin: 8px;
    color:#e3e3e3;
    font-size:1em;
    text-decoration:none;
    font-family:"Poppins",sans-serif;
    width:auto;
}
@media (max-width: 768px) {
    #mobile-lang{
        display: block;
    }
}

.socials ul{
  font-family:'Roboto Condensed', sans-serif;
  display:flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 1000px) {
  .socials ul {
    gap:50px;
    flex-direction: column; 
    
  }
  .socials a{
    transform:rotate(0deg) skew(0deg) translate(0,0) !important;
  }
}
.socials li{
  list-style:none;
  margin:0 5px;
}

.socials .fa-brands{
  color:#262626;
  font-size:40px;
  line-height:80px;
  transition:.5s;
  padding-right:14px;
}
.socials a{
  width:210px;
  height:80px;
  background:#fff;
  text-decoration:none;
  display: block;
  text-align:left;
  padding-left:20px;
  transform:rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow:-20px 20px 10px #00000080;
  transition:.7s;
  font-weight:900;
}

.socials a span{
  color:#262626;
  padding:0;
  margin:0;
  position:absolute;
  top:30px;
  letter-spacing:4px;
  transition: .7s;
  
}
.socials a:before{
  content:'';
  position:absolute;
  height:100%;
  width:20px;
  background:#b1b1b1;
  top:10px;
  left:-20px;
  transform:rotate(0deg) skewY(-45deg);
}
.socials a:after{
  content:'';
  position:absolute;
  height:20px;
  width:100%;
  background:#b1b1b1;
  bottom:-20px;
  left:-10px;
  transform: rotate(0deg) skewX(-45deg);
}
.socials a:hover{
  transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow:-50px 50px 50px #00000080;
}
.socials li:hover .fa-brands,
.socials li:hover span{
  color:#fff;
}
.socials li:hover:nth-child(1){
  & a{
    background:#3b5998;
    &::before{
      background:#365492;
    }
    &::after{
      background:#4a69ad;
    }
  }
  
}
/* .socials li:hover:nth-child(2){
  & a{
    background:#00aced;
    &::before{
      background:#097aa5;
    }
    &::after{
      background:#53b9e0;
    }
  }
  
}
.socials li:hover:nth-child(3){
  & a{
    background:#000;
    &::before{
      background:#fe2d52;
    }
    &::after{
      background:#28ffff;
    }
  }
  
} */
.socials li:hover:nth-child(2){
  & a{
    background: radial-gradient(circle at 90% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    &::before{
      background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }
    &::after{
      background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }
  }
  
}

/* Text on the header  */



.text-container{
    margin:0;
    /* height:100vh; */
    /* background:#111; */
    display:flex;
    justify-content:center;
    align-items:center;
    
  }
  .text-container svg{
    width:100%;
    height:300px;
    position:relative;
    left:50%;
  }
  @keyframes stroke{
    100%{
      stroke-dashoffset: -400;
    }
  }
  
  .text-container .text{
    font: 9em/1 "Open Sans", "Impact";
    text-transform:uppercase;
    stroke-width:3;
    stroke-linejoin:round;
    stroke-dasharray:70 330;
    stroke-dashoffset:0;
    animation:stroke 6s infinite linear;
    fill:none;
    &:nth-child(5n+1){
      stroke:#edf6f9;
      animation-delay:-1.2s;
    }
    &:nth-child(5n+2){
      stroke:#e73323;
      animation-delay:-2.4s;
    }
    &:nth-child(5n+3){
      stroke:#e73323;
      animation-delay:-3.6s;
    }
    &:nth-child(5n+4){
      stroke:#edf6f9;
      animation-delay:-4.8s;
    }
    &:nth-child(5n+5){
      stroke:#edf6f9;
      animation-delay:-6s;
    }
  }