/* width */
::-webkit-scrollbar {
  width: 10px;
}


/* Track */
::-webkit-scrollbar-track {
  background: #303030;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #00fe97;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #fff;
}



.pagination{
    position:relative;
    z-index:999;
}

a{
    color: #fff;
    text-decoration: none;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #000;
    border-color: #dee2e6;
}

.header-bg{
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(04,04,04,1) 5%, rgba(4,4,4,0.7511379551820728) 16%, rgba(4,4,4,0.7707457983193278) 46%, rgba(4,4,4,0.8603816526610644) 69%, rgba(4,4,4,1) 92%),url(/img/es-header-bg.jpg);
height:927px;
background-size: cover;
}

.project-bg{
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(04,04,04,1) 5%, rgba(4,4,4,0.7511379551820728) 16%, rgba(4,4,4,0.7707457983193278) 46%, rgba(4,4,4,0.8603816526610644) 69%, rgba(4,4,4,1) 92%),url(/img/es-header-bg.jpg);

background-size: cover;
}

body{
  font-family: 'Roboto', sans-serif;
}

.primary-color{
  color: #fff;
}

h2,h3{
  color:#fff;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 3px;
}

.es-bg{
background: linear-gradient(180deg, #000000 0%, #040404 0.01%, rgba(10, 10, 10, 0.75) 75.52%, #040404 100%),url(/img/black-bg.jpg);
height:927px;
background-size:cover;
}

.page-link {
  padding: 4px 11px;
 
  height:35px;
  text-align: center;
  font-size:15px;
  background-color: #000;
  color:#00fe97;
}

.page-item.active .page-link{
  background-color: #fff;
  border-color:#fff;
  color:#000;
}

.page-item:first-child .page-link,.page-item:last-child .page-link{
  border-radius: 0px !important;
  color:#00fe97;
  font-size:15px;
  background-color: #000;
  width:55px;
  height:35px;
  text-align: center;
}


.es2-bg{
  background: linear-gradient(180deg, #040404 0%, #040404 0.01%, rgba(4, 4, 4, 0.75) 75.52%, #040404 100%),url(/img/black-bg.jpg);

  height:927px;
}

.esp-bg{
  background: linear-gradient(180deg, #040404 0%, #040404 0.01%, rgba(4, 4, 4, 0.75) 75.52%, #040404 100%),url(/img/black-bg.jpg);

}

.es3-bg{
  background: linear-gradient(180deg, #040404 0%, #040404 1%, rgba(10, 10, 10, 0.65) 75.52%, #040404 100%),url(/img/es-footer-bg.jpg);
  height:927px;
  background-size:cover;
  background-position: center center;
}

.es-sticky{
  background: #0a0a0a;
  margin-top:-20px;
}


.footer-pad{
 padding-top:15px;     
}

.esp-img{
  display: block;
  margin: auto;
  max-width: 100%;
  margin-bottom:30px;
}

.esp-info{
  margin-left:30px;
}

.esp-info  {
  color:#fff !important;
}

.esp-info h3{
    font-size: 30px;
    font-weight: 300;
    margin-top: 5px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.esp-info p {
  font-weight:200;
  font-size:18px;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom:30px;
}

.esp-info span {
  font-size:13px;
  text-transform: uppercase;
  color: #b4b4b4;
}


.es-contact{
  background-color: rgba(0,0,0,0.55);
  margin-top:200px;
  height:450px;
  padding:20px;
  display: block;
}

.es-contact input{
  margin-bottom:25px;
  border-radius:0;
  color:#b1b1b1;
  background-color: #2B2B2B;
  border: none;
}

.es-contact input:focus{
  color:#b1b1b1;
  background-color: #3d3d3d;
  box-shadow: none;
}


.es-contact textarea{
  color:#b1b1b1;
  background-color: #2B2B2B;
  border-radius:0;
  border:none;
  margin-bottom:25px;
  display: block;
  resize:none;
}

.es-contact textarea:focus{
  color:#b1b1b1;
  background-color: #3d3d3d;
  box-shadow: none;
}


.es-contact button{
  color: #040404;
  background-color: #00fe97;
  border-radius: 0;
  border: none;
  padding: 7px 24px;
  display: block;
}

.es-contact button:hover{
  color:#00fe97;
  background-color: #040404;
}

.navbar-brand img{
  padding-top:25px;
}

h1.tbanner{
    color:#00fe97;
    text-align:center;
    font-size: 70px;
    font-weight: 500;
    padding-left:10px;
    margin-top:285px; 
    letter-spacing: 5px;
    font-family: 'Oswald', sans-serif;
 
  
}

h3.dbanner{
  color: #C0C0C0;
  font-size: 24px;
  font-weight: 300;
  display:grid;
  place-items:center;
  font-family: 'Roboto', sans-serif;
  padding-left: 15px; 
  margin-top: 17px; 
  letter-spacing: 3px;

}




.es-owl{
  margin-top:155px;
}

.es-owl-item{
  margin-top:0px;
}





.es-owl-item.item{
  display:block; height:200px !important; margin:0 auto 30px;

}



.owl-carousel .owl-item img{
  display: grid;
}

.es-bleft {
	position: relative;
  padding-top:70px;
  padding-bottom:70px;
}

.es-bleft:before, .es-bleft:after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.es-bleft:before {
    top: 0;
    left:0;
    right: 70%;
	bottom: 20%;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
}


.es-bright {
	position: relative;
  padding-top:70px;
  padding-bottom:90px;
}

.es-bright:after ,.es-bright:before{
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.es-bright:before {
    bottom : 0;
    right:0;
    left: 70%;
	  top: 20%;
    border-bottom: 4px solid #fff;
    border-right: 4px solid #fff;
}



.es-phead{
  font-size:20px; 
  margin-top:-12px;
  margin-bottom:32px;
  font-family: 'roboto',sans-serif;
 
  letter-spacing: 2px;
  text-align: center;
}

.es-pleft {
	position: relative;
  padding-top:1px;
  padding-bottom:70px;
  padding-left:55px;
  margin-right:55px;
}

.es-pleft:before, .es-pleft:after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.es-pleft:before {
    top: 0;
    left:0;
    right: 80%;
	bottom: 60%;
 
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
}


.esp-left {
	position: relative;
  padding-top:1px;
  padding-bottom:70px;
  padding-left:55px;
  margin-right:55px;
}

.esp-left:before, .esp-left:after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.esp-left:before {
    top: 0;
    left:0;
    right: 80%;
	bottom: 60%;
 
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
}


.es-middle{
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.es-middle i {
  color:#00fe97;
  font-size:75px;
}

.es-bot{
  margin-top: 160px;
}

.es-skills{
  margin-top:105px;
  text-align: center;
}

.es-skillz{
  text-align: center;

}

.es-skills i, .es-skillz i{
  font-size: 40px;
  color:#fff;
  margin-top:30px;
}


h4.es-skill{
  color:#fff;
  text-align: center;
  font-size:18px;
  font-weight:300;
  margin-top:20px;
  letter-spacing: 2px;
}


.footer-soc{
  margin-top:8px;
}

.footer-soc a{
  color: #fff;
  font-size:25px;
  margin-right:10px;

}



.left-head{
  
  margin-top:300px;
  padding-left:2px;
  display: grid;
}

.left-head h5{
color:#797979;
letter-spacing: 2px;
font-weight: 300;
width: 89px;
height: 88px;
left: 56px;
display: block;
align-items: center;
text-align: center;
transform: rotate(-90deg);
}

.left-head span{
   
  background: rgb(121, 121, 121);
  height: 60px;
  width:1px;
  margin-left:11px;
  margin-bottom:5px;
  margin-top:1px;
}



.es-social{
  margin-top: 200px;
  padding-left:2px;
  display: grid;
}

.es-social a i{
  height:1px;
  margin-top:7px;
}
.es-social span{
  
  background: rgb(121, 121, 121);
  height: 60px;
  width:1px;
  margin-left:11px;
  margin-bottom:5px;
  margin-top:10px;

}



.es-social i {
  color: rgb(155, 155, 155);
  font-size:25px;
}

.test-font{
  font-family: 'Oswald', sans-serif;

}


.section{
    position: relative;
    z-index:5;
}

.services-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.es-card{
  color:#fff;
  text-align: center;
  border-radius: 0px;
}

.escard-title{
  font-family: 'Roboto', sans-serif;
  letter-spacing: 2px;
  font-size:17px;
  font-weight: 300;
}

.escard-body{
  font-family: 'Rubik', sans-serif;
 
}

.escard-footer{
  border-top:1px solid #00fe97;
}

.es-icon{
  font-size: 30px;
}

.bg-black{
    background-color: #040404;
}

.es-pic{
    margin-top:50px;
}

.iletisim-btn {
  color: #000;
  margin-top:20px;
  padding-top:13px;
  padding-bottom:13px;
  padding-right:26px;
  padding-left:26px;
  font-family: 'Roboto', sans-serif;
  border: 2px solid #000;
  font-size:13px;
  letter-spacing: 2px;
  font-weight: 400;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.es-btn {
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.es-btn:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.es-btn:hover {
  box-shadow:  4px 4px 6px 0 rgb(0, 254, 151,.5),
              -4px -4px 6px 0 rgb(0, 254, 151, .2), 
    inset -4px -4px 6px 0 rgb(0, 254, 151,.5),
    inset 4px 4px 6px 0 rgb(0, 254, 151, .3);
  color: rgb(0, 254, 151);
}
.es-btn:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #000;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}


.es-menu-item{
    color:#ffffff;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px 15px 1px 15px;
    right: -15px;
}

.es-menu-item:hover, .es-menu-item:focus{
    color: #00fe97;
}

.vertical-lines-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    margin: 0;
    -webkit-pointer-events: none;
       -moz-pointer-events: none;
            pointer-events: none;
    z-index: 2;
    }
    
    .vertical-lines {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
            opacity: 1;
       -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
    
    .vertical-effect {position: relative;width: 25%;height: 100%;float: left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border-right: 1px solid rgba(119, 119, 119, .2);}
    
    .vertical-effect::before {content: "";position: absolute;display: block;width: 3px;-webkit-animation-direction: normal;-moz-animation-direction: normal;-ms-animation-direction: normal;-o-animation-direction: normal;animation-direction: normal;}
    
    .vertical-effect:first-child::before,
    .vertical-effect:last-child::before {
    content: "";
    position: absolute;
    right: -2px;
    }
    
    .vertical-effect:first-child::before {top: 0;-webkit-animation: raindrop 6s ease-out infinite;-moz-animation: raindrop 6s ease-out infinite;-ms-animation: raindrop 6s ease-out infinite;-o-animation: raindrop 6s ease-out infinite;animation: raindrop 6s ease-out infinite;background: -webkit-linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));background: -ms-linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));background: linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));}
    
    .vertical-effect:last-child::before {
    bottom: 0;
    -webkit-animation: raindrop-reverse 6s ease-out infinite;
       -moz-animation: raindrop-reverse 6s ease-out infinite;
        -ms-animation: raindrop-reverse 6s ease-out infinite;
         -o-animation: raindrop-reverse 6s ease-out infinite;
            animation: raindrop-reverse 6s ease-out infinite;
    background: -webkit-linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
    background: -ms-linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
    background: linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
    }
    

@-webkit-keyframes raindrop {
    0% {
      top: -10%;
      opacity: 0;
      height: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      top: 100%;
      height: 35%;
    }
  }
  @-ms-keyframes raindrop {
    0% {
      top: -10%;
      opacity: 0;
      height: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      top: 100%;
      height: 35%;
    }
  }
  @keyframes raindrop {
    0% {
      top: -10%;
      opacity: 0;
      height: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      top: 100%;
      height: 35%;
    }
  }
  
  @-webkit-keyframes raindrop-reverse {
    0% {
      bottom: -10%;
      opacity: 0;
      height: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      bottom: 100%;
      height: 35%;
    }
  }
  @-ms-keyframes raindrop-reverse {
    0% {
      bottom: -10%;
      opacity: 0;
      height: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      bottom: 100%;
      height: 35%;
    }
  }
  @keyframes raindrop-reverse {
    0% {
      bottom: -10%;
      opacity: 0;
      height: 0;
    }
    50% {
      opacity: 1;
     }
    100% {
      bottom: 100%;
      height: 35%;
    }
  }


 .es-gradient {
    background: linear-gradient(-75deg,#000000,
    #0c0c0c,
    #000000,
    #0c0c0c);
    background-size: 500% 500%;
    animation: gradient 15s ease infinite;
  }
  
  @keyframes gradient {
    25% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  

  .esm-iletisim{
    display: none !important;
  }

  .esm-social{
    display:none;
  }
.es-scroll{
  margin-top:220px;
}
  @media only screen and (max-width: 768px){


    html,body{

}


    /* header */

    .iletisim-btn{
      display: none;
    }
    
    .header-bg{
      height:600px;
    }

    .es-social{
      display: none;
    }

    h1.tbanner{
      font-size:40px;
      letter-spacing:3px;
      padding-left:0px;
      margin-top:140px;
    }

    h3.dbanner{
      font-size:15px;
      padding-left:1px;
      text-align:center;
    }

    .es-scroll{
      margin-top:100px;
    }

    .esm-iletisim{
      background-color:#fff;
      color:#000;
      width:45px;
      height:40px;
      font-size:25px;
      text-align: center;
      padding-top:7px;
      margin-bottom:7px;
      margin-top:7px;
      
      display: grid !important;
    }

    .float-right a{
      text-decoration:none !important;
    }

    .esm-social{
      display: block !important;
      text-align: center;
      margin-top:100px;
    }

    .esm-social a i {
      margin-right:8px;
      font-size:22px;
      color: rgb(187, 187, 187);
      text-align:center;
    }

    .es-sticky{
      margin-top:0px;
      padding-top:7px !important;
    }

    .navbar{
      padding-top:25px;
    }

    .navbar-brand img{
      padding-top:1px;
    }
    
    .es-menu-item{
      padding: 5px 5px 1px 5px;
      font-size:12px;
    }

    /* header end */

    /* layout1 */

    .es-hide{
      display:none;
    }

    .es-wide{
      width: 100%;
    }
    
    .es-bg{
      height:700px;
    }

    h4.es-skill{
      font-size:13px;
      letter-spacing: 2px;
      font-weight: 300;
      display: block;
      text-align:center;
      margin-top:15px;
    }


    .es-eq i{
      margin-right:20px;
    }
    .es-eq h4{
      margin-right:20px;
    }

    .es-equ i{
      margin-left:20px;
    }
    .es-equ h4{
      margin-left:20px;
    }


    .es-skills{
      margin-top:170px;
    }

    .es-skills i {
      font-size:25px;
      display: grid;      
   
    }
    
    .es-skillz i {
      font-size:25px;
      display: grid;      
    }

  .es-middle i {
      font-size:42px;
    }


    .es-bleft {
      position: relative;
      padding-top:30px;
      padding-bottom:35px;
    }
    
    .es-bleft:before, .es-bleft:after {
        content: '';
        display: block;
        position: absolute;
        background-color: transparent;
        pointer-events: none;
    }
    
    .es-bleft:before {
        top: 0;
        left:0;
        right: 70%;
      bottom: 30%;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
    }
    
    

.es-bright {
	position: relative;
  padding-top:30px;
  padding-bottom:45px;
}

.es-bright:after ,.es-bright:before{
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.es-bright:before {
    bottom : 0;
    right:0;
    left: 70%;
	  top: 30%;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}



    /* layout1 end */

    /* layout2 */

.es2-bg{
  height:700px;

}

.es-owl{
  margin-top:120px;
}

.es-phead{
  font-size:17px; 
  margin-top:-12px;
  margin-bottom:32px;
  font-family: 'roboto',sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  text-align: center;
}

.es-pleft {
	position: relative;
  padding-top:1px;
  padding-bottom:20px;
  padding-left:50px;
  padding-right:60px;
  margin-right:10px;
  margin-left:20px;
}

.es-pleft:before, .es-pleft:after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.es-pleft:before {
    top: 0;
    left:0;
    right: 80%;
	bottom: 60%;
 
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}

.esp-left {
	position:static;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:1px;
  padding-right:1px;
  margin-right:1px;
  margin-left:1px;
}

.esp-left:before, .esp-left:after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.esp-left:before {
  display: none;
}



.es-contact textarea{
  height:100px;
}

    /* layout2 end*/

    /* layout3*/
    .es-contact{
      margin-top:140px;
    }

    .owl-theme .owl-nav [class*=owl-]{
      color:#00fe97 !important;
      background: none !important;
      font-size:50px !important;
      
    }

    .es3-bg{
      height:720px;
    }
    /* layout3 end*/

    /* footer */

    .footer-text{
      font-size:13px;
    }


    .footer-soc a{
      font-size:22px;
      margin-right:4px;
    }

    /* footer end*/

    

}