.card{transition: all .4s ease-in-out;    margin-bottom: 20px; /* Add margin to create space between cards */
}
 .card:hover {
            transform: scale(1.05);
            color: whitesmoke;
            opacity: 0.9;
transform: scale(1.1);
            background: linear-gradient(150deg, #09b3af, #301934 100%);

        }
        .card:hover h5{
            color: white;
        }
        .button {
            background-color: #09b3af;
            border: none;
            color: white;
            padding: 8px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 15px;
        }

        @media (max-width: 767px) {

            /* Media query for screens up to 767px wide (mobile devices) */
            .card {
                width: 100%;
                /* Make the cards full width */
                float: none;
    margin-bottom: 20px;
                     transform: none !important;
               background: none !important;
               color: black !important;
            }
 .card:hover h5{
            color: black;
        }

        }
  .container_text{
            max-width: 100%;
  margin-right: auto;
  margin-left: auto;
    padding-bottom: 30px;
    padding-top: 30px; 
    text-align: center;
        }
.main,.container_text,.approach{
margin-top:5%;
}
.approach{
background-color: ghostwhite;
}
.job_container {
    display: flex;
    flex-wrap: wrap;
    margin: 5%;
}

.limit{
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;


}