body{

    background-color: #000000;

    background-image:ur(../pexels-aleksandar-pasaric-1323712.jpg) ;

    margin-left:2em ;

    margin-right:2em;



}

html, body{

  

  height: 100%;

    background: linear-gradient(90deg, #ffffff 50%, #ffffff 50%);

}

hr{

    border-style: none;

    border-color:rgb(255, 255, 255);

    border-width:0px;



}

.nav-link {

    color: rgb(2, 2, 2) !important;

    

    }

body



.kurbag {

  font-family: 'Roboto Slab', serif;

    

    height: 100%;

    background-attachment: scroll;

    background-size: cover;

    position: center center;

    background-repeat:no-repeat;

    

    

}

body, html {

    height: 100%;

}

.kurbag2 {

    background-image: url(../conduit-166802.jpg);

    background-repeat: no-repeat;

    height: 70%;

    width: 100%;

    background-position: center;

    background-size: 100%;

    position: relative;

    padding-top: 15vh;

    background-image: no-repeat;

}

.degisim{

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0.0;

    transition: .3s ease-out;

    

    background-repeat:no-repeat;

    background-position: center;

    

}

.container:hover .degisim {

    opacity: 1;

  }



.galeri{

    margin:0;

    padding: 0;

    box-sizing: border-box;

    

}

    

.galeributun{

    width: 100%;

    height: 100vh;

    background:rgb(255, 255, 255) ;



}











html{

  scroll-behavior: smooth;

}

#kısım1 {

  height: 600px;



}

#kısım2{

  height: 600px;

  background-color: aqua ;

  font-family: 'Roboto Slab', serif;

}

#kısım3{

  height: 600px;

  font-family: 'Roboto Slab', serif;

}

#kısım4{

  height: 600px;

  font-family: 'Roboto Slab', serif;

}

#kısım5{

  height: 450px;

  font-family: 'Roboto Slab', serif;



}

#kısım6{

  height:600px ;

  font-family: 'Roboto Slab', serif;

}



* {

  

  

  font-family: 'Roboto Slab', serif;

   

 }

 @import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

 



 .form-group{

  margin-bottom:15px ;

 }

 



 .wrapper{

  display:flex ;

  position:relative;

 }

 

 .wrapper .sidebar{

  position: fixed;

  width:10vw;

  background-color: #ebe4d7;

  padding:1vw

 }



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

  .sidebar a {

    text-align: center;

    float: none;

  }

}

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  }



.navbar .navbar-nav .nav-link:hover{

  background-color:#ff6557 ;

  color: #000000;

  



}



.navbar .nav-link:hover{

  background-color:#ff924e ;

  color: #000000;

}





.navbar .nav-link{

  padding: 0em;

  transition:all 0.5s;

  

  

}





  @media screen and (min-width:992px) {

    

  .navbar{

    padding:0;

  }

}

.navbar .navbar-nav .nav-link{

  padding: 1em;

  transition:all 0.5s;

  

}



.nav-item dropdown{

  height: 10px;

  

}











.foto{

  margin:10px 50px;

  border-radius: 50%;

}



  .foto img{

    transition 1s;

    padding:15px;

    width:%20;

  }



  .foto img:hover{

    filter:blur(1);

    transform:scale(1.2);

  }





  .table-responsive{-sm|-md|-lg|-xl}





  

  







  .home .carousel-item{

    min-height: 100vh;

    background-position: center;

    background-size: cover;

    position: relative;

    z-index: 1;

  }

  .home .carousel-item:before{

    content: '';

    position: absolute;

    left:0;

    top:0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.5);

    z-index: -1;

  }

  .home .carousel-item .container{

    position: absolute;

    left: 50%;

    top:50%;

    transform: translate(-50%,-50%);

    text-align: center;

  }

  .home .carousel-item h2{

    font-size: 80px;

    color: #ffffff;

    margin:0 0 10px;

    opacity: 0;

  }

  .home .carousel-item p{

    font-size: 30px;

    margin:0;

    color: #eeeeee;

    opacity:0;

  }

  .home .carousel-item.active h2{

    animation: fadeInLeft 1s ease forwards;

  }

  .home .carousel-item.active p{

    animation: fadeInRight 1s ease forwards;

  }

  

  @keyframes fadeInLeft{

    0%{

      opacity: 0;

      transform: translateX(-30px);

    }

    100%{

      opacity: 1;

      transform: translateX(0px);

    }

  }

  @keyframes fadeInRight{

    0%{

      opacity: 0;

      transform: translateX(30px);

    }

    100%{

      opacity: 1;

      transform: translateX(0px);

    }

  }

  

  .home .carousel-controls{

    position: absolute;

    left: 50%;

    bottom: 40px;

    z-index: 10;

    transform: translateX(-50%);

  }

  

  .home .carousel-indicators{

    position: relative;

    margin:0;

  }

  

  .home .carousel-indicators li{

    height: 70px;

    width: 70px;

    margin:0 5px;

    border-radius: 50%;

    background-position: center;

    background-size: cover;

    border:3px solid transparent;

    transition: all 0.6s ease;

  }

  .home .carousel-indicators li.active{

    border-color: #ffffff;

    transform: scale(1.2);

  }

  

  .home .carousel-control-next, 

  .home .carousel-control-prev{

    height: 60px;

    width: 60px;

    opacity: 1;

    z-index: 3;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    transition: all 0.3s ease;

  }

  .home .carousel-control-next:hover, 

  .home .carousel-control-prev:hover{

     box-shadow: 0 0 10px #ffffff;

  }

  .home .carousel-control-next img, 

  .home .carousel-control-prev img{

     width: 30px;


     #catalogButton {
      position: fixed; /* Fixed position */
      right: 10px; /* Distance from the right */
      top: 50%; /* Center vertically */
      transform: translateY(-50%); /* Adjust for exact centering */
      z-index: 1000; /* Ensure it's above other elements */
      
      /* Styling the button */
      padding: 10px 20px;
      background-color: #007bff; /* Example color */
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
  
      /* Responsive design for mobiles */
      @media (max-width: 600px) {
          font-size: 14px;
          padding: 8px 15px;
      }
  }