html,
body {
    height: 100%;
    height: -webkit-fill-available; // Chrome
     overflow: hidden;
      margin: 0;
}

// Firefox
@-moz-document url-prefix() {
    body {
        box-sizing: border-box; 
        margin: 0;
        padding: 1px;
         overflow: hidden;
    }
}
  #main{
    height:100%;
    min-height:90vh;
    min-width: 100vw;
    max-width: 100vw;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  #main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      /* Add the blur effect */
    background : url(images/main-bg.jpg);
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    -webkit-filter: blur(8px);
  } 
  .container-fluid{
    z-index: 1;
  }
  .logo{
    max-width: 35vw;
    margin: 0 auto;
  }
  .textLogo {
    color: #3A3A3A;
    font-size: 1.5vw;
    margin-top: 0.5vw;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
  }
  .textLogo i {
    font-size: 0.79vw;
  }
  .social-media{
    width: 10vw;
    display: flex;
    justify-content: space-between;
    margin: 2vw auto 0;
  }
  .social-media .icon{
    font-size: 2vw;

  }

.blue{
  color:#4267B2 ;
}
.red{
  color: #FF0000;
}
.green{
  color: #25D366;
}

@media (max-width: 768px){
  .logo{
   max-width: 80vw;
 }
  .textLogo {
    font-size: 3.5vw;
    margin-top: 2vw;
  }
  .textLogo i {
    font-size: 2vw;
  }
  .social-media{
    width: 60vw;
  }
  .social-media .icon{
    font-size: 10vw;
    margin-top: 2vw;
  }

}