.col_left {
    width:40%;
    float:left;
}
.col_right {
    width: 60%;
    float: left;
    position:relative;
    z-index:2;
}
    .col_right img {
        display: block;
        width: 95%;
        height: 100%;
        padding-top: 6vw;
    }
.entry_secreen {
    position:relative;
    z-index:99999;
    background-color:#fff;
}
.entry_secreen img{
    width:auto!important;
}
.left_menu {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 4vw;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
}
.right_menu {
    position: fixed;
    top: 0;
    right: 0vw;
    display: block;
    width: 4vw;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
}
    .right_menu .rm_top {
        position:absolute;
        top:2.5vw;
        text-align:center;
        right: 1vw;
    }
    .right_menu .rm_bottom {
        position: absolute;
        bottom: 0.5vw;
        right: 1vw;
    }
        .right_menu .rm_top img, .right_menu .rm_bottom img {
            width: 45px;
            margin-top: 0.5vw auto;
            text-align: center;            
        }
    .logo {
        position: absolute;
        top: 1.5vw;
        left: 5vw;
    }
        .logo img {
            width: 150px;
            float: left;
            margin-left: 3vw;
        }

#menuToggle {
    display: block;
    position: fixed;
    top: 30px;
    left: 20px;
    z-index: 5;
    -webkit-user-select: none;
    user-select: none;
}
    #menuToggle a {
        text-decoration: none;
        color: #000;
        transition: color 0.3s ease;
        font-family: 'ChollaSansThin',sans-serif !important;
        font-weight: 500 !important;
        font-style: normal !important;
        font-display: swap !important;
        color: #000 !important;
        font-size:72px;
        text-transform:uppercase;
    }
        #menuToggle a:hover {
            color: gray;
        }
    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #000;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #000;
    }
        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }
        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }
#menu {
    position: absolute;
    width: 105vw;
    height: 105vh;
    padding: 100px 250px;
    background: #fff;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(0, -100%);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    top: -3vw;
    left: -3vw;
    z-index: 0;
    overflow:hidden
}
    #menu li {
        padding: 5px 0;
        margin:5px 0;
    }
        
#menuToggle input:checked ~ ul {
    transform: none;

}

.style_h1 {
    font-family: 'ChollaSansThin',sans-serif !important;
    font-weight: 100 !important;
    font-style: normal !important;
    font-display: swap !important;
    color: #000 !important;    
    text-align: left !important;
    margin-top: 8vw !important;
    margin-left: 3vw !important;    
}
    .style_h1 label {
        font-size: 80px !important;
        line-height: 70px;
    }
    .style_h1 span {
        font-size: 60px !important;
        line-height: 50px;
    }
.metin {
    /*opacity: 1;
    transform: translate(50%, 20%);*/ /* A�a��dan gelmesi i�in */
    /*transition: opacity 0.5s, transform 0.5s;*/
    padding-left:5vw;
}
.sec3_text {
    margin-top: 2vw !important;
    margin-left: 3vw !important;
    width:85%;
}
.sec3_text p {
    font-family: 'ChollaSansThin',sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-display: swap !important;
    color: #000 !important;
    text-align: left !important;    
    font-size:30px;
    margin-bottom:2.5vw;
}
    .sec3_text ul {
        margin:3vw 0 0 0;
        padding:0;
    }
        .sec3_text ul li {
            display: flex;
            align-items: center;
            margin: 10px 0;
            line-height: 30px;
            list-style: none;
            font-size: 30px;
            color: #000;
            font-family: 'ChollaSansThin',sans-serif !important;
            font-weight: 500 !important;
            font-style: normal !important;
            font-display: swap !important;
        }

    .sec3_text ul li:before {
        display: block;
        flex-shrink: 0;
        width: 29px;
        height: 29px;
        margin-right: 10px;
        vertical-align: middle;
        background: url('../images/tick.png') no-repeat left center;
        background-size: contain;
        content: '';
    }

.sec4 .sec3_text {
    max-width: 70%;
    margin-top: 10vw!important;
}
.sec4 .sec3_text ul {    
    margin-bottom: 5vw;
}
.sec5 .sec3_text {
    margin-left:0!important;
}
    .sec5 .sec3_text ul, .sec5 .sec3_text p, .sec5 .sec3_text .style_h1 {
        margin-left: 3vw !important;
    }

.sec7 .sec3_text {
    width: 100%;
}
.sec7 .sec3_text {
    margin-left: 0 !important;
}

    .sec7 .sec3_text ul, .sec7 .sec3_text p, .sec7 .sec3_text .style_h1 {
        margin-left: 3vw !important;
    }

.sec6 .metin5 {
    width:75%;
}
.logo_cover {
    width: 90%;
    background-color: #fff;
    position: relative;
    z-index: 1;
    display: block;
    height: 10vh;
    clear: both;
    margin-top: -2vw;
    padding-top: 2vw;
}
.h-screen img {
    width:85%;
}

.empty_area {
    clear:both;
    height:40vh;
}
.empty_area2 {
    clear: both;
    height: 40vh;
}
.last_section_store, .last_section_sm {
    display:none;
}
#sectionFour .style_h1 {
    margin-top:4vw!important;
}

.firstImg {
    width: auto !important;
    height: 100vh;
    max-width: fit-content !important;
}

.scrollable {
    height: 300px; /* Kutu yüksekliği */
    overflow-y: none; /* Dikey kaydırma çubuğunu etkinleştir */
    padding: 10px; /* İçerik ile kenar arasındaki boşluk */
    border: 1px solid #ccc; /* Kutu için kenarlık */
    background: #fff; /* Arka plan rengi */
}
.ok_1 {
    width: 100px;
    float: left;
    margin-left: -6vw;
    margin-top: 5px;
    margin-right: 0.5vw;
}
.ok_2 {
    width: 100px;
    float: left;
    margin-left: -6vw;
    margin-top: 0px;
}
.ok_3 {
    width: 100px;
    float: left;
    margin-left: -6vw;
    margin-top: 0vw;
}
.ok_4 {
    width: 90%;
    margin-top: -5vw;
    margin-left: -10vw;
}
.ok_5 {
    width: 90%;
    margin-top: 15vw;
    margin-left: -30vw;
}



  
  .metin_top{
    top: 38.6rem;
  }
  .metin2_top{
    top: 38rem;
  }
  .metin3_top{
    top: 38rem;
  }
  .metin4_top{
    top: 39.2rem;
  }
  .metin5_top{
    top: 38rem;
  }
  .metin6_top{
    top: 38rem;
  }

.logo_animations {
    width: 250px; /* Görsel boyutu */
    animation: yukariGetir 3s ease forwards; /* Animasyon */
    animation-delay: 5s;
}
.logo_animations2 {
    width: 250px; /* Görsel boyutu */
    animation: yukariGetir 3s ease forwards; /* Animasyon */
    animation-delay: 5s;
    padding-right:5vw;
}

@keyframes yukariGetir {
    from {
        transform: translateY(150%); /* Başlangıç: Aşağıda */
        opacity: 0; /* Başlangıçta görünmez */
    }

    to {
        transform: translateY(0); /* Bitiş: Yukarıda */
        opacity: 1; /* Bitiş: Görünür */
    }
}


.last_text_pimp {
    font-size:44px!important;
}

/*BEFORE-AFTER*/
#page {
    width: 100%;
    height: 100%;
    position: absolute;
}

/* Our normalize css */
* {
    margin: 0;
    box-sizing: border-box;
}

/* Our wrapper */
.wrapper {
    width: 900px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Our image information */
.before,
.after {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.content-image {
    height: 100%;
}

.after {
    width: 125px;
}

.scroller {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: transparent;
    opacity: 0.9;
    pointer-events: auto;
    cursor: pointer;
}

    .scroller:hover {
        opacity: 1;
    }

.scrolling {
    pointer-events: none;
    opacity: 1;
    // z-index: 1;
}

.scroller__thumb {
    width: 100%;
    height: 100%;
    padding: 5px;
}

.scroller:before,
.scroller:after {
    content: " ";
    display: block;
    width: 7px;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -3.5px;
    z-index: 30;
    transition: 0.1s;
}

.scroller:before {
    top: 100%;
}

.scroller:after {
    bottom: 100%;
}

/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller {
    border: 5px solid #fff;
}

    .scroller:before,
    .scroller:after {
        background: #fff;
    }

.lang {
    position: fixed;
    top: 0.5vw;
    right: 1vw;
    display: block;
    background-color: none;
    z-index: 99999999999;
}

    .lang a {
        color: #000 !important;
        font-size: 20px;
        font-family: 'ChollaSansThin', sans-serif !important;
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        text-decoration: none;
        margin: 0 0.1vw;
        float: left;
    }