// 
// Agency Layout
// 


.hero-agency {
    background-image: url("../images/agency/hero-bg.png");
    background-size: cover;
    width: 100%;
    padding: 200px 0 40px;
    .hero-title-badge {
        display: inline-block;
        background-color: $gray-100;
        border: 1px solid darken($gray-100, 4%);
        padding: 2px 15px;
        color: $gray-600;
        border-radius: 3px;
    }
    .hero-title {
        font-size: 60px;
        color: $dark;
        line-height: 1.25;
    }
}



// About us
.about-icon {
    position: relative;
    display: inline-block;
    z-index: 0;
    &::after {
        content: "";
        position: absolute;
        left: -16px;
        top: -36px;
        border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%;
        height: 100px;
        width: 100px;
        background: linear-gradient(to top right, transparent 0%, $primary 100%);
        opacity: 0.15;
        z-index: -1;
    }
}



// Projects
.busi-container-filter {
    li {
        list-style: none;
        display: inline-block;
        a {
            display: block;
            font-size: 16px;
            color: $gray-600;
            background-color: $gray-100;
            padding: 0px 15px;
            margin: 5px 3px;
            cursor: pointer;
            line-height: 34px;
            border-radius: 3px;
        }
    }
}

.filter-box {
    display: none;
    &.show {
        display: block;
    }
  
    .item-box {
        position: relative;
        .item-mask {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            cursor: pointer;
        }
    }
}

.tab-active {
    &:hover {
        background-color: $gray-200;
    }
    &.active {
        background-color: $primary;
        color: $white;
        box-shadow: 0px 8px 12px 0px rgba($primary, .25);
    }
}

#mkLightboxContainer {
    #prevContainer, #nextContainer {
        top: 50%;
        transform: translateY(-50%);
        height: auto;
    }
}



// Testimonials
.testi-bg {
    background-color: rgba($warning, 0.25);
    .testi-row {
        overflow: hidden;
        .clients-slider {
            padding: 20px 0 50px;
            .swiper-wrapper {
                .swiper-slide {
                    padding: 0 6px;
                }
            }
            .swiper-pagination {
                bottom: 0;
                .swiper-pagination-bullet {
                    background-color: $dark;
                    opacity: 0.3;
                    &.swiper-pagination-bullet-active {
                        opacity: 1;
                    }
                }
            }
        }
    }
}


// counter
.counter-content {
    .counter_value {
        font-size: 40px;
    }
}

// team
.team-bg {
    background-color: darken($gray-100, 2%);
}



// responsive 
@media (max-width: 991.98px) {
    .hero-agency {
        padding: 100px 0 0px;
    }
}

@media (max-width: 768px) {
    .hero-agency {
        .hero-title {
            font-size: 48px !important;
        }
    }
}