html{ scroll-behavior: smooth; }
body{ font-family: 'Lato', sans-serif; background-color: transparent; }
.modal .modal-header{ border-bottom: 0; position: relative; z-index: 2; }
.modal-content{ padding: 50px; border-radius: 75px; }
.modal-body{ margin-top: -2rem; }
label{ font-weight: 600; }








/***** LEFT FIX NAV *****/
#left-fix-nav{ position: fixed; left: 1.5rem; top: 30%; width: 30px; z-index: 10; }

/* LIST GROUP ITEM */
#left-fix-nav > .list-group-item{ background-color: transparent; border: none; color: #737373; padding-bottom: 0; }
#left-fix-nav > .list-group-item > .number{
    font-size: 46px; font-weight: bold; letter-spacing: 3px; margin-left: -1.1rem;
    display: none;
}
#left-fix-nav > .list-group-item > .title{ width: 150px; white-space: nowrap; }
#left-fix-nav > .list-group-item > .title > .point{
    display: inline-block; height: 10px; width: 10px; background-color: #737373; border-radius: 100%;
    margin-right: 25px; transition: .5s;
}
#left-fix-nav > .list-group-item > .title > .text{ font-size:14px; font-weight: bold; display: none; }
#left-fix-nav > .list-group-item > .line{
    width: 2px; height: 0px; background-color: #737373; transition: .5s;
    margin-left: 4px; margin-top: 15px; margin-bottom: 0px;
}

/* ACTIVE LIST GROUP ITEM */
#left-fix-nav > .list-group-item.active{ color: white; }
#left-fix-nav > .list-group-item.active > .number{ display: block; }
#left-fix-nav > .list-group-item.active > .title{  }
#left-fix-nav > .list-group-item.active > .title > .point{ background-color: white; }
#left-fix-nav > .list-group-item.active > .title > .text{ display: inline; }
#left-fix-nav > .list-group-item.active > .line{ background-color: white; height: 80px; margin-bottom: 10px; }

/* DARK */
#left-fix-nav.dark > .list-group-item > .title > .point{ background-color: #a4a4a4; }
#left-fix-nav.dark > .list-group-item.active{ color: #333; }
#left-fix-nav.dark > .list-group-item.active > .number{  }
#left-fix-nav.dark > .list-group-item.active > .title{  }
#left-fix-nav.dark > .list-group-item.active > .title > .point{ background-color: #333; }
#left-fix-nav.dark > .list-group-item.active > .title > .text{ display: inline; }
#left-fix-nav.dark > .list-group-item.active > .line{ background-color: #333; }
/***** LEFT FIX NAV *****/









/***** HEADER *****/
#nav{
    position: absolute; z-index: 2; width: 100%; top: 0; left: 0;
    padding-top: 3rem;
}
#nav.fixed-top{ position: fixed; top: 0; left: 0; right: 0; z-index: 2; background: linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,.1)); padding-top: .5rem; /*transition: .5s;*/ }
#nav-collapse .nav-link{ padding-right: 1rem; padding-left: 1rem; font-size: 20px; color: #FFF; }
#nav-search-form input{ border-radius: 50px; background: transparent; }
#nav .dropdown-menu{ background: transparent; padding: 0; }
#nav .dropdown-menu .dropdown-item{ background-color: rgba(0,0,0,0.4); color: #FFF; margin-top: 2px; transition: .2s; font-size: 13px; }
#nav .dropdown-menu .dropdown-item:hover{ background-color: rgba(0,0,0,0.7); }
.dropend .dropdown-toggle::after{ margin-left: .450rem; }
#header{ margin-bottom: 0; }
#nav .navbar-brand img{  }
/***** /HEADER *****/








/***** MAIN *****/
section.wrapper{ height: 100vh; position: relative; }
section.wrapper .scroll-spy-point{ position: absolute; top: -30%; left: 0; height: 1px; }
section.wrapper .wrapper-padding{ padding: 5rem 0; }
section.wrapper .header{}
section.wrapper .header > .title{ font-weight: bold; font-size: 40px; letter-spacing: 15px; margin-top: 5rem; }
section.wrapper .header > .title:after{
    margin-top: 25px;
    content: ''; width: 330px; height: 2px; background-color: #c0a175;
    display: block;
}
section.wrapper .header > .title2{ font-weight: bold; font-size: 70px; letter-spacing: 15px; margin-top: 5rem; text-align: center; }
section.wrapper .content{}

/* DARK WRAPPER */
section.wrapper.dark{ background-color: #333; color: white; }
section.wrapper.dark .header > .title{ color: white; }
section.wrapper.dark .content{ color: white; }

#top-social{ position: absolute; right: 30px; top: 40%; color: #FFF; }
#top-social .item{ margin-bottom: 1.5rem; transition: .2s; text-align: center; }
#top-social .item:hover{ transform: scale(1.5); }
#top-social .item a{ color: white; transition: .2s; }
#top-social .item a:hover{ color: #c0a175; }

#about-us .wrapper-padding{ display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; }
#about-us .container{ position: relative; height: 100%; }
#about-us .header{ margin: auto; }
#about-us .content{ margin: auto; }
#about-us .content:before{ content: ''; height: 2px; width: 400px; max-width: 100%; background-color: #ededed; display: inline-block; margin-bottom: 2rem; }


#service{ }
#service .list{ list-style: none; padding: 0; font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 7rem; font-family: 'Montserrat', sans-serif; }
#service .second-title{ font-size: 26px; font-weight: 600; color: rgba(255,255,255,0.5); }
#service .second-description{ }

#project{ }
#project .project-titles{ list-style: none; padding: 0; font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 7rem; }
#project .project-titles li{ margin: 0 0 20px 0; cursor: pointer; }
#project .project-titles li.active{ color: #FFF; font-family: 'Montserrat', sans-serif; }
#project .projects-gallery-slider-wrapper{  }
#project .projects-gallery-slider-wrapper .project-wrapper{ display: none;}
#project .projects-gallery-slider-wrapper .project-wrapper.active{ display: block;}

#project .project-wrapper .item{  }
#project .project-wrapper .item .box{  }
#project .project-wrapper .img-wrapper{  }
#project .project-wrapper .img-wrapper img{ width: 258px; height: 407px; object-fit: cover;  }
#project .project-wrapper .uk-position-small{ color: #FFF; }
#project .project-wrapper .uk-position-small:hover{ color: #0dcaf0; }
#project .project-wrapper .uk-dotnav > * > *{ border: 1px solid #FFF; }
#project .project-wrapper .uk-dotnav > .uk-active > *{ background-color: #FFF; }




#contact .left-wrapper{ display: flex; flex-direction: column; justify-content: center;  margin-top: -5rem; margin-bottom: -5rem; padding-left: 15rem;}
#contact .left-wrapper > .header{ margin-bottom: auto; margin-top: 3rem; }
#contact .left-wrapper > .content{ margin-top: auto; margin-bottom: auto; }
#contact .left-wrapper > .footer{ margin-top: auto; margin-bottom: 2rem; color: rgba(255,255,255,0.7); }

#contact .contact-info .line{ margin-bottom: 2rem; }
#contact .contact-info .icon-wrapper{ display: inline-block; margin-right: 30px;  vertical-align: top; color: rgba(255,255,255,0.7); }
#contact .contact-info .content{ display: inline-block; }
#contact .contact-info .content .title{ font-size: 18px; font-weight: 600; }
#contact .contact-info .content .text{ color: rgba(255,255,255,0.5); }

#contact .right-wrapper{ position: relative; margin-top: -5rem; margin-bottom: -5rem; padding-left: 0; }
#contact-form{ position: absolute; bottom: 100px; padding: 60px; background-color: #FFF; z-index: 10; width: 60%; left: 60px; }
#contact-form .form-control{ margin-bottom: 30px; }
#contact-form input{ border-radius: 0; }
#contact-form textarea{ border-radius: 0; }
#contact-form .btn{ border-radius: 0; }
/***** /MAIN *****/

#footer{  }
#footer a{ color: #FFF; }









/***** RESPONSIVE *****/
@media only screen and (min-width: 992px){

}


@media only screen and (max-width: 1400px){
    #contact-form{ bottom: 20px; }
    #contact-form input{ padding: 5px 10px; font-size: 16px; margin-bottom: 15px !important; }
    #contact-form textarea{ padding: 5px 10px; font-size: 16px; margin-bottom: 15px !important; }
    #left-fix-nav > .list-group-item > .title > .text{ display: none !important; }
    #left-fix-nav.dark > .list-group-item > .title > .text{ display: none; }
}
@media only screen and (max-width: 1200px){

}
@media only screen and (max-width: 992px){



}
@media only screen and (max-width: 768px){

    #anasayfa-slider .carousel-item{
        mask-size    : 130% !important;   -webkit-mask-size    : 130% !important;
        mask-position: center !important; -webkit-mask-position: center !important;
    }

    section.wrapper{ height: auto; min-height: 100vh; }
    #contact .left-wrapper{ padding-left: var(--bs-gutter-x,.75rem); }

    .carousel-caption{ margin-left: 0 !important; }
    .carousel-caption .small-h{ margin-left: 0 !important;  }
    #top-social{ bottom: 10px; top: unset;}
    .navbar-toggler{ display: none; }
    section.wrapper .header > .title2{ font-size: 30px; }

    #service .second-wrapper{ margin-top: 2rem; }
    #service .list{ }
    #service .list li{ margin-bottom: 0 !important; }
    #service .second-title{  }
    #service .second-description{ }

    #about-us > .container{ min-height: 100vh; }
    #about-us > .container > .wrapper-padding{ min-height: 100vh; }

    #contact-form{ display: none; }

    #contact .right-wrapper{ margin-top: 6rem; margin-bottom: 0; height: 300px; padding-left: calc(var(--bs-gutter-x)/ 2); }
    #map{  }
    #left-fix-nav{ display: none; }
    #contact .wrapper-padding{ padding: 0 0 2rem 0; }

    #project .project-titles{ margin-top: 1rem;}
    #project > .container{ min-height: 100vh; }
    #project .project-wrapper .img-wrapper img{
        width: 100%;
    }

    section.wrapper.dark .header > .title{ font-size: 30px; }

}
@media only screen and (max-width: 576px){

    #header .navbar-brand img{ width: 200px; image-rendering:-webkit-optimize-contrast;   }
    #header .navbar-toggler{ margin-right: unset; }
    #header .navbar-collapse .navbar-nav{ margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }

}
/***** RESPONSIVE *****/