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

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

.open-sans {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}

.dm-serif-display-regular {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
}

.dm-serif-display-regular-italic {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
}


:root {
    --cnvs-themecolor: #5f8d3e !important;
    --cnvs-themecolor-rgb: 95, 141, 62 !important;
    --cnvs-themecolor-rgba-10: 95, 141, 62, 0.1 !important;
    --cnvs-themecolor-rgba-25: 95, 141, 62, 0.25 !important;
    --cnvs-themecolor-rgba-40: 95, 141, 62, 0.40 !important;
    --cnvs-themecolor-rgba-60: 95, 141, 62, 0.60 !important;

    --cnvs-secondary-color: #074111 !important;
    --cnvs-secondary-color-rgb: 7, 65, 17!important;

    --cnvs-secondary-font:	'DM Serif Display', serif;
    --cnvs-primary-font: 'DM Serif Display', serif;
    --cnvs-body-font: 'Open Sans', sans-serif;
    --bs-primary-bg-subtle: #d5d5d5 !important;
    --bs-secondary-bg-subtle: #e2e3e5 !important;

    --bs-primary: #5f8d3e !important;
    --bs-primary-rgb: 95, 141, 62 !important;
    --bs-secondary: #074111 !important;
    --bs-secondary-rgb: 7, 65, 17!important;

    --bs-body-color: #074111 !important;
    --bs-heading-color: #074111 !important;

    --cnvs-swiper-bar-color: var(--bs-primary);
}

.swiper-tab-link.active {
    --swiper-tab-title:#5f8d3e !important;
}

.dark {
    --cnvs-contrast-bg: #074111 !important;
}



.text-primary{ color: #5f8d3e !important;}


.border-primary {
    border-color: #5f8d3e !important;
}

.border-secondary {
    border-color: #074111 !important;
}

/* Tab */

#demo-drone-tab {
    --bs-nav-tabs-border-width: 0px;
    --bs-nav-link-color: #111;

}

.nav-link.active{
    background-color: transparent !important;
}

@media (min-width: 992px) {
    #demo-drone-tab .nav-item .nav-link.active::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        margin-left: -5px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--cnvs-contrast-300);
        bottom: 0;
        left: 50%;
    }


    .img-overlap img {
        width: calc(100% + 30%);
        max-width: none;
    }

    .img-overlap + div {
        border-radius: 0.3rem;
        padding: 60px;
    }
}

.card,
.portfolio-image {
    --bs-card-border-width: 0;
    --bs-card-bg: var(--cnvs-dark-100);
}

.portfolio-item .portfolio-image, .portfolio-item .portfolio-image > a, .portfolio-item .portfolio-image img {
    border-radius: var(--cnvs-border-radius);
}

.portfolio .bg-overlay-content {
    text-align: center;
}

.is-expanded-menu .portfolio .bg-overlay-content::before {
    --cnvs-blur-offset: 100px;
    content: "";
    position: absolute;
    width: calc(100% - var(--cnvs-blur-offset));
    height: calc(100% - var(--cnvs-blur-offset));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--cnvs-border-radius) !important;
    transition-property: width,height;
    transition-duration: .3s;
    transition-timing-function: ease;
    transform-origin: center center;

}

.portfolio .bg-overlay:not(.no-hover-blur):hover .bg-overlay-content::before {
    --cnvs-blur-offset: 50px;
    background-color: rgba(248, 248, 250, 0.1);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
}

.is-expanded-menu .bg-overlay .portfolio-desc {
    max-width: 60%;
    margin: 0 auto;
}

.bg-overlay .portfolio-desc h3 {
    font-size: 1.85rem;
    margin-bottom: 0;
    transition: transform .3s ease;
}

.bg-overlay:hover .portfolio-desc h3 {
    transform: translateY(-7px);
}

.portfolio .bg-overlay-content p {
    transform: translateY(20px);
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    transition: all .3s ease;
    font-size: 1.25rem;
    line-height: 1.4;
}

.portfolio .bg-overlay:hover p {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}


/* Carousel
-----------------------------------------------------------------*/
.oc-desc {
    position: absolute;
    top: 5%;
    left: 5%;
    bottom: 16px;
    background-color: #FFF;
    padding: 25px;
    border-radius: 3px;
    height: 90%;
    width: 90%;
    --cnvs-blur-offset: 20px;
    background-color: rgba(248, 248, 250, 0.55);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}
.charity-card p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.charity-card h3 { font-size: 16px; }
.charity-card h3 a { color: #111; }

.charity-card .skill-progress-percent::after {
    content: "\F518";
    font-family: 'bootstrap-icons';
    color: var(--cnvs-themecolor);
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY( -50% );
}

.charity-card .counter.counter-inherit.counter-instant { display: inline-block; }


.owl-carousel .owl-item .oc-desc {
    opacity: 0;
    transform: scale(0.7);
    transition: all .3s cubic-bezier(0.4, 0.2, 0.2, 1);
}


/* .owl-carousel .owl-item:hover .oc-desc, */
.owl-carousel .owl-item.active.center .oc-desc {
    opacity: 1;
    transform: scale(1);
}

.img-overlap+div {
    padding: 40px;
}

.white-blur{
    --cnvs-blur-offset: 20px;
    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(2.5rem);
}


.primary-blur{
    --cnvs-blur-offset: 20px;
    background-color: var(--cnvs-themecolor-rgba-10);
    backdrop-filter: blur(1rem);
}

.primary-blur-light{
    --cnvs-blur-offset: 20px;
    background-color: var(--cnvs-themecolor-rgba-10);
    backdrop-filter: blur(0.3rem);
}

.primary-blur-medium{
    --cnvs-blur-offset: 20px;
    background-color: var(--cnvs-themecolor-rgba-10);
    backdrop-filter: blur(0.3rem);
}


#header {
    --cnvs-header-height: 100px;
    /*--cnvs-header-floating-bg: rgba(240, 240, 240, 0.85);*/
    --cnvs-header-floating-bg: rgb(7, 65, 17, 0.85);

    --cnvs-primary-menu-font: var(--cnvs-body-font);
    --cnvs-primary-menu-font-weight: 500;
    --cnvs-primary-menu-font-size: 1.125rem;
    --cnvs-primary-menu-tt:	none;
    --cnvs-primary-menu-ls:	0;
    --cnvs-header-floating-top-offset: 0;
    /*--cnvs-primary-menu-color: var(--cnvs-contrast-800);*/
    --cnvs-primary-menu-color: var(--cnvs-contrast-500);

    --cnvs-primary-menu-active-color: var(--cnvs-contrast-1000);
    --cnvs-primary-menu-hover-color: var(--cnvs-contrast-1000);
    /*--cnvs-top-search-placeholder: var(--cnvs-contrast-500);*/
    --cnvs-top-search-placeholder: var(--cnvs-contrast-300);
    --cnvs-primary-menu-submenu-hover-bg: rgba(var(--cnvs-contrast-rgb),0.1);

}

/*.dark #header {*/
/*    --cnvs-header-floating-bg: rgba(42, 42, 43, 0.85);*/
/*    --cnvs-primary-menu-color: var(--cnvs-contrast-500);*/
/*    --cnvs-primary-menu-active-color: var(--cnvs-contrast-1000);*/
/*    --cnvs-primary-menu-hover-color: var(--cnvs-contrast-1000);*/
/*    --cnvs-top-search-placeholder: var(--cnvs-contrast-300);*/
/*}*/


.is-expanded-menu #header-wrap,
.is-expanded-menu .sticky-header #header-wrap {
    /*position: fixed !important;*/

    background-color: transparent;
    border: 0;
}

.is-expanded-menu #header.transparent-header.floating-header .container {
    border-radius: var(--cnvs-border-radius);
    /*max-width: calc(100% - 30px);*/
    top: 35px;
    backdrop-filter: blur(.5rem);
    -webkit-backdrop-filter: blur(.5rem);
}

.is-expanded-menu .style-3 .menu-container > .menu-item.current > .menu-link {
    --cnvs-primary-menu-active-color: var(--cnvs-contrast-1000);
    background-color: var(--cnvs-primary-menu-submenu-hover-bg);
}

.is-expanded-menu .style-3 .menu-container > .menu-item > .menu-link {
    --cnvs-primary-menu-padding-x: 20px;
    --cnvs-primary-menu-padding-y: 8px;
    margin: 10px 2px;
    border-radius: var(--cnvs-border-radius);
}


.d-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
}


.d-grid .grid-item-1,
.d-grid .grid-item-2{
    display: flex;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.d-grid .grid-item-1 {
    height: 400px;
    grid-column-start: 1;
    -ms-grid-column: 1;
    grid-column-end: 6;
    -ms-grid-column-span: 3;
    grid-row-start: 1;
    -ms-grid-row: 1;
    grid-row-end: 4;
    -ms-grid-row-span: 3;
}

.d-grid .grid-item-2 {
    height: 200px;
    grid-column-start: 5;
    -ms-grid-row: 2;
    grid-column-end: 9;
    -ms-grid-column-span: 3;
    -ms-grid-row-span: 1;
    grid-row-start: 2;
    -ms-grid-row-align: center;
    grid-row-end: 3;
    align-self: center;
    justify-self: center;
    -ms-grid-column-align: center;
}



@media (min-width: 992px) {


    .d-grid .grid-item-1 {
        min-width: 300px;
        height: auto;
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .d-grid .grid-item-2 {
        min-width: 300px;
        height: 300px;
        grid-column-start: 3;
        -ms-grid-row: 2;

    }

}


.services-grid .feature-box {
    padding: 2rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: .5rem;
    border: 1px solid var(--cnvs-secondary-color);
}

.services-grid .feature-box:hover {
    background-size: cover;
}

.hover-button {
    display: block;
    margin-top: 20px;
    font-weight: 600;
}

.dark .hover-button { color: #FFF; }

.services-grid .feature-box { background-color: var(--cnvs-themecolor); }

.dark .services-grid .feature-box .fbox-icon i { background-color: rgba(255,255,255,0.15); }


.services-grid .feature-box,
.services-grid .feature-box .fbox-icon,
.services-grid .feature-box .fbox-content,
.hover-button  { transition: all .4s ease, border-color .0s ease; }

.services-grid .feature-box {
    padding: 3rem;
    background-size: 0;
    border: 1px solid rgba(255,255,255,0.1);
}

.services-grid .feature-box:hover {
    transform: translateY(-6px);
    border-color: var(--cnvs-themecolor);
}

.services-grid .feature-box:not(:hover) .hover-button {
    opacity: 0;
    transform: translateY(-5px);
}

.services-grid .feature-box .fbox-icon,
.services-grid .feature-box .fbox-content {
    transform: translateY(20px);
}

.services-grid .feature-box:hover .fbox-icon,
.services-grid .feature-box:hover .fbox-content { transform: translateY(0px); }

.dark .services-grid .feature-box:hover .fbox-icon i { background-color: #FFF; }

.heading-block h3 {
    font-size: 2.5rem;
    line-height: 1.3 !important;
}

.hero-title.display-3 {
    font-size: 4.25rem;
    letter-spacing: -3px;
}


@media (max-width: 991.98px) {
    .services-grid .feature-box .fbox-icon i { background-color: #FFF; }
}


.flip-card-front::after, .flip-card-back::after {
    opacity: 1;
    background-color: transparent;
}



.owl-carousel .owl-item .oc-desc {
    opacity: 0;
    transform: scale(0.7);
    transition: all .3s cubic-bezier(0.4, 0.2, 0.2, 1);
}


/* .owl-carousel .owl-item:hover .oc-desc, */
.owl-carousel .owl-item.active.center .oc-desc {
    opacity: 1;
    transform: scale(1);
}