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

.archivo {
 font-family: "Archivo", serif;
 font-optical-sizing: auto;
}
/* .montserrat {
 font-family: "Montserrat", serif;
} */

.montserrat {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.open-sans {
 font-family: "Open Sans", serif;
}
.poppins {
 font-family: "Poppins", serif;
}
nav{
 width: 100%;
 display: flex;
 /* padding: 2rem; */
 color: white;
 flex-direction: column;
}
.nav-link-color.active{
  color: #a4cf00;
}
.upper-nav{
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 padding: 1rem 4rem;
 background-color: #00567B;

}
.f-link{
  padding: 10px 12px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.f-link:hover{
  background-color: #a4cf00;
}
.n-contact-info {
 display: flex
;
}
.info {
 display: flex;
 align-items: center;
 margin-right: 1rem;

}
.info i {
 margin-right: 1rem;
}

.lower-nav {
 display: flex;
 justify-content: space-between;
 width: 100%;
 padding: 0rem 4rem;
 align-items: center;
 border-bottom: 4px solid #00567b;
}
.h-logo {
 width: 9%;
}
.h-logo img{
 width: 100%;
}

.menu-div {
 display: flex;
 width: 65%;
 align-items: center;
 justify-content: space-between;
}
.menu-list {
 display: flex;
 justify-content: space-between;
 width: 75%;
 list-style: none;
}
.menu-list li a {
  color: #00567B;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
.catalogue {
 color: #fff;
 padding: 1rem 2rem;
 background: #00567b;
 font-size: 15px;
 text-transform: uppercase;
 text-decoration: none;
 border-radius: 4px;
}

.drop-down-link{
}

.drop-down{
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2rem;
  position: absolute;
  top: 25%;
  left: 0;
  opacity: 0;
  z-index: 100;
  visibility: hidden;
  transition: all 0.5s ease;
}

.drop-down-link:hover .drop-down{
  opacity: 1;
  visibility: visible;
}
 .inside-drop-down{
  display: flex;
  justify-content: space-around;
  width: 100%;
 }
 .inside-drop-down a{
  width: 20%;
 }
 .inside-drop-down a img {
  width: 100%;
  height: 80%;
  border-radius: 5px;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
  scale: 0.9;
  transition: scale 0.3s ease;
}

.inside-drop-down a img:hover{
 scale: 1;
}

.overlay{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.5);
 /* z-index: -1; */
 display: none;
}
.overlay.active{
 display: block;
}
.hamburger{
 z-index: 100;
 display: none;
}
.bar {
 display: block;
 width: 25px;
 height: 3px;
 margin: 5px auto;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 background-color: #101010;
 /* background-color: rebeccapurple; */
}
.hidden-nav {
 list-style: none;
 position: absolute;
 background-color: #fff;
 left: 0;
 /* padding: 2rem; */
 top: 0;
 width: 30%;
 transform: translateX(-100%);
 transition: transform 0.3s ease;
 z-index: 1000;
 border: 1px solid;
 border-top: none;
 border-left: none;
 height: 100vh;
}
.hidden-nav.active{
 transform: translateX(0%);
}
.hidden-nav a {
 text-decoration: none;
 color: black;
 font-family: montserrat;
}
.hidden-nav li {
 padding: 1rem 2rem;
 border-bottom: 2px solid black;
}
.hnp-list {
  list-style: none;
  width: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.hnp-link{
 position: relative;
}
.hnp-link:hover .hnp-list{
 opacity: 1;
 visibility: visible;
}
li.logo {
 padding: 0;
 border: none;
 display: flex;
 justify-content: space-between;
}
.hn-logo{
 width: 100px;
}
.close {
 padding: 10px;
 width: 35px;
}

li.logo img{
 width: 100%;
 height: auto;
}
@media (max-width: 1100px){
 .catalogue {
  padding: 1rem 1rem;
  font-size: 12px;
}
}
@media (max-width: 1024px){
 .hamburger{
  display: block;
 }
 .menu-list {
  display: none;
}
.catalogue {
 display: none;
}
.lower-nav {
 flex-direction: row-reverse;
}
}

@media (max-width: 900px) {
  .h-logo {
    width: 11%;
}
.upper-nav {
  padding: 0.5rem 2rem;
}
.info {
  font-size: 14px;
}
  
}
@media (max-width: 700px){
 .upper-nav {
  display: none;
}
.h-logo {
 width: 15%;
}
.hidden-nav {
 width: 40%;
}
}

@media (max-width: 600px){
  .h-logo {
    width: 20%;
}
}
@media (max-width: 500px){
 .hidden-nav {
  width: 50%;
}
.hn-logo {
 width: 85px;
}
.lower-nav {
  padding: 0rem 2rem;
}
}

@media (max-width: 400px){
 .hidden-nav {
  width: 80%;
}
}