@font-face {
    font-family: GreatVibes-Regular;
    src: url(fonts/GreatVibes-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
  }
  
  @font-face {
    font-family: Helvetica;
    src: url(fonts/Helvetica.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
  }


img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.btn {
    background-color: rgb(203, 203, 203)!important;
    border: 1px solid #cccccc;
    color: #696969;
    padding: 8px; /* 0.5rem = 8px */
}
.btn--block {
    display: block;
    width: 100%;
}
.cardswrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20vh; /* Stellt sicher, dass der Inhalt vertikal zentriert ist */
    margin: 0 auto;
    max-width: 1200px;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center; /* Zentriert die .cards__item horizontal */
}

.cards__item {
    display: flex;
    padding: 16px; /* 1rem = 16px */
    max-width: 350px;
    margin: 15px!important;
}


.card {
    background-color: white;
    border-radius: 4px; /* 0.25rem = 4px */
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

@media (min-width: 480px) {
    .card {
        min-width: 350px!important;
    }
}   

.card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px; /* 1rem = 16px */
}
.card__image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 4px; /* 0.25rem = 4px */
    border-top-right-radius: 4px; /* 0.25rem = 4px */
    overflow: hidden;
    position: relative;
    transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);
}
.card__image::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
@media (min-width: 640px) { /* 40rem = 640px */
    .card__image::before {
        padding-top: 66.6%;
    }
}
.card__image--deniztasimaciligi {
    background-image: url(/denizcilikhizmetleri/deniztasimacilik.jpg);
}
.card__image--karatasimaciligi {
    background-image: url(/denizcilikhizmetleri/karatasimacilik.jpg);
}
.card__image--havatasimaciligi {
    background-image: url(/denizcilikhizmetleri/havatasimaciligi.jpg);
    filter: brightness(90%);
}
.card__title {
    color: #696969;
    font-size: 16px; /* 1.25rem = 20px */
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
}
.card__text {
    flex: 1 1 auto;
    font-size: 14px; /* 0.875rem = 14px */
    line-height: 1.5;
    margin-bottom: 20px; /* 1.25rem = 20px */
}