/* General Styles */
body {
 font-family: 'Montserrat', sans-serif;
 background-color: #f4f4f4; /* Light gray background */
 text-align: center;
 margin: 0;
 padding: 0;
}

header {
 padding: 50px;
 background-color: #31873E; /* Dark green */
 color: white;
}

h1 {
 font-family: 'Oswald', sans-serif;
 font-size: 36px;
 margin-bottom: 10px;
}

p {
 font-size: 18px;
 margin-bottom: 20px;
 color: #333; /* Dark gray */
}

/* Video Section */
#intro-video {
 text-align: center;
 padding: 30px;
 background-color: #f4f4f4; /* Light gray background */
}

#intro-video h2 {
 font-family: 'Oswald', sans-serif;
 font-size: 24px;
 color: #31873E; /* Dark green */
 margin-bottom: 20px;
 line-height: 1.5; /* Improve readability */
}

/* Video Container */
.video-container {
 position: relative;
 display: inline-block;
}

video {
 width: 100%;
 max-width: 800px; /* Limit video width on larger screens */
 border-radius: 10px;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Play Button */
#playButton {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: none; /* Remove background color */
 border: none; /* Remove border */
 width: auto; /* Let the button size match the icon */
 height: auto; /* Let the button size match the icon */
 cursor: pointer;
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: transform 0.3s ease-in-out;
}

#playButton:hover {
 transform: translate(-50%, -50%) scale(1.2); /* Slight zoom on hover */
}

#playButton img {
 width: 160px; /* Double the previous size */
 height: auto;
 opacity: 0.9; /* Add slight transparency to the icon */
 transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#playButton img:hover {
 opacity: 1; /* Fully visible on hover */
 transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Mobile-Specific Styles */
@media (max-width: 768px) {
 video {
     max-width: 100%; /* Ensure video fits smaller screens */
 }

 /* Load Portrait Video for Mobile */
 video source {
     content: url("assets/noballsix-intro-vid-16x9-mobile.mp4");
 }
}

/* Form Section */
section {
 padding: 30px;
 background-color: #fffbe6; /* Light yellow */
 border-top: 5px solid #31873E; /* Green border at the top */
}

form {
 background-color: #FFFFFF; /* White form background */
 padding: 20px;
 border-radius: 10px;
 display: inline-block;
 text-align: left;
 width: 350px;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

label {
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 16px;
 color: #000000; /* Black */
 margin-bottom: 5px;
 display: block;
}

input[type="text"], input[type="email"] {
 width: calc(100% - 20px);
 padding: 10px;
 margin-bottom: 15px;
 border: 1px solid #8CBF41; /* Lighter green outline */
 border-radius: 5px;
 box-sizing: border-box;
}

input[type="checkbox"] {
 margin-right: 10px;
}

button {
 background-color: #E62A33; /* Red button */
 color: white;
 border: none;
 padding: 10px 20px;
 font-size: 16px;
 cursor: pointer;
 border-radius: 5px;
 width: 100%;
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
}

button:hover {
 background-color: #FF5733; /* Lighter red on hover */
}

.privacy-text {
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 12px; /* Smaller text for privacy line */
 color: #E62A33; /* Red */
 margin-bottom: 15px;
 display: block;
}

/* Hide honeypot field visually */
.hidden {
 display: none !important;
}
/* Style for the "BE THE FIRST TO KNOW" heading */
section h1 {
color: #31873E; /* Dark green */
}

/* Connect With Us Section */
#connect h2 {
 font-family: 'Oswald', sans-serif;
 font-size: 28px;
 color: #31873E; /* Dark green */
 margin-bottom: 20px;
 text-transform: uppercase; /* Convert text to uppercase */
}

#connect h2 {
 font-family: 'Oswald', sans-serif;
 font-size: 28px;
 color: #31873E; /* Dark green */
 margin-bottom: 20px;
}

.social-icons {
 display: flex;
 justify-content: center;
 gap: 20px; /* Space between icons */
}

.social-icons a {
 display: inline-block;
 width: 50px;
 height: 50px;
}

.social-icons img {
 width: 100%;
 height: auto;
 transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

.social-icons img:hover {
 transform: scale(1.2); /* Grow icon by 20% on hover */
}

/* Legal Links Section */
#legal-links {
 text-align: center;
 margin-top: 20px;
 padding: 10px;
 font-family: 'Montserrat', sans-serif;
 font-size: 8px; /* Slightly smaller font size */
 color: #000; /* Black color */
 white-space: nowrap; /* Prevent wrapping to a new line */
}

#legal-links a {
 color: #000; /* Black color for links */
 text-decoration: none;
 font-weight: 500; /* Medium weight */
 margin: 0 5px; /* Reduce space between links */
 text-transform: uppercase; /* Convert text to uppercase */
 display: inline-block; /* Ensure proper alignment */
}

#legal-links a:hover {
 text-decoration: underline;
}

/* Intro Section */
#intro {
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px;
background-color: #FFFFFF; /* Clean white background */
color: #31873E; /* Default text color */
position: relative; /* For positioning elements like the bottom line */
}

.intro-content {
max-width: 50%;
text-align: left; /* Left-align content */
}

.intro-content h1 {
font-family: 'Oswald', sans-serif;
font-size: 36px;
line-height: 1.3; /* Reduce spacing between lines */
margin-bottom: 15px;
color: #31873E; /* Dark green header */
}

.intro-content p {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.5;
margin-bottom: 30px;
color: #8CBF41; /* Lighter green subheading */
}

.cta-buttons {
display: flex;
gap: 15px;
}

.cta-buttons .btn {
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s ease-in-out;
}

.cta-buttons .btn-primary {
background-color: #E62A33; /* Red */
color: white;
}

.cta-buttons .btn-primary:hover {
background-color: #FF5733; /* Lighter red */
}

.cta-buttons .btn-secondary {
background-color: #FFFFFF; /* White */
color: #31873E; /* Dark green */
border: 2px solid #31873E;
}

.cta-buttons .btn-secondary:hover {
background-color: #31873E;
color: white;
}

/* Larger Logo */
.large-logo {
margin-top: 30px; /* Add spacing from the buttons */
text-align: center; /* Center the logo */
}

.large-logo img {
max-width: 300px; /* Further enlarge the larger logo */
height: auto;
}

/* Hero Image */
.hero-image {
position: relative;
max-width: 450px; /* Further enlarge the hand and phone */
width: 100%;
height: auto;
overflow: hidden; /* Hide anything outside the container */
margin-top: -30px; /* Adjust spacing beneath the navigation bar */
}

.hero-image img {
max-width: 100%;
height: auto;
transform: translateY(50px); /* Move the wrist down behind the green line */
}

/* Bottom Green Line */
.bottom-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* Make the green line thicker */
background-color: #31873E; /* Match the dark green color */
}

/* Navigation Bar */
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 50px;
background-color: #31873E; /* Dark green */
position: sticky;
top: 0;
z-index: 1000;
}

#navbar .logo img {
max-width: 120px; /* Adjust logo size */
height: auto;
}

.nav-links {
list-style: none;
display: flex;
gap: 20px;
}

.nav-links li {
display: inline-block;
}

.nav-links a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: white;
font-weight: bold;
text-transform: uppercase; /* Convert text to uppercase */
transition: color 0.3s ease-in-out;
}

.nav-links a:hover {
color: #FFBC31; /* Orange hover effect */
}

.btn-signup {
background-color: #E62A33; /* Red */
color: white;
padding: 8px 15px;
border-radius: 5px;
font-size: 14px;
text-transform: uppercase; /* Convert button text to uppercase */
transition: background-color 0.3s ease-in-out;
}

.btn-signup:hover {
background-color: #FF5733; /* Lighter red */
}

/* Features Section */
#features {
padding: 50px;
background-color: #FFFFFF; /* White background */
text-align: center;
}

.features-header h2 {
font-family: 'Oswald', sans-serif;
font-size: 28px;
color: #31873E; /* Dark green */
margin-bottom: 10px;
}

.features-header p {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #8CBF41; /* Lighter green */
margin-bottom: 30px;
}

.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four columns for desktop */
gap: 20px;
}

.feature-card {
text-align: center;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
transition: transform 0.3s ease-in-out;
}

.feature-card:hover {
transform: translateY(-5px); /* Slight lift on hover */
}

.feature-card img {
max-width: 80px; /* Icon size */
height: auto;
margin-bottom: 15px;
}

.feature-card h3 {
font-family: 'Montserrat', sans-serif; /* Change to Montserrat */
font-weight: bold; /* Set to bold */
font-size: 18px;
color: #31873E; /* Dark green */
margin-bottom: 10px;
}

.feature-card p {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #333; /* Dark gray */
}

/* Responsive Design */
@media (max-width: 1024px) {
.features-grid {
  grid-template-columns: repeat(2, 1fr); /* Two columns for tablets */
}
}

@media (max-width: 768px) {
.features-grid {
  grid-template-columns: 1fr; /* One column for mobile */
}
}

/* About Section */
#about {
padding: 50px;
background-color: #FFFFFF; /* White background */
text-align: center;
}

.about-header h2,
.about-info h2 {
font-family: 'Oswald', sans-serif;
font-size: 28px; /* Consistent header size */
color: #31873E; /* Dark green */
margin-bottom: 10px;
}

.about-header p {
font-family: 'Montserrat', sans-serif;
font-size: 16px; /* Consistent body text size */
color: #8CBF41; /* Lighter green */
margin-bottom: 30px;
}

.app-screenshots {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}

.screenshot {
text-align: center;
}

.screenshot img {
max-width: 200px; /* Adjust size of the app screenshots */
height: auto;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.screenshots-caption {
font-family: 'Montserrat', sans-serif;
font-size: 14px; /* Consistent caption size */
color: #333; /* Dark gray */
margin-top: 10px;
}

.about-info p {
font-family: 'Montserrat', sans-serif;
font-size: 16px; /* Consistent body text size */
color: #333; /* Dark gray */
line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1024px) {
.app-screenshots {
  flex-direction: column; /* Stack screenshots vertically on tablets */
  align-items: center;
}

.screenshot img {
  max-width: 250px; /* Slightly larger on smaller screens */
}
}

/* Contact Section */
#connect {
padding: 50px;
background-color: #FFFFFF; /* White background */
text-align: center;
}

.contact-header h2 {
font-family: 'Oswald', sans-serif;
font-size: 28px; /* Consistent header size */
color: #31873E; /* Dark green */
margin-bottom: 10px;
}

.contact-header p {
font-family: 'Montserrat', sans-serif;
font-size: 16px; /* Consistent body text size */
color: #8CBF41; /* Lighter green */
margin-bottom: 30px;
}

.contact-details p {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #333; /* Dark gray */
margin-bottom: 10px;
}

.contact-details a {
color: #31873E; /* Dark green */
text-decoration: none;
font-weight: bold;
}

.contact-details a:hover {
text-decoration: underline;
}

.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.social-icons a img {
max-width: 40px; /* Icon size */
height: auto;
transition: transform 0.3s ease-in-out;
}

.social-icons a img:hover {
transform: scale(1.2); /* Slight zoom on hover */
}

/* Footer Privacy Section */
#privacy {
padding: 20px;
background-color: #F4F4F4; /* Light gray background */
text-align: center;
}

.privacy-content p {
font-family: 'Montserrat', sans-serif;
font-size: 12px; /* Smaller footer text */
color: #333; /* Dark gray */
margin-bottom: 5px;
}

.legal-links a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #31873E; /* Dark green */
text-transform: uppercase; /* Make text uppercase */
text-decoration: none;
font-weight: bold;
margin: 0 5px;
}

.legal-links a:hover {
text-decoration: underline;
}

/* Default Styles (Desktop-first) */
/* These are your base styles for desktop and larger screens */

#navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 50px;
background-color: #31873E; /* Dark green */
position: sticky;
top: 0;
z-index: 1000;
}

.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four columns for desktop */
gap: 20px;
}

/* Tablet Styles */
@media (max-width: 1024px) {
.features-grid {
  grid-template-columns: repeat(2, 1fr); /* Two columns for tablets */
}

#navbar {
  padding: 10px 30px; /* Reduce padding on tablets */
}
}

/* Mobile Styles */
@media (max-width: 768px) {
.features-grid {
  grid-template-columns: 1fr; /* Single column for mobile */
}

#navbar {
  flex-direction: column; /* Stack navbar items vertically */
  padding: 10px 15px; /* Further reduce padding */
}

.hero-image img {
  max-width: 300px; /* Smaller hero image on mobile */
}
}

@media (max-width: 768px) {
#navbar {
  flex-wrap: wrap; /* Allow items to wrap onto the next line if needed */
  justify-content: space-between; /* Ensure proper spacing */
}

.nav-links {
  display: none; /* Optionally hide links on mobile if using a hamburger menu */
}

.btn-signup {
  font-size: 12px; /* Reduce font size for the button */
  padding: 5px 10px; /* Adjust padding */
  margin-left: auto; /* Push it to the far right */
}
}

@media (max-width: 768px) {
.hero-image img {
  max-width: 90%; /* Scale down the image to fit within the screen */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center the image */
  display: block; /* Ensure it's treated as a block element */
}
}

@media (max-width: 768px) {
#intro {
  flex-direction: column; /* Stack text and image vertically */
  text-align: center; /* Center-align text */
}

.intro-content {
  max-width: 100%; /* Full width for text */
  margin-bottom: 20px; /* Add spacing below the text */
}
}

@media (max-width: 768px) {
body {
  padding: 0 15px; /* Add padding to the sides of the page */
}

h1, h2, p {
  margin: 0 auto; /* Center text */
  padding: 0 10px; /* Add padding inside text containers */
}
}

.cta-buttons {
display: flex;
justify-content: center;
gap: 15px; /* Keep button spacing */
margin-top: 20px; /* Add space above buttons */
margin-bottom: 20px; /* Add space below buttons */
}

.large-logo img {
max-width: 200px; /* Reduce logo size slightly */
height: auto;
margin-top: 20px; /* Add some space above the logo */
}

.intro-content p {
text-align: left; /* Align subheading to the left */
margin: 0 auto; /* Center the block within the container */
}

.hero-image img {
max-width: 90%; /* Scale down the image */
height: auto;
margin: 20px auto 0; /* Add spacing and center it */
display: block;
}