/* General Styles */
/* Header Logo */
.header-logo {
  height: 200px; /* Set the height similar to that of an h3 */
  width: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center the logo if necessary */
}

/* Header Section Styles */
.site-header {
  background-color: #0b1524; /* Background color for the header */
  padding: 20px 0; /* Adjust padding as needed */
}

.header-inner {
  display: flex; /* Use flexbox for alignment */
  justify-content: space-between; /* Space between logo and nav */
  align-items: center; /* Center items vertically */
}

.logo {
  display: flex; /* Align logo */
  align-items: center; /* Center logo vertically */
}

.header-logo {
  max-width: 150px; /* Adjust max-width as necessary */
  height: auto; /* Keep aspect ratio */
}

nav {
  /* Style for the navigation menu */
}

nav ul {
  display: flex; /* Align list items in a row */
  list-style-type: none; /* Remove default list styles */
}

nav ul li {
  margin: 0 20px; /* Space between menu items */
  position: relative; /* Positioning for the underline effect */
}

nav ul li a {
  color: #ffffff; /* Text color for links */
  text-decoration: none; /* Remove underline */
  font-weight: 500; /* Make the text bolder */
  transition: color 0.3s, transform 0.3s; /* Smooth transition for hover effect */
}

nav ul li a:hover {
  color: #F9425F; /* Change color on hover */
  transform: translateY(-3px); /* Slightly lift the link */
}

/* Underline Effect */
nav ul li::after {
  content: ''; /* Create a pseudo-element for the underline */
  position: absolute;
  left: 50%; /* Center it horizontally */
  bottom: -5px; /* Position it below the text */
  width: 0; /* Start with no width */
  height: 3px; /* Height of the underline */
  background-color: #F9425F; /* Underline color */
  transition: width 0.3s ease, left 0.3s ease; /* Smooth transition for width and position */
}

nav ul li:hover::after {
  width: 100%; /* Full width on hover */
  left: 0; /* Align to the left */
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'Montserrat', sans-serif; /* Use Montserrat */
  background-color: #06101F;
  color: #7487A3;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Boxed Container */
.body-wrap {
  background: #0b1524;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.boxed-container {
  max-width: 1440px;
  margin: 0 auto;
  box-shadow: 0 16px 48px rgba(6, 16, 31, 0.5);
}

/* Header Styles */
.site-header {
  background-color: transparent;
  text-align: center;
  padding: 40px 0;
}

.site-header h1 a {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif; /* Use Montserrat */
  font-size: 36px;
}

/* Hero Section */
.hero {
  padding: 100px 0;
  text-align: center;
  background-color: #273C5A;
  position: relative;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  color: #ffffff;
  font-size: 48px;
  margin-bottom: 20px;
}

.hero-paragraph {
  margin-bottom: 40px;
}

.hero-cta {
  display: flex; /* Use flex to align buttons */
  justify-content: center; /* Center buttons horizontally */
  gap: 20px; /* Space between buttons */
  margin-top: 20px; /* Add some space above buttons */
}

.hero-app {
  position: relative;
  margin-top: 50px;
}

.device-mockup {
  max-width: 400px;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* Slower animation */
}

.device-mockup.has-loaded {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.button {
  background-color: #F9425F;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px; /* Slightly rounder buttons */
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Added transition for scale and shadow */
}

/* Button Hover Effects */
.button:hover,
.button:focus {
  background-color: #F75D71; /* Change background color on hover */
  transform: translateY(-10px); /* Move up on hover */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.button-primary {
  background-color: #47A1F9;
}

.button-primary:hover,
.button-primary:focus {
  background-color: #3a87d4; /* Change background color on hover */
  transform: translateY(-10px); /* Apply the same hover effect */
}

/* Features Section */
.features {
  padding: 100px 20px;
  background-color: #0b1524;
}

.features-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow wrapping for mobile compatibility */
}

.feature {
  width: 30%;
  background-color: #273C5A;
  padding: 40px;
  margin: 20px;
  border-radius: 16px; /* Rounder boxes */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
  position: relative; /* For positioning effects */
}

/* Hover Animation for Features */
.feature:hover {
  transform: translateY(-10px); /* Move up on hover */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/* Team Section */
.team {
  padding: 100px 20px;
  background-color: #0b1524;
}

.team-title {
  text-align: center;
  font-size: 36px;
  color: #ffffff;
  margin-bottom: 40px;
}

.team-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.team-member {
  background-color: #273C5A;
  border-radius: 16px; /* Rounded corners */
  padding: 20px;
  margin: 20px;
  text-align: center;
  flex: 1 1 calc(20% - 40px); /* Adjust width for 5 members with margin */
  transition: transform 0.3s; /* Smooth transition */
}

.team-member:hover {
  transform: translateY(-10px); /* Hover effect */
}

.team-member-photo {
  width: 100%;
  height: auto;
  border-radius: 50%; /* Circular image */
  margin-bottom: 15px;
}

.team-member-name {
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}

.team-member-role {
  font-size: 16px;
  color: #7487A3;
}

/* Call-to-Action Section */
.cta {
  text-align: center;
  padding: 80px 20px;
  background-color: #F9425F;
  color: #fff;
}

.cta h2 {
  font-size: 36px;
}

.cta p {
  margin-bottom: 30px;
}

.cta-button {
  display: flex; /* Use flex for centering */
  justify-content: center; /* Center the buttons */
  gap: 20px; /* Space between buttons */
}

/* Add hover effect for Sign Up button */
.cta-button .button:hover,
.cta-button .button:focus {
  transform: translateY(-10px); /* Move up on hover */
}

/* Shadow for buttons */
.button-shadow {
  box-shadow: 0 8px 16px rgba(6, 16, 31, 0.3);
}

/* Footer */
.site-footer {
  background-color: #06101F;
  padding: 20px 0;
  text-align: center;
  color: #7487A3;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .feature {
    width: 100%; /* Full width on mobile */
    margin-bottom: 20px;
  }

  .team-member {
    flex: 1 1 calc(50% - 40px); /* Two members per row on smaller screens */
  }

  .hero-title {
    font-size: 36px;
  }

  .cta h2 {
    font-size: 28px;
  }
}

/* Contact Section */
.contact-section {
  background-color: #0b1524; /* Background for the contact section */
  padding: 80px 20px; /* Padding around the section */
  color: #ffffff; /* Text color */
  text-align: center; /* Center the text */
}

.contact-inner {
  max-width: 600px; /* Max width for the form */
  margin: 0 auto; /* Center the form */
  background-color: #273C5A; /* Background color for the form container */
  border-radius: 16px; /* Round corners */
  padding: 40px; /* Padding inside the form container */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

.contact-title {
  font-size: 36px; /* Title font size */
  margin-bottom: 30px; /* Space below the title */
}

.form-group {
  margin-bottom: 20px; /* Space between form elements */
  text-align: left; /* Align labels to the left */
}

.form-label {
  display: block; /* Block display for labels */
  margin-bottom: 10px; /* Space below labels */
  font-weight: bold; /* Bold labels */
}

.form-input,
.form-textarea {
  width: 100%; /* Full width for inputs */
  padding: 10px; /* Padding inside inputs */
  border: 1px solid #7487A3; /* Border color */
  border-radius: 6px; /* Rounded corners */
  background-color: #06101F; /* Background color for inputs */
  color: #ffffff; /* Text color for inputs */
  transition: border 0.3s; /* Smooth transition for border */
}

.form-input:focus,
.form-textarea:focus {
  border-color: #F9425F; /* Change border color on focus */
  outline: none; /* Remove outline */
}

.button button-send {
  width: 100%; /* Full width for the button */
  padding: 12px; /* Padding for the button */
  font-size: 16px; /* Button font size */
  background-color: #F9425F; /* Button background color */
  color: #fff; /* Button text color */
  border: none; /* Remove border */
  border-radius: 6px; /* Round corners */
  cursor: pointer; /* Change cursor on hover */
  transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.button:hover {
  background-color: #F75D71; /* Change background color on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .contact-inner {
      padding: 20px; /* Less padding on smaller screens */
  }

  .contact-title {
      font-size: 28px; /* Smaller title on mobile */
  }
}