* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: #2c3e50;
}
 
.container-fluid{
  width: 100%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 0;
  margin-top: -5px;
}

.navh1{
  color: white;
}

.navbar-nav{
  text-align: center;
  gap: 15px;
  font-size: calc(1rem + 0.5vw);
  padding: 5px;
} 

.nav-item:hover{
  text-transform: uppercase;
  text-decoration: 2px underline rgb(81, 112, 173);
}

/* MAIN */

.logo{
  width: 81%;
  float: right;
}

.photo{
  margin-left: 5%;
  width: auto;
}

.container{
  display: flex;
  flex-direction: column;
  gap: 50px;
  font-family: "Inter", sans-serif;
  padding-top: 50px;
  padding-bottom: 50px;
  justify-content: center;
  font-size: calc(1rem + 0.4vw) !important;
  line-height: calc(1rem + 0.7vw) !important;
}

.intro{  
  line-height: auto;
  width: auto;
}

.about .btn{
  margin-top: 8%;
  background-color: #558ecb !important;
  padding: 15px !important;
  border-radius: 50px !important;
  width: 30%;
  align-items: center;
  text-transform: uppercase;
  font-size: calc(1rem + 0.2vw) !important;
  font-family: "Montserrat", "sans-serif" !important;
}

.contact{
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: #558ecb !important;
  border-color: #558ecb !important;
  width: 20% !important;
}


@media screen and (min-width: 992px) {
  /* NAV */
  .container-fluid .img-fluid{
    margin-right: 35%;
  }

  .navbar-nav{
    margin-left: auto;
    float: right;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    gap: 30px;
  } 
}

@media screen and (min-width: 768px) {
  /* MAIN */
  .container{
    max-width: 570px !important;
  }  
}

@media screen and (max-width: 900px) {
  .logo .img-fluid{
    width: 75% !important;
  }

  .photo .img-fluid{
    width: 50% !important;
    margin-left: 25% !important;
  }
}


/* BTN */
@media screen and (max-width: 700px) {
    /* MAIN */

    .contact{
      width: 30% !important;
    }  
}

@media screen and (max-width: 480px) {
  /* MAIN */

  .contact{
    width: 35% !important;
  }  
}

@media screen and (max-width: 400px) {
  /* MAIN */

  .contact{
    width: 40% !important;
  }  
}