@media screen and (max-width:900px) {
    .navbar-brand img{
        width: 40%;
        position: absolute;
        top: 10px !important;
        left: 0%;
        transition: all .8s;
    }
    .navbar-nav{
        padding-left: 14px;
        margin-top: 23px;
    }
    .bölüm1 h1{
        width: 50%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        color: white;
        margin-top: -80%;
    }
    .b1-ark-1{
        margin-top: -20%;
        margin-left: -30%;
        border-radius: 50%;
    }
    .bölüm3{
        padding-bottom: 50%;
        /* background-color: #2c2c2c; */
        background-image: url("../img/codding.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .bölüm3::before{
        content: "";
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        position: absolute;
        background-color: black;
        opacity: 0.5;
    }
    .bölüm3 p{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .b2sol{
        left: 0%;
        transition: all 2s;
      }
      .b2sağ{
        right: 0%;
        transition: all 2s;
      }
    .bölüm6 img{
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }
    .bölüm6 h3{
        margin-top: -20%;
    }
    .bölüm6{
        padding-bottom: 15%;
    }
    .pulse{
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
      .sayfa-üst h2{
        color: white;
        position: relative;
        z-index: 2;
        width: 100%;
        text-align: center;
        margin-top: 20%;
      }
      footer{
        width: 100%;
        margin-left: 0%;
        transition: all 0s;
      }
      footer .container{
        transition: all 0.2s;
      }
      .sayfa-üst{
        background-image: url("../img/pexels-pixabay-270366.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-top: 20%;
        padding-bottom: 20%;
        width: 100%;
        height: 50%;
        position: relative;
      }
      .sayfa-üst .row{
        opacity: 1;
        position: absolute;
        top: 10%;
        right: 0%;
        left: 0%;
        animation-name: sayfa-üst;
        animation-duration: 1.5s;
      }
      @keyframes sayfa-üst{
        0%{
            opacity: 0.2;
            top: 20%;
        }
        100%{
            opacity: 1;
            top: 10%;
        }
      }
      footer{
        opacity: 1;
      }
      .cont-kutu{
        margin-top: 5%;
      }
      .referans .swiper-pagination-bullet{
      width: 20% !important;
      height: 30px;
      border-radius: 10px;
      background: transparent;
      opacity: 1;
      margin: 0% !important;
      box-shadow: 1px 5px 10px #d9d9d9;
      background-color: #f8f8ff;
      position: relative;
  }
  .referans-kutu{
    margin-top: 15%;
  }
  .footer-alt p{
    text-align: center;
    width: 100%;
  }
}
@media screen and (max-width:550px) {
    header{
        position: absolute;
        z-index: 5;
        width: 100%;
        margin-top: 20px;
        background-color: transparent;
    }
    .web-dev-b1 h3{
        width: 80%;
    }
    .swiper .swiper-pagination{
        top: 0%;
    }
    .referans .swiper-pagination-bullet{
        width: 40% !important;
        height: 30px;
        border-radius: 10px;
        background: transparent;
        opacity: 1;
        margin: 0% !important;
        box-shadow: 1px 5px 10px #d9d9d9;
        background-color: #f8f8ff;
        position: relative;
    }
    .cont-kutu{
        margin-top: 15%;
    }
    .cont-kutu p{
        width: 100%;
        font-size: 12px;
        margin-left: auto;
        margin-right: auto;
    }
    .cont-form{
        margin-top: 20%;
    }
    .cont-form input{
        margin-top: 10%;
    }
    .cont-form textarea{
        margin-top: 6%;
    }
    .form-label1{
        top: 10%;
        left: 5%;
    }
    .sub-btn{
        width: 40% !important;
    }
    .referans-kutu{
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
    }
    .tek{
        width: 170px;
        height: 170px;
        font-size: 60px;
    }
    .navbar{
        width: 100%;
        background-color: white !important;
    }
    .bg-light{
        background-color: white;
    }
    .navbar-brand img{
        width: 70%;
        position: absolute;
        top: 10px !important;
        bottom: 10%;
        left: 0%;
    }
    .sayfa-üst{
        padding-top: 50%;
        padding-bottom: 50%;
        background-size: 100% 100%;
    }
    .bölüm1 h1{
        width: 80%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        color: white;
        margin-top: -150%;
    }
    .b1-ark-1{
        margin-top: -40%;
        margin-left: -90%;
        border-radius: 50%;
    }
    .bölüm2{
        padding-top: 10%;
        padding-bottom: 15%;
    }
    .bölüm3{
        padding-top: 10%;
        padding-bottom: 75%;
        /* background-color: #2c2c2c; */
        background-image: url("../img/codding.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 150% 150%;
        position: relative;
    }
    .bölüm6 img{
        width: 100%;
        margin-left: 20%;
        height: 70%;
        border-radius: 10px;
        float: right;
    }
    .bölüm4{
        padding-top: 10%;
        padding-bottom: 15%;
    }
    .bölüm5{
        padding-top: 10%;
        padding-bottom: 15%;
    }
    .bölüm6 {
        text-align: center;
        padding-top: 15%;
        padding-bottom: 15%;
    }
    .bölüm6 img{
        width: 100%;
        margin: 0%;
    }
    .bölüm6 h3{
        margin-top: -25%;
        width: 100%;
    }
    .bölüm6 p{
        width: 100%;
    }
    footer{
        background-color: #2c2c2c;
        margin: 0%;
    }
    footer .footer-alt p{
        width: 100%;
        text-align: center;
        margin-top: 5%;
    }
    .footer-sol img{
        width: 130%;
    }
    .alt-logo{
        width: 100%;
        margin-top: 0%;
        margin-left: 32%;
        transition: all .8s;
    }
    .logo-mask{
        background-color: #2c2c2c;
        width: 60%;
        height: 70%;
        position: absolute;
        top: 10%;
        left: 60%;
        transition: all .8s;
    }
    .alt-logo:hover{
        margin-left: 0%;
    }
    .alt-logo:hover footer .logo-mask{
        background-color: #2c2c2c;
        width: 0%;
        height: 70%;
        position: absolute;
        top: 0%;
        left: 1006%;
    }
    .footer-lgo:hover .logo-mask{
        left: 100%;
    }
    .b5-hvr .social{
        width: 40%;
    }
    .b5-kutu{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .submit-btn{
        width: 50% !important; 
    }
}
/* @media screen and (max-width:2000px) {
    .navbar-brand img{
        width: 20%;
        position: absolute;
        top: -150%;
        left: 0%;
    }
}
@media screen and (max-width:1800px) {
    .navbar-brand img{
        width: 20%;
        position: absolute;
        top: -130% !important;
        left: 0%;
    }
}
@media screen and (max-width:1600px) {
    .navbar-brand img{
        width: 20%;
        position: absolute;
        top: -110% !important;
        left: 0%;
    }
}
@media screen and (max-width:1400px) {
    .navbar-brand img{
        width: 20%;
        position: absolute;
        top: -90% !important;
        left: 0%;
    }
} */

@media screen and (min-height:700px) and (max-height:900px) {
    .b1-ark-2{
        margin-top: 15%;
    }
}
@media screen and (min-height:900px) and (max-height:1200px) {
    .b1-ark-2{
        margin-top: 25%;
    }
}

@media screen and (min-width:1000px) {
    @keyframes header{
        0%{
            margin-top: -15%;
        }
        100%{
            margin-top: 20px;
        }
    }
}