body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif; 
  font-weight: 500;
}

html {
  scroll-behavior: smooth;
  position:relative; 
  min-height: 100%;
}

/* Ensure page scrolls to the top when URL hash changes */
:target:before {
  content: '';
  display: block;
  height: 110px; /* Adjust this value based on your header height */
  margin: -110px 0 0; /* Adjust this value based on your header height */
}

/* For specific elements if needed */
.navbar-nav .nav-link {
  font-family: 'Nunito', sans-serif;
}

.navbar-brand{
  font-weight: 550;
}

.navbar .btn {
  display: inline-flex;      /* ensures flex behavior inside button */
  align-items: center;
  justify-content: center;
  height: 38px;              /* uniform height */
  min-width: 100px;          /* minimum width for smaller button */
  padding: 0 1.25rem;        /* left/right padding */
  font-size: 1rem;
}

/* Navigation Button Styles */
.btn-outline-nav-light {
  border-color: #4d648d; /* Blue border */
  color: #4d648d; /* Blue text */
}

.btn-outline-nav-light:hover {
  background-color: rgba(77, 100, 141, 0.1);
  border-color: #4d648d; /* Light background on hover */
}

.btn-nav-dark {
  background-color: #4d648d; /* Dark blue background */
  color: white; /* White text */
}

.btn-nav-dark:hover {
  background-color: #6e8ccf; /* Slightly darker blue on hover */
}

/* Style content sections */
.content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: white; 
}

section:target{
  display: block;
}

h2 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

/* Custom button color */
.btn-orange {
  background-color: #ED820E; 
  color: white; 
  border: none; 
}

.btn-orange:hover {
  background-color: #ff8c00; 
}

/* Add the following CSS to style the pricing options */
.pricing-plans {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.pricing-option {
  width: 30%;
  background-color: white;
  /* background-color: lightgrey; */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px;
  transition: transform 0.3s ease;
  margin-right: 20px; /* Add margin between options */
}

.pricing-option:hover {
  transform: translateY(-5px);
}

.pricing-option h3 {
  color: black;
  font-size: 24px;
  margin-bottom: 10px;
}

.pricing-option h4 {
  color: black;
  font-size: 20px;
  margin-bottom: 10px;
}

.pricing-option p {
  color: black;
  font-size: 16px;
  margin-bottom: 20px;
}

.pricing-option ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  color:#4d648d;
}

.pricing-option ul li {
  background-color: white;
}

.pricing-option button {
  width: 40%;
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #ED820E;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.pricing-option button:hover {
  background-color: #283655;
}

/* Style the feature glide through container */
.feature-glide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Style the feature slides */
.feature-slide {
  display: none;
  text-align: center;
  padding: 50px;
  background-color: white;
  color: black;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%; /* Set the width to 100% to fill the container */
  /* max-width: 600px; Add a max-width to limit the size if needed */
  height: 350px; /* Adjust the height as desired */
}

.feature-slide h3 {
  font-size: 28px;
}

.feature-slide p{
  font-size: 20px;
}

/* Show the first slide by default */
.feature-slide:first-child {
  display: block;
}

/* Style the dots container */
.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Style the individual dots */
.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

/* Style the active dot */
.dot.active {
  background-color: darkblue;
}


/* Style the dropdown button */
.dropbtn {
  padding: 10px 20px;
  color: black;
  text-decoration: none;
}

/* Style the dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  top: 135%; /* Add this line to position the dropdown below the button */
  left: 0; /* Add this line to align the dropdown with the button */
  background-color: whitesmoke;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* Show the dropdown content when hovering over the dropdown button or the dropdown itself */
nav ul li:hover .dropdown-content,
.dropdown-content:hover {
  display: block;
}

/* Style the links inside the dropdown content */
.dropdown-content a {
  display: block;
  padding: 10px 20px;
  color: black;
  text-decoration: none;
}

/* Style the links inside the dropdown content on hover */
.dropdown-content a:hover {
  background-color: #283655;
  color: white;
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}


/*Contact form*/
/* Contact Form styles */
.contact-form-container {
  max-width: 800px;
  margin: 0 auto;
}

.contact-form-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-form-container label,
.contact-form-container input {
  margin-bottom: 3px;
}

/*Make the text input fields more narrow */
.contact-form-container input[type="text"],
.contact-form-container input[type="email"] {
  width: 100%;
  max-width: 200px;
  padding: 8px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
}

/* Make the button rounded */
.contact-form-container button {
  width: 40%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 20px;
  background-color: #ED820E;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.contact-form-container button:hover {
  background-color: #283655;
}

.contact-form-container textarea {
  height: 120px; /* Adjust this value to your preference */
  width: 100%;
  font-size: 16px;
  border-radius: 10px;
}


#home h2 {
font-size: 40px;

}

.footer-logo {
  width: 70px;   /* make it smaller */
  height: auto;  /* maintain aspect ratio */
  display: block;
}

#home h3{
 font-size: 22px;
}

.testimonials-container {
  display: flex;
  justify-content: space-between;
  /* justify-content: center; */
  align-items: center; /* Center vertically */
  padding: 15px;
  border-radius: 20px;
}

.testimonial-box {
  width: 33%;
  padding: 20px;
  background-color: #283655;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 20px;
  box-sizing: border-box; /* Include padding and border in the width calculation */
}

.testimonial-box p {
  font-size: 20px;
  color: white;
}

.cta-containers {
  display: flex;
  justify-content: space-around;
}

.cta-container {
  width: 45%;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 20px;
}

.cta-container h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #4d648d;
}

.cta-container p {
  font-size: 18px;
  color: black;
}

.get-started-button {
  padding: 10px 20px;
  background-color: #ED820E;
  color: #ffffff;
  text-decoration: none;
  border-radius: 20px;
  display: inline-block;
  margin-top: 10px;
}

.get-started-button:hover{
  background-color: #283655;
}

 #Clients {
  text-align: center;
  padding: 10px; /* Adjust padding as needed */
 }


#Clients h2 {
  font-size: 56x;
  color: white;
  margin-bottom: 20px;
} 

.clients-search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Adjust margin as needed */
}

.clients-input {
  width: 300px; /* Adjust the width as needed */
  padding: 15px;
  border: 1px solid #4d648d;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 16px;
}

.clients-button {
  background-color: #ED820E;
  color: white;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.clients-button:hover {
  background-color: #283655;
}


.modal {
  display: none;
  position: fixed;
  z-index: 9999; /* Higher z-index value */;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
  text-align: center;
}

#custom-alert-ok-button {
  background-color: #ED820E; /* Green background color */
  color: #fff; /* White text color */
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

#custom-alert-ok-button:hover {
  background-color: #283655; /* Darker green color on hover */
}



/*Styles for /Subscription Route
/* Styles for the profile box */
.profile-box {
  background-color: black;
  border-radius: 20px;
  color: white;
  width: 600px;
  padding: 20px;
}

.profile-picture {
  width: 100px;
  height: 100px;
  background-color: gray; /* Placeholder color for the profile picture */
  border-radius: 50%; /* Make it round */
  margin: 0 auto 10px; /* Center the profile picture */
}

.subscription-section{
  background-color: white;
  margin-top: 10px;
  border: 2px solid lightgray; /* Added border */
  border-radius: 20px;
  color: #4d648d;
  padding: 20px;
  text-align: center;
  width: 600px;
}

.subscription-section h2{
  font-size: 20px;
  color: #4d648d;
}

.subscription-section h3{
  color: black;
  font-size: 18px;
}

.subscribe-button {
  background-color:#ED820E;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;

}
.subscribe-button:hover{
  background-color:  #283655;
}

/* Styles for the bio box */
.bio-box {
  background-color: white;
  margin-top: 10px;
  border: 2px solid lightgray; /* Added border */
  border-radius: 20px;
  color: #4d648d;
  padding: 20px;
  text-align: center;
  width: 600px;
}

.bio-box h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.bio-box p{
  font-size: 18px;
  color: black;
}


.products-container {
  display: flex;
  flex-direction: column;
}

.product-row {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
  border: 2px solid #4d648d;
  margin-bottom: 10px;
  transition: background-color 0.3s;
}

.product-name {
  flex: 1;
  color: black;
  text-align: left; /* Aligns the product name to the left */
}

.product-price {
  color: black;
  margin-right: 10px;
}

.product-radio {
  margin-left: auto;
}

.checkout-button {
  width: 20%; /* Set width to 25% of the container */
  margin-top: 10px; /* Adjust margin from the rows */
  border-radius: 20px; /* Make the button rounder */
  font-size: 16px; /* Increase font size */
  padding: 15px; /* Add padding for better appearance */
  background-color :#ED820E;
  color: white;
  align-self: flex-end; /* Align the button to the start (left) of the flex container */
  cursor: pointer; /* Show click cursor */
  border: none;
}

.checkout-button:hover {
  background-color: #283655;
  color: white;
}





/* CLients section Search/Discover */
.business-container {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.business-box {
  margin-bottom: 20px;
  background-color: white;
  border-radius: 10px; /* Adjust the radius as needed */
  padding: 15px; /* Optional: Adds padding inside the box */
}

.business {
  /* border: 1px solid #ccc; Border around each business box */
  padding: 10px;
  color:#4d648d;
}

.business img {
  width: 100%;
  max-width: 200px; /* Adjust as needed */
  height: auto;
}

.business h3 {
  margin-top: 10px;
  color:#4d648d;
}

.profile-button {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #007bff; /* Adjust as needed */
  color: #fff; /* Adjust as needed */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.profile-button:hover {
  background-color: #0056b3; /* Adjust as needed */
}


/* neW BOOSTRAP HOME SECTION CSS */


/* CTA Section Background */
.cta-section {
  background-color: #f8f9fa; /* Light background */
}

/* CTA Card Styles */
.cta-card {
  border-radius: 15px; /* Rounded corners */
  padding: 30px; /* Added padding */
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.cta-card:hover {
  transform: scale(1.05); /* Slightly enlarges the card on hover */
}

/* Button Styles */
.cta-button {
  background-color: #ED820E; /* Primary orange color */
  color: white; /* White text for better contrast */
}

.cta-button:hover {
  background-color: #ffb84d; /* Light orange on hover */
}

/* Text Color for Card Titles */
.card-title {
  color: #4d648d; /* Darker blue for titles */
}


/* Testimonial Card Styles */
.testimonial-card {
  border-radius: 15px;
  padding: 30px;
  background-color: #2c2c2c; /* Dark gray background for cards */
}

.testimonial-card .card-text {
  font-size: 1.2rem; /* Slightly larger text for better readability */
  color: #e0e0e0;
  font-weight: bold; /* Light gray text color for better contrast */
}

.testimonial-card .card-title {
  font-weight: bold;
  font-size: 1.2rem;
  color: #ED820E; /* Orange color */
}

/* Styling adjustments for section title */
h3 {
  font-size: 2rem;
  font-weight: bold;
  color: #f9f9f9; /* Light color for the heading */
}

/* Optional: Shadow adjustment */
.testimonial-card.shadow-lg {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Softer shadow for dark mode */
}

.pricing-h2 {
  font-weight: bold;
  font-size: 2.5rem; /* Adjust as needed */
}

.pricing-p {
  font-weight: bold;
  font-size: 1.25rem; /* Adjust as needed */
}

.calc-btn {
  background-color: #4d648d; /* Original button color */
  color: white;
  transition: background-color 0.2s ease; /* Smooth transition */
}

.calc-btn:hover,
.contact-btn:hover {
  background-color: #6e8ccf/* Light grey on hover */ !important;
  color: black /* Optional: change text color on hover */ !important;
}