/* GENERAL SETTINGS */

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Regular.ttf');  
}

body {
    background: #fff;
    color: : #3f3f3f;
    font: 14px / 28px arial;   /* arialler yedek */
    font-family: 'Raleway', arial;
}

h1{
    font-size: 52px;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.section-header {
    background: #62636a;                     /* hexadecimal code : eski #500d16 */
    border-bottom: 6px solid #000;
    height: 60px;
    color: #fff;
    display: inline-block;
    line-height: 60px;
    font-size: 24px;
    padding: 5px 40px;
    letter-spacing: 2px;
    margin-bottom: 20px;       
}

h3 {
    font-size: 16px;
    color: #62636a;                             /* hexadecimal code : eski #500d16 */
    font-weight: bold;
    transition: all .5s ease;
}

.section-area{
    padding: 40px 0;
}
 /* GRID SETTINGS */

.container {
    width: 90%;
    margin: 0 auto;
    display: flex;
}

.features-body .container {
 justify-content: space-between;
}

.container-1{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; 
    width: 50%
}

.container-2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 50%
}

.col3 {
    flex-grow: 1;
    width: 33.33%;
}

.col4 {
    flex-grow: 1;
    width: 25%
}


 /* HOME SETTINGS */

header .logo {
    margin-right: auto;
    padding: 5px 0  
}


header .logo img {
    display: block;
    height:  70px;
}

       /* MENU SETTINGS */

.menu li {
    float: left;  
}

.menu li a {
    padding: 27px 17px;
    display: block;
    text-decoration: none;
    letter-spacing: 2px;
    color: #333333;  
    transition: all .5s ease;
}

.menu li:hover a {
    background: #62636a;            /* hexadecimal code : eski #500d16 */
    color: #fff;
}

#main-slider {
    height: 500px;
    background: url('../img/main.jpg') center center no-repeat;
    background-size: cover;
    transition: all .90s ease
}

.slider {
    width: 100%
}

#main-caption {
    height: 500px;
    background: rgba(0,0,0, .5);    /* sondaki .5 yazının arka fonunu karartır */
     transition: all .5s ease
}

.caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    widows: 100%;
    color: #fff;
}

.caption p {
    letter-spacing: 3px;
    font-size: 28px;
    padding: 20px
        
}

.features-top {
    text-align: center;
}

.item {
    padding: 10px 20px;
}

.zoom {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.zoom img {
    display: block;
    width: 100%;
    height: auto;
    transition: all .5s ease;
}


.item .item-text {
    padding: 5px;
    height: auto;
    border: 1px solid #62636a;                      /* hexadecimal code : eski #500d16 */
    text-align: justify
}

.item-text h3{
    text-align: center
}

.item-text .btn-yazı-1{
    padding: 30px 0 0;
    text-align: center  
}

.item-text .btn-yazı-2{
    padding: 113px 0 0;
    text-align: center
    
}

.item-text .btn-yazı-3{
    padding: 1px 0 0;
    text-align: center
    
}

.item-text .btn-yazı-4{
    padding: 114px 0 0;
    text-align: center
    
}

.item:hover .zoom img {
    transform: scale(1.25);
    
}

.item:hover h3 {
    color: #fff;
}

.item:hover .item-text {
    background: #62636a;                        /* hexadecimal code : eski #500d16 */
    color: #fff;
    transition: all .5s ease;
}

.btn-details {
    color: #500d16;
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid #62636a;              /* hexadecimal code : eski #500d16 */
    transition: all .5s ease;
}

.item:hover .btn-details{
    background: #62636a;
    border: 1px solid white;
    color: white;
    transition: all .5s ease;
}

.item-text p {
    margin: 20px 0;
}


footer {
    background: #62636a;                    /* hexadecimal code : eski #500d16 */
    text-align: center;
}

.footer-item{
    padding: 20px;
}

.footer-item img{
    height: 50px;
    opacity: .99
}

footer h3 {
    color: #dbb657;                       /*  eski renk:  #fff  */
    font-size:  18px;
    letter-spacing: 2px;
    margin-bottom: 10px;    
    text-decoration-line: underline
}

.footer-item a {
    color: #fff;
    opacity: .5;
    text-decoration: none;        
}

footer p {
    color: #dbb657;                      /* hexadecimal code : eski #95a5a6  footer yazıları */
    letter-spacing: 2px;
    line-height: 20px;
}

footer li {
    letter-spacing: 2px;
    color: #dbb657;                       /* hexadecimal code : eski #95a5a6 footer yazıları */
    text-decoration: none;
}

   
/*slayt ayarları*/


.gallery-top{
    text-align: center;
}

.gallery-slider{
    overflow: hidden;
    margin:0 auto;
    width: 500px;
    height: 320px;
    transition: all .5s ease
}

.container-v{
    margin: auto;
}
.container-a{
    margin: auto;
    
}

.gallery-slider-item{
    width: 8000px;
    position: relative;
    left: 0;
    animation: slide-animation 120s infinite;
    /*
    -webkit-animation-duration: 20s;
    -webkit--animation-name: sliders;
    -webkit-animation-iteration-count:infinitie;
    -moz-animation-duration: 20s;
    -moz-animation-name: sliders;
    -moz-animation-iteration-count:infinitie;
    -ms-animation-duration: 20s;
    -ms-animation-name: sliders;
    -ms-animation-iteration-count:infinitie;
    */
}
.gallery-slider-item:hover{
    -webkit-animation-play-state:paused;
}

.gallery-slider-item img{
    width: 6.25%;
    float:left;
    height:auto;
    
}

@keyframes slide-animation{
    0% { left: 0; }
    5% { left: -100%; }
    10% { left: -200%; }
    15% { left: -300%; }
    20% { left: -400%; }
    25% { left: -500%; }
    30% { left: -600%; }
    35% { left: -700%; }
    40% { left: -800%; }
    45% { left: -900%; }
    50% { left: -1000%; }
    55% { left: -1100%; }
    60% { left: -1200%; }
    65% { left: -1300%; }
    70% { left: -1400%; }
    75% { left: -1500%; }
    0% { left: 0; }
}
/*
@-webkit-keyframes slide-animation{
    0% { left: 0; }
    5% { left: -100%; }
    10% { left: -200%; }
    15% { left: -300%; }
    20% { left: -400%; }
    25% { left: -500%; }
    30% { left: -600%; }
    35% { left: -700%; }
    40% { left: -800%; }
    45% { left: -900%; }
    50% { left: -1000%; }
    55% { left: -1100%; }
    60% { left: -1200%; }
    65% { left: -1300%; }
    70% { left: -1400%; }
    75% { left: -1500%; }
    0% { left: 0; }
}

@-moz-keyframes slide-animation{
    0% { left: 0; }
    5% { left: -100%; }
    10% { left: -200%; }
    15% { left: -300%; }
    20% { left: -400%; }
    25% { left: -500%; }
    30% { left: -600%; }
    35% { left: -700%; }
    40% { left: -800%; }
    45% { left: -900%; }
    50% { left: -1000%; }
    55% { left: -1100%; }
    60% { left: -1200%; }
    65% { left: -1300%; }
    70% { left: -1400%; }
    75% { left: -1500%; }
    0% { left: 0; }
}

@-ms-keyframes slide-animation{
    0% { left: 0; }
    5% { left: -500%; }
    10% { left: -1000%; }
    15% { left: -1500%; }
    20% { left: -2000%; }
    25% { left: -2500%; }
    30% { left: -3000%; }
    35% { left: -3500%; }
    40% { left: -4000%; }
    45% { left: -4500%; }
    50% { left: -5000%; }
    55% { left: -5500%; }
    60% { left: -6000%; }
    65% { left: -6500%; }
    70% { left: -7000%; }
    75% { left: -7500%; }
    0% { left: 0; }
}
*/
/*
@keyframes slide-animation{
    0% { left: 0; }
    6.25% { left: -100%; }
    12.5% { left: -200%; }
    18.75% { left: -300%; }
    25.00% { left: -400%; }
    31.25% { left: -500%; }
    37.50% { left: -600%; }
    43.75% { left: -700%; }
    50.00% { left: -800%; }
    56.25% { left: -900%; }
    42.50% { left: -1000%; }
    68.75% { left: -1100%; }
    75.00% { left: -1200%; }
    81.25% { left: -1300%; }
    87.50% { left: -1400%; }
    93.75% { left: -1500%; }
    0% { left: 0; }
}
*/
  /*küçültme ayarları*/

@media screen and (max-width: 1200px) {
    .caption h1 {
        color: white;
        font-size: 50px;
        letter-spacing: 2px;  
        transition: all .5s ease
    }

    .caption p {
        font-size: 26px;
        padding: 0 
        transition: all .5s ease
    }  
    
    .features-body .container{
        flex-direction: column
    }
    .container-1{
        width: 100%;
    }
    .container-2{
        width: 100%;
    }
    .item-text .btn-yazı-1{
    padding: 87px 0 0;
    text-align: center  
    }
     .item-text .btn-yazı-3{
    padding: 59px 0 0;
    text-align: center  
    }
    #gallery .container{
        flex-direction: column;
    }
    .container-a{
        padding: 20px 0 0 0
    }
    
}

@media screen and (max-width: 1080px) {
    .caption h1 {
        color: white;
        font-size: 38px;
        letter-spacing: 0px;      
    }
    .caption p {
        font-size: 24px;
        padding: 0 ;  
        letter-spacing: 1px 
    }
    footer li {
    letter-spacing: normal
    }
    #main-slider{
        height:  450px;
    }
    #main-caption{
        height: 450px;
    }
    
    .features-body .container {
        flex-direction: column;
        width: 90%
    }
    
    .features-body .container-1{
        width: 100%
    }
    
    .features-body .container-2{
        width: 100%
    }
    
    .col4{
        width: 100%;
        height: auto      
    }
      .item-text .btn-yazı-1{
    padding: 59px 0 0;
    text-align: center  
    }
     .item-text .btn-yazı-3{
    padding: 30px 0 0;
    text-align: center  
    }
}
    
@media screen and (max-width: 765px) {
    .caption h1 {
        color: white;
        font-size: 30px;
        letter-spacing: 1px;  
        margin: 0
    }
    .caption p {
        font-size: 20px;
        padding: 0 ;  
            
    }
    .container-about .about-class {
        display: block;
        width: 90%
    }
    .container-about-img{
        width: 100%
    }
    .container-about-img img{
        width:100%;
        height: auto  
    }
    
    .container-about-p{
        width: 100%
    }
    
    header .logo{
        margin: 0 auto
    }
    
    header .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all .5s ease
    }
    #main-slider{
        height:  400px;
    }
    #main-caption{
        height: 400px;
    }
    
    .features-body .container {
        flex-direction: column;
        width: 60%
    }
    .col4{
        width: 100%;
        height: auto      
    }
    .container-1{
        flex-direction: column;
    }
    .container-2{
        flex-direction: column;
    }
}
@media screen and (max-width: 650px) {
    .caption h1 {
        color: white;
        font-size: 25px;
        letter-spacing: 1px;     
    }
    .caption p {
        font-size: 15px;
        padding: 0       
    } 
    .features-body .container {
        flex-direction: column
    }
    .features-body .container .col3{
        width: 100%;
    }
    
    #main-slider{
        height:  350px;
    }
    #main-caption{
        height: 350px;
    }

    .section-area .container{
         flex-direction: column;
            
     }
     
     footer .container {
         width: 90%;
     }
     .footer-item img{
         height: 50px
           
     }
     footer .col3{
         width: auto
     }
 }
    
@media screen and (max-width: 555px) {
    .caption h1 {
        color: white;
        font-size: 18px;
        letter-spacing: 1px;       
    }
    .caption p {
        font-size: 13px;
        padding: 0       
    }
    .gallery-slider{
        overflow: hidden;
        margin:0 auto;
        width: 350px;
        height: 224px;
        transition: all .5s ease
    }
    .gallery-slider-item{
        width: 5600px;
        position: relative;
        left: 0;
        animation: slide-animation 120s infinite;
    }
    .gallery-slider-item:hover{
        -webkit-animation-play-state:paused;
    }

    .gallery-slider-item img{
        width: 350px;
        height: 224px;
        float: left;
    
    }
}
    
 @media screen and (max-width: 413px) {
    .caption h1 {
        color: white;
        font-size: 13px;
        letter-spacing: 1px; 
        padding: 0
    }
    .caption p {
        font-size: 10px;
        padding: 0  
    }
     
    #main-slider{
        height:  300px;
    }
    #main-caption{
        height: 300px;
    }
     .menu .menu-col3  a{
         font-size: 10px;
         letter-spacing: 0px;
         padding: 15px 16px
     }
      .gallery-slider{
        overflow: hidden;
        margin:0 auto;
        width: 250px;
        height: 160px;
        transition: all .5s ease
    }
    .gallery-slider-item{
        width: 4000px;
        position: relative;
        left: 0;
        animation: slide-animation 120s infinite;
    }
    .gallery-slider-item:hover{
        -webkit-animation-play-state:paused;
    }

    .gallery-slider-item img{
        width: 250px;
        height: 160px;
        float: left;
  
}
 @media screen and (max-width: 323px) {
    .caption h1 {
        color: white;
        font-size: 11px;
        letter-spacing: 1px; 
        padding: 0
    }
    .caption p {
        font-size: 9px;
        padding: 0       
    }
     .menu li{
         font-size: 9px;
     }
      #main-slider{
        height:  250px;
    }
    #main-caption{
        height: 250px;
    }
    
}