@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap);

*, .h1, .h2, .h3, .h4, .h5, body, h1, h2, h3, h4, h5 {
    font-family: Outfit, sans-serif
}

a, a:hover, p {
    color: #000
}

.footer_box ul li a, .site-navbar .site-navigation .site-menu .has-children a {
    text-transform: capitalize
}

.footer-like p a, .galy .icon, .hub-lrn, .side_button, .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover, .testim .card-header button, a:hover {
    text-decoration: none
}

html {
    scroll-behavior: smooth
}

:root {
    --btn-color-primary: #004aad;
    --btn-color-secondary: #20abb1
}

body {
    line-height: 1.7;
    color: #4d4d4d;
    font-weight: 300;
    font-size: 1rem;
    position: relative
}

body::-webkit-scrollbar {
    width: 8px
}

body::-webkit-scrollbar-thumb {
    background-color: var(--btn-color-primary);
    border-radius: 30px
}

.end_end_list li, .nkc_career_left ul li, .pointers li {
    position: relative;
    list-style-type: none;
    font-size: 18px
}

.end_end_list li::before, .nkc_career_left ul li::before, .pointers li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -30px;
    width: 38px;
    height: 12px;
    background-image: url(../img/icons/yes.png);
    background-size: contain;
    background-repeat: no-repeat
}

.blur-overlay .dialog-box .head h5, .contact-section-three .content-column .call-info-box a, strong {
    font-weight: 700
}

.card-title {
    margin-bottom: .4rem
}

svg {
    vertical-align: sub
}

.container-fluid {
    padding-right: 25px;
    padding-left: 25px
}

.rounded-large, .side_form button, .side_form input {
    border-radius: 30px
}

::-moz-selection {
    background: #000;
    color: #fff
}

p {
    font-size: 17px
}

::selection {
    background: #000;
    color: #fff
}

a {
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.text-black {
    color: #000 !important
}

.primary_heading {
    font-weight: 500;
    font-size: 28px;
    line-height: 55px
}

.primary_heading span {
    color: var(--btn-color-primary);
    font-weight: 700;
    font-size: 32px
}

.title-2 span {
    font-size: 38px
}

.title-2 {
    font-size: 44px
}

.bg-black {
    background: #000 !important
}

.btn-primary, .social_icon a {
    background: var(--btn-color-primary)
}

.anim-icons.full-width, .galy .icon img, img {
    max-width: 100%
}

.section {
    padding: 60px 0
}

.heading_spacing {
    margin-bottom: 30px
}

.offcanvas-menu .site-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    overflow: hidden
}

.about-section .image-box .image, .anim, .contact-section-three .form-column, .crm-hub-imgsec, .empower_container, .indust, .line, .list-style-two, .logo, .number-block-three, .number-block-two, .prod_sns .owl-nav .owl-nav, .site-navbar, .testimo, .video, .work-block-three, .work-section-three {
    position: relative
}

.title_dec_2 {
    font-weight: 500;
    color: #000;
    font-size: 20px
}

.btn-primary, .btn-primary:hover, .btn-secondary {
    color: #fff;
    transition: .5s
}

#top_button.show, .offcanvas-menu .site-wrap:before {
    opacity: 1;
    visibility: visible
}

.btn-primary {
    border: 0;
    border-radius: 5px !important;
    width: 170px
}

.btn-primary:hover {
    background: #334a82
}

.btn-secondary {
    background: var(--btn-color-secondary);
    border: 0;
    border-radius: 5px !important;
    width: 170px
}

.drop_cap:first-letter {
    float: left;
    line-height: .65;
    margin: 15px .1em .1em 0;
    font-size: 80px;
    font-weight: 800;
    color: var(--btn-color-primary)
}

.drop_cap {
    font-size: 23px
}

.btn-secondary:hover {
    color: #fff;
    background: #4fb6b9;
    transition: .5s
}

.text_btn {
    color: var(--btn-color-primary);
    font-weight: 600;
    transition: .5s;
    font-size: 20px
}

.text_btn:hover i {
    margin-left: 10px;
    transition: .5s ease-in-out;
    color: #000
}

.text_btn i {
    transition: .5s ease-in-out;
    font-size: 30px;
    vertical-align: middle
}

.site-menu li a:hover svg path, .site-menu li a:hover svg rect, .site-navbar .site-navigation .site-menu .active>a>svg>path, .site-navbar .site-navigation .site-menu .active>a>svg>rect {
    fill: #60cdff
}

.has-children.open>.dropdown_link, .has-children.open>:first-child, .site-navbar .site-navigation .site-menu .has-children .dropdown .active>a, .text-primary {
    color: #60cdff !important
}

.men_logo .logo img {
    height: 65px;
    max-width: 100%
}

.men_logo {
    text-align: end;
    padding-left: 30px
}

.icon img {
    max-width: 25%
}

.btn {
    border-radius: 0
}

.btn:active, .btn:focus, .btn:hover {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.nkc_career_left .heading__secnd {
    margin: 0
}

.btn.btn-black {
    color: #fff;
    background-color: #60cdff
}

.inner_banner_title {
    padding: 10px 35px 10px 100px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    width: auto;
    backdrop-filter: blur(10px);
    background: #ffffff40;
    border-radius: 0 100px 100px 0
}

.line, .line::before {
    width: 130px;
    height: 2px
}

.btn.btn-black:hover {
    color: #fff;
    background-color: #000
}

.line-height-1 {
    line-height: 1 !important
}

.custom_dropdown h5, .heading__frst {
    color: rgb(28 66 114);
    font-weight: 600;
    display: inline-block;
    border-bottom: 2px dashed;
    padding-bottom: 5px
}

.section_heading .heading__secnd {
    margin-bottom: 25px
}

.heading__secnd {
    color: #2d357a;
    font-weight: 700;
    font-size: 30px
}

.hero2 .hero2-tags ul, .menu___bar .container-fluid, .policies li:first-child {
    padding-left: 0
}

.line {
    background: #2a3478;
    display: inline-block;
    margin-bottom: 7px
}

.down_ftr, .footer_list, .patern_container, .proposition_section .proposition_card {
    display: flex
}

.line::before {
    content: "";
    background: #3fa7b0;
    position: absolute;
    top: -4px;
    left: 0
}

.center__heading .line::before {
    transform: translate(-50%, -50%);
    top: -3px
}

.section_heading {
    padding: 0 150px
}

.glance_hdng {
    font-size: 24px;
    margin-bottom: 10px
}

.section h5 {
    font-size: 24px;
    margin-top: 10px
}

.nkc_career_right_images img {
    width: 100%;
    border-radius: 15px
}

.site-navbar {
    margin-bottom: 0;
    z-index: 999
}

.brdcr li a:hover, .site-navbar.transparent {
    background: 0 0
}

.site-navbar.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.site-navbar .site-logo {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -20px
}

.site-navbar .site-navigation.border-bottom {
    border-bottom: 1px solid #f3f3f4 !important
}

.brdcrm .breadcrumb, .crlai .card:last-child, .site-navbar .site-navigation .site-menu, .testimonial-block-three .inner-box .content-box .title {
    margin-bottom: 0
}

.site-navbar .site-navigation .site-menu .active>a {
    color: #0056b3 !important
}

.site-menu li a:hover {
    color: #0056b3;
    transition: .5s
}

.site-navbar .site-navigation .site-menu a {
    text-decoration: none !important;
    font-size: 15px;
    display: inline-block;
    font-weight: 600
}

.site-navbar .site-navigation .site-menu>li {
    display: inline-block;
    padding: 10px
}

.site-navbar .site-navigation .site-menu>li>a {
    padding: 0;
    text-transform: capitalize;
    letter-spacing: .05em;
    color: #000;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important
}

.site-navbar .site-navigation .site-menu .has-children>a {
    position: relative;
    padding-right: 20px
}

.site-navbar .site-navigation .site-menu .has-children>a:before {
    position: absolute;
    content: "\e313";
    font-size: 16px;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: icomoon
}

.site-navbar .site-navigation .site-menu .has-children .dropdown {
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    top: 100%;
    position: absolute;
    text-align: left;
    border-top: 2px solid #60cdff;
    -webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .1);
    border-left: 1px solid #edf0f5;
    border-right: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
    padding: 0;
    margin-top: 20px;
    margin-left: 0;
    background: #fff;
    -webkit-transition: .2s;
    -o-transition: .2s;
    border-radius: 0 0 10px 10px;
    transition: .2s
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top {
    position: absolute
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
    bottom: 100%;
    left: 20%;
    border: 10px solid rgba(136, 183, 213, 0);
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    margin-left: -10px
}

.site-navbar .site-navigation .site-menu .has-children .dropdown a {
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    color: #343a40;
    font-weight: 600
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li>a {
    padding: 9px 20px;
    display: block
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children:active>a, .site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children:focus>a, .site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children:hover>a, .site-navbar .site-navigation .site-menu .has-children .dropdown>li>a:hover {
    background: #f4f5f9;
    color: #25262a
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>a:before {
    content: "\e315";
    right: 10px
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown, .site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>ul {
    left: 100%;
    top: 0
}

.site-mobile-menu .site-nav-wrap a:hover, .site-mobile-menu .site-nav-wrap li.active>a, .site-navbar .site-navigation .site-menu .has-children:active>a, .site-navbar .site-navigation .site-menu .has-children:focus>a, .site-navbar .site-navigation .site-menu .has-children:hover>a {
    color: #60cdff
}

.site-navbar .site-navigation .site-menu .has-children:active, .site-navbar .site-navigation .site-menu .has-children:focus, .site-navbar .site-navigation .site-menu .has-children:hover {
    cursor: pointer
}

.site-navbar .site-navigation .site-menu .has-children:active>.dropdown, .site-navbar .site-navigation .site-menu .has-children:focus>.dropdown, .site-navbar .site-navigation .site-menu .has-children:hover>.dropdown {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    margin-top: 0;
    visibility: visible;
    opacity: 1
}

.site-mobile-menu {
    top: 0;
    width: 300px;
    position: fixed;
    right: 0;
    z-index: 2000;
    padding-top: 20px;
    background: #fff;
    height: calc(100vh);
    -webkit-transform: translateX(110%);
    -ms-transform: translateX(110%);
    transform: translateX(110%);
    -webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, .1);
    box-shadow: -10px 0 20px -10px rgba(0, 0, 0, .1);
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.book_form button, .book_form input, .book_form textarea {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25)
}

.offcanvas-menu .site-mobile-menu {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.site-mobile-menu .site-mobile-menu-header {
    width: 100%;
    float: left;
    padding-left: 20px;
    padding-right: 20px
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
    float: right;
    margin-top: 8px
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
    font-size: 30px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
    color: #25262a
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
    float: left;
    margin-top: 10px;
    margin-left: 0
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
    display: inline-block;
    text-transform: uppercase
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
    max-width: 70px
}

.site-mobile-menu .site-mobile-menu-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 0 20px 150px;
    height: calc(100vh - 52px)
}

.site-mobile-menu .site-nav-wrap {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative
}

.contact_box .footer_list:not(:last-child), .footer_list:not(:last-child), .footer_logo {
    margin-bottom: 10px
}

.site-mobile-menu .site-nav-wrap a {
    padding: 10px 20px;
    display: block;
    position: relative;
    color: #212529
}

.site-mobile-menu .site-nav-wrap li {
    position: relative;
    display: block
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 20;
    width: 36px;
    height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
    background: #f8f9fa
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
    font-size: 12px;
    z-index: 20;
    font-family: icomoon;
    content: "\f078";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    -ms-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.site-mobile-menu .site-nav-wrap>li {
    display: block;
    position: relative;
    float: left;
    width: 100%
}

.site-mobile-menu .site-nav-wrap>li>a {
    padding-left: 20px;
    font-size: 20px
}

.site-mobile-menu .site-nav-wrap>li>ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.dotCircle .itemDot.active .forActive, .site-mobile-menu .site-nav-wrap>li>ul>li, .site-mobile-menu .site-nav-wrap>li>ul>li>ul>li, .step.active .step_box.dedicated, .step.active .step_box.employees {
    display: block
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
    padding-left: 40px;
    font-size: 16px
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
    padding: 0;
    margin: 0
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
    font-size: 16px;
    padding-left: 60px
}

.site-mobile-menu .site-nav-wrap[data-class=social] {
    float: left;
    width: 100%;
    margin-top: 30px;
    padding-bottom: 5em
}

.site-mobile-menu .site-nav-wrap[data-class=social]>li {
    width: auto
}

.site-mobile-menu .site-nav-wrap[data-class=social]>li:first-child a {
    padding-left: 15px !important
}

header {
    background: #fff
}

#navbar {
    position: sticky;
    top: 0;
    width: 100%;
    display: block;
    transition: top .8s
}

.header_btn {
    background: #004aad;
    color: #fff;
    padding: 10px 18px !important
}

.header_btn a, .header_btn a:hover {
    color: #fff !important
}

.footer_logo {
    width: 50%;
    /* background: #fff;
    border-radius: 5px */
    margin-bottom: 20px;
}

.footer_icon {
    margin-right: 6px
}

.footer_icon img {
    width: 22px
}

.footer_list i {
    font-size: 40px;
    color: #fff
}

.footer_list_text {
    width: 90%;
    color: #fff;
    font-size: 14px
}

.footer_list_text p {
    font-weight: 600;
    margin-bottom: 0 !important
}

#cookieModal .modal-body p, #cookieModal .modal-header button span, .appnavi li a, .bg_cta .heading__secnd, .bg_cta p, .footer_list_text a, .patern_list li:hover a, .policies li a, .subscribe {
    color: #fff
}

#post-carousel .owl-nav button, .post_box a:hover h4, .social_icon a:hover {
    color: var(--btn-color-primary)
}

.contact8 .form-area .single-input, .footer_social {
    margin-top: 20px
}

.down_ftr {
    gap: 20px;
    padding-top: 20px;
    border-top: 1px dashed #dfdfdf
}

.down_ftr .footer_list, .testimonial-slide3 .testimonial-footer .rating-image img, .w-30 {
    width: 30% !important;
}

.ftr_abt .ftr_logo {
    background: #fff;
    padding: 10px;
    border-radius: 3px;
    width: 20%;
    margin-bottom: 8px
}

.new_cta .cta_text, .our_client_logo .col-md-3 {
    margin-bottom: 40px
}

.ftr_abt p {
    font-size: 14px !important
}

.ftr_abt {
    border-bottom: 1px dashed #dfdfdf;
    padding-bottom: 20px;
    margin-bottom: 30px
}

.ftr_certif ul {
    display: flex;
    gap: 30px
}

.ftr_certif li, .hero2 .hero2-tags ul li {
    display: inline-block
}

.social_icon a {
    display: inline-flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--btn-color-primary);
    color: #fff;
    border-radius: 5px;
    transition: .5s
}

.social_icon a:hover {
    background: 0 0;
    transition: .5s
}

.policies {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    display: flex;
    justify-content: end
}

.policies li:not(:last-child) {
    border-right: 2px solid #606060
}

.policies li {
    padding: 0 10px
}

.footer_bg {
    background-image: url(../img/construction-erp-software.webp);
    background-attachment: fixed;
    padding: 30px 0 0;
    position: relative
}

#top_button, .side_button, .side_form {
    display: inline-block;
    position: fixed
}

.footer_bg::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    content: ""
}

.footer_box p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px
}

.footer_heading {
    font-size: 17px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 10px
}

.bordered_head, .mein_box {
    margin-bottom: 30px;
    text-align: center
}

.footer_box ul li {
    list-style-type: none
}

.footer_box ul, .service-section_seven .pbmit-sticky {
    padding: 0
}

.footer_box ul li a {
    color: #e0e0e0;
    font-size: 14px
}

.footer_box p a {
    color: #5db4ff
}

.copyright, .heading1-w p {
    color: #fff;
    font-size: 14px
}

.ftr_socl {
    margin-top: 10px
}

.ftr_socl ul {
    display: flex;
    gap: 10px
}

.twtr {
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    width: 25px;
    height: 25px
}

.border_row {
    border: 1px solid #a5b6c5;
    border-radius: 4px;
    padding: 15px 0
}

.heads, .new_cta .mein_cta, .our_client_logo .client-img {
    text-align: center
}

.gradient_heading {
    font-size: 30px;
    display: inline-block;
    font-weight: 700;
    background: #1a2d89;
    background: linear-gradient(to left, #1a2d89 0, #2acccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.brd_hed {
    display: inline-block;
    padding: 3px 10px;
    border-bottom: 1px solid #a5b6c5;
    margin-top: 0 !important;
    font-size: 22px !important
}

.col_img img, .side_form textarea {
    border-radius: 15px
}

.mein_box {
    border: 1px dashed #d1d1d191;
    padding: 20px 0;
    border-radius: 4px
}

.top_icon {
    margin-bottom: 20px
}

.top_icon img {
    height: 60px
}

.botom_text, .img_box img {
    border-radius: 10px
}

.botom_text h4 {
    margin: 0;
    color: #033975;
    font-size: 18px;
    font-weight: 600
}

.new_cta .cta_section {
    background: linear-gradient(91.4deg, #37dada -18.02%, #254db5 82.77%), #d9d9d9;
    border-radius: 30px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center
}

.new_cta .cta_text {
    color: #fff;
    font-weight: 600
}

.new_cta .cta_btn {
    background: linear-gradient(0deg, #34bdd2, #34bdd2), #47c3d4;
    border-radius: 6px;
    width: 200px;
    font-size: 15px;
    color: #fff;
    box-shadow: 5px 7px 25px 0 #0000004f
}

.contact_box .footer_icon {
    width: 7%;
    margin-right: 6px
}

.contact_box .footer_icon img {
    width: 35px;
    background: #234274;
    padding: 7px;
    border-radius: 50%
}

.contact_box .footer_list_text {
    width: 90%;
    color: #322f2f;
    font-size: 15px
}

.contact_box .footer_list_text a {
    color: #234274
}

.side_button {
    cursor: pointer;
    background: #000;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-size: 1rem;
    height: 40px;
    line-height: 45px;
    right: 0;
    bottom: 50%;
    text-align: center;
    text-transform: uppercase;
    transform-origin: bottom right;
    width: 150px;
    z-index: 99;
    transform: rotate(-90deg)
}

.side_form {
    width: 30%;
    background: #91bbfc;
    padding: 40px 30px 30px 40px;
    border-radius: 30px 0 0 30px;
    z-index: 999999;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    transition: .5s
}

.form_bg, .form_bg.show {
    transition: .5s ease-in-out
}

#side.show .side_form {
    transform: translate(0, -50%) !important;
    transition: .5s
}

#side_close {
    position: absolute;
    top: 8px;
    left: 14px;
    padding: 3px;
    cursor: pointer;
    color: #fff
}

.side_form button {
    background: #3d89ff;
    color: #fff
}

.side_form label {
    color: #565656;
    font-weight: 600
}

.form_bg.show {
    cursor: pointer;
    background: #000000a6;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999
}

.wrapper-1 {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column
}

.wrapper-2 {
    padding: 30px;
    text-align: center
}

.content h1 {
    font-family: "Kaushan Script", cursive;
    font-size: 4em;
    letter-spacing: 3px;
    color: #5892ff;
    margin: 0 0 20px
}

.footer-like p, .wrapper-2 p {
    font-family: "Source Sans Pro", sans-serif;
    letter-spacing: 1px
}

.wrapper-2 p {
    margin: 0;
    font-size: 1.3em;
    color: #aaa
}

.go-home {
    color: #fff;
    background: #5892ff;
    border: none;
    padding: 10px 50px;
    margin: 30px 0;
    border-radius: 30px;
    text-transform: capitalize;
    box-shadow: 0 10px 16px 1px #aec7fb
}

.footer-like {
    margin-top: auto;
    background: #d7e6fe;
    padding: 6px;
    text-align: center
}

.footer-like p {
    margin: 0;
    padding: 4px;
    color: #5892ff
}

.about-section, .hedpo, .methed h1 {
    font-family: Outfit, sans-serif
}

.footer-like p a {
    color: #5892ff;
    font-weight: 600
}

@media (min-width:360px) {
    .content h1 {
        font-size: 4.5em
    }

    .go-home {
        margin-bottom: 20px
    }
}

@media (min-width:600px) {
    .content {
        max-width: 1000px;
        margin: 0 auto
    }

    .wrapper-1 {
        height: initial;
        max-width: 620px;
        margin: 0 auto;
        box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, .2)
    }
}

.page-wrap {
    min-height: 100vh
}

.content_box, .pattern_img {
    min-height: 100%
}

.book_form {
    width: 100%;
    background: #5584cb;
    padding: 30px;
    backdrop-filter: blur(10px);
    border-radius: 0 30px 30px 0
}

.quote_page_bg .book_form {
    transform: translate(-30px, 0)
}

.book_form label, .hero-area-bg .container .contents .hedop {
    color: #fff;
    font-weight: 500
}

.book_form input {
    border-radius: 30px;
    border: 0
}

.book_form textarea {
    border-radius: 10px;
    border: 0
}

.book_form button {
    background: #3d89ff;
    color: #fff;
    border: 0;
    border-radius: 30px
}

.book_form button:hover {
    border: 0
}

#cookieModal .modal-dialog {
    align-items: last baseline;
    width: 100% !important;
    max-width: initial;
    margin-bottom: 0;
    position: absolute;
    height: 100%;
    bottom: 0
}

#cookieModal .modal-content {
    border-radius: 0;
    background: #0a6b9d;
    border: 0
}

#cookieModal {
    padding-right: 0 !important
}

#cookieModal .modal-header {
    padding: .2rem 1rem;
    opacity: 1;
    color: #fff;
    border-bottom: 0
}

#cookieModal .modal-body {
    border-top: 0;
    padding: .4rem 1rem;
    color: #fff
}

#cookieModal .modal-footer {
    padding: .2rem;
    color: #fff;
    justify-content: center;
    border-color: #343434
}

#cookieModal .modal-body p {
    font-size: 13px;
    margin: 0
}

.hardware {
    height: 195px;
    object-fit: contain
}

#vid, .footer_cta_img, .pattern_img img, .post_box img, .step_box img {
    object-fit: cover
}

#top_button {
    background-color: #6b92d3;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 100%;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4.89347px 9.78694px rgba(96, 155, 255, .45);
    color: #fff
}

#top_button i {
    font-size: 26px
}

#top_button:hover {
    cursor: pointer;
    background-color: #333
}

#top_button:active {
    background-color: #555
}

@media (min-width:500px) {
    #top_button {
        margin: 30px
    }
}

.tab_item {
    display: inline-flex;
    background: radial-gradient(circle at 100% 100%, #fff 0, #fff 6px, transparent 6px) 0 0/8px 8px no-repeat, radial-gradient(circle at 0 100%, #fff 0, #fff 6px, transparent 6px) 100% 0/8px 8px no-repeat, radial-gradient(circle at 100% 0, #fff 0, #fff 6px, transparent 6px) 0 100%/8px 8px no-repeat, radial-gradient(circle at 0 0, #fff 0, #fff 6px, transparent 6px) 100% 100%/8px 8px no-repeat, linear-gradient(#fff, #fff) 50% 50%/calc(100% - 4px) calc(100% - 16px) no-repeat, linear-gradient(#fff, #fff) 50% 50%/calc(100% - 16px) calc(100% - 4px) no-repeat, linear-gradient(90deg, #294a97 0, #48abe0 100%);
    border-radius: 8px;
    padding: 6px;
    box-sizing: border-box
}

.bg_cta, .case8 .case8-box .hover-area .hover-heaer, .certified_logo_group, .patern_list li a, .pattern_img, .topItem {
    display: flex;
    display: flex
}

.tab_item .active {
    background: linear-gradient(45deg, #294a97, #4ae3f7);
    border-color: #fff
}

.our_client_logo img {
    width: 120px;
    margin: auto
}

.custom_dropdown .dropdown {
    padding: 10px !important;
    border-radius: 10px !important;
    background: #fff;
    border-top: 2px solid #60cdff;
    width: 100%;
    left: 0
}

.product_menus .dropdown {
    width: 100%;
    left: 0
}

.custom_dropdown .dropdown .list_item_data {
    padding: 0;
    list-style-type: none
}

.custom_dropdown .dropdown .list_item_data li {
    line-height: 35px
}

#vid {
    max-height: 580px
}

.img_box {
    padding: 10px;
    border: 1px solid gray;
    border-radius: 10px
}

.bg_cta {
    align-items: center;
    justify-content: center;
    background-image: url("../img/cta.jpg");
    background-size: cover;
    background-position: center;
    height: 250px;
    background-attachment: fixed;
    align-items: center;
    justify-content: center
}

.cta_box {
    background: #00000052;
    padding: 40px 20px;
    border-radius: 5px
}

.bg_img, .pattern_img {
    background-repeat: no-repeat
}

.primary_btn {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #fff;
    width: 150px
}

.secondary_btn {
    border-radius: 5px;
    border: 1px solid #fff;
    color: #fff;
    width: 150px
}

.points h5 {
    color: #2386ae;
    font-weight: 600;
    font-size: 20px
}

.commit img, .points img, .prod_sns button:hover p::before, .prod_sns button:hover::after, .scto_abut .heading__secnd, .testimonial-slide3 .testimonial-content {
    width: 100%
}

.points p {
    margin-bottom: 5px
}

.certified_logo_group {
    gap: 35px;
    margin-top: 8px;
    justify-content: end
}

.certified_logo_group .certif p {
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0
}

.certified_logo_group img {
    height: 70px;
    background: #fff;
    border-radius: 50%;
    padding: 10px
}

.case8 .case8-box .hover-area .hover-heaer, .topItem {
    align-items: center
}

.left_patern_img, .top_left_item {
    width: 60%
}

.top_left_item img {
    height: 145px
}

.top_right_item {
    width: 35%;
    padding: 0 30px 0 50px
}

.pattern_img img {
    border-radius: 0 5px 5px 0;
    height: 475px
}

.right_patern_item {
    width: 35%;
    padding: 0 70px 0 20px
}

.patern_list {
    padding: 0;
    list-style-type: none;
    margin: 0
}

.patern_list li {
    padding: 15px 20px;
    cursor: pointer;
    transition: .5s
}

.patern_list li:not(:last-child) {
    border-bottom: 1px solid #cfcfcf
}

.patern_list li a {
    font-size: 18px;
    justify-content: space-between
}

#next_c_btn, #prev_c_btn, .bg_img {
    display: flex;
    align-items: center
}

.patern_list li:hover {
    background: #004aad;
    transition: .5s;
    color: #fff
}

.bg_img {
    height: auto;
    background-size: cover;
    background-position: center;
    width: 100%
}

.content_box {
    width: 62%;
    display: flex;
    padding: 70px 40px 0 60px
}

#post-carousel .owl-stage {
    padding-left: 0 !important
}

#post-carousel .owl-nav {
    position: relative;
    top: 0;
    float: left;
    margin-right: 25px;
    width: 120px;
    margin-top: 0;
    left: -13px
}

#post-carousel .owl-nav button {
    height: 40px;
    width: 40px;
    border: 1px solid var(--btn-color-primary);
    border-radius: 100%;
    outline: 0
}

#empower-left-carousel .owl-dot span, #post-carousel .owl-dot span {
    width: 18.0275px;
    content: " ";
    height: 3px;
    float: left;
    display: inline-block;
    background-color: #004aad;
    cursor: pointer
}

#post-carousel .owl-nav button span {
    font-size: 40px;
    line-height: 34px
}

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

.post_box:hover img {
    transform: scale(1.5);
    transition: .5s
}

.number-block-one .figcaption-number, .post_box .post_img, .subscribe-wrapper {
    overflow: hidden
}

.post_box img {
    transition: .5s
}

.post_box p {
    margin: 0;
    font-weight: 500;
    font-size: 20px;
    color: gray
}

.post_box h4 {
    font-weight: 600;
    font-size: 20px
}

.post_section_heading {
    padding-left: 150px
}

.brand_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px
}

#post-carousel .owl-dots button {
    float: left
}

#post-carousel .owl-dot span {
    margin-top: 24px;
    -webkit-transition: background-color .3s cubic-bezier(.6, .04, .98, .34);
    -o-transition: background-color .3s cubic-bezier(.6, .04, .98, .34);
    -moz-transition: background-color .3s cubic-bezier(.6, .04, .98, .34);
    transition: background-color .3s cubic-bezier(.6, .04, .98, .34)
}

#post-carousel .owl-dot.active~*>span {
    background-color: #c3c5c6 !important;
    height: 1px;
    margin-top: 25px
}

.primary_bg {
    background: var(--btn-color-primary)
}

.footer_cta {
    position: relative;
    padding: 30px 50px 30px 0
}

.cta_clip_box {
    filter: drop-shadow(0px 2px 15px #a0a0a0);
    -webkit-filter: drop-shadow(0px 2px 15px #a0a0a0)
}

.footer_cta_img {
    position: absolute;
    left: 0;
    height: 290px;
    top: 50%;
    transform: translate(0, -16%);
    clip-path: polygon(0% 0%, 100% 0%, 76% 100%, 0% 100%);
    box-shadow: 10px 10px 10px gray
}

.footer_cta_img img {
    background-attachment: fixed
}

.footer_cta h5 {
    color: #fff;
    font-weight: 300;
    font-size: 40px;
    margin-bottom: 10px
}

.subscribe form {
    gap: 20px;
    margin: 20px 0
}

.subscribe form button {
    background: #3c6aff
}

.empower_container::before {
    content: "";
    height: 112%;
    width: 900px;
    background: #efefef;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, -10%)
}

#next_c_btn, #prev_c_btn {
    height: 50px;
    width: 50px;
    cursor: pointer;
    background: var(--btn-color-primary);
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    padding-bottom: 3px
}

#empower-left-carousel .owl-nav, #empower-right-carousel .owl-dots, #empower-right-carousel .owl-nav, .stepper-horizontal .step:last-child .step-bar-left, .stepper-horizontal .step:last-child .step-bar-right {
    display: none
}

#empower-left-carousel {
    box-shadow: 10px 10px 7px #00000139
}

#empower-left-carousel .owl-dots {
    position: absolute;
    right: 0;
    transform: translate(0, 50%)
}

.bg_certified {
    position: relative;
    width: 90%;
    margin-left: auto
}

.bg_certified::before {
    content: "";
    position: absolute;
    height: 390px;
    width: 100%;
    top: 0;
    right: -40px;
    background: var(--btn-color-primary);
    z-index: -1;
    transform: translate(0, -85%)
}

.certified_container {
    padding: 35px 35px 35px 75px
}

#empower-left-carousel .owl-dot span {
    margin-top: 15px;
    -webkit-transition: background-color .3s cubic-bezier(.6, .04, .98, .34);
    -o-transition: background-color .3s cubic-bezier(.6, .04, .98, .34);
    -moz-transition: background-color .3s cubic-bezier(.6, .04, .98, .34);
    transition: background-color .3s cubic-bezier(.6, .04, .98, .34)
}

#empower-left-carousel .owl-dot.active~*>span {
    background-color: #c3c5c6 !important;
    height: 1px;
    margin-top: 15px
}

#empower-left-carousel .owl-dot {
    outline: 0
}

.empower_data {
    padding-right: 20px
}

.empower_data a.text_btn {
    transform: translate(43px, 0);
    display: inline-block
}

.holderCircle {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    margin: 60px auto;
    position: relative
}

.contentCircle .CirItem, .dotCircle {
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0
}

.dotCircle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    border-radius: 100%;
    z-index: 20
}

.dotCircle .itemDot {
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    background: #fff;
    color: #7d4ac7;
    border-radius: 20px;
    text-align: center;
    line-height: 80px;
    z-index: 3;
    cursor: pointer;
    border: 2px solid #e6e6e6;
    font-size: 40px
}

.dotCircle .itemDot .forActive {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none
}

.dotCircle .itemDot .forActive::after {
    content: "";
    width: 5px;
    height: 5px;
    border: 3px solid #fff;
    bottom: -31px;
    left: -14px;
    filter: blur(1px);
    position: absolute;
    border-radius: 100%
}

.dotCircle .itemDot .forActive::before {
    content: "";
    width: 6px;
    height: 6px;
    filter: blur(5px);
    top: -15px;
    position: absolute;
    transform: rotate(-45deg);
    border: 6px solid #fff;
    right: -39px
}

.round {
    position: absolute;
    left: 40px;
    top: 45px;
    width: 410px;
    height: 410px;
    border: 2px dotted #fff;
    border-radius: 100%;
    -webkit-animation: 100s linear infinite rotation
}

.dotCircle .itemDot.active, .dotCircle .itemDot:hover {
    color: #fff;
    transition: .5s;
    background: #7d4ac7;
    background: -moz-linear-gradient(left, #7d4ac7 0, #a733bb 100%);
    background: -webkit-linear-gradient(left, #7d4ac7 0, #a733bb 100%);
    background: linear-gradient(to right, #7d4ac7 0, #a733bb 100%);
    border: 2px solid #fff;
    -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13);
    -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13);
    box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13)
}

.contentCircle {
    width: 250px;
    border-radius: 100%;
    color: #222;
    position: relative;
    top: 150px;
    left: 50%;
    transform: translate(-50%, -50%)
}

.contentCircle .CirItem {
    border-radius: 100%;
    color: #222;
    position: absolute;
    text-align: center;
    left: 0;
    opacity: 0;
    transform: scale(0);
    transition: .5s;
    font-size: 15px;
    width: 100%;
    height: 100%;
    line-height: 250px
}

.CirItem.active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: .5s
}

.contentCircle .CirItem i {
    font-size: 180px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -90px;
    color: #000;
    opacity: .1
}

.iq-features svg {
    height: 40px;
    width: 40px;
    vertical-align: middle
}

.iq-features svg path {
    stroke: #7d4ac7 !important
}

.dotCircle .itemDot:hover svg path, .itemDot.active svg path {
    stroke: #ffffff !important
}

@media only screen and (min-width:300px) and (max-width:599px) {
    .dotCircle, .holderCircle::after {
        width: 100%;
        height: 100%
    }

    .holderCircle {
        margin: 110px auto
    }

    .dotCircle {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto
    }
}

.title-box .title {
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
    z-index: -1
}

.title-box span {
    text-shadow: 0 10px 10px rgba(0, 0, 0, .15);
    font-weight: 800;
    color: #fff
}

.title-box p {
    font-size: 17px;
    line-height: 2em;
    color: #fff
}

.w-20 {
    width: 20%
}

.stepper-horizontal {
    display: table;
    width: 100%;
    margin: 0 auto
}

.stepper-horizontal .step {
    display: table-cell;
    position: relative;
    padding: 1.5rem;
    z-index: 2
}

.stepper-horizontal .step:first-child .step-bar-left {
    left: 0;
    margin-left: 2rem;
    width: calc(100% - -9rem)
}

.stepper-horizontal .step:first-child .step-bar-right {
    left: 0;
    margin-left: 2rem
}

.stepper-horizontal .step.done:nth-child(3) .step-bar-right, .stepper-horizontal .step:nth-child(3) .step-bar-left {
    width: calc(100% - .4rem)
}

.stepper-horizontal .step:last-child .step-circle {
    margin-right: 0
}

.cta .buttons, .stepper-horizontal .step:last-child .step-title {
    text-align: end
}

.stepper-horizontal .step .step-circle {
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    border-radius: 50%;
    text-align: center;
    line-height: 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    z-index: 2;
    border: 2px solid #ccc;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center
}

.stepper-horizontal .step.done .step-circle {
    background-color: var(--btn-color-primary);
    border: 2px solid var(--btn-color-primary);
    color: #fff
}

.stepper-horizontal .step .step-circle i {
    position: relative;
    z-index: 9;
    vertical-align: text-top;
    font-size: 30px
}

.stepper-horizontal .step.done .step-title {
    color: #000
}

.stepper-horizontal .step.active .step-circle {
    background: #ccc;
    border-color: var(--btn-color-primary);
    color: var(--btn-color-primary)
}

.step.active .step_box::after, .step_box {
    position: absolute;
    background: var(--btn-color-primary)
}

.stepper-horizontal .step.active .step-title {
    color: var(--btn-color-primary);
    text-decoration: underline
}

.stepper-horizontal .step .step-title {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
    display: none
}

.stepper-horizontal .step .step-optional, .stepper-horizontal .step .step-title {
    text-align: center;
    color: #999
}

.stepper-horizontal .step .step-optional {
    font-size: .75rem;
    font-style: italic;
    color: #ccc
}

.stepper-horizontal .step .step-bar-left, .stepper-horizontal .step .step-bar-right {
    position: absolute;
    top: calc(2rem + 14px);
    height: 5px;
    background-color: #ccc;
    border: solid #ccc;
    border-width: 2px 0
}

.stepper-horizontal .step .step-bar-left {
    width: calc(100% - 2rem);
    left: 50%;
    margin-left: 1rem;
    z-index: -1
}

.stepper-horizontal .step .step-bar-right {
    width: 0;
    left: 50%;
    margin-left: 1rem;
    z-index: -1;
    transition: width .5s ease-in-out
}

.stepper-horizontal .step.done .step-bar-right {
    background-color: var(--btn-color-primary);
    border-color: var(--btn-color-primary);
    z-index: 3;
    width: calc(100% - 2rem)
}

.stepper-horizontal .step.done:first-child .step-bar-right {
    width: calc(100% - -9rem)
}

.step.active .step_box::after {
    content: "";
    height: 25px;
    width: 25px;
    bottom: -7px;
    left: 10px;
    transform: rotate(45deg)
}

.step.active .step_box.dedicated::after {
    left: 95%
}

.step.active .step_box.industries::after {
    bottom: -7px;
    left: 10px
}

.step.active .step_box.projects::after {
    bottom: -7px;
    left: 430px
}

.step_box {
    padding: 20px;
    border-radius: 10px;
    display: none;
    transition: .5s;
    height: 400px;
    width: 700px
}

.step.active .step_box.industries {
    display: block;
    top: -100%;
    right: -100%;
    transform: translate(31%, -77%);
    transition: .5s
}

.step_box img {
    height: 180px;
    width: 100%
}

.step.active .step_box.employees {
    top: -100%;
    right: -100%;
    transform: translate(15.3%, -77%);
    transition: .5s
}

.step.active .step_box.projects {
    display: block;
    top: -100%;
    right: 10%;
    transform: translate(15%, -77%);
    transition: .5s
}

.step.active .step_box.dedicated {
    top: -100%;
    right: 0;
    transform: translate(-3.6%, -77%);
    transition: .5s
}

.step_box p {
    color: #fff;
    font-weight: 500;
    margin-bottom: 0;
    font-size: 20px
}

.stepperHeight {
    height: 570px;
    display: flex;
    align-items: end
}

.anim-icons, .overlay {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.hedpo {
    padding: 90px 0;
    background-size: cover;
    background-position: right;
    position: relative;
    z-index: 99
}

.hedpo .overlay, .hero-area-bg .overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, .63) 52.42%, rgba(40, 47, 53, 0) 100%);
    z-index: 9
}

.overlay {
    position: absolute;
    z-index: 90;
    transition: .4s
}

.hedpo::before {
    content: '';
    position: absolute;
    background: #000
}

.brdcr ul {
    padding-left: 0;
    margin-bottom: 10px
}

.brdcr li {
    list-style: none;
    display: inline-block
}

.brdcr li::after {
    content: '/';
    color: #fff;
    padding: 0 5px
}

.brdcr li:last-child::after {
    content: '/';
    display: none;
    color: #fff;
    padding: 0 15px
}

.brdcr li a {
    background: 0 0;
    color: #fff;
    border: none;
    padding: 0;
    font-size: 13px
}

.methed {
    position: relative;
    z-index: 999
}

.methed h1 {
    font-size: 48px;
    font-weight: 700;
    color: #fff
}

.methed p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px
}

.methed a {
    border: 1px solid #fff;
    font-weight: 500;
    padding: 13px 20px;
    border-radius: 3px;
    background: #dfdfdf
}

.methed a:hover {
    background: #f9f9f9;
    transition: .7s
}

.appnavi {
    background: #004aad;
    color: #fff
}

.appnavi ul {
    list-style: none;
    padding: 12px 0;
    margin-bottom: 0;
    width: 100%
}

.appnavi li {
    display: inline-block;
    margin-right: 18px;
    font-size: 13px;
    font-weight: 400
}

.appnavi li:last-child {
    float: right
}

.appnavi li a:hover {
    border-bottom: 1.5px solid #fff;
    transition: none
}

.about-section {
    position: relative;
    padding: 60px 0
}

.anim-icons {
    position: absolute;
    right: 0;
    max-width: 1170px;
    margin: 0 auto
}

.anim-icons .icon {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%
}

.bounce-y {
    -webkit-animation: 10s linear infinite bounce-y;
    animation: 10s linear infinite bounce-y
}

.shape-2 {
    width: 630px;
    height: 783px;
    top: -370px;
    left: 0;
    background-image: url(https://html.kodesolution.com/2024/transend-html/images/icons/shape-2.png);
    z-index: -1
}

.about-section .image-column, .testimonial-block-three .inner-box .content-box {
    position: relative;
    z-index: 1
}

.about-section .image-box {
    position: relative;
    display: inline-block;
    width: 100%
}

.about-section .image-box .image img {
    position: relative;
    max-width: 100%;
    width: 100%;
    z-index: 3;
    border-radius: 5px
}

.image-box img {
    border-radius: 5px
}

.overlay-anim:after {
    background: rgba(255, 255, 255, .3);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    opacity: 1;
    z-index: 9;
    pointer-events: none
}

.about-section .image-box .experience {
    position: absolute;
    border-radius: 5px;
    left: -64px;
    bottom: -45px;
    height: 170px;
    width: 170px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    z-index: 9
}

.about-section .image-box .bg_gry {
    background-color: #f7f7f7;
    padding: 10px
}

.about-section .image-box .experience strong {
    color: #fff;
    font-size: 48px;
    font-weight: 500
}

.about-section .image-box .experience img {
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)
}

.about-section .image-box .experience .text {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 10px
}

.sec-title .sub-title:after, .sec-title.style-two .sub-title:before {
    position: absolute;
    top: 50%;
    height: 3px;
    width: 20px;
    margin-top: -1px;
    content: ""
}

.about-section .content-column .inner-column {
    padding-left: 30px
}

.sec-title {
    position: relative;
    margin-bottom: 10px
}

.sec-title .sub-title {
    position: relative;
    color: #004aad;
    line-height: 22px;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 30px
}

.sec-title .sub-title:after {
    right: 100%;
    margin-right: 10px;
    background: #004aad
}

.sec-title h2 {
    position: relative;
    font-size: 26px;
    color: #000;
    font-weight: 600;
    margin-top: -5px;
    margin-bottom: 0
}

.about-section .content-column .inner-column .text2 {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px
}

.contact-section-three, .work-section {
    position: relative;
    padding: 60px 0
}

.shape-1 {
    width: 589px;
    height: 568px;
    top: 0;
    right: 0;
    background-image: url(https://html.kodesolution.com/2024/transend-html/images/icons/shape-1.png);
    z-index: -1
}

.work-section .sec-title {
    margin-bottom: 60px
}

.sec-title.style-two .sub-title:before {
    left: 100%;
    margin-left: 10px;
    background: #004aad
}

.feature-block .inner-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 50px
}

.feature-block .inner-box .icon-box {
    position: relative;
    margin-right: 20px
}

.feature-block .inner-box:hover .icon-box:before {
    background-color: #004aad
}

.feature-block .inner-box .icon-box:before {
    border: 1px solid #004aad;
    background-color: rgb(0 74 173 / 34%);
    border-radius: 50%;
    content: "";
    width: 90px;
    height: 90px;
    position: absolute;
    left: -15px;
    top: -10px;
    -webkit-transition: .3s;
    transition: .3s
}

.feature-block .inner-box .icon-box .icon {
    color: #004aad;
    font-size: 57px;
    border: 1px solid #004aad;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 95px;
    position: relative;
    text-align: center
}

.feature-block .inner-box .icon-box .icon img {
    max-width: 50%
}

.feature-block .inner-box .content-box .title {
    color: #000;
    margin-bottom: 4px;
    font-size: 18px
}

.feature-block .inner-box .content-box .text {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px
}

.work-section-three .bg-image {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.work-section-three .bg-image::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 63%);
    clip-path: polygon(0px 0, 75% 0, 70% 100%, 0% 100%)
}

.work-block-three .inner-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 50px 20px
}

.btn-style-two {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    padding: 15px 23px 15px 21px;
    border-radius: 27.5px;
    font-weight: 600;
    overflow: hidden;
    color: #fff;
    background: #004aad
}

.btn-style-two i {
    background-color: #fff;
    border-radius: 50%;
    color: #004aad;
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    text-align: center;
    -webkit-transition: .5s;
    transition: .5s
}

.work-block-three .inner-box .sec-title h2 {
    font-size: 23px;
    color: #fff
}

.work-block-three .inner-box .sec-title .text {
    font-size: 16px;
    padding-top: 5px;
    color: #fff
}

.why-choose-us {
    background-color: #f7f7f7;
    position: relative;
    padding: 60px 0
}

.shape-7 {
    width: 192px;
    height: 385px;
    top: 0;
    left: 0;
    background-image: url(../img/shape-7.png)
}

.shape-8, .testimonial-block-three .inner-box:before {
    height: 385px;
    width: 192px;
    background-image: url(../img/shape-8.png)
}

.shape-8 {
    bottom: 0;
    right: 0
}

.why-choose-us .content-column .inner-column .list-style-two {
    margin-bottom: 35px;
    padding-left: 0;
    margin-top: 10px
}

.why-choose-us .content-column .inner-column .list-style-two li {
    color: #191919;
    font-weight: 500;
    line-height: 36px
}

.list-style-two li {
    color: #191919;
    position: relative;
    font-size: 16px;
    line-height: 28px;
    padding-left: 27px;
    margin-bottom: 0;
    list-style: none
}

.list-style-two li:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "\f058";
    font-weight: 900;
    font-family: "font awesome 6 pro";
    color: #004aad
}

.client_logo {
    position: relative;
    padding: 60px 0 0
}

.client_logo .clt_logo {
    background: linear-gradient(180deg, #edf0f4 0, rgba(237, 240, 244, 0) 100%);
    padding: 20px 30px;
    border-radius: 14px;
    border: 1px solid #dfdfdf
}

.testimonial-block-three .inner-box {
    background-color: #f7f7f7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 50px;
    position: relative;
    overflow: hidden
}

.testimonial-block-three .inner-box:before {
    content: "";
    position: absolute;
    left: -50px;
    top: -69px;
    background-position: left center;
    background-repeat: no-repeat
}

.testimonial-block-three .inner-box .image-box {
    margin-right: 30px;
    position: relative;
    z-index: 1
}

.testimonial-block-three .inner-box .image-box .image {
    width: 120px;
    height: 120px
}

.testimonial-block-three .inner-box .content-box span {
    color: #004aad;
    font-size: 14px;
    width: 500px
}

.testimonial-block-three .inner-box .content-box .text {
    margin-top: 9px;
    margin-bottom: 20px;
    font-size: 14px
}

.faq-area10 {
    background-color: #eff1f9;
    padding: 30px 0 0;
    position: relative
}

.faq-area10 .testim {
    padding: 0 0 30px
}

.shape-mockup {
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 9
}

.highz {
    z-index: 99;
    position: relative
}

.contact6-box .heading, .faq10-image img {
    width: 90%
}

.testim .card-header {
    background: #004aad
}

.contact-form-two:before, .contact-section-three:after {
    position: absolute;
    height: 100%;
    background-position: center;
    background-size: cover;
    top: 0
}

.contact-form-two:before, .contact-section-three:after, .hero-area-bg::before {
    content: "";
    background-repeat: no-repeat
}

.testim .card-header button {
    color: #fff;
    padding: 0;
    text-align: left
}

.contact-section-three:after {
    background-image: url(https://html.kodesolution.com/2024/sotech-html/images/icons/shape-tm-12.png);
    right: 0;
    width: 100%;
    z-index: -1
}

.contact-section-three .content-column .inner-column {
    position: relative;
    padding-left: 25px
}

.contact-section-three .content-column .call-info-box-outer {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.contact-section-three .content-column .call-info-box-outer .call-info-box-text {
    margin-right: 15px
}

.contact-section-three .content-column .call-info-box-outer .call-info-box-text span {
    color: #3e3e4b;
    font-size: 16px;
    font-weight: 500
}

.blog .blog_des .learn a, .contact-section-three .content-column .call-info-box-outer .call-info-box-text p i, .prd_pnts li i {
    color: #004aad
}

.contact-section-three .content-column .call-info-box {
    background-color: #fff;
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
    position: relative;
    padding: 15px 20px;
    display: inline-block
}

.contact-section-three .content-column .call-info-box .icon {
    background-color: #336aea;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    margin-right: 7px
}

.contact-form-two {
    background-color: #336aea;
    border-radius: 20px;
    padding: 25px 30px;
    position: relative;
    z-index: 9
}

.contact-form-two:before {
    border-radius: 20px;
    left: 0;
    width: 100%;
    background-image: url(https://html.kodesolution.com/2024/sotech-html/images/icons/bg-shape-tm-5.png);
    z-index: -9
}

.about9 .cs_case_study.cs_style_1 .cs_case_study_category, .contact-form-two .title-box, .mb-15, .testimonial-slide3 .testimonial-content .rating-image {
    margin-bottom: 15px
}

.contact-form-two .title-box h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 7px
}

.contact-form-two .title-box .sub-title {
    color: #fff;
    font-weight: 400
}

.contact-form-two .form-group {
    position: relative;
    margin-bottom: 20px
}

.contact-form-two .form-group .select2-container--default .select2-selection--single, .contact-form-two .form-group input:not([type=submit]), .contact-form-two .form-group select, .contact-form-two .form-group textarea {
    position: relative;
    display: block;
    height: 45px;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    color: #222429;
    line-height: 32px;
    font-weight: 400;
    background-color: #fff;
    border: 2px solid #f2f3f6;
    border-radius: 5px;
    margin-bottom: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.contact-form-two .form-group textarea {
    height: 161px;
    resize: none
}

.contact-form-two .form-group button, .contact-form-two .form-group input[type=submit] {
    margin-top: 0;
    width: 100%;
    display: block;
    padding: 15px 30px;
    line-height: 14px;
    border: none;
    color: #fff;
    font-size: 16px
}

.contact-form-two .btn-style-one {
    font-size: 14px
}

.menu___bar {
    position: relative;
    z-index: 9999 !important
}

@keyframes bounce-y {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
}

#myDiv {
    top: 10px;
    left: 10px;
    z-index: 1000
}

.brdcrm {
    background: #e9ecef
}

.hero-area-bg {
    padding-top: 0;
    position: relative
}

.hero-area-bg::before {
    position: absolute;
    margin: auto;
    z-index: 0;
    right: 0;
    width: 100%;
    height: -webkit-fill-available;
    background-image: linear-gradient(to right, #000, #fff);
    /* opacity: .5 */
    background: linear-gradient(90deg, rgba(0, 0, 0, .63) 52.42%, rgba(40, 47, 53, 0) 100%);
}

.hero-area {
    /* min-height: 80vh; */
    padding: 90px 0;
    overflow: hidden;
    display: flex;
    align-items: start;
    background-size: cover;
    z-index: -9
}

.hero-area-bg_new::after {
    content: '';
    height: fit-content;
    position: absolute;
    background: #000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%
}

.number-block-three .figcaption-number, .number-block-two .figcaption-number {
    right: 20px;
    -webkit-text-stroke-width: 1px;
    -ms-text-stroke-width: 1px;
    -moz-text-stroke-width: 1px;
    -o-text-stroke-width: 1px
}

.hero-area-bg .container .contents {
    /* margin: 4rem 0 3rem */
    margin-bottom: .5rem;
}

.hero-area-bg .container .contents .hedop {
    margin-bottom: .5rem;
}

.hero-area-bg .container .contents .head-title {
    font-size: 50px;
    color: #fff;
    font-weight: 800;
    margin-bottom: .5rem
}

.hero-area .container .contents .description {
    color: #fff;
    font-size: 16px;
    font-weight: 400
}

.hero-area .container .join-us button {
    font-size: 16px;
    padding: 1rem 2rem;
    border: 1px solid #fff;
    font-weight: 500;
    padding: 13px 20px;
    border-radius: 3px;
    background: #dfdfdf;
    color: #000;
}

.hero-area .container .join-us button:hover {
    background: #f9f9f9;
    transition: .7s;
}

.cons_erp {
    background-image: url(../img/construction-erp-software.webp)
}

.hrms_erp {
    background-image: url(../img/hrms-software.webp)
}

.iot_teematic {
    background-image: url(../img/iot-telematics-devices-banner.webp)
}

.solution_finance {
    background-image: url(../img/solution-for-finance-banner.webp)
}

.telematic_solution {
    background-image: url(../img/telematics-solution-banner-1.webp)
}

.business-automation {
    background-image: url(../img/business-automation-solutions-bg.webp);
}

.solid-action-btn {
    background-color: #2a3478;
    color: #fff;
    border: none;
    padding: .35rem 1rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, .13);
    border-radius: 45px;
    font-size: 18px;
    font-weight: 500
}

/* .hero-area-bg::after {
    content: "";
    position: absolute;
    top: 1%;
    margin: auto;
    z-index: 1;
    left: 0;
    width: 270px;
    height: 330px;
    background-image: url(../img/vector1.png);
    background-repeat: no-repeat;
    animation: 3s ease-in-out fadeUp
} */

.hero2::after, .shape-animaiton4 {
    animation-timing-function: linear
}

.hero-area .floating-elements .background {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.hero-area .floating-elements .background li:first-child {
    top: 20vh;
    left: 9vw;
    padding: 8px 20px;
    border-radius: 25px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    background-color: #fff;
    z-index: 2;
    animation: 3s ease-in-out infinite floating
}

.hero-area .floating-elements .background li {
    position: absolute;
    list-style: none;
    display: flex;
    align-items: center
}

.hero-area .floating-elements .background li:nth-child(2) {
    top: 20vh;
    left: 75vw;
    animation: 4s ease-in-out infinite floating
}

.hero-area .floating-elements .background li:nth-child(3) {
    top: 70vh;
    left: 20vw;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    animation: 2s ease-in-out infinite floating
}

.hero-area .floating-elements .background li:nth-child(4) {
    top: 65vh;
    left: 25vw;
    animation: 5s ease-in-out infinite floating
}

.hero-area .floating-elements .background li:nth-child(5) {
    top: 50vh;
    left: 80vw;
    padding: 8px 20px;
    border-radius: 25px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    background-color: #fff;
    animation: 3s ease-in-out infinite floating;
    z-index: 2
}

.hero-area .floating-elements .background li:first-child img {
    width: 35px;
    margin-left: 5px
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: scale(.9)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes floating {
    0%, 100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, 15px)
    }
}

.pbmit-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.pbmit-heading-subheading-style-1 {
    margin-bottom: 45px
}

.pbmit-element-service-style-5 {
    padding-top: 0;
    padding-bottom: 40px
}

.height {
    height: 600px;
    background-color: #dfdfdf
}

.crm-featur-nav {
    /* padding: 40px 0; */
    box-sizing: border-box;
    z-index: 5;
    opacity: 1;
    transition: opacity .3s;
    will-change: opacity;
}

.pbmit-heading-subheading-style-1 {
    position: relative;
    box-shadow: 0 5px 3px rgba(187, 188, 189, .8);
    padding: 20px;
    background: #fff;
    /* z-index: 999; */
}

.pbmit-heading-subheading-style-1::before {
    position: absolute;
    right: -23px;
    bottom: -23px;
    content: "";
    height: 100%;
    width: 100%;
    border-right: 22px solid #1d2027;
    border-bottom: 22px solid #1d2027;
    /* z-index: 1; */
    opacity: .06;
}

.crm-featur-nav ul {
    position: relative;
    margin-bottom: 25px;
    padding-left: 0;
    padding-top: 0;
}

.pbmit-sticky .crm-featur-nav ul {
    /* border-right: 1px solid #ddd; */
    gap: 8px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
}

.crm-featur-nav ul li:first-child {
    font-weight: 500;
    color: #2a3478;
    cursor: default
}

.crm-featur-nav ul li {
    list-style-type: none;
    padding: 3px 0;
    cursor: pointer;
    color: #191919
}

.crmbadge-txt {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    background: #20abb1;
    border-radius: 20px;
    padding: 4px 12px 5px;
    margin-bottom: 10px;
    display: inline-block
}

.crm-hub-container h2 {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 32px
}

.crm-hub-container .crm-heads {
    color: #1a1a1a;
}

.crm-hub-container p {
    font-weight: 500;
    font-size: 16px;
}

.crmhub-img {
    width: 100%;
    -webkit-box-shadow: 0 10px 15px -6px rgba(119, 119, 119, .4);
    -moz-box-shadow: 0 10px 15px -6px rgba(119, 119, 119, .4);
    box-shadow: 0 10px 15px -6px rgba(119, 119, 119, .4);
    border-radius: 5px;
    margin-bottom: 50px
}

.hub-lrn {
    color: #0067ff;
    font-weight: 500;
    position: relative;
    padding-right: 9px;
    display: inline-block
}

.crm-featur-nav-shad {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    display: none;
}

.ftrs-nav {
    cursor: pointer;
    padding: 10px;
    transition: background-color .3s;
    padding: 8px 10px !important;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid #e7e7e7 !important;
    border-radius: 6px;
}

.blog, .commit {
    padding: 30px 0;
    background-size: cover
}

.ftrs-nav.activecls {
    background: #004aad;
    border: none;
    /* border-radius: 0px; */
    margin: 0px;
    display: block;
    color: #fff !important;
    cursor: default;
    border-color: #004aad !important;
}

.ftrs-nav.activecls::before {
    content: '';
    /* display: inline-block;
    width: 2px;
    height: 25px;
    background: #2a3478;
    position: absolute;
    left: -10px */
    position: absolute;
    /* top: 13px; */
    right: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #004aad;
    display: block;
    width: 0;
    display: none
}

.srlcrm {
    margin-top: 10px;
    border-bottom: 1px dashed #8f8f8f;
    margin-bottom: 30px
}

.pbmit-element-service-style-5 ul li {
    font-weight: 400;
    color: #191919;
    cursor: default;
    list-style: url(../img/icon-list.png);
    background-size: auto
}

.pbmit-element-service-style-5 ul li:first-child {
    font-weight: 400;
    color: #191919
}

.pbmit-element-service-style-5 ul {
    padding-left: 26px
}

.blog {
    background-image: url(../img/bg16.png)
}

.blog .blog_des {
    box-shadow: 5px 5px 15px #dfdfdf
}

.blog .blog_des h3 {
    padding: 12px 10px 0;
    font-size: 24px;
    color: #000;
    margin-bottom: 0;
    font-weight: 500
}

.blog .blog_des .learn {
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px 12px
}

.blog .blog_des .learn i {
    font-size: 11px;
    margin-left: 10px
}

.blog .blog_des p {
    font-size: 14px;
    margin-bottom: 0;
    padding: 12px
}

.heading_tittle h2 {
    display: block;
    font-size: 24px;
    font-weight: 700
}

.commit .commit_suc p, .heading_tittle p {
    font-size: 16px
}

.commit {
    position: relative;
    background-image: url(../img/bg6.jpg)
}

.commit .commit_suc {
    position: absolute;
    width: 100%;
    left: -20%;
    top: 10%;
    background: #fff;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #eaeaea
}

.commit .commit_suc h3 {
    font-weight: 700;
    color: #000
}

.commit .commit_suc a {
    background: #004aad;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 500
}

.blur-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    overflow: auto;
    animation-name: fadeIn;
    animation-duration: .3s;
    z-index: 1000
}

.blur-overlay .dialog-box {
    background-image: url(../img/bg6.jpg);
    background-size: cover;
    margin: 0 auto;
    width: 700px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .24);
    animation-name: fadeUp;
    animation-duration: .5s;
    z-index: 10000;
    padding: 16px 25px
}

.und_blog, .und_blog:hover {
    margin-bottom: 15px;
    padding: 15px
}

.blur-overlay .dialog-box .head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.blur-overlay .dialog-box .head .close {
    padding: 0 8px;
    cursor: pointer
}

.fa-times {
    font-size: 1.5em;
    color: #3e1a51
}

.blur-overlay .dialog-box .content {
    margin: 1rem 0
}

.prd_pnts ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-weight: 500
}

.prd_pnts li {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 15px;
    color: #000
}

.hero-area .contact-form-two {
    background-color: #ffffff4f;
    border-radius: 10px;
    padding: 15px;
    z-index: 99;
    backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2);
    text-align: center;
    position: relative;
    transition: .2s ease-in-out
}

.hero-area .contact-form-two .title-box h3 {
    color: #000;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 7px
}

.hero-area .contact-form-two .title-box .sub-title, .text {
    color: #000;
    font-weight: 400
}

.hero-area .contact-form-two input, .hero-area .contact-form-two select {
    height: 40px !important;
    border-radius: 2px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border: 1px solid #f2f3f6 !important
}

.hero-area .contact-form-two textarea {
    width: 100% !important;
    border-radius: 2px !important;
    padding: 15px 12px !important;
    font-size: 14px !important;
    border: 1px solid #f2f3f6 !important;
    height: 120px !important
}

.und_blog span {
    background: #004aad;
    color: #fff;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 100px;
    margin-top: 30px;
    position: absolute;
    bottom: 46%;
    left: 10px
}

.client img, .testimonial-slide3 {
    background: #fff;
    border-radius: 5px
}

.und_blog h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 15px
}

.und_blog p {
    font-weight: 400;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.und_blog {
    box-shadow: inset 0 0 8px #dfdfdf;
    background: #fff
}

.und_blog:hover {
    transition: 2s ease-in;
    box-shadow: 5px 5px 15px #dfdfdf
}

.pstr_img .post_img img {
    aspect-ratio: 3/2
}

.client img {
    padding: 5px
}

.clnt_atc {
    padding: 50px 0
}

.home_clnt_atc {
    padding: 20px 0 !important
}

.testim .owl-carousel .item {
    transition: transform .3s, filter .3s;
    margin: 35px 0
}

.testim .owl-carousel .item img {
    width: 100%;
    display: block
}

.testim .owl-item.center .item {
    transform: scale(1.1);
    filter: blur(0);
    z-index: 1;
    box-shadow: 0 0 25px #bcbcbc
}

.testim .owl-item:not(.center) .item {
    transform: scale(.9);
    filter: blur(3px);
    z-index: 0
}

.testim {
    overflow: hidden;
    padding: 30px 0
}

.testimonial-slide3 {
    padding: 0
}

.testimonial-slide3::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: #fff;
    position: absolute;
    transform: scaleX(.75) rotate(45deg);
    border-width: 0;
    box-sizing: content-box;
    top: 46%;
    left: 8%
}

.testimonial-slide3 .testimonial-footer {
    width: 100%;
    background: #e8e9eb;
    padding: 10px 25px;
    display: flex;
    gap: 20px;
    align-items: center
}

.testimonial-slide3 .testimonial-content p {
    color: #000;
    margin-bottom: 0;
    padding: 25px;
    font-size: 14px;
    font-weight: 400
}

.testimonial-slide3 .testimonial-footer .author-image {
    width: 70px;
    margin-right: 0
}

.testimonial-footer .rating-image img {
    width: 40%;
    border-radius: 5px;
    float: right;
    mix-blend-mode: multiply
}

.testimonial-slide3 .testimonial-footer .author-image img {
    border-radius: 5%
}

.testimonial-slide3 .testimonial-footer .author-info {
    margin-top: 0;
    width: 60%
}

.testimonial-slide3 .testimonial-footer .rating-image {
    position: absolute;
    right: 10px
}

.testimonial-slide3 .testimonial-footer .author-info h3 {
    font-size: 16px;
    margin: 0 0 4px;
    color: #000
}

.testimonial-slide3 .testimonial-footer .author-info p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 20px
}

.testimoinal-layout3-slider .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 30px;
    margin-bottom: 30px
}

.testimoinal-layout3-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--secondary-color);
    opacity: 1;
    transition: .3s ease-in-out;
    margin: 0 5px
}

.number-block-one .figcaption, .number-block-one .figcaption:after, .number-block-three .figcaption {
    -webkit-transition: .5s linear;
    -moz-transition: .5s linear;
    -ms-transition: .5s linear;
    -o-transition: .5s linear
}

.testimoinal-layout3-slider .swiper-pagination .swiper-pagination-bullet-active {
    background: #6590cc
}

.case10 .case-box, .heading_tittle {
    margin-bottom: 30px;
    position: relative
}

.heading_tittle h4 {
    font-size: 32px;
    margin-bottom: 0;
    font-weight: 700;
    color: #000
}

.heading10 h2, .heading9 h2 {
    color: #180d03;
    line-height: 48px;
    font-style: normal
}

.number-block-one-outer [class*=col-]:nth-child(2) .number-block-one {
    margin-top: 30px
}

.number-block-one-outer [class*=col-]:nth-child(3) .number-block-one {
    margin-top: 60px
}

.number-block-one .figcaption, .number-block-three .figcaption {
    position: relative;
    transition: .5s linear
}

.number-block-one .figcaption:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -24px;
    background-color: #000;
    width: 2px;
    height: 24px;
    transition: .5s linear
}

.number-block-one .figcaption-number span {
    font-size: 42px;
    line-height: 42px;
    height: 36px;
    font-weight: 600;
    margin-top: 50px;
    display: block
}

.number-block-one:hover .figcaption, .number-block-three:hover .figcaption, .number-block-two:hover .figcaption {
    -webkit-box-shadow: 0 10px 30px 0 rgba(50, 50, 50, .16);
    box-shadow: 0 10px 30px 0 rgba(50, 50, 50, .16)
}

.number-block-one:hover .figcaption:after {
    height: 48px;
    bottom: -48px
}

@media only screen and (max-width:991px) {
    .number-block-one-outer [class*=col-]:nth-child(2) .number-block-one, .number-block-one-outer [class*=col-]:nth-child(3) .number-block-one {
        margin-top: 0
    }
}

@media only screen and (max-width:767px) {
    .number-block-one-outer [class*=col-]:nth-child(2) .number-block-one, .number-block-one-outer [class*=col-]:nth-child(3) .number-block-one {
        margin-top: 0
    }

    .number-block-one-outer [class*=col-]:nth-child(3) {
        margin-bottom: 0
    }
}

@media only screen and (max-width:640px) {
    .number-block-one .figcaption-number span {
        font-size: 50px;
        line-height: 50px;
        height: 46px
    }
}

.animate-in-to-top:hover .animate-in-to-top-content {
    -webkit-animation: .7s cubic-bezier(.25, .46, .45, .94) both animate-in-to-top-content;
    animation: .7s cubic-bezier(.25, .46, .45, .94) both animate-in-to-top-content
}

@-webkit-keyframes animate-in-to-top-content {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1
    }
}

@keyframes animate-in-to-top-content {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1
    }
}

.number-block-two .figcaption {
    position: relative;
    z-index: 1;
    -webkit-transition: .5s linear;
    -moz-transition: .5s linear;
    -ms-transition: .5s linear;
    -o-transition: .5s linear;
    transition: .5s linear
}

.number-block-two .figcaption:after {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0;
    top: 0;
    height: 2px;
    width: 0;
    z-index: -1;
    background-color: #d7b39a;
    transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    -o-transition: .4s
}

.number-block-two:hover .figcaption:after {
    width: 100%;
    left: 0;
    -webkit-transition: width .3s;
    transition: width .3s;
    z-index: -1
}

.number-block-two .figcaption:before {
    content: '';
    position: absolute;
    right: 100%;
    bottom: 0;
    height: 2px;
    width: 0;
    z-index: -1;
    background-color: #d7b39a;
    transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    -o-transition: .4s
}

.number-block-two:hover .figcaption:before {
    width: 100%;
    right: 0;
    -webkit-transition: width .3s;
    transition: width .3s;
    z-index: -1
}

.number-block-two .figcaption-number {
    overflow: hidden;
    position: absolute;
    bottom: 20px;
    opacity: .1;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    -ms-text-fill-color: rgba(0, 0, 0, 0);
    -moz-text-fill-color: rgba(0, 0, 0, 0);
    -o-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-text-stroke-color: #000;
    -ms-text-stroke-color: #000;
    -moz-text-stroke-color: #000;
    -o-text-stroke-color: #000
}

.number-block-two .figcaption-number span {
    font-size: 40px;
    line-height: 40px;
    font-weight: 600;
    display: block
}

.number-block-three .figcaption:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000;
    width: 0;
    height: 2px;
    -webkit-transition: .5s linear;
    -moz-transition: .5s linear;
    -ms-transition: .5s linear;
    -o-transition: .5s linear;
    transition: .5s linear
}

.prod_sns .owl-nav .owl-next, .prod_sns .owl-nav .owl-prev {
    background: #004aad !important;
    top: 35%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute
}

.number-block-three .figcaption-number {
    overflow: hidden;
    position: absolute;
    top: -73px;
    opacity: .5;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.5);
    -ms-text-fill-color: rgba(0, 0, 0, 0.5);
    -moz-text-fill-color: rgba(0, 0, 0, 0.5);
    -o-text-fill-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke-color: #fff;
    -ms-text-stroke-color: #fff;
    -moz-text-stroke-color: #fff;
    -o-text-stroke-color: #fff
}

.number-block-three .figcaption-number span {
    font-size: 60px;
    line-height: 60px;
    font-weight: 600;
    display: block
}

.number-block-three:hover .figcaption:after {
    width: 100%;
    right: 0
}

.slide-ani-top:hover .animate-top-content {
    -webkit-animation: .5s cubic-bezier(.25, .46, .45, .94) alternate-reverse both slide-ani-top;
    animation: .5s cubic-bezier(.25, .46, .45, .94) alternate-reverse both slide-ani-top
}

@-webkit-keyframes slide-ani-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

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

@keyframes slide-ani-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

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

.galy, .prod_sns {
    padding: 50px 0;
    background-image: url(../img/servicecardbg.png);
    background-size: auto
}

.prod_sns .owl-nav .owl-prev {
    left: -6%
}

.prod_sns .owl-nav .owl-next span, .prod_sns .owl-nav .owl-prev span {
    font-size: 56px;
    line-height: 26px;
    color: #fff;
    font-weight: 200
}

.prod_sns .owl-nav .owl-next {
    right: -6%
}

.prod_sns button::after, .prod_sns button::before {
    background: 0 0 !important
}

.prod_sns .owl-nav .owl-next:focus, .prod_sns .owl-nav .owl-prev:focus {
    outline: 0 !important
}

.log_prd {
    background: #fff;
    border-radius: 8px;
    text-align: center;
    padding: 10px 10px 20px;
    box-shadow: 0 0 5px #dfdfdf
}

.log_prd::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(https://html.kodesolution.com/2024/sotech-php/images/icons/bg-shape-tm-5.png);
    background-repeat: no-repeat;
    z-index: -9;
    overflow: hidden;
    background-size: cover
}

.log_prd:hover:before {
    height: 100%
}

.log_prd:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

.log_prd::before {
    position: absolute;
    z-index: -9;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: #004aad;
    content: "";
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.log_prd:hover .log_dtls a, .log_prd:hover .log_dtls button, .log_prd:hover .log_dtls h5, .log_prd:hover .log_dtls p {
    color: #fff;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.log_prd img {
    margin: 0 auto 10px;
    width: 180px !important;
    height: 180px;
    background: #fff;
    border-radius: 50%;
    padding: 15px
}

.log_prd .log_dtls h5 {
    font-size: 18px;
    font-weight: 600;
    color: #202020
}

.log_prd .log_dtls p {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 24px
}

.log_dtls .learn-more span, .prod_sns button {
    --primary-color: #111;
    --hovered-color: #004aad;
    font-weight: 600;
    gap: .5rem;
    margin: 0 auto
}

.prod_sns button {
    padding: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    position: relative;
    display: flex;
    font-size: 16px;
    align-items: center
}

.prod_sns button p {
    margin: 0;
    position: relative;
    font-size: 20px;
    color: var(--primary-color)
}

.prod_sns button::after {
    position: absolute;
    content: "";
    width: 0;
    left: 0;
    bottom: 0;
    background: var(--hovered-color);
    height: 2px;
    transition: .3s ease-out
}

.prod_sns button p::before {
    position: absolute;
    content: "Subscribe";
    width: 0%;
    inset: 0;
    color: var(--hovered-color);
    overflow: hidden;
    transition: .3s ease-out
}

.prod_sns button:hover svg {
    transform: translateX(4px);
    color: var(--hovered-color)
}

.prod_sns button svg {
    color: var(--primary-color);
    transition: .2s 0.2s;
    position: relative;
    width: 15px
}

.log_dtls .learn-more span {
    align-items: center
}

.sp {
    padding: 30px 0
}

.heading10 span.span, .heading9 span.span {
    font-size: 16px;
    font-weight: 400;
    color: #004aad;
    padding-left: 65px
}

.heading9 .titl span::after {
    content: '';
    display: block;
    width: 10%;
    height: 2px;
    background-color: #004aad;
    position: absolute;
    top: 13px
}

.heading10 .titl span::before, .heading9 .titl span::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #004aad;
    position: absolute;
    top: 9px;
    left: 55px;
    border-radius: 50%;
    animation: 1.5s infinite alternate zumpX
}

.heading9 span.span img {
    transform: translateY(-2px)
}

.heading9 h2 {
    font-size: 38px;
    font-weight: 600
}

.heading10 .titl span::after {
    content: '';
    display: block;
    width: 4.4%;
    height: 2px;
    background-color: #004aad;
    position: absolute;
    top: 13px
}

.heading10 h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 0
}

.space16 {
    height: 16px
}

.heading9 p {
    color: #5b5855;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.about9 .counter-box {
    margin-top: 30px;
    text-align: center
}

.about9 .counter-box h3 {
    color: var(--Text-Color, #181818);
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px
}

.about9 .counter-box p {
    color: #646375;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    padding-top: 0
}

.space30 {
    height: 30px
}

.theme-btn16 {
    display: inline-block;
    padding: 10px 10px 10px 15px;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    border-radius: 111px;
    position: relative;
    z-index: 2;
    border: none;
    overflow: hidden;
    transition: .4s
}

.theme-btn16::after, .theme-btn16::before {
    top: 0;
    border-radius: 111px;
    height: 100%;
    width: 100%
}

.theme-btn14 .arrow1, .theme-btn16 .arrow1 {
    transition: .4s;
    opacity: 1
}

.theme-btn16 span {
    display: inline-block;
    transform: rotate(-45deg) translateX(0);
    font-size: 16px
}

.theme-btn14 .arrow2, .theme-btn16 .arrow2 {
    transform: translateY(-8px) rotate(-45deg) translateX(-52px);
    transition: .4s;
    opacity: 0
}

.theme-btn16::after {
    content: "";
    position: absolute;
    left: 0;
    background: #004aad;
    z-index: -2
}

.hero2::after, .theme-btn16::before {
    position: absolute;
    z-index: -1;
    content: ""
}

.theme-btn16:hover {
    transition: .4s;
    transform: translateY(-5px);
    color: #fff
}

.theme-btn16:hover::before {
    width: 100%;
    transition: .4s;
    left: 0;
    right: auto;
    transform: rotateY(0);
    opacity: 1
}

.theme-btn16::before {
    left: auto;
    right: 0;
    background: #1e73e5;
    transform: rotateY(90deg);
    transition: .4s;
    opacity: 0
}

.about9 .cs_case_study_thumb, .about9 .cs_case_study_thumb.cs_case_study_thumb3, .nw_bg {
    background-size: cover;
    background-position: center
}

.theme-btn14:hover .arrow1, .theme-btn16:hover .arrow1 {
    transition: .4s;
    transform: translateY(-7px) rotate(-45deg) translateX(45px);
    opacity: 0
}

.theme-btn14:hover .arrow2, .theme-btn16:hover .arrow2 {
    transform: translateY(-15px) rotate(-45deg) translateX(-21px);
    transition: .4s;
    opacity: 1
}

.about9 .cs_case_study_1_list {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.about9 .cs_case_study_1_list>.cs_case_study.cs_style_1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.about9 .cs_case_study_1_list .cs_case_study.cs_style_1 {
    min-height: 400px
}

.about9 .cs_case_study_1_list .cs_case_study.cs_style_1 .cs_case_study_in {
    -webkit-transition: .2s;
    transition: .2s;
    left: 80px;
    opacity: 0
}

.about9 .cs_case_study_1_list .cs_case_study.cs_style_1.active {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3
}

.about9 .cs_case_study_1_list .cs_case_study.cs_style_1.active .cs_case_study_in {
    opacity: 1;
    left: 0;
    -webkit-transition: .6s 0.3s;
    transition: .6s 0.3s
}

.about9 .cs_case_study_1_list .cs_case_study.cs_style_1.active .cs_case_study_icon {
    -webkit-transform: scale(0) rotate(360deg);
    transform: scale(0) rotate(360deg);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.about9 .cs_case_study.cs_style_1 {
    height: 700px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    -webkit-transition: .4s;
    transition: .4s
}

.about9 .cs_case_study.cs_style_1 .cs_case_study_title a {
    text-decoration: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 3px
}

.about9 .cs_case_study.cs_style_1 .cs_case_study_number {
    left: 70px;
    top: 70px;
    z-index: 1
}

.about9 .cs_case_study.cs_style_1 .cs_case_study_thumb {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0
}

.about9 .cs_case_study.cs_style_1 .cs_case_study_in {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 88px 72px
}

.about9 .cs_case_study.cs_style_1 .cs_case_study_icon {
    left: 70px;
    bottom: 86px;
    z-index: 1;
    background-color: #4f4747;
    color: #fff;
    height: 55px;
    width: 55px;
    font-size: 20px;
    -webkit-transition: .6s;
    transition: .6s
}

@media (max-width:1400px) {
    .about9 .cs_case_study.cs_style_1 {
        height: 600px
    }

    .about9 .cs_case_study.cs_style_1 .cs_case_study_in {
        padding: 50px
    }

    .about9 .cs_case_study.cs_style_1 .cs_case_study_icon {
        left: 40px;
        bottom: 50px
    }
}

@media (max-width:767px) {
    .about9 .cs_case_study_1_list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .about9 .cs_case_study_1_list .cs_case_study.cs_style_1 .cs_case_study_in {
        left: 0;
        opacity: 1
    }

    .about9 .cs_case_study.cs_style_1 .cs_case_study_number {
        left: 30px;
        top: 40px
    }

    .about9 .cs_case_study.cs_style_1 .cs_case_study_in {
        padding: 30px
    }

    .about9 .cs_case_study.cs_style_1 .cs_case_study_icon {
        display: none
    }
}

.about9 .cs_case_study_thumb {
    background-image: url(../img/watsoo.webp);
    background-repeat: no-repeat
}

.about9 .cs_case_study_thumb.cs_case_study_thumb2 {
    background-image: url(../img/watsoo-iot-manufacturer.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.about9 .cs_case_study_thumb.cs_case_study_thumb3 {
    background-image: url(../img/watsoo-iot.webp);
    background-repeat: no-repeat
}

.about9 .cs_case_study.cs_style_1.cs_hover_active {
    margin: 0 12px;
    border-radius: 8px;
    height: 500px
}

.industris-slider1, .industris-slider2 {
    margin-top: 40px
}

.industris-slider1 .single-slider, .industris-slider2 .single-slider {
    text-align: center;
    display: flex;
    justify-content: center
}

.fintech {
    background-image: url(../img/banner-fintech.jpg);
    background-size: cover;
    min-height: 670px;
    background-attachment: fixed;
    padding: 50px
}

.fintech .fint_cont {
    background: #fff;
    padding: 20px;
    border-radius: 5px
}

.hero2::after, .nw_bg {
    background-repeat: no-repeat
}

.contact6-box {
    margin-bottom: 8px;
    background-color: #f5f6f9;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    align-items: center;
    transition: .4s
}

.contact6-box .icon {
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    transition: .4s
}

.contact6-box .icon img {
    filter: brightness(0)
}

.contact6-box .heading h3 {
    color: #180d03;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    transition: .4s;
    padding-bottom: 0;
    margin-bottom: 0
}

.contact6-box .heading a {
    display: inline-block;
    color: #180d03;
    font-size: 14px;
    font-style: normal;
    transition: .4s
}

.contact6-box .heading a i {
    float: right;
    margin-right: 10px;
    transform: rotate(-45deg)
}

.contact6-box:hover .heading a i {
    transform: rotate(0);
    transition: .4s
}

.contact6-box:hover {
    background-image: url(../img/banner-fintech.jpg);
    transition: .4s;
    transform: translateY(-7px)
}

.case8 .case8-box:hover .hover-area p, .contact6-box:hover .heading h3 {
    color: #fff;
    transition: .4s
}

.contact6-box:hover .heading a {
    transition: .4s;
    color: rgba(255, 255, 255, .8901960784)
}

.hero2 {
    min-height: 200px;
    display: flex;
    padding-top: 70px;
    padding-bottom: 70px;
    align-items: center;
    position: relative;
    z-index: -2;
    background-image: url(https://techxen.vercel.app/assets/img/bg/body2.png);
    overflow: hidden
}

.hero2 .hero2-main-imge2 {
    position: absolute;
    bottom: -190px;
    right: -45px;
    transform: scale(.9);
    width: 56%
}

.hero2::after {
    top: 10px;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(https://techxen.vercel.app/assets/img/bg/hero2-main-bg2.png);
    background-position: center center;
    background-size: contain;
    animation-name: shape-animaiton4;
    animation-duration: 92s;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.cta-btn1::after, .cta-btn2::after, .hero2 .hero2-main-imges .image1 {
    animation-name: shape-animaiton4;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.hero2 .hero2-tags {
    margin-top: 24px
}

.hero2 .hero2-tags ul li a {
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #fff;
    padding: 12px 16px;
    margin: 5px;
    background-color: #191924;
    border-radius: 30px;
    border: 1px solid #313137;
    transition: .4s
}

.case8 .case8-box .hover-area, .case8 .case8-box .image {
    border-radius: 4px;
    overflow: hidden
}

.hero2 .main-heading span.span {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    padding-left: 70px
}

.heading2 .titl span::after, .heading2 .titl span::before, .hero2 .main-heading span.span::before, .hero2 .main-heading span::after {
    content: '';
    display: block;
    position: absolute
}

.hero2 .main-heading span::after {
    width: 19%;
    height: 2px;
    background-color: #fff;
    top: 8px;
    left: 4px
}

.hero2 .main-heading span.span::before {
    width: 10px;
    height: 10px;
    background-color: #fff;
    top: 4px;
    left: 55px;
    border-radius: 50%;
    animation: 1.5s infinite alternate zumpX
}

.hero2 .hero2-main-imges {
    position: relative;
    height: 480px
}

.hero2 .hero2-main-imges .image1 {
    position: absolute;
    width: 45%;
    top: -35px;
    right: 120px;
    animation-duration: 40s
}

.hero2 .main-heading h1 {
    font-size: 50px;
    font-weight: 700;
    color: #fff
}

.hero2 .circle-shapes .shape1 {
    position: absolute;
    bottom: 130px;
    right: -30px
}

.hero2 .circle-shapes .shape2 {
    position: absolute;
    bottom: 176px;
    right: 17px
}

.shape-animaiton4 {
    position: relative;
    animation-name: shape-animaiton4;
    animation-duration: 62s;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.case8 .case8-box {
    margin-bottom: 60px;
    position: relative
}

.case10 .case-box .image img, .case8 .case8-box .image img {
    width: 100%;
    transition: .4s
}

.case8 .case8-box .hover-area {
    background-color: #f5f6f9;
    padding: 11px 20px;
    position: absolute;
    height: 44px;
    bottom: -20px;
    margin: 0 30px;
    transition: .4s
}

.case8 .case8-box .hover-area .hover-heaer .icon img {
    transition: .4s;
    max-width: 100%
}

.case8 .case8-box .hover-area .hover-heaer a {
    display: inline-block;
    color: #0b0103;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    transition: .4s
}

.case10 .case-box .hover-area a.learn, .case10 .case-box .hover-area h4 a, .case10 .case-box:hover .hover-area h4 a, .heading2 h3 a {
    font-size: 20px;
    line-height: 20px;
    transition: .4s;
    color: #fff
}

.case8 .case8-box .hover-area p {
    color: #0b0103;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 8px 0 10px;
    transition: .4s;
    margin-bottom: 0
}

.case10 .case-box .hover-area a.learn span, .case8 .case8-box .hover-area .learn span {
    display: inline-block;
    transform: rotate(-45deg)
}

.case8 .case8-box:hover .image img {
    transform: rotate(2deg) scale(1.1);
    transition: .4s
}

.case8 .case8-box:hover .hover-area {
    height: 130px;
    transition: .4s;
    background-color: #004aad
}

.case8 .case8-box:hover .hover-area .hover-heaer .icon img {
    transition: .4s;
    filter: brightness(0) invert(1)
}

.case8 .case8-box:hover .hover-area .hover-heaer a, .theme-btn14:hover {
    transition: .4s;
    color: #fff
}

.case8 .case8-box .hover-area .learn {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px
}

.solution {
    background-image: url(../img/body2.png);
    overflow: hidden;
    position: relative;
    padding: 50px 0
}

.solution .item-box {
    display: flex;
    align-items: start;
    margin-top: 10px
}

.solution .item-box .icon {
    margin-right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    background-color: rgba(161, 233, 52, .0941176471);
    transition: .4s
}

.solution .item-box .icon img {
    height: auto;
    transition: .4s;
    max-width: 100%
}

.solution .item-box .iot_prdo {
    width: 85%
}

.solution .item-box:hover .icon {
    background-color: #fff;
    transition: .4s
}

.heading2 .titl h2 {
    font-size: 35px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
    margin-top: 10px
}

.heading2 .titl span {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    padding-left: 65px
}

.heading2 .titl span::after {
    width: 10%;
    height: 2px;
    background-color: #fff;
    top: 13px
}

.heading2 .titl span::before {
    width: 10px;
    height: 10px;
    background-color: #fff;
    top: 9px;
    left: 55px;
    border-radius: 50%;
    animation: 1.5s infinite alternate zumpX
}

.heading2 h3 a {
    display: inline-block;
    font-weight: 700
}

.heading2 p {
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
    color: #fff
}

.solution .solution-images {
    text-align: center;
    height: 500px;
    position: relative
}

.solution .solution-images .image1 {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    animation: 1.5s infinite alternate zumpX;
    border: 4px solid #fff;
    border-radius: 8px
}

.anim .arow img, .solution .solution-images .image3 {
    animation: 1.5s infinite alternate zumpY;
    position: absolute
}

.solution .solution-images .image2 {
    padding-top: 50px
}

.reveal {
    position: relative;
    display: inline-flex;
    overflow: hidden
}

.reveal img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transform-origin: left;
    border-radius: 5px
}

.solution .solution-images .image3 {
    left: 0;
    bottom: 0;
    border: 4px solid #fff;
    border-radius: 8px
}

.case10 .case-box .image {
    border-radius: 8px;
    overflow: hidden
}

.case10 .case-box .hover-area {
    position: absolute;
    margin: 0 24px;
    bottom: 24px;
    padding: 12px;
    overflow: hidden
}

.case10 .case-box .hover-area h4 a {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    transform: translateY(120px);
    position: relative;
    z-index: 2
}

.case10 .case-box .hover-area p {
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding: 16px 0;
    transform: translateY(150px);
    transition: .4s;
    position: relative;
    z-index: 2
}

.case10 .case-box .hover-area a.learn {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    transform: translateY(100px);
    position: relative;
    z-index: 2
}

.case10 .case-box .hover-area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 100%;
    border-radius: 7px;
    background: #004aad;
    transition: .4s;
    z-index: 0
}

.case10 .case-box:hover {
    transition: .4s
}

.case10 .case-box:hover .image img {
    transition: .4s;
    transform: scale(1.1) rotate(2deg)
}

.case10 .case-box:hover .hover-area h4 a {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    transform: translateY(0)
}

.case10 .case-box:hover .hover-area p {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
    transform: translateY(0);
    transition: .4s;
    margin-bottom: 0
}

.case10 .case-box:hover .hover-area a.learn {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    transform: translateY(0);
    transition: .4s
}

.case10 .case-box:hover .hover-area::after {
    height: 135px;
    transition: .4s;
    border-radius: 8px
}

@keyframes zumpX {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-30px)
    }
}

@keyframes zumpY {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-30px)
    }
}

@keyframes buld {
    0%, 80% {
        opacity: 0
    }

    100%, 20% {
        opacity: 1
    }
}

.nw_bg {
    background-image: url(../img/bg-iot.jpg)
}

.anim .arow img {
    top: 150px;
    left: -7%;
    width: 7%
}

.anim .hdop img {
    position: absolute;
    top: 90px;
    left: 367px;
    width: 2%
}

.clien {
    margin-top: -95px;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 8px 0 #ababab
}

.galy .icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfdfdf;
    font-size: 2rem;
    border: 1px solid rgba(255, 255, 255, .6);
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(2px);
    border-radius: .5rem;
    box-shadow: 0 calc(6rem / 6) calc(6rem / 3) rgba(0, 0, 0, .1);
    transition: transform .5s ease-out;
    overflow: hidden
}

.galy .icon::before {
    content: "";
    background: rgba(255, 255, 255, .4);
    width: 60%;
    height: 100%;
    top: 0;
    left: -125%;
    transform: skew(45deg);
    position: absolute;
    transition: left .5s ease-out
}

.galy .icon:hover::before {
    left: 150%
}

.contact8 .form-area {
    background-color: #f5f6f9;
    border-radius: 4px;
    padding: 32px;
    margin-left: 30px
}

.contact8 .form-area h3 {
    color: var(--Home-Page-3-text-Colors, #180d03);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 10px
}

.contact8 .form-area .single-input label {
    color: var(--Home-Page-3-text-Colors, #180d03);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 14px
}

.contact8 .form-area .single-input .form-control, .contact8 .form-area .single-input input, .contact8 .form-area .single-input textarea {
    width: 100%;
    padding: 14px;
    border-radius: 4px;
    border: none;
    font-size: 14px
}

.theme-btn14 {
    display: inline-block;
    padding: 18px 10px 18px 24px;
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    margin-top: 10px;
    line-height: 18px;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    border: none;
    overflow: hidden
}

.theme-btn14 span {
    display: inline-block;
    transform: rotate(-45deg) translateX(0);
    font-size: 17px
}

.theme-btn14::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 4px;
    background: #004aad;
    z-index: -2
}

.cta-btn1::after, .cta-btn2::after, .theme-btn14::before {
    content: "";
    width: 0%;
    top: 0;
    left: auto;
    right: 0;
    position: absolute;
    height: 100%
}

.theme-btn14::before {
    border-radius: 4px;
    background: #180d03;
    z-index: -1;
    transition: .4s
}

.theme-btn14:hover::before {
    width: 100%;
    transition: .4s;
    left: 0;
    right: auto
}

.cta {
    padding: 60px 0 20px;
    background-image: url(../img/map-bg.svg)
}

.cta-btn1, .cta-btn2 {
    padding: 16px 20px;
    position: relative;
    z-index: 1;
    font-weight: 700;
    display: inline-block;
    overflow: hidden
}

.heading1-w h2 {
    font-size: 44px;
    line-height: 52px;
    font-weight: 700;
    color: #fff
}

.cta-btn1 {
    background-color: #fff;
    border-radius: 5px;
    color: #0e38b1;
    transition: .4s
}

.cta-btn1::after, .cta-btn2::after {
    background-image: url(../img/icon-list.png);
    z-index: 2;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(1.5);
    transition: .4s;
    animation-duration: 52s
}

.cta-btn1:hover, .cta-btn2:hover {
    color: #fff;
    transform: translateY(-4px);
    transition: .4s;
    background-color: #3059ce
}

.cta-btn1 span, .cta-btn2 span {
    display: inline-block;
    padding-left: 4px
}

.cta-btn2 {
    border-radius: 7px;
    color: #fff;
    transition: .4s;
    margin-left: 20px;
    border: 1px solid #fff
}

.cta-btn2:hover {
    border: 1px solid #3059ce
}

@keyframes shape-animaiton4 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(1000deg)
    }
}

.indust .indust_cntn {
    background: 0 0;
    position: absolute;
    top: 20%;
    left: 0;
    width: 60%;
    padding: 20px
}

.indust .indust_cntn h4 {
    font-weight: 700;
    color: #000;
    display: inline-block;
    border-bottom: 1px dashed #000;
    line-height: 42px
}

.indust .indust_cntn p {
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #000
}

.indost {
    overflow: hidden;
    padding: 30px 0;
    background: #fcfcfc;
    background-image: unset
}

.subscribe-area {
    background-image: linear-gradient(to top, #00c6fb 0, #005bea 100%)
}

.pb-50 {
    padding-bottom: 20px
}

.pt-40 {
    padding-top: 30px
}

.subscribe-text span {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 5px
}

.subscribe-text h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 0
}

.subscribe2-wrapper .subscribe-form input {
    background: 0 0;
    border: 1px solid #fff;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 300;
    height: 57px;
    margin-right: 17px;
    padding-left: 35px;
    width: 66%;
    cursor: pointer
}

.subscribe2-wrapper .subscribe-form input:focus-visible {
    border: 1px solid #fff;
    outline: aliceblue
}

.subscribe2-wrapper .subscribe-form input::placeholder {
    color: #fff
}

.subscribe2-wrapper .subscribe-form button:focus {
    border: 1px solid #fff;
    outline: aliceblue
}

.subscribe2-wrapper .subscribe-form button {
    background: #ffff;
    border: none;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    padding: 18px 46px;
    transition: .3s
}

.subscribe2-wrapper .subscribe-form button i {
    font-size: 18px;
    padding-left: 5px
}

.new_hdng .contie h3 {
    font-weight: 700;
    color: #fff;
    font-size: 29px;
    text-transform: capitalize;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    animation: 7.5s steps(90, end) typing, .75s infinite blink-caret;
    width: 88.5%
}

.new_hdng {
    background-color: #0041a3;
    padding: 30px 0;
    background-image: url(../img/hero-bg.png);
    background-size: inherit;
    background-position: bottom
}

.new_hdng .item {
    text-align: center;
    color: #fff
}

.count_dtl span, .new_hdng .item h5 {
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 0
}

.new_hdng .item p {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0
}

.count_dtl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 88.5%
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent
    }

    50% {
        border-color: #fff
    }
}

.pdngo {
    padding: 20px
}

.pdngo p {
    font-size: 16px;
    margin-bottom: 0
}

.heads h5 {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px
}

.crlai h4, .leadership-section .cnts {
    font-size: 20px
}

.crlai h4 {
    color: #000;
    font-weight: 600
}

.crlai p {
    font-size: 16px;
    color: #000;
    margin-bottom: 0
}

.crlai .card {
    padding: 15px;
    margin-bottom: 20px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    transition: transform .3s
}

.csr_section, .leadership-section, .our_vision, .services_section {
    background: #f8fafb
}

.leadership-section .leadership_contnt {
    padding: 20px;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .1);
    border-radius: 15px;
    border: 2px solid #0056b3;
    height: 100%;
    transition: .5s ease-in-out;
    text-align: center;
    background-color: #fff
}

.leadership-section .leadership_contnt .leader_img {
    width: 180px;
    height: 180px;
    border: 2px solid #2d357a;
    border-radius: 10px
}

.leadership-section .leadership_contnt .leader_name {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #004aad;
    margin-top: 10px
}

.leadership-section .leadership_contnt .designation_cont {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px
}

.leadership-section .leadership_contnt .read_mre {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: #004aad;
    border-radius: 25px !important;
    padding: 10px 20px
}

.leadership-section .leadership_contnt:hover {
    background-color: #004aad;
    color: #fff
}

.leadership-section .leadership_contnt:hover .leader_img {
    border-color: #fff
}

.leadership-section .leadership_contnt:hover .leader_name, .our_vision .vision_card:hover .vision_heading {
    color: #fff
}

.leadership-section .leadership_contnt:hover .read_mre {
    background-color: #fff;
    color: #004aad
}

.about_us .contnt {
    font-size: 16px;
    line-height: 26px;
    font-weight: 600
}

.about_us .about_img img {
    height: 400px;
    border-radius: 15px;
    overflow: hidden
}

.about_us .about_contnt .cnts {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400
}

.our_vision .vision_card {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 15px 10px 0 rgba(210, 222, 228, .46);
    transition: .5s ease-in-out;
    height: 100%
}

.our_vision .vision_card .vision_img {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, .16);
    height: 65px;
    width: 65px;
    padding: 10px;
    margin-bottom: 20px;
    transition: .4s ease-out
}

.csr_section .csr_card .csr_heading, .our_vision .vision_card .vision_heading, .proposition_section .proposition_card .proposition_heading {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #000
}

.csr_section .csr_card .csr_contnt, .our_vision .vision_card .vision_contnt, .proposition_section .proposition_card .proposition_contnt {
    font-size: 15px;
    line-height: 25px;
    font-weight: 400
}

.our_vision .vision_card:hover {
    background-color: #0056b3 !important;
    color: #fff
}

.our_vision .vision_card:hover img {
    transform: scale(-1) rotate(180deg)
}

.proposition_section .proposition_card img {
    border-radius: 8px;
    margin-right: 15px;
    height: 60px;
    width: 60px
}

.services_section .service_cont {
    border: 2px solid #0056b3;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 22px 22px -15px rgba(0, 0, 0, .16);
    height: 100%
}

.services_section .service_cont .service_heads {
    color: #0056b3;
    font-size: 22px;
    line-height: 32px;
    font-weight: 500
}

.services_section .service_cont ul {
    margin: 0;
    padding-left: 20px;
    gap: 5px;
    display: flex;
    flex-direction: column
}

.services_section .service_cont ul li {
    list-style-type: none;
    font-size: 16px;
    color: #343a40;
    font-weight: 500
}

.services_section .service_cont ul li i {
    font-size: 20px;
    color: #0056b3
}

.certificat_img {
    border: 2px solid #343a40;
    border-radius: 5px;
    overflow: hidden
}

.csr_section .csr_card {
    border-radius: 8px;
    padding: 20px 25px;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .1);
    height: 100%
}

.modal-dialog {
    max-width: 650px !important
}

.modal .modal-content {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top: 4px solid;
    border-image: linear-gradient(to right, #0056b3 0%, #3172b7 50%, #54a7cd 75%, #60cdff 100%) 1;
    border-radius: 0 0 10px 10px
}

.modal .modal-body .leader_img {
    height: 250px;
    width: 250px;
    border-radius: 10px;
    border: 2px solid #2d357a
}

.modal .modal-body .leader_name {
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    color: #004aad;
    margin-top: 10px
}

.modal .modal-body .designation_cont, .modal .modal-body ul li {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px
}

.modal-header .btn-close {
    background-image: none !important;
    padding: 8px !important;
    background: #004aad;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    border-radius: 5px;
    font-size: 20px
}

.modal-header .btn-close:focus {
    box-shadow: none !important;
    outline: 0 !important
}

.modal-header .btn-close:hover {
    color: #fff !important;
    opacity: 1
}


.offering-section .offering_card {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 15px 10px 0 rgba(210, 222, 228, .46);
    transition: .5s ease-in-out;
    height: 100%
}

.offering-section {
    padding: 60px 0;
    background: #f8fafb;
}

.offering-section .offering_card .offering-title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #000;
}

.offering-section .offering_card .offering-cont {
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
}

.offering-section .offering_card:hover {
    background-color: #0056b3 !important;
    color: #fff;
}

.offering-section .offering_card:hover .offering-title {
    color: #fff;
}

.our-competence {
    padding: 60px 0;
    background: #f8fafb;
}

.our-competence .list-style-two {
    margin-top: 20px;
}

.our-competence .list-style-two li {
    font-size: 16px;
    font-weight: 500;
}

.our-competence .list-style-two li:before {
    content: "\f336";
    font-weight: 400;
}

.our-competence .shapes-circle {
    width: 480px;
    height: 480px;
    background: #eff1f9;
    top: 50%;
    right: 0;
    /* z-index: -1; */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: translate(0, -50%);
}

.features-section {
    background-color: #f7f7f7;
    position: relative;
    padding: 60px 0;
}

.features-section .advantage-head {
    color: #0041a3;
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}

.applications-section {
    padding: 60px 0;
    background: linear-gradient(to left, #eff1f9 0, #ffffff 100%);
}

.seamless-bg {
    background: rgba(243, 247, 255, 0.2);
    box-shadow: 0px 1.89347px 9.78694px rgba(96, 155, 255, 0.25);
    border-radius: 35px;
    padding: 50px 40px 50px 40px;
}

.applications-section .applications-img img {
    border-radius: 20px;
}

.tab-btns {
    background: #004aad;
    color: #fff !important;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

.devices-table {
    position: relative;
    padding: 60px 0;
}

.devices-table .image-box img {
    border: 2px solid #004aad;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.devices-table table {
    border: 2px solid #004aad;
    background-color: #fff;
    display: inline-table;
}

.devices-table table th {
    background-color: #004aad;
    color: white;
    text-align: center;
    font-size: 18px;
    border: 0px;
    border-bottom: 0px;
}

.devices-table table th:first-child {
    border-right: 1.5px solid;
}

.devices-table table td, th {
    border: 1.5px solid #004aad;
    padding: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.devices-table .inner-column .list-style-two li {
    font-weight: 400;
    list-style: disc !important;
    padding-left: 0px;
    margin-left: 20px;
}

.devices-table .inner-column .list-style-two li:before {
    display: none;
}

.app-list li {
    list-style: none;
    font-size: 15px;
    font-weight: 400;
    color: #191919;
    position: relative;
    padding-left: 27px;
}

.app-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "\f336";
    font-weight: 400;
    font-family: "font awesome 6 pro";
    color: #004aad;
}

.nav-list {
    background-color: #e9ecef;
    padding: .75rem 1rem;
}

.nav-list .breadcrumb {
    margin-bottom: 0px;
    padding: 0px;
}

.nav-list .breadcrumb .breadcrumb-item {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

.nav-list .breadcrumb .breadcrumb-item a {
    color: #004aad;
}

.device-section .device-img {
    background-position: center right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    padding: 50px 0px 50px 40px;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* box-shadow: 0px 0px 10px rgba(72,70,68,.39); */
}

.device-content .device-heading {
    font-size: 35px;
    line-height: 45px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.device-list li {
    list-style: none;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    position: relative;
    padding-left: 27px;
    margin-bottom: 8px;
}

.device-list li:last-child {
    margin-bottom: 0px;
}

.device-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "\f336";
    font-weight: 400;
    font-family: "font awesome 6 pro";
    color: #fff;
}

.tracking-section {
    background-color: #f7f7f7;
    padding: 60px 0;
}

.tracking-section .image-box img {
    border: 2px solid #004aad;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tracking-section .tracking-heading {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    color: #0041a3;
    margin-bottom: 20px;
}

.tracking-cont {
    font-size: 16px;
    font-weight: 400;
}

.feature-section {
    padding: 60px 0;
}

.feature-section .featre-cards {
    padding: 10px 10px;
    border: 1.5px solid #0041a3;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.feature-section .featre-cards svg {
    width: 60px;
    height: 60px;
    fill: #004aad !important;
    transition: all 400ms ease-out 0s;
    -webkit-transition: all 400ms ease-out 0s;
    margin-bottom: 15px;
}

.feature-section .featre-cards .featre-cont {
    font-size: 16px;
    font-weight: 500;
}

.feature-section .featre-cards::after {
    transform: translateY(-50%);
    content: "";
    width: 5px;
    height: 50%;
    background-color: #0041a3;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
    transition: .5s;
}

.featre-cards:hover:after {
    width: 100%;
    height: 100%;
    left: 0;
}

.featre-cards:hover svg {
    fill: #fff !important;
}

.featre-cards:hover .featre-cont {
    color: #fff;
}

.benefits-section {
    padding: 60px 0;
    position: relative;
}

.benefits-section::after {
    content: "";
    position: absolute;
    height: 100%;
    background-position: center;
    background-size: cover;
    top: 0;
    background-repeat: no-repeat;
    background-image: url(../img/shape-bg-device.webp);
    right: 0;
    width: 100%;
    z-index: -1;
}

.benefits-section .benefits-cards {
    background: #fff;
    padding: 15px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 10px;
    transition: all ease-in-out .5s;
}

.benefits-section .benefits-cards img {
    height: 50px;
    position: relative;
    z-index: 9;
    transition: all ease-in-out .5s;
}

.benefits-section .benefits-cards span::after {
    content: "";
    position: absolute;
    height: 28px;
    width: 28px;
    background: #004aad57;
    display: inline-block;
    vertical-align: bottom;
    border-radius: 50%;
    margin-left: -21px;
    transition: all ease-in-out .5s;
    bottom: 12px;
}

.benefits-section .benefits-cards:hover {
    background-color: #004aad;
    color: #fff;
}

.benefits-section .benefits-cards:hover img {
    filter: invert(1);
}

.benefits-section .benefits-cards:hover span::after {
    background: #13131357;
}

.thanku {
    padding: 80px 0px;
}

.thanku .thnk-heading {
    font-size: 40px;
    line-height: 50px;
    text-shadow: 1px 1px 2px black;
    color: #004aad;
    font-weight: 600;
}

.thanku .thnk-cnts {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    margin-top: 15px;
}

.thanku .thnk-conts {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    margin-top: 15px;
}

.thanku .thnk-cnts a {
    color: #004aad;
    font-weight: 600;
    text-decoration: underline;
}

.thanku .thank-btn {
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    background: #004aad;
    color: #fff;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 47px;
    margin-top: 20px;
}

.thanku .thank-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.thanku .thank-btn a i {
    font-size: 20px;
}

@media only screen and (max-width: 506px) {
    .thanku {
        padding: 50px 0px;
    }

    .thanku .thnk-heading {
        font-size: 30px;
        line-height: 40px;
    }
}

.gps-modal .modal-dialog .modal-content .gps-form {
    padding: 20px 20px;
}

.gps-modal .modal-dialog .modal-content .gps-form input, .gps-modal .modal-dialog .modal-content .gps-form textarea {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    margin: 0 0 15px 0;
    color: #172b43;
    font-size: 14px;
    outline: 0;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #1c75bc47;
    border-right: 1px solid #77a2c469;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 3px 3px 2px 0px #d6e1ff;
}

.mission-statment-section .mission-statment-row{ 
    position: relative;
    z-index: 9;
    margin: 40px 0px; 
    border-radius: 10px;
    background-color: #0a48a7;
    padding: 40px 0;
    background-image: url(../img/mission-bg-imagess.png);
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: screen;
}  
.mission-statment-section .mission-statment-content h2{
    font-weight: 700; 
    border-bottom: 2px solid; 
    display: inline-block; 
    padding-bottom: 5px;
}
.mission-statment-section .mission-statment-content .cnts{
    font-size: 19px;
    line-height: 30px;
    font-weight: 500; 
}
.marquee {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
}

.text-track { 
    will-change: transform;
    transform: translateX(0);
    white-space: nowrap;
    animation: marquee 24s linear infinite; 
    /* color: #2d357a; */
    color: #fff;
}
.text-track span{
    padding-left: 10px;
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}