@charset "utf-8";
/* CSS Document */

body{
    background-color: #dee2e6;
}
.grey-bg {
    background: #dee2e6;
}
.header-shape::before {
    background-image: -moz-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
    background-image: -webkit-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
    background-image: -ms-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
}
.header-shape::after {
    background: #3A81C2;
}
.header-top-info span i {
    color: #3A81C2;
}
.header-top-info span {
    font-size: 13px;
}
.white-btn {
    color: #3A81C2;
}
.lang-icon i {
    color: #3A81C2;
}
.header-lang-list {
    border-top: 3px solid #3A81C2;
}
.menu-3 .main-menu nav > ul > li:hover > a, .main-menu nav > ul > li.active > a {
    color: #3A81C2;
}
.main-menu nav > ul > li .sub-menu {
	border-top: 3px solid #3A81C2;
}
.main-menu nav > ul > li:hover > .sub-menu li > a:hover {
    background: #3A81C2;
}
.main-menu nav > ul > li:hover > a, .main-menu nav > ul > li.active > a {
    color: #3A81C2;
}
.header-2-button a.btn:hover {
    color: #3A81C2;
}

.dil{
    display: none;    
}
.info-bar {
    cursor: pointer;
}

.extra-info {
    position: fixed;
    right: -350px;
    top: 0;
    width: 350px;
    height: 100%;
    background: #111;
    z-index: 9999;
    overflow-y: auto;
    transition: 0.4s;
    padding: 30px;
}

.extra-info.info-open {
    right: 0;
}

.offcanvas-overlay {
    position: fixed;
    background: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    z-index: 9998;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.offcanvas-overlay.offcanvas-overlay-open {
    opacity: 1;
    visibility: visible;
}

.mobile-lang-option > a {
    font-weight: 600;
    color: #3A81C2 !important;
}
.yan_bar_tus{
    margin-left: 10px;
}
.header-lang-list li a:hover {
    color: #3A81C2;
}
.close-icon > button {
    color: #3A81C2;
}
.main-menu nav > ul > li > a {
    text-transform: unset;
}
.main-menu nav > ul > li .sub-menu li a {
    text-transform: unset;
}
.beyaz {
    color: #ffffff;
}
.slider-02-active .slick-arrow {
    color: #3A81C2;
}
.slider-02-active .slick-arrow:hover {
    background-image: -moz-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
    background-image: -webkit-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
    background-image: -ms-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
}
.golge{
    text-shadow: 5px 5px 2px rgba(0,0,0,0.75);
}
.btn {
    color: #ffffff;
    background-image: -moz-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
    background-image: -webkit-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
    background-image: -ms-linear-gradient(-51deg, #000000 0%, #3A81C2 99%);
}
.slider-button a.btn:hover {
    background: #ffffff;
    color: #3A81C2;
}
.features-03-icon-img img{
    max-height: 40px;
}
.features-03-img::after {
    background-image: -webkit-linear-gradient(-90deg, rgba(58, 129, 194, 0.85882) 0%, rgba(0, 0, 0, 0.43) 50%, rgba(58, 129, 194, 0.01) 100%, #3A81C2 100%);
}
.b-button > a:hover {
    color: #3A81C2;
    border-color: #3A81C2;
}
.features-03-img::before {
    background-image: -webkit-linear-gradient(-90deg, rgba(2, 2, 2, 0.5) 0%, rgb(0 0 0 / 45%) 58%, rgba(58, 129, 194, 0.01) 100%, #3A81C2 100%);
}
.our-skills-text a.white-btn {
    color: #ffffff;
}
.our-skills-text a.white-btn:hover {
    color: #3A81C2;
}
.progress-circular input {
    font-size: 40px !important;
}
.search-icon a:hover {
    color: #3A81C2;
}
.social-icon-right > a:hover {
    color: #3A81C2;
}
.header-icon a:hover {
    color: #3A81C2;
}
.section-title > span {
    color: #3A81C2;
}
.line::before {
    background: #3A81C2;
}
.border-right-1 {
    background: #3A81C2;
}
.border-left-1 {
    background: #3A81C2;
}
.blog-date > a {
    background: #3A81C2;
}
.blog-text h3 > a:hover {
    color: #3A81C2;
}
.ana_haber{
    overflow: hidden;
    height: 225px;
    min-height: 225px;
}
.brand-img{
    max-height: 90px;
    overflow: hidden;
}
.copyright p a {
    color: #3A81C2;
}
.footer-icon a:hover {
    background-image:none;
    background-color: #3A81C2;
    border-color: #3A81C2;
}
.breadcrumb-menu li a {
    color: #3A81C2;
    font-weight: 500;
    font-size: 24px;
}
.breadcrumb-menu span {
    font-size: 24px;
    text-transform: unset;
}
.breadcrumb-menu li::before {
    font-size: 24px;
}
.breadcrumb-menu span:hover {
    color: #3A81C2;
}
.breadcrumb_golge{
    text-shadow: 2px 2px 2px rgba(0,0,0,0.75);
}

.inner-project {
    margin-top: -60px;
    background: #ffffff91;
}
.project-content h3 > a:hover {
    color: #3A81C2;
}
.basic-pagination-2 ul li a:hover, .basic-pagination-2 ul li.active a {
    background: #3A81C2;
    color: #ffffff;
    border-color: #3A81C2;
}
.contact-us-icon i {
    background: #3A81C2;
}
.case-details-text p {
    margin-bottom: 20px;
}
.slider-content h2 {
    font-size: 54px;
    color: #cccccc;
}
.breadcrumb-text > h1 {
    font-size: 54px;
    text-transform: unset;
    color: #cccccc;
}
.footer-link ul li {
    color: #d4d4d4;
    font-size: 14px;
    font-weight: 400;
}
.footer-title::before {
    background: #3A81C2;
}
.footer-link ul li a:hover {
    color: #3A81C2;
    border-bottom: 1px solid #3A81C2;
}
.case-details-text p{
    color: #6c757d;
}
.iletisim_en{
    max-width: 277px;
}
.galeri_alan{
    height: 425px;
    overflow: hidden;
    margin-bottom: 30px;
}

.single-project .galeri_alan {
    border: 4px solid #3A81C2;
}


@media only screen and (max-width: 2560px) {
    .galeri_alan{
        height: 425px;
    }
}

@media only screen and (max-width: 2300px) {
    .galeri_alan{
        height: 380px;
    }
}

@media only screen and (max-width: 2100px) {
    .galeri_alan{
        height: 310px;
    }

}


@media only screen and (max-width: 1920px) {
    .galeri_alan{
        height: 275px;
    }

}

@media only screen and (max-width: 1700px) {
    .galeri_alan{
        height: 250px;
    }

}
@media only screen and (max-width: 1500px) {
    .header-02-lang {
        display: inline-block;
    }
    .galeri_alan{
        height: 270px;
    }
}


@media only screen and (max-width: 1440px) {
    .brand-img{
        max-height: 85px;
    }
    .galeri_alan{
        height: 250px;
    }
}

@media only screen and (max-width: 1300px) {
    .galeri_alan{
        height: 200px;
    }
}

@media only screen and (max-width: 1199px) {
    .dil{
        float: right;
        margin-left: 20px;
        display: block;
    }
    .brand-img{
        max-height: 70px;
    }
    .slider-content h2 {
        font-size: 46px;
    }
    .breadcrumb-text > h1 {
        font-size: 46px;
    }
    .breadcrumb-menu li a {
        font-size: 16px;
    }
    .breadcrumb-menu span {
        font-size: 16px;
    }
    .breadcrumb-menu li::before {
        font-size: 16px;
        top: 0px;
    }
}   


@media only screen and (max-width: 1024px) {
    .galeri_alan{
        height: 190px;
    }
    .slider-content h2 {
        font-size: 36px;
    }
    .breadcrumb-text > h1 {
        font-size: 36px;
    }
}   


@media only screen and (max-width: 992px) {
    .brand-img{
        max-height: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .galeri_alan{
        height: 280px;
    }
    .iletisim_en{
        max-width: unset;
    }
}

@media only screen and (max-width: 850px) {
    .galeri_alan{
        height: 220px;
    }
}

@media only screen and (max-width: 767px) {
    .brand-img{
        max-height: 58px;
    }
    .galeri_alan{
        height: 400px;
    }
    .slider-content h2 {
        font-size: 24px;
    }
    .breadcrumb-text > h1 {
        font-size: 24px;
    }
    .golge{
        text-shadow: 3px 3px 2px rgba(0,0,0,1);
    }
    .breadcrumb-menu li a {
        font-size: 12px;
    }
    .breadcrumb-menu span {
        font-size: 12px;
    }
    .breadcrumb-menu li::before {
        font-size: 12px;
        top: 5px;
    }
    .mobil_orta{
        text-align: center !important;
        margin-bottom: 15px;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 766px) {
    .brand-img{
        max-height: 123px;
    }
}

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

}





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

    
}



@media only screen and (max-width: 576px) {
    .galeri_alan{
        height: unset;
    }
}

@media only screen and (max-width: 475px) {
    .brand-img{
        max-height: 107px;
    }
}

@media only screen and (max-width: 425px) {
    .brand-img{
        max-height: 95px;
    }
}

@media only screen and (max-width: 375px) {
    .brand-img{
        max-height: 83px;
    }
}

@media only screen and (max-width: 320px) {
    .brand-img{
        max-height: 70px;
    }

}