section.degerlerimiz
{
    background-color: #0f274a;
    padding: 1.5rem;
}



section.degerlerimiz > h1.title
{
    font-family: var(--fontRegular);
    font-size: calc(var(--smallFontSize) + 0.9rem);
    text-align: center;
    padding: 2rem;
}

section.degerlerimiz > h1.title > b
{
    font-size: calc(var(--smallFontSize) + 0.9rem);
}




.swiper-slide {
    width: 25vw;
    height: 20vw;
    background-color: var(--lightBlue);
    padding: 3rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: all 0.3s ease-out;
}

.swiper-slide h3,
.swiper-slide p {
    opacity: 0.3;
}

.swiper-slide-active {
    background-color: var(--darkBlue);
    background-image: url("../png/degerlerimiz_bg.png");
    background-size: cover;
    filter: drop-shadow(2px 2px 4px var(--black));
}

.swiper-slide-active h3,
.swiper-slide-active p {
    opacity: 1;
}


.swiper-slide h3
{
    font-size: calc(var(--smallFontSize) + 1rem);
    padding-bottom: 2rem;
}

.swiper-slide p
{
    font-family: var(--fontRegular);
    font-size: var(--smallFontSize);
}


.swiper {
    width: 80%;
    padding-bottom: 2rem;
    overflow: hidden;
}

.swiper-button-prev,
.swiper-button-next
{
    color: var(--beige);
}

@media only screen and (max-width: 950px)
{
    :root {
        --swiper-navigation-size: 24px;
    }

    .swiper {
        width: 100%;
        padding-top: 1rem;
    }
    .swiper-slide {
        width: 50vw;
        height: 35vw;
        padding: 1rem;
        border-radius: 10px;
    }

    .swiper-slide h3
    {
        font-size: calc(var(--smallFontSize) + 0.1rem);
        padding-bottom: 1rem;
    }
    
    .swiper-slide p
    {
        font-size: var(--xsmallFontSize);
    }


    section.degerlerimiz > h1.title
    {
        font-size: calc(var(--smallFontSize) + 0.5rem);
        padding: 1rem;
    }
    
    section.degerlerimiz > h1.title > b
    {
        font-size: calc(var(--smallFontSize) + 0.5rem);
    }
}