:root {
    --primary-color: #f2cd1c;
    --secondary-color: #36a900;
    --section-bg: #eff7fd;
    --bg-light-blue: #f5f8fb;
    --body-font-color: #505155;
    --Black-color: #000000;
    --white-color: #ffffff;
    --heading-colors: #0d0f1c;
    --dark-blue: #0075dd;
    /* --footer-bg:#0b0916; */
    --menu-color: #001b40;
    --mid-color: #4fadff;
    --innerlightbg: #bcdffe;
    --DGrey: #020202;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    color: #505155;
}


/* Spacers */


.space-p-t {
    padding-top: 80px;
}

.space-p-b {
    padding-bottom: 80px;
}

.space-p-tb {
    padding: 80px 0;
}

.space-m-t {
    margin-top: 80px;
}

.space-m-b {
    margin-bottom: 80px;
}

.space-m-tb {
    margin: 80px 0;
}

/* Spacers End */

/* Backgrounds */

.pri-bg {
    background-color: var(--primary-color);
}

/* Backgrounds End*/


/* List Style */

.ctm-list {
    list-style: none;
    padding-left: 0;
    font-size: 19px;
}

    .ctm-list li {
        display: flex;
        align-items: start;
        gap: 15px;
        margin-bottom: 16px;
        color: #2b2c31;
        position: relative;
        left: 0;
        transition: all ease-in-out 0.3s;
        font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
    }

        .ctm-list li:hover {
            left: 10px;
        }

        .ctm-list li:before {
            content: "\f105";
            font-family: 'fontawesome';
            color: #2b2c31;
        }

/* List Style End*/

/* job tabs styling */

.openingTabs .nav-tabs {
    border-bottom: 0;
}

    .openingTabs .nav-tabs .nav-item a {
        font-size: 19px;
        border: 1px solid #fff;
        text-align: center;
        color: #070707;
        border-radius: 0;
        padding: 10px 20px;
        margin: 0 5px;
    }

        .openingTabs .nav-tabs .nav-item a:hover, .openingTabs .nav-tabs .nav-item a.active {
            background-color: #000 !important;
            color: #fff;
        }

.filter-btns-holder {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filter-button {
    font-size: 19px;
    border: 1px solid #fff;
    text-align: center;
    color: #070707;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    padding: 10px 20px;
}

    .filter-button:hover {
        border-color: #070707;
        text-align: center;
        color: #fff;
        background-color: #070707;
    }

    .filter-button.active {
        background-color: #070707;
        color: #fff;
        border-color: #070707;
    }

.js-title {
    font-weight: 300;
    color: #0a0909;
    margin-bottom: 0;
    font-size: calc(18px + (28 - 18) * ((100vw - 300px) / (1920 - 300)));
}

    .js-title a {
        color: #0a0909;
    }

.sj-content {
    flex: 1;
}

    .sj-content p {
        font-size: 15px;
        color: #a4a4a7;
        margin-bottom: 0;
    }

.sj-button-holer {
    flex: 1 0 50px;
    max-width: 50px;
}

.sj-btn {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #f3f7fa;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    justify-content: center;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    font-size: 25px;
    color: #4c525a;
}

    .sj-btn:hover {
        background-color: var(--primary-color);
        color: #000;
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
    }


.single-job {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #d2d5d6;
}

.js-serial-no {
    color: #a4a4a7;
    font-size: 15px;
}

.btn-count-holder {
    position: relative;
}

.post-count {
    font-size: 10px;
    top: 4px;
    position: absolute;
    right: -10px;
}

/* job tabs styling End */


/* Header Css Start*/

.collapse.navbar-collapse {
    z-index: 10;
}

.main-header {
    transition: all 0.5s;
    background-color: var(--white-color);
    padding: 10px 0;
    position: relative;
    box-shadow: 0px 0px 13px #0000005c;
}

    .main-header .header-scrolled {
        padding: 10px 0;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
        background-color: var(--white-color);
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }

    .main-header .navbar-expand-lg {
        position: inherit;
    }

        .main-header .navbar-expand-lg .nav-item {
            position: inherit;
        }

            .main-header .navbar-expand-lg .nav-item .dropdown-menu {
                width: 100%;
            }

                .main-header .navbar-expand-lg .nav-item .dropdown-menu li a.dropdown-item {
                    max-width: 23%;
                }

                .main-header .navbar-expand-lg .nav-item .dropdown-menu li.block .contectArea {
                    display: inline-flex;
                }

                .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea {
                    display: none;
                    max-width: 77%;
                    position: absolute;
                    right: 0;
                    padding: 0 20px;
                    top: 0;
                    justify-content: space-between;
                    background: #f4f4f4;
                }

                    .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .contentBox {
                        display: flex;
                        max-width: 57%;
                        flex: 0 0 57%;
                        /*height: 100%;*/
                        line-height: 1.8;
                        padding-right: 25px;
                        margin-right: 15px;
                        border-right: #dcdcdc solid 1px;
                        flex-direction: column;
                    }

                        .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .contentBox p {
                            font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
                            color: #8d94a1;
                            line-height: 26px;
                        }

                        .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .contentBox .achivments {
                            position: absolute;
                            bottom: 0;
                        }

                        .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .contentBox .imgBox {
                            width: 100%;
                        }

                            .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .contentBox .imgBox img {
                                width: 100%;
                            }

                    .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .cta {
                        display: flex;
                        max-width: 40%;
                        flex: 0 0 40%;
                        align-items: flex-start;
                        justify-content: center;
                    }

                        .main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .cta .ctaBox {
                            background-color: var(--white-color);
                            padding: 10px 15px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            flex-direction: column;
                            box-shadow: 0px 3px 9px 0px rgba(127, 137, 161, 0.20);
                        }

                .main-header .navbar-expand-lg .nav-item .dropdown-menu li .ctaImg {
                    width: 100%;
                    height: 150px;
                }

                    .main-header .navbar-expand-lg .nav-item .dropdown-menu li .ctaImg.ecl {
                        height: 168px;
                    }

                    .main-header .navbar-expand-lg .nav-item .dropdown-menu li .ctaImg img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

.dropdown-menu li .contectArea .cta .ctaBox .linksArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
}

    .dropdown-menu li .contectArea .cta .ctaBox .linksArea a {
        padding: 0;
    }

    .dropdown-menu li .contectArea .cta .ctaBox .linksArea h5 {
        font-size: calc(13px + (19 - 13) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
    }

    .dropdown-menu li .contectArea .cta .ctaBox .linksArea h6 {
        color: var(--primary-color);
        font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
    }


    .dropdown-menu li .contectArea .cta .ctaBox .linksArea .headGet h5 {
        font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        margin-bottom: 0;
    }

    .dropdown-menu li .contectArea .cta .ctaBox .linksArea .headGet:hover {
        background-color: var(--primary-color);
    }

    .dropdown-menu li .contectArea .cta .ctaBox .linksArea .headGet {
        border: #f2cd1c solid 1px;
        display: inline-block;
        padding: 10px;
        background-color: var(--primary-color);
        color: var(--Black-color);
    }

        .dropdown-menu li .contectArea .cta .ctaBox .linksArea .headGet:hover {
            border: #000 solid 1px;
            background-color: var(--white-color);
        }

.main-header .navbar-expand-lg .nav-item .dropdown-menu li .contectArea .cta img {
    width: 100%;
}

.crm-sec .getChat img {
    animation: none !important;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -3px;
}

.crm-sec .getChat:hover {
    background-color: var(--Black-color);
    color: var(--white-color);
}

.main-header .navbar-expand-lg .nav-item .dropdown-menu li:hover .contectArea {
    display: flex;
}


.ctm-main-title {
    font-size: calc(28px + (36 - 28) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1;
}



.social-list {
    padding: 0;
    margin: 0;
    display: flex;
}

    .social-list li {
        list-style: none;
        border: 1px solid var(--white-color);
        border-radius: 50%;
        margin: 0 10px;
        width: 25px;
        height: 25px;
        text-align: center;
    }

        .social-list li a {
            font-family: "FontAwesome";
            font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1920 - 300)));
            font-weight: 400;
            color: var(--white-color);
            margin: 0;
            text-decoration: none;
        }

header .navbar .nav-item {
    display: flex;
    flex-wrap: wrap;
}

.navbar .nav-link, .navbar .nav-item a {
    color: #616060;
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    margin: 0 5px;
    padding: 12px 20px;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% + 30px);
    margin: 0;
    padding: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    /*background: var(--white-color);*/
    box-shadow: 0px 0px 10px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border: 0;
    border-radius: 0;
    height: auto;
    min-height: 300px;
    background-image: url(/assets/images/menu-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

    .navbar .dropdown ul li {
        min-width: 220px;
        border: 0;
        padding: 0;
        position: static;
        display: flex;
        transition: all ease-in-out 0.3s;
    }

    .navbar .dropdown ul a {
        padding: 10px 20px;
        text-transform: none;
        transition: all ease-in-out 0.3s;
        background-color: transparent;
    }

        .navbar .dropdown ul a i {
            font-size: 14px;
        }

        .navbar .dropdown ul a:hover,
        .navbar .dropdown ul .active:hover,
        .navbar .dropdown ul li:hover > a {
            color: var(--Black-color);
            font-weight: 600;
            padding: 10px 20px 10px 30px
            /*background-color: var(--Black-color);*/
        }

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 82%;
    visibility: visible;
    left: 0;
    padding: 20px 0;
    overflow: hidden;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown ul .container {
    position: relative;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

.contact-btn {
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500 !important;
    padding: 10px 40px !important;
    margin-left: 20px !important;
    text-transform: uppercase !important;
    background-color: var(--primary-color);
    color: var(--Black-color) !important;
    border: 2px solid var(--primary-color);
}

    .contact-btn:hover {
        color: var(--Black-color);
        border: 2px solid var(--Black-color);
        background-color: transparent;
    }

a {
    text-decoration: none;
}

/* Header Css End*/
/*  Main Banner Css start */
.main-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    /*min-height: 870px;*/
    /*height: 100vh;*/
    height: 80vh;
    padding: 80px 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.main-banner .slick-dots {
    bottom: 0;
    display: none;
}


.main-banner .shape {
    position: absolute;
    width: 767px;
    height: 762px;
    right: -130px;
    bottom: -80px;
    pointer-events: none;
    --i: 1;
    --angle: calc((var(--i) - 1) * (360deg / 5));
    --amplitude: 9vw;
    --x: calc(var(--i) * var(--boxSize));
    width: var(--boxSize);
    aspect-ratio: 1;
    background: url(../../assets/images/astrik-shape.svg);
    background-position: center center, center center, center calc(var(--boxSize) * 0.6), center center;
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: move auto linear, spin auto linear;
    animation-timeline: scroll(root block);
    translate: calc(var(--x) - var(--boxSize)) calc(sin(var(--angle)) * var(--amplitude));
}

.home-slider .ecl-banner {
    /*height: 100vh;*/
    border-bottom: #dddddd solid 1px;
}

.home-slider .main-banner .container {
    height: 100%;
}

.ecl-banner .nav-tab-btn, .ecl-banner .blk-btn {
    padding: 15px 30px;
}



@media (max-width: 575px) {
    .ecl-banner .nav-tab-btn, .ecl-banner .blk-btn {
        padding: 15px 20px;
    }
}

@media (max-width: 1440px) {
    /*.home-slider .ecl-banner {
        height: auto;
    }*/
    .main-banner {
        height: 760px;
        zoom: 80%;
    }
}




.banner-spinner {
    position: relative;
    margin-top: 370px;
}

.ban-spinner-item {
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-animation: zoom 2s linear 0.75s infinite;
    animation: zoom 2s linear 0.75s infinite;
}

.ban-spinner-item--2 {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}

.ban-spinner-item--3 {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}

@media (max-width: 1440px) {
    /*    .main-banner {
        height: 75vh;
    }*/
    .main-banner .shape {
        width: 500px;
        height: 500px;
        right: -130px;
        bottom: -80px;
    }

    .banner-spinner {
        margin-top: 263px;
    }

    .ban-spinner-item {
        width: 150px;
        height: 150px;
    }
}

/*.main-banner::before {
    content: "";
    background-image: url(../../assets/images/astrik-shape.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    position: absolute;
    width: 767px;
    height: 762px;
    right: 0;
    bottom: 0;
}*/

.main-banner label {
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
}

.main-banner h1 {
    font-size: calc(20px + (39 - 20) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 300;
    color: var(--white-color);
    margin-bottom: 20px;
}

.banListShape {
    animation: clip auto linear;
    animation-timeline: scroll(root block);
    flex: 1 0 100%;
}

.ban-box {
    text-align: left;
    margin-bottom: 20px;
}

    .ban-box span {
        font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: var(--primary-color);
    }

    .ban-box p {
        font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: #abaeaf;
    }
/*.launch-chattrik-banner{
    padding-bottom:80px;
    height:85vh;
}*/
/*.launch-chattrik-banner {
    padding: 60px 0 0px;
    height: 830px;
}*/
.launch-chattrik-banner h2 {
    font-size: calc(25px + (40 - 25) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;
    font-weight: 300;
}

.launch-chattrik-banner p {
    font-size: calc(15px + (16 - 15) * ((100vw - 300px) / (1920 - 300)));
    color: #D3E4F3;
    font-weight: 200;
}

.launch-chattrik-banner span {
    color: var(--primary-color);
}

.launch-bnr-img {
    display: flex;
    justify-content: center;
}


.launch-chattrik-banner h3 {
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    color: var(--primary-color);
    font-weight: 400;
    margin-bottom: 0;
}

.launch-chattrik-banner .blk-btn {
    background-color: var(--primary-color);
    padding: 6px 20px 10px;
    color: #000;
    font-weight: 600;
}

.launch-chattrik-banner i {
    font-size: 28px;
    transform: rotate(-44deg);
    display: inline-block;
    top: 4px;
    position: relative;
}

.ai-powered-banner {
    background-position: center center;
}

    .ai-powered-banner h3 {
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        color: var(--primary-color);
        font-weight: 400;
        margin-bottom: 0;
    }

    .ai-powered-banner h2 {
        font-size: calc(25px + (40 - 25) * ((100vw - 300px) / (1920 - 300)));
        color: #fff;
        font-weight: 300;
    }

    .ai-powered-banner i {
        font-size: 28px;
        transform: rotate(-44deg);
        display: inline-block;
        top: 4px;
        position: relative;
    }

    .ai-powered-banner p {
        font-size: calc(15px + (16 - 15) * ((100vw - 300px) / (1920 - 300)));
        color: #D3E4F3;
        font-weight: 200;
    }

    .ai-powered-banner span {
        color: var(--primary-color);
        font-weight: 300;
    }

.main-bnr-reviews {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 26px;
    padding: 6px 10px;
    width: 290px;
    gap: 10px;
}

    .main-bnr-reviews p {
        margin-bottom: 0;
        font-size: 13px;
        color: #D3E4F3;
    }

.ai-bnr-credit-card {
    font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300))) !important;
    color: #D3E4F3;
    font-weight: 200;
    padding: 20px 0 0 6px;
}

.ai-powered-banner .blk-btn {
    background-color: var(--primary-color);
    padding: 4px 30px 10px;
    color: #2D2222;
    font-weight: 600;
}


.logos-sec {
    position: relative;
    padding: 50px 0;
}

    .logos-sec img {
        /*filter: grayscale(1);*/
        transition: all ease-in-out 0.3s;
        max-width: 115px;
    }

        .logos-sec img:hover {
            filter: grayscale(0);
        }

.logo-sec-cont .small-title {
    color: black;
    font-size: calc(15px + (22 - 15) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1;
}

.logo-sec-cont {
    border-right: 1px solid #cacaca;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px 0 0;
}

.our-digital-sec {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

    .our-digital-sec h2 {
        font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: var(--heading-colors);
    }

    .our-digital-sec p {
        padding-bottom: 30px;
    }

.what-sec {
    position: relative;
    padding: 30px 0 50px;
    overflow-x: hidden;
}

    .what-sec .common-title {
        font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
    }

.what-text .common-title {
    font-size: calc(15px + (32 - 15) * ((100vw - 300px) / (1920 - 300)));
}

.what-sec::before {
    content: "";
    background-color: #5b5f5e;
    background-position: right;
    position: absolute;
    width: 62%;
    height: 1px;
    right: 0;
    top: 12%;
}

.what-box {
    margin-bottom: 20px;
    text-align: left;
}

    .what-box .what-icon {
        margin: 20px 0;
    }

    .what-box .what-text p {
        color: #5b5f5e;
        font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
    }

.cl-primary {
    color: var(--primary-color) !important;
}

.cl-body-font-color {
    color: var(--body-font-color) !important;
}

.crm-sec {
    position: relative;
}

    .crm-sec .tab-content {
        border-bottom: 0;
    }

    .crm-sec .slick-slide img {
        -webkit-animation: mover 2s infinite alternate;
        animation: mover 2s infinite alternate;
    }

.space {
    padding: 120px 0;
    position: relative;
}

.space2 {
    padding: 110px 0;
    position: relative;
}

.space3 {
    padding: 140px 0;
    position: relative;
}

.bg1 {
    background: rgb(36,61,149);
    background: linear-gradient(82deg, rgba(36,61,149,1) 0%, rgba(74,173,225,1) 100%);
    /* padding: 50px 0; */
}

.bg2 {
    background: rgb(2,170,157);
    background: linear-gradient(82deg, rgba(2,170,157,1) 0%, rgba(29,181,116,1) 100%);
}

.bg3 {
    background: rgb(69,59,0);
    background: linear-gradient(82deg, rgba(69,59,0,1) 0%, rgba(2,2,2,1) 100%);
}

.bg4 {
    background: rgb(249,206,112);
    background: linear-gradient(90deg, rgba(249,206,112,1) 0%, rgba(249,206,112,1) 100%);
}

.bg5 {
    background: #0a1b1f;
}

.bgc-white {
    background-color: #fff !important;
}


.bgc-gradient1 {
    background: rgb(0,169,156);
    background: linear-gradient(90deg, rgba(0,169,156,1) 0%, rgba(30,180,118,1) 100%);
}

.bgc-gradient2 {
    background: rgb(0,170,154);
    background: linear-gradient(90deg, rgba(0,170,154,1) 0%, rgba(24,178,121,1) 100%);
}

.bgc-gradient3 {
    background: rgb(249,206,112);
    background: linear-gradient(90deg, rgba(249,206,112,1) 0%, rgba(249,206,112,1) 100%);
}

.crm-sec .common-title {
    color: var(--white-colors);
}

.crm-sec h2 {
    color: var(--white-color) !important;
    font-weight: 400;
    padding-bottom: 10px;
}

.crm-sec p {
    color: var(--white-color);
    font-weight: 400;
    padding-bottom: 20px;
}

.crm-sec .top-text {
    color: #a5d1cb;
    font-size: calc(22px + (51 - 22) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    writing-mode: tb;
    transform: rotate(-180deg);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    left: 5%;
    text-align: center;
    text-transform: uppercase;
}

    .crm-sec .top-text.web {
        color: #fff;
    }

        .crm-sec .top-text.web span::before {
            background-color: #fff;
        }

    .crm-sec .top-text.sty1 {
        font-size: calc(22px + (51 - 22) * ((100vw - 300px) / (1920 - 300)));
        letter-spacing: 12px;
    }

    .crm-sec .top-text span::before {
        content: "";
        background-color: #a5d1cb;
        width: 2px;
        min-height: 100px;
        height: 100vh;
        position: absolute;
        bottom: -100vh;
        left: 49%;
        opacity: 0.5;
    }

    .crm-sec .top-text span {
        position: relative;
    }

.crm-sec .slick-dots {
    display: grid;
    justify-content: center;
    margin: 0;
    padding: 0px 0;
    list-style-type: none;
    position: absolute;
    right: 0 !important;
    top: 300px;
    width: 142px;
    height: 50px;
}

    .crm-sec .slick-dots li {
        margin: 0 0.25rem;
    }

    .crm-sec .slick-dots button {
        display: block;
        width: 12px;
        height: 12px;
        padding: 0;
        border: none;
        border-radius: 100%;
        background-color: #fff;
        text-indent: -9999px;
    }

    .crm-sec .slick-dots li.slick-active button {
        background-color: var(--white-color);
        /* border:1px solid #fff; */
    }

        .crm-sec .slick-dots li.slick-active button:after {
            position: absolute;
            left: -4px;
            right: 0;
            top: -4px;
            bottom: 0;
            border: solid 2px #fff;
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

.case-sec {
    position: relative;
    padding: 80px 0;
}

    .case-sec h3 {
        font-weight: 500;
        padding: 40px 0;
    }

.case-box {
    position: relative;
    margin: 0 20px 20px 20px;
}

    .case-box .case-img img {
        width: 100%;
        margin-bottom: 20px;
    }

    .case-box .case-text h6 {
        font-size: calc(20px + (23 - 20) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: var(--heading-colors);
    }

    .case-box .case-text p {
        font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: #797a7c;
    }

.case-space {
    /* max-width: 83vw;
   max-width:1280px; */
    /* margin-left:275px; */
    margin-left: auto;
}

.case-a {
    text-decoration: none;
    font-size: calc(14px + (17 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    color: var(--Black-color);
    /* display: flex; */
}

    .case-a svg {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--Black-color);
        background-color: var(--primary-color);
        margin-left: 10px;
        border: 0;
        border-radius: 50%;
        padding: 5px;
    }

.know-sec {
    position: relative;
    padding: 20px 0 60px;
}

    .know-sec .greybg {
        background-color: #faf9f8;
        padding: 50px 100px 0 100px;
        border: 0;
        border-radius: 40px 40px 0 0;
        -webkit-border-radius: 40px 40px 0 0;
        -moz-border-radius: 40px 40px 0 0;
        -ms-border-radius: 40px 40px 0 0;
        -o-border-radius: 40px 40px 0 0;
    }

.employ-box-top {
    padding: 20px 0;
    border-bottom: 1px solid var(--Black-color);
    margin-bottom: 20px;
}

    .employ-box-top p {
        margin: 0;
        color: var(--primary-color);
        font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1920 - 300)))
    }

.employ-box {
    padding: 10px 0;
    border-bottom: 1px solid var(--Black-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    transition: all ease-in-out 0.3s;
}

    .employ-box:hover {
        transform: scale(1.02) !important;
    }



    .employ-box .employ-left {
        max-width: 85%;
    }

        .employ-box .employ-left h4 {
            font-size: calc(16px + (25 - 16) * ((100vw - 300px) / (1920 - 300)))
        }

.date-box {
    margin-bottom: 15px;
    color: #48494b;
    font-size: calc(14px + (15 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 300;
}



/* Main Banner Css End */
/* Common Style */
.small-title {
    font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    line-height: 1.8;
    color: var(--primary-color);
    text-transform: uppercase;
}

.common-text {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--body-font-color);
}

.blk-btn {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--white-color);
    text-decoration: none;
    background-color: var(--Black-color);
    padding: 15px 50px;
    text-transform: uppercase;
}

    .blk-btn:hover {
        background-color: var(--primary-color);
        color: var(--Black-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }

.common-title {
    /*font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));*/
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--heading-colors);
}

.white-btn {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--white-color);
    text-decoration: none;
    background-color: transparent;
    padding: 15px 46px;
    color: var(--white-color);
    text-transform: uppercase;
    border: 2px solid var(--white-color);
}

    .white-btn:hover {
        background-color: var(--primary-color);
        color: var(--Black-color);
        border: 2px solid var(--primary-color);
    }

.black-btn {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--Black-color);
    text-decoration: none;
    background-color: transparent;
    padding: 15px 50px;
    color: var(--Black-color);
    text-transform: uppercase;
    border: 2px solid var(--Black-color);
    transition: all ease-in-out 0.3s;
}

    .black-btn:hover {
        background-color: var(--Black-color);
        color: var(--white-color);
    }

.ylw-btn {
    display: table;
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--Black-color);
    text-decoration: none;
    background-color: var(--primary-color);
    padding: 15px 50px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

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

.blk-bdr-btn {
    border: 2px solid var(--Black-color);
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    padding: 10px 40px;
    margin: 20px 0;
    text-transform: uppercase;
    color: var(--Black-color);
}
/* Common Style End */

/* About Page Css Start */
.about-sec {
    position: relative;
    padding: 60px 0;
}

    .about-sec .blk-bdr-btn {
        position: relative;
        z-index: 5;
    }

    .about-sec .container {
        position: relative;
    }
/* .glance-buttoms-slick{
    position: absolute;
    top:0;
    right: 0;
} */
.glance-img {
    margin: 0 20px;
}

    .glance-img img {
        width: 100%;
        margin-right: 0;
    }

.growth-sec {
    position: relative;
    background-color: var(--bg-light-blue);
}

.groth-box {
    border: 0;
    border-radius: 20px;
    background-color: var(--white-color);
    /*padding: 25px 25px 40px 25px;*/
    padding: 10px 25px 10px 25px;
    margin-bottom: 20px;
    transition: all ease-in-out 0.3s;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

    .groth-box:hover {
        background: var(--primary-color);
    }

    .groth-box .groth-icon {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background-color: #fcf6e5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }

    .groth-box h6 {
        font-size: calc(15px + (17 - 15) * ((100vw - 300px) / (1920 - 300)));
        color: #343130;
        font-weight: 500;
    }

.row .groth-box h3 {
    font-size: calc(15px + (17 - 15) * ((100vw - 300px) / (1920 - 300)));
    color: #343130;
    font-weight: 500;
}

.groth-box p {
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    color: #6c6a6a;
    font-weight: 400;
}

.sp-tp {
    margin-top: 100px;
}

.acc-box {
    border-right: 1px solid #d3d3d3;
    text-align: center;
    padding: 0 20px;
}

    .acc-box .count {
        font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1920 - 300)));
        color: var(--primary-color);
        font-weight: 500;
    }

    .acc-box p {
        font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
        color: #7e7d7d;
        font-weight: 400;
        margin-bottom: 0;
    }

.shaping-sec:after {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 500px;
    height: 500px;
    background-image: url(../images/bg-shape-1.png);
    background-size: contain;
    display: block;
    content: "";
    z-index: -1;
    background-repeat: no-repeat;
}


.shaping-sec {
    position: relative;
    padding: 100px 0;
    background-color: #f2cd1a;
    z-index: 1;
    overflow: hidden;
}

.shaping-box {
    margin-bottom: 20px;
    border: 0;
    border-radius: 20px;
    background-color: #000;
    min-height: 100px;
    padding: 20px;
}

    .shaping-box .shaping-icon {
        width: 50px;
        height: 50px;
        border: 0;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

        .shaping-box .shaping-icon img {
            filter: brightness(0.5);
        }

    .shaping-box .shaping-text {
        color: #f2cd1c;
        font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
        line-height: 1;
        font-weight: 500;
    }

.offer-sec {
    position: relative;
    padding: 100px 0;
    background-color: var(--white-color);
}

.offer-box {
    position: relative;
    margin-bottom: 10px;
}

    .offer-box .offer-icon {
        width: 50px;
        height: 50px;
        border: 0;
        border-radius: 50%;
        background-color: #fcf6e5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }

    .offer-box h3 {
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        color: #343130;
        font-weight: 500;
    }

    .offer-box p {
        font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
        color: #6c6a6a;
        font-weight: 400;
    }

.contentArea h3 {
    font-size: 1rem;
}

.testimonial-sec {
    background-color: #f5f8fb;
    position: relative;
    padding: 100px 0;
}

.testimonail-slider {
    max-width: 950px;
    margin: 0 auto;
}

.testimonial-item {
    text-align: center;
}

    .testimonial-item .testimonial-img {
        max-width: 200px;
        margin: 0 auto;
    }

        .testimonial-item .testimonial-img img {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

    .testimonial-item .testimonial-text label {
        display: block;
        color: #0a0909;
        font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        margin: 10px 0;
    }

    .testimonial-item .testimonial-text em {
        display: block;
        color: #9ba0a6;
        font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        margin-bottom: 12px;
    }

    .testimonial-item .testimonial-text p {
        display: block;
        color: #0a0909;
        font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        margin: 0;
    }

.tm-cont {
    font-size: 22px;
    font-weight: 500;
    color: #313234;
}

.tm-slick-btns {
    justify-content: flex-end;
    display: flex;
    gap: 8px;
}

    .tm-slick-btns button {
        background-color: transparent;
        border: none;
    }

        .tm-slick-btns button:hover img {
            filter: brightness(0) saturate(100%) invert(86%) sepia(1%) saturate(787%) hue-rotate(65deg) brightness(99%) contrast(83%);
        }

.tm-cont:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../images/quote-icon-top.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

.tm-cont:after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../images/quote-icon-bottom.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
}


.team-sec {
    background-color: #131820;
    padding: 100px 0;
    position: relative;
}

    .team-sec h2 {
        font-size: calc(26px + (39 - 26) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: var(--white-color);
    }

    .team-sec p {
        font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: var(--white-color);
    }

.team-text {
    margin-top: 10px;
    text-align: center;
    min-height: 100px;
}

    .team-text span {
        display: block;
        font-size: calc(17px + (21 - 17) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: var(--white-color);
    }

    .team-text label {
        display: block;
        font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: #99a2ac;
    }

.innative-sec {
    position: relative;
    padding: 100px 0;
}

.help-box {
    margin-bottom: 20px;
}

.help-text h6 {
    font-size: 19px;
    color: #343130;
}

/* the slides */
.help-slider .slick-slide {
    margin: 0 10px;
}
/* the parent */
.help-slider .slick-list {
    margin: 0 -10px;
}

.help-img img {
    width: 100%;
}

.help-img {
    margin-bottom: 20px;
}

.glance-buttoms-slick {
    justify-content: flex-end;
    display: flex;
    gap: 8px;
    position: relative;
    top: -20px;
    /*margin-bottom: 30px;*/
}

    .glance-buttoms-slick button {
        background-color: transparent;
        border: none;
    }

.glance-img.gm-half img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gm-full {
    height: 520px;
}

    .gm-full img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gm-half {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.glance-slide img {
    border-radius: 10px;
}

.img-col {
    height: 250px;
}

    .img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.glance-img.gm-half {
    margin: 0;
}

.glance-img.gm-full {
    margin: 0;
}

/* the slides */
.ab-slider .slick-slide {
    margin: 0 10px;
}
/* the parent */
.ab-slider .slick-list {
    margin: 0 -10px;
}


.glance-slider .slick-slide {
    margin: 0 10px;
}

.glance-slider .slick-list {
    margin: 0 -10px;
}

/* Award Section */

.award-sec {
    padding: 80px 0;
    background-color: #f5f8fd;
}

/* Award Section End */


/* About Page Css End */



/* Career page banner  */

.groth-text {
    min-height: 100px;
}

.our-work-sec {
    background-color: var(--bg-light-blue);
    position: relative;
    z-index: 1;
}

    .our-work-sec:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60%;
        background-color: var(--primary-color);
        z-index: -1;
    }

.perks-vertical .perks-box {
    opacity: 0.6;
    max-width: 480px;
}

.perks-slider .perks-box {
    min-height: 260px;
    margin: 15px 25px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.perks-box {
    background: #FFFFFF;
    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.2);
    border: 0;
    border-radius: 20px;
    background-color: var(--white-color);
    padding: 20px 50px 0px 40px;
    min-height: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    transition: all ease-in-out 0.3s;
}

.perks-vertical .slick-active .perks-box {
    background-color: var(--primary-color);
    opacity: 1;
}

    .perks-vertical .slick-active .perks-box .groth-icon {
        background-color: var(--Black-color);
    }

.perks-box .groth-icon {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-color: #fcf6e5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.perks-heading {
    position: sticky;
    top: 30px;
    padding-bottom: 10px;
}

.perks-box h3 {
    font-size: calc(15px + (17 - 15) * ((100vw - 300px) / (1920 - 300)));
    color: #343130;
    font-weight: 500;
    text-transform: uppercase;
}

.life-top-img {
    margin-bottom: 30px;
}

.life-topright-img img {
    height: 357px;
    border-radius: 34px;
    overflow: hidden;
    margin-bottom: 30px;
}

/* Career page banner end */


/*----------------- Thank You Start --------------------*/

.thankU-sec {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

    .thankU-sec h1 {
        color: #000;
        font-weight: 600;
    }

    .thankU-sec h3 {
        font-size: 22px;
        color: #000;
        font-weight: 600;
    }

.testi-sec {
    background-color: #f5f8fb;
}

.testi-box {
    max-width: 400px;
    padding: 0 20px;
}

    .testi-box p {
        color: #000;
    }

.testi-slider {
    padding-top: 70px;
}

    .testi-slider .slick-slide {
        margin-right: 20px;
    }

.testi-info {
    display: flex;
    gap: 14px;
    padding-top: 20px;
}

    .testi-info span {
        color: #000;
        font-weight: 500;
        font-size: 18px;
    }

    .testi-info p {
        font-size: 18px;
        font-weight: 300;
        color: #717171;
    }

.testi-arrows {
    position: relative;
    padding-bottom: 60px;
}

.left-arrow {
    position: absolute;
    right: 414px;
    top: 40px;
}

.right-arrow {
    position: absolute;
    right: 370px;
    top: 40px;
}

.perks-slider .slick-track {
    padding-top: 30px;
}

.testi-pic img {
    border-radius: 50%;
}
/* the slides */
.perks-slider .slick-slide {
    margin: 0 10px;
}
/* the parent */
.perks-slider .slick-list {
    margin: 0 -10px;
}

/*----------------- Thank You End --------------------*/


/*Our Work Gallery */
.gl-img-holder {
    position: relative;
    overflow: hidden;
}

.gl-img-cont {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 30px;
    color: #fff;
    z-index: 1;
}

.gl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gl-img-holder:hover .gl-img-cont {
    animation: ctm-move 1.5s forwards;
}

.gl-img-cont h3 {
    font-size: 45px;
    font-weight: 600;
    line-height: 1;
}

.gl-img-cont span {
    font-size: 12px;
    display: block;
}

.gl-img-holder:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.65) 100%);
}


@keyframes ctm-move {
    0% {
        bottom: 0;
    }

    50% {
        bottom: 10%;
    }

    100% {
        opacity: 1;
        bottom: 8%;
    }
}

/*Our Work Gallery End*/
/* Footer Css Start */
.footer {
    background-color: var(--Black-color);
    padding-top: 20px;
}

    .footer .SecondArea {
        border-top: solid 1px #292929;
        border-bottom: solid 1px #292929;
        margin-bottom: 30px;
        padding: 25px 0;
    }

    .footer h6 {
        font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        color: #dadada;
        padding-bottom: 10px;
        margin-bottom: 20px;
        position: relative;
        text-transform: uppercase;
    }

        .footer h6:before {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 19px;
            height: 3px;
            background-color: var(--primary-color);
            content: '';
        }

    .footer p {
        font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: var(--white-color);
        margin: 20px 0;
    }

.foot-list {
    padding: 0;
    margin-bottom: 20px;
}

    .foot-list li {
        list-style: none;
        margin-bottom: 10px;
    }

    .foot-list.sty1 li {
        width: 49%;
        display: inline-block;
    }

    .foot-list li a {
        font-size: calc(12px + (12 - 12) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        text-transform: uppercase;
        color: #dadada;
        text-decoration: none;
        transition: all ease-in-out 0.3s;
    }

        .foot-list li a i, .foot-list li a svg {
            margin-right: 3px;
        }

        .foot-list li a:hover {
            color: var(--primary-color);
        }

.copyright {
    padding-bottom: 20px;
    padding-top: 20px;
    position: relative;
    /*margin-top: 40px;
    border-top: 1px solid #515252;*/
    background-color: #090909;
}

    .copyright p {
        font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: var(--white-color);
        margin: 0;
    }

.soical-media-footer {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
}

.footer .SecondArea h5 {
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 0;
    margin-right: 20px;
}

.social-links-ft {
    padding: 0;
    display: flex;
    align-items: baseline;
    margin: 0;
}

    .social-links-ft li {
        list-style-type: none;
    }

        .social-links-ft li a {
            list-style: none;
            margin-right: 3px;
            width: 42px;
            height: 42px;
            border-radius: 2px;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #161616;
        }

        .social-links-ft li a {
            color: var(--white-color);
            font-size: 14px;
        }

            .social-links-ft li a:hover {
                background-color: var(--primary-color);
            }

        .social-links-ft li:hover a {
            color: var(--Black-color);
        }

        .social-links-ft li a i {
            font-family: "FontAwesome";
            font-size: 16px;
            margin: 0 auto;
        }

footer .newsLetterArea {
    display: flex;
    align-items: center;
}

    footer .newsLetterArea .formArea {
        display: flex;
        max-width: 70%;
        flex: 0 0 70%;
    }

        footer .newsLetterArea .formArea .form-control {
            background-color: transparent;
            border: #292929 solid 1px;
            border-radius: 0;
            font-style: italic;
            font-size: 14px;
        }

            footer .newsLetterArea .formArea .form-control::placeholder {
                color: #292929;
            }

        footer .newsLetterArea .formArea .joinButton {
            background-color: #f3cd16;
            font-weight: 600;
            text-transform: uppercase;
            border: 0;
            height: 100%;
            padding: 0 12px;
            transition: all ease-in-out 0.3s;
        }

            footer .newsLetterArea .formArea .joinButton:hover {
                background: #fff;
            }

        footer .newsLetterArea .formArea form {
            display: flex;
            align-items: center;
            max-width: 100%;
            flex: 0 0 100%;
        }

            footer .newsLetterArea .formArea form .fieldArea {
                display: inline-block;
                width: 80%;
            }

footer .locationArea {
    padding: 40px 0;
}

footer .locationBox {
    background-color: var(--primary-color);
    border-radius: 6px;
    padding: 25px 15px 10px 15px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

    footer .locationBox .boxes {
        display: flex;
        max-width: 33.3%;
        flex: 0 0 33.3%;
        padding: 0 15px;
        border-right: #daa900 solid 1px;
        flex-direction: column;
    }

        footer .locationBox .boxes:last-child {
            border-right: 0;
        }

        footer .locationBox .boxes h5 {
            color: #171717;
            font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
            margin-bottom: 18px;
            font-weight: 600;
            padding: 0;
        }

        footer .locationBox .boxes ul {
            padding: 0;
        }

            footer .locationBox .boxes ul li {
                list-style-type: none;
                display: inline-block;
                width: 100%;
                margin: 0 0 7px 0;
            }

                footer .locationBox .boxes ul li i, footer .locationBox .boxes ul li svg {
                    color: #171717;
                    font-size: 14px;
                }

                footer .locationBox .boxes ul li a {
                    color: #171717;
                    font-size: 13px;
                    font-weight: 500;
                }

                footer .locationBox .boxes ul li span {
                    color: #171717;
                    font-size: 13px;
                    font-weight: 500;
                    display: inline-flex;
                    width: 92%;
                }
/* Footer Css End */
/* RESPONSIVE MEDIA QUERIES END */
.mob-app-banner-sec {
    position: relative;
    padding: 60px 0 0 0;
}

footer .linksBox {
    display: inline-block;
    padding: 0 25px;
    border-left: #292929 solid 1px;
    width: 100%;
}

    footer .linksBox.brdr-right {
        border-right: #292929 solid 1px;
    }

.mob-ban-inner {
    background: no-repeat center 0, -webkit-linear-gradient(3deg, #f0d504 0, #f4af00 100%);
    max-height: 500px;
}

    .mob-ban-inner.chatBanner {
        max-height: inherit;
        padding: 50px;
    }

.crm-ban-inner {
    background: no-repeat center 0, -webkit-linear-gradient(3deg, #a6c1e5 0, #c2e9fb 100%);
    max-height: 500px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.hrm-ban-inner {
    background: no-repeat center 0, -webkit-linear-gradient(3deg, #bab6db 0, #b9daf3 100%);
    max-height: 500px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.lms-ban-inner {
    background: no-repeat center 0, -webkit-linear-gradient(3deg, #f2ee84 0, #62bf7a 100%);
    min-height: 500px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.error-field {
    border-color: #ff4d4f !important;
}


.mob-col-1-full {
    padding-top: 50px;
}

.align-item-center {
    align-items: center !important;
}

.mob-cont {
    /*padding: 0 0 0 50px;*/
    padding: 0 0 100px 50px;
}

.mob-cont2 {
    /*padding: 0 0 0 50px;*/
    padding: 0 0 0 50px;
}

.img-col-n {
}

.img-postion {
    position: relative;
    top: -200px;
}

.mb-half {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.img-postion-2 {
    position: relative;
    top: 90px;
}

.mob-app-dev-sev-sec {
    position: relative;
    background-color: var(--white-color);
}

.mad-bg1 {
    background: url(/assets/images/mob-app-development/mad-serv-bg-1.jpg);
}

.group-1 {
    margin: 0.8rem auto 0;
    min-height: 628px;
    position: relative;
}

.ellipse-4 {
    height: 539px;
    left: 50%;
    max-width: 539px;
    position: absolute;
    top: 55px;
    width: 539px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #08162a;
    margin-left: -270px;
}

.ellipse-5 {
    height: 539px;
    left: 50%;
    max-width: 539px;
    position: absolute;
    top: 55px;
    width: 539px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #009f8a;
    margin-left: -270px;
}

.vector-smart-object-holder {
    left: 50%;
    max-width: 351px;
    padding: 16px 2.962963% 19px;
    position: absolute;
    top: 44px;
    width: 65%;
    background: url(/assets/images/mob-app-development/vector_smart_object_7.png) no-repeat center 0;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    margin-left: -81px;
}

.vector-smart-object-2 {
    display: block;
    margin: 0 auto;
    max-width: 303px;
    position: relative;
    right: 2.507837%;
    width: 100%;
}

.vector-smart-object-holder-2 {
    left: 50%;
    max-width: 332px;
    padding: 15px 2.777778% 18px;
    position: absolute;
    top: 0;
    width: 61.48148%;
    background: url(/assets/images/mob-app-development/vector_smart_object_9.png) no-repeat center 0;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    margin-left: -270px;
}

.layer-5 {
    display: block;
    left: 2.483444%;
    margin: 0 auto;
    max-width: 287px;
    position: relative;
    width: 100%;
}

.crm-sec .mad-top-text {
    color: grey;
    font-size: calc(26px + (100 - 26) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    writing-mode: tb;
    transform: rotate(180deg);
    position: absolute;
    top: 150px;
    left: 5%;
    text-transform: uppercase;
}

    .crm-sec .mad-top-text.sty2 {
        color: rgba(255,255,255, 0.55);
        font-size: calc(26px + (70 - 26) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
        writing-mode: tb;
        transform: rotate(180deg);
        position: absolute;
        top: 100px;
        left: 5%;
        text-transform: none;
    }

    .crm-sec .mad-top-text.sty3 {
        color: rgba(255,255,255, 0.55);
        font-size: calc(26px + (62 - 26) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
        writing-mode: tb;
        transform: rotate(180deg);
        position: absolute;
        top: 130px;
        left: 5%;
        text-transform: none;
    }

    .crm-sec .mad-top-text::before {
        content: "";
        background-color: grey;
        width: 2px;
        height: 100%;
        position: absolute;
        bottom: 600px;
        left: 49%;
        /* bottom: 0; */
        opacity: 0.5;
        display: none;
    }

.count-sec {
    background-color: var(--bg-light-blue);
    position: relative;
    padding: 80px 0;
}

.count-box {
    font-size: calc(18px + (23 - 18) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1;
    font-weight: 500;
    border: 0;
    /*border-radius: 20px;*/
    background-color: var(--white-color);
    /* padding: 25px 25px 40px 25px; */
    padding: 50px 10px 35px 10px;
    margin-bottom: 20px;
    text-align: center;
}

    .count-box span {
        font-size: calc(22px + (60 - 22) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        color: var(--heading-colors);
        display: block;
        padding-bottom: 10px;
    }

    .count-box p {
        font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1920 - 300)));
        color: #6c6a6a;
        font-weight: 400;
    }

.tools-list ul {
    list-style: none;
}

    .tools-list ul li:before {
        content: '';
        left: -25px;
        right: 25px;
        top: 15px;
        width: 14px;
        height: 14px;
        /* border-radius: 5px; */
        background-image: url(/assets/images/astrik-flower.png);
        display: block;
        /* margin-right: 10px; */
        vertical-align: middle;
        /* margin-left: -15px; */
        position: relative;
    }

.tools-sec {
    position: relative;
    padding: 60px 0 30px 0;
}

.tools-title h3 {
    font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
    color: #343130;
    font-weight: 550;
}

.tools-list ul li {
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    color: var(--body-font-color);
}

.tools-box {
    font-size: calc(18px + (23 - 18) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1;
    font-weight: 500;
    border: 0;
    /* border-radius: 20px; */
    background-color: var(--white-color);
    /* padding: 25px 25px 40px 25px; */
    padding: 25px 10px 10px 10px;
    margin-bottom: 20px;
}

.process-sec {
    position: relative;
    padding: 50px 0;
    background-color: var(--white-color);
}

.process-box {
    font-size: calc(16px + (23 - 18) * ((100vw - 300px) / (1920 - 300)));
    line-height: 1;
    font-weight: 500;
    border: 0;
    /* border-radius: 20px; */
    background-color: var(--white-color);
    /* padding: 25px 25px 40px 25px; */
    padding: 25px 10px 10px 10px;
    margin-bottom: 20px;
}

    .process-box span {
        font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        color: var(--primary-color);
        display: block;
        padding-bottom: 10px;
    }

    .process-box .headings {
        font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
        color: var(--heading-colors);
    }
    /*.process-box p:after {
    border-bottom: 1px solid grey;
    content:"";
    width: 250px;
}*/
    /*.process-box:after {
        content: "";
        width: 25px;
        height: 25px;
        background-image: url('/assets/images/tri-process-after-box-img1.png');
    }*/


    .process-box ul li {
        font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: var(--body-font-color);
    }

.process-para p {
    line-height: 1.5;
}

.process-box ul {
    list-style: none;
}

.tools-list ul li:before {
    content: '';
    left: -25px;
    right: 25px;
    top: 15px;
    width: 14px;
    height: 14px;
    /* border-radius: 5px; */
    background-image: url(/assets/images/astrik-flower.png);
    display: block;
    /* margin-right: 10px; */
    vertical-align: middle;
    /* margin-left: -15px; */
    position: relative;
}

.process-list ul li:before {
    content: '';
    left: -25px;
    right: 25px;
    top: 15px;
    width: 14px;
    height: 14px;
    /* border-radius: 5px; */
    background-image: url(/assets/images/astrik-flower.png);
    display: block;
    /* margin-right: 10px; */
    vertical-align: middle;
    /* margin-left: -15px; */
    position: relative;
}

.process-list {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ccc;
    padding-top: 15px;
    margin-bottom: 15px;
    width: max-content;
}

.category-sec {
    background-color: var(--bg-light-blue);
    position: relative;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

    .category-sec .imgRightBox {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        max-width: 40%;
    }

        .category-sec .imgRightBox.sty1 {
            height: auto;
        }

        .category-sec .imgRightBox img {
            width: 100%;
            /*height: 100%;*/
            object-fit: cover;
        }

.categ-cont {
    padding: 100px 20px;
}

.nav-link {
    color: var(--body-font-color);
    font-weight: 500;
}

    .nav-link:focus, .nav-link:hover {
        color: var(--primary-color);
    }

.nav-serv-title {
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    color: var(--heading-colors);
}

.tab-content#v-pills-tabContent {
    padding: 0;
}

.tab-content {
    padding: 50px 0;
    border-bottom: #dee2e6 solid 1px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background: none !important;
    border-color: none !important;
    border: none;
}

.nav-tabs .nav-link {
    margin-bottom: 0 !important;
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: calc(13px + (18 - 13) * ((100vw - 300px) / (1920 - 300)));
}

.tab-content p {
    margin-top: 3rem;
}

.nav-tab-btn {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 600;
    color: var(--heading-colors);
    text-decoration: none;
    background-color: transparent;
    padding: 15px 50px;
    text-transform: uppercase;
    border: 1px solid var(--Black-color);
}

    .nav-tab-btn:hover {
        background-color: var(--primary-color);
        color: var(--Black-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }

    .nav-tab-btn.btn-getChattrik {
        position: relative;
    }

        .nav-tab-btn.btn-getChattrik:hover {
            background-color: var(--Black-color);
            color: var(--white-color);
        }

        .nav-tab-btn.btn-getChattrik img {
            position: relative;
            top: -3px;
            margin-right: 5px;
        }

.colored-bg {
    background-color: var(--bg-light-blue) !important;
}

.mob-app-dev-sev-sec em {
    display: block;
    color: #9ba0a6;
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    padding: 15px 0 30px 0;
}

@media (max-width: 1600px) {
    .ellipse-4 {
        display: none;
    }
}

@media (max-width: 375px) {
    .group-1 {
        margin: 0.8rem auto 0;
        min-height: 275px;
        position: relative;
    }

    .vector-smart-object-holder-2 {
        width: 30%;
        margin-left: -100px;
    }

    .vector-smart-object-holder {
        width: 30%;
        margin: -35px;
    }
}

.common-text-2 {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    color: var(--heading-colors);
}

.prod-dev-ban-inner {
    background: -webkit-linear-gradient(176deg, #0032e0 0, #001755 100%);
    background: linear-gradient(274deg, #0032e0 0, #001755 100%);
    background-position: center center;
    position: relative;
}

.prod-dev-cont {
}

    .prod-dev-cont .common-title {
        color: var(--white-color);
    }

    .prod-dev-cont p {
        color: var(--white-color);
    }

.ban-btn {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 600;
    color: var(--white-color);
    text-decoration: none;
    background-color: transparent;
    padding: 15px 50px;
    text-transform: uppercase;
    border: 1px solid var(--white-color);
}

.ban-btn-inside {
    padding: 30px 0 0 0;
}

.ban-btn:hover {
    background-color: var(--primary-color);
    color: var(--Black-color);
    border: 1px solid var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.testimonials {
    position: relative;
    padding: 60px 0;
    background: var(--white-color);
}

.testimonial-box {
}

    .testimonial-box span {
        display: block;
        font-size: calc(16px + (19 - 16) * ((100vw - 300px) / (1920 - 300)));
        color: var(--heading-colors);
        font-weight: 500;
    }

    .testimonial-box em {
        font-size: calc(10px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
        color: grey;
    }

.testimonial-cont {
    padding: 25px 0;
}

.tbh {
}

@media (max-width: 991px) {
    .main-header .navbar-expand-lg .nav-item .dropdown-menu li.block .contectArea {
        display: none;
    }

    .mob-cont {
        padding: 20px 0 0 30px;
    }

    .mob-col-1-full {
        padding-top: 0;
    }

    .tbh {
        display: none !important;
    }

    .mb-hide {
        display: none !important;
    }

    .logo-sec-cont {
        border-right: none;
        padding: 0;
    }
}

.mapBox {
    position: absolute;
    right: -150px;
    top: 0;
    width: 50%;
    max-height: 374px;
}

    .mapBox .mapImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (max-width: 1600px) {
    .mapBox {
        right: -50px;
        width: 45%;
    }
}

.mapBox .countryBox {
    position: absolute;
    color: var(--DGrey);
    font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all ease-in-out 0.3s;
}

    .mapBox .countryBox.usa {
        left: 135px;
        top: 140px;
    }

    .mapBox .countryBox.uk {
        left: 320px;
        top: 80px;
    }

    .mapBox .countryBox.uae {
        left: 320px;
        top: 150px;
    }

    .mapBox .countryBox.canada {
        left: 130px;
        top: 50px;
    }

    .mapBox .countryBox.pk {
        right: 175px;
        top: 150px;
    }

    .mapBox .countryBox .countryIcon {
        display: flex;
        align-items: center;
        width: 18px;
        height: 18px;
        margin-right: 5px;
    }

    .mapBox .countryBox .countryName {
        opacity: 0;
    }

    .mapBox .countryBox:hover .countryName {
        opacity: 1;
    }


.map-spinner {
    position: absolute;
    margin-top: 0;
    pointer-events: none;
    margin-left: 10px;
}

.m-spinner-item {
    border: 1px solid #000000;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-animation: zoom 2s linear 0.75s infinite;
    animation: zoom 2s linear 0.75s infinite;
}

.m-spinner-item--2 {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}

.m-spinner-item--3 {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}


.collapsible-link {
    width: 100%;
    position: relative;
    text-align: left;
}

    .collapsible-link::before {
        content: "\f107";
        position: absolute;
        top: 50%;
        right: 0.8rem;
        transform: translateY(-50%);
        display: block;
        font-family: "FontAwesome";
        font-size: 1.1rem;
    }

    .collapsible-link[aria-expanded="true"]::before {
        content: "\f106";
    }

.clientsSec {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

    .clientsSec .cBox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 25px;
        max-width: 20%;
        flex: 0 0 20%;
    }

        .clientsSec .cBox .iconBox {
            background-color: var(--white-color);
            width: 100%;
            height: 98px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
        }

            .clientsSec .cBox .iconBox img {
                width: 75%;
            }


/*PORTFOLIO CSS START*/

.portfolio-section .controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .portfolio-section .controls .control {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
        color: #393833;
        background-color: #f5f8fb;
        padding: 10px 20px;
        margin: 0 8px;
        transition: all ease-in-out 0.3s;
        border: 0;
        font-weight: 500;
    }

        .portfolio-section .controls .control:hover, .portfolio-section .controls .control.mixitup-control-active {
            background: #f2cd1c;
        }

        .portfolio-section .controls .control:first-child {
            margin-left: 0;
        }

        .portfolio-section .controls .control:last-child {
            margin-right: 0;
        }

.portfolio-section .portfolio-item .mix {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 50px;
    height: 100%;
    position: relative;
    flex-direction: column;
}

.portfolio-section .portfolio-item .imgBox {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    min-height: 460px;
    margin-bottom: 15px;
}

    .portfolio-section .portfolio-item .imgBox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .portfolio-section .portfolio-item .imgBox .tags {
        position: absolute;
        left: 20px;
        top: 20px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 500;
        font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
        padding: 10px;
        background-color: rgba(0,0,0, 0.5);
    }

.noContent {
    color: #000 !important;
    background-color: transparent !important;
    pointer-events: none;
}

#loadMore {
    background-color: #000;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 20px;
    margin: 50px 0;
    display: inline-block;
}

    #loadMore:hover {
        background-color: blue;
        text-decoration: none;
    }


.top-clients-item {
    min-height: 465px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 70px;
}

    .top-clients-item.pholox {
        background: rgb(150,114,178);
        background: linear-gradient(82deg, rgba(150,114,178,1) 0%, rgba(112,59,150,1) 100%);
        color: #fff;
    }

        .top-clients-item.pholox .logoClient {
            margin-bottom: 20px;
            display: inline-block;
        }

        .top-clients-item.pholox h2 {
            margin-bottom: 15px;
        }
/*CLIENT SLIDER END*/

.slide1Bg {
    padding: 60px 20px;
    background: rgb(223,230,239);
    background: linear-gradient(82deg, rgba(223,230,239,1) 0%, rgba(206,219,236,1) 100%);
}

.starategySlide {
    background: rgb(243,204,25);
    background: linear-gradient(82deg, rgba(243,204,25,1) 0%, rgba(242,179,28,1) 100%);
}

.transformationSlide {
    background: rgb(214,194,223);
    background: linear-gradient(82deg, rgba(214,194,223,1) 0%, rgba(153,194,231,1) 100%);
}

.DevelopmentSlide {
    background: rgb(126,210,234);
    background: linear-gradient(82deg, rgba(126,210,234,1) 0%, rgba(87,201,233,1) 100%);
}

.solutionsCta {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0 150px 0;
}

    .solutionsCta .CtaMain {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

        .solutionsCta .CtaMain h5 {
            color: var(--primary-color);
            text-align: center;
        }

        .solutionsCta .CtaMain h2 {
            color: var(--white-color);
            text-align: center;
            margin-bottom: 20px;
            font-weight: 300;
            font-size: calc(20px + (49 - 20) * ((100vw - 300px) / (1920 - 300)));
        }

        .solutionsCta .CtaMain i, .solutionsCta .CtaMain svg {
            color: var(--primary-color);
            font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1920 - 300)));
        }

        .solutionsCta .CtaMain p {
            text-align: center;
            font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
            color: var(--white-color);
        }

.buildSec {
    padding: 150px 0;
    position: relative;
}

    .buildSec .content-Box {
        padding-top: 100px;
        padding-bottom: 250px;
    }

        .buildSec .content-Box .black-btn {
            margin-top: 20px;
            display: inline-block;
        }

        .buildSec .content-Box h3 {
            font-size: calc(20px + (39 - 20) * ((100vw - 300px) / (1920 - 300)));
            color: var(--Black-color);
            font-weight: 300;
            line-height: 1.3;
        }

    .buildSec .rightImg {
        position: absolute;
        right: 0;
        top: 150px;
        bottom: 150px;
        width: 45%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center top;
    }

.solutionThing {
    padding: 100px 0;
}

    .solutionThing .contentArea {
        padding-top: 135px;
        position: sticky;
        top: 0;
    }

    .solutionThing .rightPostBox {
        padding-top: 250px;
    }

    .solutionThing .contentArea h2 {
        font-size: calc(28px + (40 - 28) * ((100vw - 300px) / (1920 - 300)));
        color: var(--Black-color);
        font-weight: 300;
        line-height: 1.3;
    }

    .solutionThing .postBox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;
        flex-direction: column;
        text-align: center;
        padding: 0 15px;
    }

        .solutionThing .postBox .imgBox {
            display: inline-block;
            width: 100%;
            height: 482px;
            overflow: hidden;
            margin-bottom: 30px;
        }

            .solutionThing .postBox .imgBox img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .solutionThing .postBox h4 {
            font-size: calc(20px + (31 - 20) * ((100vw - 300px) / (1920 - 300)));
            color: var(--Black-color);
            font-weight: 300;
            line-height: 1.3;
            margin-bottom: 20px;
        }

/*SOLUTIONS PAGE CSS END*/

.innerSlide .glance-top-Item {
    display: flex;
    align-items: center;
    padding: 50px 20px;
    min-height: 490px;
    overflow: hidden;
    position: relative;
    display: flex !important;
    align-items: center;
}

    .innerSlide .glance-top-Item .slideImg {
        position: absolute;
        right: -70px;
        bottom: 0;
    }

.starategySlide .contentBox {
    display: flex;
    max-width: 50%;
    flex: 0 0 50%;
    padding-left: 50px;
}

.innerSlide .glance-top-Item .slideImg1 {
    position: absolute;
    right: 0;
    bottom: 0;
}

.contentBoxSlideHalf {
    /*display: flex;*/
    max-width: 50%;
    flex: 0 0 50%;
    padding-left: 50px;
}

    .contentBoxSlideHalf .blk-btn {
        display: inline-block;
        font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1920 - 300)));
    }

/*STRATEGY PAGE CSS END*/



.collapsible-link {
    width: 100%;
    position: relative;
    text-align: left;
}

    .collapsible-link::before {
        content: "\f067";
        position: absolute;
        top: 50%;
        right: 0.8rem;
        transform: translateY(-50%);
        display: block;
        font-family: "FontAwesome";
        font-size: 1.1rem;
    }

    .collapsible-link[aria-expanded="true"]::before {
        content: "\f068";
    }

.accordion.transformation .card {
    border-radius: 0;
    border: 0;
    border-bottom: #d1d3d2 solid 1px;
    margin: 0 0;
}

.accordion.transformation .card-header {
    background-color: transparent;
    padding-left: 0;
}

    .accordion.transformation .card-header button {
        text-decoration: none;
        color: #494849 !important;
        font-weight: 600;
        text-transform: none !important;
        font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1920 - 300)));
    }

.cl-white {
    color: var(--white-color) !important;
}

.cl-black {
    color: var(--Black-color) !important;
}

.tranasTabs {
    max-width: 75%;
}

    .tranasTabs.nav-pills .nav-link {
        box-shadow: none !important;
        border-radius: 0;
        border-bottom: #92d4cc solid 1px;
        position: relative;
        color: #dbe3d4;
        transition: all ease-in-out 0.3s;
        display: flex;
        align-items: center;
    }

        .tranasTabs.nav-pills .nav-link svg {
            display: none;
            margin-right: 10px;
            color: var(--primary-color);
            transition: all ease-in-out 0.3s;
        }

        .tranasTabs.nav-pills .nav-link:hover svg {
            display: block;
        }

        .tranasTabs.nav-pills .nav-link.active, .tranasTabs.nav-pills .show > .nav-link {
            background: transparent;
            color: #fff;
        }

            .tranasTabs.nav-pills .nav-link.active svg, .tranasTabs.nav-pills .show > .nav-link svg {
                display: block;
            }

/*TRANSFORMATION CSS END*/

.workBanner {
    padding-bottom: 100px
}

.teamBanner {
    padding-bottom: 50px;
}

.workTop-sec {
    /*padding: 100px 0;*/
    padding-top: 100px;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

    .workTop-sec .mad-top-text span::before {
        content: "";
        background-color: #f7b82f;
        width: 2px;
        min-height: 100px;
        height: 100vh;
        position: absolute;
        bottom: -100vh;
        left: 49%;
        opacity: 0.5;
    }


    .workTop-sec .mad-top-text.team {
        color: #b3b3b3;
    }

    .workTop-sec .mad-top-text {
        color: #eeeeef;
        font-size: calc(22px + (51 - 22) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
        writing-mode: tb;
        transform: rotate(180deg);
        position: absolute;
        top: 150px;
        left: 5%;
        text-align: center;
        text-transform: uppercase;
        top: 0;
        bottom: 0;
        letter-spacing: 12px;
        margin: auto;
    }

        .workTop-sec .mad-top-text span {
            position: relative;
        }

        .workTop-sec .mad-top-text.sty1 {
            color: #eeeeef;
            font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
            font-weight: 700;
            writing-mode: tb;
            transform: rotate(180deg);
            position: absolute;
            top: 150px;
            left: 5%;
            text-align: center;
            text-transform: uppercase;
            top: 0;
            bottom: 0;
            letter-spacing: 2px;
            margin: auto;
        }

        .workTop-sec .mad-top-text.sty2 {
            color: #b3b3b3;
            font-size: calc(22px + (42 - 22) * ((100vw - 300px) / (1920 - 300)));
            font-weight: 700;
            writing-mode: tb;
            transform: rotate(180deg);
            position: absolute;
            top: 150px;
            left: 5%;
            text-align: center;
            text-transform: uppercase;
            top: 0;
            bottom: 0;
            letter-spacing: 6px;
            margin: auto;
        }

.bgc-detail {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.workTabs1 .listing {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 65px;
}

    .workTabs1 .listing .nav-tabs {
        border: 0;
    }

        .workTabs1 .listing .nav-tabs .nav-link {
            font-size: calc(12px + (22 - 12) * ((100vw - 300px) / (1920 - 300)));
            font-weight: 300;
        }

.workTabs1 .tab-content {
    padding: 0;
    border: 0;
}

.workTop-sec.second {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: #0b1532;
}

.workTabs1.sty2 .listing .nav-tabs .nav-link {
    color: #fff;
}

    .workTabs1.sty2 .listing .nav-tabs .nav-link.active {
        color: var(--primary-color);
    }

.workTop-sec.second .mad-top-text {
    right: 5%;
    left: auto;
}



    .workTop-sec.second .mad-top-text::before {
        background-color: #62719d;
        opacity: 0.5;
    }

.nav-tab-btn.sty2 {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 600;
    color: var(--white-color);
    text-decoration: none;
    background-color: transparent;
    padding: 15px 50px;
    text-transform: uppercase;
    border: 1px solid var(--white-color);
}

    .nav-tab-btn.sty2:hover {
        background-color: var(--primary-color);
        color: var(--Black-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }

/*WORK section CSS END*/


.lrgPop .modal-dialog {
    width: 100%;
    margin: 0;
    max-width: 100%;
    height: 100%;
    border: 0;
}

    .lrgPop .modal-dialog .modal-body {
        background: var(--Black-color);
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .lrgPop .modal-dialog .address {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin: 0 0 10px 0;
        padding: 0 0 10px 0;
    }

        .lrgPop .modal-dialog .address a {
            color: var(--primary-color);
        }

    .lrgPop .modal-dialog .modal-content {
        height: 100%;
        border-radius: 0;
        border: 0
    }

.lrgPop .modal-header {
    position: absolute;
    right: 0;
    border: 0;
    z-index: 10;
}

    .lrgPop .modal-header .close {
        background-color: var(--primary-color);
        border-radius: 50%;
        padding: 0;
        border: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.contactPop .form-group {
    margin-bottom: 15px;
}

.contactPop .form-control {
    background-color: transparent;
    color: var(--white-color);
    font-size: calc(13px + (17 - 13) * ((100vw - 300px) / (1920 - 300)));
    border-radius: 0;
    border: var(--primary-color) solid 1px;
    height: 48px;
    line-height: 1;
}

.contactPop textarea.form-control {
    height: 100px;
    resize: none;
}

.contactPop .form-control::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
}

.contactPop button {
    border: 0;
}


.lrgPop .mad-top-text {
    color: grey;
    font-size: calc(22px + (60 - 22) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    writing-mode: tb;
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    left: 5%;
    letter-spacing: 10px;
    text-transform: uppercase;
}

.crmBox {
    display: flex;
    align-items: center;
    border-radius: 18px;
    background-color: var(--white-color);
    padding: 25px 15px;
    border: solid 1px var(--primary-color);
    color: #515251;
    font-size: calc(13px + (18 - 13) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    transition: all ease-in-out 0.3s;
    margin: 20px 0;
    min-height: 119px;
}

    .crmBox .iconBox {
        display: flex;
        width: 85px;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .crmBox:hover {
        background-color: #000;
        border-color: #000;
        color: #fff;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5);
    }



/* -----------------------------------
      Gallery Section
--------------------------------------*/
.portfolio-section {
    padding: 80px 0 0;
}

    .portfolio-section.sty1 {
        padding: 0 0 0;
    }

    .portfolio-section h2 {
        font-size: 28px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
    }

.portfolio-menu {
    text-align: center;
}

.control {
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #f2cd1c;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
    -webkit-transition: all 05s ease;
    -moz-transition: all 05s ease;
    -ms-transition: all 05s ease;
    -o-transition: all 05s ease;
    transition: all 0.5s ease;
}

    .control:hover {
        background: #f2cd1c;
    }

.mixitup-control-active {
    color: #fff;
    background: #343a40;
}

.fancybox-container button:focus {
    outline: 0;
    box-shadow: none;
}

.portfolio-item {
    padding: 0;
}

.pd {
    padding: 0;
    padding: 10px;
}

    .pd img {
        height: 180px;
        transition: all 0.5s;
        width: 100%;
    }

.portfolio-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    transition: all 0.5s;
    transform: scale(0);
}

    .portfolio-overlay p {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        text-align: center;
        margin: auto;
        z-index: 4;
        color: var(--primary-color);
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
    }

    .portfolio-overlay a {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        z-index: 4;
    }

    .portfolio-overlay::before {
        content: "";
        width: 0;
        height: 0;
        border-width: 0;
        position: absolute;
        left: 10%;
        top: 10%;
        transition: 50ms height ease 150ms;
        z-index: 3;
    }

    .portfolio-overlay::after {
        content: "";
        width: 0;
        height: 0;
        border-width: 0;
        position: absolute;
        right: 10%;
        bottom: 10%;
        transition: 100ms width ease 200ms;
        z-index: 3;
    }

.portfolio-item:hover .portfolio-overlay::before {
    width: 80%;
    height: 80%;
    border-top: 1px solid #f2cd1c;
    border-right: 1px solid #f2cd1c;
    transition: width 0.1s ease 0.3s, height 0.1s ease 0.5s;
}

.portfolio-item:hover .portfolio-overlay::after {
    width: 80%;
    height: 80%;
    border-bottom: 1px solid #f2cd1c;
    border-left: 1px solid #f2cd1c;
    transition: width 0.1s ease 0.6s, height 0.1s ease 0.7s;
}

.portfolio-item li:hover .portfolio-overlay {
    visibility: visible;
    transform: scale(1);
}

.portfolio-overlay .category {
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

.portfolio-overlay .magnify-icon {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background-color: transparent;
    margin: 0 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}

    .portfolio-overlay .magnify-icon:hover {
        background: #000;
    }

    .portfolio-overlay .magnify-icon span i {
        font-size: 15px;
        color: #fff;
        line-height: 40px;
        cursor: pointer;
    }

    .portfolio-overlay .magnify-icon svg {
        color: #fff;
        font-size: 22px;
    }

.chatWork-section {
    padding: 40px 0;
}

/*******Responsive media query******/

/* Extra small devices (portrait phones, less than 576px)*/

.hrmsModule {
    display: flex;
    flex-wrap: wrap;
}

    .hrmsModule li {
        list-style-type: none;
        color: #515251;
        font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
        position: relative;
        padding-left: 30px;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        max-width: 49%;
        flex: 0 0 49%;
    }

    .hrmsModule.sty1 li {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .hrmsModule li i, .hrmsModule li svg {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        color: var(--primary-color);
        font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
    }

.solutionsCta .form-control {
    color: #5f5f65;
    border-color: #000;
}

    .solutionsCta .form-control::placeholder {
        color: #5f5f65;
    }

.solutionsCta .iti__selected-flag {
    border-radius: 0 0 0 0;
}

.solutionsCta.innerCta {
    padding: 100px 0;
}
/*Us CSS*/
.ecl-faqs-box .card {
    border: 1px solid #E5E7EB;
    border-radius: 15px;
}

    .ecl-faqs-box .card p {
        font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    }

.ecl-faqs-box .card-header {
    background: #fff;
    border: none;
    padding: 15px;
    border-radius: 15px;
}

    .ecl-faqs-box .card-header h2 button {
        font-size: calc(15px + (18 - 15) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
    }

.ecl-faqs-box .collapsible-link::before {
    content: "\f078";
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    background: #F3F4F6;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.bg-gradient-to-t-1 {
    background-color: #3fc699;
}

.bg-gradient-to-t-2 {
    background-color: #f6b03b;
}

.bg-gradient-to-t-3 {
    background-color: #f16869;
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 250 227 / 47%);
}

.main-contact-form-box label.form-label {
    font-size: 12px;
}

.main-contact-form-box .form-check-input {
    padding: initial;
}

.main-contact-form-box .form-check-label {
    font-size: 12px;
}

/*--------- Home SLider Btn --------*/

.home-slider-btns {
    position: relative;
    text-align: center;
}

    .home-slider-btns #leftBtn {
        position: absolute;
        left: 100px;
        top: 360px;
        z-index: 9;
    }

    .home-slider-btns #RightBtn {
        position: absolute;
        right: 100px;
        top: 360px;
        z-index: 9;
    }

    .home-slider-btns .hm-bnr-btn {
        box-sizing: border-box;
        background: #f2cd1d;
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }



@-webkit-keyframes zoom {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes zoom {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}


@property --i {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}


@keyframes move {
    0% {
        --i: 1;
    }

    100% {
        --i: 6;
    }
}

@keyframes colorChange {
    100% {
        background-color: turquoise;
    }
}

@keyframes spin {
    100% {
        rotate: 360deg;
    }
}

@keyframes clip {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}


@keyframes circle-move {
    0% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

/*BLOG CSS START HERE*/

.blogBox {
    margin: 30px;
}

    .blogBox .card {
        font-weight: bold;
        position: relative;
        width: 100%;
    }

        .blogBox .card a {
            padding: 30px;
            width: 100%;
            height: 400px;
            border: 1px solid rgba(0, 0, 0, 0.24);
            background: white;
            text-decoration: none;
            color: black;
            display: flex;
            align-items: center;
            transition: 0.25s ease;
        }

            .blogBox .card a:hover {
                transform: translate(-30px, -30px);
                border-color: var(--primary-color);
            }

                .blogBox .card a:hover .card--display {
                    display: none;
                }


                .blogBox .card a:hover .card--hover {
                    display: block;
                }

    .blogBox h2 {
        font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
        color: #505155;
    }

    .blogBox .card a .card--display h2 {
        margin: 20px 0 0;
    }

    .blogBox .card a .card--display .imgBox {
        display: inline-block;
        width: 100%;
        max-height: 250px;
        overflow: hidden;
    }

        .blogBox .card a .card--display .imgBox img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .blogBox .card a .card--display i, .blogBox .card a .card--display svg {
        font-size: calc(13px + (50 - 13) * ((100vw - 300px) / (1920 - 300)));
        display: inline-block;
        margin-top: 25px;
        color: var(--primary-color);
    }

    .blogBox .card a .card--hover {
        display: none;
    }

        .blogBox .card a .card--hover h2 {
            margin: 20px 0;
        }

        .blogBox .card a .card--hover p {
            font-weight: normal;
            line-height: 1.5;
            color: #8c8d93;
        }

            .blogBox .card a .card--hover p.link {
                margin: 20px 0 0;
                font-weight: bold;
                color: #5bc0eb;
            }

.styblog {
    margin-top: 50px;
}

/*BLOG CSS END*/

.ctm-posted-on {
    display: block;
    font-size: 11px;
    color: #2f2f2f;
}

.ctm-deptt {
    display: block;
    margin-top: 14px;
}

.job-post-sec {
    padding: 80px 0;
}

.jp-title {
    margin-bottom: 30px;
    font-size: 34px;
}

.jp-content a {
    color: black;
    font-weight: bold;
    text-decoration: underline;
}

.jp-sub-title {
    font-size: 22px;
}




/*** Job page / Sidebar ***/

.jp-sidebar {
    border: solid 1px #ebedf5;
    padding: 35px 25px;
    border-radius: 10px;
}

/*** Job page / Sidebar / Top ***/

.jp-sidebar-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.jp-sidebar-client-logo {
    border-radius: 50%;
    height: 90px;
    width: 90px;
    background-color: #000;
}

    .jp-sidebar-client-logo img {
        border-radius: 50%;
        height: 90px;
        width: 90px;
        display: block;
        padding: 12px;
    }

.no-logo p {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    padding: 0;
}

.jp-sidebar-primary-btn {
    margin-top: 30px;
    width: 100%;
    padding: 0 !important;
}

/*** Job page / Sidebar / Items ***/

.jp-sidebar-item {
    display: flex;
    flex-direction: column;
    border-bottom: solid 1px #ebedf5;
    padding: 15px 0;
}

    .jp-sidebar-item:first-child {
        padding: 0 0 15px !important;
    }

    .jp-sidebar-item:nth-child(5) {
        border-bottom: none;
    }

    .jp-sidebar-item:last-child {
        border-bottom: none;
    }

    .jp-sidebar-item p {
        font-size: .9rem;
    }

.jp-sidebar-item-link {
    padding-bottom: 20px !important;
}

    .jp-sidebar-item-link a {
        text-transform: uppercase !important;
        text-decoration: none !important;
        font-size: .75rem !important;
        font-weight: 800 !important;
    }

.jp-sidebar-item-title {
    color: var(--light-font);
    font-size: .8rem !important;
}

.jp-sidebar-header-share-item-container {
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.jp-sidebar-header-share-item {
    margin-right: 12px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .jp-sidebar-header-share-item img {
        width: 12px;
    }

.jp-sidebar-header-share-item-sml img {
    width: 7px !important;
}

.jp-sidebar-secondary-btn {
    margin-top: 30px;
}



.jp-closed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--border);
    border-radius: 10px;
    margin: 50px 0 auto 0;
    padding: 50px;
    text-align: center;
}

.jp-sidebar-item p, .jp-sidebar-top p, .jp-sidebar-secondary-btn p {
    margin-bottom: 0;
}

.jp-sidebar-secondary-btn {
    margin-top: 30px;
    width: 100%;
    background-color: #f2cd1c;
    padding: 10px 5px;
}

    .jp-sidebar-secondary-btn:hover {
        background-color: #000;
        color: #fff;
    }


/*Form Slide*/

#offcanvasRight {
    width: 100%;
    max-width: 690px;
}

.ctm-offcanvas-header {
    padding: 18px 10px;
    border-bottom: 1px solid #ccc;
}

#offcanvasRightLabel {
    margin-bottom: 4px;
}

.ctm-offcanvas-header span {
    font-size: 14px;
}

.ctm-offcanvabtn {
    position: absolute;
    right: 15px;
    top: 15px;
}

.job-post-form {
    margin-top: 20px;
}

    .job-post-form label {
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 600;
    }

.ctm-input-field {
    border-color: #ebedf5;
    border-radius: 0;
    padding: 12px 10px;
}

.ctm-tip {
    font-size: 13px;
    color: #7a869a;
}

.agree-text {
    color: #a5adba;
    font-size: 13px;
}

    .agree-text a {
        color: #a5adba;
        text-decoration: underline;
    }

.agree-holder {
    padding: 12px 0;
    border-top: 1px solid #ebedf5;
}

.offcanvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ebedf5;
    padding-top: 20px;
}

.poweredby a {
    color: #7a869a;
    text-decoration: underline;
    transition: all .5s;
    font-size: .82rem;
    font-weight: 700;
}

.buttons-holder {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctm-btn {
    padding: 10px 34px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.ctm-btn-submit {
    background-color: #f2cd1c;
    border-color: #f2cd1c;
    color: #000;
}

.ctm-btn-cancel {
    border-color: #000;
    color: #000;
}
/*Form Slide End*/
/* Play Btn */
.ply-btn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ply-btn svg {
        font-size: 100px;
        color: var(--primary-color);
    }
/*** Job page / Responsive ***/
@media screen and (max-width: 1150px) {
    .jp-container {
        width: auto;
    }

    .jp-wrapper {
        margin: 50px auto;
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .jp-view {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
    }


    .jp-sidebar-client-logo {
        height: 75px;
        width: 75px;
    }

        .jp-sidebar-client-logo img {
            height: 75px;
            width: 75px;
        }

    .jp-header h1 {
        padding: 20px 0;
    }

    .jp-header-items-sml {
        display: flex;
        flex-direction: column;
    }

    .jp-sidebar-item {
        border-bottom: none;
        padding: 8px 0;
    }

        .jp-sidebar-item:first-child {
            padding: 0 0 8px !important;
        }

        .jp-sidebar-item:nth-child(4) {
            padding: 8px 0 15px !important;
        }

    .jp-header-btn-container {
        margin-top: 40px;
    }

    .jp-sidebar-primary-btn {
        margin: 30px 0 0;
    }

    .jp-view-jobs-btn-sml {
        margin: 30px 0;
        height: 45px;
    }
}

@media screen and (max-width: 650px) {

    .client-job-logo img {
        max-height: 35px;
    }

    .jp-header h1 {
        font-weight: 700;
        padding: 25px 0 20px;
        font-size: 1.8rem;
    }

    .jp-btm {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

@media screen and (max-width: 500px) {

    .jp-wrapper {
        margin: 50px auto 70px;
    }

    .client-job-logo img {
        max-height: 30px;
    }

    .jp-header-btn-container {
        width: 100%;
        max-width: 100%;
    }

        .jp-header-btn-container .jp-btn {
            max-width: 100% !important;
        }

    .jp-btn {
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    .jp-sidebar-client-logo {
        height: 68px;
        width: 68px;
    }

        .jp-sidebar-client-logo img {
            height: 68px;
            width: 68px;
        }

    .jp-header h1 {
        padding: 15px 0;
    }

    .jp-sidebar-header-share-item {
        height: 38px;
        width: 38px;
    }

        .jp-sidebar-header-share-item img {
            width: 15px;
        }

    .jp-sidebar-header-share-item-sml img {
        width: 8px !important;
    }

    .jp-sidebar-primary-btn {
        margin-top: 40px;
        padding: 5px 0 !important;
    }

    .jp-footer-primary-btn {
        padding: 5px 0 !important;
    }
}


/*Scroll Bar style*/


/*
 *  STYLE 7
 */

#style-6::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb {
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
}


/*Scroll Bar style End*/

/*ECL CSS START*/
/*.ecl-banner {
    height: 830px;
    padding: 80px 0 60px;
}*/
.ecl-banner .img-box {
    position: relative;
    width: 100%;
    height: 100%;
}

    .ecl-banner .img-box:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 640px;
        height: 500px;
        background: rgba(242, 205, 28, 0.05);
        border-radius: 9999px;
        pointer-events: none;
        content: "";
    }

    .ecl-banner .img-box:after {
        position: absolute;
        width: 250px;
        height: 250px;
        left: -10px;
        top: 0;
        bottom: -30px;
        background: rgba(13, 40, 71, 0.1);
        filter: blur(32px);
        border-radius: 50%;
        pointer-events: none;
        content: "";
    }

    .ecl-banner .img-box img {
        position: relative;
        z-index: 2;
        width: 100%;
        animation: moveUpDown 3s ease-in-out infinite alternate;
    }

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}

.ecl-banner .common-title {
    /*font-size: calc(20px + (60 - 25) * ((100vw - 300px) / (1920 - 300)));*/
    font-weight: 500;
    color: var(--heading-colors);
    margin-top: 10px;
}

    .ecl-banner .common-title span {
        color: var(--primary-color);
    }

.ecl-banner .small-title {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    position: relative;
    padding: 10px 20px 10px 35px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(242, 205, 28, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(2px);
    border-radius: 9999px;
    text-transform: none;
    color: var(--body-font-color);
}

    .ecl-banner .small-title:after {
        position: absolute;
        left: 18px;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: var(--primary-color);
        border-radius: 50%;
        width: 8px;
        height: 8px;
        content: "";
    }

.ecl-banner .common-text {
    font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: var(--body-font-color);
    line-height: 25px;
    margin-bottom: 16px;
}

.ecl-banner .ban-box {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
}

    .ecl-banner .ban-box i, .ecl-banner .ban-box svg {
        color: var(--primary-color);
    }

    .ecl-banner .ban-box p {
        font-size: calc(11px + (12 - 11) * ((100vw - 300px) / (1920 - 300)));
        margin-bottom: 0;
        font-weight: 400;
        color: var(--body-font-color);
    }

.ecl-banner .leftBox {
    position: relative;
}

    .ecl-banner .leftBox:after {
        position: absolute;
        width: 384px;
        height: 384px;
        right: -50px;
        top: -100px;
        background: rgba(242, 205, 28, 0.1);
        filter: blur(32px);
        border-radius: 50%;
        pointer-events: none;
        content: "";
    }

.offer-box.ecl-box {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    border: solid 1px #E5E7EB;
    border-radius: 16px;
    transition: all ease-in-out 0.3s;
    padding: 10px 15px;
}

    .offer-box.ecl-box:hover {
        border: var(--primary-color) solid 1px;
    }

    .offer-box.ecl-box .offer-icon {
        width: 100%;
        height: 48px;
        border: 0;
        border-radius: 12px;
        background-color: var(--Black-color);
        display: flex;
        justify-content: flex-start;
        margin: 0 0 20px 0;
        padding: 10px;
        color: var(--white-color);
        font-size: 25px;
    }

    .offer-box.ecl-box:hover .offer-icon {
        background-color: var(--primary-color);
    }

    .offer-box.ecl-box h6 {
        font-size: calc(15px + (18 - 15) * ((100vw - 300px) / (1920 - 300)));
        color: #343130;
        font-weight: 500;
    }

    .offer-box.ecl-box p {
        font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
        color: #6c6a6a;
        font-weight: 400;
    }

.small-title.ecl1 {
    box-sizing: border-box;
    background: rgba(13, 40, 71, 0.05);
    border: 1px solid rgba(13, 40, 71, 0.1);
    border-radius: 9999px;
    padding: 5px 15px;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    text-transform: none;
    color: var(--Black-color);
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .small-title.ecl1 i, .small-title.ecl1 svg {
        color: var(--primary-color);
        margin-right: 8px;
        font-size: 20px;
    }

.offer-sec .ecl-center-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    flex-direction: column;
}

    .offer-sec .ecl-center-box p {
        color: #6B7280;
        font-size: 12px;
        margin-bottom: 0;
    }

    .offer-sec .ecl-center-box h6 {
        font-size: calc(18px + (23 - 18) * ((100vw - 300px) / (1920 - 300)));
        color: #343130;
        font-weight: 400;
        margin: 10px 0 5px 0;
    }

    .offer-sec .ecl-center-box .iconBox {
        box-sizing: border-box;
        width: 46px;
        height: 46px;
        background: rgba(13, 40, 71, 0.05);
        border: 1px solid rgba(13, 40, 71, 0.1);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .offer-sec .ecl-center-box .iconBox i, .offer-sec .ecl-center-box .iconBox svg {
            color: var(--primary-color);
        }


.compliance-main {
    position: relative;
    background: linear-gradient(180deg, #092341 0%, #071C36 50%, #081A30 100%);
}

    .compliance-main .slick-dots {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .compliance-main .slick-dots {
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

        .compliance-main .slick-dots li, .testi .slick-dots li {
            height: 12px;
            width: auto;
        }

            .compliance-main .slick-dots li button {
                width: 12px;
                height: 12px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                font-size: 0;
                color: transparent;
            }

            .compliance-main .slick-dots li.slick-active button {
                background: #F2CD1C;
                width: 40px;
                height: 12px;
                border-radius: 25px;
            }

.ecl_tabs {
    text-align: center;
    margin: 45px 0 0 0;
}

    .ecl_tabs span {
        display: inline-block;
        margin: 0 10px;
        padding: 6px 12px;
        cursor: pointer;
        font-weight: 400;
        transition: 0.3s;
        color: rgba(255, 255, 255, 0.3);
    }

        .ecl_tabs span.active {
            color: var(--primary-color);
        }

.ecl_compliance .slick-slide {
    opacity: 0.4;
    transition: 0.5s;
    transform: scale(1);
}

    .ecl_compliance .slick-slide img {
        width: 100%
    }

.ecl_compliance .slick-center {
    opacity: 1;
    transform: scale(1);
    z-index: 5;
    position: relative;
}

.ecl_compliance .slick-track {
    padding: 100px 0px 150px 0;
}

.ecl_compliance .slick-arrow {
    position: absolute;
    left: 40%;
    bottom: -45px;
    top: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.3);
    border: var(--white-color)solid 1px;
}

    .ecl_compliance .slick-arrow.slick-next {
        left: auto;
        right: 40%;
    }

.white-title .common-title {
    color: var(--white-color);
}

    .white-title .common-title span {
        color: var(--primary-color);
    }

.white-title .small-title.ecl1 {
    box-sizing: border-box;
    border-radius: 9999px;
    padding: 5px 15px;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    text-transform: none;
    color: var(--white-color);
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
}

    .white-title .small-title.ecl1 i, .white-title .small-title.ecl1 svg {
        color: var(--primary-color);
        margin-right: 8px;
        font-size: 20px;
    }

.whychoose-ecl, .ecl-faqs-section {
    background: linear-gradient(180deg, #FFFCF0 0%, #FFFFFF 50%, #FFFCF0 100%);
}

.real-world {
    /*    background: linear-gradient(165deg, #FFFFFF 0%, #fbf9f1 50%, #FFFFFF 100%);*/
    background: var(--white-color);
}

.whychoose-box {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    padding: 20px 15px;
    display: flex;
    transition: all 0.3s;
}

    .whychoose-box:hover {
        border: solid 1px var(--primary-color);
        box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.25);
    }

    .whychoose-box .iconBox {
        display: flex;
        background-color: var(--Black-color);
        width: 40px;
        height: 40px;
        max-width: 40px;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-right: 10px;
        font-size: 20px
    }

        .whychoose-box .iconBox i, .whychoose-box .iconBox svg {
            color: var(--white-color);
        }

    .whychoose-box p {
        color: #4B5563;
        font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    }

.flagBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 65px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: all ease 0.3s;
}

    .flagBox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.whychoose-box:hover .flagBox {
    transform: scale(1.1);
}

.bottom-content-new .listing {
    padding: 0 0;
    margin: 0 0 25px 0;
}

    .bottom-content-new .listing li {
        position: relative;
        padding: 0 0 0 17px;
        margin: 0 0 7px 0;
        font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    }

        .bottom-content-new .listing li:before {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            background-color: var(--primary-color);
            width: 8px;
            height: 8px;
            content: "";
        }

.bottom-content-new .buttons-area {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .bottom-content-new .buttons-area .leftside {
        padding: 10px 15px;
        background: #f2cd1c25;
        display: inline-flex;
        align-items: center;
        border-radius: 10px;
    }

        .bottom-content-new .buttons-area .leftside span {
            font-weight: 700;
            color: var(--primary-color);
            margin-left: 5px
        }

.whychoose-box .bottom-content-new .buttons-area .rightside {
    border-radius: 50%;
    background-color: var(--primary-color);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    opacity: 0;
    transition: all ease-in-out 0.3s;
    font-size: 25px;
}

.whychoose-box:hover .bottom-content-new .buttons-area .rightside {
    opacity: 1;
}


.ifrs-year {
    padding: 30px 0 0;
}

    .ifrs-year ul {
        padding: 0;
        position: relative;
    }

        .ifrs-year ul:before {
            content: '';
            background: linear-gradient(90deg, #334155 0%, #F2CD1C 50%, #334155 100%);
            width: 100%;
            height: 2px;
            display: block;
            position: absolute;
            top: 11%;
            left: 0;
            z-index: -1;
        }

    .ifrs-year li {
        list-style: none;
        text-align: center;
        position: relative;
    }

        .ifrs-year li h6 {
            background-color: #1E293B;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            text-align: center;
            color: #CBD5E1;
            font-size: 12px;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 40px;
            padding: 0 0 0px;
            cursor: pointer;
            transform: none;
            transition: all .3s ease-in-out;
        }

            .ifrs-year li h6:hover {
                transform: scale(1.2);
            }

        .ifrs-year li p {
            color: #94A3B8;
            font-size: 14px;
            font-weight: 400;
            margin: 0;
        }

        .ifrs-year li a {
            font-size: 12px;
            font-weight: 400;
        }

        .ifrs-year li:last-child h6 {
            background-color: #F2CD1C;
            color: #fff;
        }

    .ifrs-year .tooltipbox {
        background-color: #1e293b80;
        border: 1px solid #33415580;
        padding: 20px 10px;
        border-radius: 10px;
        margin: 20px 0 0;
        /*        position: absolute;
        top: 100%;
        left: 0;*/
        right: 0;
        z-index: 5;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        height: auto;
        transition: all .3s ease-in-out;
    }

        .ifrs-year .tooltipbox.open {
            opacity: 1;
            visibility: visible;
        }

        .ifrs-year .tooltipbox p {
            color: #fff;
            font-size: 13px;
            text-align: center;
        }

.timeline-item i {
    transition: transform 0.3s ease;
    font-size: 10px;
}

    .timeline-item i.rotate {
        transform: rotate(180deg);
        display: inline-block;
    }

.ecltabs {
    border: 0;
    width: 100%;
}

    .ecltabs .nav-link {
        text-align: left;
        padding: 25px 20px;
        background: rgba(15, 23, 42, 0.65);
        border-radius: 16px;
        border: 0;
        display: flex;
        align-items: flex-start;
        margin: 0 0 10px;
        transition: all .3s ease-in-out;
        position: relative;
        width: 100%;
    }

        .ecltabs .nav-link:hover {
            background-color: #475569
        }

        .ecltabs .nav-link:before {
            content: '';
            background-color: transparent;
            display: block;
            width: 4px;
            height: 48px;
            position: absolute;
            left: 1px;
            top: 20px;
            border-radius: 0px 4px 4px 0px;
        }

        .ecltabs .nav-link:hover:before {
            background-color: #F2CD1C
        }

        .ecltabs .nav-link .icotab {
            background-color: #334155;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 48px;
            max-width: 48px;
            margin-right: 20px;
        }

        .ecltabs .nav-link:hover .icotab {
            background-color: #F2CD1C
        }

        .ecltabs .nav-link .icotab i, .ecltabs .nav-link .icotab svg {
            color: #fff;
            font-size: 20px;
        }

    .ecltabs .nav-item {
        margin: 0 0 20px;
        width: 100%;
    }


.wrodSec ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
}

    .wrodSec ul li {
        cursor: pointer;
    }


.tb-cont {
    position: relative;
    width: 100%;
}

    .tb-cont h3 {
        font-size: 18px;
        font-weight: 400;
        color: #fff;
    }

    .tb-cont p {
        font-size: 14px;
        font-weight: 400;
        margin: 0;
        color: #fff;
    }

    .tb-cont i {
        font-size: 30px;
        position: absolute;
        right: 0;
        top: -8px;
        color: #fff;
    }

.ecltabs .nav-link:hover .tb-cont i {
    color: #F2CD1C
}

.ecltabs .nav-link.active {
    background-color: #475569 !important;
}

    .ecltabs .nav-link.active .tb-cont i {
        color: #F2CD1C;
    }

    .ecltabs .nav-link.active .icotab {
        background-color: #F2CD1C
    }

    .ecltabs .nav-link.active:before {
        background-color: #F2CD1C
    }

.tabingecl {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.5);
    backdrop-filter: blur(2px);
    border-radius: 16px;
    /*    height: 100%;*/
    padding: 35px 30px;
}

    .tabingecl .headsec {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
    }

        .tabingecl .headsec h4 {
            color: #fff;
            font-size: 20px;
            font-weight: 400;
            margin: 0;
        }

        .tabingecl .headsec i, .tabingecl .headsec svg {
            color: #F2CD1C;
            font-size: 40px;
            font-weight: 400;
            margin: 0 10px 0 0;
        }

    .tabingecl .grapgsec {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 90px 0 0;
    }

    .tabingecl .tab-content {
        padding: 0 0;
        border: 0;
    }

.videosec {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF0 100%);
}

.testi-sec, .ecl-contact-section {
    position: relative;
    background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%);
}

.wrodSec ul {
    padding: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrodSec li {
    background: transparent;
    border: 2px solid rgba(51, 65, 85, 0.5);
    border-radius: 16px;
    padding: 0px;
    list-style: none;
    text-align: center;
    margin: 0 15px;
    flex: 0 0 96px;
    max-width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}

    .wrodSec li h5 {
        color: #94A3B8;
        font-size: 24px;
        font-weight: 400;
        margin: 0;
    }

    .wrodSec li:hover {
        border: 2px solid #F2CD1C;
        padding: 5px;
    }

    .wrodSec li.active {
        border: 2px solid #F2CD1C;
        padding: 5px;
    }

.testi-cont {
    border: 1px solid #D9D9D9;
    border-radius: 25px;
    padding: 40px 30px;
    margin: 40px 0 0;
}

    .testi-cont p {
        color: #fff;
        font-size: 24px;
        font-weight: 400;
        margin: 0;
        padding: 30px 0 50px;
        border-bottom: 1px solid #212C40;
    }

.testi-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .testi-author .img-auth {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .testi-author h6 {
        font-size: 18px;
        color: #fff;
        margin: 0;
    }

    .testi-author span {
        font-size: 14px;
        color: #94A3B8;
    }

.rating {
    text-align: right;
}

    .rating i {
        color: #FACC15;
    }

.testi .slick-dots {
    bottom: -60px;
}

/*    .testi .slick-dots li button:before {
        font-size: 60px;
        color: #475569;
    }
    .testi .slick-dots li.slick-active button:before {
        color: #F2CD1C;
    }*/
.testi .slick-prev, .slick-next {
    background: #1E293B;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.testi .slick-next {
    right: -60px;
}

.testi .slick-prev {
    left: -60px;
}

.testi .slick-dots li.slick-active button {
    background: #F2CD1C;
    width: 40px;
    height: 12px;
    border-radius: 25px;
}

.testi .slick-dots li button {
    width: 12px;
    height: 12px;
    background: #475569;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
}

.countersec ul {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .countersec ul li {
        list-style: none;
        text-align: center;
    }

.countersec li h4 {
    color: #F2CD1C;
    font-size: 35px;
    font-weight: 400;
    margin: 0;
}

.countersec li p {
    color: #94A3B8;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}


@media (max-width: 1600px) {
    .ecl_compliance .slick-arrow {
        left: 20%;
    }

        .ecl_compliance .slick-arrow.slick-next {
            right: 20%;
        }
}


@media (max-width: 991px) {
    .main-banner {
        /*height: auto;*/
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 100vh;
    }

    .main-banner .row {
        align-items: center !important;
        justify-content: center !IMPORTANT;
        height: 100%;
    }

    .ifrs-year ul {
        flex-wrap: wrap;
        justify-content: center !important;
        width: 100%;
        align-items: flex-start !important;
    }

        .ifrs-year ul:before {
            display: none;
        }

    .ifrs-year li {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 0 20px;
    }

    .ifrs-year .tooltipbox {
        display: none;
    }

        .ifrs-year .tooltipbox.open {
            display: block;
        }

    .wrodSec ul {
        flex-wrap: wrap;
    }

    .wrodSec li {
        flex: 0 0 47%;
        max-width: 47%;
        height: auto;
        margin: 0 0 20px 10px;
    }

        .wrodSec li h5 {
            font-size: 20px;
        }

    .testi .slick-prev, .slick-next {
        display: none !important;
    }

    .countersec ul {
        flex-wrap: wrap;
    }

        .countersec ul li {
            padding: 0 0 30px;
        }

    .countersec li h4 {
        font-size: 25px;
    }

    .countersec li p {
        font-size: 13px;
    }

    .testi-cont p {
        font-size: 16px;
    }

    .ecl-banner
    .ban-box {
        display: none;
    }

    .banner-spinner {
        display: none;
    }
}

@media (max-width: 767px) {
    .ecl_compliance .slick-track {
        padding: 0;
    }

    .ecl_compliance .slick-center {
        transform: scale(1);
    }

    .ecl_compliance .slick-arrow.slick-next {
        right: 0;
    }

    .ecl_compliance .slick-arrow {
        left: 0;
        width: 40px;
        height: 40px;
        bottom: -60px;
    }
}

@media (max-width: 575px) {
    .home-slider-btns {
        display: none;
    }

    .home-banner-slider .slick-dots {
        display: block;
        bottom: 0;
    }


        .home-banner-slider .slick-dots li button {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            border: #c1c1c1 solid 1px;
            padding: 0;
        }

        .home-banner-slider .slick-dots li.slick-active button {
            background-color: var(--primary-color);
            border: 0
        }
}

    .product-demo {
        display: flex;
        justify-content: center;
    }

    .product-demo .video-box {
        width: 100%;
        height: 540px;
        background: linear-gradient(135deg,#10193a,#040814);
        overflow: hidden;
        position: relative;
        box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
        border-radius: 16px;
        border: 1px solid #E5E7EB;
    }

    .overlay-video {
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, #10193adb, #10193adb);
        display: none;
        z-index: 2;
    }

    /* Play Button */
    .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 96px;
        height: 96px;
        border-radius: 50%;
        background: var(--primary-color);
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: .3s;
        z-index: 2;
    }

        .play-btn:hover {
            transform: scale(1, 1);
        }

        .play-btn i {
            font-size: 32px;
            color: var(--white-color);
            font-weight: 800;
        }

    /* Title + Duration */
    .video-info {
        position: absolute;
        left: 30px;
        bottom: 25px;
        color: #fff;
        right: 30px;
        z-index: 2;
    }

        .video-info h4 {
            font-size: 20px;
            margin: 0;
            font-weight: 600;
        }

        .video-info p {
            margin: 3px 0 0;
            opacity: .8;
        }

    #videoDuration {
        position: absolute;
        right: 0;
        padding: 5px 10px;
        border-radius: 16px;
        background: #ffffff7a;
        bottom: 0;
    }
    /* Modal Same Box */
    .video-modal {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.95);
        display: none;
    }

        .video-modal video {
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }

    /* Close Button */
    .close-video {
        position: absolute;
        top: 12px;
        right: 18px;
        font-size: 32px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        z-index: 5;
    }

    /* ========== Responsive ========== */
    @media(max-width:768px) {
        .product-demo .video-box {
            height: 340px;
        }

        .play-btn {
            width: 60px;
            height: 60px;
            font-size: 26px;
        }

        .video-info h4 {
            font-size: 16px;
        }
    }

    @media(max-width:500px) {
        .product-demo .video-box {
            height: 260px;
        }
    }




    .main-contact-form-box {
        background: rgb(48 48 48 / 30%);
        padding: 25px;
        border: 1px solid rgb(78 78 78 / 80%);
        border-radius: 16px;
    }

        .main-contact-form-box input {
            padding: 6px 12px 6px 50px;
        }

            .main-contact-form-box input::placeholder,
            .main-contact-form-box textarea::placeholder {
                font-size: 12px;
            }

    img.img-fluid.field-icon {
        position: absolute;
        top: 46px;
        left: 15px;
    }

    .main-contact-icon-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        margin-bottom: 20px;
    }

    .contact-icon-box {
        background: rgb(48 48 48 / 30%);
        padding: 25px;
        border: 1px solid rgb(78 78 78 / 80%);
        border-radius: 16px;
    }

    .main-contact-form-box.contactPop .form-control {
        font-size: 14px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.53) contrast(0.85);
        width: 20px;
        height: 20px;
        position: relative;
        right: 102.5%;
        top: 1px;
    }

    @media(max-width: 1024px) {
        .main-contact-form-box {
            margin-bottom: 20px;
        }
    }

    @media(max-width: 768px) {
        .main-contact-icon-box {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    @media(max-width: 575px) {
        .ecl-faqs-box .card-header h2 button {
            font-size: 12px;
            padding: 0 50px 0 0px !important;
        }

        .compliance-main .slick-dots {
            bottom: -30px;
        }
    }

    .play-svg svg {
        animation-play-state: running;
    }


    .pause-svg svg {
        animation-play-state: paused;
    }

    .delay-show {
        transition: all .5s ease-in-out;
    }

        .delay-show.isactive {
            transform: scale(0.7);
            opacity: 0;
            visibility: hidden;
        }

    .text-success {
        color: #000000 !important;
    }

        .text-success p {
            margin-bottom: 0px !important;
        }

    #ecl-signup-status h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 5px;
        color: #000;
    }

    #ecl-signup-status p {
        font-size: 13px;
        font-weight: 500;
        color: #000;
        margin-bottom: 0px !important;
    }

    #ecl-signup-status {
        font-size: 13px;
        font-weight: 500;
        margin: 0 auto;
        display: none;
        background: transparent;
    }

        #ecl-signup-status.is-msg {
            padding: 10px;
            width: 96%;
            border: 1px solid #000;
            background-color: #fffcf0;
            display: block;
        }

    .select2-results__options, .select2-search__field {
        font-size: 12px !important;
    }

.form-selects {
    position: relative;
}
        .form-control{
    height: 48px !important;
    width: 100% !important;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    background: transparent;
    display: flex;
    user-select: none;
    -webkit-user-select: none;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    border-radius: 0;
    border: var(--primary-color) solid 1px !important;
    font-size: 14px;
    padding: 0 10px;
}

    .select2-selection__rendered{
    color: white;
}

}

.select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%);
    height: auto !important;
}

.select2-selection__clear {
    display: none !important;
}

}

.tags span {
    background-color: #EFEFEF;
    border-radius: 10px;
    padding: 5px 8px;
    font-size: 12px;
    display: inline-block;
    margin: 5px 5px;
}

.why-ecl-box {
    background: #fffcf0;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    width: 100%;
    padding: 30px 60px;
    transition: all 0.3s;
    margin: 60px 0px 0px 0px;
}

    .why-ecl-box p {
        margin: 10px;
        line-height: 1.8;
        font-size: 14px;
        padding-bottom: 5px;
    }

.jutify-text {
    text-align: justify !important;
}

.link-area {
    color: black;
}

    .link-area:hover {
        color: var(--primary-color) !important;
    }

@media (max-width: 1600px) {
    .blk-btn {
        padding: 15px 30px;
    }
}

.tabular {
    padding: 10px 0 40px 0;
}

    .tabular table {
        width: 70%;
        border-collapse: collapse;
        background-color: #CCC;
        font-size: 14px;
    }

        .tabular table td {
            padding: 15px;
            background-color: #FFF;
            border: 1px solid #CCC;
        }

.bloginner h2 {
    font-size: 1.7rem;
    margin-bottom: 10px;
    color: #000;
}

.bloginner h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.sft a {
    color: #FFF;
    text-decoration: underline;
}

.bloginner-list li a {
    color: #000;
    font-weight: 400;
}

.bloginner-list li {
    position: relative;
}

    .bloginner-list li:before {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        background-color: #000;
        border-radius: 50%;
        left: -16px;
        top: 9px;
    }

    .bloginner-list li a:hover {
        color: #0d77fd;
    }

.sft a:hover {
    color: #0d6efd;
    text-decoration: none;
}

.bg-gred {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(236, 238, 248, 0.75) 66.35%);
}

    .bg-gred .card-header h2 button {
        font-size: calc(15px + (22 - 15) * (100vw - 320px) / (1920 - 320));
        font-weight: 500;
        padding-right: 40px !important;
    }
    /* .bg-gred .card-header h2 button.collapsed::before{
    transform: rotate(0.5turn);
} */
    .bg-gred .ecl-faqs-box .collapsible-link::before {
        background: #F9A822;
    }

    .bg-gred .card-header {
        background: #F1F2FA;
    }

    .bg-gred .card {
        border: 1px solid #C3C3C3;
    }

    .bg-gred .card-body {
        padding-top: 0;
    }

    .bg-gred .ecl-faqs-box .card {
        background: #F1F2FA;
    }

.heading h3 {
    font-size: calc(18px + (28 - 18) * (100vw - 320px) / (1920 - 320));
    font-weight: 600;
    letter-spacing: -1px;
    color: black;
    font-family: 'Poppins', sans-serif;
}

    .heading h3 span {
        color: #F2CD1B;
    }

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-30 {
    margin-bottom: 30px;
}

.heading > span {
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
    color: #F9A822;
    font-family: 'Poppins', sans-serif;
}

.heading p {
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    color: black;
    font-family: 'Poppins', sans-serif;
}

.cstm-slide img {
    margin: 0 auto;
}

.cstm-slide .slick-track {
    display: flex;
    align-items: center;
}

.blt-content > span {
    font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
    color: #F9A822;
    font-weight: 500;
}

.blt-content h3 {
    font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1920 - 320));
    color: black;
    font-weight: 400;
    letter-spacing: -1px;
}

    .blt-content h3 span {
        color: #F2CD1B;
    }

.agent-sec {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 23%, rgba(236, 238, 248, 0.75) 100%);
}

.cta-sec {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 120px 0;
}

.cta-content {
    position: relative;
    z-index: 2;
}

    .cta-content h3 {
        color: white;
        font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1920 - 320));
        font-weight: 400;
        margin-bottom: 20px;
    }

    .cta-content p {
        color: white;
        font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
        margin-bottom: 30px;
    }

.cta-btn .btn-ic {
    background: #F2CD1C;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    gap: 0 12px;
    color: #2D2222;
    padding: 5px 10px;
}

    .cta-btn .btn-ic:hover {
        background: black;
        color: white;
        border-color: white;
    }

    .cta-btn .btn-ic span {
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 49px;
        height: 49px;
    }

    .cta-btn .btn-ic i, svg {
        color: black !important;
    }

.img-100 img {
    width: 100%;
    height: 100%;
}

.steps-sec {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 23%, rgba(236, 238, 248, 0.75) 100%);
}

.steps-wrap .step-cont {
    text-align: center;
}

    .steps-wrap .step-cont h5 {
        font-size: calc(14px + (20 - 14) * (100vw - 320px) / (1920 - 320));
        font-weight: 500;
        color: black;
    }

    .steps-wrap .step-cont p {
        font-size: calc(13px + (16 - 13) * (100vw - 320px) / (1920 - 320));
        font-weight: 400;
        opacity: 0.7;
        color: black;
    }

.steps-wrap .step-img {
    max-width: 270px;
    margin: 0 auto 20px;
    position: relative;
    display: flex;
    justify-content: center;
}

.step-img::before {
    content: '';
    position: absolute;
    background-image: url(/assets/images/step-line.png);
    background-repeat: no-repeat;
    width: 100%;
    max-width: 181px;
    background-size: contain;
    left: 100%;
    height: 24px;
    left: calc(100% + 19px);
    bottom: 22%;
}

.blt-img img {
    object-fit: contain;
}

.step-img.sty1::before {
    background-image: url(/assets/images/step-line2.png);
}

.no-before::before {
    display: none !important;
}

.blt-sec {
    position: relative;
}

    .blt-sec .abs-ec {
        display: none;
    }



/*------------ Responsive Media Queries ----------*/

@media (max-width: 1600px) {

    /*.main-banner{
        height: 750px;
    }

    .ecl-banner {
        height: 750px !important;
    }

    .launch-chattrik-banner {
        height: 750px;
    }

    .ai-powered-banner {
        height: 750px;
    }*/

    /*.launch-chattrik-banner {
        padding: 60px 60px !important;
    }*/

    .case-space {
        max-width: 94vw;
    }

    .workTop-sec .mad-top-text {
        left: 2%;
    }

    .crm-sec .top-text {
        left: 2%;
    }

    .perks-box {
        min-height: auto;
    }

    .home-slider-btns #leftBtn {
        left: 10px;
        top: 260px;
    }

    .home-slider-btns #RightBtn {
        right: 10px;
        top: 260px;
    }

    .home-slider-btns .hm-bnr-btn {
        width: 40px;
        height: 40px;
    }
}


@media (max-width: 1400px) {

    .solutionThing {
        padding: 80px 0;
    }

    .portfolio-section {
        padding: 60px 0 0;
    }

    .know-sec {
        padding: 20px 0 60px 0;
    }

    .navbar .nav-link, .navbar .nav-item a {
        font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1920 - 300)));
        padding: 12px 8px;
    }

    .crm-sec .top-text {
        left: 2%;
    }

    .case-space {
        max-width: 100%;
    }

    .crm-sec .mad-top-text {
        display: none;
    }

    .contentBoxSlideHalf {
        padding-left: 0;
    }

    .space3 {
        padding: 80px 0;
    }

    .step-img::before {
        max-width: 120px;
    }

    .ai-powered-banner {
        /*padding: 80px 0 !important;*/
        /*        height: auto;*/
        background-position: center left;
    }

    .top-clients-item.pholox .imgBox img {
        width: 100%;
    }

    .workTop-sec .mad-top-text {
        display: none;
    }

    .workBanner {
        padding-bottom: 0;
    }

    .workTop-sec {
        padding-top: 80px;
    }

    .mapBox .countryBox.canada {
        left: 81px;
        top: 36px;
    }

    .mapBox .countryBox.usa {
        left: 106px;
        top: 100px;
    }

    .mapBox .countryBox.uk {
        left: 250px;
        top: 55px;
    }

    .mapBox .countryBox.uae {
        left: 244px;
        top: 121px;
    }

    .mapBox .countryBox.pk {
        right: 124px;
        top: 121px;
    }

    .left-arrow {
        right: 346px;
    }

    .right-arrow {
        right: 300px;
    }

    .perks-box {
        min-height: auto;
    }

    .portfolio-section .controls .control {
        font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
        padding: 10px 8px;
        margin: 0 6px;
    }

    .blogBox {
        margin: 20px;
    }

        .blogBox .card a {
            padding: 20px;
            height: 350px;
        }
}

@media (max-width: 1200px) {

    .category-sec {
        padding: 40px 0;
    }

        .category-sec .tab-content {
            padding: 20px 0;
        }

            .category-sec .tab-content ul {
                padding-left: 10px;
            }

    .solutionsCta {
        padding: 100px 0 100px 0;
    }

    .space-m-tb {
        margin: 60px 0;
    }

    .shaping-sec {
        padding: 80px 0;
    }

    .logos-sec {
        padding-top: 0;
    }

    .ai-powered-banner {
        /*        padding: 80px 0 60px !important;*/
        /*height: auto !important;*/
    }

    .gl-img-cont h3 {
        font-size: 30px;
    }

    .know-sec .greybg {
        padding: 50px 50px 0 50px;
    }

    .white-btn {
        padding: 15px 25px
    }

    .innerSlide .glance-top-Item .slideImg1 {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
        top: 0;
        margin: auto;
        display: flex;
        align-items: center;
    }

    .innerSlide .glance-top-Item .slideImg {
        width: 50%;
        right: 0;
    }

    .starategySlide .contentBox {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .innerSlide .glance-top-Item .slideImg {
        width: 36%;
    }

    .portfolio-section .controls {
        flex-wrap: wrap;
    }

        .portfolio-section .controls .control {
            margin: 6px;
        }

    footer .locationBox .boxes {
        padding: 0 10px;
    }

    .mapBox .countryBox.usa {
        left: 82px;
        top: 94px;
    }

    .mapBox .countryBox.uae {
        left: 209px;
        top: 108px;
    }

    .mapBox .countryBox.pk {
        right: 80px;
        top: 103px;
    }

    .mapBox .countryBox.uk {
        left: 223px;
        top: 48px;
    }

    .testi-arrows {
        padding-bottom: 50px;
    }

    .right-arrow {
        top: 22px;
        right: 225px;
    }

    .left-arrow {
        top: 22px;
        right: 270px;
    }

    .perks-box {
        min-height: 240px;
    }
}

@media (max-width: 1024px) {
    .mapBox {
        right: 0;
        width: 45%;
    }

    .crm-sec .slick-dots {
        width: 55px;
    }

    .ecl_compliance .slick-center {
        transform: scale(1) !important;
    }

    .ecl_compliance .slick-track {
        padding: 20px 0px 80px 0 !important;
    }
}

@media (max-width: 991px) {

    .mob-app-dev-sev-sec img {
        width: 100%;
    }

    .lms-ban-inner {
        min-height: auto;
    }

    .crm-sec .top-text.sty1 {
        display: none;
    }

    .solutionsCta.innerCta {
        padding: 60px 0;
    }

    .case-space {
        padding: 40px 0;
    }

    .solutionThing .postBox {
        margin-bottom: 30px;
    }

    .innerSlide .glance-top-Item {
        padding: 30px 20px;
        min-height: 400px;
    }

    .space-p-tb {
        padding: 60px 0;
    }

    .gl-img-cont h3 {
        font-size: 20px;
    }

    .gl-img-cont span {
        font-size: 10px;
    }

    .navbar-brand img {
        width: 100px;
    }

    /*.launch-chattrik-banner {
        padding: 50px 60px !important;
    }*/

    .launch-bnr-img {
        display: block;
    }

    /*    .main-banner {
        height: 65vh;
    }*/

    .blt-sec .blt-content {
        margin-left: -15px;
    }

    .blt-sec .abs-ec {
        display: block;
        position: absolute;
        left: 76%;
        bottom: -60%;
        z-index: 2;
    }

    .ptt-md-0 {
        padding-top: 0 !important;
    }

    .md-20 {
        margin-bottom: 20px;
    }

    .step-img::before {
        display: none !important;
    }

    footer .locationBox .boxes {
        max-width: 33.33%;
        flex: 0 0 33.33%;
    }

    footer .linksBox.brdr-right {
        border-right: 0;
    }

    .main-banner .shape {
        width: 450px;
        height: 450px;
    }

    .navbar .dropdown ul {
        opacity: 1;
        display: block;
        visibility: visible;
        position: relative;
        min-height: inherit;
        box-shadow: none;
    }

    header .navbar .nav-item {
        flex-direction: column;
    }

    .what-sec::before {
        width: 50%;
    }

    .mapBox {
        right: 0;
        width: 100%;
        position: relative;
        top: -30px;
    }

    .what-sec .common-title br {
        display: none;
    }

    .know-sec .greybg {
        padding: 30px 30px 0 30px;
    }

    .category-sec .imgRightBox {
        display: none;
    }

    .clientsSec .cBox {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .mob-cont2 {
        padding-left: 0;
    }

    .solutionThing .contentArea {
        padding-top: 0;
    }

        .solutionThing .contentArea br {
            display: none;
        }

    .solutionThing .rightPostBox {
        padding-top: 0;
    }

    .workTabs1 .tab-content {
        padding: 0;
        text-align: center;
    }

    .crm-sec .slick-dots {
        display: flex;
        top: auto;
        width: 100%;
    }

    .crm-sec .tranasTabs {
        max-width: 100%;
    }

    .crm-sec.styh .space {
        min-height: 600px;
    }

    .mob-app-banner-sec .slideImg1 img {
        width: 100%;
    }

    .our-digital-sec {
        padding-top: 0;
    }

    .mapBox .countryBox.canada {
        left: 145px;
        top: 50px;
    }

    .mapBox .countryBox.usa {
        left: 135px;
        top: 148px;
    }

    .mapBox .countryBox.uk {
        left: 366px;
        top: 74px;
    }

    .mapBox .countryBox.uae {
        left: 335px;
        top: 165px;
    }

    .mapBox .countryBox.pk {
        right: 188px;
        top: 165px;
    }

    .portfolio-section {
        padding: 50px 0
    }

    .know-sec {
        padding: 0px 0 40px 0;
    }

    .portfolio-section .portfolio-item .mix {
        margin-bottom: 20px;
    }

/*    .portfolio-menu {
        margin-top: 25px !important;
    }*/

    .testi-arrows {
        padding-bottom: 30px;
    }

    .left-arrow {
        top: 14px;
        right: 330px;
    }

    .right-arrow {
        top: 14px;
        right: 286px;
    }

    .perks-box {
        padding: 10px 10px 0px 20px;
        min-height: auto;
    }
}

@media (max-width: 767px) {

    .crm-sec .top-text.sty1 {
        display: none;
    }

    .top-text.sty1.line1 {
        display: none;
    }

    .tab-content {
        padding: 20px 0;
    }

    .about-sec {
        padding: 30px 0;
    }

    .shaping-sec {
        padding: 30px 0;
    }

    .groth-box {
        padding: 10px 15px 10px 15px;
    }

    footer .locationBox .boxes {
        max-width: 100%;
        flex: 0 0 100%;
        border-right: 0;
        border-bottom: #daa900 solid 1px;
        padding: 20px 10px 10px;
    }

    .groth-box {
        height: auto;
    }

    .workTabs1 .contentBox {
        align-items: center;
    }

    .what-sec::before {
        width: 100%;
    }

    .employ-box {
        align-items: flex-end;
    }

        .employ-box .employ-left {
            max-width: 100%;
        }

    .mapBox .countryBox.uae {
        right: 190px;
        left: auto;
    }

    .mapBox .countryBox.pk {
        right: 105px;
        top: 150px;
    }

    .mapBox .countryBox.uk {
        top: 48px;
    }

    .team-sec {
        text-align: center;
    }

        .team-sec .team-box .team-img {
            text-align: center;
        }

    .contentBoxSlideHalf {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .innerSlide .glance-top-Item .slideImg1 {
        position: relative;
        top: 20px;
        width: 100%;
    }

    .innerSlide .glance-top-Item {
        flex-direction: column;
    }

    .acc-box {
        border-bottom: 1px solid #d3d3d3 !important;
        border-right: 0;
        padding: 20px 20px;
    }

    .innerSlide .glance-top-Item .slideImg {
        width: 100%;
        right: 0;
        position: relative;
    }

    .starategySlide .contentBox {
        padding-left: 0;
    }

    .collapsible-link::before {
        font-size: 1rem;
        right: 0;
    }

    .sj-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .openingTabs .nav-tabs .nav-item a {
        padding: 10px 16px;
        font-size: 16px;
    }

    .space-p-b {
        padding-bottom: 50px;
    }

    .space-p-tb {
        padding: 50px 0;
    }

    .space-m-tb {
        margin: 50px 0;
    }

    .single-job {
        align-items: flex-end;
    }

    .portfolio-section .portfolio-item .mix {
        margin-bottom: 0;
    }

    .buildSec .rightImg {
        display: none;
    }

    .buildSec .content-Box {
        padding-top: 0;
        padding-bottom: 0;
    }

    .buildSec {
        padding: 80px 0;
    }

    .lrgPop .modal-dialog .modal-body {
        flex-direction: column;
    }

    .lrgPop .mad-top-text {
        writing-mode: inherit;
        transform: rotate(0);
        position: relative;
        top: 0;
        left: 0;
        text-transform: uppercase;
        right: 0;
        margin: auto;
    }

    .workTabs1 .listing .nav-tabs {
        align-items: center;
        justify-content: center;
    }

    .solutionsCta {
        padding: 100px 0;
    }

    .category-sec .nav.nav-tabs {
        justify-content: center;
    }

    /*    .what-box {
        text-align: center;
    }*/

    .space {
        padding: 60px 0;
    }

    .space2 {
        padding: 60px 0;
    }

    .space3 {
        padding: 60px 0;
    }

    .viewButton {
        display: flex;
        justify-content: center;
        text-align: center;
    }

        .viewButton .justify-content-end {
            justify-content: center !important;
        }

        .viewButton .case-a {
            margin-bottom: 20px;
            display: inline-block;
        }

    .case-sec {
        padding: 30px 0;
    }

    .mob-cont {
        padding: 20px 20px 0 30px;
    }

    .category-sec {
        padding: 50px 0;
    }

    .offer-sec {
        padding: 50px 0;
    }

    .count-sec {
        padding: 30px 0;
    }

    .footer .SecondArea {
        padding-bottom: 30px;
    }

    .soical-media-footer {
        justify-content: flex-start;
        flex-direction: column;
        margin-bottom: 25px;
    }

    footer .newsLetterArea {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

        footer .newsLetterArea .formArea {
            display: flex;
            max-width: 100%;
            flex: 0 0 100%;
            width: 100%;
        }

    br {
        display: none;
    }

    .mapBox .countryBox.pk {
        right: 129px;
        top: 120px;
    }

    .mapBox .countryBox.uae {
        left: 250px;
        top: 130px;
    }

    .mapBox .countryBox.uk {
        top: 60px;
        left: 270px;
    }

    .mapBox .countryBox.usa {
        left: 102px;
        top: 116px;
    }

    .mapBox .countryBox.canada {
        left: 103px;
        top: 26px;
    }

    .crm-sec .slick-dots {
        top: auto;
        bottom: -10px;
    }

    .left-arrow {
        right: 270px;
    }

    .right-arrow {
        right: 230px;
    }

    .testi-arrows {
        display: none;
    }
}

@media (max-width: 575px) {

    .crm-sec .space {
        padding: 30px 0;
    }

    .solutionThing .postBox {
        margin-bottom: 10px;
    }

    .glance-buttoms-slick {
        top: 0;
        padding-bottom: 20px;
    }

    .space-p-tb {
        padding: 30px 0;
    }

    .offer-sec {
        padding: 30px 0;
    }

    .know-sec {
        padding: 0px 0 20px 0;
    }

    .portfolio-section {
        padding: 30px 0 20px;
    }

    .portfolio-section .controls .control {
        padding: 4px;
    }

    .launch-chattrik-banner .blk-btn {
        padding: 0px 10px 6px;
    }

    .launch-chattrik-banner i {
        font-size: 20px;
        top: 2px;
    }

    .ai-powered-banner .blk-btn {
        padding: 0px 10px 4px;
    }

    .ai-powered-banner i {
        font-size: 20px;
        top: 2px;
    }

    .ai-bnr-credit-card {
        padding-left: 14px;
    }

    .launch-chattrik-banner {
        padding: 40px 20px !important;
    }

    /*.ai-powered-banner {
        padding: 40px 0 40px !important;
        height: auto !important;
    }*/

    .our-digital-sec {
        padding: 0 0 20px 0;
    }

    .foot-list.sty1 li {
        width: 100%;
    }

    .pd img {
        height: auto;
    }

    .logos-sec img {
        display: inline-block;
    }

    .crm-sec .top-text {
        display: none;
    }

    .main-banner .shape {
        right: -60px;
        bottom: -80px;
        width: 300px;
        height: 300px;
    }

    .banner-spinner {
        margin-top: 147px;
    }

    .portfolio-section .portfolio-item .imgBox {
        width: 100%;
    }

    .clientsSec .cBox {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .hrm-ban-inner {
        height: auto;
        max-height: inherit;
    }

    .crm-ban-inner {
        height: auto;
        max-height: inherit;
    }

    .lms-ban-inner {
        height: auto;
        max-height: inherit;
    }
}

@media (max-width: 480px) {

    .space2 {
        padding: 30px 0;
    }

    .tools-box {
        padding: 4px 10px 4px 10px;
        margin-bottom: 10px;
    }

    .process-sec {
        padding: 20px 0;
    }

    .process-box {
        padding: 4px 10px 4px 10px;
        margin-bottom: 0px;
    }

    .category-sec {
        padding: 30px 0;
    }

    .solutionsCta {
        padding: 40px 0;
    }

    .mob-app-banner-sec {
        padding: 30px 0 0 0;
    }

    .innerSlide .glance-top-Item {
        padding: 20px 10px;
        min-height: 400px;
    }

    .solutionThing .postBox {
        padding: 0 2px;
    }

    footer .locationArea {
        padding: 10px 0 20px;
    }

    footer .locationBox {
        padding: 10px;
        margin-top: 20px;
    }

    .blogBox .card a:hover {
        transform: translate(-14px, -20px);
    }

    .blogBox {
        margin: 10px 20px;
    }

    .portfolio-section {
        padding: 20px 0 0;
    }

    .navbar-brand img {
        width: 80px;
    }

    .space-p-tb {
        padding: 30px 0;
    }

    .launch-chattrik-banner {
        padding: 20px 10px !important;
    }

    .ai-powered-banner .blk-btn {
        padding: 2px 12px;
    }

    .ai-powered-banner i {
        font-size: 22px;
    }

    .ai-powered-banner {
        padding: 30px 0 30px !important;
    }

    .mapBox .countryBox.usa {
        left: 105px;
        top: 104px;
    }

    .mapBox .countryBox.uk {
        left: 239px;
        top: 39px;
    }

    .mapBox .countryBox.uae {
        left: 220px;
        top: 108px;
    }

    .mapBox .countryBox.canada {
        left: 104px;
        top: 35px;
    }

    .mapBox .countryBox.pk {
        right: 105px;
        top: 110px;
    }
}

@media (max-width: 360px) {
    .mapBox .countryBox .countryIcon img {
        display: none;
    }

    .mapBox {
        top: -25px;
    }

        .mapBox .countryBox.usa {
            left: 78px;
            top: 70px;
        }

        .mapBox .countryBox.uk {
            top: 41px;
            left: 164px;
        }

        .mapBox .countryBox.canada {
            left: 76px;
            top: 11px;
        }

        .mapBox .countryBox.uae {
            left: 160px;
            top: 105px;
        }

        .mapBox .countryBox .countryName {
            opacity: 1;
        }

        .mapBox .countryBox.pk {
            top: 90px;
            right: 45px;
        }

    .clientsSec .cBox {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .crm-sec.styh .space {
        min-height: 680px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}









.main-banner.launch-chattrik-banner p a {
    color: #D3E4F3;
    font-family: 'Poppins', sans-serif;
    text-decoration: underline;
}