/* ========================= */

/* CONTAINER */

/* ========================= */

.container {

  

  margin: 0 auto;

  padding: 0 20px;



  display: flex;

  justify-content: space-between;

  align-items: center;



  position: relative;

}



/* ========================= */

/* HEADER */

/* ========================= */

.header {

  position: fixed;

  top: 0;

  width: 100%;

  padding: 30px 0;

  z-index: 1000;

  height: 85px;

  background: transparent;

  transition: all 0.3s ease;

}



.logo img {

  height: 150px;

  transition: 0.3s ease;

}



/* SCROLL */

.header.scrolled {

  padding: 15px 0;

  background: rgba(255,255,255,0.9);

  backdrop-filter: blur(10px);

  box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.header.scrolled .logo img {
    height: 187px;
    position: absolute;
    top: -65px;
}


.header.scrolled .nav a {

  color: black;

}



/* ========================= */

/* NAV */

/* ========================= */

.nav {

  display: flex;

  align-items: center;
  

}



.nav a {

  color: white;

  text-decoration: none;

  margin-left: 30px;

  font-weight: 500;

  transition: 0.3s;

}



.nav a:hover {

  opacity: 0.7;

}



/* ========================= */

/* MENU TOGGLE */

/* ========================= */

.menu-toggle {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 6px;



  position: absolute;

  right: 20px;

  top: 35px;

  z-index: 1001;

}



.menu-toggle span {

  display: block;

  height: 3px;

  background: red;

  transition: 0.3s;

}



.menu-toggle span:nth-child(1) { width: 30px; }

.menu-toggle span:nth-child(2) { width: 18px; }

.menu-toggle span:nth-child(3) { width: 30px; }



/* ANIMATION */

.menu-toggle.active span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}



.menu-toggle.active span:nth-child(2) {

  opacity: 0;

}



.menu-toggle.active span:nth-child(3) {

  transform: rotate(-45deg) translate(6px, -6px);

}



/* ========================= */

/* CALL BUTTON */

/* ========================= */

.call-btn {

  background-color: red;

  padding: 0.7rem;

  border-radius: 50px;

}



/* ========================= */

/* RESPONSIVE */

/* ========================= */

@media (max-width: 768px) {



  .header {

    padding: 15px 0;

  }



  .logo img {

    height: 120px;

    margin-top: -1.9rem;

  }



  .header.scrolled .logo img {

    height: 130px;

    position: absolute;

    top: -14px;

  }



  .menu-toggle {

    display: flex;

    top: 25px;

  }



  .nav {

    position: fixed;

    top: 0;

    right: -100%;

    height: 100vh;

    width: 250px;

    background: white;



    flex-direction: column;

    justify-content: center;

    align-items: center;



    transition: 0.4s;

  }



  .nav a {

    color: black;

    margin: 20px 0;

    font-size: 1.2rem;

  }



  .nav.active {

    right: 0;

  }

}