.hero-section-about {
  position: relative; /* Needed for overlay positioning */
  background-image: url('../../images/Resource/info.avif');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-top: 8rem;
  padding-bottom: 8rem;
  min-height: 600px;
  display: flex;
  align-items: center;
 
  overflow: hidden;
}

/* 🔽 Overlay to darken background */
.hero-section-about .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black */
  z-index: 1;
}

/* 🔽 Make sure content appears above overlay */
.hero-section-about .container {
  position: relative;
  z-index: 2;
}
.btn-connect{
border-radius: 0px !important;
margin-top: 2rem;
}


.btn-connect:hover {
  background-color: #00B8E0 !important; 
  color: #fff !important;
}







.card {
            border: none; /* Remove default card border */
           
            height: 100%; /* Ensure cards in a row have equal height */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Distribute content vertically */
            padding: 1.5rem; /* Internal padding */
            background-color: rgb(240, 240, 240);
            gap: 10px;
            border-radius: 0px !important;
        }

        .card:hover {
            transform: translateY(-5px); /* Lift card on hover */
        }

        .card-img-top {
            max-width: 100%; /* Adjust logo size */
            height: auto;
           
            display: block; /* Ensure image is block for margin auto to work */
            margin-left: auto;
            margin-right: auto;
        }

        /* Styling for the SVG logo */
        .card-svg-logo {
            /* The intrinsic viewBox of the SVG will handle its aspect ratio,
               we just need to control its overall size within the card. */
            width: 100%; /* Adjust as needed to match other logos */
            height: auto; /* Maintain aspect ratio */
            margin-bottom: 1.5rem;
            display: block;
            margin-left: auto;
            margin-right: auto;
            fill: #175772;
        }

        .card-title {
            font-weight: 600;
            color: #343a40; /* Darker text for titles */
            color: rgb(11, 79, 108);
            margin-bottom: 0.5rem;
            font-size: 1.25rem; /* Slightly larger title */
            text-align: center;
        }

        .card-text {
            color: #6c757d; /* Muted text for description */
            font-size: 0.95rem;
            flex-grow: 1; /* Allow text to take available space */
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .btn-link {
            color: #28a745; /* Green color for links */
            font-weight: 500;
            text-decoration: none; /* Remove underline */
            
            align-items: center;
            padding: 0; /* Remove default button padding */
            
          
            text-align: center;
        }

        .btn-link:hover {
            text-decoration: underline; /* Add underline on hover */
            color: #218838; /* Darker green on hover */
        }

        .btn-link .arrow-icon {
            margin-left: 8px;
            font-size: 1.2em; /* Slightly larger arrow */
           
        }

        .btn-link:hover .arrow-icon {
            margin-left: 12px; /* Move arrow slightly on hover */
        }

        /* Custom styling for specific card text */
        .card-text.small-text {
            font-size: 0.85rem;
            color: #888;
        }


        .arrow-icon {
    display: inline-block;
    transform: rotate(25deg); /* Adjust the degree as needed */
    margin-left: 5px;
  }

        /* Adjustments for smaller screens */
        @media (max-width: 767.98px) {
            .card {
                margin-bottom: 1.5rem; /* Add space between cards on small screens */
            }



             .Hub{
                 margin-top: 1.5rem !important;
            }

             .Maps{
                 margin-top: 3rem !important;
            }
             .Scheme{
                 margin-top: 4.5rem !important;
            }
            .Resources{
                    margin-top: 3rem !important;
            }

        }