/* @import "/fonts/icofont/icofont.min.css"; */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap');

:root {
    --yesil: #0f5650;
    --aciksari: #ce9568;
    --gri: #666666;
    --acikmavi: #eef1f2;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-monserrat: 'Montserrat', sans-serif;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.clr-green {
    color: var(--yesil);
}

p i {
    color: var(--aciksari);
}

a:hover {
    text-decoration: none;
}

h1 {
    color: var(--yesil);
}

.no-border {
    border: none;
}
.card-img{position:relative}
.card .card-custom-img h2 {
    font-family: 'Montserrat', sans-serif !important;
    position: absolute;
    bottom:-38px;
    font-weight: 900 !important;
}

.card-title {
    color: var(--yesil);
}

.card-text {
    margin-top: 5%;
    font-size: 10pt;
}

.card-text {
    font-family: var(--font-family-monserrat) !important;
    color: #666666;
}

.yesil-bg {
    background-color: var(--yesil);
    color: white;
    font-family: var(--font-family-monserrat);
    font-weight: 500;
}

ul li {
    list-style: none;
}

p {
    font-family: var(--font-family-monserrat);
}

body {
    border-top: 5px solid var(--aciksari);
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

header .navbar-green {
    background-color: var(--yesil);
    padding: 15px;
}

.navbar {
    background-color: #f3f3f3;
    font-family: 'Montserrat', sans-serif;
}

    .navbar .social-media {
        display: flex;
    }

        .navbar .social-media .item {
            margin-left: 10px;
            width: 35px;
            height: 35px;
            border: solid 2px #fff;
            border-radius: 50%;
            display: flex;
        }

            .navbar .social-media .item a {
                text-align: center;
                align-items: center;
                justify-items: center;
                color: white;
                font-size: 15pt;
                transition: all 280ms ease;
            }

            .navbar .social-media .item:hover {
                color: white;
                border: solid 2px var(--aciksari);
                box-shadow: 0 0 0 2px var(--aciksari) inset;
                background-color: var(--aciksari)
            }

.navbar-nav {
    margin: 15px;
    font-size: 13pt;
}

    .navbar-nav .nav-item {
        padding-left: .5rem !important;
        padding-right:.5rem !important;
    }
    .navbar-nav .nav-item .nav-link{color:#666666!important;font-weight:bold;font-size:15px;  border-bottom: 2px white solid;transition:all ease .5s;}
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:hover {
        transition: 0.1s ease-in;
        border-bottom: 2px var(--aciksari) solid;
        color: #ce9568 !important;
        text-shadow: 0 2px 10px rgba(204, 126, 64, 0.20)
    }

.icon-count-2-outer {
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    overflow: hidden;
    padding: 5px 0px;
}

.sx-icon-box-wraper {
    position: relative;
}

.icon-count-2-outer:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    bottom: -10px;
    width: 100%;
    height: 50%;
    background-color: #d7b39a;
    opacity: 0.4;
    z-index: -1;
    display: block;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.icon-count-2-outer .icon-count-2 {
    padding: 100px 30px 30px 30px;
    margin: 0px 5px;
}

    .icon-count-2-outer .icon-count-2 span.icon-count-number {
        position: absolute;
        right: 30px;
        top: 20px;
        font-size: 80px;
        font-weight: 100;
        color: rgba(177, 177, 177, 0.2);
        line-height: 120px;
        font-family: 'Montserrat', sans-serif;
        transition: 0.3s;
    }

        .icon-count-2-outer .icon-count-2 span.icon-count-number:after {
            content: "";
            width: 15px;
            height: 2px;
            background-color: var(--yesil);
            left: -50%;
            top: 50%;
            position: absolute;
            color: var(--yesil);
            margin-top: -2px;
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
        }

.sx-icon-box-wraper:hover .scale-in-center {
    -webkit-animation: bounce-in-fwd 1.1s both;
    animation: bounce-in-fwd 1.1s both;
}

.counter-blocks .sx-icon-box-wraper:hover {
    background-color: #d7b39a;
    color: #000;
}

    .counter-blocks .sx-icon-box-wraper:hover .sx-text-primary {
        color: #000;
    }

.icon-count-2-outer:hover .icon-count-2 span.icon-count-number:after {
    width: 40px;
}

.icon-count-2-outer:hover {
    -webkit-box-shadow: 0 10px 30px 0 rgba(50, 50, 50, .16);
    box-shadow: 0 10px 30px 0 rgba(50, 50, 50, .16);
}

    .icon-count-2-outer:hover:after {
        height: 200%;
    }

.icon-count-2-outer .icon-count-2 span.icon-count-number:after {
    content: "";
    width: 15px;
    height: 2px;
    background-color: #000;
    left: -50%;
    top: 50%;
    position: absolute;
    margin-top: -2px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.sx-icon-box-xld .icon-cell, .sx-icon-box-xl .icon-cell, .sx-icon-box-lg .icon-cell, .sx-icon-box-md .icon-cell, .sx-icon-box-sm .icon-cell, .sx-icon-box-xs .icon-cell {
    display: table-cell;
    vertical-align: middle;
}

.icon-cell i {
    color: var(--aciksari);
}

.icon-xl {
    font-size: 2rem;
}

    .icon-xl.inline-icon {
        width: auto;
    }

.icon-font-block:hover .flat-icon {
    -webkit-animation: bounce-in-fwd 1.1s both;
    animation: bounce-in-fwd 1.1s both;
}

.sx-icon-box-wraper:hover .scale-in-center {
    -webkit-animation: bounce-in-fwd 1.1s both;
    animation: bounce-in-fwd 1.1s both;
}

.hover-animation-1:hover .scale-in-center {
    -webkit-animation: bounce-in-fwd 1.1s both;
    animation: bounce-in-fwd 1.1s both;
}

@-webkit-keyframes bounce-in-fwd {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: scale(0.84);
        transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-fwd {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: scale(0.84);
        transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

.sx-box, .sx-info, .sx-tilte, .sx-tilte-inner {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: var(--yesil);
}

.sx-icon-box-wraper:hover .icon-count-2 .icon-content .sx-tilte {
    color: var(--aciksari);
}

.sx-tilte-inner {
    display: inline-block;
}

    .sx-tilte-inner.skew-title:after {
        content: "";
        position: absolute;
        right: -15px;
        top: 0;
        width: 50px;
        height: 100%;
        z-index: -1;
        -moz-transform: skewX(20deg);
        -webkit-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        transform: skewX(20deg);
    }

#services {
    background-color: var(--acikmavi);
}

.bizeulasin {
    display: flex;
    align-content: center;
    align-items: center;
}

.btn-contact {
    display: inline-block;
    font-weight: 700;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #cc7e40;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    width: 12rem;
    transition: ease-in 1s;
}

    .btn-contact:hover {
        animation: pulse 1s;
        box-shadow: inset 6.5em 0 0 0 var(--acikmavi);
        text-decoration: none;
        background-color: var(--aciksari);
        color: #333;
        background-color: white;
    }

#ekibimiz {
    background-image: url('/images/ekibimiz-bg.png');
}

    #ekibimiz .box {
        width: 100%;
    }

        #ekibimiz .box .contact{
            position: absolute;
            align-items: center;
            justify-content: center;
            display: flex;
            top: 7px;
            left: 22px;
            color: white;
            margin: 0 auto;
            width: calc(90% - 15px);
            height: calc(73% - 15px);
            visibility: hidden;
            font-family:Montserrat;
            -webkit-transition: background-color .5s ease-out;
            -moz-transition: background-color .5s ease-out;
            -o-transition: background-color .5s ease-out;
            transition: background-color .5s ease-out;
            font-size:14px;
        }
  ul.social-team{list-style-type:none;width:270px;position:absolute;bottom:10px;}
        ul.social-team li{float:left;margin-left:5px}
        ul.social-team li a{width: 20px; height: 20px; color: #fff; text-align: center;padding:8px;}
#counter {
    background-color: #eef1f2;
    margin: 0;
    padding: 0;
}

#ekibimiz h2 {
    color: var(--yesil);
    font-weight: 700;
}

#ekibimiz .box:hover .contact {
    background-color: rgba(206, 149, 104, 0.9);
    color: white;
    visibility: visible;
}

#ekibimiz .box .info {
    padding: 15px 5px 15px 15px;
    background-color: #0f5650;
    color: white;
}

    #ekibimiz .box .info .positions::after {
        position: absolute;
        content: "";
        bottom: 10px;
        left: 11%;
        border-bottom: var(--aciksari) solid 3px;
        width: 25%;
    }

#ekibimiz .box img {
    width: 100%;
}

#counter h5 {
    margin-top: 15px;
    color: var(--yesil);
}

#counter h6 {
    color: #8a4d35;
}

#counter .seperator {
    margin-top: 1rem;
    width: 30px;
    margin-left: 45%;
    border: 3px solid var(--yesil);
}

.ref {
    padding: 30px;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-right: 2px solid #dddddd;
    margin-left: -30px;
}

    .ref:last-child {
        border-right: none;
    }

.referance img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

    .referance img:hover {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }

.ref img {
    padding: 30px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

    .ref img:hover {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }

.cizgi {
    width: 1rem;
    height: 1rem;
    border-bottom: 4px solid var(--yesil);
}

footer {
    background-color: var(--yesil);
}

footer {
    border-top: var(--aciksari) solid 50px;
}

    footer p {
        color: white;
    }

        footer p i {
            color: var(--aciksari);
        }

    footer .footer-contact {
        border-left: var(--aciksari) 2px solid;
    }

        footer .footer-contact a {
            color: white;
        }

            footer .footer-contact a:hover {
                color: #ce9568;
                transition: all ease-in-out .5s;
            }

    footer .aralayici {
        border-top: 3px solid var(--aciksari);
    }

    footer .copyright {
        width: 100%;
        height: 100%;
        display: inline-block;
    }

.banner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
}

    .banner img {
        opacity: 0.4;
        width: 100%;
        height: 430px;
    }

    .banner .breadcump {
        position: absolute;
        display: block !important;
        top:87.5px;
        margin-left:0;
        z-index: 10;
        font-size: 20pt;
        color: #0f5650;
        width:100%
    }

        .banner .breadcump a {
            font-size: 20pt;
            margin-bottom: 10px;
            color: var(--yesil);
        }

        .banner .breadcump small {
            font-size: 20pt;
            margin-bottom: 10px;
            color: var(--yesil);
        }

        .banner .breadcump h1 {
            font-size: 35pt;
            font-weight: lighter !important;
        }

        .banner .breadcump .seperator {
            border-bottom: var(--aciksari) 5px solid;
            width: 5rem;
            margin-bottom: 10px;
        }

        .banner .breadcump p {
            padding: 0px !important;
            font-size: 12pt;
            color: #666666;
        }

.card-item {
    width:100%;
    float:left;
    position:relative;
    overflow:hidden;
}
.card-bg {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(27,27,27,1) 100%);
    position:absolute;left:0;top:0;
    width:100%;height:100%;z-index:1;
    opacity:0;
    transition:all ease .4s
}
.card-icon{color:#fff;right:-100px;border:solid 2px #fff;text-align:center;height:30px;width:30px;line-height:25px;z-index:3;position:absolute;top:30px;transition:all ease .5s}
.card-item img{width:100%}
.card-info{position:absolute;top:calc(100% - 45px);color:#fff;padding:0 15px;font-family:Montserrat;transition:all ease .5s;text-align:left;z-index:3}
.card-info h4{margin-bottom:25px;padding-bottom:25px;transition:all ease .5s}

.card-item:hover .card-info{top:60%;}
.card-item:hover .card-info h4{margin-bottom:5px;padding-bottom:5px}
.card-item:hover .card-icon{right:30px}
.card-item:hover .card-bg{opacity:1;}
.card-icon:hover{background:#ce9568}
.card-button a{width:100%;background:#ce9568;color:#fff;text-align:center;padding:8px 0;float:left}
.proje-nav ul {text-align: center;}

    .proje-nav ul li {
        list-style-type: none;
        float: left;
        padding: 15px;
        margin-left: 5px;
    }

        .proje-nav ul li a {
            color: var(--yesil);
        }

    .proje-nav ul .active {
        border-bottom: var(--aciksari) solid 3px;
    }

    .proje-nav ul li:hover {
        border-bottom: var(--aciksari) solid 1px;
    }

.mevzuat-item {
    border: 1px solid lightgrey;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    height: 100%;
}

    .mevzuat-item:hover {
        box-shadow:rgba(51, 51, 51, 0.36) 0 0 19px
    }

        .mevzuat-item:hover .btn-mevzuat{color:#fff}
        .mevzuat-item:hover .btn-mevzuat:before {
            width: 115%
        }

    .mevzuat-item .btn-mevzuat {
        bottom: 0;
        display: inline-block;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        color: var(--yesil);
        user-select: none;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        /*border-left: solid 6px var(--yesil);*/
        border-radius: 0px;
        padding: 5px 10px;
        position:relative;
    }
      .mevzuat-item .btn-mevzuat:before{content:'';position:absolute;left:-8px;width:8px;height:34px;background:#666;top:0;transition:all ease .5s;z-index:-1}
.btn-blog {
    bottom: 0;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: black;
    user-select: none;
    padding: .375rem .75rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-bottom: solid 2px var(--yesil);
    border-radius: 0px;
    padding: 5px 10px;
}

    .btn-blog:hover {
        color: white;
        background-color: var(--yesil);
    }

.post img {
    width: 100%;
}

.post .text-center {
    background-color: #eef1f2;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
}

@media (max-width:768px) {
    body{overflow-x:hidden}
    .logo{margin:0 auto}
    .navbar .social-media{margin-top:25px}
    .banner .breadcump p{display:none}
    .banner .breadcump{top:4%}
    .banner img{height:auto}
    .owl-nav{margin-top:-28px}
    #ekibimiz .box .contact { width: calc(94% - 15px); height: calc(82% - 15px);}
    #ekibimiz .box{margin-bottom:10px}
    .proje-nav ul li{float:left;width:100%}
    .proje-nav ul{margin:0;padding:0}
    .referance{text-align:center}
    .pimg-scroll{margin:25px 0}
    .pimg-scroll .col-md-6{width:50%}
}