.h-gap i {
    display: inline-block;
    width: 40px;
    height: 4px;
    background-color: #3396ec; /* The blue color */
    margin-top: 20px; /* Optional: adjust the space above the line */
    margin-bottom: 20px; /* Optional: adjust the space below the line */
  }
  .ct-text-below {
    position: absolute;
    top: 0; /* Adjust as needed to fit the position behind the heading */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 6rem; /* Adjust font size */
    color: #3396ec; /* Adjust text color */
    opacity: 0.2; /* Adjust opacity to make it subtle behind the heading */
    z-index: -1; /* Ensures "Onswin" text stays behind the heading */
    font-weight: bold; /* Optional: to make the text bold */
    
  }
  @media screen and (max-width: 767px) {
    .ct-text-below {
      font-size: 60px; /* Adjust font size for smaller screens */
      top: -38px; /* Adjust position for smaller screens */
    }
  }
  
  .card-item {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
  
    .card-item:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  
    .scrollable-container {
      max-width: 100%;
      overflow-x: auto;
      white-space: nowrap;
      padding: 10px 0;
    }
  
    .scrollable-container .card-item {
      display: inline-block;
      margin-right: 15px;
    }
  
    /* Ensure all cards are of the same height */
    .card {
      border: none;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  
    /* Ensure card images have the same height */
    .card-img-top {
      height: 200px;
      background-size: cover;
      background-position: center;
    }
  
    .card-body {
      flex-grow: 1;
    }
  
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.26);
    }
  
  
    #contact-form-section {
      background-color: #f8f9fa; /* Light background */
    }
  
    .card {
      border-radius: 8px;
    }
  
    .card-body {
      padding: 2rem;
    }
  
    .form-control {
      border-radius: 4px;
      padding: 0.8rem;
    }
  
    .btn {
      padding: 0.8rem 2rem;
      border-radius: 5px;
    }
  
    .btn-primary {
      background-color: #007bff;
      border-color: #007bff;
    }
  
    .btn-primary:hover {
      background-color: #0056b3;
      border-color: #0056b3;
    }
  
    /* Optional: Add a nice hover effect on form fields */
    .form-control:focus {
      border-color: #007bff;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }
    .card-body {
      position: relative;
      padding: 20px;
      
  }
    .icon-background {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.7;
      font-size: 50px;
      color: #369bd5 !important;
      z-index: -1; /* This ensures the icon is behind the text */
  }
  
  .card-title, .card-text {
      position: relative; /* Ensures text stays above the icon */
      z-index: 1;
      font-weight: 600;
  }