* {
    box-sizing: border-box;
}

:root {
    --blue--: #2B82CF;
    --red--: #B20E34;
    --yellow--: #ffd166;
}

body {
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
    width: 100vw;
    height: 300vh;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    box-sizing: content-box;
}

.mask {
    height: 100vh;
    overflow: hidden;
}

.column {
    display: flex;
    flex-flow: column nowrap;
    transition: all 0.5s ease-in;
    position: relative;
}

.right.column {
    flex-direction: column-reverse;
}

.left {
    width: 31%;
}

.right {
    width: 69%;
    transform: translateY(-200vh);
}

.content {
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    justify-content: center;
    height: 100vh;
}
    /* .content{
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
} */
    .content h2 {
        color: white;
        font-weight: 600;
    }

    .content p {
        font-size: 18px;
        color: white;
    }

    .content a {
        background-color: #615f5f;
        padding: 10px 30px;
        text-decoration: none;
    }

/*.first {
    background-color: #d4d2c2;
}
*/
    .first a {
        color: #ffffff;
    }

.second {
    background-color: #aa8962;
    width: 100%;
}

    .second a {
        color: #ffffff;
        font-family: 'EngraversGothic BT';
    }

.third {
    background-color: #c2c5b1;
}

    .third a {
        color: #ffffff;
    }

.pic {
    width: 100%;
    height: 100%;
    background-size: cover;
}

.right .first {
   /* background-image: url(../img/gallery/SemraTigrel_Homepage.jpg);*/
}

.right .second {
    background-image: url(../img/gallery/DSC_4064web-1.jpg);
    margin-left: 3px;
}

.right .third {
    background-image: url(../img/gallery/DSC_d4105web-3.jpg);
    margin-left: 3px;
}



@media (max-width: 767px) {
    .homeImage {
        background-position: center;
    }

    .content h2, p {
        align-self: self-start !important;
    }

    .content h2 {
        font-size: calc(0.50rem + 1.4vw);
    }

        .content h2 span {
            font-size: calc(0.750rem + 1.5vw) !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    .content p {
        font-size: calc(0.350rem + 1.5vw);
    }

    .content a {
        padding: 5px 10px;
    }
}

@media (min-width: 768px) {
    .homeImage {
        background-repeat: no-repeat;
        background-position: center;
    }

    .content h2, p, a {
        margin-left: 3%;
    }
}

@media (max-width:768px) {
    .content h2, p, a {
        margin-left: 0px;
    }
}

@font-face {
    font-family: 'EngraversGothic BT';
    src: url('../fonts/ENGRGOTN.TTF');
}

.engraversGothic {
    font-family: 'EngraversGothic BT';
}

@font-face {
    font-family: 'Lucida Handwriting Italic'; /* Fontun adını burada belirtin */
    src: url('../fonts/Lucida Handwriting Italic.ttf'); /* Font dosyasının yolunu burada belirtin */
}

.lucidaHandwriting {
    font-family: 'Lucida Handwriting Italic';
}

.first-titleText {
    font-family: 'EngraversGothic BT';
    font-weight: bold;
    color: black !important;
    background-color: #8d926f;
    float: left;
    clear: both;
    padding: 3%;
}

.second-titleText {
    font-family: 'EngraversGothic BT';
    font-weight: bold;
    color: black !important;
    background-color: #ba9f7d;
    float: left;
    clear: both;
    padding: 3%;
}

.second-titleText-2 {
    background-color: #c2ad94;
    float: left;
    line-height: 1.8;
}

.p-text {
    font-family: 'EngraversGothic BT';
    line-height: 1.8;
    font-size: calc(0.50rem + 1.4vw) !important
}


.nextIcon, .prevIcon {
    cursor: pointer;
    bottom: 0;
    right: 0;
    position: fixed;
    color: black;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 30px;
    opacity: 0.7;
    z-index: 9999;
    position: absolute;
    display: block;
    font-size:43px
}