@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('opentype');
}

:root {
    --main-color: #95c13d;
    --main-font: 'Poppins';
}

body {
    font-family: var(--main-font);
}

/*******************
    ======================================
    Start NavBar
    ======================================
**********************/

.nav-new {
    position: fixed;
    z-index: 999999999;
    width: 100%;
    background-color: transparent !important;
    transition: all .5s ease
}

.product-item .image img {
    max-width: 350px !important;
}

    .nav-new.isScrolled {
        box-shadow: 8px 3px 30px 5px rgb(0 0 0 / 8%);
        background-color: #fff !important
    }

    .nav-new .navbar-brand img {
        height: 50px;
    }

    .nav-new .navbar-nav .nav-item a.nav-link {
        color: #000;
        font-size: 16px;
        font-weight: 500;
        margin: 0 8px;
        transition: all .3s ease;
        letter-spacing: .6px;
    }

        .nav-new .navbar-nav .nav-item a.nav-link:hover {
            color: var(--main-color);
        }

    .nav-new .navbar .language::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        background: #cccccc26;
        left: 0;
    }

    .nav-new .navbar .language li {
        cursor: pointer;
    }
/*******************
    ======================================
    Start Hero Background
    ======================================
**********************/
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../images/Ban03.png');
    width: 330px;
    height: 481px;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 61px;
    left: -35px;
    background-image: url('../images/Ban02.png');
    width: 168px;
    height: 174px;
    z-index: 1;
}

.hero-bg .ml-hero {
    margin-left: 200px;
}

.hero-bg .about-box {
    z-index: 1;
    overflow: hidden;
}

    .hero-bg .about-box::after {
        content: '';
        position: absolute;
        bottom: 40px;
        left: 0;
        background-image: url(../images/sftk-ply01.webp);
        width: 26px;
        height: 30px;
        animation: topBottom 5s linear 2s infinite alternate;
    }

    .hero-bg .about-box span {
        color: var(--main-color);
    }

    .hero-bg .about-box h3 {
        font-size: 46px;
        font-weight: bold;
        line-height: 60px;
    }

    .hero-bg .about-box p {
        color: rgb(105, 105, 105);
        font-size: 14px;
    }

    .hero-bg .about-box button {
        padding: 11px 33px;
        background: linear-gradient( 90deg, var(--main-color) 0%, #bdf44f 100%);
        transition: all .5s ease;
        border: none;
    }

        .hero-bg .about-box button:hover {
            box-shadow: 0px 11px 14px -7px rgb(0 0 0 / 25%) !important;
            transform: translateY(-5px) !important;
            -webkit-transform: translateY(-5px) !important;
        }

    .hero-bg .about-box .call-us p {
        font-size: 16px;
        font-weight: 600;
    }

        .hero-bg .about-box .call-us p:first-of-type {
            color: var(--main-color);
        }

        .hero-bg .about-box .call-us p:last-child {
            color: rgb(105, 105, 105);
        }

@keyframes topBottom {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(0, -20px);
    }
}


/*******************
    ======================================
    Start Services And Discover
    ======================================
**********************/
.services_disc-sec {
    background-image: url('../images/Ban03.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 55% auto;
    background-position: top left;
}

    .services_disc-sec.aboutus-page {
        background-size: 30% auto;
    }

.services-sec {
    padding: 60px 0;
}

    .services-sec .service-item {
        border-radius: 6px;
        box-shadow: 0 7px 20px 0 rgb(42 22 139 / 8%);
        transition: all .35s ease;
    }

        .services-sec .service-item:hover {
            background-color: var(--main-color) !important;
        }

        .services-sec .service-item .icon svg {
            width: 50px;
            height: 50px;
        }
        .ServIcon-Base {
            height: 150px;
            background-size: 150px;
            background-repeat: no-repeat;
            background-position: center;
        }
        .ServIcon {
            background-image: url("/customs/img/Hosting.png");
           
        }
        .ServIcon1 {
            background-image: url("/customs/img/App-Develop.png");
           
        }

        .ServIcon2 {
            background-image: url("/customs/img/web-develop.png");
           
        }

        .ServIcon3 {
            background-image: url("/customs/img/Software-Develop.png");
            
        }

        .ServIcon4 {
            background-image: url("/customs/img/UX.png");
           
        }

        /*.service-page .service-item .icon svg {
           
        }*/
    .services-sec .service-item:hover .icon svg {
            color: #000000;
            filter: brightness(0) invert(1);
            transition: all .35s cubic-bezier(.38, 3, .57, 1.6);
        }

        .services-sec .service-item .disc h3 {
            font-size: 20px;
            transition: all .35s ease;
        }

        .services-sec .service-item:hover h3,
        .services-sec .service-item:hover p {
            color: #fff !important;
        }

        .services-sec .service-item .disc p {
            font-size: 14px;
            color: #696969b0;
            transition: all .35s ease;
        }

.discover-sec {
    padding: 60px 0 120px;
}

    .discover-sec .image {
        animation: particlemove2 4.5s infinite linear;
    }

        .discover-sec .image::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            background-image: url(../images/Ban13.webp);
            width: 243px;
            height: 217px;
        }

    .discover-sec .disc-box > p {
        color: #696969b0;
        line-height: 28px;
        font-size: 16px;
    }

    .discover-sec .disc-box .discover-list li h4 {
        font-size: 18px;
        font-weight: bold;
    }

    .discover-sec .disc-box .discover-list li p {
        font-size: 14px;
        color: #696969b0;
    }

    .discover-sec .disc-box .discover-list li::before {
        content: '';
        position: absolute;
        top: 5px;
        left: -35px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        transition: all .5s ease;
    }

    .discover-sec .disc-box .discover-list li:first-of-type::before {
        background-color: var(--main-color);
    }

    .discover-sec .disc-box .discover-list li:last-of-type::before {
        background-color: rgb(255, 62, 52);
    }

    .discover-sec .disc-box .discover-list li:hover::before {
        transform: translate(-10px);
    }

    .discover-sec .disc-box button {
        padding: 12px 26px;
        font-size: 14px;
    }

        .discover-sec .disc-box button:hover {
            box-shadow: 0px 11px 14px -7px rgb(0 0 0 / 25%) !important;
            transform: translateY(-5px) !important;
            -webkit-transform: translateY(-5px) !important;
        }



/*******************
    ======================================
    Start Counter Section
    ======================================
**********************/
.counter-sec {
    padding: 60px 0;
    background-color: var(--main-color);
}

    .counter-sec .counter-item h4 {
        font-size: 40px;
        letter-spacing: 3px;
    }

    .counter-sec .counter-item span {
        font-size: 18px;
    }

.shape-animation .shape-1,
.shape-animation .shape-2 {
    position: absolute;
    animation: particlemove2 4.5s infinite linear;
}

.shape-animation .shape-2 {
    left: 50%;
    top: 20px;
}

    .shape-animation .shape-1 svg,
    .shape-animation .shape-2 svg {
        width: 18px;
    }

/*******************
    ======================================
    Start Technology solutions Section
    ======================================
**********************/
.tec-solution-sec {
    padding: 60px 0;
}

    .tec-solution-sec .sec-title p {
        width: 80%;
    }

    .tec-solution-sec .tec-item {
        margin: 0px 0px 0px 0px;
        padding: 17px;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0px 7px 20px 0px rgb(42 22 139 / 8%);
    }

    .tec-solution-sec .left-side > div:first-of-type,
    .tec-solution-sec .left-side > div:last-of-type {
        position: absolute;
        right: -50px;
    }

    .tec-solution-sec .right-side > div:first-of-type,
    .tec-solution-sec .right-side > div:last-of-type {
        position: absolute;
        left: -50px;
    }

    .tec-solution-sec .tec-item .icon svg {
        height: 55px;
    }

    .tec-solution-sec .tec-item .disc h3 {
        font-size: 18px;
    }

    .tec-solution-sec .tec-item .disc p {
        font-size: 12px;
        color: #212529;
        line-height: 24px;
    }

    .tec-solution-sec .KeyCompetencesImage {
        width: 420px;
    }
/*******************
    ======================================
    Start Case Study
    ======================================
**********************/
.case-studies {
    padding: 120px 0 60px;
    background-image: url('../images/Img_13.png');
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
}
    /* .case-studies .sec-title p{
    width: 50%;
    color: #696969b0;
} */
    .case-studies .case-item .image img {
        display: block;
        position: relative;
        border-radius: 4px;
        box-shadow: 2px 10px 20px 5px rgb(23 22 139 / 8%);
    }

    .case-studies .case-item .mask {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-51%, 0);
        width: 80%;
        background: var(--main-color);
        border-radius: 6px;
        padding: 25px 0 !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }

    .case-studies .case-item:hover .mask {
        opacity: 1;
        visibility: visible;
        overflow: hidden;
    }

    .case-studies .case-item .mask .transform {
        transform: translate(0, 50px);
        transition: all .4s ease;
    }

    .case-studies .case-item:hover .mask .transform {
        transform: translate(0, 0);
    }

    .case-studies .case-item .mask h4 {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .case-studies .case-item .mask p {
        font-size: 16px;
    }


/*******************
    ======================================
    Start STart Project
    ======================================
**********************/
.str-project {
    padding: 60px 0;
    background-color: #343434;
}

    .str-project .project-box h3 {
        font-size: 36px;
        letter-spacing: 2px;
    }

    .str-project .project-box p {
        font-size: 14px;
    }

    .str-project button {
        background: #fff !important;
        color: var(--main-color);
        padding: 14px 40px;
    }

/*******************
    ======================================
    Start Blogs Section Styles
    ======================================
**********************/
.blogs-sec {
    padding: 60px 0 60px;
}

    .blogs-sec .blog-item {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    }

        .blogs-sec .blog-item:not(:last-of-type) {
            margin-bottom: 50px;
        }

        .blogs-sec .blog-item:hover {
            -webkit-filter: brightness(80%);
        }

        .blogs-sec .blog-item .blog-img span {
            position: absolute;
            bottom: -13px;
            left: 40px;
            display: block;
            background: var(--main-color);
            font-size: 14px;
        }

        .blogs-sec .blog-item .blog-disc > span {
            color: #696969;
            font-size: 14px;
        }

        .blogs-sec .blog-item .blog-disc > h5 {
            line-height: 32px;
        }

        .blogs-sec .blog-item .blog-disc > p {
            font-size: 14px;
            color: #3f3f3f;
        }
/*******************
    ======================================
    Start Blogs Page Styles
    ======================================
**********************/
.blogs-page {
    padding: 0 0 60px 0;
}
/*******************
    ======================================
    Start Blog Details Styles
    ======================================
**********************/
.blog-details-page {
    padding: 0 0 60px
}

    .blog-details-page .owl-nav > button {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 50px;
        height: 50px;
        background: var(--main-color) !important;
        color: #fff !important;
        border-radius: 50%;
    }

        .blog-details-page .owl-nav > button.owl-prev {
            left: 10px;
        }

        .blog-details-page .owl-nav > button.owl-next {
            right: 10px;
        }

        .blog-details-page .owl-nav > button.disabled {
            opacity: .6;
            cursor: default
        }

        .blog-details-page .owl-nav > button:focus {
            outline: 0
        }

    .blog-details-page .disc span {
        color: #696969;
        font-size: 16px;
    }

    .blog-details-page .disc h3 {
        line-height: 32px;
    }

    .blog-details-page .disc p {
        font-size: 16px;
        color: #3f3f3f;
        line-height: 30px;
    }
/*******************
    ======================================
    Start Contact Us Styles
    ======================================
**********************/

.contact-sec {
    padding: 120px 0 60px;
    background-image: url('../images/Img_13.png');
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
}

    .contact-sec::before {
        content: '';
        position: absolute;
        top: 0;
        left: 100px;
        background-image: url('../images/Ban02.png');
        width: 168px;
        height: 174px;
        z-index: 1;
    }

    .contact-sec .image img:nth-child(1):hover {
        transform: translate(-10px);
    }

    .contact-sec .image img:nth-child(1) {
        transition: all .2s ease-in-out;
    }

    .contact-sec .image img:nth-child(2) {
        position: absolute;
        bottom: 0;
        right: 0;
        animation: particlemove2 5s linear 0s infinite alternate;
    }

    .contact-sec .image img:nth-child(1)::after {
        position: absolute;
        animation: particlemove2 4.5s infinite linear;
    }

    .contact-sec .disc .sec-title {
        width: 90%;
    }

        .contact-sec .disc .sec-title h3 {
            line-height: 50px;
        }

            .contact-sec .disc .sec-title h3 > span {
                font-size: 35px;
            }

    .contact-sec .disc .contact-box .contact-item .icon {
        width: 50px;
    }

        .contact-sec .disc .contact-box .contact-item .icon svg {
            width: 50px;
            height: 50px;
        }

    .contact-sec .disc .contact-box .contact-item .info p {
        font-size: 16px;
    }

    .contact-sec .disc .contact-box .contact-item .info span {
        font-size: 18px;
        font-weight: bold;
        color: var(--main-color);
        letter-spacing: 1px;
    }

    .contact-sec .shape-animation .shape-1 {
        left: 20%;
    }

    .contact-sec .shape-animation .shape-2 {
        bottom: 5%;
        top: auto;
    }

/*******************
    ======================================
    Start Contact Page Style
    ======================================
**********************/
.contact-page {
    padding: 0 0 60px 0;
}

    .contact-page .contact-top .contact-top-item {
        padding: 20px 15px;
        border-radius: 5px;
        position: relative;
        box-shadow: 0px 0px 16px rgb(4 59 80 / 10%);
        transition: all 0.3s ease;
    }

        .contact-page .contact-top .contact-top-item:hover {
            transform: translate(0, -5px);
        }

        .contact-page .contact-top .contact-top-item .icon {
            min-width: 60px;
            min-height: 60px;
            line-height: 60px;
            border-radius: 50%;
            text-align: center;
            background: #D9F3FB;
        }

            .contact-page .contact-top .contact-top-item .icon i {
                font-size: 22px;
            }

        .contact-page .contact-top .contact-top-item .icon {
            background: #D9F3FB;
        }

        .contact-page .contact-top .contact-top-item.email-item .icon {
            background: #FCDBDF;
        }

        .contact-page .contact-top .contact-top-item.location-item .icon {
            background: #FEF1CD;
        }

        .contact-page .contact-top .contact-top-item .disc li {
            font-size: 15px;
            color: #102d47;
            line-height: 28px
        }

        .contact-page .contact-top .contact-top-item.call-item .icon i {
            color: #40c1ec;
        }

        .contact-page .contact-top .contact-top-item.email-item .icon i {
            color: #f24d5d;
        }

        .contact-page .contact-top .contact-top-item.location-item .icon i {
            color: #FCB903;
        }

    .contact-page .contact-bottom .contact-map iframe {
        width: 100%;
        /* height: 605px; */
        border: none;
        border-radius: 5px;
    }

    .contact-page .contact-bottom .contact-massage {
        box-shadow: 0px 0px 16px rgb(4 59 80 / 10%);
        border-radius: 5px;
        /*padding-left: 40px;
    padding-right: 40px;*/
    }

        .contact-page .contact-bottom .contact-massage .form-group > input {
            border-color: #F1F1F1;
            width: 100%;
            max-width: 100%;
            opacity: 1;
            border-radius: 5px;
            border: none;
            color: #767676;
            padding: 10px 18px;
            background: #F4FCFF;
            height: 46px;
        }

        .contact-page .contact-bottom .contact-massage .form-group > textarea {
            color: #767676;
            border: none;
            background: #F4FCFF;
        }

        .contact-page .contact-bottom .contact-massage button {
            padding: 16px 50px;
            border-radius: 7px;
        }
/*******************
    ======================================
    Start FAQ Page Style
    ======================================
**********************/
.faq-sec {
    padding: 0 0 60px;
}

    .faq-sec .card {
        border: none;
        border-top: 1px solid rgba(0, 0, 0, .125);
        border-radius: 0;
    }

        .faq-sec .card:last-of-type {
            border-bottom: 1px solid rgba(0, 0, 0, .06);
        }

        .faq-sec .card .card-header {
            background-color: transparent;
            border: none;
            position: relative;
        }

            .faq-sec .card .card-header::before {
                content: '+';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                font-size: 30px;
                color: #7474742e;
            }

            .faq-sec .card .card-header.minus::before {
                content: '-';
            }

            .faq-sec .card .card-header h5 button {
                color: #747474;
                text-decoration: none;
            }

        .faq-sec .card .card-body {
            padding: 15px 30px 15px 35px;
            color: #747474;
            background-color: #f7f7f7;
            border-radius: 10px;
            margin-bottom: 24px;
            font-size: 14px;
        }

.search-sidebar, .category-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

    .search-sidebar .input-group {
    }

        .search-sidebar .input-group input {
            border-radius: 8px !important;
            padding-right: 30px;
            height: 50px;
        }

        .search-sidebar .input-group i {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            right: 10px;
            z-index: 4
        }

    .category-box ul li {
        padding: 5px 0 5px 18px;
        position: relative;
    }

        .category-box ul li:before {
            content: '-';
            position: absolute;
            left: 0;
        }

        .category-box ul li a {
            color: #828181;
            text-decoration: none;
        }

/*******************
    ======================================
    Start BLogs Page Style
    ======================================
**********************/
.blogs-page.blogs-sec .blog-item {
    margin-bottom: 60px;
}

/*******************
    ======================================
    Start About Page Style
    ======================================
**********************/

.about-company {
    padding: 0 0 60px;
}

    .about-company .about-disc p {
        font-size: 14px;
        color: #696969;
    }

    .about-company .about-disc ul li {
        line-height: 40px;
        position: relative;
        padding-left: 30px;
    }

        .about-company .about-disc ul li::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--main-color);
            transform: translate(0, -50%);
            transition: all .5s ease;
        }

        .about-company .about-disc ul li:hover::before {
            transform: translate(-10px, -50%);
        }

/*******************
    ======================================
    Start Story Styles
    ======================================
**********************/
.vission_mission-sec {
    padding: 120px 0 60px;
    background-image: url('../images/Img_13.png');
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
}

    .vission_mission-sec .tec-item {
        background: #fff;
        padding: 20px;
        box-shadow: 0px 7px 20px 0px rgb(42 22 139 / 8%);
        border-radius: 4px;
        margin-bottom: 30px;
    }

        .vission_mission-sec .tec-item .icon svg {
            height: 55px;
        }

        .vission_mission-sec .tec-item .disc h3 {
            font-size: 18px;
        }

        .vission_mission-sec .tec-item .disc p {
            color: #696969;
            line-height: 31px;
            font-size: 14px;
        }

    .vission_mission-sec .disc > p {
        color: #696969;
    }

    .vission_mission-sec .disc ul li::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background: transparent;
        border: 4px solid var(--main-color);
        border-radius: 50%;
        transition: all .4s ease;
    }

    .vission_mission-sec .disc ul li:hover::before {
        transform: translate(-10px, 0);
    }

    .vission_mission-sec .disc ul li h4 {
        font-size: 18px;
    }

    .vission_mission-sec .disc ul li p {
        font-size: 14px;
        color: #696969;
    }
/*******************
    ======================================
    Start History Section Styles
    ======================================
**********************/
.process-sec {
    padding: 60px 0;
    background: #95c13d1c
}

    .process-sec .image:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }

    .process-sec .disc ul li:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background: transparent;
        border: 4px solid var(--main-color);
        border-radius: 50%;
        transition: all .4s ease;
    }

    .process-sec .disc ul li:after {
        content: '';
        background-image: url('../images/dashed-colorPear.png');
        height: 90%;
        position: absolute;
        left: 8px;
        width: 4px;
        top: 24px;
    }

    .process-sec .disc ul li:last-of-type:after {
        display: none
    }

    .process-sec .disc ul li h4 {
        font-size: 18px;
        font-weight: bold;
    }

    .process-sec .disc ul li p {
        font-size: 14px;
    }
/*******************
    ======================================
    Start Partners Section Styles
    ======================================
**********************/
.partners-sec {
    padding: 60px 0;
}

    .partners-sec .image img {
        width: 60%;
        padding-top: 35px;
    }

.contact-sec .disc .sec-title h3:nth-child(2) span {
    color: #0000009c !important;
}
    /*******************
    ======================================
    Start Technology Section Style
    ======================================
**********************/
    .ourTech-sec {
    padding: 60px 0;
}

    .ourTech-sec .tech-item .image img {
        height: 90px
    }
/*******************
    ======================================
    Start Services Page Style
    ======================================
**********************/
.service-page {
    padding: 0 0 60px;
    background-image: url(../images/Ban03.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 38% auto;
    background-position: top left;
}

    .service-page .disc > p {
        color: #796e6e !important;
        line-height: 1.6;
        font-size: 22px;
    }

    .service-page .service-item {
        box-shadow: 0px 0px 23px 0px rgb(42 22 139 / 8%);
        position: relative;
    }

        .service-page .service-item::before,
        .service-page .service-item::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 50%;
            background: #95c13d94;
            transition: all 0.5s ease;
            cursor: pointer;
        }


    .service-page .afterItem {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 0px;
        height: 50%;
        display: block;
        background: #95c13d94;
        transition: all 0.5s ease;
    }

    .service-page .BeforeItem {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 0px;
        height: 50%;
        display: block;
        background: #95c13d94;
        transition: all 0.5s ease;
    }
    /*.service-page .service-item::before {
            left: 0;
            top: 0;
        }
.service-page .service-item::after {
    right: 0;
    bottom: 0;
}*/
    .service-page .service-item:hover .BeforeItem {
        width: 100%;
    }

    .service-page .service-item:hover .afterItem {
        width: 100%;
    }

    /*.service-page .service-item .icon svg {
        height: 50px;
    }*/

    .service-page .service-item:hover .icon svg {
        filter: brightness(0) invert(1);
        transition: all .35s cubic-bezier(.38, 3, .57, 1.6);
    }

    .service-page .service-item .disc {
        position: relative;
        z-index: 3;
    }

    .service-page .service-item .serviceLink {
        text-decoration: none;
        color: black;
        z-index: 545;
    }

    .service-page .service-item .disc h3 {
        font-size: 20px;
        transition: all .5s all;
    }

    .service-page .service-item .disc p {
        font-size: 16px;
        color: #767676 !important;
        transition: all .5s all;
    }

    .service-page .service-item:hover .disc h3,
    .service-page .service-item:hover .disc p {
        color: #fff !important;
    }
/*******************
    ======================================
    Start Services Details Styles
    ======================================
**********************/
.serviceDetails-sec {
    padding: 0 0 60px 0
}

    .serviceDetails-sec .disc h2 {
        color: var(--main-color)
    }

        .serviceDetails-sec .disc h2:before {
            content: '';
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            width: 15px;
            height: 15px;
            background: transparent;
            border: 4px solid var(--main-color);
            transition: all .4s ease;
            transform: translate(-50%, -50%);
        }

    .serviceDetails-sec .disc p {
        line-height: 1.7;
        font-size: 16px;
        color: #767373;
    }

.ser-impDetail {
    padding: 60px 0 60px;
    background: #f2fbfc;
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
}

    .ser-impDetail ul li span {
        width: 20px;
        height: 20px;
        background: var(--main-color);
        line-height: 20px;
        font-size: 12px;
    }

        .ser-impDetail ul li span i {
            font-size: 10px
        }

.getInTouch-sec {
    padding: 200px 0 60px;
    background-image: url(../images/Img_13.png);
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
}

    .getInTouch-sec .contact-massage form input {
        width: 100%;
        max-width: 100%;
        opacity: 1;
        border-radius: 5px;
        border: none;
        color: #767676;
        padding: 10px 18px;
        height: 46px;
    }

    .getInTouch-sec .contact-massage form textarea {
        color: #767676;
        border: none;
    }

    .getInTouch-sec .contact-massage form button {
        padding: 10px 30px;
        border-radius: 7px;
    }
/*******************
    ======================================
    Start Projects Page Styles
    ======================================
**********************/
.project-sec {
    padding: 60px 0
}

    .project-sec.project-page {
        padding: 0 0 10px;
    }

    .project-sec .nav-tabs .nav-item {
    }

        .project-sec .nav-tabs .nav-item .nav-link {
            background-color: #cccccc0f;
            color: #000 !important;
            border-radius: 30px;
            color: #fff;
            padding: 8px 30px;
            border: none;
            font-size: 14px;
            text-transform: capitalize
        }

            .project-sec .nav-tabs .nav-item .nav-link.active {
                background: var(--main-color);
                color: #fff !important;
            }

            .project-sec .nav-tabs .nav-item .nav-link:hover {
                border: none;
            }

    .project-sec .project-item .img {
        overflow: hidden;
    }

        .project-sec .project-item .img img {
            transition: all .5s ease;
            transform: scale(1);
        }

    .project-sec .project-item:hover .img img {
        transform: scale(1.1);
    }

    .project-sec .project-item .project-details span {
        display: block;
        transform: translate(0, 0);
        transition: all .5s ease;
    }

    .project-sec .project-item:hover .project-details span {
        transform: translate(0, -10px);
        opacity: 0;
    }

    .project-sec .project-item .project-details a {
        text-decoration: none;
        color: #000000b8;
        position: relative;
        display: inline-block !important;
        /* width: 45%; */
        transform: translate(0, -0);
        opacity: 0;
        transition: all .5s ease;
    }

    .project-sec .project-item:hover .project-details a {
        transform: translate(0, -23px);
        opacity: 1;
    }

    .project-sec .project-item .project-details a::before {
        content: '';
        width: 45px;
        height: 2px;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background: #000000b8;
        right: -55px;
    }
/*******************
    ======================================
    Start Projects Details Page Styles
    ======================================
**********************/
.project-details-page {
    padding: 0 0 60px;
}

    .project-details-page .owl-carousel .owl-dots {
        margin-top: 30px !important;
    }

        .project-details-page .owl-carousel .owl-dots .owl-dot {
            width: 15px;
            height: 15px;
            background: #5a5a5a80;
            margin: 0 10px;
            border-radius: 50%;
        }

            .project-details-page .owl-carousel .owl-dots .owl-dot span {
                margin: auto;
                background: #fff;
            }

            .project-details-page .owl-carousel .owl-dots .owl-dot.active {
                background-color: var(--main-color);
            }

            .project-details-page .owl-carousel .owl-dots .owl-dot:focus {
                outline: 0;
            }

            .project-details-page .owl-carousel .owl-dots .owl-dot.active span {
                background-color: var(--main-color);
            }

    .project-details-page .overview h3, .project-details-page .customer-satisfaction h3 {
        color: #0d2c13;
        font-weight: bold;
    }

    .project-details-page .overview p, .project-details-page .customer-satisfaction p {
        color: #7a7a7a;
        font-size: 16px;
        line-height: 30px;
    }

    .project-details-page .overview ul {
        background-color: #e4fcfa;
    }

        .project-details-page .overview ul li {
            width: 50%;
            line-height: 55px;
        }

            .project-details-page .overview ul li span {
                color: #a7a7aa;
            }

    .project-details-page .gallery .image {
        overflow: hidden;
        border-radius: 8px;
    }

        .project-details-page .gallery .image:first-of-type,
        .project-details-page .gallery .image:nth-of-type(2),
        .project-details-page .gallery .image:nth-of-type(3) {
            width: 32%;
        }

        .project-details-page .gallery .image:nth-of-type(4),
        .project-details-page .gallery .image:last-of-type {
            width: 49%;
            margin-top: 20px;
        }

        .project-details-page .gallery .image img {
            transition: all .5s ease;
            border-radius: 8px;
        }

        .project-details-page .gallery .image:hover img {
            transform: scale(1.1) rotate(-1deg);
        }
/*******************
    ======================================
    Start Clients Page Styles
    ======================================
**********************/
.clients-sec {
    padding: 60px 0
}

    .clients-sec.clients-page {
        padding: 0 0 60px;
    }

    .clients-sec .client-item .image {
        background: #cccccc1f;
        padding: 0 14px;
        border-radius: 8px;
    }
/*******************
    ======================================
    Start Product Page Styles
    ======================================
**********************/
.product-sec {
    padding: 0 0 60px;
}
    .product-sec .product-item img {
        max-width:350px !important;
    }

    .product-sec .product-item .mask {
        position: absolute;
        bottom: 0px;
        left: 9%;
        /*transform: translate(-51%, 0);*/
        width: 80%;
        background: #eff7fe;
        border-radius: 6px;
        padding: 25px 0 !important;
        /*opacity: 0;
        visibility: hidden;*/
        /*transition: all 0.5s ease;*/
    }

    /*.product-sec .product-item:hover .mask {
        opacity: 1;
        visibility: visible;
        overflow: hidden;
    }*/

    /*.product-sec .product-item .mask .transform {
        transform: translate(0, 50px);
        transition: all .4s ease;
    }*/

    /*.product-sec .product-item:hover .mask .transform {
        transform: translate(0, 0);
    }*/

    .product-sec .product-item .mask .transform h4 {
        font-size: 18px;
        letter-spacing: 1px;
        color: black !important;
    }

        .product-sec .product-item .mask .transform h5 {
            font-size: 16px;
            color: #000000db !important;
        }

/*******************
    ======================================
    Start Privacy And Terms Styles
    ======================================
**********************/
.privacy-sec, .terms-sec {
    padding: 0 0 60px;
}

    .privacy-sec .privacy-item h3,
    .terms-sec .terms-item h3 {
        font-size: 24px
    }

    .privacy-sec .privacy-item p,
    .terms-sec .terms-item p {
        color: #6b6b84;
        line-height: 30px
    }
/*******************
    ======================================
    Start Footer Styles
    ======================================
**********************/
footer {
    background-image: url(../images/003.png);
    background-size: contain;
    /* background-position: center center; */
    background-repeat: no-repeat;
    background-position: left top;
    /*background-color: #f3f5ff;*/
    background-color: #f2fbfc;
    padding: 80px 0 30px;
}

    footer .logo-footer img {
        height: 50px;
        width: auto !important;
    }

    footer .about .disc .social-media li a {
        width: 35px;
        height: 35px;
        display: inline-block;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
    }

    footer .about .disc .social-media li:first-of-type a {
        background-color: #3b5998;
    }

    footer .about .disc .social-media li:nth-of-type(2) a {
        background-color: #1da1f2;
    }

    footer .about .disc .social-media li:nth-of-type(3) a {
        background-color: #0a66c2;
    }

    footer .about .disc .social-media li:nth-of-type(4) a {
        background-color: #ea4335;
    }

    footer .about .disc > p,
    footer .quick-links-box ul li a,
    footer .contact-us-box ul li {
        color: #000000a6;
    }

        footer .quick-links-box ul li:not(:last-of-type), footer .contact-us-box ul li:not(:last-of-type) {
            margin-bottom: 10px;
        }

    footer .quick-links-box ul li a {
        text-decoration: none;
    }

    footer .footer-bottom-links li:first-of-type::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 2px;
        height: 25px;
        background-color: #ccc;
        transform: translate(0, -50%);
    }

    footer .footer-bottom-links li a {
        text-decoration: none;
        font-size: 14px;
    }
/*******************
    ======================================
    Start Scrolled Top Styles
    ======================================
**********************/
.scroll-top {
    bottom: 50px;
    right: 50px;
    display: none;
    z-index: 88
}

    .scroll-top span {
        background: var(--main-color);
        width: 50px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
    }
/*******************
    ======================================
    Start Custom Styles
    ======================================
**********************/
.sec-title span {
    color: var(--main-color);
    font-size: 18px;
}

.sec-title h3 {
    color: #000;
    font-size: 36px;
    font-weight: bold;
}

.sec-title p {
    width: 50%;
    color: #696969b0;
}

.custom-btn {
    background: linear-gradient( 90deg, var(--main-color) 0%, #bdf44f 100%);
    color: #fff;
    transition: all .5s ease;
    border: none;
}

button.custom-btn:hover {
    box-shadow: 0px 11px 14px -7px rgb(0 0 0 / 25%) !important;
    transform: translateY(-5px) !important;
    -webkit-transform: translateY(-5px) !important;
}

.shape-animation .shape-1,
.shape-animation .shape-2 {
    position: absolute;
    animation: particlemove2 4.5s infinite linear;
}

.shape-animation .shape-2 {
    left: 50%;
    top: 20px;
}

    .shape-animation .shape-1 svg,
    .shape-animation .shape-2 svg {
        width: 18px;
    }

.banner-box {
    padding-top: 70px;
    /* padding-bottom: 110px; */
    /* background-image: url(../images/banner-1.webp); */
    background-size: cover;
    background: rgb(149 193 61 / 10%);
}
    .banner-box .container{
        position:absolute;
        z-index:9;
        bottom:-28px;
        left:140px;
    }
        .banner-box .container nav{
            display:block !important;
        }
        .banner-box .container nav ol {
            justify-content:flex-start !important;
        }

        .banner-box #confetti {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    /* .banner-box nav h2 {
        letter-spacing: 2px;
    }*/
    .banner-box nav .breadcrumb {
        /* position: absolute;
        bottom: 0;
        right: 150px;
        margin: 0; */
        background: none;
        /* border-radius: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px; */
    }

.title-page {
    width: 70%;
}

    .title-page h5 {
        color: #796e6e !important;
        line-height: 1.6;
        font-size: 22px;
    }

        .title-page h5 span {
            color: var(--main-color);
            letter-spacing: 1px;
            font-size: 22px;
        }

.owl-dots {
    text-align: center;
    margin-top: 30px;
}

    .owl-dots button {
        background: #14131347 !important;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        box-shadow: none;
        outline: none;
        margin: 0 4px;
    }

        .owl-dots button.active {
            background-color: var(--main-color) !important;
            width: 10px;
            height: 10px;
        }

@keyframes particlemove2 {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    25% {
        transform: translate(10px, 10px);
        -webkit-transform: translate(10px, 10px);
    }

    50% {
        transform: translate(5px, 5px);
        -webkit-transform: translate(5px, 5px);
    }

    75% {
        transform: translate(10px, -5px);
        -webkit-transform: translate(10px, -5px);
    }

    100% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}