* {
    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;
}
.service-box .icon {
   width:60px;
    height: 50px;
    margin: 0 auto 15px;
	
}

.service-box .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);	/* optional: turns black icons to white */
	 
	 
}
.service-box p{
	margin:20px;
}

/* 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 Icons Section ===== */
.footer-icons {
    background-color: #f5f5f5;
    text-align: center;
    padding: 60px 20px 40px 20px;
	background:white;
}

.footer-icons .section-heading {
    color: #353539;
    font-size: 2rem;
    margin-bottom: 40px;
    line-height: 1.2;
}

.icons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 90px;
	background:white;
}

.icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px; /* fixed width for alignment */
    text-align: center;
}

.icon-box img {
    width: 60px;   /* icon size */
    height: 60px;
    margin-bottom: 10px;
}

.icon-box p {
    font-size: 0.95rem;
    color: #353539;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .icons-container {
        gap: 25px;
    }
    
    .icon-box {
        width: 100px;
    }

    .icon-box img {
        width: 50px;
        height: 50px;
    }

    .footer-icons .section-heading {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .icons-container {
        gap: 15px;
    }

    .icon-box {
        width: 80px;
    }

    .icon-box img {
        width: 40px;
        height: 40px;
    }

    .footer-icons .section-heading {
        font-size: 1.3rem;
    }
}


/* 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;
}