/* Base Styles */

body {

  margin: 0;

  font-family: 'Roboto', sans-serif;

  color: #212121; /* near-black text */

  background-color: #FFFFFF; /* crisp white background */

  line-height: 1.6;

}

a {

  text-decoration: none;

}

h1, h2, h3 {

  margin: 0 0 20px;

}

p {

  margin-bottom: 20px;

}



/* Header */



header {

  background-color: #1A237E; 

  color: #fff;

  padding: 20px 10%;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

header .logo {

  font-size: 1.8em;

  font-weight: bold;

}

nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

}

nav ul li {

  margin-left: 20px;

}

nav ul li a {

  color: #fff;

  font-weight: 500;

}


/* Hero Section */

.hero {

  background: url('hero-image.jpg') no-repeat center center/cover;

  height: 70vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #fff;

  position: relative;

}

.hero::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  z-index: 1;

}

.hero-content {

  position: relative;

  z-index: 2;

  max-width: 800px;

  padding: 0 20px;

}

.hero h1 {

  font-size: 3em;

  margin-bottom: 20px;

}

.hero p {

  font-size: 1.2em;

  margin-bottom: 30px;

}

.hero a.button {

  background-color: #FF8F00; /* secondary bold amber */

  color: #fff;

  padding: 15px 30px;

  border-radius: 5px;

  font-weight: bold;

  transition: background-color 0.3s ease;

}

.hero a.button:hover {

  background-color: #00ACC1; /* accent refreshing cyan on hover */

}



/* Sections */

section {

  padding: 60px 10%;

}



/* Features Section */

.features {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  text-align: center;

}

.feature {

  flex: 1;

  min-width: 250px;

  margin: 20px;

  padding: 20px;

  background: #fff;

  border-radius: 5px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.feature i {

  font-size: 2em;

  margin-bottom: 10px;

  color: #1A237E; /* primary deep indigo for icons */

}



/* Call-to-Action (CTA) */

.cta {

  background-color: #1A237E; /* primary deep indigo */

  color: #fff;

  text-align: center;

  

  @keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.scroll-down {

  position: absolute;

  bottom: 20px;

  animation: bounce 2s infinite;

}



@keyframes bounce {

  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

  40% {transform: translateY(-10px);}

  60% {transform: translateY(-5px);}

}