.page-loader {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: #ffffff;
    z-index: 9999999999999999999999;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: animate 8s linear infinite;
}

.pencil {
    width: 100px;
    height: 22px;
    background: #ffc334;
    border-top: 5px solid #ffd268;
    border-bottom: 5px solid #ee8b1969;
    overflow: hidden;
    transform-origin: top;
}

    .pencil p {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 8px;
        line-height: 15px;
        text-transform: uppercase;
        font-weight: bold;
        color: #d09200;
    }

    .pencil:before {
        content: '';
        position: absolute;
        left: -66px;
        top: 0;
        border-style: solid;
        border-color: transparent #d5d8e2d0 transparent transparent;
        border-width: 11px 33px 11px;
    }

    .pencil:after {
        content: '';
        position: absolute;
        left: -68px;
        top: -1px;
        border-style: solid;
        border-color: transparent #fdb708 transparent transparent;
        border-width: 12px 36px 12px;
        transform: scale(.3);
        z-index: 9999999;
    }

.top {
    position: absolute;
    top: 0;
    right: 0;
    height: 22px;
    width: 10px;
    background: #ccc;
    border-top: 5px solid #dedede;
    border-bottom: 5px solid #b9bfbf;
}

    .top:before {
        content: '';
        position: absolute;
        top: -5px;
        right: -190%;
        width: 240%;
        height: 100%;
        background: #b01476;
        border-bottom: 22px solid #b01476;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: 2;
    }

.stroke {
    position: absolute;
    top: 40%;
    left: calc(50% - 6px);
    transform: translate(-50%,-50%) rotate(45deg);
    border: 5px solid transparent;
    border-left-color: #fdb708;
    border-top-color: #fdb708;
    width: 145px;
    height: 155px;
    border-radius: 50%;
    z-index: -1;
}

@keyframes animate {
    0% {
        transform: translate(-50%,-50%) rotate(360deg);
    }

    100% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}
/* .color-cycle {
    animation: Color 4s linear infinite !important;
    -webkit-animation: Color 4s ease-in-out infinite !important;
  }
  @keyframes color-cycle{
    0%{
      color:#A0D468;
    }
    
    20%{
      color:#4FC1E9;
    }
    
    40%{
      color:#FFCE54;
    }
    
    60%{
      color:#FC6E51;
    }
    
    80%{
      color:#ED5565;
    }
    
    100%{
      color:#AC92EC;
    }
  }
   */
/*  .color-cycle
   {
      text-transform: uppercase;
      background: linear-gradient(to right, #33B7FF 10%, #ffae00 50%, #fffb00 60%);
     background-size: auto auto;
     background-clip: border-box;
     background-size: 200% auto;
     color: #fff;
     background-clip: text;
     text-fill-color: transparent;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: textclip 4s linear infinite;
     display: inline-block;
    font-size: 190px;
   }
   @keyframes textclip {
     to {
       background-position: 200% center;
     }
   } */
/*  @media(max-width:767px){
    #whatsappBtn {
        opacity: 0 ;
        visibility: hidden ;
       }
      body.show-button #whatsappBtn {
        opacity: 1;
        visibility: visible;
        animation: none;
      }
   }
 */
.m-collapse {
    animation: collapse .5s ease forwards;
}

.open {
    animation: open .5s ease forwards;
}

@media(max-width:767px) {
    .mobil-underline {
        text-decoration: underline;
    }
    .scroll-instagram {
        margin-top: 6px
    }
}

.blog-counter {
    margin-top: 60px;
}

    .blog-counter .card {
        /* padding: 20px 0 20px; */
        /*    max-width: 270px;
    box-shadow: #888888;
    border-radius: 30px;
    text-align: center;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
        color: #F14997;
        background: linear-gradient(to right bottom,#fff 50%, #f9f9f9 51%);
        font-family: 'Comfortaa', cursive;
        text-align: center;
        width: 300px;
        padding: 20px 0 0;
        margin: 0 auto;
        border-radius: 30px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        margin-bottom: 30px;
        overflow: hidden;
        height: 200px;
        border: none;
        padding-top: 30px;
    }

.text-icon {
    display: flex;
    margin-top: 16px;
}
/* .blog-counter .text{
        width: 100% !important;
        color: #fff !important;
        background: linear-gradient(to right bottom, #02b2f8, #148ab6ff) !important;
        font-size: 25px !important;
        line-height: 45px;
        margin-top: 10px !important;
        height: 80px;
        text-align: center !important;
        padding: 0 13px !important;
        display: block;
       } */
.blog-counter .text {
    font-size: 25px;
    font-weight: 600;
    color: #fdb708ff;
}

.blog-counter .icon i {
    font-size: 40px;
    /* padding: 23px 16px 15px 21px; */
    /* padding: 10px; */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: white;
    margin-left: 50px;
    padding-top: 15px;
    display: inline-block;
    background-color: #148ab6ff;
}

.blog-counter .timer {
    margin-left: -10px !important;
}

@media(max-width:767px) {
    .blog .blog-wrapper .none-mobile {
        display: none;
    }

    .blog-counter {
        margin-top: 60px;
    }

        .blog-counter .card {
            /* padding: 20px 0 20px; */
            /*    max-width: 270px;
    box-shadow: #888888;
    border-radius: 30px;
    text-align: center;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
            color: #F14997;
            background: linear-gradient(to right bottom,#fff 50%, #f9f9f9 51%);
            font-family: 'Comfortaa', cursive;
            text-align: center;
            width: 300px;
            padding: 20px 0 0;
            margin: 0 auto;
            border-radius: 30px;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            margin-bottom: 30px;
            overflow: hidden;
            height: 200px;
            border: none;
            padding-top: 30px;
        }

    .text-icon {
        display: flex;
        margin-top: 16px;
    }
    /* .blog-counter .text{
        width: 100% !important;
        color: #fff !important;
        background: linear-gradient(to right bottom, #02b2f8, #148ab6ff) !important;
        font-size: 25px !important;
        line-height: 45px;
        margin-top: 10px !important;
        height: 80px;
        text-align: center !important;
        padding: 0 13px !important;
        display: block;
       } */
    .blog-counter .text {
        font-size: 25px;
        font-weight: 600;
        color: #fdb708ff;
    }

    .blog-counter .icon i {
        font-size: 40px;
        /* padding: 23px 16px 15px 21px; */
        /* padding: 10px; */
        width: 70px;
        height: 70px;
        border-radius: 50%;
        color: white;
        margin-left: 50px;
        padding-top: 15px;
        display: inline-block;
        background-color: #148ab6ff;
    }
}

.btn3 {
    padding: 12px 46px;
    border-radius: 30px;
    background-color: var(--title-color);
    color: white;
    /* font-weight: 600; */
    font-size: 18px;
}

.blog .card {
    padding: 20px;
}

.blog .blog-wrapper .profile {
    display: flex;
    align-items: center;
}

    .blog .blog-wrapper .profile img {
        height: 60px;
        width: 60px;
    }

.blog-area {
    margin-top: 20px;
}

    .blog-area .profile {
        display: flex;
    }

        .blog-area .profile img {
            width: 50px;
            height: 50px;
        }

        .blog-area .profile p {
            padding: 11px;
        }

    .blog-area .date p {
        padding: 11px;
    }

    .blog-area .category-box {
        background-color: #f8f8f8;
        padding: 30px 25px;
        border-radius: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .blog-area .category-box h4 {
            text-align: center;
            font-size: 25px;
            margin-bottom: 20px;
        }

    .blog-area .category-list {
        display: flex;
        justify-content: center;
        flex-flow: row wrap;
        gap: 20px;
        margin: 0;
        padding: 0;
    }

        .blog-area .category-list a {
            font-size: 14px;
            font-weight: 500;
            color: #148bb6;
            background: white;
            padding: 10px 15px;
            border-radius: 3px;
            text-align: center;
            transition: all .42s ease-in-out;
            display: inline-flex;
        }

.blog-social {
    background: #fff;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 30px;
    margin-bottom: 40px;
}

.blog-social-wrapper {
    padding: 30px 25px;
}

    .blog-social-wrapper ul {
        margin: 0;
        padding: 10px 0 0;
        display: flex;
        justify-content: center;
    }

        .blog-social-wrapper ul li a {
            padding: 5px;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-right: 10px;
            width: 35px !important;
            height: 35px !important;
            overflow: hidden;
            font-size: 18px;
            background: #f2f3fa;
            border-radius: 20%;
            opacity: 1;
            color: #148bb6;
            display: inline-block;
            transition: all .35s ease-in-out;
        }

.blog .card {
    min-width: 370px;
    box-shadow: #888888;
    border-radius: 30px;
    text-align: center;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .blog .card img {
        border-radius: 30px;
    }

.blog .date span {
    font-weight: 700;
}

.blog .card-text {
    margin-bottom: 30px;
}
/* blod detay start */
.last-blog {
    background: #fff;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 30px;
    margin-bottom: 40px;
    padding: 20px 20px;
    margin-top: 20px;
}

    .last-blog .last-blog-list-item {
        margin-bottom: 30px;
    }

    .last-blog .post-item {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .last-blog .post-img {
        margin-right: 15px;
    }

        .last-blog .post-img img {
            height: 100px;
            width: 100px;
        }

    .last-blog .date {
        display: flex;
        justify-content: start;
        align-items: center;
    }

.blog-area .blog-img img {
    max-height: 450px;
    height: auto;
    width: 100%;
    object-fit: contain;
}

.blog-area .blog-social-wrapper {
    text-align: center;
}



/* blog detay end */
@media(max-width:767px) {
    .blog .card-body {
        margin-bottom: 25px;
    }

    .blog-card {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .blog .date i {
        font-size: 25px;
        color: #148bb6;
        padding-right: 16px;
    }

    .blog .date {
        margin-left: 12px;
    }

        .blog .date p {
            color: #000;
        }

    .blog .profile img {
        width: 50px;
        height: 50px;
        display: inline-block;
        margin-right: 10px;
        margin-top: -10px;
    }

    .blog .profile {
        display: flex;
        align-items: center;
        padding: 10px;
    }

        .blog .profile p {
            display: inline-block;
            font-size: 14px;
        }

    .blog-area {
        padding: 20px;
    }

        .blog-area .blog-desc {
            margin-top: 30px !important;
        }

        .blog-area .blog-social-wrapper {
            text-align: center;
        }

            .blog-area .blog-social-wrapper ul {
                margin: 0;
                padding: 10px 0 0;
                display: flex;
                justify-content: center;
            }
}

.background-wp {
    width: 54px;
    height: 54px;
}

.videos::-webkit-media-controls-panel {
    display: none !important;
    opacity: 1 !important;
}

.videos-footer::-webkit-media-controls-panel {
    display: none !important;
    opacity: 1 !important;
}
/* contact button start */
.zopim-btn {
    position: fixed;
    bottom: 30px;
    right: 10px;
    z-index: 1060;
}

.counter.counter-small .timer:before {
    content: '+'
}

.zopim-btn__body {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    background-color: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}

.zopim-btn__avatar {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #25D366;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.zopim-btn__avatar-img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    background: url("../img/wp_.jpg") bottom no-repeat #fff;
    background-size: cover;
}

.zopim-btn__bubble {
    position: relative;
    width: 130px;
    margin-left: -34px;
    padding: 19px 15px 19px 40px;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    background-color: #25D366;
    /*box-shadow: rgba(13, 173, 7, 0.3) 0px 19px 38px, rgba(6, 153, 6, 0.22) 0px 15px 12px;*/
}

    .zopim-btn__bubble::before {
        content: "";
        position: absolute;
        left: -20px;
        bottom: 0;
        width: 27px;
        height: 8px;
        -webkit-mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2227%22%20height%3D%228%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.908.092a19.3%2019.3%200%2001-3.323%204.453C3.267%205.863%201.739%207.015%200%208h27V.092H7.908z%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2227%22%20height%3D%228%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.908.092a19.3%2019.3%200%2001-3.323%204.453C3.267%205.863%201.739%207.015%200%208h27V.092H7.908z%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: #25D366;
    }
/* contact button end */
.mobildegoster {
    display: none;
}

    .mobildegoster i {
        display: none;
    }

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.figure {
    margin-top: 3px;
    color: black;
    margin-left: 4px;
}

.eye {
    margin: 0 0.8em;
    display: inline-block;
    position: relative;
    width: 0.5em;
    height: 0.5em;
    color: #000;
    background: currentColor;
    border-radius: 50%;
    box-sizing: content-box;
    margin-top: 10px;
}

    .eye::before, .eye::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: content-box;
    }

    .eye::before {
        background: #fff;
        width: 0.25em;
        height: 0.25em;
        border-radius: 50%;
        margin-left: -0.125em;
        margin-top: -0.125em;
    }

    .eye::after {
        border: 2px solid currentColor;
        width: 1em;
        height: 1em;
        border-radius: 150% 20%;
        transform-origin: 1% 1%;
        transform: rotate(45deg) translate(-50%, -50%);
    }

    .eye.left::after {
        animation: lefteye 4s ease-in infinite alternate;
    }

    .eye.right::after {
        animation: righteye 4s ease-in infinite alternate;
    }

@keyframes lefteye {
    0% {
        box-shadow: inset 0 0 0.0625em -0.125em rgb(0, 0, 0);
    }

    10% {
        box-shadow: inset 1em 0.3em 0.0625em -0.125em rgb(0, 0, 0);
    }

    15% {
        box-shadow: inset 0 0 0.0625em -0.125em rgb(0, 0, 0);
    }
}

@media(max-width:767px) {
    .mobildegoster {
        display: inline-block;
    }

   
        .topbar .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .figure {
        margin-top: 3px;
        color: black;
        margin-left: 4px;
    }

    .eye {
        margin: 0 0.8em;
        display: inline-block;
        position: relative;
        width: 0.5em;
        height: 0.5em;
        color: #000;
        background: currentColor;
        border-radius: 50%;
        box-sizing: content-box;
        margin-top: 10px;
    }

        .eye::before, .eye::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            box-sizing: content-box;
        }

        .eye::before {
            background: #fff;
            width: 0.25em;
            height: 0.25em;
            border-radius: 50%;
            margin-left: -0.125em;
            margin-top: -0.125em;
        }

        .eye::after {
            border: 2px solid currentColor;
            width: 1em;
            height: 1em;
            border-radius: 150% 20%;
            transform-origin: 1% 1%;
            transform: rotate(45deg) translate(-50%, -50%);
        }

        .eye.left::after {
            animation: lefteye 4s ease-in infinite alternate;
        }

        .eye.right::after {
            animation: righteye 4s ease-in infinite alternate;
        }

    @keyframes lefteye {
        0% {
            box-shadow: inset 0 0 0.0625em -0.125em rgb(0, 0, 0);
        }

        10% {
            box-shadow: inset 1em 0.3em 0.0625em -0.125em rgb(0, 0, 0);
        }

        15% {
            box-shadow: inset 0 0 0.0625em -0.125em rgb(0, 0, 0);
        }
    }
}

.slick-list {
    padding: 0 25% 0 0 !important;
}

#scroll {
    position: fixed;
    left: 20px;
    bottom: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #3498db;
    /*  text-indent: -9999px; */
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    z-index: 1;
}
/*   #scroll i {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -12px;
        height: 0;
        width: 0;
        border: 8px solid transparent;
        border-bottom-color: #ffffff;
    } */
.scroll-top i {
    font-size: 30px;
    color: white;
    height: 100%;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: absolute;
}

#scroll:hover {
    background-color: #fdc403ff;
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}
/* header mobile */
.surec li a {
    font-size: 18px
}

.bi-chat-left-dots-fill::before {
    content: "\f24c";
    margin-left: -10px;
    margin-right: 10px;
    font-size: 20px;
}
/* eye */
/* whatsapp start */
.topbar {
   margin-top:30px;
    position: fixed;
    width: 65px;
    background-color: #fdb708ff;
    height: 40px;
    z-index: 15;
    padding: 10px;

 */
}

    .topbar i {
        font-size: 30px;
    }

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}


@media(max-width:767px) {
    .topbar .container {
        /*   display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        margin-top: -5px;*/
        position: absolute;
        /* left: 0; */
        right: 8px;
        width: auto;
        display: flex;
        top: 8px;
    }

  /*  .topbar {
        left: 46px !important;
        top: 84px !important;
    }*/
    /*  .topbar {
        position: absolute;
        z-index: 11;
        width: 100vw!important;
        top: 45px!important;
        height: 40px!important;
        z-index: 99;
        padding: 10px;
        right: 0;
    } */
}
/* menü active ayarlama */
/* .header-right .menu-list .menu-link::after {
  content:"";
  width: 65px !important;  
  height: 1px;
  background-color: #f10875;
  position: absolute;
  bottom:-2px;
  left:61%;
  top:10%; 
  transform: translate(-50%); 
  transition: .2s ease width;
}
.header-right .menu-list-item:hover .menu-link::after {
  width: 20%;
}
.header-right .menu-list .menu-link.active::after{
  width: 100%;
} */
.nav-bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-content: flex-end;
    width: auto;
    height: auto;
    position: fixed;
    z-index: 8;
    bottom: 20px;
    right: 5px;
    padding: 5px;
    margin: 0px;
}

@media (max-width: 360px) {
    .nav-bottom {
        width: 320px;
    }
}

.whatsapp-button {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 60px;
    height: 60px;
    z-index: 8;
    transition: 0.3s;
    background-color: transparent;
    margin: 10px;
    padding: 7px;
    border: none;
    outline: none;
    cursor: pointer;
    /* border-radius: 50%; */
    /* -webkit-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705); */
    /* box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705); */
}

.circle-anime {
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    width: 67px;
    height: 67px;
    top: -7px;
    right: -4px;
    border-radius: 50%;
    transition: 0.3s;
    background-color: #77bb4a60;
    animation: pulse 1.2s 1s ease 500;
}

.circle-anime-two {
    left: 10 0%;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    width: 70px;
    height: 70px;
    top: -3px;
    right: -15px;
    border-radius: 50%;
    transition: 0.3s;
    z-index: -1;
    background-color: rgba(253, 184, 8, 0.411);
    animation: pulse 1.2s 1s ease 500;
}
/* @media(max-width:767px){
    .circle-anime-two{
        left:72% !important;
    }
} */
input.whats-input[type=text] {
    width: 250px;
    height: 40px;
    box-sizing: border-box;
    border: 0px solid #fff;
    border-radius: 20px;
    font-size: 1em;
    background-color: #e8e8e8;
    padding: 0px 0px 0px 10px;
    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    outline: none;
    transition: 0.3s;
}

@media (max-width: 420px) {
    input.whats-input[type=text] {
        width: 225px;
    }
}

input.whats-input::placeholder {
    color: rgba(68, 68, 68, 0.705);
    opacity: 1;
}

input.whats-input[type=text]:focus {
    background-color: #f8f8f8;
    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    transition: 0.3s;
}

.icon-whatsapp-small {
    width: 24px;
    height: 24px;
}

.modal-content {
    border-radius: 25px;
   
}

.modal-dialog {
    margin: 0 15px 0 15px;
}

.skill-counter {
    border-radius: 25px
}

.icon-whatsapp {
    width: 65px;
    height: 65px;
    z-index: 9999999999;
}

.icon-font-color {
    color: #fff;
}

.icon-font-color--black {
    color: #333;
}
/* whatsapp end */
h1 {
    transition: transform 0.2s linear;
}

.header-mobile {
    font-size: 24px;
    cursor: pointer;
    display: none;
}

.header-row .header-wrapper {
    display: flex;
    align-items:center;
}

.header-right ul {
    display: flex;
    gap: 30px;
    position: absolute;
    right: 150px;
}

.modal-dialog {
    transform: translate(-50%,-50%) !important;
    top: 60%;
    left: 50%;
}

@media(min-width:767px) and (max-width:1200px) {
    .modal-dialog {
        /*  transform: translate(-50%,0) !important;
        top: 0;
        left: 50%;*/
        transform: translate(-50%,-50%) !important;
        top: 46%;
        left: 50%;
        width: 600px;
        margin: 20px 0;
        position: absolute !important;
    }
}

@media(min-width:1200px) {
}

@media(max-width:767px) {
    .header-row {
        padding: 0;
    }
    .modal-content {
        border-radius: 25px;
        margin-bottom: 0;
        margin-top: 0;
    }
    .header-row .mobilmenu-social i {
        padding-top: 5px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-right: -10px;
        width: 30px !important;
        height: 30px !important;
        overflow: hidden;
        background: #f2f3fa;
        border-radius: 20%;
        opacity: 1;
        color: #148bb6;
        font-size: 16px;
        display: inline-block;
    }
    .header-row .mobilmenu-social .bottom {
        padding-top: 8px;
    }
    .modal-dialog {
        transform: translate(-50%,-50%) !important;
        top: 50%;
        left: 46%;
        margin: 20px 20px 20px 20px;
    }
    .header-row .header-left {
        width: 100%;
    }

    .header-left .logo {
        position: absolute;
        top: 15px;
        left: 30px;
        text-align: center;
    }

    .header-row .header-left h2 {
        text-align: center;
    }

    .header-mobile i {
        right: 5px;
        z-index: 999;
        display: flex;
        top: 20px;
        margin-top: 0;
        font-size: 45px;
        color: #148ab6ff !important;
        position: absolute;
    }

    .header-mobile {
        display: inline-block;
        right: 10px;
        top: 0;
        position: absolute;
    }

    .header-row {
        z-index: 9;
        position: absolute;
        height: 85px;
        position: fixed;
    }

    .header-right {
        position: fixed;
        z-index: 999;
        top: -100%;
        width: 100%;
        transition: .5s ease all;
    }

    .mobilmenu-logo {
        color: rgb(83, 83, 83) !important
    }

    .header-right .menu-list-item .menu-list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        list-style: circle !important;
    }


        .header-right .menu-list-item .menu-list a {
            width: 100%;
            text-decoration: underline !important;
        }

    .header-right .menu-list-item li a {
        color: rgb(255, 255, 255) !important;
        font-size: 18px;
    }
}
.header-right ul li a:hover {
    color: var(--title-color) !important
}
.content {
    /*background-image:url(../img/Background3.png);*/
    background-size: cover;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
}

.content-desc {
}

    .content-desc p {
        color: black;
        margin-bottom: -30px;
        text-align: center;
    }
/*---content -mobil start--- */
@media(max-width:767px) {
    .content-desc {
        margin-top: 40px
    }

    .content {
        position: relative;
        /*background-image:url(../img/Background3.png);*/
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center;
        margin-top: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-background-size: cover !important;
    }

    .mobilmenu-social {
        left: 0;
        position: inherit !important;
        ;
    }

    .content #content-button-wrapper a {
        text-align: center;
    }

    .content .content-text {
        width: 100%;
        text-align: center;
        left: 0 !important;
        top: 35% !important;
        position: absolute !important;
        padding: 10px;
    }

    .content .content-title {
        margin-top: 30px;
    }

    .content .content-text h1 {
        font-size: 50px !important;
    }

    .content .buttons {
        text-align: start;
    }

        .content .buttons .btn {
            /*padding: 15px 50px;*/
            padding: 12px 44px;
            margin-left: 2.5rem !important;
        }
}
/* content video button start */

@media(max-width:767px) {
    /*  #button{
        left: 71% !important;

    } */
    .content .content-text .btn {
        font-size: 16px;
    }
}
#content-button-wrapper {
    text-align: start;
    position: relative;
    margin-top: 5rem;
    margin-left: 72px !important;
}
#button:hover {
    /* ----- Transformations ----- */
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    /* ----- Transitions ----- */
    -webkit-transition: transform .5s ease;
    -moz-transition: transform .5s ease;
    -ms-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
}



#lightbox {
    /* ----- Positioning ----- */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    /* The code above makes sure that the
  lightbox covers the entire page*/
    /* ----- Visibility ----- */
    display: none;
    /* ----- Styling ----- */
    background-color: rgba(0, 0, 0, 0.95);
    /* Normally, most lightboxes do not use
  a completely solid black, but with about
  90-95% opacity so that the background is
  somewhat visible */
}

#video-wrapper {
    /* ----- Positioning ----- */
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* The code above makes sure the video is
  both vertically and horizontally centered
  to the screen */
    /* ----- Styling ----- */
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
    /* The code above is used to add a little shadow to the video making blend in better */
}

#close-btn {
    /* ----- Text ----- */
    color: grey;
    font-size: 25px;
    /* ----- Positioning ----- */
    position: fixed;
    top: 3%;
    right: 3%;
    z-index: 2;
    /* The code above is used to put the button on the upper right corner of the lightbox */
    /* ----- Transformations ----- */
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    /* The code above is used to initialize the scale for the button so that it can be used in transitions */
    /* ----- Transitions ----- */
    -webkit-transition: transform .5s ease, color .5s ease;
    -moz-transition: transform .5s ease, color .5s ease;
    -ms-transition: transform .5s ease, color .5s ease;
    -o-transition: transform .5s ease, color .5s ease;
    transition: transform .5s ease, color .5s ease;
}

    #close-btn:hover {
        /* ----- Text ----- */
        color: white;
        /* ----- Styling ----- */
        cursor: pointer;
        /* ----- Transformations ----- */
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        /* ----- Transitions ----- */
        -webkit-transition: transform .5s ease, color .5s ease;
        -moz-transition: transform .5s ease, color .5s ease;
        -ms-transition: transform .5s ease, color .5s ease;
        -o-transition: transform .5s ease, color .5s ease;
        transition: transform .5s ease, color .5s ease;
    }
/* content video button end */
.content-image {
    /*background-image: url("../img/slider-1.jpg");*/
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: auto;
    /*filter: blur(2px);*/
    /*background-color: black;*/
    /*opacity: 0.2;*/
    display: flex;
    justify-content: center;
    align-items: center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position-y: center;
    height: 70vh;
}
/* ---content --mobil end--- */

@media(max-width:767px) {
    #content-button-wrapper {
        display: flex;
        justify-content: center;
    }

    /*   #button {
        left: 76%
    } */

    .content-image {
        /*background-image: url("../img/slider-1.jpg");*/
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: auto;
        /*filter: blur(2px);*/
        /*background-color: black;*/
        /*opacity: 0.2;*/
        display: flex;
        justify-content: center;
        align-items: center;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-position-y: center;
        height: 530px;
    }

    .content .content-text {
        position: absolute;
        top: 30%;
        left: 40%;
    }

        .content .content-text h1 {
            font-size: 100px;
        }

        .content .content-text p {
            font-size: 22px;
            color: dimgray;
            font-weight: 700;
        }

        .content .content-text .btn {
            position: absolute;
            margin-top: 0;
            left: 20px
        }
}

.content .content-text h1 {
    font-size: 100px;
}

.content .content-text p {
    font-size: 22px;
    color: white;
    font-weight: 700;
}

.content .content-text .btn {
    font-size: 16px
}

.about {
    background-image: url("../img/Pembe\ \ Sevimli\ Soft\ Renkli\ Estetik\ Çocuk\ Giyim\ Reklam\ Bandı.png");
    background-repeat: no-repeat;
    background-size: cover;
    -o-background-size: cover;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: top;
    height: 50vh;
    position: relative;
    width: 100%;
    filter: brightness(80%);
}

    .about .about-desc {
        margin-bottom: 30px;
    }

    .about .about-text {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        padding: 40px;
        transform: translate(-50%, -50%);
    }

    .about .revealUp {
        opacity: 0;
        visibility: hidden;
    }

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

/* ---about mobil start---- */
@media(max-width:767px) {
    .about {
        height: 900px;
    }

        .about .about-text {
            translate: none;
            rotate: none;
            scale: none;
            opacity: 1;
            visibility: inherit;
            transform: translate(-50%, 0%);
            position: absolute;
            top: 0px;
            width: 100%;
        }

        .about .about-title h1 {
            margin-bottom: 30px;
        }

        .about .about-desc p {
            margin-bottom: 40px;
        }

    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

        .row > * {
            padding-right: 0 !important;
            padding-left: 0 !important;
        }

    .card-title {
        margin-bottom: 0.5rem;
        margin-top: 1.5rem
    }
}
/* class start */

.class .card {
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 30px;
    transition: .5s;
}

    .class .card .card-title {
        margin: 30px;
    }

        .class .card .card-title h1 {
            text-align: center;
        }

    .class .card:hover {
        transform: scale(1.1);
    }


@media(max-width:767px) {
    .class .card {
        margin-bottom: 50px;
    }

    .lesson .lesson-title {
        margin-bottom: 20px !important;
    }

    .course .course-wrapper {
        margin-top: -3em !important;
    }

    .blog .mb-5 {
        margin-bottom: 0em !important;
    }

    .student .mb-5 {
        margin-bottom: 0em !important;
    }

    .question .mb-5 {
        margin-bottom: 0em !important;
    }
}
/* class end */
/* ---about mobile end--- */
/* lesson start */
/* .lesson{
  position: absolute;
  z-index: 999999;
} */

.lesson-wrapper {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 40px;
    border-radius: 25px !important;
}

.lesson .lesson-online-info {
    text-align: center;
}

    .lesson .lesson-online-info .icon {
        text-align: center;
    }

    .lesson .lesson-online-info h1 {
        margin-bottom: 50px;
        color: #148ab6ff;
    }

@media(max-width:767px) {
    .lesson-wrapper {
        border-radius: 0;
        margin: 20px;
        padding: 30px 30px 50px 30px !important;
    }

    .lesson .lesson-online-info .icon img {
        width: 150px;
        height: 150px;
    }

    .lesson .mobil-lesson {
        width: 50%;
        flex: 2;
    }

    .lesson .btn2 {
        padding: 2px 24px;
        color: white;
    }

    .lesson .lesson-online-info h1 {
        font-size: 20px;
        margin-bottom: 35px;
    }
}

.section-title h3 {
    color: var(--title-color) !important
}

.section-title h5 {
    color: black !important
}
/* lesson end */
/* accordion start */
@media(max-width:767px) {
    .accordion-button {
        background-color: #ffffff;
        line-height: 55px;
        font-size: 23px;
        padding: 1px 15px;
        border-radius: 25px;
        font-size: 22px;
    }

    .accordion {
        margin: 10px;
    }

    .accordion-body {
        padding: 40px;
        background-color: #e8eaf1;
        margin: 10px;
        border-radius: 30px;
        font-size: 20px;
    }

    .accordion-button:not(.collapsed) {
        color: #ffffff;
        background-color: #148ab6ff;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    }

    .accordion-item {
        border-top: none !important;
        border-left: none;
        border-right: none;
        border-bottom: 2px solid rgb(235, 235, 235);
    }

    .question {
        margin-bottom: 60px;
    }

    .accordion-item:not(:first-of-type) {
        border-left: none;
        border-right: none;
    }
}
/* accordion end */
.course {
    background-color: var(--background-color);
    padding-bottom: 90px;
}

    .course .course-title {
        /*padding: 2em;*/
        text-align: center;
    }

    .course .image {
        width: 100%;
        position: relative;
    }

    .course .course-wrapper {
        margin-top: 2em;
    }

    .course .card {
        height: 500px;
        width: 350px;
        border-radius: 25px;
    }

    .course .right {
        /* -webkit-box-shadow: 26px 0px 19px -14px #148ab6ff;
        -moz-box-shadow: 26px 0px 19px -14px #148ab6ff; */
        /*box-shadow: 26px 0px 19px -14px #148ab6ff;*/
        box-shadow: rgba(20, 139,182, 0.4) 5px 0px, rgba(20, 139,182, 0.3) 10px 0px, rgba(20, 139,182, 0.2) 15px 0px, rgba(20, 139,182, 0.1) 20px 0px, rgba(20, 139,182, 0.05) 25px 0px;
    }

    .course .left {
        box-shadow: rgba(253, 196, 3, 0.4) -5px 0px, rgba(253, 196, 3, 0.3) -10px 0px, rgba(253, 196, 3, 0.2) -15px 0px, rgba(253, 196, 3, 0.1) -20px 0px, rgba(253, 196, 3, 0.05) -25px 0px;
    }


    .course .logo img {
        width: 150px;
        height: 150px;
    }

    .course .image-text .button {
        padding: 10px 30px;
        border-radius: 30px;
        /*background-color: var(--background-color);*/
        background-color: var(--title-color);
        text-align: center;
        margin-top: 30px;
        border: none;
        width: 200px
    }

    .course .image-text h6 {
        color: var(--mytitlecolor);
        font-size: 30px;
        margin-bottom: 20px;
    }

    .course .image-text p {
        color: black;
        margin-bottom: 50px;
    }

    .course .image-text i {
        font-size: 20px;
    }

    .course .iphone {
        top: 38% !important;
    }
/* ---course mobil start--- */
@media(max-width:767px) {
    .course {
        height: 100%;
    }

        .course .iphone {
            top: 32% !important;
        }

        .course .image-text {
            width: 100%;
            text-align: center;
            margin-top: 30px;
            top: 40%;
        }

        .course .hizmet {
            width: 100%;
            display: flex;
            justify-content: center;
        }

            .course .hizmet .card {
                margin-bottom: 30px;
            }

            .course .hizmet h6 {
                width: 100%;
                text-align: center;
            }
}
/* ---course mobil end --- */
.banner {
    background-color: var(--background-color);
    padding: 10px;
    padding-bottom: 10em;
}

    .banner .banner-title {
        position: relative;
        margin-top: 80px;
        margin-bottom: 80px;
        text-align: center;
    }

    .banner .banner-desc {
        margin-top: 40px;
    }

        .banner .banner-desc p {
            line-height: 2.3;
            text-align: center;
        }

@media(max-width:767px) {
    .banner .banner-desc {
        padding: 10px;
    }

    .banner .banner-desc {
        width: 100%;
    }

    .banner .banner-image img {
        width: 100%;
    }
}
/* slider start */
.icon-slider {
    position: absolute;
}

    .icon-slider .slick-initialized .slick-slide {
        display: flex;
    }

    .icon-slider .slider-title p {
        font-size: 20px;
        margin-top: 10px;
    }

    .icon-slider .slide img {
        width: 50px;
    }

    .icon-slider .slider-image {
        background: linear-gradient(90deg,#0d6efd4d,hsla(0,0%,100%,.6));
        box-shadow: 0 0 15px #e7b00af7;
        border-radius: 100%;
        padding: 20px;
    }

    .icon-slider .slick-list {
        padding: 0;
        height: 110px;
        position: absolute;
        top: -150px;
        width: 400px;
    }

@media(max-width:767) {
    .icon-slider .slider {
        width: 100%;
    }

    .icon-slider .slick-list {
        height: 110px;
        width: 100%;
    }

    .icon-slider .slick-track {
        width: 100% !important;
    }

    .student .slick-slide img {
        width: 100%;
    }
}

.student {
    margin-top: 50px;
    margin-bottom: 50px;
}

    .student .card-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 25px;
    }

    .student .card-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .student .level-icon {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .student .card .card-image img {
        width: 80px;
        height: 80px;
    }

@media(max-width:767px) {
    .student .student-title h1 {
        margin-bottom: -40px;
        margin-top: 30px;
    }
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: auto;
}

.footer-bottom p {
    font-size: 18px
}

.footer .icons {
    margin-top: 20px;
}

    .footer .icons i {
        padding: 6px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-right: 10px;
        width: 30px !important;
        height: 30px !important;
        overflow: hidden;
        background: #f2f3fa;
        border-radius: 20%;
        opacity: 1;
        color: #148bb6;
        display: inline-block;
    }

.footer-bottom p a {
    font-size: 21px;
    font-weight: 600
}

.slick-slide .card {
    margin-bottom: 15px;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: '';
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
/* slider end student */
/* widget start */
.widget {
    background-color: var(--background-color);
}

    .widget .widget-wrapper img {
        height: 200px;
        width: 200px;
    }

    .widget .tyt {
        margin-left: -35px;
        margin-top: 30px;
        color: #148ab6ff
    }

    .widget .ayt {
        margin-left: -50px;
        margin-top: 30px;
        color: #148ab6ff
    }

    .widget .lgs {
        margin-top: 30px;
        color: #148ab6ff
    }

    .widget .widget-title {
        padding-top: 40px;
        margin-bottom: 40px;
    }

        .widget .widget-title h1 {
            text-align: center;
        }
/* widget start end*/
/* WİDGET MOBİLE START  ---- */
@media(max-width:767px) {
    .widget {
        padding-bottom: 40px;
    }

        .widget .exam {
            width: 50%;
        }

        .widget .widget-wrapper img {
            height: 150px;
            width: 150px;
        }
}

.footer-wrapper {
    padding-top: 50px;
    padding-bottom: 30px;
}

@media(max-width:767px) {
    .student .card {
        padding: 10px 10px;
        min-height: 185px;
    }

    .galery .card img {
        border-radius: 30px;
    }

    .card-desc h5 {
        color: #148ab6ff
    }

    .student {
        margin-left: 20px;
        margin-top: 0;
        margin-bottom: 0
    }

    .footer-wrapper {
        padding-top: 0
    }

    .footer .icons {
        margin-top: 25px;
    }

        .footer .icons i {
            padding: 6px;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-right: 10px;
            width: 30px !important;
            height: 30px !important;
            overflow: hidden;
            background: #f2f3fa;
            border-radius: 20%;
            opacity: 1;
            color: #148bb6;
            display: inline-block;
        }
}

@media(min-width:1000px) {
    .widget .exams {
        display: none;
    }
}
/*  widget mobile end ---- */
/* contact start */
/*  .contact .contact-icon i{
        margin-right: 10px ;
        font-size: 20px;
    }
    .contact .contact-title{
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .contact .contact-desc ul li{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .contact .login-box {
        width: 600px;
        padding: 40px;
        background: white;
        box-sizing: border-box;
        border-radius: 10px;
        text-align: center;
      }
      .contact .login-box h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
      }
      .contact .login-box .user-box {
        position: relative;
      }
      .contact .login-box .user-box input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #000000;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #000000;
        outline: none;
        background: transparent;
      }
      .contact .login-box .message input{
        margin-top: 10em;
      }
      .login-box .message label{
        left:3px !important;
        position: absolute !important;
        margin-top: -10px;
      }
      .login-box .user-box label {
        position: absolute;
        top:0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #969696;
        pointer-events: none;
        transition: .5s;
      }
      .login-box .user-box input:focus ~ label,
      .login-box .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: var(--title-color);
        font-size: 12px;
      }
      .login-box form a {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        overflow: hidden;
        transition: .5s;
        margin-top: 40px;
        letter-spacing: 4px
      }
      
      .login-box .submit:hover {
        background: #2232a2ff;
      }
      
      .login-box a span {
        position: absolute;
        display: block;
      }
      @keyframes btn-anim1 {
        0% {
          left: -100%;
        }
        50%,100% {
          left: 100%;
        }
      }
      @keyframes btn-anim2 {
        0% {
          top: -100%;
        }
        50%,100% {
          top: 100%;
        }
      }
      .submit {
        padding: 15px;
        background-color: #2a9cd1ff;
      }
      .submit a{
        color: white;
        text-align: center;
        font-size: 18px;
        display: block;
      }  */

/* contact end */
/* contact mobil start--- */
/* @media(max-width:767px){
    .contact .login-box{
        width: 100%;
        padding: 10px;
        margin-top: 20px;
    }
    .contact .contact-icon i{
    margin-right: 10px !important;
    }
    .contact{
        padding:10px;
    }
} */

/* contact mobile end--- */
.contact-form-wrapper {
    background-color: #e8eaf1;
    padding: 60px;
    border-radius: 50px;
}

.contact-form .contact-form-title {
    padding: 50px;
}

.contact-form .contact-form-title {
    text-align: center;
}



.contact-form .contact-form-info h1 {
    color: #148ab6ff;
    margin-bottom: 40px;
}

.contact-form .contact-form-info p {
    font-size: 20px;
    margin-bottom: 40px;
}

.contact-form .call-you-form-item.call-you-form-input {
    background-color: #fff;
    color: #0f104f;
    border-color: #fff;
}

.contact-form .call-you-form-item {
    display: block;
    margin-bottom: 25px;
    padding: 15px 25px;
    border-radius: 50px;
    border-width: 2px;
    border-style: solid;
    font-size: 16px;
    -webkit-transition: .2s;
    transition: .2s;
    width: 100%;
}

.contact-form .submit {
    display: block;
    margin-bottom: 25px;
    padding: 15px 25px;
    border-radius: 50px;
    border-width: 2px;
    width: 100%;
    font-size: 19px;
    -webkit-transition: .2s;
    transition: .2s;
    background-color: #fdb708ff;
    text-align: center;
    width: 100%;
}

    .contact-form .submit a {
        color: white !important;
        font-weight: 600
    }

@media(max-width:767px) {
    .contact-form .call-you-form-item {
        width: 100%;
        text-align: left;
    }

    .contact-form .submit {
        width: 100%;
        color: white !important;
        font-weight: 600
    }

        .contact-form .submit a {
            width: 100%;
            color: white !important;
            font-weight: 600
        }

    .contact-form .contact-form-wrapper {
        border-radius: 0;
        padding: 40px 10px 20px 10px !important
    }

    .contact-form .contact-form-info {
        text-align: center;
        float: none;
    }
}
/* counter start */
.counter {
    position: relative;
    color: #353535;
    min-height: 60px;
}

    .counter .icon {
        font-size: 40px;
    }

    .counter .timer {
        display: block;
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        margin: 20px 0 5px;
    }

    .counter label {
        font-size: 15px;
        font-weight: 600;
        margin: 10px 0 0;
        position: relative;
        text-transform: capitalize;
    }

    .counter.text-white {
        color: #000000;
    }

        .counter.text-white label {
            color: #000000;
        }

        .counter.text-white span {
            color: #000000;
        }

    .counter.theme-color {
        color: #84ba3f;
    }

        .counter.theme-color label {
            color: #84ba3f;
        }

        .counter.theme-color span {
            color: #84ba3f;
        }


    /*counter-small*/
    .counter.counter-small .timer {
        width: 100%;
        /* text-align: center; */
        display: flex;
        justify-content: center;
        margin-left: 35px;
        align-items: center;
    }

        .counter .counter-small .timer .little1 {
            right: 30px;
        }

    .counter.counter-small label {
        font-size: 24px;
        font-weight: 400;
        margin-left: 40px;
        /* margin-top: -20px !important; */
        width: 100%;
        text-align: center;
    }

@media(max-width:767px) {
    .counter.counter-small .timer {
        width: 100%;
        display: flex;
        margin-left: 5px;
        justify-content: center;
        align-items: center;
    }

    .counter.counter-small label {
        font-size: 18px;
        font-weight: 400;
        /*  margin-top: -10px !important; */
        margin-left: 10px;
        width: 100%;
        text-align: center;
    }

    .counter.counter-small .label2 {
        margin-left: 10px;
    }
}
/*big-counter*/
.counter.big-counter .timer {
    font-size: 70px;
    font-weight: 600;
}

.counter.big-counter label {
    font-size: 18px;
    font-weight: 300;
    margin-top: 20px;
}

.counter.big-counter icon {
    font-size: 50px;
    line-height: 60px;
}

/*left-icon*/
.counter.left-icon {
    position: relative;
    padding-left: 43px;
    margin-top: 4em;
}

    .counter.left-icon .icon {
        font-size: 50px;
        line-height: 50px;
        position: absolute;
        left: 0;
        bottom: auto;
        top: 20px;
    }

    .counter.left-icon span {
        margin: 0;
        line-height: 65px;
    }
/*left-icon*/
.counter.right-icon {
    position: relative;
    padding-right: 70px;
}

.counter.left-icon .icon {
    line-height: 50px;
    position: absolute;
    left: 0;
    top: -10px;
    bottom: auto;
    padding: 5px;
    margin-left: 10px;
    color: white;
    background: var(--mytitlecolor);
    border-radius: 100%;
}

@media(max-width:768px) {
    .counter.left-icon .icon {
        margin-left: 7px !important;
    }
}

.counter.right-icon span {
    margin: 0;
    line-height: 40px;
    text-align: right;
}

.counter.right-icon label {
    text-align: right;
    display: block;
}

.page-section-ptb {
    /*background-image: url(../img/SİTE\ GÖRSELİ2.jpg) !important;*/
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position-y: 20%;
    object-fit: cover;
    filter: brightness(90%);
    height: 80vh;
}

.page-section-pb {
    background-color: var(--background-color);
}

.page-section-ptb .widget-title h1 {
    padding-top: 70px;
    padding-bottom: 50px;
    text-align: center;
}

.contact-form-info {
    margin-top: 3rem;
}

.accordion-button {
    color: var(--mytitlecolor);
    font-weight: 700;
    font-size: 20px;
}

@media(max-width:767px) {
    .accordion-button {
        margin-top: 10px !important;
    }

    .accordion-item:first-of-type .accordion-button {
        border-top-left-radius: 30px !important;
        border-top-right-radius: 30px !important;
    }
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-body {
    font-size: 18px
}

.accordion-button:not(.collapsed) {
    background-color: var(--title-color);
    color: white;
}

@media(max-width:767px) {
    .page-section-ptb {
        height: 40vh !important;
        width: 100%;
        -o-background-size: cover;
        -moz-background-size: cover;
        /*background-image: url(../img/SİTE\ GÖRSELİ2.jpg) !important;*/
        margin-top: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-background-size: cover !important;
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: top;
    }

    #jarallax-container-0 {
        width: auto !important;
    }

    .contact-form-info {
        margin-top: 0
    }

    .jarallax {
        background-image: none
    }

    .blue {
        box-shadow: rgba(20, 139,182, 0.3) 5px 0px, rgba(20, 139,182, 0.03) 10px 0px, rgba(20, 139,182, 0.03) 15px 0px, rgba(20, 139,182, 0.03) 20px 0px, rgba(20, 139,182, 0.03) 25px 0px, rgba(20, 139,182, 0.03) 30px 0px, rgba(20, 139,182, 0.03) 35px 0px, rgba(20, 139,182, 0.03) 40px 0px, rgba(20, 139,182, 0.03) 45px 0px, rgba(20, 139,182, 0.03) 50px 0px, rgba(20, 139,182, 0.03) 55px 0px, rgba(20, 139,182, 0.03) 60px 0px, rgba(20, 139,182, 0.03) 65px 0px, rgba(20, 139,182, 0.03) 70px 0px, rgba(20, 139,182, 0.03) 75px 0px, rgba(20, 139,182, 0.03) 80px 0px, rgba(20, 139,182, 0.03) 85px 0px, rgba(20, 139,182, 0.03) 90px 0px, rgba(20, 139,182, 0.03) 95px 0px, rgba(20, 139,182, 0.03) 100px 0px, rgba(20, 139,182, 0.03) 105px 0px, rgba(20, 139,182, 0.03) 110px 0px, rgba(20, 139,182, 0.03) 115px 0px, rgba(20, 139,182, 0.03) 120px 0px, rgba(20, 139,182, 0.03) 125px 0px, rgba(20, 139,182, 0.03) 130px 0px, rgba(20, 139,182, 0.03) 135px 0px, rgba(20, 139,182, 0.03) 140px 0px, rgba(20, 139,182, 0.03) 145px 0px, rgba(20, 139,182, 0.03) 150px 0px, rgba(20, 139,182, 0.03) 155px 0px, rgba(20, 139,182, 0.03) 160px 0px, rgba(20, 139,182, 0.03) 165px 0px, rgba(20, 139,182, 0.03) 170px 0px, rgba(20, 139,182, 0.03) 175px 0px, rgba(20, 139,182, 0.03) 180px 0px, rgba(20, 139,182, 0.03) 185px 0px, rgba(20, 139,182, 0.03) 190px 0px, rgba(20, 139,182, 0.03) 195px 0px, rgba(20, 139,182, 0.03) 200px 0px, rgba(20, 139,182, 0.03) 205px 0px, rgba(20, 139,182, 0.03) 210px 0px, rgba(20, 139,182, 0.03) 215px 0px, rgba(20, 139,182, 0.03) 220px 0px, rgba(20, 139,182, 0.03) 225px 0px, rgba(20, 139,182, 0.03) 230px 0px, rgba(20, 139,182, 0.03) 235px 0px, rgba(20, 139,182, 0.03) 240px 0px, rgba(20, 139,182, 0.03) 245px 0px, rgba(20, 139,182, 0.03) 250px 0px
    }

    .yellow {
        box-shadow: rgba(253, 196, 3, 0.3) 5px 0px, rgba(253, 196, 3, 0.03) 10px 0px, rgba(253, 196, 3, 0.03) 15px 0px, rgba(253, 196, 3, 0.03) 20px 0px, rgba(253, 196, 3, 0.03) 25px 0px, rgba(253, 196, 3, 0.03) 30px 0px, rgba(253, 196, 3, 0.03) 35px 0px, rgba(253, 196, 3, 0.03) 40px 0px, rgba(253, 196, 3, 0.03) 45px 0px, rgba(253, 196, 3, 0.03) 50px 0px, rgba(253, 196, 3, 0.03) 55px 0px, rgba(253, 196, 3, 0.03) 60px 0px, rgba(253, 196, 3, 0.03) 65px 0px, rgba(253, 196, 3, 0.03) 70px 0px, rgba(253, 196, 3, 0.03) 75px 0px, rgba(253, 196, 3, 0.03) 80px 0px, rgba(253, 196, 3, 0.03) 85px 0px, rgba(253, 196, 3, 0.03) 90px 0px, rgba(253, 196, 3, 0.03) 95px 0px, rgba(253, 196, 3, 0.03) 100px 0px, rgba(253, 196, 3, 0.03) 105px 0px, rgba(253, 196, 3, 0.03) 110px 0px, rgba(253, 196, 3, 0.03) 115px 0px, rgba(253, 196, 3, 0.03) 120px 0px, rgba(253, 196, 3, 0.03) 125px 0px, rgba(253, 196, 3, 0.03) 130px 0px, rgba(253, 196, 3, 0.03) 135px 0px, rgba(253, 196, 3, 0.03) 140px 0px, rgba(253, 196, 3, 0.03) 145px 0px, rgba(253, 196, 3, 0.03) 150px 0px, rgba(253, 196, 3, 0.03) 155px 0px, rgba(253, 196, 3, 0.03) 160px 0px, rgba(253, 196, 3, 0.03) 165px 0px, rgba(253, 196, 3, 0.03) 170px 0px, rgba(253, 196, 3, 0.03) 175px 0px, rgba(253, 196, 3, 0.03) 180px 0px, rgba(253, 196, 3, 0.03) 185px 0px, rgba(253, 196, 3, 0.03) 190px 0px, rgba(253, 196, 3, 0.03) 195px 0px, rgba(253, 196, 3, 0.03) 200px 0px, rgba(253, 196, 3, 0.03) 205px 0px, rgba(253, 196, 3, 0.03) 210px 0px, rgba(253, 196, 3, 0.03) 215px 0px, rgba(253, 196, 3, 0.03) 220px 0px, rgba(253, 196, 3, 0.03) 225px 0px, rgba(253, 196, 3, 0.03) 230px 0px, rgba(253, 196, 3, 0.03) 235px 0px, rgba(253, 196, 3, 0.03) 240px 0px, rgba(253, 196, 3, 0.03) 245px 0px, rgba(253, 196, 3, 0.03) 250px 0px !important;
    }

    .counter.left-icon {
        position: relative;
        padding-left: 105px;
        margin-top: 30px;
    }

    .page-section-ptb .widget-title h1 {
        padding-top: 70px;
        padding-bottom: 50px;
        text-align: center;
    }
}
/* counter end */
/* service-box start */
.serviceBox {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding-top: 10px;
}

    .serviceBox .service-icon {
        color: #fff;
        background: #fff;
        font-size: 45px;
        width: 250px;
        height: 250px;
        FONT-VARIANT: JIS83;
        margin: 0 auto 30px;
        border-radius: 50%;
        box-shadow: 5px 0 5px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;
    }

        .serviceBox .service-icon:before,
        .serviceBox .service-icon:after {
            content: "";
            background: linear-gradient(to right, #ffffff 50%, transparent 50%);
            border-radius: 50%;
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            z-index: -1;
            transition: all ease 0.8s;
        }

    .serviceBox:hover .service-icon:before, .serviceBox:hover .service-icon:after {
        transform: rotateZ(180deg);
    }

    .serviceBox:hover .service-icon {
        box-shadow: -5px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .serviceBox .service-icon::after {
        background: #ffffff;
        box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .serviceBox .s1::before {
        background-color: #ff0000;
    }

    .serviceBox .s2::before {
        background-color: #000000;
    }

    .serviceBox .s3::before {
        background-color: rgb(247, 99, 0);
    }

    .serviceBox .s4::before {
        background-color: rgb(255, 238, 0);
    }
    /*   .serviceBox {
    border: 1px solid #e5e4e4;
    padding: 40px;
    border-radius: 20px;
    background: #f9f9f9;
    position: relative;
    z-index: 1;
  } */


    .serviceBox .title {
        color: #0B80B8;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        margin: 0 0 10px;
    }

    .serviceBox .description {
        color: #777;
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 0.5px;
        margin: 0;
    }

    .serviceBox.red .service-icon:before {
        background: linear-gradient(to right, #0ca9f1 50%, transparent 50%);
    }

    .serviceBox.red .service-icon:after {
        background: #0ca9f1;
    }

    .serviceBox.red .title {
        color: #0ca9f1;
    }

    .serviceBox.blue .service-icon:before {
        background: linear-gradient(to right, #009CB5 50%, transparent 50%);
    }

    .serviceBox.blue .service-icon:after {
        background: #009CB5;
    }

    .serviceBox.blue .title {
        color: #009CB5;
    }

    .serviceBox.green .service-icon:before {
        background: linear-gradient(to right, #A1C52D 50%, transparent 50%);
    }

    .serviceBox.green .service-icon:after {
        background: #A1C52D;
    }

    .serviceBox.green .title {
        color: #A1C52D;
    }

@media only screen and (max-width:990px) {
    .serviceBox {
        margin: 0 0 30px;
    }
}


/* service-box end */
.wallpaper {
    position: relative;
}

    .wallpaper .wallpaper-title {
        position: absolute;
        top: 50%;
        left: 40%;
    }
/* wallpaper start */
@media(max-width:767px) {
    .wallpaper .wallpaper-wrapper img {
        display: none;
    }

    .wallpaper {
        background-image: url(../img/Adsız\ tasarım\ 4.png);
        height: 50vh;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-position-y: center;
        filter: brightness(70%);
    }
}

/* wallpaper end */
/* gallery start */
.galery .slick-slide img {
    border-radius: 30px;
}

.galery #myImg {
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}

    .galery #myImg:hover {
        opacity: 0.7;
    }

/* The Modal (background) */
.galery .modal {
    display: none;
    position: fixed;
    z-index: 9999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

/* Modal Content (image) */
/*   .galery .modal-content {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    top: 20vh;
  }
   */
/* Caption of Modal Image */
.galery #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    position: absolute;
}

/* Add Animation */
.galery .modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.galery .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .galery .close:hover,
    .galery .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }
/* gallery end */
/* abouts start */
.abouts {
    margin-top: 50px;
}

    .abouts .about-image {
        margin-top: 70px;
    }

        .abouts .about-image img {
            width: 400px;
            height: auto;
        }

.about-text {
    text-align: center;
}

@media(max-width:767px) {
    .abouts {
        padding: 20px;
        margin-top: 30px !important;
    }

    .about-text {
        text-align: center;
        margin-top: 30px;
    }

    .abouts .about-image img {
        width: 100%;
    }

    .abouts .about-image {
        margin-top: 0;
    }
}
/* abouts end */
/* ---footer start--- */
.footer {
    margin-top: 4em;
}


.course-title {
    margin-bottom: 3rem
}

.videos-footer {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.footer-video {
    position: absolute;
    width: 100%;
    height: 50vh;
    overflow: hidden;
    text-align: center;
    z-index: -99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-list .footer-list-title p {
    color: var(--title-color);
    font-weight: 700;
    font-size: 24px;
}

.footer-list ul li a {
    color: white;
    font-size: 20px;
}

.footer .footer-wrapper {
    text-align: center;
}

.footer .footer-bottom {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 50px;
}

    .footer .footer-bottom p {
        color: white;
        font-size: 14px;
    }

    .footer .footer-bottom a {
        color: rgb(255, 255, 255);
        font-size: 16px !important;
    }

@media(max-width:767px) {
    .footer {
        margin-top: 0;
    }

    .videos-footer {
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        height: 100vh;
        width: 100%;
    }

    .footer-video {
        position: absolute;
        width: 100%;
        height: 500px;
        z-index: -999;
        overflow: hidden;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wallpaper-title {
        top: 50% !important;
        left: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .laptop {
        padding: 10px;
    }

    .mobil-none {
        display: none;
    }

    .newcol {
        width: 50% !important;
        margin-bottom: 20px;
    }

    .footer-list .footer-list-title p {
        color: var(--title-color);
        font-weight: 700;
        font-size: 24px;
    }

    .footer .footer-logo p {
        color: white;
        font-size: 24px;
        margin-bottom: -40px;
    }

    .footer .footer-logo {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .footer-list ul li a {
        color: white;
        font-size: 20px;
    }

    .footer-wrapper {
        padding-bottom: 0 !important;
        text-align: center !important;
    }

    .footer .footer-bottom {
        /* margin-left: 0 !important;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 10px; */
        text-align: center;
        margin-top: 58px;
        margin-bottom: 10px;
        margin-left: 0 !important;
    }

    .footer .mobile-none {
        display: none;
    }

    .footer .footer-bottom p {
        font-size: 12px;
    }

    .footer .footer-bottom a {
        font-size: 12px !important;
        color: #fdb708ff !important;
    }
}

.card-desc {
    padding: 10px
}

.footer-title {
    font-size: 1.5rem;
    color: var(--title-color) !important;
    font-weight: 600
}

.footer-list-title ul li a {
    font-size: 20px !important;
}

@media(min-width:1000px) {
    .footer .laptop {
        display: none;
    }
}
/* ---footer end --- */
/* blog detay starrt */
.heading {
    height: 10vh;
}

@media(max-width:767px) {
    .heading .heading-title h1 {
        position: absolute !important;
        top: 230px !important;
        text-align: center;
        width: 100%;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

.skill-title {
    color: #353535;
    font-size: 24px;
    font-weight: 500;
    position: absolute;
    text-align: left;
    margin-left: 0;
    margin-top: -35px;
}

.heading .heading-title h1 {
    /* top: 15%;
    position: absolute;
    width: 100%;
    text-align: center;*/
    top: 30vh;
    position: absolute;
    width: 100%;
    text-align: center;
}
/* blog detay end */
/* laptop ve masaüstü responsive start */
/* @media(min-width:1400px){
    .topbar{
        left:20%;
    }
} */
@media(min-width:768px) and (max-width:1024px) {
    .header-right ul {
        display: flex;
        gap: 30px;
        position: absolute;
        right: 35px;
        margin-top: 10px;
    }

    .content {
        height: 70vh;
    }

        .content .content-text {
            position: absolute;
            top: 400px;
            left: 28%;
        }

    .course .card {
        width: 100%;
    }

    .mobil-lesson {
        width: 50%;
    }

    .page-section-ptb {
        height: 40vh;
    }

    .counter.left-icon .icon {
        padding: 0;
    }

    .hizmet {
        width: 33.33333%;
    }

    .student .card {
        min-width: 258px;
    }

    .tablet {
        width: 50%;
    }

    .footer .footer-bottom {
        margin-left: 0;
        text-align: center;
        margin-top: 55px;
        margin-bottom: 55px;
    }

    .tablet-card {
        display: flex;
        justify-content: center;
    }

    .blog-area .category-box {
        width: 70%;
    }

    .last-blog {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .blog-area .blog-social {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .blog-counter .icon i {
        margin-left: 30px;
    }
}

/*@media(min-width:1200px) {
    .topbar {*/
        /* position: absolute; */
        /*position: fixed;
        width: 65px;
        background-color: #fdb708ff;
        top: 151px;
        height: 40px;
        z-index: 15;
        padding: 10px;
        left: 144px !important;*/
        /* clip-path: polygon(26% 0, 100% 0, 100% 100%, 95% 100%, 0 100%, 0 99%); */
        /* border-top-left-radius: 70%;
     */
    /*}
}*/


@media(min-width:350px) and (max-width:380px) {
    .content .content-text .btn {
        left: -22px;
    }

    .btn {
        padding: 15px 35px !important;
    }

   /* .modal-dialog {
        transform: translate(-50%,-50%) !important;
        top: 70%;
        left: 46%;
        margin: 20px 20px 20px 20px;
    }*/

    .modal-dialog {
        transform: translate(-50%,0) !important;
        top: 0%;
        left: 46%;
        margin: 20px 20px 20px 20px;
    }
}

@media(max-width:480px) {

    .modal-dialog {
        transform: translate(-50%,0) !important;
        top: 0%;
        left: 46%;
        margin: 20px 20px 20px 20px;
    }
}

.modal-dialog {
    transform: translate(-50%,0) !important;
    top: 0%;
    left: 46%;
    margin: 20px 20px 20px 20px;
}

@media(min-width:340px) and (max-width:430px) {
    .content #content-button-wrapper a {
        left: -48px;
    }

    .btn {
        padding: 15px 35px !important;
    }

    #button {
        right: 22px !important;
    }

    .circle-anime-two {
        right: 22px !important;
    }

    .content .content-text .btn {
        width: 100%;
        text-align: center;
    }
}

@media(min-width:414px) and (max-width:435px) {
    .btn {
        padding: 15px 35px !important;
    }
}
/* @media(min-width:392px) and (max-width:420px){
    .content .content-text .btn{
        left: -6px;
    }
} */
/* end */
/* son yazılan start */
@media (min-width: 768px) and (max-width: 1025px) {
    .header-mobile {
        font-size: 24px;
        cursor: pointer;
        display: none;
    }

  /*  .topbar{
        margin-top:18px !important;
    }*/

    .lesson-wrapper{
        width:auto!important;
        margin-left:0!important
    }

    .mobilmenu-social i {
        display: flex;
    }

    .header-mobile i {
        right: 5px;
        z-index: 999;
        display: flex;
        top: 45px;
        margin-top: 0;
        font-size: 45px;
        color: #148ab6ff !important;
        position: absolute;
    }

    .mobildegoster {
        display: flex;
    }

        .mobildegoster i {
            display: inline-block !important;
        }

    .header-mobile {
        display: inline-block;
        right: 10px;
        top: 0;
        position: absolute;
    }

    .header-right {
        position: fixed;
        z-index: 999;
        top: -100%;
        width: 100%;
        transition: .5s ease all;
    }

        .header-right .menu-list-item {
            display: grid;
            /* gap: 0; */
            grid-template-columns: auto;
            margin-left: -46px;
            padding: 85px;
            background-color: var(--title-color);
            z-index: 999;
            position: relative;
            width: 100%;
            left: 0;
            text-align: center;
            padding-top: 75px;
            margin-top: 0px;
        }

    .mobilmenu-logo {
        color: rgb(83, 83, 83) !important
    }

    .header-right .menu-list-item .menu-list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        list-style: circle !important;
    }

        .header-right .menu-list-item .menu-list a {
            width: 100%;
            text-decoration: underline !important;
        }

    .header-right .menu-list-item li a {
        color: rgb(255, 255, 255) !important;
        font-size: 18px;
    }

    .header-right .bi-x-circle {
        display: inline-block;
        position: absolute;
        right: 100px;
        font-size: 20px;
        top: 20px;
        z-index: 999999999999;
        cursor: pointer;
        opacity: 1 !important;
        color: rgb(0, 0, 0) !important;
    }

    .header-right ul {
        display: flex;
        gap: 30px;
        position: absolute;
        right: 0;
        margin-top: 45px;
        width: 100%;
        justify-content: center;
    }

        .header-right ul li a {
            font-size: 16px;
        }

    .header-left {
        padding-top: 20px;
    }

    .header-row .header-wrapper {
        display: flex;
        align-items: center;
    }

    .header-row .mobilmenu-social i {
        padding-top: 5px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-right: -10px;
        width: 30px !important;
        height: 30px !important;
        overflow: hidden;
        background: #f2f3fa;
        border-radius: 20%;
        opacity: 1;
        color: #148bb6;
        font-size: 16px;
        display: inline-block;
    }

    .topbar {
        /* position: absolute; */
        position: fixed;
        width: 65px;
        background-color: #fdb708ff;
        /*top: 174px;*/
        height: 40px;
        z-index: 15;
        padding: 10px;
        /*left: 12%;*/
    }

    .counter.counter-small label {
        font-size: 18px;
    }

    .counter.left-icon .icon {
        margin-left: 20px !important;
    }

        .counter.left-icon .icon img {
            width: 60px;
            height: 60px;
        }

    .counter.counter-small .timer {
        font-size: 30px !important;
    }

    .blog-wrapper .profile p {
        font-size: 16px;
        margin-right: 0 !important;
    }

    .student .card-title {
        font-size: 16px !important;
    }

    .blog .card-text {
        font-size: 16px;
    }

    .student .card {
        min-width: 230px !important;
    }

    .btn3 {
        padding: 12px 22px !important;
    }

    .abouts .about-desc {
        flex: 0 0 auto;
        width: 100%;
    }

    .abouts .about-image {
        text-align: center;
    }

    .abouts .abouts-img {
        width: 100%;
    }

    .blog-area .blog-title {
        width: 100%;
    }

        .blog-area .blog-title h2 {
            text-align: center;
        }

    .blog-area {
        margin-top: 60px;
    }

        .blog-area .blog-desc {
            padding: 25px;
        }

    .blog-counter .card {
        width: 230px;
        padding-top: 15px;
    }

    .skill-counter {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .content .content-text {
        position: absolute;
        top: 350px !important;
        left: 28% !important;
    }
}

.slide.slick-slide.slick-current.slick-active {
    margin-left: 10px;
}

.course .logo {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.course .image-text {
    position: absolute;
    top: 45%;
    text-align: center;
    width: 100%;
    margin-top: -15px;
}

@media(min-width:1540px) {
    .content .content-text {
        position: absolute;
        top: 5.5%;
        left: 41% !important;
    }

        .content .content-text p {
            margin-left: 40px !important;
        }

    .skill-counter {
        margin-left: 250px !important;
        margin-right: 250px !important;
    }

    .topbar {
        /* position: absolute; */
        position: fixed;
        width: 65px;
        background-color: #fdb708ff;
        /*top: 103px !important;*/
        height: 40px;
        z-index: 15;
        padding: 10px;
        /*left: 390px !important;*/
        /* clip-path: polygon(26% 0, 100% 0, 100% 100%, 95% 100%, 0 100%, 0 99%); */
        /* border-top-left-radius: 70%; */
    }
}
/*.topbar {
   
    height:40px !important;
   top:100px !important;
}*/
.content .content-text {
    position: absolute;
    top: 350px;
    left: 38%;
}

#button {
    padding: 12px 24px;
    font-size: 30px;
    z-index: 2;
    box-shadow: 0 0 15px #fdb708ff;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #fdb708ff;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition: transform .5s ease;
    -moz-transition: transform .5s ease;
    -ms-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
    position: absolute;
    /* left: 80%; */
    width: 70px;
    height: 70px;
    right: 40px;
    margin-top: -8px;
}

.content .content-text p {
    margin-left: 40px !important;
}

.circle-anime-two {
    left: 10 0%;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    width: 70px;
    height: 70px;
    top: -8px;
    right: 38px;
    border-radius: 50%;
    transition: 0.3s;
    z-index: -1;
    background-color: rgba(253, 184, 8, 0.411);
    animation: pulse 1.2s 1s ease 500;
}

.skill-counter {
    margin-left: 100px;
    margin-right: 100px;
}

@media(max-width:767px) {
    .skill-counter {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    .topbar{
        margin-top:18px !important;
    }
    .content .content-text p {
        margin-left: 0 !important;
    }

    .svg-img {
        margin-left: 0 !important;
    }
}

#button > i {
    /* Text */
    color: #fdb708ff;
    margin-right: -5px;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
    /* Make play sign 3d-ish */
    /* Positioning */
    position: relative;
    margin-top: 4px;
    font-size: 25px;
    /* ----- Transitions ----- */
    -webkit-transition: color .5s ease;
    -moz-transition: color .5s ease;
    -ms-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
    z-index: 9999;
    top: -1px;
}

#button:hover > i {
    /* Text */
    color: white;
    /* ----- Transitions ----- */
    -webkit-transition: color .5s ease;
    -moz-transition: color .5s ease;
    -ms-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
    /* When we hover on the button make the play sign white. */
    position: relative;
    z-index: 9999;
}

.header-right ul li a {
    color: white !important;
    font-weight: 700;
    font-size: 16px;
}

.header-row {
    position: fixed;
    width: 100%;
    z-index: 99;
    padding: 30px;
    background-color: var(--mytitlecolor)
}

.student .card {
    max-width: 320px !important;
    box-shadow: #888888;
    border-radius: 30px;
    text-align: center;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/*     .slick-initialized .slick-slide{
        width: 300px !important;
    }
  
    .student .draggable{
        width: 1200px !important;
    } */
.lesson-wrapper {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 40px;
    border-radius: 25px !important;
    width: 60%;
    margin-left: 220px;
}

.lesson .lesson-online-info .icon img {
    width: 200px;
    height: 200px;
}

@media(max-width:767px) {
    .lesson-online-info .icon img {
        width: 100px !important;
        height: 100px !important;
    }

    .lesson-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .header-right .menu-list-item {
        display: grid;
        /* gap: 0; */
        grid-template-columns: auto;
        margin-left: -30px;
        padding: 30px;
        background-color: var(--title-color);
        z-index: 999;
        position: relative;
        width: 100%;
        left: 0;
        text-align: center;
        padding-top: 75px;
        margin-top: 0px;
    }

    .header-right .bi-x-circle {
        display: inline-block;
        position: absolute;
        right: 50px;
        font-size: 20px;
        top: 20px;
        z-index: 999999999999;
        cursor: pointer;
        opacity: 1 !important;
        color: rgb(0, 0, 0) !important;
    }
}

.student .slick-cloned {
    opacity: 0;
}

@media(max-width:767px) {
    .student .slick-cloned {
        opacity: 0;
    }

    .galery .modal {
        padding-top: 0;
    }

    .spinner {
        top: 50%;
    }
}

.comment .card {
    min-width: 315px !important;
    min-height: 280px !important;
}
/* .slick-initialized .slick-slide{
        width: 300px !important;
    }
    .slick-track{
        width: 3000px !important;
    } */
/* ıphone classını sildim */
/* topbarı tekrardan değiştirdim */
/* logo width 85px */
/* hakkımızda sayfasına abouts bölümüne col-lg-6 nın olduğu kısma "abouts-img" classı ekledim */
/* son yazılan end */

.blog-area-wrapper{
    margin-top:60px;
}