h1{
	text-align: center;
}
.paragraphs{
	text-align: center;
	font-size: 18px;
}
/*footer{
  padding:20px;
  margin-top:20px;
  color:#ffffff;
  background-color:#000000;
  text-align: center;
}*/




#guest-setup {
    background-color: #f1f1f1; /* Retain existing background color */
    border-radius: 4px; /* Keep border radius */
    width: 100%; /* Ensure it spans full width on smaller screens */
    max-width: 750px; /* Limit width on larger screens */
    margin: 20px auto; /* Center align with top and bottom spacing */
    padding: 16px; /* Retain padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

#guest-setup h2 {
    margin-bottom: 15px;
    font-size: 1.5rem; /* Keep the heading responsive */
}

#guest-setup p {
    margin-bottom: 20px;
    font-size: 1.1rem; /* Slightly larger font for better readability */
    line-height: 1.6; /* Improve line spacing for readability */
    font-weight: 500; /* Slightly bolden the text for emphasis */
}

#guest-setup .form-row {
    display: flex; /* Use flexbox for horizontal layout */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    gap: 10px; /* Space between elements */
    align-items: center; /* Align all elements to the vertical center */
}

#guest-setup .form-group {
    flex: 1; /* Make input fields take equal space */
    min-width: 200px; /* Ensure fields don't shrink too small */
}

#guest-setup .btn-primary {
    flex-shrink: 0; /* Prevent the button from shrinking */
    padding: 10px 20px; /* Add consistent padding */
    height: auto; /* Allow it to scale naturally with content */
    display: inline-flex; /* Align button content with inputs */
    align-items: center; /* Center align button text */
    white-space: nowrap; /* Prevent text wrapping inside the button */
}

#guest-setup .error {
    display: block; /* Ensure error messages don't affect layout */
    font-size: 0.85rem; /* Smaller font for error messages */
    color: red;
    margin-top: 5px;
}

@media (max-width: 768px) {
    #guest-setup .form-row {
        flex-direction: column; /* Stack elements vertically on small screens */
        align-items: stretch; /* Full-width alignment for small screens */
    }
    #guest-setup .btn-primary {
        width: 100%; /* Full-width button for small screens */
    }
}





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

.row.text-center > .col-md-3 {
    margin-bottom: 20px; /* Add space between rows on small screens */
}

.row.text-center {
    justify-content: center; /* Center the entire row's content */
}

.col-md-3 {
    padding: 15px; /* Add padding inside each column */
}

/* Adjust the testimonial panel */
.testimonial {
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent black for better readability */
  color: white; /* White text for testimonials */
  padding: 20px; /* Adds spacing inside the panel */
  border-radius: 10px; /* Rounds the panel corners */
  margin: 20px auto; /* Centers the panels */
  max-width: 600px; /* Controls the panel width */
  text-align: center; /* Ensures text is centered */
}

/* Keep the names as the existing color */
.testimonial h4 {
  color: #3367B2; /* Existing color for names */
}

/* Dots under the carousel */
.carousel-indicators {
  bottom: -20px; /* Moves the dots slightly below */
  z-index: 10; /* Keeps the dots above other elements */
}


.carousel-control {
  color: #3367B2;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  text-shadow: none; /* Removes the shadow */
  color: #3367B2; /* Ensures the chevrons are still visible in blue */
}

.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}




/* Custom styles for the Use Cases section */
.panel {
    background-color: rgba(0, 0, 0, 0); /* Semi-transparent black background */
    color: #fff; /* White text */
    border: none; /* Remove default border */
    border-radius: 8px; /* Optional rounded corners */
}
.panel h3 {
    color: #fff; /* Ensure headings remain white */
}
.panel img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}
.panel ul li {
    color: #fff; /* Slightly lighter text for list items */
}
.panel ul li span {
    color: #3367B2; /* Chevron color */
}

/* Hero Section Styling */
.hero-section {
    position: relative;
    background-color: #3367B2; /* Fallback background color */
    color: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

/* Banner Image */
.banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Text Inside the Banner (H3) */
.text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 66%; /* Occupy 50% of the banner */
    height: 100%; /* Match the banner's height */
    display: flex;
    align-items: center; /* Vertically justify the content */
    justify-content: flex-start; /* Left-align the text */
    padding: 20px;
    color: white;
    z-index: 10;
}

.text-container h1 {
    font-size: 3rem; /* Larger size */
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    text-shadow: none;
}

.text-container h2 {
    font-size: 1.8rem; /* Larger size */
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    text-shadow: none;
}

/* Text Below the Banner (H3) */
.banner-description {
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
}

.banner-description h2 {
    font-size: 2rem;
    color: #fff;
    background: none; /* Remove background color */
    margin: 0 auto;
    max-width: 80%; /* Limit width for better readability */
    text-shadow: none;
}
.banner-description h3 {
    font-size: 1.8rem;
    color: #fff;
    background: none; /* Remove background color */
    margin: 0 auto;
    max-width: 80%; /* Limit width for better readability */
    text-shadow: none;
}

/* Register Button Styling */
.register-button {
    padding: 12px 30px;
    background-color: #3367B2; /* Primary blue color */
    color: #fff; /* White text */
    font-size: 16px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-shadow: none; /* No black outline */
    transition: opacity 0.3s ease; /* Smooth hover effect */
    text-align: center;
}

.register-button:hover {
    opacity: 0.8; /* Add hover effect */
    color: #fff; /* Ensure text stays white */
    text-shadow: none; /* No shadow on hover */
}

/* Adjust spacing for the button container */
.button-container {
    text-align: center; /* Center-align the button */
    margin-top: 20px; /* Add space above the button */
    margin-bottom: 20px; /* Add space below the button */
}


/* Adjust the spacing above and below "Why Clever Groups?" */
.outline-text {
    margin-top: 0px; /* Adjust space above the section */
    margin-bottom: 10px; /* Reduce space below the section */
    text-shadow: none;
}



/* Responsive Adjustments */
@media (max-width: 768px) {
    .text-container {
        width: 80%; /* Allow more text space on smaller screens */
        padding: 10px;
    }
    .text-container h1 {
        font-size: 1.5rem; /* Adjust font size for mobile */
    }
    .text-container h2 {
        font-size: 1.5rem; /* Adjust font size for mobile */
    }
    .banner-description h3 {
        font-size: 1.5rem;
    }
}

/* Try It Now Button Styling */
.try-it-button {
    padding: 12px 30px;
    background-color: #3367B2; /* Match primary button color */
    color: #fff; /* White text */
    font-size: 16px; /* Font size for visibility */
    border: none;
    border-radius: 5px;
    text-decoration: none; /* No underline */
    cursor: pointer;
    display: inline-block;
    text-shadow: none; /* No text shadow */
    transition: opacity 0.3s ease; /* Smooth hover effect */
    text-align: center;
}

.try-it-button:hover {
    opacity: 0.8; /* Slight transparency on hover */
    color: #fff; /* Ensure the text color stays white */
}


/* Read More Button */
.read-more-container {
    margin-top: 20px; /* Add space above the button */
}

.read-more-button {
    padding: 12px 30px;
    background-color: #3367B2; /* Match primary button color */
    color: #fff; /* White text */
    font-size: 16px; /* Adjust font size */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-shadow: none; /* Ensure no black outline */
    transition: opacity 0.3s ease; /* Smooth hover effect */
}

.read-more-button:hover {
    opacity: 0.8; /* Add hover effect */
    color: #fff; /* Ensure text stays white */
}