/*Variables START*/

:root {
  --primary-color: #FF4466;
  --black: #333333;
  --white: #FFFFFF;
  --background-color: #FFFFFF;
  --menu-background-color: #FFFFFF;
  --text-color: #333333;
  --cta-text-color: #FFFFFF;
  --cta-hover-background-color: #A80937;
}

/*Variables END*/

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

.no-scroll-header {
  overflow: hidden;
} /*orientamento orizzontale*/

.header_tcg {
  background: var(--background-color);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
}

.header_tcg li.active-branch a {
  color: var(--primary-color) !important;
}

.header_tcg .header__overlay {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -100;
  background: #33333350;
}

.header_tcg .header__container {
  max-width: 1280px;
  margin: auto;
  padding: 24px 16px; /*8px laterali era*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.header__container .header__main_logo svg {
  width: 176px;
  height: auto;
  transition: all 0.2s ease-in-out;
}

.header__container .header__main_logo.header__main_logo_small svg {
  width: 96px;
  height: auto
}

.header__container .header__links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.header__links .header__nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  background: var(--background-color);
}

.header__links .header__nav .header__close {
  display: none;
}

.header__links .header__nav ul li {
  padding: 8px 16px;
  text-align: center;
}

.header__links .header__nav ul li a {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-color);
  transition: color ease-in-out 0.2s;
}

.header__links .header__nav ul li a:active {
    color: var(--primary-color);
  }

.header__links .header__nav ul li a::before {
  content: "";
  width: 20px;
  height: 0;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 2px solid var(--text-color);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.header__links .header__nav ul li:nth-child(2) a::before {
  /*right: 36px; /*rimettere quando si aggiungono i submenu*/
  bottom: -8px; /*togliere quando si rimettono i submenu*/
}

.header__links .header__nav ul ul li:nth-child(1) a::before,
.header__links .header__nav ul ul li:nth-child(2) a::before {
  right: 0;
  bottom: -6px;
}

.header__links .header__nav ul li a:hover::before {
  width: 60px;
  visibility: visible;
  opacity: 1;
}

.header__links .header__nav ul li:nth-child(2) a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.header__links .header__nav ul li:nth-child(2) a::after {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z' fill='%23333333'/%3E%3C/svg%3E%0A");
  transition: transform ease-in-out 0.2s;
  display: none; /*rimettere quando si aggiungono submenu*/
}

.header__links .header__nav ul li:nth-child(2):hover a::after {
  transform: rotate(90deg);
}

.header__links .header__nav ul ul {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(-40px);
}

.header__links .header__nav ul ul li a {
  font-size: 15px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-align: center;
}

.header__links .header__nav ul ul li a::after {
  content: "" !important;
}

.header__links .header__nav .header__bottom_links {
  display: none;
}

.header__links .header__contacts {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.header__contacts .header__contacts_hamburger,
.header__contacts .header__contacts_curled_a {
  display: none;
}

.header__contacts .header__contacts-cta a {
  display: inline-block;
  padding: 16px 24px;
  background: var(--primary-color);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--cta-text-color);
  transition: background 0.2s ease-in-out;
}

.header__contacts .header__contacts-cta a:hover {
  background: var(--cta-hover-background-color);
}

.header__placeholder {
  margin-top: 168px;
  /*transition: all 0.3s ease-in-out;*/
}

/*.header__placeholder.header__placeholder_small {
  margin-top: 116px;
} /*crea layout shift*/

@media screen and (max-width: 1200px) {
  .header_tcg .header__overlay {
    transition: all 0.3s ease-in-out;
  }
  
  .header_tcg .header__overlay.header__overlay_show {
    z-index: 50;
    visibility: visible;
    opacity: 1;
  }
  
  .header_tcg .header__container {
    padding: 20px 32px;
  }
  
  .header__links .header__nav {
    padding: 16px;
    background: var(--menu-background-color);
    position: fixed;
    top: 0;
    right: -120vw;/*-50vw;*/
    width: 50vw;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
    transition: right 0.3s ease-in-out;
  }
  
  .header__links .header__nav.header__nav_active {
    top: 0;
    right: 0;
    overflow: scroll; /*orientamento orizzontale*/
  }
  
  .header__links .header__nav .header__close {
    display: block;
    align-self: flex-end;
  }
  
  .header__links .header__nav ul {
    flex-direction: column;
    gap: 16px;
    background: var(--menu-background-color);
  }
  
  .header__links .header__nav ul li a {
    font-size: 24px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--black);
  }
  
  .header__links .header__nav ul li a::before {
    content: none;
  }
  
  .header__links .header__nav ul li:nth-child(2) a::after {
    transform: rotate(90deg);
    filter: invert(15%) sepia(10%) saturate(0%) hue-rotate(168deg) brightness(98%) contrast(87%);
  }
  
  .header__links .header__nav ul ul {
    display: block;
    visibility: visible;
    opacity: 1 !important;
    position: relative !important;
    left: 0 !important;
    padding: 8px;
    transform: translateX(0);
  }
  
  .header__links .header__nav ul ul li a  {
    font-size: 18px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-align: center;
  }
  
  .header__links .header__nav .header__bottom_links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .header__links .header__nav .header__bottom_links a {
    text-decoration: none;
    color: var(--black);
  }
  
  .header__links .header__nav .header__bottom_links a:first-child {
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-align: left;
  }
  
  .header__links .header__nav .header__bottom_links a:last-child {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-align: left;
  }
  
  .header__contacts .header__contacts_hamburger {
    display: block;
  }
  
  .header__contacts .header__contacts_hamburger svg {
    display: block;
  }
  
  .header__contacts .header__contacts-cta a {
    font-size: 16px;
    padding: 20px 12px;
  }
  
  .header__placeholder {
    margin-top: 160px
  }
  
  /*.header__placeholder.header__placeholder_small {
    margin-top: 108px;
  } /*crea layout shift*/
}

@media screen and (max-width: 600px) {
  .header_tcg .header__overlay.header__overlay_show {
    z-index: -100;
    visibility: hidden;
    opacity: 0;
  }
  
  .header_tcg .header__container {
    padding: 16px;
  }
  
  .header__links .header__nav {
    width: 100vw;
    right: -120vw;
  }
  
  .header__links .header__nav_active {
    width: 100vw;
  }
  
  .header__container .header__main_logo svg {
    width: 96px;
    height: auto;
  }

  .header__container .header__main_logo.header__main_logo_small svg {
    width: 56px;
    height: auto
  }
  
  .header__links .header__nav ul {
    gap: 8px;
  }
  
  .header__links .header__nav ul li a {
    font-size: 23px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
  }
  
  .header__links .header__nav ul ul li a {
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.05em;
    text-align: center;
  }
  
  .header__links .header__nav .header__bottom_links a:first-child {
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-align: left;
  }
  
  .header__links .header__nav .header__bottom_links a:last-child {
    font-family: Poppins;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-align: left;
  }
  
  .header__contacts .header__contacts-cta {
    display: none;
  }
  
  .header__contacts .header__contacts_curled_a {
    display: block;
  }
  
  .header__contacts .header__contacts_curled_a svg {
    display: block;
  }
  
  .header__placeholder {
    margin-top: 100px
  }
  
  /*.header__placeholder.header__placeholder_small {
    margin-top: 74px;
  } /*crea layout shift*/
}

@media screen and (max-height: 600px) and (max-width: 900px) and (orientation: landscape) {
  .header__links .header__nav {
    width: 100vw;
  }
}