@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    a, a:hover{
        text-decoration: none;
    }
    :focus {
        outline: 0;
    }
    .md-hide{
        display: none
    }
    /* colors
     * --------------------------------------- */
    :root {
        --color1: #f9b000;
        --color2: #ffffff;
        --color3: #C5CADD;
        --color4: #1f174c;
        --color5: #363c40;
        --headerBg: rgba(31, 23, 76, .70);
    }
    
    .swal-text{
        text-align: center!important;
        line-height: 26px!important;
        padding: 0 60px!important;
    }
    .swal-button-container {
        margin: 0 0 5px 0!important;
        display: inline-block!important;
        position: relative!important;
        width: 100%!important;
    }
    .swal-button {
        background: #f9b000!important;
        color: #ffffff!important;
        border: none!important;
        display: inline-block!important;
        width: 100%!important;
        padding: 15px!important;
        font-size: 16px!important;
        font-weight: 700!important;
        transition: all .3s ease!important;
        cursor: pointer!important;
    }
    /* Overwriting fullPage.js tooltip color
    * --------------------------------------- */
    #pp-nav.custom .pp-tooltip{
        color: #AAA;
    }
    #pp-nav {
        position: fixed;
        z-index: 100;
        margin-top: -32px;
        top: auto;
        opacity: 1;
        bottom: 60px;
    }
    #pp-nav.right {
        right: auto;
        left: 54%;
    }
    #pp-nav ul, .pp-slidesNav ul {
        margin: 0;
        padding: 0;
        display: flex;
    }
    #pp-nav span, .pp-slidesNav span {
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border: 2px solid var(--color1);
        background: rgba(0, 0, 0, 0);
        border-radius: 50%;
        position: absolute;
        z-index: 1;
        border-color: var(--color1)!important;
    }
    #pp-nav li .active span, .pp-slidesNav .active span {
        background: var(--color1);
    }

    header{
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background: var(--headerBg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 38px 13px;
        width: 250px;
    }
    .logo {
        width: 200px;
        margin: 0 auto;
    }
    header .logo img{
        border-radius: 5px;
        width: 100%;
    }

    .headerAdres ul li{
        display: flex;
        margin-top: 10px;
    }
    .headerAdres ul li .icon{
        width: 30px;
    }
    .headerAdres ul li .icon svg{
        width: 26px;
        text-align: left;
    }
    .headerAdres ul li .icon svg path{
        fill: var(--color1);
    }
    .headerAdres ul li .text,
    .headerAdres ul li .text a{
        font-size: 12px;
        color: var(--color2);
        line-height: 20px;
    }
    #menu{
        padding: 0 13px;
    }
    #menu li{
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding: 18px 0;
    }
    #menu li a{
        font-size: 16px;
        font-weight: 600;
        color: var(--color2);
        font-family: 'Montserrat', sans-serif;
    }
    #menu li.active a{
        color: var(--color1);
    }


    #section1{
        background: url(../img/section1.jpg);
        background-position: center bottom;
        background-size: cover;    
    }
    #section1 .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    #section1 .left{
        width: 250px;
    }
    #section1 .content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }
    #section1 .title{
        font-size: 50px;
        font-weight: 700;
        color: #fff;
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 35px;
        text-align: center;
    }
    #section1 .title::after{
        content: '';
        width: 745px;
        height: 6px;
        background: var(--color1);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); 
    }
    #section1 .text{
        font-size: 36px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 56px;
    }
    #section2{
        background: url(../img/section2.jpg);
        background-position: center bottom;
        background-size: cover;    
    }
    #section2 .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    #section2 .left{
        width: 250px;
    }
    #section2 .content{
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }
    #section2 .container{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }
    #section2 .row{
        width: 1200px;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    #section2 .title{
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 35px;
        width: 100%;
        text-align: center;
    }
    #section2 .title::after{
        content: '';
        width: 252px;
        height: 6px;
        background: var(--color1);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); 
    }
    #section2 .text strong{
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        line-height: 35px;
    }
    #section2 .text{
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        margin-bottom: 20px;
    }
    #section3{
        background: url(../img/section3.jpg);
        background-position: center bottom;
        background-size: cover;    
    }
    #section3 .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    #section3 .left{
        width: 250px;
    }
    #section3 .content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }
    #section3 .row{
        width: 1200px;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    #section3 .title{
        font-size: 30px;
        font-weight: 700;
        color: var(--color4);
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 35px;
        text-align: center;
    }
    #section3 .title::after{
        content: '';
        width: 235px;
        height: 6px;
        background: var(--color1);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); 
    }
    #section3 .text strong{
        font-size: 26px;
        font-weight: 700;
        color: var(--color4);
        text-align: center;
    }
    #section3 .text{
        font-size: 18px;
        font-weight: 400;
        color: var(--color4);
        text-align: center;
        margin-bottom: 30px;
        line-height: 28px;
    }
    #section3 .galeri{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 1200px;
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: 30px;
    }
    #section3 .galeri .item{
        margin: 7px;
        position: relative;
        width: 32%;
    }
    #section3 .galeri .item .resim{
        position: relative;
    }
    #section3 .galeri .item .resim img{
        width: 100%;
    }
    #section3 .galeri .item .resim:before{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgb(31,23,76);
        background: linear-gradient(0deg, rgba(31,23,76,1) 10%, rgba(31,23,76,0.11388305322128855) 100%);
    }
    #section3 .galeri .item .text{
        color: var(--color2);
        font-size: 16px;
        font-weight: 700;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        margin-bottom: 17px;
    }
    #section3 .galeri .item .text span {
        display: block;
        width: 54px;
        height: 54px;
        margin: 0 auto 10px;
    }
    #section3 .galeri .item .text span img {
        width: 100%;
    }
    #section4 {
        background: url(../img/section4.jpg);
        background-position: center bottom;
        background-size: cover;    
    }
    #section4 .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    #section4 .row{
        width: 1200px;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    #section4 .left{
        width: 250px;
    }
    #section4 .content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }
    #section4 .title{
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 35px;
        text-align: center;
    }
    #section4 .title::after{
        content: '';
        width: 150px;
        height: 6px;
        background: var(--color1);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); 
    }
    #section4 .text{
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 28px;
    }
    #section4 .galeri{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        margin-top: 30px;
    }
    #section4 .galeri .item{
        margin: 5px 7px;
        position: relative;
    }
    #section5{
        background: url(../img/section5.jpg);
        background-position: center bottom;
        background-size: cover;    
    }
    #section5 .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    #section5 .left{
        width: 250px;
    }
    #section5 .content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }
    #section5 .title{
        font-size: 30px;
        font-weight: 700;
        color: var(--color4);
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 55px;
        text-align: center;
    }
    #section5 .title::after{
        content: '';
        width: 130px;
        height: 6px;
        background: var(--color1);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); 
    }
    #section5 .row{
        max-width: 1200px;
        width: 1200px;
        display: flex;
    }
    #section5 .row .item:first-child{
        width: 40%;
    }
    #section5 .row .item:last-child{
        width: 60%;
    }
    #section5 .row .item .title{
        font-size: 16.8px;
        font-weight: 700;
        color: #363c40;
        margin-bottom: 25px;
        padding: 0;
        text-align: left;
    }
    /*#section5 .row .item .title span{
        display: block;
        margin-left: 0px;
    }*/
    #section5 .row .item .title::after{
        display: none;
    }
    #section5 .row .item ul{
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 70%;
    }
    #section5 .row .item ul li{
        display: flex;
        margin-bottom: 12px;
    }
    #section5 .row .item ul li:last-child{
        margin-bottom: 0;
    }
    #section5 .row .item ul li svg{
        margin-right: 20px;
    }
    #section5 .row .item ul li svg path{
        fill: var(--color1);
    }
    #section5 .row .item ul li .text,
    #section5 .row .item ul li .text a{
        font-size: 16.8px;
        line-height: 28px;
        color: var(--color4);
    }
    #section5 .row .item .maps{
        margin-top: 0px;
        margin-right: 20px;
        /*filter: grayscale(100%);*/
        opacity: .8;
        width: 40%;
    }
    #section5 .row .item .maps img{
        width: 295;
        height: 320px;
    }
    #section5 .row .item .form,
    #section5 .row .item .form input,
    #section5 .row .item .form textarea{
        width: 100%;
    }
    #section5 .row .item .form input{
        height: 53px;
        border: 1px solid #e1e3e7;
        background:rgba(255, 255, 255, .50);
        padding: 0 20px;
        margin-bottom: 35px;
        transition: all .3s ease;
    }
    ::placeholder {
      color: #1f174c ;
      opacity: 1; /* Firefox */
    }

    ::-ms-input-placeholder { /* Edge 12 -18 */
      color: #1f174c ;
    }
    #section5 .row .item .form textarea{
        border: 1px solid #e1e3e7;
        background:rgba(255, 255, 255, .50);
        padding: 20px;
        margin-bottom: 20px;
        transition: all .3s ease;
    }
    #section5 .row .item .form button{
        background: var(--color1);
        color: var(--color2);
        border: none;
        display: inline-block;
        width: 100%;
        padding: 15px;
        font-size: 16px;
        font-weight: 700;
        transition: all .3s ease;
        cursor: pointer;
    }
    #section5 .row .item .form input:focus,
    #section5 .row .item .form textarea:focus{
        border-color: var(--color1);
    }
    #section5 .row .item .form button:hover{
        background: var(--color4);
    }

    @media (max-width: 1720px) {

        #menu li{
            border-bottom: 1px solid rgba(255, 255, 255, .15);
            padding: 14px 0;
        }
        #menu li a{
            font-size: 13px;
            font-weight: 600;
            color: var(--color2);
            font-family: 'Montserrat', sans-serif;
        }
        #section3 .title {
            font-size: 20px;
            font-weight: 700;
            color: var(--color4);
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            text-align: center;
        }
        #section3 .text {
            font-size: 16px;
            font-weight: 400;
            color: var(--color4);
            text-align: center;
            margin-bottom: 30px;
            line-height: 28px;
        }
        #section3 .text strong {
            font-size: 18px;
            font-weight: 700;
            color: var(--color4);
            text-align: center;
        }
    }
    @media (max-width: 1600px)
    {
        header{
            padding: 58px 13px;
            width: 250px;
        }
        .headerAdres ul{
            margin-left: -10px;
        }
        #section2 .title{
            font-size: 20px;
            padding-bottom: 25px;
            margin-bottom: 25px;
        }
        #section2 .text{
            font-size: 16px;
        }
        #section2 .text strong{
            font-size: 18px;
            line-height: 20px;
        }
        #section3 .title {
            font-size: 20px;
            font-weight: 700;
            color: var(--color4);
            position: relative;
            padding-bottom: 25px;
            margin-bottom: 25px;
            text-align: center;
        }
        #section3 .text {
            font-size: 16px;
            font-weight: 400;
            color: var(--color4);
            text-align: center;
            margin-bottom: 10px;
            line-height: 28px;
        }
        #section3 .text strong {
            font-size: 18px;
            font-weight: 700;
            color: var(--color4);
            text-align: center;
        }
        #section3 .galeri .item .resim {
            position: relative;
            width: 250px;
        }
        #section3 .galeri .item .resim img{
            width: 100%
        }
        #section4 .row {
            max-width: 1000px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        #section1 .left,
        #section2 .left,
        #section3 .left,
        #section4 .left,
        #section5 .left {
            width: 228px;
        }

        #section5 .content{
            padding: 0 60px;
        }
        #section5 .row {
            max-width: 1200px;
            width: 100%;
            display: flex;
        }
    }
    @media (max-width: 1400px){
        header {
            padding: 24px 13px;
            width: 215px;
        }
        .logo {
            width: 170px;
            margin: 0 auto;
        }
        #pp-nav{
            bottom: 15px!important;
        }
        #section1 .left, #section2 .left, #section3 .left, #section4 .left, #section5 .left {
            width: 215px;
        }
        #section2 .row {
            width: 90%;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        #section4 .text {
            font-size: 15px;
            line-height: 22px;
        }
        #section5 .row .item .maps img{
        width: 100%;
            height: 209px;
        }
        .complaint-slider{
            margin-top: 0!important;
        }
        .complaint-slider .slick-slide img,
        .complaint-slider2 .slick-slide img
        {
            display: block;
            width: 100%;
        }
        .complaint-slider .slide .slider-image, 
        .complaint-slider2 .slide .slider-image
        {
            margin: 5px 0 5px!important;
            box-shadow: none!important;
        }
        .complaint-slider .slide, .complaint-slider2 .slide {
            margin: 0 5px!important;
        }
        #section5 .row .item .title {
            font-size: 14px;
            margin-bottom: 10px;
        }
        #section5 .row .item .form textarea {
            height: 160px;
        }
    }
    @media (max-width: 1290px)
    {
        header {
            padding: 58px 13px;
            width: 250px;
        }
        #section1 .left, #section2 .left, #section3 .left, #section4 .left, #section5 .left {
            width: 238px;
        }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        html, body {
            overflow: visible;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            height: 100%;
        }
        header, #pagepiling, #pp-nav{
            display: none;
        }
        .md-hide{
            display: block;
        }
        .navbar-area {
            background: var(--headerBg);
            padding: 10px;
            position: fixed;
            z-index: 9;
            width: 100%;
        }
        .site-navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        a.site-logo {
          width: 100px;
        }
        a.site-logo img{
          width: 100%;
        }
        .site-navbar ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
        }
        .site-navbar ul li a {
          color: #fff;
          padding: 20px 10px;
          display: block;
          text-decoration: none;
          text-transform: uppercase;
        }
        .site-navbar ul li a:hover {
          color: var(--color1);
        }
        .nav-toggler {
          border: 3px solid #fff;
          padding: 5px;
          background-color: transparent;
          cursor: pointer;
          height: 39px;
          display: none;
        }
        .nav-toggler span, 
        .nav-toggler span:before, 
        .nav-toggler span:after {
          width: 28px;
          height: 3px;
          background-color: #fff;
          display: block;
          transition: .3s;
        }
        .nav-toggler span:before {
          content: '';
          transform: translateY(-9px);
        }
        .nav-toggler span:after {
          content: '';
          transform: translateY(6px);
        }
        .nav-toggler.toggler-open span {
          background-color: transparent;
        }
        .nav-toggler.toggler-open span:before {
          transform: translateY(0px) rotate(45deg);
        }
        .nav-toggler.toggler-open span:after {
          transform: translateY(-3px) rotate(-45deg);
        }

        .bolum {
            width: 100%;
            padding: 40px;
            text-align: center;
            font-weight: bold;
            color: #FFF
        }
        .bolum .wrapper{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .bolum .content{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            flex: 1;
        }
        .bolum#one {
            background: url(../img/section1.jpg);
            background-position: center bottom;
            background-size: cover;  
            height:100vh;  
        }
        .bolum#one .title{
            font-size: 50px;
            font-weight: 700;
            color: #fff;
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
        }
        .bolum#one .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#one .text{
            font-size: 36px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 56px;
        }

        .bolum#two {
            background: url(../img/section2.jpg);
            background-position: center bottom;
            background-size: cover;   
            height:100vh; 
        }
        .bolum#two .content{
            display: flex;
            align-items: flex-end;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            flex: 1;
        }
        .bolum#two .container{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .bolum#two .title{
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            width: 100%;
        }
        .bolum#two .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#two .text strong{
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            text-align: left;
            line-height: 35px;
        }
        .bolum#two .text{
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
        }
        .bolum#three {
            background: url(../img/section3.jpg);
            background-position: center bottom;
            background-size: cover;    
            padding: 140px 20px 20px;
        }
        .bolum#three .row{
            max-width: 1200px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        .bolum#three .title{
            font-size: 30px;
            font-weight: 700;
            color: var(--color4);
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            text-align: center;
        }
        .bolum#three .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#three .text strong{
            font-size: 26px;
            font-weight: 700;
            color: var(--color4);
            text-align: center;
        }
        .bolum#three .text{
            font-size: 18px;
            font-weight: 400;
            color: var(--color4);
            text-align: center;
            margin-bottom: 30px;
            line-height: 28px;
        }
        .bolum#three .galeri{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 1200px;
            margin-left: -10px;
            margin-right: -10px;
            margin-bottom: 30px;
        }
        .bolum#three .galeri .item{
            margin: 7px;
            position: relative;
        }
        .bolum#three .galeri .item .resim{
            position: relative;
        }
        .bolum#three .galeri .item .resim:before{
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgb(87,90,95);
            background: linear-gradient(0deg, rgba(87,90,95,1) 0%, rgba(87,90,95,0.11388305322128855) 67%);
        }
        .bolum#three .galeri .item .text{
            color: var(--color2);
            font-size: 16px;
            font-weight: 700;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            margin-bottom: 17px;
        }

        .bolum#four {
            background: url(../img/section4.jpg);
            background-position: center bottom;
            background-size: cover;   
            height: 100vh;
            padding: 140px 20px 20px;
        }
        .bolum#four .row{
            max-width: 1200px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        .bolum#four .title{
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            text-align: center;
        }
        .bolum#four .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#four .text{
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 28px;
        }
        .bolum#four .galeri{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 980px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
            margin-top: 30px;
        }
        .bolum#four .galeri .item{
            margin: 5px 7px;
            position: relative;
        }
        .bolum#five {
            background: url(../img/section5.jpg);
            background-position: center bottom;
            background-size: cover; 
            padding: 140px 20px 20px;   
            height: 100vh;
        }
        .bolum#five .title{
            font-size: 30px;
            font-weight: 700;
            color: var(--color4);
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
        }
        .bolum#five .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#five .row{
            display: flex;
            width: 100%;
        }
        .bolum#five .row .item:first-child{
            width: 50%;
        }
        .bolum#five .row .item:last-child{
            width: 50%;
        }
        .bolum#five .row .item .title{
            font-size: 24px;
            font-weight: 700;
            color: #363c40;
            text-align: left;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
        .bolum#five .row .item .title::after{
            display: none;
        }
        .bolum#five .row .item ul{
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .bolum#five .row .item ul li{
            display: flex;
            margin-bottom: 63px;
            text-align: left;
        }
        .bolum#five .row .item ul li:last-child{
            margin-bottom: 0;
        }
        .bolum#five .row .item ul li svg{
            margin-right: 20px;
        }
        .bolum#five .row .item ul li svg path{
            fill: var(--color1);
        }
        .bolum#five .row .item ul li .text,
        .bolum#five .row .item ul li .text a{
            font-size: 18px;
            line-height: 1;
            color: var(--color4);
        }
        .bolum#five .row .item .form,
        .bolum#five .row .item .form input,
        .bolum#five .row .item .form textarea{
            width: 100%;
        }
        .bolum#five .row .item .form input{
            height: 47px;
            border: 1px solid #e1e3e7;
            background:rgba(255, 255, 255, .50);
            padding: 0 20px;
            margin-bottom: 20px;
            transition: all .3s ease;
        }
        .bolum#five .row .item .form textarea{
            border: 1px solid #e1e3e7;
            background:rgba(255, 255, 255, .50);
            padding: 20px;
            margin-bottom: 20px;
            transition: all .3s ease;
        }
        .bolum#five .row .item .form button{
            background: var(--color1);
            color: var(--color2);
            border: none;
            display: inline-block;
            width: 100%;
            padding: 15px;
            font-size: 16px;
            font-weight: 700;
            transition: all .3s ease;
            cursor: pointer;
        }
        .bolum#five .row .item .form input:focus,
        .bolum#five .row .item .form textarea:focus{
            border-color: var(--color1);
        }
        .bolum#five .row .item .form button:hover{
            background: var(--color4);
        }
    }
    @media (max-width: 767px){
        html, body {
            overflow: visible;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            height: 100%;
        }
        header, #pagepiling, #pp-nav{
            display: none;
        }
        .md-hide{
            display: block;
        }
        .navbar-area {
            background: var(--headerBg);
            padding: 10px;
            position: fixed;
            z-index: 9;
            width: 100%;
        }
        .site-navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        a.site-logo {
          width: 100px;
        }
        a.site-logo img{
          width: 100%;
        }
        .nav-toggler {
          border: 3px solid #fff;
          padding: 5px;
          background-color: transparent;
          cursor: pointer;
          height: 39px;
          display: block;
        }
        .site-navbar ul {
            position: absolute;
            width: 100%;
            height: calc(100vh - 103px);
            left: 0;
            top: 103px;
            flex-direction: column;
            align-items: center;
            border-top: 1px solid #444;
            background-color: var(--headerBg);
            max-height: 0;
            overflow: hidden;
            transition: .3s;
         }
        .site-navbar ul li {
            width: 100%;
            text-align: center;
          }
          .site-navbar ul li a {
            padding: 25px;
            color: #fff;
            display: block;
            font-size: 20px;
            font-weight: 700;
          }
          .site-navbar ul li a:hover {
            background-color: rgba(255,255,255,.1);
          }
          .site-navbar ul.open {
            max-height: 100vh;
            overflow: visible;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        
        .nav-toggler span, 
        .nav-toggler span:before, 
        .nav-toggler span:after {
          width: 28px;
          height: 3px;
          background-color: #fff;
          display: block;
          transition: .3s;
        }
        .nav-toggler span:before {
          content: '';
          transform: translateY(-9px);
        }
        .nav-toggler span:after {
          content: '';
          transform: translateY(6px);
        }
        .nav-toggler.toggler-open span {
          background-color: transparent;
        }
        .nav-toggler.toggler-open span:before {
          transform: translateY(0px) rotate(45deg);
        }
        .nav-toggler.toggler-open span:after {
          transform: translateY(-3px) rotate(-45deg);
        }

        .bolum {
            width: 100%;
            padding: 40px;
            text-align: center;
            font-weight: bold;
            color: #FFF
        }
        .bolum .wrapper{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .bolum .content{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            flex: 1;
        }
        .bolum#one {
            background: url(../img/section1.jpg);
            background-position: center bottom;
            background-size: cover;  
            height:100vh;  
        }
        .bolum#one .title{
            font-size: 50px;
            font-weight: 700;
            color: #fff;
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
        }
        .bolum#one .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#one .text{
            font-size: 36px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 56px;
        }

        .bolum#two {
            background: url(../img/section2.jpg);
            background-position: center bottom;
            background-size: cover;   
            height:100vh; 
            padding: 140px 40px 0;
        }
        .bolum#two .content{
            display: flex;
            align-items: flex-end;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            flex: 1;
        }
        .bolum#two .container{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .bolum#two .title{
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            width: 100%;
        }
        .bolum#two .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#two .text strong{
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            text-align: left;
            line-height: 35px;
        }
        .bolum#two .text{
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
        }
        .bolum#three {
            background: url(../img/section3.jpg);
            background-position: center bottom;
            background-size: cover;    
            padding: 140px 20px 20px;
        }
        .bolum#three .row{
            max-width: 1200px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        .bolum#three .title{
            font-size: 30px;
            font-weight: 700;
            color: var(--color4);
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            text-align: center;
        }
        .bolum#three .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#three .text strong{
            font-size: 26px;
            font-weight: 700;
            color: var(--color4);
            text-align: center;
        }
        .bolum#three .text{
            font-size: 18px;
            font-weight: 400;
            color: var(--color4);
            text-align: center;
            margin-bottom: 30px;
            line-height: 28px;
        }
        .bolum#three .galeri{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 1200px;
            margin-left: -10px;
            margin-right: -10px;
            margin-bottom: 30px;
        }
        .bolum#three .galeri .item{
            margin: 7px;
            position: relative;
        }
        .bolum#three .galeri .item .resim{
            position: relative;
        }
        .bolum#three .galeri .item .resim:before{
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgb(87,90,95);
            background: linear-gradient(0deg, rgba(87,90,95,1) 0%, rgba(87,90,95,0.11388305322128855) 67%);
        }
        .bolum#three .galeri .item .text{
            color: var(--color2);
            font-size: 16px;
            font-weight: 700;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            margin-bottom: 17px;
        }
        .bolum#four {
            background: url(../img/section4.jpg);
            background-position: center bottom;
            background-size: cover;
            padding: 140px 20px 20px;
        }
        .bolum#four .row{
            max-width: 1200px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        .bolum#four .title{
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
            text-align: center;
        }
        .bolum#four .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#four .text{
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 28px;
        }
        .bolum#four .galeri{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 980px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
            margin-top: 30px;
        }
        .bolum#four .galeri .item{
            margin: 5px 7px;
            position: relative;
        }
        .bolum#five {
            background: url(../img/section5.jpg);
            background-position: center bottom;
            background-size: cover; 
            padding: 140px 20px 20px;   
            height: 100vh;
        }
        .bolum#five .title{
            font-size: 30px;
            font-weight: 700;
            color: var(--color4);
            position: relative;
            padding-bottom: 35px;
            margin-bottom: 35px;
        }
        .bolum#five .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#five .row{
            display: flex;
            width: 100%;
        }
        .bolum#five .row .item:first-child{
            width: 50%;
        }
        .bolum#five .row .item:last-child{
            width: 50%;
        }
        .bolum#five .row .item .title{
            font-size: 24px;
            font-weight: 700;
            color: #363c40;
            text-align: left;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
        .bolum#five .row .item .title::after{
            display: none;
        }
        .bolum#five .row .item ul{
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .bolum#five .row .item ul li{
            display: flex;
            margin-bottom: 63px;
            text-align: left;
        }
        .bolum#five .row .item ul li:last-child{
            margin-bottom: 0;
        }
        .bolum#five .row .item ul li svg{
            margin-right: 20px;
        }
        .bolum#five .row .item ul li svg path{
            fill: var(--color1);
        }
        .bolum#five .row .item ul li .text,
        .bolum#five .row .item ul li .text a{
            font-size: 18px;
            line-height: 1;
            color: var(--color4);
        }
        .bolum#five .row .item .form,
        .bolum#five .row .item .form input,
        .bolum#five .row .item .form textarea{
            width: 100%;
        }
        .bolum#five .row .item .form input{
            height: 47px;
            border: 1px solid #e1e3e7;
            background:rgba(255, 255, 255, .50);
            padding: 0 20px;
            margin-bottom: 20px;
            transition: all .3s ease;
        }
        .bolum#five .row .item .form textarea{
            border: 1px solid #e1e3e7;
            background:rgba(255, 255, 255, .50);
            padding: 20px;
            margin-bottom: 20px;
            transition: all .3s ease;
        }
        .bolum#five .row .item .form button{
            background: var(--color1);
            color: var(--color2);
            border: none;
            display: inline-block;
            width: 100%;
            padding: 15px;
            font-size: 16px;
            font-weight: 700;
            transition: all .3s ease;
            cursor: pointer;
        }
        .bolum#five .row .item .form input:focus,
        .bolum#five .row .item .form textarea:focus{
            border-color: var(--color1);
        }
        .bolum#five .row .item .form button:hover{
            background: var(--color4);
        }
    }
    @media (max-width: 550px){
        .bolum#one {  
            height:100vh;  
        }
        .bolum#one .title{
            font-size: 40px;
        }
        .bolum#one .text{
            font-size: 26px;
            line-height: 36px;
        }

        .bolum#two { 
            height: auto;
            padding: 140px 40px;
        }
        .bolum#two .title{
            font-size: 26px;
            padding-bottom: 25px;
            margin-bottom: 25px;
        }
        .bolum#two .title::after{
            content: '';
            width: 100px;
            height: 6px;
            background: var(--color1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); 
        }
        .bolum#two .text strong{
            font-size: 18px;
            line-height: 26px;
        }

        .bolum#three .title{
            font-size: 26px;
            padding-bottom: 25px;
            margin-bottom: 25px;
        }
        .bolum#three .text strong{
            font-size: 18px;
            line-height: 26px;
        }
        .bolum#three .text{
            margin-bottom: 10px;
        }

        .bolum#three .galeri .item{
            width: 46%;
        }
        .bolum#three .galeri .item .resim img{
            width: 100%
        }
        .bolum#four .title{
            font-size: 26px;
            padding-bottom: 25px;
            margin-bottom: 25px;
        }
        .bolum#four .text{
            margin-bottom: 10px;
        }
        .bolum#five {
            height: auto;
        }
        .bolum#five .title{
            font-size: 26px;
            padding-bottom: 25px;
            margin-bottom: 25px;
        }
        .bolum#five .row{
            flex-direction: column;
        }
        .bolum#five .row .item:first-child,
        .bolum#five .row .item:last-child{
            width: 100%;
        }
        .bolum#five .row .item .title{
            text-align: center;
        }
        .bolum#five .row .item ul{
            margin-bottom: 30px;
        }
        .bolum#five .row .item ul li{
            margin-bottom: 33px;
        }
        .bolum#five .row .item ul li svg{
            margin-right: 20px;
        }
        .bolum#five .row .item ul li svg path{
            fill: var(--color1);
        }
        .bolum#five .row .item ul li .text,
        .bolum#five .row .item ul li .text a{
            font-size: 18px;
            line-height: 1;
            color: var(--color4);
        }
        .bolum#five .row .item .form,
        .bolum#five .row .item .form input,
        .bolum#five .row .item .form textarea{
            width: 100%;
        }
        .bolum#five .row .item .form input{
            height: 47px;
            border: 1px solid #e1e3e7;
            background:rgba(255, 255, 255, .50);
            padding: 0 20px;
            margin-bottom: 20px;
            transition: all .3s ease;
        }
        .bolum#five .row .item .form textarea{
            border: 1px solid #e1e3e7;
            background:rgba(255, 255, 255, .50);
            padding: 20px;
            margin-bottom: 20px;
            transition: all .3s ease;
        }
        .bolum#five .row .item .form button{
            background: var(--color1);
            color: var(--color2);
            border: none;
            display: inline-block;
            width: 100%;
            padding: 15px;
            font-size: 16px;
            font-weight: 700;
            transition: all .3s ease;
            cursor: pointer;
        }
        .bolum#five .row .item .form input:focus,
        .bolum#five .row .item .form textarea:focus{
            border-color: var(--color1);
        }
        .bolum#five .row .item .form button:hover{
            background: var(--color4);
        }
    }