*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html{
    scroll-behavior: smooth;
}
body{
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}
/* whatsapp butonu css*/
.float {
    position:fixed;
    width:60px;
    height:60px;
    bottom:30px;
    right:30px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
    }
    
    .my-float {
    margin-top:16px;
    }
    /* whatsapp butonu css*/

     /* tel butonu css*/
.float-tel {
  position:fixed;
  width:60px;
  height:60px;
  bottom:110px;
  right:30px;
  background-color:#3cadd4;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
  transition: 0.3s ease-in-out;
  }
  
  .my-tel {
  margin-top:16px;
  }
  .float-tel:hover{
      background-color: #61c1e1;
      transition: 0.3s ease-in-out;
  }
  /* tel butonu css*/
  
.wrapper{
    width: 100%;
}

.banner{
    width: 100%;
    height: auto;
    background-position: center center;
    background: url(images/dark_tint.png),url(images/plumbing.jpg);
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

header{
    margin: 0 auto;
    position: absolute;
    width: 100%;
    align-self: flex-start;
}

header h1{
    position: absolute;
    font-size: 1.5em;
    margin-left: 30px;
    top: 30px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    float: left;
    z-index: 1;
}

header nav.menu ul{
    position: absolute;
    float: right;
    right: 20px;
    top: 0;
}

header nav.menu ul li{
    display: block;
    padding: 30px;
    float: left;
}

header nav.menu ul li a{
    font-size: 18px;
    text-decoration: none;
    color: #d8d8d8;
    font-weight: 300;
}

header nav.menu ul li a:hover{
    color: white;
    transition: color 0.3s ease-in-out;
}

.banner .yazi img{
    width: 500px;
    border: 3px solid #ccc;
    box-shadow: 1px 1px 5px #ccc;

}
.banner .yazi h2{
    font-size: 40px;
    margin: 30px 50px;
    color:white;
    margin-top: 150px;
}

.banner .yazi img+p{
    font-size: 20px;
    margin: 20px 400px;
    color: #d8d8d8;
    font-weight: 700;
}

header nav.menu div{
    font-size: 1.5em;
    color: #d8d8d8;
}

header nav.menu div.btn{
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}
header nav.menu div.btn2{
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}

.buton a{
    text-decoration: none;
    font-size: 1em;
    color: white;
    padding: 15px 40px;
    background: #3cadd4;
    border-radius: 20px;
    display:inline-block;
    margin: 50px 100px;
}

.buton a:hover{
    background-color: #61c1e1;
    transition: background-color 0.3s ease-in-out;
}
footer{
    width: 100%;
    background: #383b43;
    padding: 30px 0;
    text-align: center;
}

.sosyal{
    max-width: 1000px;
    margin: 0 auto;
}

footer .lisans{
    width: 100%;
    margin: 20px auto;
}

footer .lisans p{
    color: #858585;
    float: left;
    margin-top: 15px;
    display: inline-block;
}

footer .icons{
    float: right;
}

footer .icons i{
    text-align: center;
    width: 25px;
    height: 25px;
    padding: 10px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    color: #fff;
}

.temizle{clear: both;}

footer .icons i.facebook{
    background: #39599f;
}

footer .icons i.instagram{
    background: #F56040;
}

footer .icons i.mail{
    background: #FD1D1D;
}

/*************************loader**********************/

body{
    padding:0px;
    margin:0px;
    background-color:#ffffff;
    font-family:'Segoe UI';
  }
  
  .loader-wrapper{
    position:fixed;
    z-index:1090;
    height:100vh;
    width:100vw;
    background-color:rgb(255, 255, 255);
  }
  
  .truck-wrapper{
    height: 200px;
    width: 200px;
    border: 4px solid #1DD3D6;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%) scale(0.8);
  background:white;
    animation:bg 0.5s linear infinite;
    /* border-bottom:3px solid #404143; */
    border-radius: 100%;
    overflow:hidden;
    box-shadow:inset 0px 0px 10px 4px rgba(0,0,0,0.3),inset 0px 0px 5px 0px #1DD3D6;
  }
  
  .truck-wrapper:after{
    content:'Yükleniyor';
    font-size:20px;
    position:absolute;
    bottom:0px;
    text-align:center;
    width:100%;
    border-top:1px solid #1DD3D6;
  background: rgb(30,252,200);
  background: -moz-linear-gradient(left, rgba(30,252,200,1) 0%, rgba(29,211,214,1) 100%);
  background: -webkit-linear-gradient(left, rgba(30,252,200,1) 0%,rgba(29,211,214,1) 100%);
  background: linear-gradient(to right, rgba(30,252,200,1) 0%,rgba(29,211,214,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1efcc8', endColorstr='#1dd3d6',GradientType=1 );
    color:white;
    padding-top:8px;
    padding-bottom:18px;
    animation: bg 3s linear infinite;
  }
  
  .truck{
    height:110px;
    width:150px;
    position:absolute;
    
    bottom:48px;
    left: calc(50% + 10px);
    transform: translateX(-50%);
    
  }
  
  
  .truck > .truck-container {
    background: rgb(175,189,195);
  background: -moz-linear-gradient(-45deg, rgba(175,189,195,1) 0%, rgba(175,189,195,1) 50%, rgba(143,163,173,1) 51%, rgba(143,163,173,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(175,189,195,1) 0%,rgba(175,189,195,1) 50%,rgba(143,163,173,1) 51%,rgba(143,163,173,1) 100%);
  background: linear-gradient(135deg, rgba(175,189,195,1) 0%,rgba(175,189,195,1) 50%,rgba(143,163,173,1) 51%,rgba(143,163,173,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afbdc3', endColorstr='#8fa3ad',GradientType=1 );
    height:50px;
    width:80px;
    position:absolute;
    top:10px;
    left:10px;
    animation: container 0.4s linear infinite;
  }
  
  .truck > .glases{
    background: rgb(40,181,245);
  background: -moz-linear-gradient(-45deg, rgba(40,181,245,1) 0%, rgba(40,181,245,1) 50%, rgba(2,153,227,1) 52%, rgba(2,153,227,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(40,181,245,1) 0%,rgba(40,181,245,1) 50%,rgba(2,153,227,1) 52%,rgba(2,153,227,1) 100%);
  background: linear-gradient(135deg, rgba(40,181,245,1) 0%,rgba(40,181,245,1) 50%,rgba(2,153,227,1) 52%,rgba(2,153,227,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28b5f5', endColorstr='#0299e3',GradientType=1 );
    position:absolute;
    height:25px;
    width:25px;
    border:4px solid #FBD734;
    border-bottom:none;
    top:35px;
    left:95px;
    border-top-right-radius:6px;
    animation: updown-half 0.4s linear infinite;
  }
  .truck > .glases:after{
    content:'';
    display:block;
    background-color:#FBD734;
    height:13px;
    width:10px;
    position:absolute;
    right:-10px;
    bottom:0px;
    border-radius:10px / 15px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    
  }
  
  .truck > .glases:before{
    content:'';
    display:block;
    background-color:#F9BF2C;
    height:12px;
    width:16px;
    position:absolute;
    left:0px;
    bottom:0px;
    border-top-right-radius:4px;
  }
  
  .truck > .bonet{
    background-color:#F9BF2C;
    position:absolute;
    width:124px;
    height:15px;
    top:64px;
    left:10px;
    z-index:-1;
    animation: updown 0.4s linear infinite;
  }
  
  .truck > .bonet:after{
      content:'';
    display:block;
    background: rgb(255,255,255);
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 );
    height:10px;
    width:6px;
    position:absolute;
    right:0px;
    bottom:2px;
    border-top-left-radius:4px;
    
  }
  
  .truck > .base{
    position:absolute;
    background-color:#445A64;
    width:106px;
    height:15px;
    border-top-right-radius:10px;
    top:70px;
    left:14px;
    animation: updown 0.4s linear infinite;
  }
  
  .truck > .base:before{
     content:'';
    display:block;
    background-color:#E54A18;
    height:12px;
    width:5px;
    position:absolute;
    left:-4px;
    bottom:0px;
    border-bottom-left-radius:4px;
  }
  
  .truck > .base:after{
     content:'';
    display:block;
    background-color:RGB(84,110,122);
    height:10px;
    width:20px;
    position:absolute;
    right:-16px;
    bottom:0px;
    border-bottom-right-radius:4px;
    z-index:-1;
  }
  
  .truck > .base-aux{
    width:82px;
    height:8px;
    background-color:#F9BF2C;
    position:absolute;
    top:65px;
    left:14px;
    border-bottom-right-radius:4px;
    animation: updown 0.4s linear infinite;
  }
  .truck > .wheel-back{
    left:20px
  }
  
  .truck > .wheel-front{
    left:95px;
  }
  
  .truck > .wheel-back,.truck > .wheel-front{
     
    border-radius:100%;
    position:absolute;
  background: rgb(84,110,122);
  background: -moz-linear-gradient(-45deg, rgba(84,110,122,1) 0%, rgba(84,110,122,1) 49%, rgba(68,90,100,1) 52%, rgba(68,90,100,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(84,110,122,1) 0%,rgba(84,110,122,1) 49%,rgba(68,90,100,1) 52%,rgba(68,90,100,1) 100%);
  background: linear-gradient(135deg, rgba(84,110,122,1) 0%,rgba(84,110,122,1) 49%,rgba(68,90,100,1) 52%,rgba(68,90,100,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#546e7a', endColorstr='#445a64',GradientType=1 );
    top:80px;
    height:22px;
    width:22px;
  animation:spin 0.6s linear infinite;
  }
  
  .truck > .wheel-back:before,.truck > .wheel-front:before{
    content:'';
    border-radius:100%;
      left:5px;
    top:5px;
    position:absolute;
      background: rgb(175,189,195);
  background: -moz-linear-gradient(-45deg, rgba(175,189,195,1) 0%, rgba(175,189,195,1) 50%, rgba(143,163,173,1) 51%, rgba(143,163,173,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(175,189,195,1) 0%,rgba(175,189,195,1) 50%,rgba(143,163,173,1) 51%,rgba(143,163,173,1) 100%);
  background: linear-gradient(135deg, rgba(175,189,195,1) 0%,rgba(175,189,195,1) 50%,rgba(143,163,173,1) 51%,rgba(143,163,173,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afbdc3', endColorstr='#8fa3ad',GradientType=1 );
    height:12px;
    width:12px; 
  }
  
  @keyframes spin {
    50%{
      top:81px;
    }
      100% {
          transform: rotate(360deg);
      }
  }
  
  @keyframes container {
    
    30%{
      transform:rotate(1deg);
    }
    50%{
      top:11px;
    }
    
    70%{
      top:10px;
      transform:rotate(-1deg);
    }
  }
  
  .truck > .smoke{
    position:absolute;
    background-color:#AFBDC3;
    border-radius:100%;
    width:8px;
    height:8px;
    top:90px;
    left:6px;
    animation: fade 0.4s linear infinite;
    opacity:0;
  }
  
  .truck > .smoke:after{
    content:'';
    position:absolute;
    background-color:RGB(143,163,173);
    border-radius:100%;
    width:6px;
    height:6px;
    top:-4px;
    left:4px;
  }
  
  .truck > .smoke:before{
    content:'';
    position:absolute;
    background-color:RGB(143,163,173);
    border-radius:100%;
    width:4px;
    height:4px;
    top:-2px;
    left:0px;
  }
  
  @keyframes fade {
    
    30%{
      opacity:0.3;
      left:7px;
    }
    50%{
      opacity:0.5;
      left:6px;
    }
    
    70%{
     opacity:0.1;
      left:4px;
    }
    
    90%{
      opacity:0.4;
      left:2px;
    }
  }
  
  @keyframes bg {
    from{
      background-position-x:0px;
    }
    to{
      background-position-x:-400px;
    }
  }
  
  @keyframes updown {
    50%{
      transform:translateY(-20%);
    }
    
    70%{
      transform:translateY(-10%);
    }
  }
  
  @keyframes updown-half{
      50%{
      transform:translateY(-10%);
    }
    
    70%{
      transform:translateY(-5%);
    }
  }
  
  .hidden{
      animation: fadeOut 1s;
      animation-fill-mode: forwards;
  }
  @keyframes fadeOut{
      100%{
          opacity: 0;
          visibility: hidden;
      }
  }

  /*****************loader*****************/
  
@media screen and (max-width:980px){
  
    footer .icons{
        clear: both;
        float: none;
        transition: 2s ease;
        overflow: hidden;
    }
    footer .lisans p{
        float: none;
        margin: 10px auto;
        overflow: hidden;
        transition: 2s ease;
    }
    .sosyal{
        text-align: center;
        transition: 2s ease;
        overflow: hidden;
    }
    footer .icons i{
        margin-top: 10px;
        transition: 2s ease;
        overflow: hidden;
    }

    .banner .yazi img+p{
        margin: 20px 200px;
    }
}
    
@media screen and (max-width:910px){

  header h1{
    font-size: 1.2em;
    margin-top: 2px;
    padding-top: 3px;
}

    header nav.menu ul li.at{
        width: 100%;
        display: block;
        transition: 2s ease;
        overflow: hidden;
    }
    header nav.menu div.btn{
        display: block;
        float: right;
        padding: 10px 10px;
        margin: 23px 23px;
        position: relative;
        transition: 2s ease;
        overflow: hidden;
    }
    header nav.menu div.btn2{
        display: none;
        float: right;
        padding: 10px 10px;
        margin: 23px 23px;
        position: relative;
        transition: 2s ease;
        overflow: hidden;
    }
    header nav.menu ul{
        width: 100%;
        float: none;
        right: 0;
        top:-500%;
        transition: 2s ease;
        overflow: hidden;
    }
    header nav.menu ul li{
        background: rgba(31, 30, 30, 0.9);
        width: 100%;
        padding: 0;
        float: none;
        padding-top: 25px;
        padding-bottom: 25px;
        transition: 2s ease;
        overflow: hidden;
    }
    header nav.menu ul li a{
        font-weight: 700;
        padding: 10px 80px;
        border-radius: 10px;
        transition: background-color 1s ease;
        overflow: hidden;
    }
    
    header nav.menu ul li a:hover{
        background-color: rgb(85, 85, 85);
        transition: background-color 1s ease;
        
    }
    header nav.menu ul li.at:nth-child(1){
        padding-top: 100px;
    }
    header nav.menu ul li.at:nth-child(4){
        padding-bottom: 60px;
    }
    .banner .yazi img{
        width: 350px;
        transition: 2s ease;
        overflow: hidden;
    }
    .banner .yazi img+p{
        margin: 20px 100px;
    }
    .banner .yazi h2{
        font-size: 30px;
    }
}
    
@media screen and (max-width:400px){

  header h1{
    font-size: 1em;
    padding-top: 2px;
    margin-top: 2px;
    transition: 2s ease;
}
    
    footer .icons i{
        width: 20px;
        height: 20px;
        padding: 8px;
        border-radius: 50%;
        font-size: 1.2em;
        transition: 2s ease;
    }
    footer .lisans p{
        padding: 0 10px;
    }

    .banner .yazi img{
        width: 250px;
        transition: 2s ease;
        overflow: hidden;
    }

    .banner .yazi h2{
        font-size: 30px;
        transition: 2s ease;
        overflow: hidden;
        margin-top: 150px;
    }

    .banner .yazi img+p{
        font-size: 15px;
        transition: 2s ease;
        overflow: hidden;
    }

    .buton a{
        font-size: 0.8em;
        padding: 10px 30px;
        border-radius: 10px;
        margin: 30px 80px;
        transition: 2s ease;
        margin-bottom: 150px;
    }
    .banner .yazi img+p{
        margin: 20px 50px;
    }
}