/* ======================================================== */
/*  Odry & Ivy – CHI SIAMO  |  vision.css                   */
/* ======================================================== */
html{ scroll-behavior:smooth; }      /* scroll morbido built‑in */
.arrow-link{ display:inline-block; cursor:pointer; }

/* 1. Quality‑of‑life reset --------------------------------*/
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* Disabilita outline/border/box‑shadow su link & button nei vari stati */



.nav-item,
.nav-item:hover,
.nav-item:focus,
.nav-item:active,
.cta-button,
.cta-button:hover,
.cta-button:focus,
.cta-button:active {
  outline:none!important;
  border:none!important;
  box-shadow:none!important;
}

/* 2. Body --------------------------------------------------*/
html, body { overflow-x:hidden; }               /*  ⬅ elimina scrollbar orizzontale */
body{
  background:#000;
  font-family:"Poppins",sans-serif;
}

/* 3. Wrapper generale “Chi Siamo” ------------------------*/
.chisiamo-content{ padding-top:0; }

/* ======================================================== */
/*  SEZIONE 1 — VISIONE                                     */
/* ======================================================== */

.vision-container{ padding-top:96px; }

.vision-container{
  width:100%;               /* 100% per evitare overflow */
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  color:#fff;
background:
  linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
  url("https://odryeivy.top/wp-content/uploads/2025/04/ChatGPT-Image-15-apr-2025-19_34_45.png")
    center top/cover no-repeat,
  url("https://odryeivy.top/wp-content/uploads/2025/04/Progetto-senza-titolo-42-7.png")
    no-repeat left top;
  background-size: 300px auto, cover, auto;
}

/*  Fade‑out usato dallo script per una transizione più morbida */
.vision-container.fade-out{
  transition:opacity .8s ease, transform .8s ease;
  opacity:0;
  transform:translateY(-40px);
}

.vision-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:50px;
  max-width:1200px;
  width:100%;
}
.vision-text{ max-width:600px; text-align:left; }
.vision-text .title{ font-size:64px; margin-bottom:20px; font-weight:400; }
.vision-text .description{ font-size:24px; line-height:1.5; margin:0; }
.vision-image{ width:401px; height:401px; object-fit:contain; }

/* Freccia  ------------------------------------------------*/
.arrow-container{ display:flex; justify-content:center; }
.arrow-down{ width:150px; height:200px; }
.bounce{ animation:arrowBounce 1.5s infinite; }
.bounce:hover{ animation-play-state:paused; }
.arrow-down.nav-item:hover{ background:transparent!important; color:inherit!important; cursor:pointer; }

@keyframes arrowBounce{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(10px); }
}

/* ======================================================== */
/*  SEZIONE 2 — I NOSTRI VALORI                             */
/* ======================================================== */
.vision-next{
  width:100%;
  height:100vh;
  background:
    url("https://odryeivy.top/wp-content/uploads/2025/04/Progetto-senza-titolo-42-7.png")
      no-repeat right bottom,
    #111;
  color:#fff;
  position:relative;
}
.with-space-below{}         /* lasciato se vorrai padding extra */

/* ----- wrapper interno ----------------------------------*/
.values-section{
  width:100%; height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px;
  box-sizing:border-box;
}

/* Titolo + underline -------------------------------------*/
.section-title{
  font-family:"Poppins",sans-serif;
  font-size:64px;
  text-align:center;
  margin-bottom:50px;
  position:relative;
}
.section-title::after{
  content:"";
  width:80px; height:4px;
  background:#e0aa3e;
  display:block;
  margin:14px auto 0;
  border-radius:2px;
}

/* Grid auto‑responsiva -----------------------------------*/
.values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:60px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
}
/* ---------- CARD – layout verticale ---------- */
.value-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:44px 36px 48px;
  gap:24px;
  background:linear-gradient(135deg,#f9e788 10%,#e0aa3e 90%);
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.value-card:hover{
  transform:translateY(-10px);
  box-shadow:0 16px 32px rgba(0,0,0,.28);
}

/* icona */
.value-icon{
  width:120px; height:120px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* testo */
.value-content{ margin:0; }
.value-title{
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:28px;
  color:#fff;
  margin-bottom:6px;
}
.value-description{
  font-family:"Inter",sans-serif;
  font-size:18px;
  line-height:1.4;
  color:#fff;
}
/* ======================================================== */
/*  RESPONSIVE BREAKPOINTS                                  */
/* ======================================================== */
@media (max-width:991px){
  .vision-container,
  .vision-next{ padding:20px; }
  .vision-row{ flex-direction:column; text-align:center; }
  .vision-text .title{ font-size:48px; }
  .vision-text .description{ font-size:20px; }
  .vision-image{ width:300px; height:300px; }
  @keyframes arrowBounce{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(7px); }
  }
  .values-grid{ gap:40px; }
}

/* mobile: riduco spazio */
@media(max-width:640px){
  .value-card{ padding:32px 24px; gap:18px; }
  .value-title{ font-size:24px; }
  .value-description{ font-size:16px; }
}
