/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.fluid-width-video-wrapper {
    padding: 0 !important;
    width: 100% !important;
    height: 113% !important;
}

#slider .image-slider:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .3;
    z-index: 9;
    top: 0;
    left: 0;
}

.portfolio-item .portfolio-image img {
    transition: 400ms;
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.2) !important;
    transition: 400ms;
}


/*** services-list ***/

img.service-img-0 {
    clip-path: polygon(15% 0%, 30% 15%, 15% 100%, 0% 85%);
    transition: 400ms;
}

img.service-img-0:hover,
img.service-img-0.hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 9;
    position: relative;
    transition: 400ms;
}

img.service-img-1 {
    clip-path: polygon(33% 0%, 48% 15%, 33% 100%, 18% 85%);
    margin-top: -555px;
    transition: 400ms;
}

img.service-img-1:hover,
img.service-img-1.hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 9;
    position: relative;
    transition: 400ms;
}

img.service-img-2 {
    clip-path: polygon(51% 0%, 65% 15%, 50% 100%, 36% 85%);
    margin-top: -600px;
    transition: 400ms;
}

img.service-img-2:hover,
img.service-img-2.hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 9;
    position: relative;
    transition: 400ms;
}

img.service-img-3 {
    clip-path: polygon(68% 0%, 82% 15%, 67% 100%, 53% 85%);
    margin-top: -650px;
    transition: 400ms;
}

img.service-img-3:hover,
img.service-img-3.hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 9;
    position: relative;
    transition: 400ms;
}

img.service-img-4 {
    clip-path: polygon(85% 0%, 99% 15%, 84% 100%, 70% 85%);
    margin-top: -700px;
    transition: 400ms;
}

img.service-img-4:hover,
img.service-img-4.hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 9;
    position: relative;
    transition: 400ms;
}

@media (max-width: 768px) {
    img.service-img-4,
    img.service-img-3,
    img.service-img-2,
    img.service-img-1,
    img.service-img-0 {
        margin-top: 00px;
    }
    img.service-img-0 {
        clip-path: polygon(0 0%, 20% 0%, 20% 100%, 0% 100%);
    }
    img.service-img-1 {
        clip-path: polygon(20% 0%, 40% 0%, 40% 100%, 20% 100%);
        margin-top: -168px;
    }
    img.service-img-2 {
        clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);
        margin-top: -216px;
    }
    img.service-img-3 {
        clip-path: polygon(60% 0%, 80% 0%, 80% 100%, 60% 100%);
        margin-top: -264px;
    }
    img.service-img-4 {
        clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%);
        margin-top: -312px;
    }
}

.service-titles {
    margin-top: -75px;
}

span.service-title {
    font-size: 17px;
    font-weight: 600;
    color: black;
    transition: 400ms;
}

.service-titles:hover :not(:hover) {
    font-size: 17px;
    font-weight: 600;
    color: white;
    transition: 400ms;
}


/*** services-list-end ***/


/*** services-detail ***/

.service-detail-image img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.service-detail-image {
    margin-bottom: 25px;
}


/*** services-detail-end ***/

@media (max-width: 992px) {
    .brand-item {
        /*background: transparent url(assets/images/reference_page/animsprite3.png) 0 0 no-repeat !important;*/
        /*height: 220px !important;*/
        background-size: cover !important;
        background-repeat: no-repeat !important;
        position: relative !important;
        top: -100px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .brand-item {
        /*width: 50% !important;*/
        /*height: 222px !important;*/
            width: 170px !important;
    height: 190px !important;
        float: left !important;
        position: relative !important;
        cursor: pointer !important;
        overflow: hidden !important;
    }
    .brand-img {
        width: 100% !important;
        height: 200px !important;
        position: relative !important;
    }
    .reference-items-page .content-wrap {
        position: relative;
        padding: 110px 0 !important;
        overflow: hidden;
    }
    .main-slider .slider-item.vid-slider {
        height: unset !important;
    }
    section.main-slider {
        height: calc(100dvh - 107px) !important;
        margin-top: 0 !important;
    }
    video.vid {
        width: 100%;
        height: 100% !important;
        overflow: hidden !important;
        position: relative;
        display: block;
    }
}


/******************************/

section.main-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 !important;
    height: 100vh;
    margin-top: -102px;
    overflow: hidden;
}

.main-slider .slider-item {
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: block;
    position: relative;
}

.main-slider .slider-item .box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding-top: 155px;
}

.main-slider .slider-item .slider-title {
    opacity: 0;
    font-weight: 600 !important;
    font-size: 50px;
    transition: 3000ms;
}

.main-slider .owl-item.active .slider-item .slider-title {
    opacity: 1;
}

.main-slider .slider-item .slider-title.bottom {
    transition: 3000ms;
    transition-delay: 1000ms;
}

video.vid {
    width: 100%;
    height: 100dvh !important;
    object-fit: cover;
}

.main-slider .owl-carousel:hover .owl-nav [class*=owl-] {
    opacity: 1;
    left: 50px;
}

.main-slider .owl-carousel:hover .owl-nav .owl-next {
    left: auto;
    right: 50px;
}

.main-slider .owl-carousel .owl-nav [class*=owl-] {
    width: 45px;
    height: 45px;
    font-size: 45px;
    padding-bottom: 6px;
}

.video:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00000038;
    z-index: 99999999;
    top: 0;
    left: 0;
}

.portfolio-reveal .portfolio-item:hover .portfolio-image img, .portfolio-reveal .portfolio-item:hover .bg-overlay {
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
}

@media (max-width: 991.98px) {
    /* section.main-slider {
        display: none;
    } */
    
    .portfolio-desc.text-center {
        transform: translateY(0);
    }
    
    .portfolio-desc.text-center h3 a {
        font-size: 15px;
    }
    
    .portfolio-desc.text-center {
        padding: 5px;
    }
}

article.portfolio-item.col-6.col-md-4.col-lg-3.pf-media.pf-icons {
    margin-bottom: 25px !important;
}


.invert-img {
    filter: invert(1);
}

.fbox-plain .fbox-icon i, .fbox-plain .fbox-icon img{
    color:#cfc8b6;
}

.main-counter i{
    color: #b5ab91;
}

.main-counter .counter.counter-lined {
    color: #c5c0b4;
}

.counter.counter-lined + h5::before{
    display: none !important;
}

.counter + h5 {
    color: #907d4c;
}