/*Font Family*/
@font-face {
  font-family: "Proxima Nova_reg";
  src: url("../fonts/ProximaNova-Regular.eot");
  src: url("../fonts/ProximaNova-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/ProximaNova-Regular.woff2") format("woff2"),
    url("../fonts/ProximaNova-Regular.woff") format("woff"),
    url("../fonts/ProximaNova-Regular.ttf") format("truetype"),
    url("../fonts/ProximaNova-Regular.svg#ProximaNova-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova_bold";
  src: url("../fonts/ProximaNova-Bold.eot");
  src: url("../fonts/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/ProximaNova-Bold.woff2") format("woff2"),
    url("../fonts/ProximaNova-Bold.woff") format("woff"),
    url("../fonts/ProximaNova-Bold.ttf") format("truetype"),
    url("../fonts/ProximaNova-Bold.svg#ProximaNova-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Basic settings*/
html {
  font-size: 62.5%;
  /*1rem = 10px*/
}

*{
  box-sizing: border-box;
}
body {
  font-family: "Proxima Nova_reg", sans-serif;
  color:#4f4e50;
}
h1{
  font-family: "Proxima Nova_bold", sans-serif;
}
a {
  text-decoration: none;
  color:#4f4e50;
}


button:focus, a:focus, input:focus,
textarea:focus,button {
  outline: none;
}

/* Header section */
section{
  background:url(../img/bg1.jpg) no-repeat center;
  background-size:cover;
}
 .main{
   max-width: 80%;
   width:100%;
   height:100vh;
   margin: 0 auto;
  
 }
 .container{
   display:flex;
   justify-content: space-between;
   align-items: center;
   height: 100%;
   
 }
 .info{
   width: 50vw;
 }
 .logo{
   width:40vh;
   margin-top: 10%;
 }
 .logo img{
   display:block;
   max-width: 100%;
 }
 .header {
   font-size: 2vw;

 }
.btn{
  border: 1px solid #4f4e50; 
  padding: 1vw 2.5vw;
  margin: 1vw 1vw 1vw 0;
  transition: all 1s;
  border-radius: 50px;
  font-size: 1.4vw;
}

.btn:last-child{
  border-color:#2ed100;
  background-color: #2ed100;
  
}

.btn:hover{
  background-color: #2ed100;
  border-color:#2ed100;
}

.btn:hover a{
  color:white;
}
.btn:last-child a{
  color: #fff;
  transition: all 1s;
  
}
.btn:last-child:hover a{
  color:#4f4e50;
}
.btn:last-child:hover {
  background-color: #fff;
  
}
@media (max-width: 760px) {
  section{
    overflow: hidden;
    background:url(../img/img3.jpg) no-repeat center;
    background-size: cover;
    margin: 0 auto;
  }
  .container{
    justify-content: space-around;
    align-items: center;
    
  }

  .header{
    font-size: 4.5vw;
  }
  .info{
    height: 50vh;
    width:80vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .btn{
    padding: 2vw 3.5vw;
    margin: 1vw 1vw 1vw 0;
    font-size: 3.4vw;
    
  }
  .buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .btn:last-child{
    align-self: center;
  }
 
 
  

}


@media (max-width: 426px) {
  .container{
    justify-content: space-around;
    align-items: center;
    
  }

  .header{
    font-size: 4.5vw;
  }
  .info{
    height: 50vh;
    width:80vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .btn{
    padding: 2vw 3.5vw;
    margin: 1vw 1vw 1vw 0;
    font-size: 3.4vw;
    
  }
  .buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .btn:last-child{
    align-self: center;
  }
}