body {
  font-family: Arial, sans-serif;
  margin: 0;
  color: #1f2937;
}

section {
  padding: 60px 20px;
  text-align: center;
}
.logo {
    max-width: 150px;
}
.hero {
  background:
radial-gradient(circle at top,
#0D6B58 0%,
#063D34 65%,
#042A24 100%);
  color: white;
}

.cta {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background: white;
  color: #2563eb;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

.problem ul,
.offer ul {
  list-style: none;
  padding: 0;
}

.price {
  font-size: 40px;
  font-weight: bold;
  color: #0A8A6A;
}

.cta-final {
  background: #111827;
  color: white;
}

.responsive {
    max-width: 900px;
    padding: 5%;
}


.phone-slider{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    gap:12px;

    padding:10% 18px 20px;
}

.phone-slider::-webkit-scrollbar{
    display:none;
}

.phone-slide{
    flex:0 0 68%;
    scroll-snap-align:center;
}

.phone-slide img{
    width:100%;
    height:auto;
    display:block;
}

@media (min-width:768px){

    .phone-slider{
        justify-content:center;
        gap:20px;
    }

    .phone-slide{
        flex:0 0 280px;
    }

}
@media (min-width:1200px){

    .phone-slider{

        justify-content:center;
        overflow:visible;
        gap:40px;
        padding: 5% 0;

    }

    .phone-slide{

        flex:0 0 250px;

        scroll-snap-align:none;

    }

}