*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* navbar */
.navbar{
  background-color: #FFFFFF;
  box-shadow: 0 8px 32px 0 rgba(56, 56, 56, 0.37);
}

nav img{
  width: 50px;
}

.navbar-nav{
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  gap: 10px;
} 

.nav-item a{
  border-radius: 10px;
}

.nav-link:hover{
  background-color: #000;
  border-radius: 10px;
  color: white;
}

ul li.active a{
  background-color: #000;
  border-radius: 10px;
  color: white !important;
}

/* contact */
.contact{
  display: flex;
}

.card-contact{
  margin-top: 8rem;
  font-family: 'Poppins', sans-serif;
  background: rgb(2,0,36);
  background: linear-gradient(338deg, rgba(2,0,36,1) 0%, rgba(146,146,146,1) 0%, rgba(142,142,142,1) 27%, rgba(70,70,70,1) 63%);
  width: 500px;
  border-radius: 20px;
  padding-bottom: 20px;
  width: 100%;
}

.card-contact h1{
  padding: 30px;
  font-weight: bold;
}

.card-contact p{
  padding-left: 30px;
  padding-right: 30px;
  font-weight: medium;
  text-align: justify;
}

.img-contact{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.img-contact img{
  margin-top: 4.5rem;
}

.contact-us{
  padding: 30px;
  padding-bottom: 0;
}

.contact-us h5{
  margin: 0;
}

/* Footer */
footer{
  background-color: #464646;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

.img-footer{
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 40px;
}

.txt-footer p{
  font-size: 17px;
}

.txt-footer h4{
  font-size: 16px;
}

.img-footer img{
  width: 40px;
}

@media screen and (min-width: 360px) and (max-width: 760px){
  .offcanvas{
    padding: 20px;
    display: flex;
  }

  .nav-link{
    padding: 9px;
  }

  .contact{
    display: block; 
  }

  .contact-us h5{
    margin: 0;
    font-size: 18px;
  }

  .img-contact img{
    margin-top: 8rem;
  }

  .img-footer{
    gap: 15px;
  }

  .txt-footer{
    padding: 20px;
  }

  .txt-footer p{
    font-size: 16px !important;
  }

  .txt-footer h4{
    font-size: 15px !important;
  }
}

@media (min-width: 760px) and (max-width: 1200px){
  .offcanvas{
    padding: 20px;
  }

  .nav-link{
    padding: 9px;
  }

  footer{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }
}

@media (min-width: 1200px){
  nav ul{
    margin-left: auto;
  }
}