body {
  background-color: #f8f9fa;
}

.hidden-h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Places it behind the logo */
  font-size: 0; /* Hides text from view but still accessible */
  color: transparent; /* Ensures it's not visible */
}

.hero-logo {
  position: relative;
  z-index: 1; /* Keeps the logo above the H1 */
}


.brand h4 {
  color: #115889; /* Change this to your desired color */
  font-weight: bold; /* Optional: Make the brand name bold */
}

.brand p {
  color: #666; /* Change this to your desired color */
  font-size: 1rem; /* Optional: Adjust the font size */
}


.hero-section {
  background-color: #f8f9fa; /* Adds a background color to the hero section */
  color: white;
  text-align: center;
  padding: 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  max-width: 50%; /* Default size for larger screens */
  height: auto; 
  margin-bottom: 0px;
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 70%; /* Increase size on tablets */
  }
}

@media (max-width: 576px) {
  .hero-logo {
    max-width: 90%; /* Increase size on mobile devices */
  }
}


.hero-section h1 {
  font-size: 3rem;
  font-weight: bold;
}

.hero-section p {
  font-size: 1.25rem;
  margin-top: 20px;
}

.brands-section {
  padding: 10px 0; /* Adds spacing around the brands section */
  background-color: #f8f9fa; /* Optional: You can add a background color if needed */
}

.container {
  max-width: 1140px; /* Ensures the section is centered and has padding on the sides */
  margin: 0 auto; /* Centers the content */
  padding-left: 15px; /* Adjust as needed */
  padding-right: 15px; /* Adjust as needed */
}

.brand {
  margin-bottom: 30px;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease; /* Adds a smooth transition for hover effects */
}

.brand:hover {
  transform: translateY(-5px); /* Adds a subtle lift effect on hover */
}


.brand-logo {
  max-width: 100%;  /* Allow the logo to scale to the full width of its container */
  max-height: 60px; /* Ensure the height is capped, but width can vary */
  width: auto;      /* Maintain aspect ratio */
  height: auto;     /* Maintain aspect ratio */
  margin: 0 auto 20px auto;  /* Center the logo and add 20px margin at the bottom */
  display: block;
}

@media (max-width: 768px) {
  .brand-logo {
    max-width: 80%;  /* Slightly reduce the maximum width on smaller screens */
    max-height: 50px; /* Adjust the height to be proportional */
  }
}

@media (max-width: 576px) {
  .brand-logo {
    max-width: 70%;  /* Further reduce the maximum width on very small screens */
    max-height: 40px; /* Adjust the height to be proportional */
  }
}


.services-section {
  padding: 60px 0;
  background-color: #f1f1f1;
}

/* Custom styles for the primary button */
.btn.btn-primary {
    background-color: #115998; /* Change the background color */
    border-color: #0062cc;     /* Change the border color */
}

/* Custom styles for a block-level button */
.btn.btn-block {
    padding: 15px 20px; /* Adjust padding */
    font-size: 1.2rem;  /* Adjust font size */
}


.contact-section {
  padding: 15px 0;
}

.contact-section form {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


#thank-you-message, #error-message {
  position: fixed; /* Fix position relative to the viewport */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Center the element */
  font-size: 1.5rem; /* Increase font size */
  color: #28a745; /* Green color for success */
  background-color: #fff; /* White background */
  padding: 20px; /* Add padding around the text */
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center the text */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  z-index: 9999; /* Ensure the message is on top of other content */
  width: 80%; /* Make the message box responsive */
  max-width: 500px; /* Limit the maximum width */
}

@media (max-width: 576px) {
  #thank-you-message, #error-message {
    font-size: 1.25rem; /* Slightly smaller font on small screens */
    padding: 15px; /* Increase padding for mobile devices */
  }
}


#error-message {
  color: #dc3545; /* Red color for error */
}
or: #dc3545; /* Red text color for error */
}

.social-icon {
  font-size: 2.0rem !important; /* Increase icon size */
  color: #115889; /* Default color */
  margin: 0 20px; /* Adjust space between icons */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition on hover */
  padding: 10px; /* Add padding to make the clickable area larger */
  display: inline-block; /* Ensures padding is applied properly */
}

.contact-section .social-icon i {
    font-size: 2.0rem !important;
    color: #115889 !important;
      margin: 0 20px; /* Adjust space between icons */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition on hover */
  padding: 10px; /* Add padding to make the clickable area larger */
  display: inline-block; /* Ensures padding is applied properly */
}


.social-icon:hover {
  color: #007bff; /* Change color on hover */
}

@media (max-width: 576px) {
  .social-icon {
    font-size: 2.0rem; /* Adjust icon size on smaller screens */
    margin: 0 15px; /* Slightly reduce space between icons on small screens */
  }
}

nt-size: 2.5rem; /* Adjust icon size on smaller screens */
    margin: 0 20px; /* Slightly reduce space between icons on small screens */
  }
}



.social-icon i {
  vertical-align: middle; /* Align icons vertically */
}


footer {
  background-color: #343a40;
  color: white;
  padding: 20px 0;
}