/**

 * Mobile

 * ---------------------------------------------

 */

.mobile.header {

  position: sticky;

  top: 0;

  z-index: 10;

  background: var(--color-primary);

  padding-block-start: 16px;

  padding-block-end: 12px;

  padding-inline: 24px;

}



.mobile.header .header__content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 98px;

}



.mobile.header .menu {

  background: none;

  border: none;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.mobile.header .menu .menu__stick {

  display: inline-block;

  height: 2px;

  width: 24px;

  background-color: var(--white);

}



/* navigation */

.mobile.header .navigation {

  position: fixed;

  background: var(--white);

  inset: 0;

  z-index: 5;

  padding-inline: 40px;

  padding-block-start: 35px;



  transform: translateX(-100%);

}



.mobile.header .navigation__header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.mobile.header .button-close {

  background: none;

  border: none;

  width: 32px;

  height: 24px;

  position: relative;

}



.mobile.header .button-close__stick {

  height: 3px;

  width: 24px;

  position: absolute;

  left: 2px;

  background: var(--color-primary);

}



.mobile.header .button-close__stick:first-child {

  transform: rotate(-45deg);

}



.mobile.header .button-close__stick:last-child {

  transform: rotate(45deg);

}



.mobile.header .navigation .menu {

  padding-block-start: 38px;

  padding-bottom: 140px;

}



.mobile.header .menu__list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 28px;

}



.mobile.header .menu__list a:not(.mobile .button-outline) {

  text-decoration: none;

  color: var(--color-primary);

  font-size: var(--fs-20);

  font-family: var(--quicksand);

  font-weight: 700;

  text-transform: capitalize;

}



/* .mobile.header .menu__list li:last-child {

    margin-top: 45px;

} */



.mobile.header .followUs {

  border-top: 1px solid var(--color-secondary-alpha-300);

  text-align: center;

}



.mobile.header .followUs__title {

  color: var(--color-primary);

  font-family: var(--quicksand);

  font-size: var(--fs-18);

  font-weight: 700;

  padding-top: 20px;

}



.mobile.header .followUs__socials {

  display: flex;

  gap: 8px;

  justify-content: center;

}



.mobile.header .followUs__socials a {

  text-decoration: none;

  color: var(--color-secondary);

  font-size: 24px;

}



/**

 * Animation loading Mobile

 * ---------------------------------------------

 */



.mobile.header .overlay-mobile {

  position: fixed;

  inset: 0;

  background: var(--color-primary);

  z-index: 2;

}



.mobile.header .logo-position-initial-mobile {

  display: block;

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 150px;

  height: 200px;

  z-index: 20;

}



.mobile.header .logo-position-final-mobile {

  position: absolute;

  left: initial;

  top: 26px;

  right: 32px;

  width: 79px;

  height: 90px;

  z-index: 5;

  transform: translate(0%, 0%);

}



.mobile.header.isHome .logo-mobile-blue {

  display: none;

}



.mobile.sticky-page #logo-mobile {

  display: none;

}



/**

 * desktop

 * ---------------------------------------------

 */



.desktop.header {

  position: fixed;

  width: 100%;

  z-index: 10;

  /* transition: all .1ms ease; */
  background-color: #00000070;

}



.header__container {

  width: 95%;

  margin: auto;

}



.desktop.header .header__content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 116px;

}



.desktop.header .navegation {

  margin-right: auto;

  /* padding-left: 200px; */

  padding-left: 100px;

}



@media (min-width: 1400px) {

  .desktop.header .navegation {

    padding-left: 200px;

  }

}



.desktop.header.sticky .navegation {

  padding-left: 80px;

}



.desktop.header .menu {

  list-style: none;

  padding: 0;

  margin: 0;



  display: flex;

  gap: 37px;

}



.desktop.header .menu a {

  text-decoration: none;

  color: var(--white);

  font-family: var(--quicksand);

  font-size: var(--fs-16);

  font-weight: 700;

  text-transform: capitalize;

}



.desktop.header .logo-blue {

  display: none;

}



/* sticky header */



.sticky {

  position: sticky;

  background: var(--white);

  top: 0;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

}



.desktop.header.sticky .header__content {

  height: 116px;

}



.desktop.header.sticky .logo-blue {

  display: block;

}



.desktop.header.sticky .logo-white {

  display: none;

}



.desktop.header.sticky .menu a {

  color: var(--color-primary);

}



/**

 * Animation loading Desktop

 * ---------------------------------------------

 */



.desktop.header .overlay-desktop {

  position: fixed;

  inset: 0;

  background: var(--color-primary);

  z-index: 5;

}



.desktop.header .logo-position-initial-desktop {

  display: block;

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 200px;

  height: 250px;

  z-index: 20;

}



.desktop.header .logo-position-final-desktop {

  position: absolute;

  left: initial;

  top: 24px;

  width: 98px;

  height: 115px;

  z-index: 20;

  transform: translate(0%, 0%);

}



/* sticky header in other pages and disabled intro animation*/



/* -----------mobile -----------------*/

.mobile.header.sticky-page {

  background: var(--white);

}



.mobile.sticky-page .overlay-mobile {

  display: none;

}



/* menu color */

.mobile.header.sticky-page .menu__stick {

  background: var(--color-primary);

}



.mobile.sticky-page .logo-mobile-blue {

  display: block;

}



.mobile.sticky-page .logo-mobile {

  display: none;

}



/* styles when the user does scroll */

.mobile.header.sticky {

  background: white;

}



.mobile.header.sticky .menu__stick {

  background: var(--color-primary);

}



.mobile.header.sticky #logo-mobile {

  display: none;

}



.mobile.header.sticky .logo-mobile-blue {

  display: block;

}



.mobile.header.sticky #navigation-mobile {

  height: 100vh;

}



/*------------desktop--------------- */

.desktop.sticky-page .overlay-desktop {

  display: none;

}



.desktop.sticky-page {

  position: sticky;

  background: var(--white);

  top: 0;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

}



.desktop.sticky-page .menu a {

  color: var(--color-primary);

}



.desktop.sticky-page .logo-blue {

  display: block;

}



.desktop.sticky-page .logo-white {

  display: none;

}



.top-right {

  position: absolute;

  right: 30px;

  top: -15px;

}



.top-right {

  position: absolute;

  right: 30px;

  top: -15px;

}



.middle-left {

  position: absolute;

  left: -65px;

  top: 50%;

  transform: translateY(-50%);

}



.bottom-left {

  position: relative;

  left: 0;

  bottom: 0;

  margin-top: 15px;

}