/* Custom class for wide images */
.wide-img {
  width: 95%;  /* Make images wider but not too large */
  max-width: 1200px;  /* Ensure they do not exceed a reasonable width */
  margin-left: auto;  /* Center align the image horizontally */
  margin-right: auto; /* Center align the image horizontally */
  display: block;  /* Make images block elements */
}

/* Image container: remove extra spacing */
.container-fluid {
  padding: 0;  /* Remove any padding that might be affecting layout */
  margin: 0;  /* Ensure no margin is causing space */
}

/* Remove margin-bottom on image rows */
.row.no-gutters {
  margin-bottom: 0;  /* Remove any margin between rows */
}

/* General body styling */
body {
background-color: #1a1a1a;  /* Dark background for contrast */
color: #fff;  /* Light text for contrast */
font-family: Arial, sans-serif;
line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
color: #fff; /* Ensures headings are white */
}

/* Links */
a {
/* color: #4CAF50;  Green color for links */
text-decoration: none;
}

a:hover {
text-decoration: underline;
/* color: #81C784; Slightly lighter green on hover */
}

/* Card Styling */
.card {
background-color: #2c2c2c;
color: white;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-title {
font-size: 1.5em;
color: #fff;  /* White color for titles */
}

.card-body {
padding: 20px;
}

/* Button Styling */
button, .btn {
background-color: #1f77b4;  /* Green background */
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

button:hover, .btn:hover {
background-color: #1f77b4; /* Light green on hover */
}

/* Specific Button for Negative Emotions (Cancel, Gap Down, etc.) */
button.cancel, .btn.cancel {
background-color: #D32F2F;  /* Red background for negative buttons */
}

button.cancel:hover, .btn.cancel:hover {
background-color: #E57373;  /* Light red on hover */
}

/* Form inputs */
input[type="text"], input[type="password"], input[type="email"], select, textarea {
width: 100%;
max-width: 300px;  /* Limit the width of form inputs */
min-width: 200px;  /* Ensure inputs aren't too narrow */
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #333;
color: #fff;
text-align: center;
box-sizing: border-box;  /* Ensures padding is included in the width calculation */
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
border-color: #1f77b4; /* Green border on focus */
}

/* Navbar and Header Styling */
/* .navbar {
background-color: #333;
}

.navbar .navbar-brand {
color: white;
}

.navbar .navbar-nav .nav-link {
color: white;
font-weight: bold;
}

.navbar .navbar-nav .nav-link:hover {
color: #81C784;
} */


/* Containers and Spacing */
.container {
padding: 30px;
/* margin: 0 auto; */
}

.text-center {
text-align: center;
}

/* Disclaimer and Legal Text */
u, b {
font-weight: bold;
}

/* Footer */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 30px;
}


footer a {
color: #1f77b4;
}

footer a:hover {
color: #1f77b4;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
.container {
    padding: 20px;
}

iframe {
    width: 100%;  /* Full width for mobile */
    height: 300px;  /* Smaller height for mobile */
}

input[type="text"], input[type="password"], input[type="email"], select, textarea {
    max-width: 100%;  /* Ensure inputs fill their parent containers on small screens */
}
}