.gradient-custom {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Extra padding for mobile */
    box-sizing: border-box; /* Prevent padding overflow */
}

.card {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Softer shadow */
    border-radius: 8px;
    margin: auto;
}

.container {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    Consistent shadow with card border-radius: 8px;
    margin: auto;
    max-height: 400px;
    overflow: hidden; /* Prevent overflow issues */
}

.img-fluid {
    border-radius: 8px;
    object-fit: cover;
    width: 100%; /* Ensure full width */
    height: auto; /* Maintain aspect ratio */
    max-height: 400px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Softer shadow */
}

.gradient-custom-2 {
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(6, 1, 79, 1) 100%);
    padding: 20px; /* Added extra padding */
    color: white;
    border-radius: 8px; /* Consistent border radius */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .gradient-custom {
        padding: 10px; /* Adjust padding for mobile */
        min-height: auto;
    }

    .card {
        width: 100%;
        padding: 15px; /* Inner padding for mobile */
    }
    .card-body {
        padding-top: 10px; /* Daha küçük ekranlarda boşluk azaltılır */
    }
    .img-fluid {
        max-height: 200px;
    }

    h4 {
        font-size: 1.2rem;
    }

    p {
        font-size: 0.9rem;
    }
}