/* Header Styles */
header {
  background-color: #005082;
  padding: 0;
  font-size: 3rem;
  color: white;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.tele-container {
  flex-grow: 1;
  text-align: center;
  font-size: 1.5rem;
}

.tele {
  text-decoration: none;
  color: inherit; /* or your preferred color */
}

.social-icons {
  display: flex;
  justify-content: flex-end;
}

.social-icon {
  margin-left: 10px; /* Space between icons */
  font-size: 24px; /* Adjust size as needed */
  color: inherit; /* or your preferred color */
  text-decoration: none;
}

@media (max-width: 768px) {
 .social-icons {
      display: none;
  }
}
@media (max-width: 768px) { /* Adjust the max-width value based on your design */
  .header-content {
      flex-direction: column;
      align-items: center; /* Center align the items if needed */
  }
  
  .tele-container, .social-icons {
      width: 100%; /* Make the telephone and social icons take full width */
      justify-content: center; /* Center the content inside each container */
      margin-bottom: 10px; /* Add some space between the stacked items */
  }

  .social-icons {
      order: 1; /* Place the social icons below the phone numbers */
  }
}

.financing-offer {
  font-family: 'Pacifico', cursive; 
  font-size: 1.5rem; 
  color: #ffcc00; 
  position: absolute; /* Position absolutely */
  left: 10%; /* Adjust based on your layout */
  margin: 0; /* Remove any default margin */
  padding: 0; /* Adjust if needed */
}

@media (max-width: 1380px) {
  .financing-offer {
       display: none;
   }
 }

 .financing-offer2 {
  font-family: 'Pacifico', cursive; 
  font-size: 1.5rem; 
  color: #ffcc00; 
  position: relative; /* Position absolutely */
  text-align: center;
  margin: 0; /* Remove any default margin */
  padding: 0; /* Adjust if needed */
  padding-top: 2%;
}

.no-margin {
  margin: 0 !important; /* !important ensures that this rule has the highest priority */
}

.services-title .location-skyline-image {
  width: 100%;        /* Makes the image width responsive to the container width */
  height: auto;       /* Maintains the aspect ratio */
  display: block;     /* Removes any default inline spacing */
  object-fit: cover;  /* Ensures the image covers the area, may clip the image */
  max-height: 200px;  /* Adjust max-height as needed to make images look uniform */
}

.parent-container {  /* Replace with the actual class or ID of the parent container */
  text-align: center;
  padding-bottom: 10px;
}

/* Carousel Styles */
.carousel-item {
  height: 30rem;
}

/* Intro Slideshow Section (Carousel) */
#introslideshow {
  position: relative;
}

#introslideshow .carousel-inner .carousel-item img {
  width: 100%;
  height: auto;
}

#introslideshow .static-text-and-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(0, 80, 130, 0.6); /* 10% translucent background */
  padding: 20px;
}

#introslideshow .static-text {
  color: white;
  width: 40%;
  margin-left: 20%;
  padding: 20px;
  font-size: 1.2em;
  background-color: transparent;
}

#introslideshow .static-text h2 {
  font-size: 2em;
}

#introslideshow .static-text p {
  font-size: 1.2em;
}

@media (max-width: 1600px) {
  #introslideshow .static-text {
    font-size: 1.1em; /* Slightly smaller font size */
    padding: 15px; /* Adjust padding */
  }

  #introslideshow .static-text h2 {
    font-size: 1.8em; /* Adjust heading font size */
  }

  #introslideshow .static-text p {
    font-size: 1.1em; /* Adjust paragraph font size */
  }
}

@media (max-width: 1094px) {
  #introslideshow .static-text {
    font-size: 1.1em; /* Slightly smaller font size */
    padding: 15px; /* Adjust padding */
  }

  #introslideshow .static-text h2 {
    font-size: 1.6em; /* Adjust heading font size */
  }

  #introslideshow .static-text p {
    font-size: 0.9em; /* Adjust paragraph font size */
  }
}

@media (max-width: 815px) {
  #introslideshow .static-text {
    font-size: 1.0em; /* Slightly smaller font size */
    padding: 15px; /* Adjust padding */
  }

  #introslideshow .static-text h2 {
    font-size: 1.4em; /* Adjust heading font size */
  }

  #introslideshow .static-text p {
    font-size: 0.8em; /* Adjust paragraph font size */
  }
}

@media (max-width: 768px) {
  #introslideshow .static-text-and-placeholder {
    display: none; /* This will hide the whole text and placeholder section */
  }

  #introslideshow .carousel-inner .carousel-item img {
    height: auto; /* Adjust image height for small screens */
  }
}


#introslideshow .construction-guy-placeholder {
  width: 40%;
  padding-left: 20px;
}

#introslideshow .construction-guy-placeholder img {
  max-width: 100%;
  height: auto;
}


/* CTA Button */
#introslideshow .static-text-and-placeholder .btn-cta {
  display: inline-block; /* Aligns the button in line */
  margin-top: 20px; /* Adds space above the button */
  padding: 10px 20px; /* Standard padding for buttons */
  font-size: 1.25rem; /* Standard font size for buttons */
  background-color: #007bff; /* Standard button background color */
  color: white; /* Standard button text color */
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none; /* Removes underline from link */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #introslideshow .static-text-and-placeholder {
      flex-direction: column;
      text-align: center;
  }

  #introslideshow .static-text {
      width: 100%;
      padding: 10px;
  }

  #introslideshow .construction-guy-placeholder {
      padding-left: 0;
      padding-top: 20px;
  }
}


/* General Styles */
#quote, .tele, .contact-tele {
  color: white;
}

h5 {
  font-size: 2.5rem;
}

.bold {
  font-weight: bolder;
}

.border {
  border: 1px solid;
  border-color: gray;
}

.btn {
  font-size: 1.25rem;
}

.blue, .carousel-caption {
  background-color: rgba(0, 80, 130, .95);
  color: white;
}

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

.values-box {
  padding: 5%;
}

/* Adjustments for the navbar and logo */
.navbar {
  position: relative; /* Needed for absolute positioning of children */
}

.logo-img {
  text-align: center;
  margin: 0 auto;
  width: 200px; /* Default width for larger screens */
  height: auto; /* Maintains aspect ratio */
}

/* Position the toggle button on top of the logo on smaller screens */
@media (max-width: 768px) {
  .navbar-toggler {
      position: absolute;
      right: 19px; /* Adjust as needed */
      top: 10px; /* Adjust as needed */
      z-index: 2; /* Ensures it's above other elements */
  }

  .navbar-brand .logo-img {
      width: 100%; /* Logo takes 80% of the screen width */
      margin: 0 auto; /* Center the logo */
  }

  /* Adjust navbar brand to ensure logo is properly aligned */
  .navbar-brand {
      margin-right: 0;
      flex-grow: 1;
      text-align: center;
      padding-top: 0;
      padding-bottom: 0;
  }

  /* Ensures the collapsed menu is below the toggle button */
  .navbar-collapse {
      margin-top: 50px; /* Adjust based on the size of your toggle button */
  }
}

/* Existing styles for larger screens */
.nav-item {
  font-size: 1.3rem;
  padding: 0 8px;
  /* Ensure consistent line height and minimum height */
  line-height: 1.3rem; /* Match this to your font-size or adjust as needed */
  min-height: 3rem; /* Adjust as needed - should be at least double the line-height if you have items wrapping onto two lines */
  display: flex;
  align-items: center; /* Vertically center the text in the nav item */
  justify-content: center; /* Horizontally center the text in the nav item */
}

/* Media queries for smaller screens */
/* ... your existing media query adjustments ... */


/* Adjustments for medium-sized screens (e.g., small laptops, large tablets) */
@media (max-width: 1475px) {
  .nav-item {
    font-size: 1.2rem;
    padding: 0 6px;
  }
}

@media (max-width: 1400px) {
  .nav-item {
    font-size: 1.1rem;
    padding: 0 6px;
  }
}

@media (max-width: 1350px) {
  .nav-item {
    font-size: 1.0rem;
    padding: 0 5px;
  }
}

@media (max-width: 1285px) {
  .nav-item {
    font-size: 0.9rem;
    padding: 0 4px;
  }
}

/* Adjustments for small-sized screens (e.g., tablets) */
@media (max-width: 992px) {
  .nav-item {
    font-size: 0.9rem;
    padding: 0 4px;
  }
}

/* Adjustments for extra small screens (e.g., phones, small tablets) */
@media (max-width: 768px) {
  .nav-item {
    font-size: 1rem;
    padding: 0 2px;
  }
}

.valuesP {
  color: #e6e6e6;
}

.values-h2, .values-h3 {
  color: white;
}

#values {
  background-color: #005082;
  padding-top: 35px;
}

.values-icon {
  color: white;
  padding: 10px;
}

.values-icon:hover {
  color: #b2ebf2;
}

.services {
  padding: 2rem 0;
}

/* Contact Section Styles */
.contactUs {
  border-radius: 5px;
  padding: 10px;
}

.contact-container {
  padding-top: 50px;
  padding-bottom: 50px;
}

.contactnumber {
  text-align: center;
  padding-bottom: 20px;
}

/* Form Styles */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #005082;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #b2ebf2;
  color: black;
}

/* Responsive Video Styles */
.responsive-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin: auto;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .responsive-video {
    padding-top: 28.125%; /* Adjust the height for desktop */
  }

  .responsive-video iframe {
    width: 100%;
    left: 25%;
  }
}
#video-text-section {
  background-color: #D9853B;
  color: white;
  position: relative;
  overflow: hidden;
}

#video-text-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* Ensuring the diagonal covers the entire section */
  height: 100%;
  background: linear-gradient(to bottom right, #D9853B 49%, #ECA15B 51%);
  transform: rotate(-5deg); /* Adjust the angle as needed */
  transform-origin: 0 0;
}

/* Footer Styles */
.end {
  background-color: #dedede;
  padding: 20px;
  text-align: center;
}

/* Services Title Styles */
.services-title {
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #f7f7f7;
  margin: 15px;
  border-radius: 10px;
}

.services-title h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.services-title h3 {
  font-size: 20px;
  color: #666;
  margin-bottom: 15px;
}

.services-title ul {
  list-style: square;
  margin-left: 20px;
}

.services-title ul li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #555;
}

.services-title div {
  font-size: 16px;
  color: #444;
  line-height: 1.5;
}

/* Call Button Styles */
.call-button {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

/*Video Section*/

#video-text-section {
  display: flex;
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally */
  padding: 40px 0; /* Equal padding on top and bottom */
}

#video-text-section .row {
  width: 100%;
  margin: 0;
}

#video-text-section .col-md-6 {
  flex: 1; /* Ensures a 50/50 split */
}

/* Responsive Video Styles */
.responsive-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin: auto;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-text-content {
  padding: 20px; /* Padding around the text */
  font-size: 1.2em; /* Matching font size with the carousel */
}

.video-text-content h2 {
  font-size: 2em; /* Larger font size for heading */
}

.video-text-content p {
  font-size: 1.2em; /* Larger font size for paragraph */
}
@media (max-width: 1600px) {
  .video-text-content {
    font-size: 1.1em; /* Slightly smaller font size */
    padding: 15px; /* Adjust padding */
  }

  .video-text-content h2 {
    font-size: 1.8em; /* Adjust heading font size */
  }

  .video-text-content p {
    font-size: 1.1em; /* Adjust paragraph font size */
  }
}

@media (max-width: 1375px) {
  .video-text-content {
    font-size: 1.1em; /* Slightly smaller font size */
    padding: 15px; /* Adjust padding */
  }

  .video-text-content h2 {
    font-size: 1.6em; /* Adjust heading font size */
  }

  .video-text-content p {
    font-size: 0.9em; /* Adjust paragraph font size */
  }
}

@media (max-width: 815px) {
  .video-text-content {
    font-size: 1.0em; /* Slightly smaller font size */
    padding: 15px; /* Adjust padding */
  }

  .video-text-content h2 {
    font-size: 1.4em; /* Adjust heading font size */
  }

  .video-text-content p {
    font-size: 0.8em; /* Adjust paragraph font size */
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #video-text-section {
      flex-direction: column;
  }

  .responsive-video, .video-text-content {
      width: 100%;
      /* padding-bottom: 56.25%; */
  }
}

@media (max-width: 768px) {
  .video-text-content, .video-button {
    display: none;
  }
}

/* Full width video on mobile screens
@media (max-width: 768px) {
  .responsive-video, .responsive-video iframe {
    width: 100%;
    padding-top: 56.25%;
  }
} */

@media (max-width: 768px) {
  #video-text-section {
    display: none;
  }
}
@media (min-width: 768px) {
  #video-text-section-mobile {
    display: none;
  }
}

.services-header {
  color: #333; /* Adjust the color to match your theme */
  font-size: 2.5rem; /* Adjust the size as needed */
  margin-top: 20px;
  margin-bottom: 40px;
}

.services-title {
  padding: 20px;
  margin-bottom: 20px; /* Space between pricing blocks and the button */
}

.services-title h2 {
  font-size: 1.8rem; /* Adjust the size as needed */
  color: #333; /* Adjust the color as needed */
}

.services-title ul {
  list-style-type: none; /* Removes the default list style */
  padding: 0;
}

.services-title ul li {
  font-size: 1.2rem; /* Adjust the size as needed */
  margin-bottom: 10px; /* Space between list items */
}

.call-button {
  background-color: #007bff; /* Primary button color */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.25rem;
  margin-top: 20px;
  text-decoration: none; /* Removes underline from link */
}

.services-title ul li {
  font-size: 1.2rem;
  margin-bottom: 10px;
  list-style: none; /* Remove default list styling */
}

.services-title ul li i {
  color: green; /* Color of the check icon */
  margin-right: 5px; /* Space between the icon and text */
}

.contact-tele {
  color: black; /* Changes the color of the phone number to black */
}

/* Header Styles */
header {
  text-align: center;
  background-color: #005082;
  margin-bottom: 0;
  padding: 0;
  font-size: 3rem;
  color: white;
}


/* Carousel Styles */
.carousel-item {
  height: 30rem;
}


/* Request Service Button on Mobile */
#mobile-quote {
  display: block;
  width: 90%;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2rem;
}

/* Hide Carousel on Mobile */
@media (max-width: 768px) {
  #introslideshow {
    display: none;
  }
}


/* Contact Section Styles */
.contactUs {
  border-radius: 5px;
  padding: 10px;
}

.contact-container {
  padding-top: 50px;
  padding-bottom: 50px;
}

.contactnumber {
  text-align: center;
  padding-bottom: 20px;
}

/* Form Styles */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #005082;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #b2ebf2;
  color: black;
}

/* Responsive Video Styles */
.responsive-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin: auto;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-text-section {
  background-color: #D9853B;
  color: white;
  position: relative;
  overflow: hidden;
}

#video-text-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* Ensuring the diagonal covers the entire section */
  height: 100%;
  background: linear-gradient(to bottom right, #D9853B 49%, #ECA15B 51%);
  transform: rotate(-5deg); /* Adjust the angle as needed */
  transform-origin: 0 0;
}




/* Footer Styles */
.end {
  background-color: #dedede;
  padding: 20px;
  text-align: center;
}

/* Services Title Styles */
.services-title {
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #f7f7f7;
  margin: 15px;
  border-radius: 10px;
}

.services-title h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.services-title h3 {
  font-size: 20px;
  color: #666;
  margin-bottom: 15px;
}

.services-title ul {
  list-style: square;
  margin-left: 20px;
}

.services-title ul li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #555;
}

.services-title div {
  font-size: 16px;
  color: #444;
  line-height: 1.5;
}

/* Call Button Styles */
.call-button {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

.pricing-header {
  color: white; /* Adjust the color to match your theme */
  font-size: 2.5rem; /* Adjust the size as needed */
  margin-top: 20px;
  margin-bottom: 40px;
}

.services-title {
  padding: 20px;
  margin-bottom: 20px; /* Space between pricing blocks and the button */
}

.services-title h2 {
  font-size: 1.8rem; /* Adjust the size as needed */
  color: #333; /* Adjust the color as needed */
}

.services-title ul {
  list-style-type: none; /* Removes the default list style */
  padding: 0;
}

.services-title ul li {
  font-size: 1.2rem; /* Adjust the size as needed */
  margin-bottom: 10px; /* Space between list items */
}

.call-button {
  background-color: #007bff; /* Primary button color */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.25rem;
  margin-top: 20px;
  text-decoration: none; /* Removes underline from link */
}

.services-title ul li {
  font-size: 1.2rem;
  margin-bottom: 10px;
  list-style: none; /* Remove default list styling */
}

.services-title ul li i {
  color: green; /* Color of the check icon */
  margin-right: 5px; /* Space between the icon and text */
}

.contact-tele {
  color: black; /* Changes the color of the phone number to black */
}

/* About Us Section Styles */
#about-us {
  background-color: #005082; /* Theme blue color */
  color: white; /* Text color */
  padding: 40px 0; /* Top and bottom padding */
  position: relative;
  overflow: hidden;
}

#about-us h2 {
  font-size: 2em; /* Heading font size, same as video section */
}

#about-us p {
  font-size: 1.2em; /* Paragraph font size, same as video section */
  line-height: 1.5; /* Line height for better readability */
}

#about-us .col-lg-6 {
  padding: 15px; /* Padding for each column */
}

/* About Us Background Design */
#about-us::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0; /* Start from the right for a mirrored effect */
  width: 200%; /* Wide enough to cover entire section */
  height: 100%;
  background: linear-gradient(to bottom left, #005082 49%, #003f66 51%); /* Gradient effect */
  transform: rotate(5deg); /* Rotate for a diagonal effect */
  z-index: -1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #about-us::before {
    right: -100%; /* Shift to the right on smaller screens */
    width: 300%;
    transform: rotate(10deg); /* Lesser rotation on smaller screens */
  }
}

/* Website Services Section Styles */
#website-services {
  background-color: #f7f7f7a2; /* Light background color for contrast */
  padding: 40px 0; /* Top and bottom padding */
}

#website-services h2 {
  color: #005082; /* Theme blue color for heading */
  margin-bottom: 20px; /* Space below the heading */
  font-size: 2.5rem; /* Larger font size for heading */
}

#website-services p {
  color: #333; /* Darker text color for visibility */
  margin-bottom: 40px; /* Space below the paragraph */
}

/* Service Boxes */
#website-services .col-lg-4 {
  margin-bottom: 30px; /* Space between service boxes */
}

/* Icons in the service boxes */
#website-services .fa-3x {
  color: #007bff; /* Blue color for icons */
  margin-bottom: 20px; /* Space below icons */
}

/* Service Title */
#website-services h3 {
  color: #005082; /* Theme blue color for service titles */
  font-size: 1.8rem; /* Font size for service titles */
  margin-bottom: 10px; /* Space below service titles */
}

/* Service Description */
#website-services p {
  color: #666; /* Grayish color for description for easy readability */
  font-size: 1rem; /* Font size for description */
}

/* Hover Effect on Service Boxes */
#website-services .col-lg-4:hover {
  background-color: #e6e6e6c7; /* Slightly darker background on hover */
  border-radius: 10px; /* Rounded corners for a smoother look */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #website-services .col-lg-4 {
    margin-bottom: 20px; /* Less space between services on smaller screens */
  }
}

.service-icon {
  margin-top: 5px;
}

#website-services .service-icon {
  margin-top: 5px;
}

/* Examples Section Styles */
#examples-section {
  padding: 40px 0;
  background-color: #f7f7f7; /* Or any color that matches your site */
}

.examples-header {
  color: white; /* Adjust color as needed */
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.example-button {
  display: block;
  background-color: #007bff; /* Button color */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 20px; /* Space below the button */
  width: 80%; /* Button width */
  margin: 20px auto; /* Center the button */
}

.example-placeholder {
  background-color: #ddd; /* Placeholder background */
  padding: 40px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.5rem;
}

/* Specific to each example */
.hvac-example {
  background-color: #28a745; /* Different color for HVAC */
}

.plumbing-example {
  background-color: #17a2b8; /* Different color for Plumbing */
}

.review-box {
  padding: 20px;
  background-color: #f8f9fa; /* Light grey background */
  border: 1px solid #ddd; /* Light grey border */
  border-radius: 5px; /* Rounded borders */
  margin: 20px; /* Margin for spacing */
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1); /* Subtle shadow */
}

.review-text {
  font-size: 1rem; /* Adjust the size as needed */
  color: #333; /* Dark grey text for readability */
  margin-bottom: 20px; /* Space below the review text */
}

.reviewer-name {
  font-size: 1rem; /* Adjust the size as needed */
  color: #005082; /* Theme blue color for reviewer's name */
  text-align: right; /* Align the reviewer's name to the right */
}

@media (max-width: 768px) {
  #reviews-carousel {
    display: none;
  }
}

#social-links{
  background-color: #dddddd;
  padding-top: 10px;
  padding-bottom: 10px;
}

#brands-section {
  text-align: center; /* Center the image */
  padding: 20px 0; /* Add some padding above and below the image */
}

#brands-section img {
  max-height: 200px; /* Adjust the height as needed */
  width: auto; /* Maintain aspect ratio */
  margin: auto; /* Center the image horizontally */
}

/* Adjust the max-height for smaller screens if needed */
@media (max-width: 768px) {
  #brands-section img {
    max-height: 150px; /* Smaller height for smaller screens */
  }
}

form label, form input, form textarea {
  display: block; /* Makes each element take up the full width */
  margin-bottom: 10px; /* Adds some space below each element */
}

form input, form textarea {
  width: 100%; /* Makes inputs and textarea take full width of the form container */
  box-sizing: border-box; /* Ensures padding and border are included in the width */
}

/* You might already have specific styles, so you can add these to enhance the form layout */