/*HEADER*/

.custom-button {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #FDB827;
    text-decoration: none;
    /* Remove underline */
    color: black;
    /* Set text color to black */
    border: none;
    /* Remove border */
    cursor: pointer;
}


/*GRİ CONTAİNER*/

.grey-container {
    margin-top: 80px;
    position: relative;
    background: #F4F8FB;
    flex-shrink: 0;
}

.serviceCard {
    aspect-ratio: 2 / 1.5;
}

.grey-container h1 {
    padding-top: 2rem;
    padding-bottom: 1rem;
    color: var(--Neutrals-700, #344054);
    font-kerning: none;
    font-variant-numeric: slashed-zero;
    font-feature-settings: 'ss01' on, 'cv02' on;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.grey-container p {
    padding-bottom: 2rem;
    text-align: center;
    color: var(--Neutrals-500, #707B93);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.otoekspertiz {
    width: 432px;
    height: 432px;
    flex-shrink: 0;
}

.button-container {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.serviceCard {
    position: relative;
    overflow: hidden;
}

.cardOverlay {
    position: absolute;
    bottom: -5rem;
    left: 5%;
    width: 90%;
    background: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .4s;
}

.serviceCard:hover .cardOverlay {
    bottom: 17px;
    transition: .4s;
}

.serviceCardLink {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #152037;
}

.serviceCard:hover {
    transition: .4s;
}

@media only screen and (max-width: 1330px) {
    .cardOverlay {
        position: absolute;
        bottom: -90px;
        left: 5%;
        width: 90%;
        background: white;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: .4s;
    }
}

@media only screen and (max-width:991px) {
    .cardOverlay {
        bottom: 1rem;
    }
}