* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    line-height: 1.5;
}

/* Navbar */
header {
  background: white;
  padding: 15px 30px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  background: white;
}

.nav-container {
  display: flex;
  justify-content: space-between; /* logo a sinistra, menu a destra */
  align-items: center;
}

/* Menu desktop */
.navbar ul {
  display: flex;
  list-style: none;
  gap: 20px; /* spazio tra voci */
}

.navbar ul li a {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 10px; /* piccolo padding per hover */
  border-radius: 5px; /* serve per l'effetto hover */
  transition: all 0.2s ease-in-out;
}

.navbar ul li a:hover {
  color: white;
  background-color: #FF595A;
  text-decoration: none;
}

/* Hero Section */
.hero {
    background: linear-gradient(90deg, #f9635b, #fcb43a);
    color: white;
    padding: 60px 0;

}
.hero-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	margin: 50px;
}
.hero-text {
    flex: 1;
}
.hero-text h1 {
    font-size: 4.5rem;
	margin-left:60px;
	font-weight:lighter;
}
.hero-text span {
    font-weight:bold;
}
.hero-buttons {
    margin-top: 20px;
	margin-left:60px;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    background: white;
    color: #f9635b;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
}
.hero-image {

    text-align: right;
	position: relative;
    display: inline-block;
	margin: 40px;

}
.hero-image img {
  display: block;
  max-width: 400px;
  text-align: right;



}
.hero-image .shadow {
    position: absolute;
    bottom: -50px; /* distance below phone */
    left: 20%;
    transform: translateX(-60%);
    width: 100%; /* make it smaller than phone */
    max-width: 300px;
    opacity: 0.9; /
}
/* Services */
.services {
   display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin: 50px;
}
.service-box {
    background: linear-gradient(90deg, #f9635b, #fcb43a);
    color: white;
    flex: 1 1 300px;   /* responsive width */
    padding: 40px 30px;
    text-align: center; /* center the icon and text */
    border-radius: 10px;
	 margin: 30px;
}

/* Features Banner */
.features-banner {
     width: 100%;
    margin: 0;
    padding: 0;
}

.features-banner .feature-only-image {
    width: 100%;    /* full width */
    height: auto;   /* maintain aspect ratio */
    display: block; /* removes inline spacing */
}

/* Footer */
.footer-divider {
    width: 100%;
    height: 300px; /* Adjust to the visible wave height */
    background-image: url('../Divider_Homepage.jpg'); /* Change path if needed */
    background-repeat: no-repeat;
    background-position: top center; /* Focus on top part */
    background-size: 100% auto; /* Keep original proportions */
}
/* ===== Animations ===== */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Hero image animation */
.hero-image img {
    animation: fadeInUp 1s ease-out forwards;
}

.service-box {
    opacity: 0; /* start hidden */
    transform: scale(0.3); /* start smaller */
    animation: zoomIn 0.8s ease-out forwards;
}

/* Stagger each service box */
.service-box:nth-child(1) { animation-delay: 0.5s; }
.service-box:nth-child(2) { animation-delay: 1s; }
.service-box:nth-child(3) { animation-delay: 1.5s; }

/* Feature image animation */
.features-banner .feature-only-image {
    opacity: 0; /* start hidden */
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 2s;
}