body{
    font-family: Verdana, sans-serif !important;
    font-style: normal !important;
    font-size: large;
}

#headerid{
    background: #000000dd;
    box-shadow:0px 10px 5px -10px black !important;
    align-content: center;
    transition: 0.4s;
    width: 100%;
    position: fixed;
    z-index:2;
}

@media screen and (min-width: 1364px) and (max-width:1368px) {
    #anares{
        padding-top: 50px !important;
        
    }
    #headerid{
        background: #000;
    }
    .arti{
      height: 460px !important;
      max-height: 600px !important;
    }
}
    

h3{
    font-size: 20px !important;
    font-family: Open 'Courier New', Courier, monospace !important;
}
.nav-link:hover {
    color : #feca21 !important;
    transition: 0.3ms;
}

.nav-item{
    padding-right: 25px;
}

/* .satir{

    height: 250px;
    background-color:#222222;

} */

h2,h1{
    color : #000000dd !important;
   text-shadow: -1px 1px 1px;
}

.des{
    border-radius: 10px;
    box-shadow: 0 8px 25px 0 rgba(0,0,0,0.3);
}
.des1{
border-radius: 0px;
    box-shadow: 0 8px 25px 0 rgba(0,0,0,0.3);
}
body{
    background-color: #e9c9a233 !important;
}
@media screen and (max-width: 999px) {

    .midNote{
        top:0px !important;
    }
    .midNote:hover{
    
      
     width: 100%;
     height: 100%
    }
    .probless{
        top:0px !important;
    }
    
}


.midNotes:hover{
    position: relative;
    top: -25px !important;
 
    transition: 10s !important;
   }
@media screen and (max-width: 500px) {
    .carwash{
    min-width: 360px !important;
    padding-left: 0px !important;
     
   }
}

@media screen and (max-width: 650px) {

   #footerduzenim{
        margin-bottom: 0px !important;
    }
  
  
}

@media screen and (max-width: 950px) {

   .textim{
        display: block !important;
        text-align:center;
    }
  
  
}
@media screen and (min-width: 1000px) and (max-width:1081px) {

    #mobilreschild{
        visibility: revert !important;
        top: -710px !important;
        height: 50% !important;
        max-height: 50% !important;
      
        

    }
    #mobilreschild1{
        visibility: revert !important;
        top: -710px !important;
        height: 50% !important;
        max-height: 50% !important;
    
      
    }
    .banneralti{
        top: -182px !important;
    }
    
}

@media screen and (min-width: 590px) and (max-width:600px) {

    #mobilreschild{
        visibility: revert !important;
        top: -310px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -310px !important;
        height: 100% !important;
        max-height: 100% !important;
      
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
    
}


@media screen and (min-width: 560px) and (max-width:589px) {

    #mobilreschild{
        visibility: revert !important;
        top: -305px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -305px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width: 530px) and (max-width:559px) {

    #mobilreschild{
        visibility: revert !important;
        top: -290px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -290px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:500px) and (max-width:530px) {

    #mobilreschild{
        visibility: revert !important;
        top: -270px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -270px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:460px) and (max-width:499px) {

    #mobilreschild{
        visibility: revert !important;
        top: -248px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -248px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:430px) and (max-width:459px) {

    #mobilreschild{
        visibility: revert !important;
        top: -225px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -225px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:412px) and (max-width:429px) {

    #mobilreschild{
        visibility: revert !important;
        top: -200px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -200px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:427px) and (max-width:429px) {

    #mobilreschild{
        visibility: revert !important;
        top: -210px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -210px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:389px) and (max-width:391px) {

    #mobilreschild{
        visibility: revert !important;
        top: -187px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -187px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:384px) and (max-width:384px) {

    #mobilreschild{
        visibility: revert !important;
        top: -183px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -183px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
@media screen and (min-width:374px) and (max-width:376px) {

    #mobilreschild{
        visibility: revert !important;
        top: -177px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -177px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
}
@media screen and (min-width:360px) and (max-width:360px) {

    #mobilreschild{
        visibility: revert !important;
        top: -170px !important;
    }
    #mobilreschild1{
        visibility: revert !important;
        top: -170px !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .satiriki{
        padding-bottom: 500px !important;
    }
    .slogan{
        font-size: medium;
        top: 0px !important;
        margin-bottom: 90px;
    }
}
.center {
    margin: auto;
    width: 100%;
  
    padding: 10px;
  }

  .altresim{
    border: solid 5px  #4590d600 ;
    background-color: rgba(255, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 8px 25px 0 rgba(0,0,0,0.3);
    width: 350px !important;
    height: 350px !important;
    }

    .resim{
        background-color: rgba(255, 0, 0, 0) !important;
        border-radius: 50px;
        width: 100%;
        margin-top: 30px;
    }
    .urunlerimiz{
        margin-top: 50px;        
    }
    @media screen and (max-width:1600px) {
        .buyukolan{
            top: -470px !important;
            color: #c72a2a;
        }
    }

    
@media screen and (min-width: 1080px) {
    .midNote:hover{
        width: 440px !important;
        height: 400px !important;
        top: -60px !important;
        transition: 1s;
        
        }
        .yanmidnote:hover{
  
            width: 350px !important;
            height:350px !important;
            top: -25px !important;
            transition: 1s;
            
            }
            
          
}
@media screen and (max-width:900px) {
   
}

@media screen and (max-width:1160px) {
#anaress{
    visibility:hidden ;
}
#logoresim{
    visibility: revert !important;
}
/*.slogan{
    visibility: hidden !important;
}*/
.progress{
    visibility:hidden ;
}

.ortadanuste{
    position: relative;
    top: -100px;

}
}
@media screen and (max-width:650px) {
    .kaydir{
        display: block !important;
        width: 100% !important;;
        margin-bottom: 10px;
    }
    .banneralti{
                top: -49px !important;
            }

    .hakkimizda{
        text-align: left;
        width: 100%;
    }
}

@media screen and (max-width:900px) {
    .duzen{
        display: block !important;
        width: 100% !important;
        
    }
}



@media screen and (max-width:1160px) {
    .cd-handle{
        width: 20px !important;
        height: 20px !important;
        margin-left: -10px !important;
        margin-top: -10px !important;
     
    }
    }
    

    @media screen and (max-width:1000px) {
    .conres{
     position: relative;
        top: -700px;
       
    
    }
    .rescon{
        width: 100% !important;
        height: 100% !important;
    }
    .conres1{
        position: none;
           top: -700px;
          
       
       }
}



  @keyframes go-left-right {        /* bir isim ver: "go-left-right" */
    from { left: 10%; }             /* animasyonu left: 0px'den başlat */
    to { left: calc(100% - 60%); } /* animasyonu 100%-50px'de bitir */
  }

  .progress {
    animation: go-left-right 3s infinite alternate;
    /* "go-left-right" animasyonunu elemente ekle
       animasyon süresi 3 saniye
       kaç kere yapılacağı: sonsuz (infinite)
       her seferinde yönünü ters çevir
    */

    position: relative;
    background-color: transparent !important;
    width: 800px;
    height: 70px;
   
  }



@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css");