diff --git a/assets/css/hero.css b/assets/css/hero.css index 47a3962..40bd5f0 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -16,9 +16,8 @@ text-align: center; width: 100%; height: 30vw; - /* max-width: 1200px; */ gap: 4rem; /* Space between items */ - margin-bottom: 4rem; + margin-bottom: auto; background: linear-gradient(to bottom right, #F9B208, #E72E77); padding-top: 60px; padding-bottom: 40px; @@ -176,61 +175,6 @@ background-color: linear-gradient(to bottom right, #F9B208, #E72E77); } -/* Responsive layout for larger screens */ -@media screen and (min-width: 768px) { - .hero-inner { - justify-content: space-between; - width: 100%; - flex-direction: row; - } - - .hero-content { - text-align: center; - padding: 20px; - margin-right: none; - } - - .hero-logo { - width: 200px; - margin: 0 auto 20px; - margin-bottom: 40px; - } - - .hero-title { - font-size: 2.5rem; - color: white; - margin-bottom: 40px; - } - - .hero-button:hover { - background-color: white; - /* color: #2ee797; */ - color: #ff3988; - box-shadow: 0 0px 16px rgba(0, 0, 0, 0.3); - } - - .hero-screenshots { - max-width: 50%; - display: flex; - gap: 40px; - margin-left: 0px; - padding-left: 0px; - flex-direction: row; - } - - .screenshot { - width: auto; - height: 330px; - border-radius: 13px; - } - - .screenshot img { - width: 100%; - height: 100%; - object-fit: cover; - } -} - /* Phone screens */ @media (max-width: 767px) { @@ -250,6 +194,9 @@ width: 80vw; } + .hero-second { + width: 100%; + } .hero-bloc { flex-direction: column;