/*  import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend&family=Lexend+Zetta:wght@100..900&display=swap');
.pagination {
    position: absolute !important;
    width: 100%;
    text-align: center;
    padding: 0 !important;
    bottom: 30px;
    z-index: 999;
    display: none;
  }
  .pagination__item {
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    font-size: 0;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    margin: 0 5px;
    transition: 0.2s ease-in-out;
  }
  .pagination__item.is-current, .pagination__item:hover {
    background-color: #ffffff00;
  }
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #2a2a2a;
    
}
::-webkit-scrollbar-thumb {
    background: #444343;
    width: 10px;
}


::-webkit-scrollbar-thumb:hover {
    background:  rgb(254, 182, 0);
    box-shadow: 5px 5px 14px 10px rgb(32, 32, 32);
}

/* all similar content styling codes */
body{
    background-color: #232323;
    overflow-x: hidden;
    font-family: Poppins;
    scroll-padding-bottom: 50px;

}

section{
    padding: 100px 0;
    box-shadow: 0px 0px 1px 1px   rgb(254, 182, 0);
    box-shadow: 0px 0px 10px   rgb(18, 18, 18);
    transition: all .3s ease;
}


section.sticky{
    padding: 70px 0;
}

.max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.about, .services, .skills, .teams, .contact, footer{
    font-family: 'Poppins', sans-serif;
}
.about .about-content,
/*.services .serv-content,*/
.skills .skills-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 30px;
    padding-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color: rgb(220, 193, 20);
    padding: 0 1px;
    background: #ffffff00;
    transform: translateX(-50%);
    transition: all 1.2ms ease;
}
/* youtube*/
footer h6 {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 10px;
    font-weight: 10;
}
/* navbar styling */
.navbar{
    position: fixed;
    height: 100px;
    width: 100%;
    z-index: 999;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    background-color: rgb(22, 22, 22);
}
.navbar.sticky{
    height: 70px;
    background: rgb(33, 33, 33);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.8);
}

.navbar .max-width{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo {
    width: 0;
    height: 40px;
}
.navbar .logo::after{
    content: '';
    position: absolute;
    width: 288px;
    height: 2px;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    text-shadow: 2px 2px 8px #000000;
    transform: scaleX(0);
    background-color: #FFA01B ;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.navbar .logo a{
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    padding: 0 10px;
    text-shadow: 1px 1px 4px #000000;
}



/* hover olmayacaklari yapiyoruz burada*/
/*
@media ( hover: none) {
    .navbar .logo::after{
        content: '';
        position: absolute;
        width: 288px;
        height: 0px;
        text-align: center;
        color: #ffffff;
        font-size: 30px;
        font-weight: 700;
        text-shadow: 2px 2px 8px #000000;
        transform: scaleX(0);
    }
    .navbar .logo:hover:after{
        
        transform: scaleX(0);
        transform-origin: bottom left;
    }

    .navbar .logo a:hover{
        content: '';
        color: #ffffff;
        background-color:#ffffff00;
    }
    .navbar .logo a:hover:after{
        color: #ffffff;
        text-shadow: 1px 1px 4px #000000;
    }
}
*/
/*
.navbar .logo a:before{
    content:"MusicalInstru";
    position:absolute;
    color:#b5b5b5;
    font-size: 30px;
    font-weight: 700;
    width:0%;
    overflow:hidden;
    transition:all .8s ease;
  }
 
.navbar .logo a:hover::before{
    width: 100%;
}
*/

.navbar .logo a span{
    color: rgb(254, 182, 0);
}

.no-touch{
    .navbar .logo a span{
        color: rgb(254, 182, 0);
    }
    .navbar .logo a:hover span{
        -webkit-text-stroke: 0.7px rgb(255, 255, 255);
    }
    .navbar .logo a:hover{
        color:#000000;
        background-color:#ffffff;
        border-radius: 4px;
        transition:  all 0.3s ease-in;
        -webkit-text-stroke: 0.7px rgb(255, 255, 255);
    }
    .navbar .logo:hover:after{
    
        transform: scaleX(1);
        transform-origin: bottom left;
    }
}

.navbar .menu li{
    list-style: none;
    display: inline-block;
    padding: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover{
    color: rgb(254, 182, 0);
    text-shadow: 0 0 5px #000000,
                0 0 10px rgb(0, 0, 0),
                0 0 30px rgba(254, 182, 0, 0),
                0 0 40px rgba(254, 182, 0, 0);
}
.navbar.sticky .menu li a:hover{
    color: rgb(254, 182, 0);
}

/* menu btn styling */
.menu-btn{
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn{
    position: fixed;
    height: 42px;
    width: 42px;
    background: rgb(254, 182, 0);
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}
/* slider*/

  .slideshow {
    position: relative;
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
    min-height: 300px;
    background: none;
  }
  .slideshow__slide {
    visibility: hidden;
    transition: visibility 0s 1.7s;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: none;
  }
  .slideshow__slide.is-current {
    visibility: visible;
    transition-delay: 0s;
    background: none;
  }


  /*  burası yazıların kaplı olduğu  yer */
  .container {
    position: relative;
    height: 60%;
    width: 75%;
    top: 22vh;
    padding: 10px;
    background-color: #eb8d0900;
  }
  .background-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: right;
    background-size: cover;

  }
  .slideshow__slide-background-load-wrap {
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate3d(0, 100%, 0);
    overflow: hidden;
  }
  
  .is-loaded .slideshow__slide-background-load-wrap {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }
  
  .slideshow__slide.is-prev .slideshow__slide-background-parallax,
  .slideshow__slide.is-next .slideshow__slide-background-parallax {
    transform: none !important;
  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-background-parallax,
  .slideshow__slide.is-next-section .slideshow__slide-background-parallax {
    transform: none !important;
  }
  
  .slideshow__slide-background-load {
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate3d(0, -50%, 0);
  }
  .is-loaded .slideshow__slide-background-load {
    transform: translate3d(0, 0, 0);
  }
  
  .slideshow__slide-background-wrap {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
    transform: translate3d(0, 0, 0);
  }
  
  .slideshow__slide.is-prev .slideshow__slide-background-wrap {
    transform: translate3d(0, -100%, 0);
  }
  
  .slideshow__slide.is-next .slideshow__slide-background-wrap {
    transform: translate3d(0, 100%, 0);
  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-background-wrap {
    transform: translate3d(0, -100%, 0);
    transition: none;
  }
  
  .slideshow__slide.is-next-section .slideshow__slide-background-wrap {
    transform: translate3d(0, 100%, 0);
    transition: none;
  }
  
  .slideshow__slide-background {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
    transform: scale(1);
    overflow: hidden;
  }
  
  .slideshow__slide.is-prev .slideshow__slide-background, .slideshow__slide.is-next .slideshow__slide-background {
    transform: scale(1);
    transition-delay: 0s;
  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-background, .slideshow__slide.is-next-section .slideshow__slide-background {
    transform: scale(0.5);
    transition-delay: 0s;
    transition: none;
  }
  
  .slideshow__slide-image-wrap {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
    transform: translate3d(0, 0, 0);
  }
  
  .slideshow__slide.is-prev .slideshow__slide-image-wrap {
    transform: translate3d(0, 50%, 0);
  }
  
  .slideshow__slide-image {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
    transform: scale(1);
  }
  
  .slideshow__slide.is-prev .slideshow__slide-image, .slideshow__slide.is-next .slideshow__slide-image ,.slideshow__slide-caption-text {
    transform: scale(1.25);
    transition-delay: 0s;
   
  }
  .slideshow__slide.is-prev-section .slideshow__slide-image, .slideshow__slide.is-next-section .slideshow__slide-image {
    transform: scale(1.25);
    transition-delay: 0s;
    transition: none;
  }
  
  .slideshow__slide-image::before, .slideshow__slide-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.35;
  }
  
  .slideshow__slide-image::before {
    
    background-color: #1e1e22;
    
  }
  
  .slideshow__slide-image::after {

    background: linear-gradient(to bottom, transparent 0%, #1e1e22 100%);
  
  }
  
  .slideshow__slide.is-prev .slideshow_container,
  .slideshow__slide.is-next .slideshow_container {
    transform: none !important;
  }
  
  .slideshow__slide.is-prev-section .slideshow_container,
  .slideshow__slide.is-next-section .slideshow_container {
    transform: none !important;
  }
  
  .slideshow__slide-caption-text {
    z-index: 10000;
    position: relative;
    height: 100%;
    padding-top: 1vh;
    transition-property: opacity ,transform ;
    transition-duration: 1.8s, 1.8s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
    transform: translate3d(0, 0%, 0);
  }
  
  .slideshow__slide.is-prev .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0%, -100%, 0);
    opacity: 0;
  }
  
  .slideshow__slide.is-next .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0%, -100%, 0);
    opacity: 0;

  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-caption-text {
    
    transform: translate3d(0, 100%, 0);
    transition: none;
    
  }
  
  .slideshow__slide.is-next-section .slideshow__slide-caption-text {
    
    transform: translate3d(0, 100%, 0);
    transition: none;
    

  }

  /* bu kode sirasi gelsiginse slaytin gosterildi[i an 
  /*
  .slideshow__slide.is-max .slideshow__slide-caption-text{
    background-color: #00c00000;

  }
  */
  .is-loaded .slideshow__slide-caption-text {
    transform: translate3d(0, 0, 0);
    background-color: #74747400;
    opacity: 1;
  }
 
  
   /* burası 3 calısan kod */
  /*
   .slideshow__slide.is-prev .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0%, -100%, 0);
  }
  
  .slideshow__slide.is-next .slideshow__slide-caption-text {
    transform:scale(1) translate3d(-100%, 0%, 0);
  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-caption-text {
    transform: translate3d(0, 100%, 0);
    transition: none;
  }
  
  .slideshow__slide.is-next-section .slideshow__slide-caption-text {
    transform: translate3d(0, 100%, 0);
    transition: none;
  }
  */
  /* burası iknci calısan kod */
  /*
  
  .slideshow__slide.is-prev .slideshow__slide-caption-text {
    transform:scale(0.6) translate3d(0, 100%, 0);
  }
  
  .slideshow__slide.is-next .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0, 100%, 0);
  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-caption-text {
    transform: translate3d(0, -100%, 0);
    transition: none;
  }
  
  .slideshow__slide.is-next-section .slideshow__slide-caption-text {
    transform: translate3d(0, 100%, 0);
    transition: none;
  }
  */

  /*  burası calısan */
  /*
  .slideshow__slide.is-prev .slideshow__slide-caption-text {
    transform:scale(0.8)  translate3d(0%, 100%, 0);

  }
  
  .slideshow__slide.is-next .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0%, -100%,0);

  }
  
  .slideshow__slide.is-prev-section .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0%, 100%, 0);
    transition: none;
  }
  
  .slideshow__slide.is-next-section .slideshow__slide-caption-text {
    transform:scale(1) translate3d(0%, -100%, 0);
    transition: none;

  }
  .slideshow__slide.is-next .slideshow__slide-caption-title{
    color: #c00080;
  }
  
  .slideshow__slide.is-prev .slideshow__slide-caption-title{
     color: #00c0b3;
  }
  */

  
  /*
  .slideshow__slide.is-prev .slideshow__slide-caption-title{
    transform: translate3d(0%, 100%, 0);

  }
  .slideshow__slide.is-next .slideshow__slide-caption-title{
    transform: translate3d(0%, -100%, 0);

  }
 
  .slideshow__slide.is-prev-section .slideshow__slide-caption-title{
    transform: translate3d(0%, 100%, 0);

  }
  .slideshow__slide.is-next-section .slideshow__slide-caption-title{
    transform: translate3d(0%, -100%, 0);

  }
  */
  
  .slideshow__slide-caption {
    position: relative;
    height: 100%;
    transform: translate3d(0, 100%, 0);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  }
  .is-loaded .slideshow__slide-caption {
    transform: translate3d(0, 0, 0);
  }
  .slideshow__slide-caption-title {
    text-align: left;
    transition: all 0.8s;
    font-family: "Lexend Zetta", sans-serif;
    font-weight: 900;
    font-size: 45px;
    letter-spacing: 5px;
    text-indent: 70px;
    margin-top: 35px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-family: "Lexend Zetta", sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 5px;
    text-align: left;

  }
  .slideshow__slide-caption-text p{
    font-size: 18px;
    text-indent: 25px;
  }

  /* OLD */

 
  

  ::-moz-selection {
    background: #0084c0;
    color: #ffffff;
  }
  
  ::selection {
    background: #0084c0;
    color: #ffffff;
  }
  
  img, svg {
    max-width: 100%;
  }
  
  /*
  a, .o-link {
    color: #1a0dab;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  a:hover, .o-link:hover {
    color: #13097c;
  }
  
  a.-normal, .o-link.-normal {
    color: currentColor;
    text-decoration: none;
  }
  
  a.-normal:hover, .o-link.-normal:hover {
    text-decoration: underline;
  }
  
  a.-blue:hover, .o-link.-blue:hover {
    text-decoration: none;
    color: #0084c0;
  }
  
  a.-hover, .o-link.-hover {
    position: relative;
    text-decoration: none;
    color: #ffffff;
  }
  
  a.-hover::after, .o-link.-hover::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    left: 0;
    border-bottom: 1px solid;
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center left;
  }
  
  a.-hover:hover::after, .o-link.-hover:hover::after {
    transform: scaleX(1);
  }
 
  p {
    margin: 0;
  }
   */
  .o-wrap {
    overflow: hidden;
  }
  strong {
    font-weight: 700;
  }
  .js-parallax {
    transform: translateZ(0);
    will-change: transform;
  }
  

  /*   büyük yazının altındakı yazı*/
  
  
  
  .o-container {
    position: relative;
    margin: 0 auto;
    background-color: #c00080;
  }
 
  /* butonlar ıcın left rıght*/
  .left_right_button {
    position: absolute;
    width: 306px;
    height: initial;
    align-items: center;
    bottom: 0;
    background: none;
    background-color: #197ba900;
    z-index: 998;
    left: 50%;
    transform: translateX(-50%);

  }
  
  .js-slider-home-prev {
    width: 150px;
    height: 150px;
    overflow: visible;
    background: none;
    color: rgb(255, 255, 255);
    font: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  }
 .js-slider-home-next {
    width: 150px;
    height: 150px;
    overflow: visible;
    background: none;
    color: rgb(255, 255, 255);  
    font: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  }
  .js-slider-home-prev:hover {
    color: rgb(24, 24, 24);
    border: none;

  }
  .js-slider-home-next:hover{
    color: rgb(24, 24, 24);
    border:none;
  }
  .js-slider-home-prev:hover .o-button_label {
    background: none;
    font-size: 45px;
    border:none;
  }
  .js-slider-home-next:hover .o-button_label {
    background: none;
    font-size: 45px;
    border:none;

  }
  .o-button_label {
    z-index: 2;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    color: rgb(255, 255, 255);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-route-option=prev-section] .c-header-home_controls, body[data-route-option=prev-section] .c-header-home_buttons, body[data-route-option=next-section] .c-header-home_controls, body[data-route-option=next-section] .c-header-home_buttons {
    transform: translate3d(0, 0, 0);
  }

  .google-play-badge{
    width: 220px;
    margin-top: 50px;
    transition: all 0.9s ease;
    transition-delay: 1.8s;
    opacity: 1;
  }
  .slideshow__slide.is-next .google-play-badge{
    opacity: 0;
  }
  .slideshow__slide.is-prev .google-play-badge{
    opacity: 0;
  }
  .google-play-badge img{
    width: 100%;
    height: 100%;
  }
























/* css slider */
/*
.slider{
    height: calc(100vh - 100px);
    margin-top: 0px;
    position: relative;
    width: 100%;
    background-color: #000000;
}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .list .item::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.966) 40%, transparent);
}
.slider .list .item .content{
    position: absolute;
    left: 30%;
    top: 15%;
    width: 800px;
    max-width: 80%;
    z-index: 1;
    background-color: #FFA01B;
}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 10px;
}
.slider .list .item .content h2{
    color: #eee;
    font-size: 50px;
    margin: 0;
}
.slider .list .item .content a{
    padding: 5px;  
    color: #eee;

}
.slider .list .item .content p{
    padding: 5px;  
    color: #eee;
    margin: 10px 0 ;
}
.slider .list .item .content .contenta{
    width: 200px;
    margin: 20px ;
}
.slider .list .item.active{
    opacity: 1;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active a,
.slider .list .item.active p:nth-child(3){
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
}
.arrows{
    display: none;
    position: absolute;
    top: 15%;
    right: 50px;
    z-index: 100;
    background-color: aqua;
}
.arrows button{
    background-color: #eee5;
    border: none;
    font-family: monospace;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 5px;
    font-size: x-large;
    color: #000000;
    transition: .5s;
}
.arrows button:hover{
    background-color: #eee;
    color: black;
}
.thumbnail{
    position: absolute;
    bottom: 15%;
    z-index: 11;
    display: flex;
    gap: 25px;
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    overflow: hidden;
    justify-content: right;
    align-items: center;
    background-color: #de0909;
    padding-right: 15%;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 30px;
    height: 30px;
    filter: brightness(.5);
    transition: .5s;
    flex-shrink: 0;
    background-color: rgb(0, 0, 0);
    justify-content: center;
    border-radius: 50%;
    
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.thumbnail .item.active{
    filter: brightness(1.5);
    width: 90px;
    height: 90px;
    color: #eee;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 10%;
}
.thumbnail .item.active img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8%;
}
.thumbnail .item:hover {
    border: 2px solid rgb(255, 255, 255);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
    color: #c8c5c5;
    text-align: center;
    font-size: 12px;
}

*/

/* home section styling */

/*
.resim {
    display: flex;
    background: url("images/gg.jpg") no-repeat center;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
    z-index: -10; 
}
*/
.home{
    display: flex;
    background: url("images/gg.jpg") no-repeat center;
    height:calc(100vh + 100px);
    width: 100%;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}

.home .max-width {
    width: 100%;
    display: flex;
}
.home .max-width .row{
  margin-right: 0;
}
.home .home-content .text-1{
    font-size: 23px;
    margin-bottom: 40px;
}
.home .home-content .text-2{
    font-size: 65px;
    font-weight: 600;
    margin-left: -3px;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
}
.home .home-content .text-3{
    font-size: 27px;
    margin: 40px 0;
}
.home .home-content .text-3 span{
    color:  rgb(254, 182, 0);
    font-weight: 500;
    text-shadow: 0 0 1px #000000,
                0 0 5px rgb(0, 0, 0),
                0 0 10px rgba(254, 182, 0, 0),
                0 0 15px rgba(254, 182, 0, 0);

}
.home .home-content a{
    display: none;
    background: rgb(254, 182, 0);
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid rgb(117, 60, 2);
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color:  rgb(254, 182, 0);
    background: none;
}

/* about section styling */

.about .title {
    color: #fff;
    padding-top: 10px;
}
.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    width: 400px;
    aspect-ratio: 3/2;
    object-fit: fill;
    border-radius: 6px;

}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #fff;

}
.about .about-content .right .text span{
    color:  rgb(254, 182, 0);
}
.about .about-content .right p{
    text-align: justify;
    color: #fff;
    text-indent:25px;
    font-size: 15px;
    color: #b3b3b3;


}
.about .about-content .right a{
    display: inline-block;
    background: rgb(254, 182, 0);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: rgb(254, 182, 0);
    background: none;
}

/* services section styling */
.teams ,.about{
    color:#fff;
    background: #111;
}
.about .title::before,
.teams .title::before{
    background: #575757;
}
.teams .title{
    padding-top: 10px;

}

.services .title{
  color: #eee;
  padding-top: 10px;

}
.services {
  background-color: rgb(22, 22, 22);
  background: rgb(33, 33, 33);

}
.services .serv-content {
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,3fr));
  list-style: none;
  column-gap: 1rem;
  row-gap: 1rem;
  margin: 0;
  padding: 0;
}
.services .serv-content .card{
  display: flex;
  padding: 1rem;
  background: #222;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 6px 15px rgb(0, 0, 0);
  border: 1px solid rgb(254, 182, 0);

}
.services .serv-content .card:hover{
  background:  rgb(254, 182, 0);

}
.services .serv-content .card .box{
  transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
  transform: scale(1.05);

}
.services .serv-content .card i{
  font-size: 40px;
  color:  rgb(254, 182, 0);
}
.services .serv-content .card:hover i{
  color: #fff;
}
.services .serv-content .card .text{
  font-size: 23px;
  font-weight: 500;
  margin: 10px 0 7px 0;
  color: white;
}
.services .serv-content .card  p{
  padding: 20px 2px;
  font-size: 14px;
  font-weight: 100;
  color: white;
}
/*
.services .title{
    color: #eee;
    padding-top: 10px;

}
.services {
    background-color: rgb(22, 22, 22);
    background: rgb(33, 33, 33);

}
.services .serv-content .card{
    width: calc(33% - 20px);
    height: 0;
    padding-bottom: calc(33% + 15px);
    max-height: 500px;
    min-height: 250px;
    background: #222;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 6px 15px rgb(0, 0, 0);
    border: 1px solid rgb(254, 182, 0);
}
.services .serv-content .card:hover{
    background:  rgb(254, 182, 0);
}
.services .serv-content .card .box{
    padding: 30px 10px;
    transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
    transform: scale(1.05);
}
.services .serv-content .card i{
    font-size: 40px;
    color:  rgb(254, 182, 0);
    transition: color 0.3s ease;
}
.services .serv-content .card:hover i{
    color: #fff;
}
.services .serv-content .card .text{
    font-size: 23px;
    font-weight: 500;
    margin: 10px 0 7px 0;
    color: white;
}
.services .serv-content .card  p{
    padding: 20px 2px;
    font-size: 14px;
    font-weight: 100;
    color: white;

}
*/
/* teams section styling */

.teams .carousel .card{
    background: #222;
    border-radius: 6px;
    padding: 25px 35px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover{
    /*
    background: crimson;
    */
    background-color: #FBAB7E;
    background-image: linear-gradient(0deg, #eb8d09 0%, #F7CE68 50%, #f7ca71 100%);
    
}
.teams .carousel .card .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover  .box{
    transform: scale(1.05);

}
.teams .carousel .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
.teams .carousel .card .button{
    color: rgb(201, 168, 3);
    font-size: 20px;
    font-weight: 300;
    margin: 10px 0 7px 0;
    border: 3px solid red;
    border-radius: 10px;
    padding: 10px 10px;
    background-color: rgb(201, 168, 3);;
}
.teams .carousel .card .button:hover{
    color: rgb(201, 168, 3);
    font-size: 20px;
    font-weight: 300;
    margin: 10px 0 7px 0;
    border: 3px solid red;
    border-radius: 10px;
    padding: 10px 10px;
    background-color: rgb(3, 105, 201);;
}
.teams .carousel .card p{
    color: gray;
    font-size: 20px;
    font-weight: 300;
    margin: 10px 0 7px 0;
}
.teams .carousel .card .box .resimcard{
    height: 150px;
    width: 150px;
    object-fit: cover;
    /*
    border-radius: 50%;
    border: 5px solid rgb(23, 20, 220);

    */
    border-radius: 20%;
    border: 2px solid  rgb(254, 182, 0);;

    box-shadow: 0px 4px 6px 4px rgb(0 0 0 / 50%);
    transition: all 0.3s ease;
}
.teams .carousel .card:hover img{
    border-color: #fff;
}
.teams .carousel .card .box .gp {
    width: 210px;
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid rgb(254, 182, 0)!important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: rgb(254, 182, 0)!important;
}

/* contact section styling */
/*
.contact .title::after{
    content: "get in touch";
}
*/
.contact .title{
    color:#fff;
    padding-top: 10px;

}
.contact {
    background: rgb(33, 33, 33);

}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #b3b3b3;

}
.contact .contact-content .left p{
    text-align: justify;
    color: gray;
    font-size: 17px;

}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i{
    font-size: 20px;
    color: rgb(254, 182, 0);
}
.contact .contact-content .info .head{
    font-weight: 500;
    color: #b1b0b0;

}
.contact .contact-content .info .sub-title{
    color: gray;
    font-size: 15px;

}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
  padding-top: 10px;
  resize: none;
}
.contact .right form .button-area{
  display: flex;
  align-items: center;
}
.right form .button-area button{
  color: #fff;
  display: block;
  width: 160px!important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: crimson;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}
/*
.right form .button-area button:hover{
  color: crimson;
  background: none;
}
*/
.right form .button-area button:active{
    color: #fff;
    display: block;
    width: 160px!important;
    height: 45px;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    flex-wrap: nowrap;
    border: 2px solid crimson;
    color: crimson;
    background: none;
}
/* footer section styling */
footer{
    background: #111;
    padding: 15px 23px;
    color: #fff;
    text-align: center;
}
footer span{
  font-size: 15px;
}
footer span a{
    color: rgb(255, 255, 255);
    text-decoration: none;
}
footer span a:hover{
    text-decoration: underline;
    
}
footer .row{
    width:100%;
    margin:1% 0%;
    padding:0.6% 0%;
    color:gray;
    font-size:0.8em;
    }    
footer .row a{
    text-decoration:none;
    color:gray;
    transition:0.5s;
    }    
footer .row a:hover{
    color:#fff;
    }    
footer .row ul{
    width:100%;
    }    
footer .row ul li{
    display:inline-block;
    margin:0px 30px;
    } 
footer .row a i{
    font-size:2em;
    margin:0% 1%;
    }

/* responsive media query start */

@media (max-width: 2560px) {
    .slider .list .item .content{
        position: absolute;
        left: 45%;
        top: 15%;
        width: 800px;
        max-width: 80%;
        z-index: 1;
        transform: translateX(-50%);
    }
   
    
}
@media (max-width: 1870px) {
    .slider .list .item .content{
        position: absolute;
        left: 42%;
        top: 15%;
        width: 800px;
        max-width: 80%;
        z-index: 1;
        transform: translateX(-50%);
    }
    .navbar {
        background-color: rgb(18, 18, 18);
    }
    .thumbnail{
        padding-right: 10%;
    }
}
@media (max-width: 1440px) and (orientation:landscape) {
   
    .slider .list .item .content{
        position: absolute;
        left: 40%;
        top: 15%;
        width: 800px;
        max-width: 80%;
        z-index: 1;
        transform: translateX(-50%);
    }
    .about .about-content .left img{
      width: 380px;
      aspect-ratio: 3/2;
      object-fit: fill;
      border-radius: 6px;
    }
}

@media (max-width: 1104px){

.navbar .menu li{
  list-style: none;
  display: inline-block;
  padding: 0px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.about .about-content .left img{
  width: 300px;
  aspect-ratio: 3/2;
  object-fit: fill;
  border-radius: 6px;

}
.panel{
  padding: 100px 0;
}
}
@media (max-width: 991px){
 
.navbar .menu li{
  list-style: none;
  display: inline-block;
  padding: 0px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.navbar .menu li a{
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 15px;
  transition: color 0.3s ease;
}
}

@media (max-width: 870px){
.max-width{
  padding: 0 20px;
  margin: auto;
}
.navbar .menu li a{
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 8px;
  transition: color 0.3s ease;
}
.about .about-content .column{
  width: 100%;
}
.about .about-content .left{
  display: flex;
  justify-content: center;
  margin: 0 auto 60px;
}
.about .about-content .right{
  flex: 100%;
}
.skills .skills-content .column,
.contact .contact-content .column{
  width: 100%;
  margin-bottom: 35px;
}

}
@media (max-width: 690px){
.menu-btn{
  display: block;
  z-index: 999;
}
.menu-btn i.active:before{
  content: "\f00d";
}
.navbar .menu{
  position: fixed;
  height: 100vh;
  width: 60%;
  left: -100%;
  top: 100px;
  background: rgb(22, 22, 22);
  text-align: center;
  padding-top: 80px;
  transition: all .3s ease;
}
.navbar .menu.active{
  left: 0px;
}
.navbar.sticky .menu{
  top: 70px;
  background-color: rgb(33, 33, 33);
}

.menubg.menubgac{
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 998;
  backdrop-filter: blur(5px);
}
.menubg{
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 998;
}


.home{
  display: flex;
  background: url("images/gg.jpg") no-repeat center;
  height:calc(100vh + 100px);
  width: 100%;
  color: #fff;
  min-height: 500px;
  background-size: cover;
  background-attachment: scroll;
  font-family: 'Ubuntu', sans-serif;
}

/*  deneme  */
@keyframes fadeIn {
  0% {
    transform: translateX(-500%);
  }
  100% {
    transform: translateX(0%);
  }
}
.navbar .menu li {
  display: block;
  transform: translateX(-100%);
  opacity: 0;
}
.navbar .menu li.active{
  transition: .3s ease ;
  transform: translateX(0%);
  transition-delay: calc(.15s * var(--i));
  opacity: 1;
}
.navbar .menu li a {
  display: inline-block;
  margin: 20px 0;
  font-size: 25px;
  color: #ffffff;
}
.no-scroll { 
  overflow: hidden;
}
}
@media (max-device-width: 1104px) and (orientation:portrait) {
    .about .about-content .left img{
        height: 350px;
        width: 350px;
    }
 
    .navbar .menu li a{
        margin-left: 10px;
    }
   /*  slide  */
   .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 45px;
    letter-spacing: 0px;
    text-indent: 30px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-size: 20px;
    font-weight:5px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 20px;
    text-indent: 30px;
  }
  .left_right_button {
    width: 206px;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 100px;
    height: 100px;
  }
  .google-play-badge{
    width: 250px;
    margin-top: 50px;
  }
  /* slide son */ 

    /*
    .slider .list .item .content{
        position: absolute;
        left: 45%;
        top: 15%;
        width: 800px;
        max-width: 80%;
        z-index: 1;
        transform: translateX(-50%);
    }
    */
    
    /*
    .services .serv-content .card{
        width: calc(33% - 20px);
        height: 0;
        padding-bottom: calc(40% - 20px);
        background: #222;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0px 6px 15px rgb(0, 0, 0);
        border: 1px solid rgb(254, 182, 0);
    }
    */
}


@media (max-device-width: 991px) and (orientation:portrait) {
 
    .max-width{
        padding: 0 50px;
    }
    .navbar .menu li{
        padding: 10px;
    }
    .navbar .menu li a{
        margin-left: 0;
    }
        /*  slide  */
 .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 48px;
    letter-spacing: 0px;
    text-indent: 10px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-size: 20px;
    font-weight:5px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 20px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 206px;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 100px;
    height: 100px;
  }
  .google-play-badge{
    width: 220px;
    margin-top: 50px;
  }
  /* slide son */ 
}


@media (max-device-width: 947px)  and (orientation:portrait){
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 60%;
        left: -100%;
        top: 100px;
        background: rgb(22, 22, 22);
        text-align: center;
        padding-top: 80px;
        transition: all .3s ease;
    }
    .navbar .menu.active{
        left: 0px;
    }
    .navbar.sticky .menu{
        top: 70px;
        background-color: rgb(33, 33, 33);
    }
    /*
    .navbar.sticky .menu{
        top: 70px;
    }
    .navbar.sticky , .home{
    height: 100vh;
    }
    */
    /* animasyon menu */

    
    .menubg.menubgac{
        display: block;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 998;
        backdrop-filter: blur(5px);
    }
    .menubg{
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 998;
    }


    .home{
        display: flex;
        background: url("images/gg.jpg") no-repeat center;
        height:calc(100vh + 100px);
        width: 100%;
        color: #fff;
        min-height: 500px;
        background-size: cover;
        background-attachment: scroll;
        font-family: 'Ubuntu', sans-serif;
    }
    
    /*
      .navbar .menu li {
        display: block;
       

      }
      
      .navbar .menu li.active a{
        opacity: 0;

        animation: fadeIn 2.5s linear;

      }
      @keyframes fadeIn {
        0% {
            opacity: 0;
          transform: translateX(-100%);
        }
        100% {
            opacity: 1;
          transform: translateX(0%);
        }
      }


    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;  
        transform: translateX(0%);
    }
    .navbar .menu li a:nth-child(1) {
        animation-delay: 0.5s; 
      }
      
      .navbar .menu li a:nth-child(2) {
        animation-delay: 1s;
      }
      
      .navbar .menu li a:nth-child(3) {
        animation-delay: 1.5s;
      }
      
      .navbar .menu li a:nth-child(4) {
        animation-delay: 2s; 
      }
      
      .navbar .menu li a:nth-child(5) {
        animation-delay: 2.5s; 
      }
      */

      /*  deneme  */
      @keyframes fadeIn {
        0% {
          transform: translateX(-500%);
        }
        100% {
          transform: translateX(0%);
        }
      }
      .navbar .menu li {
        display: block;
        transform: translateX(-100%);
        opacity: 0;
      }
      .navbar .menu li.active{
        transition: .3s ease ;
        transform: translateX(0%);
        transition-delay: calc(.15s * var(--i));
        opacity: 1;
      }
      .navbar .menu li a {
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
        color: #ffffff;
      }
      .no-scroll { 
        overflow: hidden;
     }
      /*
      .no-scroll{
        overflow: hidden;

      }
      */

      /*
      .navbar .menu li {
        display: block;
      }
  
      .navbar .menu li a {
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
        color: #ffffff;
        transform: translateX(100%);
        opacity: 0;

      }
    
      .navbar .menu li.active a{
        transition: .3s ease ;
        transform: translateX(0%);
        transition-delay: calc(.15s * var(--i));
        opacity: 1;
      }
      */
    
    /*
      .slider .list .item .content .contenta img{
        width: 100%;
        height: 100%;
        object-fit: fill;
        margin: 0px ;
    }
      .thumbnail{
        justify-content: center;
        padding-right: 0%;

    }
      
      /*    */
    
               /*  slide  */
 .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 45px;
    letter-spacing: 0px;
    text-indent: 10px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-size: 20px;
    font-weight:5px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 20px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 206px;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 100px;
    height: 100px;
  }
  .google-play-badge{
    width: 220px;
    margin-top: 50px;
  }
  /* slide son */ 
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width{
        max-width: 930px;
    }
    
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    
    .about .about-content .right{
        flex: 100%;
    }
    /*
    .services .serv-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;

        width: calc(50% - 20px);
        height: 0;
        padding-bottom: calc(50% - 20px);
    }
    .services .serv-content .card i{
        font-size: 50px;
        color:  rgb(254, 182, 0);
        transition: color 0.3s ease;
    }
    .services .serv-content .card .text{
        font-size: 23px;
        font-weight: 500;
        margin: 10px 0 17px 0;
        color: white;
    }
    .services .serv-content .card  p{
        font-size: 14px;
        font-weight: 100;
        padding: 10px;
        color: white;
    
    }
    */
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
}


@media (max-device-width: 831px)  and (orientation:portrait){
         /*  slide  */
 .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 40px;
    letter-spacing: 0px;
    text-indent: 0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-size: 18px;
    font-weight:5px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 18px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 206px;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 100px;
    height: 100px;
  }
  .google-play-badge{
    width: 220px;
    margin-top: 50px;
  }
  /* slide son */ 
  /*
    .services .serv-content .card .box{
        padding: 20px 10px;
        transition: all 0.3s ease;
    }
    .services .serv-content .card i{
        font-size: 40px;
        color:  rgb(254, 182, 0);
        transition: color 0.3s ease;
    }
    .services .serv-content .card .text{
        font-size: 21px;
        font-weight: 500;
        margin: 7px 0 7px 0;

        color: white;
    }
    .services .serv-content .card  p{
        font-size: 13px;
        font-weight: 100;
        padding: 10px;
        color: white;
    
    }
    */
}
@media (max-device-width: 690px) and (orientation:portrait){
 
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 100px;
        background: #111;
        text-align: center;
        padding-top: 56px;
        transition: all .3s ease;
        overflow-y: scroll;

    }
    .max-width{
        padding: 0 23px;
    }

      /*  slide  */
 .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 38px;
    letter-spacing: 0px;
    text-indent: 0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-size: 15px;
    font-weight:5px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 17px;
    text-indent: 15px;

  }
  .left_right_button {
    width: 206px;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 100px;
    height: 100px;
  }
  .google-play-badge{
    width: 220px;
    margin-top: 50px;
  }
  /* slide son */ 

    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content{
        align-items: center;
        padding: 0px 35px;
    }
    /*
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 0;
        padding-bottom: calc(55% - 20px);
    }
    */
}


@media (max-device-width: 596px) and (orientation:portrait) {

     /*  slide  */
 .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 35px;
    letter-spacing: 0px;
    text-indent: 0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-weight:5px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 15px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 206px;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 100px;
    height: 100px;
  }
  .google-play-badge{
    width: 220px;
    margin-top: 50px;
  }
  /* slide son */ 
  /*
    .services .serv-content{
        align-items: center;
        padding: 0px 25px;
    }
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 0;
        padding-bottom: calc(65% - 20px);
    }
    */
}

@media (max-device-width: 500px) and (orientation:portrait) {
    
    
    section{
        padding: 56px 0;
    }
    
    
    .max-width{
        max-width: 490px;
        padding: 0 20px;
        margin: auto;
    }
    .navbar{
        position: fixed;
        height: 70px;
        width: 100%;
        z-index: 999;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
        background-color: rgb(22, 22, 22);
    }
    /*
    .navbar.sticky{
        height: 70px;
    }
    */
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 70px;
        background: #111;
        text-align: center;
        padding-top: 56px;
        transition: all .3s ease;
        overflow-y: scroll;

    }
    .navbar.sticky .menu{
        top: 70px;
    }
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 27px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
    }
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email{
        margin: 0;
    }
    .sub-title{
        font-size: 18px;
    }
    .right form .error-box{
       width: 150px;
    }
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
    .navbar .logo a{
        font-size: 23px;
    }
    .navbar .logo {
      width: 0;
      height: 35px;
  }
    /*
    .slider .list .item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% 0;
    }
    .thumbnail{
        justify-content: center;
        padding-right: 0%;
        bottom: 48px;
    }
    */
 /*  slide  */
 .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 35px;
    letter-spacing: 0px;
    text-indent:0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 5px;
    text-align: left;
    margin-bottom: 35px;

  }
  .slideshow__slide-caption-text p{
    font-size: 17px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 166px;
    height: 80px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 80px;
    height: 80px;
  }
  .google-play-badge{
    width: 200px;
    margin-top: 50px;
  }
  /* slide son */ 
  /*
    .services .serv-content{
        align-items: center;
        padding: 0px 25px;
    }
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 0;
        padding-bottom: calc(75% - 20px);
    }
   */
}


@media (max-device-width: 450px) and (orientation:portrait) {    
    
    /*
    .slider .list .item .content h2{
        font-size: 45px;
        margin: 0;
    }
    .slider .list .item .content p{
        padding: 5px;  
        color: #eee;
        margin: 0px 5px ;
        font-size: 15px;
    }
    .slider .list .item .content .contenta {
        width: 70%;
        margin-top: 10px;
        background-color: blue;
    }
    .slider .list .item .content{
        position: absolute;
        left: 45%;
        top: 10%;
        width: 800px;
        height: 800px;
        max-width: 80%;
        z-index: 1;
        transform: translateX(-50%);
    }
    .thumbnail{
        justify-content: center;
        padding-right: 0%;
        bottom: 0;
    }
    */

       /*  slide  */
   .container {
    height: 60%;
    width: 100%;
    top: 20vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 33px;
    letter-spacing: 0px;
    text-indent: 0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 5px;
    text-align: left;

  }
  .slideshow__slide-caption-text p{
    font-size: 16px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 166px;
    height: 80px;
    bottom: 10vh;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 80px;
    height: 80px;
  }
  .google-play-badge{
    width: 200px;
    margin-top: 50px;
  }
  /* slide son */ 
  /*
    .services .serv-content{
        align-items: center;
        padding: 0px 5px;
    }
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 0;
        padding-bottom: calc(90% - 20px);
    }
    */
}
@media (max-device-width: 361px) and (orientation:portrait) {

  .navbar .menu li a{
  display: inline-block;
  margin: 20px 0;
  font-size: 18px;
  }
  /*
    .slider .list .item .content h2{
        font-size: 40px;
        margin: 0;
    }
    .slider .list .item .content p{
        padding: 5px;  
        color: #eee;
        margin: 0px 0 ;
        font-size: 15px;
    }
    .slider .list .item .content .contenta {
        width: 100%;
        margin: 0px ;
        background-color: blue;
    }
   
    .slider .list .item .content{
        position: absolute;
        left: 45%;
        top: 10%;
        width: 800px;
        height: 800px;
        max-width: 80%;
        z-index: 1;
        transform: translateX(-50%);
    }
    .thumbnail{
        justify-content: center;
        padding-right: 0%;
        bottom: 0;
    }
    */
   
   /*  slide  */
   .container {
    height: 60%;
    width: 100%;
    top: 25vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 30px;
    letter-spacing: 0px;
    text-indent: 0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 5px;
    text-align: left;

  }
  .slideshow__slide-caption-text p{
    font-size: 14px;
    text-indent: 15px;
  }
  .left_right_button {
    width: 166px;
    height: 80px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 995;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .js-slider-home-prev , .js-slider-home-next {
    width: 80px;
    height: 80px;
  }
 
  /* slide son */ 
    .about .about-content .left img{
        height: 200px;
        width: 300px;
        object-fit: fill;
        border-radius: 6px;
    
    }
    /*
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 0;
        padding-bottom: 100%;
    }
    */
   
}
@media (max-device-width: 320px) and (orientation:portrait) {
   
  /*  slide  */
  .container {
    height: 60%;
    width: 100%;
    top: 25vh;
    padding: 5px;
  }
  .slideshow__slide-caption-title {
    font-size: 26px;
    letter-spacing: 0px;
    text-indent: 0px;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .slideshow__slide-caption-text .ust_baslik{
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-align: left;

  }
  .slideshow__slide-caption-text p{
    font-size: 12px;
    text-indent: 15px;
  }
  
  /* slide son */

    /*
    .thumbnail{
        justify-content: center;
        padding-right: 0%;
        bottom: 0;

    }
    .thumbnail .item{
        width: 20px;
        height: 20px;
        filter: brightness(.5);
        transition: .5s;
        flex-shrink: 0;
        background-color: rgb(0, 0, 0);
        justify-content: center;
        border-radius: 50%;
    }
    .thumbnail .item.active{
        width: 60px;
        height: 60px;
    }
    */
    .home .home-content .text-2{
        font-size: 45px;
    }
    /*
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 350px;
    }
    */
    .about .about-content .left img{
        height: 150px;
        width: 250px;
        object-fit: fill;
        border-radius: 6px;
    
    }
    .contact .contact-content .info .sub-title{
        color: gray;
        font-size: 10px;
    
    }

}
@media (max-device-width: 280px) and (orientation:portrait) {
    .navbar .logo a{
        font-size: 18px;
    }
    .navbar .logo {
      width: 0;
      height: 25px;
  }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 15px;
    }
    .menu-btn i{
        font-size: 18px;
    }

    /*
    .thumbnail{
        justify-content: center;
        padding-right: 0%;
        bottom: 0;

    }
    .thumbnail .item{
        width: 20px;
        height: 20px;
        filter: brightness(.5);
        transition: .5s;
        flex-shrink: 0;
        background-color: rgb(0, 0, 0);
        justify-content: center;
        border-radius: 50%;
    }
    
    .thumbnail .item.active{
        width: 60px;
        height: 60px;
    }
    */
  
    /*  slide  */
    .container {
        height: 60%;
        width: 100%;
        top: 25vh;
        padding: 5px;
      }
      .slideshow__slide-caption-title {
        font-size: 25px;
        letter-spacing: 0px;
        text-indent: 0px;
        margin-top: 15px;
        margin-bottom: 40px;
      }
      .slideshow__slide-caption-text .ust_baslik{
        font-weight: 600;
        font-size: 10px;
        letter-spacing: 5px;
        text-align: left;
    
      }
      .slideshow__slide-caption-text p{
        font-size: 12px;
        text-indent: 15px;
      }
     
      /* slide son */
    .home .home-content .text-1{
        font-size: 12px;
    }
    .home .home-content .text-2{
        font-size: 34px;
    }
    .home .home-content .text-3{
        font-size: 18px;
    }
    .home .home-content a{
        font-size: 2px;
    }
    .about .about-content .left img{
        height: 100px;
        width: 200px;
        object-fit: fill;
        border-radius: 6px;
    
    }
    /*
    .services .serv-content .card{
        width: 100%;
        margin-bottom: 20px;
        height: 350px;
    }
    */
    .contact .contact-content .text{
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #b3b3b3;
    
    }
    .contact .contact-content .left p{
        text-align: justify;
        color: gray;
        font-size: 16px;
    
    }
    .contact .contact-content .left .icons{
        margin: 5px 0;
    }
    .contact .contact-content .row{
        display: flex;
        height: 65px;
        align-items: center;
    }
    .contact .contact-content .row .info{
        margin-left: 30px;
    }
    .contact .contact-content .row i{
        font-size: 17px;
        color: rgb(254, 182, 0);
    }
    .contact .contact-content .info .head{
        font-weight: 500;
        color: #b1b0b0;
    
    }
    .contact .contact-content .info .sub-title{
        color: gray;
        font-size: 12px;
    
    }
}


/*   landscape  */

@media (max-device-width: 947px) and (max-device-height: 395px) and (orientation:landscape) {
  .navbar{
      height: 56px;
  }
  .menu-btn{
    display: block;
    z-index: 999;
}
.menu-btn i.active:before{
    content: "\f00d";
}
.navbar .menu{
    position: fixed;
    height: calc(100dvh - 56px);
    width: 60%;
    left: -100%;
    top: 56px;
    background: rgb(22, 22, 22);
    text-align: center;
    padding-top: 10px;
    transition: all .3s ease;
    border-right: 2px solid rgb(65, 65, 65);
    scroll-margin-bottom: 150px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.navbar .menu.active{
    left: 0px;
}
.navbar.sticky .menu{
    top: 56px;
    background-color: rgb(33, 33, 33);
}
.navbar.sticky{
  height: 56px;
  background: rgb(33, 33, 33);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.8);
}
.navbar .logo a{
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  padding: 0 10px;
  text-shadow: 1px 1px 4px #000000;
}

.no-scroll { 
  overflow-y: hidden;
}

.menubg.menubgac{
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 998;
    backdrop-filter: blur(5px);

}
.menubg{
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 998;
}


.home{
    display: flex;
    background: url("images/gg.jpg") no-repeat center;
    height:calc(100vh + 100px);
    width: 100%;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: scroll;
    font-family: 'Ubuntu', sans-serif;
}
  .navbar .menu li {
    display: block;
    transform: translateX(-100%);
    opacity: 0;
  }
  .navbar .menu li.active{
    transition: .3s ease ;
    transform: translateX(0%);
    transition-delay: calc(.15s * var(--i));
    opacity: 1;
  }
  .navbar .menu li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 20px;
    color: #ffffff;
  }
 

           /*  slide  */
.container {
height: 60%;
width: 100%;
top: 25vh;
padding: 5px;
}
.slideshow__slide-caption-title {
font-size: 35px;
letter-spacing: 0px;
text-indent: 30px;
margin-top: 5px;
margin-bottom: 10px;
}
.slideshow__slide-caption-text .ust_baslik{
font-size: 18px;
font-weight:5px;
letter-spacing: 5px;
text-align: left;
margin-bottom: 5px;

}
.slideshow__slide-caption-text p{
font-size: 15px;
text-indent: 15px;
}
.left_right_button {
width: 206px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
z-index: 995;
left: 80%;
transform: translateX(-50%);
}

.js-slider-home-prev , .js-slider-home-next {
width: 100px;
height: 100px;
}
.google-play-badge{
width: 180px;
margin-top: 15px;
}
/* slide son */ 
.home .home-content .text-2{
    font-size: 55px;
}
.home .home-content .text-3{
    font-size: 30px;
}
.home .home-content a{
    font-size: 20px;
    padding: 10px 30px;
}
.max-width{
    max-width: 930px;
}
.about .about-content .left img{
  height: 200px;
  width: 300px;
  object-fit: fill;
  border-radius: 6px;

}
.about .about-content .column{
    width: 100%;
}
.about .about-content .left{
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
}
.about .about-content .right{
    flex: 100%;
}
/*
.services .serv-content .card{
    margin-bottom: 20px;
    width: calc(33% - 10px);
   
}
.services .serv-content .card i{
    font-size: 5vmin;
    color:  rgb(254, 182, 0);
    transition: color 0.3s ease;
}
.services .serv-content .card .text{
    font-size: 4vmin;
    font-weight: 500;
    margin: 5px 0 7px 0;
    color: white;
}
.services .serv-content .card  p{
    font-size: 2.2vmin;
    font-weight: 100;
    padding: 10px;
    color: white;

}

*/
.skills .skills-content .column,
.contact .contact-content .column{
    width: 100%;
    margin-bottom: 35px;
}

}
@media (max-device-width: 947px) and (min-device-height:395px) and (orientation:landscape) {
  .navbar{
      height: 70px;
  }
  .menu-btn{
    display: block;
    z-index: 999;
}
.menu-btn i.active:before{
    content: "\f00d";
}
.navbar .menu{
  position: fixed;
  height: calc(100dvh - 70px);
  width: 60%;
  left: -100%;
  top: 70px;
  background: rgb(22, 22, 22);
  text-align: center;
  padding-top: 10px;
  transition: all .3s ease;
  border-right: 2px solid rgb(65, 65, 65);
  scroll-margin-bottom: 150px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
}
.navbar .menu.active{
    left: 0px;
}
.navbar.sticky .menu{
    top: 70px;
    background-color: rgb(33, 33, 33);
}

.menubg.menubgac{
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 998;
    backdrop-filter: blur(5px);
}
.menubg{
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 998;
}


.home{
    display: flex;
    background: url("images/gg.jpg") no-repeat center;
    height:calc(100vh + 100px);
    width: 100%;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: scroll;
    font-family: 'Ubuntu', sans-serif;
}
  .navbar .menu li {
    display: block;
    transform: translateX(-100%);
    opacity: 0;
  }
  .navbar .menu li.active{
    transition: .3s ease ;
    transform: translateX(0%);
    transition-delay: calc(.15s * var(--i));
    opacity: 1;
  }
  .navbar .menu li a {
    display: inline-block;
    margin: 10px 0;
    font-size: 20px;
    color: #ffffff;
  }
  .no-scroll { 
    overflow: hidden;
 }

           /*  slide  */
.container {
height: 60%;
width: 100%;
top: 20vh;
padding: 5px;
}
.slideshow__slide-caption-title {
font-size: 35px;
letter-spacing: 0px;
text-indent: 30px;
margin-top: 15px;
margin-bottom: 20px;
}
.slideshow__slide-caption-text .ust_baslik{
font-size: 20px;
font-weight:5px;
letter-spacing: 5px;
text-align: left;
margin-bottom: 5px;

}
.slideshow__slide-caption-text p{
font-size: 17px;
text-indent: 15px;
}
.left_right_button {
width: 206px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
z-index: 995;
left: 80%;
transform: translateX(-50%);
}

.js-slider-home-prev , .js-slider-home-next {
width: 100px;
height: 100px;
}
.google-play-badge{
width: 180px;
margin-top: 25px;
}
/* slide son */ 
.home .home-content .text-2{
    font-size: 55px;
}
.home .home-content .text-3{
    font-size: 30px;
}
.home .home-content a{
    font-size: 20px;
    padding: 10px 30px;
}
.max-width{
    max-width: 930px;
}
.about .about-content .left img{
  height: 200px;
  width: 300px;
  object-fit: fill;
  border-radius: 6px;

}
.about .about-content .column{
    width: 100%;
}
.about .about-content .left{
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
}
.about .about-content .right{
    flex: 100%;
}
/*
.services .serv-content .card{
    margin-bottom: 20px;
    width: calc(33% - 10px);
   
}
.services .serv-content .card i{
    font-size: 2vw;
    color:  rgb(254, 182, 0);
    transition: color 0.3s ease;
}
.services .serv-content .card .text{
    font-size: 1.8vw;
    font-weight: 500;
    margin: 5px 0 7px 0;
    color: white;
}
.services .serv-content .card  p{
    font-size: 1.2vw;
    font-weight: 100;
    padding: 10px;
    color: white;

}
*/
.skills .skills-content .column,
.contact .contact-content .column{
    width: 100%;
    margin-bottom: 35px;
}

}

/*
@media (min-width: 947px) and (max-height: 395px) and (orientation:landscape) {
  .navbar{
      height: 70px;
      background-color: rgba(70, 129, 77, 0.999);
  }
.navbar.sticky .menu{
    top: 70px;
    background-color: rgb(33, 33, 33);
}
.navbar .menu li{
  padding: 10px;
}
.navbar .menu li a{
  margin-left: 0;
}
.home{
    display: flex;
    background: url("images/gg.jpg") no-repeat center;
    height:calc(100vh + 100px);
    width: 100%;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: scroll;
    font-family: 'Ubuntu', sans-serif;
}


.container {
height: 60%;
width: 100%;
top: 25vh;
padding: 5px;
}
.slideshow__slide-caption-title {
font-size: 35px;
letter-spacing: 0px;
text-indent: 30px;
margin-top: 5px;
margin-bottom: 10px;
}
.slideshow__slide-caption-text .ust_baslik{
font-size: 18px;
font-weight:5px;
letter-spacing: 5px;
text-align: left;
margin-bottom: 5px;

}
.slideshow__slide-caption-text p{
font-size: 15px;
text-indent: 15px;
}
.left_right_button {
width: 206px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
z-index: 995;
left: 80%;
transform: translateX(-50%);
}

.js-slider-home-prev , .js-slider-home-next {
width: 100px;
height: 100px;
}
.google-play-badge{
width: 180px;
margin-top: 15px;
}
.home .home-content .text-2{
    font-size: 55px;
}
.home .home-content .text-3{
    font-size: 30px;
}
.home .home-content a{
    font-size: 20px;
    padding: 10px 30px;
}
.max-width{
    max-width: 930px;
}
.about .about-content .left img{
  height: 200px;
  width: 300px;
  object-fit: fill;
  border-radius: 6px;

}
.about .about-content .column{
    width: 100%;
}
.about .about-content .left{
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
}
.about .about-content .right{
    flex: 100%;
}
.services .serv-content .card{
    width: calc(50% - 10px);
    margin-bottom: 20px;

    width: calc(50% - 20px);
    height: 0;
    padding-bottom: calc(50% - 20px);
}
.services .serv-content .card i{
    font-size: 50px;
    color:  rgb(254, 182, 0);
    transition: color 0.3s ease;
}
.services .serv-content .card .text{
    font-size: 23px;
    font-weight: 500;
    margin: 10px 0 17px 0;
    color: white;
}
.services .serv-content .card  p{
    font-size: 14px;
    font-weight: 100;
    padding: 10px;
    color: white;

}
.skills .skills-content .column,
.contact .contact-content .column{
    width: 100%;
    margin-bottom: 35px;
}

}

*/





/*
@media (max-width: 690px) and (orientation:landscape){
    .navbar{
        background-color: darkviolet;
    }
    .max-width{
        padding: 0 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content .card{
        width: 100%;
    }
}

@media (max-width: 500px) and (orientation:landscape) {
  section{
      padding: 56px 0;
  }
  .max-width{
      max-width: 490px;
      padding: 0 20px;
      margin: auto;
  }
  .navbar{
      position: fixed;
      height: 56px;
      width: 100%;
      z-index: 999;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s ease;
      background-color: rgb(22, 22, 22);
  
  }
  .navbar.sticky{
      height: 56px;
      background: rgb(33, 33, 33);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.8);
  
  }
  .home .home-content .text-2{
      font-size: 50px;
  }
  .home .home-content .text-3{
      font-size: 27px;
  }
  .about .about-content .right .text,
  .skills .skills-content .left .text{
      font-size: 19px;
  }
  .contact .right form .fields{
      flex-direction: column;
  }
  .contact .right form .name,
  .contact .right form .email{
      margin: 0;
  }
  .sub-title{
      font-size: 18px;
  }
  .right form .error-box{
     width: 150px;
  }
  .scroll-up-btn{
      right: 15px;
      bottom: 15px;
      height: 38px;
      width: 35px;
      font-size: 23px;
      line-height: 38px;
  }
  .navbar .logo a{
      font-size: 23px;
  }
  .slider .list .item img{
      width: 100%;
      height: 90%;
      object-fit: none;
      object-position: 70% 0;
  }
 
}
@media (max-width: 947px) and (orientation:landscape){
  .menu-btn{
      display: block;
      z-index: 999;
  }
  .menu-btn i.active:before{
      content: "\f00d";
  }
  .navbar{
      height: 70px;
      background-color: rgb(255, 1, 1);
  }
  .navbar .menu{
      position: fixed;
      height: 100vh;
      width: 100%;
      left: -100%;
      top: 0;
      background: #111;
      text-align: center;
      padding-top: 80px;
      transition: all 0.3s ease;

  }
  .navbar .menu.active{
      left: 0;
  }
  .navbar .menu li{
      display: block;
  }
  .navbar .menu li a{
      display: inline-block;
      margin: 20px 0;
      font-size: 25px;
  }

   
.container {
  height: 60%;
  width: 100%;
  top: 20vh;
  padding: 5px;
}
.slideshow__slide-caption-title {
  font-size: 35px;
  letter-spacing: 0px;
  text-indent: 10px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.slideshow__slide-caption-text .ust_baslik{
  font-size: 14px;
  font-weight:5px;
  letter-spacing: 5px;
  text-align: left;
  margin-bottom: 15px;

}
.slideshow__slide-caption-text p{
  font-size: 14px;
  text-indent: 15px;
}
.left_right_button {
  width: 206px;
  height: 100px;
  bottom: 0;
  right: 0;
  z-index: 995;
  left: 50%;
  transform: translateX(-50%);
}

.js-slider-home-prev , .js-slider-home-next {
  width: 100px;
  height: 100px;
}
.google-play-badge{
  width: 220px;
  margin-top: 20px;
}
  .home .home-content .text-2{
      font-size: 70px;
  }
  .home .home-content .text-3{
      font-size: 35px;
  }
  .home .home-content a{
      font-size: 23px;
      padding: 10px 30px;
  }
  .max-width{
      max-width: 930px;
  }
  .about .about-content .column{
      width: 100%;
  }
  .about .about-content .left{
      display: flex;
      justify-content: center;
      margin: 0 auto 60px;
  }
  .about .about-content .right{
      flex: 100%;
  }
  .services .serv-content .card{
      width: calc(50% - 10px);
      margin-bottom: 20px;
  }
  .skills .skills-content .column,
  .contact .contact-content .column{
      width: 100%;
      margin-bottom: 35px;
  }
}
@media (max-width: 991px)  and (orientation:landscape)  {
  .navbar{
      position: fixed;
      height: 100px;
      width: 100%;
      z-index: 999;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s ease;
      background-color: rgb(243, 2, 219);
  }
  .max-width{
      padding: 0 50px;
  }
  .slider .list .item .content{
      position: absolute;
      left: 45%;
      top: 15%;
      width: 800px;
      max-width: 80%;
      z-index: 1;
      transform: translateX(-50%);
  }
  
}
*/




/*  privacy  */
.panel{
  padding: 170px 0;
}
.panel h1 {
  padding: 20px 0;
  text-align: center;
  color: #edebeb;
  font-size: 1.2rem;

}
.panel h2 {
  padding: 20px 0;
  text-align: center;
  color: #edebeb;
  font-size: 1.2rem;

}
.panel h3 {
  text-align: center;
  color: #d3d1d1;
  font-size: 1rem;

}
.panel p {
  color: #d3d1d1;
  font-size: 0.7rem;
  text-indent: 15px;
  line-height: 28px;
}
.panel .mail {
  color: rgb(254, 182, 0);
}
.panel .mail:hover {
  color: rgb(224, 18, 18);
}
.panel .list {
  background-color: #181818;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 10px 0;
  text-align: justify;
  text-decoration: none;
  justify-items: center;
  align-items: center;
}

.panel .list .linkler {
  list-style-type: circle;
  color: rgb(255, 255, 255);
  list-style-position: inside;
}
.panel .list .yazi {
  list-style-type: none;
  color: rgb(247, 0, 0);
}
.panel .list a{
  color: rgb(254, 182, 0);
  font-size: 0.7rem;

}
.panel .list a:hover{
  color: rgb(255, 255, 255);
}




#preloader {
    background: #000000 url(images/loading.gif) no-repeat center center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 10000;
}