:root {
    --white: #fff;
    --primary: #007bff;
    --secondary: #08c7f1;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --dark: #343a40;
    --light: #00aaff;
}

/*text color*/
.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-success {
    color: var(--success);
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--warning);
}

.text-info {
    color: var(--info);
}

.text-dark {
    color: var(--dark);
}

.text-light {
    color: var(--light);
}

/*bg-colors*/
.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-success {
    background-color: var(--success);
}

.bg-danger {
    background-color: var(--danger);
}

.bg-warning {
    background-color: var(--warning);
}

.bg-info {
    background-color: var(--info);
}

.bg-dark {
    background-color: var(--dark);
}

.bg-light {
    background-color: var(--light);
}


/*section*/
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    margin-top: 70px;
}

    .section-header h2 {
        font-size: 4rem;
        margin: 2rem 0;
    }

.section-padding {
    padding: 2rem 2rem 4rem;
}


/*denemeee*/


@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
    box-sizing: border-box;
    font-weight: normal;
}

body {
    color: #555;
    background: #222;
    text-align: center;
    font-family: 'Roboto Mono';
    padding-bottom: 1em;
}

h1 {
    font-size: 2.2em;
}


.flip {
    position: relative;
    >.front, >.back

{
    display: block;
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
    transition-duration: .5s;
    transition-property: transform, opacity;
}

> .front {
    transform: rotateY(0deg);
}

> .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-200deg);
}

&:hover {
    >.front

{
    transform: rotateY(200deg);
}

> .back {
    opacity: 1;
    transform: rotateY(0deg);
}

}

&.flip-vertical {
    >.back

{
    transform: rotateX(-200deg);
}

&:hover {
    >.front

{
    transform: rotateX(200deg);
}

> .back {
    transform: rotateX(0deg);
}

}
}
}


.flip {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 370px;
    >.front, >.back

{
    display: block;
    color: rgb(250, 250, 250);
    width: inherit;
    background-size: cover !important;
    background-position: center !important;
    height: 240px;
    padding: 10px;
    background: #007bff;
    border-radius: 10px;
    p

{
    font-size: 0.9125rem;
    line-height: 160%;
    color: #007bff;
}

}
}

.text-shadow {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}




.containerr {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.headerr {
    color: #f57c00;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.contentt {
    display: flex;
    gap: 20px;
}

    .contentt img {
        max-width: 40%;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

.text {
    font-size: 16px;
    line-height: 1.6;
}

    .text strong {
        color: #f57c00;
    }

.ilet {
    margin-top: 20px;
    text-align: center;
}

    .ilet a {
        color: #fe5d06;
        text-decoration: none;
        font-weight: bold;
    }

        .ilet a:hover {
            color: blue;
        }