@font-face {
     font-family: 'Termina-medium';
     src: url(./fonts/TerminaTest-Medium.woff);
}

@font-face {
     font-family: 'Termina-Light';
     src: url(./fonts/TerminaTest-Light.woff);
}

@font-face {
     font-family: 'Termina-Bold';
     src: url(./fonts/TerminaTest-Black.woff);
}

*{
     text-decoration: none;
     margin:0;
     padding:0;
}

body{
     background-color:#4044e0;
     background-image: url('img/bg.jpg');
     color:#fff;
     font-family: 'Termina-Light',sans-serif;
}
.container{
     width:70vw;
     height: 80vh;
     margin:auto;
     margin-top: 10vh;
}

.container .logo{
     width: 20%;
     min-width: 200px;
     margin-bottom: 10vh;
}

h1,
h2{
     margin:0;
}

.container h1{
     font-family: 'Termina-Bold',sans-serif;
     font-size: 4em;
}

.container h2{
     font-size: 4em;
}

.container p{
     letter-spacing: 5px;
     margin: 50px auto 0px;
}

.cta{
     color:#fff;
     text-decoration: none;
     padding:15px 50px;
     border-radius: 25px;
     height:20px;
     font-size: .8em;
     display: inline-block;
     letter-spacing: 5px;
}

.blue a{
     color:#fff;
}

.cta img{
     height: 10px;
     aspect-ratio: 1;
}

.blue{
     background-color:#2741be;
     display: flex;
     align-items: center;
     font-weight: 300;
     font-family: 'Montserrat',sans-serif;
     min-width: 170px;
}

.blue img{
     margin-left:10px;
}

.blue:hover{
     background-color:#fff;
     color: #2741be;
     transition: all ease-in-out .3s;
     font-weight: 600;
}

.bg-white{
     color:#2741be;
     padding:15px;
     margin-left: 30px;
     margin-right: 10px;
}

.bg-white img{
     height:12px;
}

.flex img{
     transform: rotate(0deg);
     transition: transform ease-in-out .4s;
}

.white{
     color:#fff;
}

.red{
     color:red;
}

p,
a{
     text-transform: uppercase;
}

.section-contact{
     display: flex;
     margin-top:50px;
     position: relative;
     bottom: 0 ;
}

.flex{
     display: flex;
     align-items: center;
}

.flex:hover img,
.flex:hover{
     color:#2741be;
}

.flex:hover a{
     background-color: inherit;
     transition: all 0.6s;
}

     /* Hover */

     .section-contact .flex::before{
          width: 50px;
          height:50px;
          background-color:rgb(255, 255, 255);
          content:"";
          border-radius: 25px;
          z-index: -1;
          text-align: center;
          position: absolute;
          margin-left: 30px;
          transition: all ease-in-out .2s;
     }

     .flex:hover::before{
          width: 300px;
          transition: all ease-in-out .2s;
     }

     .flex:hover img{
          transform: rotate(360deg);
          transition: transform ease-in-out .4s;
     }

@media (max-width: 1040px) {
     .container{
          width: 90vw;
     }

     .container .logo{
          width:50%;
     }
     .container h1,
     .container h2{
          font-size: 2em;
     }

     .section-contact{
          display: block;
          text-align: left;
     }

     .section-contact .bg-white{
          margin:0;
          margin-top: 0px;
     }

     .section-contact .flex{
          display: flex;
          margin-top: 30px;
     }

     .container p{
          font-size: 1em;
     }

     .section-contact .flex::before{
          margin-left: 0px;
     }

     .section-contact span{
          margin-left: 20px;
     }

     .blue{
          width:170px;
     }
}