:root {
    /* --color-blue: rgb(15, 31, 61); */
    --color-blue: rgb(36, 48, 76);
    --foreground: #1e273e;

    /* --color-red: #f00000; */
    --color-red: rgb(226, 54, 69);
    --primary-font: 'Montserrat', sans-serif;
    --color-grey: #FAFAFA;
    --secondary:#f4f6f8;
    --card:#ffffff;

    --primary:#0f172a;
    --primary-foreground:#ffffff;
  
    --highlight:#f8c537;
    --highlight-strong:#ffd84d;
  
    --london-blue:rgb(46, 115, 184);
    --london-blue-foreground:#ffffff;
  
    --success:#16a34a;
    --danger:#dc2626;
  
    --shadow-sm:0 8px 20px rgba(15,23,42,.06);
    --shadow-md:0 16px 40px rgba(15,23,42,.10);
    --shadow-lg:0 24px 60px rgba(15,23,42,.16);
  
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
  
    --container:1180px;
  
    --grad-cta:linear-gradient(135deg,#ff7a18 0%, #fe3f21 36%, #f858bc 68%, #575ecf 100%);
    --grad-london:linear-gradient(135deg,#1d4ed8 0%, #3b82f6 100%);
    --grad-dark: #181d25;
    --grad-hero:linear-gradient(90deg,rgba(15,23,42,.82) 0%, rgba(15,23,42,.58) 42%, rgba(15,23,42,.34) 100%);
}

body {
    font-family: Arial, sans-serif;
  }
  section {
    color: var(--foreground)!important;
  }



  nav {
    position:fixed;
    top: 0;
    left:0;
    z-index: 999;
    width: 100%;
}
.bg-red {
    background-color: var(--color-red);
}

.color-red {
    color: var(--color-red);
}

.bg-blu, .bg-blue {
    background-color: var(--color-blue);
}

.color-blu {
    color: var(--color-blue);
}

.bg-grey {
    background-color: var(--color-grey);
}
p.footer {
    font-size: 10px;
}
.footer a {
    color:inherit;
    text-decoration: none;
}
#form a {
  color:inherit;
  text-decoration: none;
}
  /* HERO */
  /* .hero {
    position: relative;
    min-height: 90vh;
    background: url('img_young-always-on/hero-kids-YOO6LbVo.jpg') center/cover no-repeat;

  } */
  .hero {
    position: relative;
    min-height: 90vh;
    margin-top: 90px;
    background: 
    linear-gradient(180deg, hsla(222, 35%, 18%, .65), hsla(222, 35%, 18%, .75)),
      url('img_young-always-on/TEEN_11-13_RAGAZZA-1920X1080_VUOTO.webp') center/cover no-repeat;
    background-position: top right;
  }
  .custom-container {
    padding: 200px 250px 100px !important;
  }
.hero .btn, .reservation .btn {
    background-color: var(--color-red);
    color: white;
    padding: 10px 30px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
  }

  .hero .btn:hover, .reservation .btn:hover {
    background-color: var(--color-red);
    color: white;
  }
  
  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
  }
  
  /* COLORI */
  .text-accent {
    color: var(--color-red);
  }
  
  .btn-accent {
    background-color: var(--color-red);
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .btn-accent:hover {
    background-color: #ea580c;
  }
  
  /* ICONE */
  .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    background: rgba(249,115,22,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
  }
  
  /* CARD */
  .card  {
    border: 1px solid #eee;
    border-radius: 10px;
    text-align: left;
    color: var(--foreground)!important;
  }


  .bg-gray {
    background-color: var(--color-grey)!important;
  }
  .contacts svg, .contacts span  {
    color: var(--color-grey)!important;
  }
  
  /* LIST */
  .custom-list-group-item {
    border: 1px solid var(--color-red);
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 15px 20px;
    list-style-type: none;
  }



  .icon-box {
    width: 56px;
    height: 56px;
    background: rgba(249,115,22,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-red);
  }
  
  .icon-box svg {
    width: 24px;
    height: 24px;
  }
  
  .image-box {
    border-radius: 10px;
    overflow: hidden;
    /* box-shadow: 0 10px 25px rgba(0,0,0,0.15); */
  }

  .check-icon {
    width: 32px;
    height: 32px;
    background: rgba(249,115,22,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-red);
  }
  
  .check-icon svg {
    width: 16px;
    height: 16px;
  }

  /* BOX LISTA */
.info-box {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 18px;
  }
  
  /* ICONA FRECCIA */
  .arrow-icon {
    color: var(--color-red);
    flex-shrink: 0;
  }
 
  
  .image-box img {
    width: 100%;
    height: 280px;
    object-fit: cover;
  }

  /* SFONDO CTA */
.cta-section {
    background-color: var(--color-blue); /* scuro elegante */
  }
  
  /* ICONE PICCOLE */
  .mini-icon {
    /* color: var(--color-red); */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* BOX ICONA */
.icon-box-how-it-works {
    width: 80px;
    height: 80px;
    background-color: var(--color-blue); /* primary */
    color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* BADGE NUMERINO */
  .step-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    background-color: var(--color-red); /* accent */
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero h1 {
    font-size: 60px;
  }
  .benefit, .problem, .myes-method, .solutions, .why, .how, .who, .reservation, #form {
    padding:6rem 0;
  }
  .results {
    padding-bottom:6rem;
  }
  .benefit h5 {
    font-size: 18px;
  }
.benefit p {
    font-size:24px;
}
.weight-600 {
    font-weight: 600;
}
.weight-700 {
  font-weight: 700;
}
.problem p {
    font-size:24px;
}
.problem .image img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}
.problem .image {

    padding: 20px;
}
.problem h2, .who h2, .myes-method h2 {
    font-size: 36px;
    font-weight: 700;
}

.myes-method p, .who p {
    font-size:18px;
}
.myes-method .lead {
  font-size:24px;
  margin-top:30px;
}

.myes-method img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  max-width: 70%;
  margin-bottom:40px;
}
.myes-method .card h5 {
font-size: 20px;
font-weight: 700;
}

.myes-method .card p {
  font-size: 14px;
  color:gray;
  }

  .results svg {
    width: 40px;
    height: 40px;
  }
  .arrow-icon {
    line-height: 1px;
  }
  .reservation h2 {
    font-size:48px;
  }
  .reservation p:not(:last-child) {
    font-size: 12px;
  }
  .form-section{
    padding-bottom:96px;
  }
  
  .form-wrap{
    max-width:720px;
    margin-inline:auto;
  }
  
  .form-warning{
    margin:0 0 24px;
    color:var(--highlight);
    text-align:center;
    font-size:15px;
    font-weight:600;
  }
  
  .lead-form{
    padding:28px;
    background:rgba(255,255,255,.10);
    border-radius:24px;
    backdrop-filter:blur(10px);
  }
  
  .form-group + .form-group{
    margin-top:16px;
  }
  .privacy-form {
    margin-top: 20px;
  }

  form {
    background-color: rgb(255, 255, 255, .10);
    padding: 30px;
    border-radius: 25px;
  }
  
  .form-group label{
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,.82);
    font-size:14px;
    font-weight:600;
  }
  
  .form-group input,
  .form-group select{
    width:100%;
    height:50px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:rgba(255,255,255,.10);
    color:#fff;
    outline:none;
  }
  
  .form-group input::placeholder{
    color:rgba(255,255,255,.44);
  }
  
  .form-group input:focus,
  .form-group select:focus{
    border-color:rgba(255,255,255,.42);
    box-shadow:0 0 0 3px rgba(255,255,255,.08);
  }
  
  .form-group select{
    appearance:none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
      linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) calc(50% - 3px),
      calc(100% - 12px) calc(50% - 3px);
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
  }
  
  .form-group option{
    color:#111827;
  }
  
  .form-note{
    margin:14px 0 0;
    text-align:center;
    color:rgba(255,255,255,.50);
    font-size:12px;
    line-height:1.5;
  }
  .section--dark{
    background:var(--color-blue)!important;
    color:var(--primary-foreground)!important;
  }
  .section--secondary{
    background:var(--secondary);
  }

  .mobile-sticky-cta{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    display:none;
    padding:12px;
    background:rgba(255,255,255,.82);
    border-top:1px solid rgba(15,23,42,.08);
    backdrop-filter:blur(10px);
  }
    
  .mobile-sticky-cta a {
    background:var(--color-red)!important;
    color:#fff!important;
    width: 100%;
  }
  .btn-form {
    background-color: var(--color-red)!important;
  }

  .bg-header-tnk {
    background-image: url('img_young-always-on/TEEN_11-13_RAGAZZA-1920X1080_VUOTO.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.form-note {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(255, 255, 255, .50);
  font-size: 12px;
  line-height: 1.5;
}
.trustpilot_img img{
  max-width: 80%;
  margin-bottom: 2rem;
}

@media screen and (max-width: 990px) {
  .custom-container {
    padding: 200px 0!important;
  }
}
@media screen and (max-width: 678px) {

  .logo {
    text-align:center;
  }
  .custom-container h1 {
    font-size:35px;
  }
  .custom-container p {
    font-size:20px;
  }
  .hero .btn, .reservation .btn {
    padding: 10px 30px;
    font-size: 14px;
  }
  .mobile-sticky-cta{
    display:block;
  }
  .hero {
    background-position: 80% top;
  }
}