/* Importa il font OTF locale */
@font-face {
    font-family: "dk_prince_frog";
    /* nome interno da usare nel sito */
    src: url("fonts/dk_prince_frog.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* Importa il font TTF locale */
@font-face {
    font-family: "bahnschrift";
    /* nome interno da usare nel sito */
    src: url("fonts/bahnschrift.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.font_bahnschrift{
    font-family: "bahnschrift", sans-serif;
}

.font_inter_regular{
    font-family: "Inter Regular", sans-serif;
}

.font_myriad_pro{
    font-family: "Myriad Pro", sans-serif;
}

/* Applica il font a tutto il sito */
body,
html {
    font-family: "dk_prince_frog", sans-serif;
    /* fallback su sans-serif */
    margin: 0;
    padding: 0;
    background-color: #000;
    /* sfondo nero */
    color: #fff;
    /* testo bianco */
}

html * {
    font-family: "dk_prince_frog", sans-serif;
    /* fallback su sans-serif */
}

body {
    max-width: 1200px;
    width: 100%;
    /* occuperà tutta la larghezza disponibile */
    min-height: 100vh;
    /* altezza minima = altezza della finestra */
    margin: 0 auto;
    /* centrato orizzontalmente */

    /* background centrato e scalato */
    background: url("images/background.png") no-repeat center center;
    background-size: cover;
    /* scala l’immagine per coprire tutto il contenitore */
}

header {
    position: relative;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-bottom: 6px #f00 solid;
    overflow: visible;
}

header img,
img.cover-cell {
    width: 100%;
    /* Adatta alla larghezza del contenitore */
    height: 100%;
    /* Altezza del contenitore */
    object-fit: cover;
    /* Mantiene proporzioni e ritaglia l’eccesso */
    object-position: center;
    /* Mostra la parte centrale */
    display: block;
}

img.cover-cell {
    object-fit: contain;
}

.b2b_logo{
    position: absolute;
    top: 0;
    left: 0;
    margin: 8px;
}

.b2b_logo img{
    width: 60px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.icon-infos{
    position: absolute;
    bottom: -36px;
    right: 40px;
    margin: 8px !important;
    padding: 0;
    display: flex;
    gap: 15px;
    min-height: 0px;
    justify-content: center;
    /* centra orizzontalmente */
}

.icon-infos img{
    width: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

@media (min-width: 840px) {
    .icon-infos img{
        width: 60px;
    }
}

.page-content {
    width: 100%;
    position: relative;
    text-align: center;
}

.mdl-grid {
    padding: 0;
}

.mdl-cell {
    display: flex;
    /* attiva flexbox */
    justify-content: center;
    /* centra orizzontalmente */
    align-items: center;
    /* centra verticalmente */
    text-align: center;
    /* centra il testo */
    min-height: 20px;
    /* opzionale: altezza minima */
}

.language-switch {
    width: 100%;
    margin: 40px auto 0px auto !important;
    padding: 0;
    display: flex;
    gap: 15px;
    min-height: 0px;
    justify-content: center;
    /* centra orizzontalmente */
}

.language-switch-big {
    display: none;
}

@media (min-width: 840px) {
    .language-switch-small {
        display: none;
    }
    .language-switch-big {
        display: flex;
    }
}

.language-switch button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, border-color 0.2s;
}

.language-switch button:hover {
    transform: scale(1.1);
    border-color: #f0f0f0;
}

.language-switch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.text-adaptive p {
    margin: 0;
    padding: 10px;
}

.bg_brown {
    background-color: rgba(108, 69, 49, 0.8);
}

.bg_gray {
    background-color: rgba(32, 35, 29, 0.8);
}


.sidebar-container {
    position: relative;
    width: 100%;
    height: auto;
    ;
    max-width: 100%;
    overflow: hidden;
    padding: 10px 40px;
    /* spazio per le frecce */
}

.sidebar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    /* abilita lo scroll orizzontale */
    overflow-y: hidden;
    /* disabilita lo scroll verticale */
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* nasconde la scrollbar su Firefox */
}

.sidebar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.sidebar img {
    flex: 0 0 auto;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sidebar img:hover {
    transform: scale(1.1);
}

.arrow {
    position: absolute;
    top: calc(50% - 15px);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    z-index: 1;
    background-size: contain;
    /* adatta l'immagine all'elemento */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

.arrow:hover {
    transform: scale(1.1);
    border-color: #f0f0f0;
}

.arrow-left {
    background-image: url("images/arrow_left.png");
    /* specifica l'estensione corretta */
    left: 5px;
}

.arrow-right {
    background-image: url("images/arrow_right.png");
    /* specifica l'estensione corretta */
    right: 5px;
}

.box-container-full {
    width: 100%;
    margin: 0px;
}

.box-container {
    width: 100%;
    margin: 8px;
}

.text-title-video {
    color: yellow;
}

.box-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 ratio → 9/16 = 0.5625 */
}

.box-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.buy-button,
.download-button {
    display: inline-flexbox;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 16px;
    padding: 8px 12px;
    margin-bottom: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: 0.2s ease all;
}

.download-button:hover,
.buy-button:hover  {
    transform: scale(1.1);
}

.download-button {
    background: red;
    color: #fff;
}

.buy-button {
    background: green;
    color: #fff;
}


.text_right{
    justify-content: right;
}

.text_left{
    justify-content: left;
}

.no_padding{
    padding: 0;
}

/* CSS SOCIAL */

/* container */
.social-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 30px 0;
}

/* link + animazione entrata */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(25px);
  animation: fadeUp 0.8s ease forwards;
}

/* delay progressivo */
.social-link:nth-child(1) { animation-delay: 0.2s; }
.social-link:nth-child(2) { animation-delay: 0.4s; }
.social-link:nth-child(3) { animation-delay: 0.6s; }

/* animazione entrata */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* icone */
.social-icon {
  width: 44px;
  height: 44px;
  fill: #ffffff;

  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              fill 0.3s ease,
              filter 0.3s ease;
}

/* HOVER elegante */
.social-link:hover .social-icon {
  transform: translateY(-6px) scale(1.15);
}

/* colori brand */
.social-link:nth-child(1):hover .social-icon { fill: #1877f2; }
.social-link:nth-child(2):hover .social-icon { fill: #ff0000; }
.social-link:nth-child(3):hover .social-icon { fill: #e1306c; }

/* glow */
.social-link:hover {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

/* 🎯 ALLINEAMENTO OTTICO (fix definitivo) */
.youtube-icon {
  position: relative;
  top: 1px; /* micro correzione visiva */
}