/*----------------------
# General Settings
---------------------*/
body {
    font-family: 'Open Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6,a {
    font-family: 'Niramit', sans-serif;
    font-weight: 300;
}


span{
    font-family: 'Niramit', sans-serif;
    color: #4169E1;
    font-weight: 100;
    
}

p {font-size: 14px;}
h1 {font-size: 52px;}
h2 {font-size: 32px;}
h3 {font-size: 22px;}
h4 {font-size: 16px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}

.section-box {padding: 100px;}

.section-top {margin-bottom: 15px;}

.section-top hr {
    display: inline-block;
    height: 2px;
    width: 80px;
    background-color: #4169E1;
    border: none;
}


.section1-box {padding-top: 100px;}



/*----------------------
# Navigation Settings
---------------------*/
.navbar {
    border-bottom: #1886C7 3px solid;
}

.navbar .navbar-brand {
    color: #1886C7;
    font-size: 14px;
    height: 50px;
    transition: all .5s;
}

.navbar .navbar-brand img {
     height: 100%;
}


------------------
nav .navar-container {
    padding: 20px 0 20px 0;
}

#mainNav {
    /* background-color: rgba(0, 0, 0, 0) !important;*/
    background-color: gray;
}

#mainNav .navbar-nav .nav-item .nav-link {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    letter-spacing: 1px;
    color: white !important;
    text-transform: uppercase;
    transition: color .5s ease;    
}

#mainNav .navbar-toggler {
    font-size: 14px;
    right: 0;
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    border: 0;
    

}

.navbar .navbar-brand:hover {
    color: #315bd0 !important;
}


#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #315bd0 !important;

}

nav.shrink {
   padding: 0;
   background-color: #A9A9A9!important;
}


nav.shrink .navbar-nav .nav-item .nav-link:hover,
nav.shrink .navbar-brand:hover{
    color: black!important;
}


.navbar-brand.shrink,
.navbar-container.shrink,
.navbar.fixed-top.shrink,
.navbar-brand,
.navbar-container{
	transition: .8s;
}



/*--------------------------------------------------------------------------------------------------------------
# Hero Saction
-------------------------------------------------------------------------------------------------------------*/

#hero {
            animation: Hero1 10s ease infinite;
    -webkit-animation: Hero1 10s ease infinite;
    -moz-animation: Hero1 10s ease infinite;
    -o-animation: Hero1 10s ease infinite;
}

#hero .HeroSection {
    background: rgba(0,0,0, .6)  
}


@keyframes Hero1{
25%{
            background: url("../img/img-header/homogolasyon.jpg");
    -webkit-background: url("../img/img-header/homogolasyon.jpg");
    -moz-background: url("../img/img-header/homogolasyon.jpg");
    -o-background: url("../img/img-header/homogolasyon.jpg");
    }   
50%{
            background: url("../img/img-header/arac-proje.jpg");
    -webkit-background: url("../img/img-header/arac-proje.jpg");
    -moz-background: url("../img/img-header/arac-proje.jpg");
    -o-background: url("../img/img-header/arac-proje.jpg");
    }
75%{
            background: url("../img/img-header/belgelendirme.jpg");
    -webkit-background: url("../img/img-header/belgelendirme.jpg");
    -moz-background: url("../img/img-header/belgelendirme.jpg");
    -o-background: url("../img/img-header/belgelendirme.jpg");
    }
0%, 100%{
            background: url("../img/img-header/tiponay.jpg");
    -webkit-background: url("../img/img-header/tiponay.jpg");
    -moz-background: url("../img/img-header/tiponay.jpg");
    -o-background: url("../img/img-header/tiponay.jpg");
    }
0%, 25%, 50%, 75%, 100%
    {
    text-align: center;
    color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    height: 100vh;
        
        -webkit-text-align: center;
        -webkit-color: white;
        -webkit-background-repeat: no-repeat;
        -webkit-background-attachment: fixed;
        -webkit-background-position: center center;
        -webkit-background-size: cover;
        -webkit-height: 100vh;
    }
}








#hero .container {
    display: table;
    height: 100vh;

}

#hero .intro-text {
   
    display: table-cell;
    vertical-align: middle;

}


#hero .intro-heading {
    font-size: 62px;
    font-weight: 200;
    line-height: 50px;
    margin-bottom: 25px;
    
}

#hero .intro-heading span {
    color: #4169E1;
    
}

/*----------------------------------------------------------
                        # Hero Saction Button
-----------------------------------------------------------*/

.btn-outline-primary {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 28px;
    border-radius: 0;
    cursor: pointer;
    margin: 10px;
    border: 2px solid #fff;
    color: #fff;
    transition: all .5s;


}

.btn-outline-primary:hover {
    background: #315bd0;
}



/*--------------------------------------------------------------------------------------------------------------
# Sosyal Section
-------------------------------------------------------------------------------------------------------------*/




.content-social .fa-youtube-square,
.content-social .fa-twitter-square, 
.content-social .fa-facebook-square {
    line-height:80px;
    margin-left:20px;
    margin-right:20px;
    opacity:0.7;
    } 
.content-social .fa-facebook-square {
    color:#0080C0;
    }
.content-social .fa-twitter-square {
    color:#00a6ff;
    }
.content-social .fa-youtube-square  {
    color:#f00;
    }


.content-social .fa-youtube-square:hover,
.content-social .fa-twitter-square:hover, 
.content-social .fa-facebook-square:hover {
    cursor:pointer;
    opacity:1;
    }




/*--------------------------------------------------------------------------------------------------------------
# Hizmetler Section
-------------------------------------------------------------------------------------------------------------*/


#hizmetler {
    /*background-image: radial-gradient(circle, #fff, #000 );*/
    background-color: #f2f2f2;
    height: auto;
    
    
}

.hizmetler-item
{
    padding: 25px 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    text-align: center;

}

.hizmetler-item i {
    font-size: 52px;
    margin-bottom: 15px;
    color: #000;

}

.hizmetler-item hr {
    width: 52px;
    height: 2px;
    background-color: #000;
    border: none;
    margin: 0 auto;

}



.hizmetler-item:hover {
    background-image: linear-gradient(to right, #000, #fff);
    cursor: pointer;
    

}

.hizmetler-item p:hover{
     background-color:black;
     
}



.hizmetler-item:hover i,
.hizmetler-item:hover h3,
.hizmetler-item:hover h4,
.hizmetler-item:hover p {
    color: #fff;
    
    
}


.hizmetler-item:hover hr {
    width: 100%;
    background-color: #fff;
}

.hizmetler-item:hover i {
    transform: translateY(-15px);
}




.hizmetler-item,
.hizmetler-item i,
.hizmetler-item hr {
    transition: all .5s ease-in-out;

}

#regulasyon p{
    padding: 5px 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    
}

/*----------------------
# Tiponay Section
---------------------*/

/*.anyClass {
  height:400px;
  overflow-y: scroll;
}*/


/*----------------------
# Statement Section
---------------------*/



#statement {

    background: linear-gradient(rgba(20, 20, 20, .8), rgba(20, 20, 20, .8)), url("../img/img-1000-400/tiponay-orta-alt-4.png");
    
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

#statement h4 {
    color: #fff;

}


/*-----------------------------------------------------------------------------------------------
# Testler Section
------------------------------------------------------------------------------------------------*/

#testler {
    background-color: #f2f2f2;
    height:auto;

}

#testler .project-text {
    padding: 30px;

}


#testler .project-text hr {
    border-color: #000;
    border-width: 2px;
    width: 45%;
    transition: all .5s;


}


.btn-white {
    text-transform: uppercase;
    font-weight: :400;
    font-size: :14px;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    border: 1px solid #315bd0;
    color: #315bd0;
    transform: all .5s;
}




.btn-white:hover {
    background: #fff;
    color: #315bd0;
    border: 1px solid #fff;

}



/*----------------------
# testimonials Section
---------------------*/

#testimonials {
    background: linear-gradient(
    rgba(0,0,0, .3),
    rgba(0,0,0, .3)   
    ),
    url(../img/img-1000-400/tiponay-orta-alt-5.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    max-height: 650px!important;
}

#testimonials .quote {
    color: rgba(24, 134, 199, .7);
    margin-bottom: 12px;
}


#testimonials .carousel-item img {
    opacity: .50;
    max-height: 250px!important;
}

#testimonials .blockquote-footer {
    color: #1886c7;
    background-color: transparent;
     
}



/*----------------------
# Hakımızda Section
---------------------*/

.ortala {
  
    position: relative;
    margin: auto;
}





/*----------------------
# Iletisim Section
---------------------*/

#iletisim {
    background-color: #f2f2f2;
    height:300hv;

}


#iletisim .input-group-addon {
    
    width: 50px;
    border-radius: 0;
    color: #fff;
    background-color: #1886c7;
    
}


#iletisim .form-control, #contact .btn {
    border-radius: 0;
}



/*----------------------
# footer Section
---------------------*/


footer {
    background-color: #000;
    padding: 20px 0 10px;
    font-size: 14px;
}

footer p {
    margin: 0;

}


/* MEDIA QUERIES */

@media screen and ( max-width:1200px ) {
    #hero .intro-heading {
    font-size: 52px!important;
    }
    .hizmetler-item h3{
     font-size: 18px!important;
    }
    .hizmetler-item p{
     font-size: 12px!important;
    }
  
}

@media screen and ( max-width:992px ) {
    #hero .intro-heading {
    font-size: 32px!important;
    }
    .hizmetler-item h3{
     font-size: 10px!important;
    }
    .hizmetler-item p{
     font-size: 8px!important;
    }
     
}

@media screen and ( max-width:768px ) {
    #hero .intro-heading {
    font-size: 32px!important;
    }
     .hizmetler-item h3{
     font-size: 22px!important;
    }
    .hizmetler-item p{
     font-size: 14px!important;
    }
   
}

@media screen and ( max-width:576px ) {
    #hero .intro-heading {
    font-size: 24px!important;
    }
 
    
}