body {
    margin-top: 120px;
    margin-bottom: 60px
  }
  
  /* Font Section */
  p {
    font-size: 1.2rem;
  }
  
  .text-navy {
    color: #043d92;
  }
  
  .firstPara {
    font-size: 1.3rem;
  }
  
  .brand-text {
    font-size: 150%;
    color: #043d92;
  }
  
  .big-font {
    font-size: 150%;
  }
  
  .support-text {
    padding-bottom: 30px;
  }
  
  .domCare {
    max-width: 35%;
    margin-left: 50px;
  }
  
  .domCare-text {
    margin: 40px 0;
  }
  /* Navbar section */
  .navbar {
    box-shadow: 3px 3px 5px #043d92;
    opacity: 0.9;
    background: #fff;
  }
  
  .navbar-brand {
    color: #000;
    font-family: 'Ubuntu', sans-serif !important;
  }
  
  .navbar .nav-item {
    font-size: 1.2rem;
    padding-right: 1.2rem;
  }
  .navbar .nav-item.active {
    border-left: #043d92 2px solid;
  }
  
  /* Jumbotron Section */
  .jumbotron-fluid {
    background-color: #d3d3d3 !important;
    padding: 0 !important;
  }
  
  /* Button Section */
  .btn-navy {
    background: #043d92;
    color: #fff;
  }
  .btn-navy:hover {
    opacity: 0.8;
    color: #fff;
  }
  
  /* Image Section */
  .img-logo {
    width: 70%;
    height: auto;
    padding-left: 2rem;
  }
  
  /* Card Section */
  .card-background {
    background: #d3d3d3;
  }


  /* Footer Section */
  @media (max-width: 750px) {
    .footer-font {
      font-size: 0.7rem !important;
      padding: 5px 0 !important;
    }
  }
  
  footer {
    padding: 20px 0 0 0;
    margin: 10px 0 0 0;
    opacity: 0.8;
    background: #fff;
  }
  footer a:hover {
    text-decoration: none;
    color: #043d92;
  }
  .footer-font {
    font-size: 1rem;
    color: #000;
  }
  .footer-font:hover {
    opacity: 0.7;
  }
  
  .footerCards {
    padding-bottom: 80px;
    margin bottom: 30px;
  }

  .footer-font {
    font-size: 14px; /* Consistent font size */
    color: #333; /* Text color */
    margin: 0; /* Remove default paragraph margin */
  }
  
  .footer-link {
    text-decoration: none; /* Remove link underline */
    color: inherit; /* Ensure link color is inherited */
  }
  
  .footer {
    padding: 0; /* Padding for vertical space */
    background-color: #f8f9fa; /* Match Bootstrap light background */
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-top: 15px;

  }
  
  /* Slick slider Section */
  .slider {
    height: auto;
    padding-bottom: 2rem;
  }
  
  .slick-prev::before {
    content: none;
  }
  .slick-next:before {
    content: none;
  }
  
  /* Testimonial Section */
  .testimonial {
    font-size: 1.5rem;
    text-align: center;
    font-family: 'Indie Flower', cursive;
  }
  
  /* Contact Form Section */
  .contact-info {
    margin-bottom: 40px;
  }
  
  .fa-facebook {
    margin: 0 10px;
  }
  .fa-envelope {
    margin: 0 10px;
  }
  
  /* ul.square li:before {
    content: '✓ ';
    color: #0d6916;
  }
  
  ul.square {
    list-style: none;
    color: #043d92;
    font-size: 1.4rem;
  } */

  ul.square li {
    display: flex;
    align-items: flex-start; /* Aligns the checkmark to the top */
}

ul.square li:before {
  content: '✓ ';
  color: #0d6916;
  margin-right: 8px; /* Adds some space between the checkmark and the text */
  font-size: 1.6rem;
  line-height: 1.2rem; /* Adjusts the line height to make the checkmark appear aligned with the top of the text */
  position: relative;
  top: 2px; /* Move the checkmark down slightly */
}

ul.square {
    list-style: none;
    color: #043d92;
    font-size: 1.4rem;
}

  .square li {
    display: flex;
    align-items: center;
}

.square li p {
    margin: 0;
}

.custom-section {
  max-width: 700px; /* Adjust the width as needed */
  margin: 0 auto; /* Center the section horizontally */
}

/* Increase the line height for the text within the custom section */
.custom-section h5 {
  line-height: 1.5; 
}
  
  .dom-care-image {
    font-size: 0.8rem;
  }
  
  /* .left-card {
    max-width: 45%;
  }
  .right-card {
    max-width: 45%;
  } */
  
  /* Befriending Section */
  
  /* .befriending {
      padding-top: 50px;
  } */
  
  .support-text {
    padding-top: 30px;
  }
  
  .carousel-inner .carousel-item img {
    max-height: 630px !important;
    max-width: auto;
  }
  
  @media screen and (max-width: 800px) {
    h3,
    h1 {
      font-size: 2rem !important;
      font-weight: 400 !important;
    }
  }
  
  @media screen and (max-width: 400px) {
    h3,
    h1 {
      font-size: 1.5rem !important;
    }
    .footerCards {
      padding-bottom: 20px;
      margin-bottom: 40px;
    }
    .profiles{
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .extra-padding {
      padding-bottom: 10px;
    }
    
    .dom-container{
      padding-bottom: 50px;
      margin-bottom: 20px;
    }
    .bottom-space{
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
  }