:root {
    --brand-gradient: linear-gradient(90deg, #FF5C01 0%, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);
    --brand-gradient-hover: linear-gradient(90deg, #FF7A2A 0%, #FF1A2A 20%, #B52A7A 36%, #8B2B9A 48%, #3A8B9B 65%, #2A7A7A 100%);
    --primary: #00F0FF;
    --secondary: #7B2BFF;
    --accent: #FF2D75;
    --dark: #0A0A14;
    --light: #F0F5FF;
    --success: #00FFA3;
    --warning: #FFD700;
    --text: #E0E5FF;
    --card-bg: rgba(20, 20, 40, 0.7);
    --btns-bg-color: linear-gradient(90deg, #FF5C01 0, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);
    --title-top-line-bg: linear-gradient(90deg, #FF5C01 0, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 90%, #005A59 100%);
    --text-gradient-color: -webkit-linear-gradient(40deg, #FF5C01 0, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);
    --btn-box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
    --primary-bg-gradient: linear-gradient(135deg, #126F80, #005A59, #19031C);
    --terinary-bg-gradient: linear-gradient(to bottom, rgba(47, 79, 162, 0), #005A59);
    --black-bg-gradient: linear-gradient(135deg, #000000 0%, #434343 51%, #000000 100%);
    --dark-bg-green: #111c2d;
    --secondary-dark-color: #0c2e3a;
    --flyer-bg-gradient: linear-gradient(to right, #fe5601 0, #bd0041 51%, #fe5601 100%);
    --casestudy-bg-gradient: linear-gradient(to right, #c60037 0, #702a88 51%, #c60037 100%);
    --threats-bg-gradient: linear-gradient(to right, #560b67 0, #005A59 51%, #560b67 100%);
    --light-bg-color: linear-gradient(180deg, #005A59, hsla(179, 100%, 18%, .1) .01%, hsla(179, 100%, 18%, .1));
    --white: #FFFFFF;
    --blog-light-green-bg: linear-gradient(0deg, #d8d1dd 0, #fff 100%);
    --blog-secondary-light-bg: linear-gradient(180deg, #FFFFFF 0%, #005A59 100%);
    --blog-light-dark-green: #005A59;
    --dark-bg-puple: #190918f0;
    --purple-bg-gradient: radial-gradient(circle closest-corner at 50% 100%, rgba(126, 34, 206, .3), rgba(38, 33, 73, 0));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.latest-project-area .left-content h3,
body {
    font-family: muli, "Myriad Pro", Helvetica, Arial, sans-serif
}

.overlay h4,
.res-sec2 .content-1 h1 {
    letter-spacing: -.01rem;
    word-spacing: .1rem
}

.input-area .input,
.lightbox-close,
.mega-menu-kf4 .headings,
.thm-btn,
.thm-btn-form {
    text-transform: uppercase
}

.landing-btn-form,
.thm-btn,
.thm-btn-form {
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    line-height: 1.2;
    transition: .5s
}

#main_nav,
.accordion-box .accordion,
.btn-div .btn-open,
.compliance-timeline,
.consult-video,
.customer-feedback .thumb-box.style2,
.customer-feedback .thumb-box.style2 li a,
.explain-section .box,
.faq-appointment-area,
.google-map-box,
.inner,
.item,
.landing-btn-form,
.login-register-area .form .input-field,
.main-card,
.newsletter__content,
.pack-slider,
.pack-thumb,
.package-item,
.sec-title,
.service-highlight-area,
.sidebar-wrapper .single-sidebar form.search-form,
.thm-btn,
.thm-btn-form,
.video-gallery-area {
    position: relative
}

.agility-box:hover .overlay,
.h-even,
.preloader,
body,
html {
    height: 100%
}

.check a,
.landing-btn-form,
.post-pagination li a,
.star,
.thm-btn,
.thm-btn-form {
    font-family: Poppins, sans-serif
}

.overlay-about p,
.overlay-career p {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: .5px;
}

.calendar ul,
.list-unstyled,
.nav,
.navbar-nav,
.play-button,
li,
ul {
    list-style: none
}

body {
    font-size: 15px;
    color: #000;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: .5px;
    height: fit-content
}

button:focus {
    outline: 0
}

button {
    cursor: pointer;
    border: none;
    background: 0 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin: 0 0 10px
}

h3 {
    font-size: 20px;
    line-height: 28px
}

a,
a:active,
a:focus,
a:hover {
    text-decoration: none;
    outline: 0;
    border: none
}

img {
    max-width: 100%;
    height: auto !important
}

i {
    font-style: normal
}

li,
ul {
    margin: 0;
    padding: 0
}

.sec-pding-one {
    padding: 52px 0
}

.sec-pding-two {
    padding: 52px 0 30px
}

.thm-btn {
    padding: .625rem 0.875rem !important;
    border-radius: 0.7rem;
    font-weight: 500;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    color: #fff
}

.btn-div .btn-open:hover,
.compliance-table tbody tr,
.equalElement.active .equalcontent,
.equalElement:hover .equalcontent,
.modal-header .close:hover,
.thm-btn-2,
.thm-btn-form {
    background: #fff
}

.blog-card-body a,
.breadcrumb-bottom .left ul li a:hover,
.sec-title span.color-2,
.thm-btn-2 {
    color: indigo
}

.thm-btn-form {
    padding: 10px 27px;
    color: var(--dark-bg-green);
    border: none;
    border-radius: 1rem
}

.logo-header {
    width: 140px
}

.landing-btn-form {
    padding: 10px 27px;
    background: #2a58a5;
    color: #fff;
    border-radius: 20px
}

.form-control {
    padding: 10px 27px;
    margin-bottom: 10px
}

.blog_holder .wrap .tags ul li,
.nav-pills .color-version.active,
.service-more-btn,
.tab-manual .nav-pills .nav-link.active,
.thm-btn:hover {
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    color: #fff
}

.thm-btn.btn-style-two {
    background: #fcc80d;
    color: #fff
}

.threatsploit-section-res {
    background: #fafafa
}

.threats-description {
    height: 75px;
    overflow: hidden
}

.case-study-title {
    text-align: left !important
}

.blog-single-area .tag-box .left ul li a:hover i,
.not-found-content .search-form button:hover,
.not-found-content .search-form input[type=text]:focus+button,
.sidebar-wrapper .single-sidebar .search-form button:hover,
.sidebar-wrapper .single-sidebar .search-form input[type=text]:focus+button,
.single-shop-content .content-box .location-box form button:hover,
.thm-btn.btn-style-two:hover {
    background: #2a58a5;
    color: #fff
}

#shop-area,
.faq-sec,
.sec-pd-one,
.section-padding,
.studies__section {
    padding-top: 40px;
    padding-bottom: 50px
}

.owl-nav-style-one.owl-theme .owl-nav [class*=owl-] {
    background: #fff;
    border-radius: 50%;
    color: #909090;
    font-size: 24px;
    font-weight: 700;
    height: 50px;
    line-height: 43px;
    margin: 0;
    padding: 0;
    width: 50px;
    border: 1px solid #f3f3f3;
    transition: .7s;
    text-align: center;
}

.owl-nav-style-one.owl-theme .owl-nav [class*=owl-] span {
    font-size: 28px;
}

.history-area .owl-theme .owl-nav .owl-next,
.owl-nav-style-one.owl-theme .owl-nav .owl-next,
.popup-2-header p,
.terms-div p u {
    margin-left: 10px
}

.owl-nav-style-one.owl-theme .owl-nav [class*=owl-]:hover {
    border-color: #2a58a5;
    color: #2a58a5
}

@keyframes menu_sticky {
    0% {
        margin-top: -100px
    }

    50% {
        margin-top: -74px
    }

    100% {
        margin-top: 0
    }
}

.sticky-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    padding: 0;
    background: linear-gradient(20deg, #03c0ce 0, indigo 100%);
    z-index: 0;
    transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

input:focus,
select:focus,
textarea:focus {
    border-color: #43c3ea;
    outline: 0
}

#contact-form input[type=email].error,
#contact-form input[type=text].error,
#contact-form select.error,
#contact-form textarea.error {
    border-color: red
}

.post-pagination li {
    display: inline-block;
    margin: 0 3px
}

.post-pagination li a {
    background: #fff;
    border: 1px solid #f7f7f7;
    color: #3d3d3d;
    display: block;
    font-size: 18px;
    font-weight: 700;
    height: 55px;
    padding: 14px 0;
    transition: .5s;
    width: 55px;
    border-radius: 3px
}

.post-pagination li a.current {
    background: var(--primary-bg-gradient);
    color: #fff
}

.post-pagination li.active a,
.post-pagination li:hover a {
    background: var(--primary-bg-gradient);
    color: #fff;
}

.overlay-style-one {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .3s ease-in .4s;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    overflow: hidden
}

.overlay-style-one .box {
    display: table;
    height: 100%;
    width: 100%
}

.overlay-style-one .box .content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.single-footer-widget {
    margin-top: 10px
}

#shop-area .shop-content,
.blog-single-area .add-comment-box,
.blog-single-area .tag-box .left ul,
.control-overflow,
.cover img,
.footer-bottom-area .footer-bottom,
.hover-overlay img,
.item,
.logos,
.service-tab-box .tab-content-box .single-tab-content .bottom-content,
.single-footer-widget .footer-contact-info,
.single-footer-widget .our-info,
.social-icons,
.sociallinks-style-two {
    overflow: hidden
}

.left-sidebar .single-sidebar .service-brochures .brochures-dwn-link li a:hover,
.sidebar-wrapper .single-sidebar .product-tag li a:hover,
.single-sidebar .popular-tag li a:hover,
.sociallinks-style-two li a:hover i {
    background: #2a58a5;
    border-color: #2a58a5;
    color: #fff
}

.blog_holder .wrap .tags ul li a,
.bt-mdl:hover,
.color-white,
.contact-carousel .title h3,
.days li.active,
.days li.selected,
.download-box span,
.faq-content .accordion-box .accordion .accord-btn::after,
.faq-content-box .sec-title span,
.left-sidebar .single-sidebar .service-brochures .brochures-dwn-link li a:hover .title-holder h5,
.nav-item .d-block i::before,
.right-sidebar .single-sidebar .service-brochures .brochures-dwn-link li a:hover .title-holder p,
.sec-pd-one .fa-color ul li i,
.single-blog:hover,
.single-project-item .overlay .content h3,
.single-project-item .overlay .content h3 a,
.single-project-item .overlay .content span,
.single-project-item .overlay-report .content h3 a,
.top-menu li a:hover {
    color: #fff
}

.blog-card-section-header .blog-card-section-header-link,
.blog-categories-card:not([data-card-type=featured]) .blog-categories-card-description,
.carousel-control-pause .btn-icon-play,
.enquiryform-title .section-header-title:before,
.equalElement .equalElementImgBlock .image-color,
.nav-slider-select+.nav-slider-icon,
.owl-dot-style-one .owl-dots .owl-dot span,
.pressroom-carousel .owl-controls .owl-dots,
.pressroom-carousel .owl-controls .owl-nav,
.responsive-show,
.single-history.bottom:before,
.single-shop-content .testing .buy-btn,
.tab-container,
.working-area .owl-dot-style-one .owl-dots .owl-dot span,
header .responsive-month-year {
    display: none
}

.brand-area .brand .single-item:hover,
.checkout-area .form form .field-input input[type=text]:focus,
.faq-question-form form input[type=email]:focus,
.faq-question-form form input[type=text]:focus,
.faq-question-form form textarea:focus,
.home-content .row .column:hover,
.landing-content .row .column:hover {
    border: 1px solid #2a58a5
}

.blog-large-area .single-blog-post .text-holder .blog-title:hover,
.blog-single-area .author-box .text-holder .social-link li a:hover i,
.breadcrumb-bottom .left ul li.active,
.nav-item-filter .nav-link-filter .active,
.project-filter li.active span,
.project-filter li:hover span,
.sidebar-wrapper .single-sidebar .latest-product li:hover .title-holder h4,
.single-footer-widget .latest-news li h4 a:hover,
.single-project-item .overlay-report .content span,
.single-service-box .text-holder .readmore:hover,
.single-service-box .text-holder .title a:hover,
.single-service-item:hover .icon-holder .overlay-icon span:before,
.single-service-item:hover .text-holder a.readmore,
.single-service-item:hover .text-holder h3 a,
.single-shop-content .content-box .location-box form span,
.single-sidebar .categories li a:hover,
.single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a:hover i,
.single-sidebar .popular-post li .title-holder a:hover .post-title,
.single-testimonial-item .name span,
.working-area .text-holder .sec-title span {
    color: var(--dark-bg-green)
}

.blog-single-area .single-blog-post .text-holder .blog-title:hover,
.breadcrumb-bottom .right span:hover,
.service-single-featured-box.bg-one .text-holder h3,
.single-featured-box.bg-one .text-holder h3 {
    color: #222
}

@media (min-width:992px) and (max-width:1200px) {
    .resize-captcha-threatsploit-detail .g-recaptcha {
        transform: scale(.75);
        transform-origin: 0 0
    }
}

.advantage-content-box {
    width: 55%
}

.advantage-content-box-full-width,
.article,
.aside,
.blog_holder .image_holder a img,
.callto-action-imgbox img,
.country-code,
.fabe-confirm-book-dialog .form,
.hold-image a img,
.login-register-area .form form,
.lura-action-area .center-img a img,
.single-shop-content .img-holder img {
    width: 100%
}

.latest-project-area .left-content a i,
.single-project-item .overlay .content a.readmore i,
.single-project-item .overlay-report .content a.readmore i,
.single-project-item .static-overlay .content a.readmore i,
.single-service-item .text-holder a.readmore i {
    font-size: 16px;
    display: inline-block;
    padding-left: 7px
}

.latest-project-area {
    position: relative;
    padding-top: 40px;
    padding-bottom: 50px;
    overflow: hidden;
}

.latest-project-area .sec-title {
    padding-bottom: 0 !important;
    text-align: left !important
}

.latest-project-area .left-content {
    margin-top: -5px
}

.latest-project-area .left-content h3 {
    color: indigo;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 20px 0 0
}

.latest-project-area .left-content p {
    color: #5f6c76;
    margin: 20px 0 24px;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 400
}

.latest-project-area .right-content {
    margin-right: -345px
}

.latest-project-area .single-project-item {
    max-width: 385px;
    width: 100%;
    float: left;
    margin-bottom: 0
}

.single-project-item {
    overflow: hidden;
    display: block;
    margin-bottom: 40px
}

.single-project-item .img-holder {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.single-project-item .img-holder img {
    transition: .9s;
    width: 100%
}

.tab-pane .single-project-item .img-holder img {
    filter: grayscale(100%)
}

.single-project-item .static-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 450px;
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .66));
    height: 100%;
    display: block;
    padding: 16px 20px 12px;
    transition: .7s .5s
}

.single-project-item .overlay,
.single-project-item .overlay-report {
    position: absolute;
    bottom: 10px;
    left: 0;
    transform: translate3d(-100%, 0, 0);
    transition: .7s .2s;
    display: block;
    width: 100%;
    opacity: 1
}

.single-project-item .static-overlay .content {
    position: absolute;
    bottom: 20px
}

.single-project-item .static-overlay h3 {
    font-size: 1.2rem;
    line-height: 22px;
    margin: 0 0 3px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
}

.single-project-item .static-overlay .content h3 a {
    color: #fff;
    font-size: 20px
}

.footer-iso-img {
    width: 75px
}

.footer-duns-img {
    margin-right: 10px;
    width: 80px
}

.single-project-item .overlay .content a.readmore,
.single-project-item .static-overlay .content a.readmore {
    color: #fff;
    font-size: 14px;
    font-weight: 200;
    text-transform: capitalize;
    font-family: Poppins, sans-serif
}

.single-project-item .overlay .content p,
.single-project-item .static-overlay .content p {
    color: #fff;
    margin: 15px 0 24px
}

.single-project-item .overlay {
    max-width: 300px;
    background: #353333;
    padding: 15px 20px 82px
}

.single-project-item:hover .overlay {
    left: 10px;
    transform: translate3d(0, 0, 0)
}

.latest-project-area .owl-nav-style-one .owl-controls {
    position: absolute;
    left: -155px;
    bottom: 0
}

.latest-project-area .owl-nav-style-one.case-study .owl-controls {
    left: -140px
}

.single-project-item .overlay-report {
    top: 10px;
    height: 96%;
    background: #2a58a5;
    padding: 26px 20px 22px
}

.single-project-item:hover .overlay-report {
    left: 10px;
    transform: translate3d(0, 0, 0);
    transition-delay: .3s
}

.single-project-item .overlay-report .content p {
    color: #eef2ff;
    margin: 15px 0 24px
}

.single-project-item .overlay-report .content a.readmore {
    color: #2a58a5;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: Poppins, sans-serif
}

.featured-content-box {
    position: relative;
    z-index: 2;
    margin-bottom: -170px
}

.single-featured-box {
    max-width: 33.333333%;
    width: 100%;
    display: block;
    padding: 70px 30px 63px
}

.service-single-featured-box .icon-holder,
.single-featured-box .icon-holder {
    margin-bottom: 24px
}

.service-single-featured-box .icon-holder span:before,
.single-featured-box .icon-holder span:before {
    color: #fff;
    font-size: 60px;
    line-height: 60px
}

.service-single-featured-box .text-holder h3,
.single-featured-box .text-holder h3 {
    color: #fff;
    margin: 0 0 16px
}

.service-single-featured-box.bg-one,
.single-featured-box.bg-four,
.single-featured-box.bg-one {
    background: #f4f4f4
}

.service-single-featured-box.bg-one .icon-holder span:before,
.single-featured-box.bg-one .icon-holder span:before {
    color: #d0d0d0
}

.blog-single-area .tag-box .left ul li a,
.service-single-featured-box.bg-one .text-holder p,
.single-featured-box.bg-one .text-holder p {
    color: #909090
}

.days li.active::before,
.single-featured-box.bg-two,
.single-sidebar .price-ranger .ui-slider .ui-slider-range {
    background: #2a58a5
}

.service-content-box {
    position: relative;
    z-index: 2;
    margin-bottom: -120px
}

.service-single-featured-box {
    max-width: 30.333333%;
    width: 100%;
    display: block;
    padding: 27px 32px 15px;
    height: 230px
}

.service-single-featured-box.bg-two {
    background: #f4f4f4;
    border-radius: 50px;
    margin-left: 30px;
    margin-right: 30px
}

.single-featured-box.bg-three {
    background: #696969
}

.service-single-featured-box.bg-four {
    background: #f4f4f4;
    border-radius: 50px
}

.service-single-featured-box.bg-four:hover {
    border: 2px solid #2a58a5;
    border-radius: 50px
}

.brand-area .single-item,
.eventarea__details__small__button,
.gdpr-list-main,
.main-project-area .single-project-item,
.video-galley-content .icon-holder {
    margin-bottom: 30px
}

#single-service-area .content-box .top-content .text-holder ul li i,
.faq-content ul li i {
    color: #fcc80d;
    font-size: 16px;
    display: inline-block;
    padding-right: 15px
}

.-noImage.blog-post-card,
.accordion-box .accordion .accord-content.collapsed,
.brand-area .owl-controls,
.single-blog-post .text-holder .meta-info li,
.single-blog-post .text-holder-service .meta-info li {
    display: block
}

.latest-blog-area {
    background: #fff;
    position: relative
}

.latest-blog-area .single-blog-post {
    margin-bottom: 40px;
    transition: .5s
}

.single-blog-post .img-holder,
.single-product-item .img-holder {
    display: block;
    overflow: hidden;
    position: relative
}

.single-blog-post .img-holder img {
    transition: .4s ease-in-out .5s;
    width: 100%;
    transform: scale(1, 1)
}

.single-blog-post:hover .img-holder img {
    -ms-transition-delay: 0s;
    transition-delay: 0s
}

.sidebar-wrapper .single-sidebar .latest-product li:hover .img-holder .overlay-style-one,
.single-blog-post:hover .img-holder .overlay-style-one,
.single-product-item:hover .img-holder .overlay-style-one,
.single-service-box:hover .img-holder .overlay-style-one,
.single-sidebar .popular-post li:hover .img-holder .overlay-style-one {
    opacity: 1;
    transition-delay: 0s
}

.single-blog-post .img-holder .overlay-style-one .box .content a i {
    background: rgba(248, 120, 72, .85);
    border: 1px solid #fff;
    border-radius: 3%;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    transform: scale(2);
    transition: .5s;
    opacity: 0
}

.single-blog-post:hover .img-holder .overlay-style-one .box .content a i,
.single-service-box:hover .img-holder .overlay-style-one .box .content a i {
    transform: scale(1);
    transition-delay: .1s;
    opacity: 1
}

.single-blog-post .img-holder .overlay-style-one .box .content a:hover i {
    background: #fff;
    color: #3d4394
}

.single-blog-post .text-holder {
    -webkit-box-shadow: 0 2px 10px 0 #f2f2f2;
    -moz-box-shadow: 0 2px 10px 0 #f2f2f2;
    box-shadow: 0 2px 10px 0 #b7b2b2;
    padding: 11px 25px 22px 15px;
    transition: .5s;
    position: relative;
    z-index: 1
}

.single-blog-post .text-holder .meta-info,
.single-blog-post .text-holder-service .meta-info {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 25px;
    margin-left: -25px;
    margin-right: -25px;
    padding: 5px 0 12px 25px
}

.single-blog-post .text-holder .meta-info li span {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    transition: .5s;
    line-height: 26px
}

.single-blog-post .text-holder .blog-title {
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    padding: 0;
    transition: .5s
}

.single-blog-post .text-holder .blog-title:hover,
.single-blog-post .text-holder .meta-info li span:hover,
.single-blog-post .text-holder-service .blog-title:hover,
.single-blog-post .text-holder-service .meta-info li a:hover {
    color: #3d4394
}

.single-blog-post .text-holder .text {
    margin: 12px 0 0;
    font-size: 1.1rem;
    line-height: 1.75;
    color: #374151 !important
}

.single-blog-post .text-holder .text p,
.single-blog-post .text-holder-service .text p {
    margin: 0;
    text-align: justify
}

.single-blog-post .text-holder .readmore,
.single-blog-post .text-holder-service .readmore {
    overflow: hidden;
    padding-top: 24px
}

.single-blog-post .text-holder .readmore a,
.single-blog-post .text-holder-service .readmore a {
    color: #2a58a5;
    font-size: 14px;
    font-weight: 200;
    text-transform: capitalize;
    font-family: Poppins, sans-serif;
    transition: .5s
}

.single-blog-post .text-holder .readmore a:hover,
.single-blog-post .text-holder-service .readmore a:hover {
    color: #696969
}

.single-blog-post .text-holder-service {
    padding-top: 11px;
    padding-bottom: 22px;
    transition: .5s;
    position: relative;
    z-index: 1;
    height: auto
}

.comb_1,
.single-blog-post .text {
    margin-top: -20px
}

.single-blog-post .text-holder-service .meta-info li a {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    font-family: Poppins, sans-serif;
    transition: .5s;
    line-height: 26px
}

.single-blog-post .text-holder-service .blog-title {
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    padding: 0;
    transition: .5s;
    font-family: Poppins, sans-serif
}

.single-blog-post .text-holder-service .text {
    margin: 12px 0 0
}

.single-blog-post .text-holder-service h3 {
    color: #301934;
    font-size: 14.5px;
    font-weight: 600;
    text-align: center
}

.brand-area {
    background: #f4f4f4;
    border-top: 1px solid #f2f2f2;
    padding-top: 60px
}

.brand-area .brand .owl-stage-outer {
    z-index: 10
}

.brand-area .brand .single-item {
    border: 1px solid #f0f0f0;
    height: auto;
    transition: .3s ease-in;
    text-align: center;
    display: block;
    padding: 21px 20px 26px;
    background: #fff
}

.brand-area .brand .single-item img {
    display: inline-block;
    width: auto;
    opacity: 1;
    padding: 0;
    position: relative;
    -webkit-transition: .3s ease-in;
    transition: .3s ease-in
}

.brand-area .brand .single-item:hover img {
    opacity: .9
}

.brand-area .owl-dots {
    position: relative;
    margin-top: 25px
}

.owl-dot-style-one .owl-dots .owl-dot {
    width: 13px;
    height: 13px;
    margin: 5px 7px;
    border: 2px solid #e8e8e8;
    padding: 0;
    background: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: .5s;
    display: inline-block
}

.owl-dot-style-one .owl-dots .owl-dot.active {
    background: #fff;
    border-color: #2a58a5;
    border-radius: 15px
}

.consultation-area .consultation-form input[type=email]:focus,
.consultation-area .consultation-form input[type=text]:focus,
.consultation-area .consultation-form textarea:focus,
.owl-dot-style-one .owl-dots .owl-dot:hover {
    background: #fff;
    border-color: #2a58a5
}

.footer-area {
    position: relative;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    padding: 40px 0 65px
}

.single-footer-widget .footer-logo {
    padding: 0 0 32px
}

.single-footer-widget .our-info p {
    margin: 0 0 26px;
    color: #eef2ff;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px
}

.single-footer-widget .footer-contact-info li {
    position: relative;
    padding-left: 35px;
    padding-bottom: 13px
}

.-featured .blog-post-card-date,
.single-footer-widget .footer-contact-info li:last-child {
    padding-bottom: 0
}

.single-footer-widget .footer-contact-info li .icon-holder {
    position: absolute;
    top: 1px;
    left: 0
}

.single-footer-widget .footer-contact-info li .icon-holder span:before {
    color: #fff;
    font-size: 15px;
    line-height: 16px
}

.single-footer-widget .footer-contact-info li .icon-holder span.map-marker:before {
    position: relative;
    top: 3px
}

.single-footer-widget .footer-contact-info li .text-holder h5 {
    color: #eef2ff;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px
}

.single-footer-widget .footer-social-links {
    overflow: hidden;
    margin: 22px 0 0
}

.single-footer-widget .title {
    display: block;
    overflow: hidden;
    position: relative;
    padding-bottom: 40px
}

.single-footer-widget .title .border {
    width: 70px;
    height: 1px;
    margin: 12px 0 0;
    background: #696969;
    display: block
}

.single-footer-widget .title h5 {
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 30px
}

.footer-bottom-area .footer-bottom .copyright-text p,
.single-footer-widget .latest-news li span,
.single-footer-widget .newsletter-box h5,
.single-footer-widget .newsletter-box p,
.single-footer-widget .usefull-links li a {
    color: #eef2ff;
    font-size: 15px;
    font-weight: 400
}

.single-footer-widget.mar-lft {
    margin-left: 60px
}

.single-footer-widget .usefull-links {
    display: block;
    margin-top: -2px;
    width: 50%;
}

.single-footer-widget .usefull-links li {
    margin-bottom: 15px;
    position: relative
}

.blog-post-card-date,
.center-semi-body-solutions .article-solutions p,
.left-sidebar .single-sidebar .page-links li:last-child a,
.left-sidebar .single-sidebar .service-brochures .brochures-dwn-link li:last-child a,
.mega-menu-kf4 .bigger-column li,
.mega-menu-kf4 .bigger-column p,
.offer-content .text-holder ul li:last-child,
.offer-content-training .text-holder ul li:last-child,
.profit-improvement-box .text-holder ul li:last-child,
.project-analysis-result .inner-content .text ul li:last-child,
.project-single-area .project-info ul li:last-child,
.right-sidebar .single-sidebar .page-links li:last-child a,
.right-sidebar .single-sidebar .service-brochures .brochures-dwn-link li:last-child a,
.single-footer-widget .latest-news li:last-child,
.single-footer-widget .usefull-links li:last-child {
    margin-bottom: 0
}

.single-footer-widget .usefull-links li a span {
    padding-right: 9px;
}

span {
    display: inline-block;
    font-size: 16px;
}

.footer-bottom-area {
    background: var(--dark-bg-green);
    padding: 22px 0
}

.blog-single-area .tag-box .left ul li:last-child,
.footer-bottom-area .footer-bottom .copyright-text,
.gdpr-list div ul,
.offer-content-training .text-holder ul li .text-box p,
.product-tab-box .tab-content .review-box .single-review-box .text-holder .text p,
.profit-improvement-box .text-holder ul li .text-box p,
.project-analysis-result .inner-content .text p,
.single-history .right-content .text-box p {
    margin: 0
}

.footer-bottom-area .footer-bottom .copyright-text p {
    margin: 0;
    font-family: Poppins, sans-serif;
    line-height: 26px
}

.footer-bottom-area .footer-bottom .copyright-text p a {
    color: #fcc80d;
    font-weight: 600;
    transition: .5s
}

.footer-bottom-area .footer-bottom .copyright-text p a:hover {
    color: #03c0ce
}

.footer-bottom-area .footer-bottom .footer-menu ul li {
    display: inline-block;
    float: left;
    margin-right: 25px
}

.footer-bottom-area .footer-bottom .footer-menu ul li a {
    color: #eef2ff;
    font-size: 15px;
    font-weight: 400;
    transition: .5s
}

.breadcrumb-area {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 205px;
    padding-bottom: 70px;
    position: relative;
    z-index: 1;
    margin-top: -156px
}

.breadcrumb-area .breadcrumbs h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    line-height: 62px;
    text-transform: capitalize;
    text-align: center
}

.breadcrumb-bottom .left ul li,
.breadcrumb-bottom .right span {
    font-size: 16px;
    font-weight: 500;
    font-family: Poppins, sans-serif
}

.breadcrumb-bottom {
    position: absolute;
    left: 0;
    bottom: -33px;
    width: 100%;
    height: auto;
    overflow: hidden
}

.breadcrumb-bottom .inner-content {
    display: block;
    padding: 19px 20px 18px;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    background: #fff
}

.single-history .date-box:before,
.single-history.bottom:after,
.single-history:before {
    left: -4px;
    width: 7px;
    height: 7px;
    background: #2a58a5;
    position: absolute;
    border-radius: 50%;
    content: ""
}

.breadcrumb-bottom .left ul li {
    display: inline-block;
    margin-right: 6px;
    line-height: 20px
}

.breadcrumb-bottom .left ul li a {
    color: #222;
    text-transform: capitalize;
    font-family: Poppins, sans-serif;
    transition: .5s
}

.breadcrumb-bottom .left ul li i {
    font-size: 16px;
    color: #2a58a5
}

.breadcrumb-bottom .right span {
    color: #2a58a5;
    text-transform: capitalize;
    transition: .5s
}

.breadcrumb-bottom .right span i {
    font-size: 14px;
    color: #222;
    display: inline-block;
    padding-right: 6px
}

.breadcrumb-bottom .right a,
.single-sidebar .price-ranger .ranger-min-max-block input {
    display: inline-block
}

.card-hover-overlay::before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dark-bg-puple);
    opacity: 0;
    visibility: hidden;
    z-index: 1
}

.card-hover {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

.card:hover .card-hover {
    visibility: visible;
    opacity: 1
}

.card:hover .card-hover-overlay::before {
    opacity: .5;
    visibility: visible
}

.card-img {
    transition: .3s;
    overflow: hidden
}

.card-float {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0
}

.card:hover>.card-zoom>[class*=card-img],
.fox-form-wrap form .btn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.job-career-area {
    background: #f4f4f4 !important;
    padding-bottom: 50px
}

.sec-pd-two {
    padding-top: 123px
}

#blog-area {
    padding-top: 60px;
}

.job-career-area .job-career {
    max-width: 910px;
    margin: 0 auto
}

.job-career-area .sec-title {
    padding-bottom: 14px
}

.job-career-area .button {
    margin-top: 33px
}

.job-career .text p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: .5rem;
    color: #5f6c76
}

.services-page-area {
    padding-top: 123px;
    padding-bottom: 50px
}

.single-service-box {
    display: block;
    margin-bottom: 32px
}

.single-service-box .img-holder {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 15px
}

.single-service-box .img-holder img,
.single-sidebar .popular-post li .img-holder img {
    transition: .4s ease-in-out .5s;
    width: 100%;
    transform: scale(1.1, 1.1)
}

.single-service-box:hover .img-holder img {
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    transform: scale(.99, .99)
}

.single-service-box .img-holder .overlay-style-one .box .content a i {
    background: #2a58a5;
    border: 1px solid #fff;
    border-radius: 3%;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    transform: scale(2);
    transition: .5s;
    opacity: 0
}

.single-service-box .img-holder .overlay-style-one .box .content a:hover i {
    background: #fff;
    color: #353333
}

.single-service-box .icon-holder {
    position: absolute;
    bottom: 0;
    right: 3px;
    width: 70px;
    height: 70px;
    border: 1px solid #f2f2f2;
    background: #fff;
    display: block;
    text-align: center;
    padding: 15px 0;
    z-index: 2
}

.single-service-box .icon-holder:after {
    position: absolute;
    bottom: -1px;
    right: -4px;
    width: 3px;
    height: 70px;
    background: #2a58a5;
    display: block;
    content: ""
}

.single-service-box .icon-holder span:before {
    font-size: 40px;
    line-height: 40px;
    color: #2a58a5
}

.single-service-box .text-holder {
    padding-top: 25px
}

.single-service-box .text-holder .title.research {
    font-size: 18px !important;
}

.single-service-box .text-holder .title {
    color: #222;
    font-size: 18px;
    margin: 0 0 16px;
    text-align: center
}

.single-service-box .text-holder .title a {
    color: #222;
    transition: .1s
}

.single-service-box .text-holder .readmore {
    color: #2a58a5;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: Poppins, sans-serif;
    transition: .1s
}

.single-service-box .text-holder .readmore i {
    display: inline-block;
    font-weight: 700;
    padding-left: 7px
}

.services-page-area .border {
    width: 100%;
    height: 1px;
    display: block;
    background: #f2f2f2;
    margin-bottom: 40px
}

#single-service-area {
    padding: 50px 0 40px;
    position: relative;
    overflow: hidden
}

#single-service-area:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 60%;
    width: 10000%;
    display: block;
    content: "";
    height: 33px
}

#single-service-area .sec-title {
    padding-bottom: 10px;
    margin-top: -4px;
    padding-left: 40px
}

#single-service-area .sec-title h3 {
    font-size: 24px;
    color: #222
}

#single-service-area .sec-title .border,
.blog-single-area .add-comment-box .title span,
.blog-single-area .comment-box .title span,
.faq-question-form .title .border {
    height: 2px;
    width: 70px;
    background: #2a58a5;
    display: block;
    margin: 15px 0 0
}

#single-service-area .top-content .text-holder .mobileapp ul li,
#single-service-area .top-content .text-holder p,
.single-shop-content .content-box .text p,
.single-shop-content .content-box .text-content p {
    line-height: 1.7;
    margin-bottom: .5rem;
    font-weight: 400;
    position: relative;
    color: #5f6c76
}

#single-service-area .content-box {
    position: relative;
    z-index: 1;
}

#single-service-area .top-content .text-holder p {
    margin-top: 10px;
    font-size: 1.1rem
}

#single-service-area .top-content .text-holder .mobileapp ul li {
    margin-top: 10px;
    font-size: 1rem
}

.mobileapp ul li svg {
    margin-right: 10px;
}

#single-service-area .content-box .top-content,
.project-single-area .project-analysis .text-holder {
    overflow: hidden;
    margin-top: -7px
}

.single-shop-content .content-box .text p,
.single-shop-content .content-box .text-content p {
    font-size: 1.1rem
}

#single-service-area .content-box .top-content .text-holder p.mar-btm15 {
    margin-bottom: 15px;
    padding-left: 40px
}

#single-service-area .content-box .top-content .text-holder .center {
    display: block;
    margin-left: auto;
    margin-right: auto
}

#single-service-area .content-box .top-content .text-holder ul {
    margin: 23px 0 30px 40px
}

#single-service-area .content-box .top-content .text-holder ul li {
    font-weight: 500;
    line-height: 32px;
    text-indent: -15px;
    margin-left: 30px
}

.top-content .text-holder .table-responsive .table tr th {
    width: 170px
}

.top-content .text-holder .table-responsive .table tr {
    padding: .75rem;
    vertical-align: bottom;
    border-top: 1px solid #2a58a5
}

#single-service-area .slogan-box {
    overflow: hidden;
    display: block;
    border: 2px solid #f2f2f2;
    padding: 22px 20px 20px 85px;
    position: relative;
    margin: 17px 0 70px 40px
}

#single-service-area .slogan-box:before {
    position: absolute;
    top: 26px;
    left: 30px;
    font-family: Flaticon;
    font-size: 30px;
    line-height: 30px;
    color: #efefef;
    content: "\f100"
}

#single-service-area .slogan-box .text-holder h3 {
    color: #2a58a5;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    font-style: italic
}

#single-service-area .offer-content .img-holder img {
    margin-left: 15px;
    width: 94% !important
}

.service-tab-box .tab-content-box .single-tab-content .bottom-content ul i,
.service-tab-box .tab-content-box .single-tab-content .bottom-content ul li i {
    color: #2a58a5;
    font-size: 14px;
    display: inline-block;
    padding-right: 8px
}

.blog-single-area .single-blog-post .text-holder .text h1,
.blog-single-area .single-blog-post .text-holder .text ul,
.blog-single-area .single-blog-post .text-holder p.mar-bottom,
.profit-improvement-box .text-holder .text,
.project-single-area .project-analysis .text-holder p.mar-btm,
.project-single-area .project-info ul li {
    margin-bottom: 15px
}

.pagination-controls,
.project-filter,
.service-tab-box .tab-content-box .single-tab-content .top-content {
    margin-bottom: 10px
}

.resize-captcha .g-recaptcha {
    transform: scale(.93);
    transform-origin: 0 0
}

.project-single-area {
    padding-top: 50px;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    color: #fff
}

.project-single-area .sec-title {
    padding-bottom: 25px;
    margin-top: -3px
}

.project-single-area .sec-title h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 400
}

.project-single-area .sec-title .border {
    height: 3px;
    background: #2a58a5;
    width: 50px;
    display: block;
    margin: 15px 60px 0
}

.blog-default-area .single-blog-post,
.blog-large-area .single-blog-post,
.project-single-area .single-project-img-box,
.single-shop-content .mb-50 {
    margin-bottom: 50px
}

.project-single-area .project-info ul {
    background: #f4f4f4;
    display: block;
    padding: 23px 20px 25px
}

.project-single-area .project-info ul li b {
    width: 100px;
    display: inline-block;
    color: #2a58a5;
    font-size: 16px;
    font-weight: 500;
    font-family: Poppins, sans-serif
}

.project-single-area .project-info ul li span {
    padding-left: 20px;
    color: #909090;
    font-weight: 400
}

.project-single-area .legal-work-content h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 8px
}

@media only screen and (max-width:400px) {
    .resize-captcha-threatsploit-detail .g-recaptcha {
        transform: scale(.75);
        transform-origin: 0 0
    }
}

.project-single-area .legal-work-content span {
    color: #2a58a5;
    margin: 0
}

.project-single-area .legal-work-content p {
    margin: 20px 0 0;
    font-size: 1.1rem
}

.project-single-area .legal-work-content a {
    margin: 16px 0 0
}

.project-single-area .project-analysis {
    overflow: hidden;
    display: block;
    padding-top: 90px;
    padding-bottom: 67px;
    margin-top: 90px;
    background: #fff
}

#rightSlider,
.project-analysis-result .inner-content .text,
.single-sidebar .popular-post {
    margin: 20px 0
}

.project-single-area .project-analysis .sec-title h2 {
    font-size: 50px !important;
    text-align: center
}

.project-single-area .project-analysis .text-holder p {
    color: #504d4d
}

.project-single-area .project-analysis-result {
    overflow: hidden;
    display: block;
    padding: 70px 0;
    position: relative;
    background: #f4f4f4
}

.project-single-area .project-analysis-result .img-holder {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

.project-single-area .project-analysis-result .img-holder img {
    max-width: none;
    width: 100%;
    height: 100% !important
}

.project-single-area .project-analysis-result .inner-content {
    background: #fff;
    display: block;
    padding: 40px 40px 20px
}

#blog-area {
    padding-bottom: 30px
}

.blog-default-area .post-pagination {
    margin-top: 0;
    margin-bottom: 40px
}

.blog-large-area .blog-post {
    margin-right: 70px;
    border-right: 1px solid #f2f2f2;
    padding-right: 30px;
    margin-top: -140px;
    padding-top: 90px;
    margin-bottom: -90px;
    padding-bottom: 90px
}

.blog-large-area .single-blog-post .text-holder .blog-title {
    font-size: 24px;
    line-height: 30px;
    color: #2a58a5
}

.blog-grid-area .post-pagination {
    margin-top: 10px
}

.sidebar-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    margin-left: -70px
}

.sidebar-wrapper .single-sidebar {
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    border: 1px solid #61387B;
    padding: 15px 30px;
    border-radius: 16px;
}

.sidebar-wrapper .single-sidebar .sec-title {
    overflow: hidden;
    padding-bottom: 0;
    margin-top: 0;
    color: #fff
}

.sidebar-wrapper .single-sidebar .sec-title h3 {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    text-align: start;
    padding-top: 5px
}

.sidebar-wrapper .single-sidebar .search-form input[type=text] {
    background: #fff;
    border: 1px solid #f4f4f4;
    color: #ababab;
    display: block;
    font-size: 15px;
    font-weight: 500;
    height: 50px;
    letter-spacing: 1px;
    padding-left: 15px;
    padding-right: 55px;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    width: 100%
}

.ytvideo,
.ytvideo iframe {
    width: 100% !important
}

.sidebar-wrapper .single-sidebar .search-form button {
    background: #2a58a5;
    color: #fff;
    display: block;
    height: 50px;
    padding: 12px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: .5s;
    transition: .5s;
    width: 50px
}

.cart-area .cart-table tbody tr .prod-column .column-box .title,
.checkout-area .table .cart-table tbody tr .product-column .column-box .product-title,
.overlay p,
.sidebar-wrapper .single-sidebar .latest-product li .title-holder,
.single-sidebar .popular-post li .title-holder,
.soc-points {
    padding-left: 20px
}

.sidebar-wrapper .single-sidebar .search-form input[type=text]:focus {
    border: 1px solid #2a58a5;
    background: #fff;
    color: #000
}

.single-sidebar .categories {
    display: block;
}

.single-sidebar .categories li {
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    position: relative
}

.single-sidebar .categories li:last-child,
.single-sidebar .popular-post li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.single-sidebar .categories li a {
    color: #fff !important;
    transition: .5s;
    font-size: 14px;
    font-weight: 400;
    position: relative
}

.single-sidebar .categories li a:before {
    position: absolute;
    left: -25px;
    content: "\271A"
}

.single-sidebar .popular-post li {
    margin-bottom: 20px;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 0;
    height: auto
}

.single-sidebar .popular-post li .img-holder {
    display: block;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 90px;
    height: auto
}

.single-sidebar .popular-post li:hover .img-holder img {
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    transform: scale(1.2, 1.2)
}

.contact-author-info.contact-info .social-icon li a i,
.single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a i {
    color: #fff;
    font-size: 16px;
    transition: .5s
}

.single-sidebar .popular-post li .title-holder a .post-title {
    color: #2a58a5;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    position: relative;
    margin: 0 0 10px;
    transition: .5s;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

.single-sidebar .popular-post li .title-holder .post-date {
    color: #909090;
    display: block;
    transition: .5s;
    font-weight: 400;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif
}

.single-sidebar .popular-post li .title-holder .post-date i {
    font-size: 13px;
    display: inline-block;
    padding-right: 5px;
    color: #2a58a5
}

.sidebar-wrapper .single-sidebar .product-tag,
.single-sidebar .popular-tag {
    margin-left: -3px;
    margin-right: -3px;
    margin-top: -5px
}

.sidebar-wrapper .single-sidebar .product-tag li,
.single-sidebar .popular-tag li {
    display: inline-block;
    margin: 0 3px 10px
}

.single-sidebar .popular-tag li a {
    border: 1px solid #f4f4f4;
    color: #909090;
    display: block;
    font-size: 15px;
    font-weight: 400;
    padding: 4px 12px;
    transition: .5s;
    border-radius: 2px
}

.blog-single-area .blog-post {
    margin-right: 70px;
    border-right: 1px solid #f2f2f2;
    padding-right: 30px;
    margin-top: -90px;
    padding-top: 90px;
    margin-bottom: -90px;
    padding-bottom: 90px
}

.blog-single-area .single-blog-post {
    margin-bottom: 90px
}

.blog-single-area .single-blog-post .img-holder img {
    transform: none
}

.blog-single-area .single-blog-post .text-holder {
    padding-bottom: 0;
    padding-left: 0;
    box-shadow: 0 2px 10px 0 #fff
}

.blog-single-area .single-blog-post .text-holder .blog-title {
    font-size: 25px !important;
    color: #374151 !important;
    font-weight: 600;
    line-height: 35px
}

.blog-single-area .single-blog-post .text-holder blockquote {
    line-height: 5px;
    margin-top: 8px;
    margin-left: 30px
}

.blog-single-area .single-blog-post .text-holder h1,
h2 span {
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 25px
}

.blog-single-area .single-blog-post .text-holder h1,
h2 {
    color: var(--dark-bg-green);
    font-size: 25px !important;
    font-weight: 500;
    line-height: 1.42
}

.blog-single-area .single-blog-post .text-holder h3,
.blog-single-area .single-blog-post .text-holder h3 span {
    color: #374151 !important;
    font-size: 20px !important
}

.blog-single-area .single-blog-post .text-holder .text span {
    font-family: muli, "Myriad Pro", Helvetica, Arial, sans-serif !important;
    font-size: 1.1rem !important;
    background-color: transparent !important
}

.blog-single-area .single-blog-post .text-holder .text p {
    text-align: justify !important;
    color: #374151 !important;
    font-size: 16px;
    font-weight: 400;
    margin: 1rem 0;
    line-height: 1.78;
    font-family: poppins, sans-serif;
}

.blog-single-area .single-blog-post .text-holder .text p span {
    color: #374151 !important
}

.blog-single-area .single-blog-post .text-holder .text ul li {
    color: #374151 !important;
    list-style-type: disc;
    margin-left: 20px;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-left: .5rem;
    position: relative;
    font-family: poppins, sans-serif;
}

.blog-single-area .single-blog-post .text-holder .text ul li a {
    font-size: 16px;
    line-height: 24px;
    color: #2a58a5 !important;
    list-style-type: square
}

.blog-single-area .single-blog-post .text-holder .text table {
    width: 100% !important;
    border-color: #2a58a5 !important;
    border-width: 2px;
    border-collapse: separate !important;
    color: #000 !important
}

.blog-single-area .single-blog-post .text-holder .text table td {
    border-color: #2a58a5 !important
}

.blog-single-area .single-blog-post .text-holder .text p a {
    color: #0275d8 !important;
    text-decoration: underline;
    font-weight: 500
}

.blog-single-area .bottom-content-box {
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 33px
}

.overlay p {
    padding-bottom: 20px
}

.blog-single-area .tag-box .left ul li {
    display: inline-block;
    margin-right: 10px;
    line-height: 35px
}

.tag-box .left ul li p {
    margin-bottom: 0;
}

.blog-single-area .tag-box .left ul li span {
    background: #32cd32;
    color: #fff;
    height: 35px;
    width: 35px;
    display: block;
    text-align: center;
    border-radius: 50%;
    line-height: 36px;
    transition: .5s
}

.blog-single-area .tag-box .tag p span {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize
}

.single-shop-content .content-box h4 {
    color: #2a58a5;
    font-size: 14px
}

#shop-area .sidebar-wrapper .sec-title,
.blog-single-area .add-comment-box .title,
.product-tab-box .tab-content .review-form .title,
.related-product .sec-title,
.sp_bottom_30 {
    padding-bottom: 30px
}

.contact-form {
    border: 1px solid #f2f2f2;
    display: block;
    padding: 70px 40px 10px;
    -moz-box-shadow: 0 3px 10px #f2f2f2;
    -webkit-box-shadow: 0 3px 10px #f2f2f2;
    box-shadow: 0 3px 10px #f2f2f2
}

.contact-form form input[type=email],
.contact-form form input[type=number],
.contact-form form input[type=text],
.contact-form form textarea {
    border: 1px solid #f4f4f4;
    color: #999;
    display: block;
    font-size: 15px;
    height: 55px;
    margin-bottom: 30px;
    padding: 0 20px;
    width: 100%;
    transition: .5s
}

.contact-form form textarea {
    height: 180px;
    margin-bottom: 40px;
    padding: 10px 20px
}

.contact-form form button {
    width: 100%;
    padding: 23px 0;
    background: #2a58a5;
    color: #fff;
    cursor: pointer
}

.single-product-item {
    background: #fff;
    margin-bottom: 40px;
    transition: .7s
}

.single-product-item:hover {
    -webkit-box-shadow: 0 3px 4px -1px #dcd9d9;
    -moz-box-shadow: 0 3px 4px -1px #dcd9d9;
    box-shadow: 0 3px 4px -1px #dcd9d9
}

.sidebar-wrapper .single-sidebar .latest-product li .img-holder img,
.single-product-item .img-holder img {
    transform: scale(1);
    transition: .7s;
    width: 100%
}

.project-preview:hover .hover-overlay img,
.sidebar-wrapper .single-sidebar .latest-product li:hover .img-holder img,
.single-product-item:hover .img-holder img {
    transform: scale(1.1)
}

.single-product-item .img-holder .overlay-style-one {
    background-color: rgba(0, 0, 0, .8)
}

.single-product-item .img-holder .overlay-style-one .box .content a i {
    background: #2a58a5;
    opacity: 0;
    transform: scale(.3);
    transition: .5s;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #2a58a5;
    font-weight: 500;
    padding: 0;
    font-size: 15px;
    color: #fff
}

.sidebar-wrapper .single-sidebar .latest-product li:hover .img-holder .overlay-style-one .box .content a i,
.single-product-item:hover .img-holder .overlay-style-one .box .content a i {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.single-product-item:hover .img-holder .overlay-style-one .box .content a:hover i {
    background: #2a58a5;
    border: 1px solid #2a58a5
}

.single-product-item .title-holder {
    padding: 18px 0 0;
    border: 1px solid #f7f7f7;
    background: #fff
}

.single-product-item .title-holder .top {
    overflow: hidden;
    padding: 0 15px 18px
}

.single-product-item .title-holder .top h5 {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 10px
}

.single-product-item .title-holder .top .rate {
    color: #2a58a5;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif
}

.single-product-item .title-holder .bottom {
    border-top: 1px solid #f2f2f2;
    overflow: hidden;
    display: block;
    padding: 10px 15px
}

.single-product-item .title-holder .bottom .cart-button a {
    color: #848484;
    font-size: 14px;
    font-family: Poppins, sans-serif;
    transition: .5s
}

.single-product-item .title-holder .bottom .cart-button a:hover {
    color: #2a58a5;
    text-decoration: underline
}

.single-product-item .title-holder .bottom .cart-button a i {
    display: inline-block;
    padding-right: 3px
}

.single-product-item .title-holder .bottom .review-box ul li i {
    color: #2a58a5;
    font-size: 12px
}

.lura-action-area {
    padding-top: 40px;
    height: auto;
}

.lura-action-area .center-img a {
    height: 100%;
    display: block
}

.hold-image a {
    display: block;
    height: 100%
}

.blueray {
    position: absolute;
    float: left;
    bottom: 0
}

.blueray .blackray,
.cherry,
.cons {
    position: relative;
    max-width: 100% !important
}

.blueray .blackray {
    width: 50px;
    height: 50px;
    border-bottom: 150px solid #2a58a5;
    border-right: 160px solid transparent;
    display: flex
}

.cherry {
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    font-family: 'Chalkduster, fantasy';
    text-shadow: 2px 4px 4px #000;
    top: 80px;
    left: 12px
}

.cons {
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 35px;
    color: gold;
    text-shadow: 4px 4px 4px #000, 0 0 25px #00f, 0 0 5px #00008b;
    top: 115px;
    left: 14px
}

.pce,
.pct .pce .pec,
.pct .pce .pec img {
    max-width: 100%
}

.overlay,
.overlay-career {
    left: 0;
    overflow: hidden
}

.str-btn {
    top: 57%;
    right: -8.8%;
    z-index: 999;
    transform: rotate(-90deg);
    background: #2a58a5;
    padding: 10px 15px
}

#dis-box,
.line {
    background: #fff
}

.star {
    color: #fff;
    font-size: 14px;
    font-weight: 520
}

#dis-box {
    margin-top: -5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    height: 100%
}

.latest-project-area .left-content .hg {
    background: #2a58a5;
    color: #fff;
    padding: 10px 15px;
    font-size: 20px;
    margin: 0 0 16px;
    text-align: center
}

.latest-project-area .left-content .pg {
    color: #5a5858;
    margin: 0;
    padding: 20px
}

.add-padd,
.carousel-inner {
    box-shadow: 0 10px 30px rgba(16, 28, 47, .08), 0 8px 22px rgba(16, 28, 47, .06), 0 5px 10px rgba(16, 28, 47, .04)
}

.overlay p,
.res-sec-4 .content-2 {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif
}

.line {
    width: 70px;
    height: 2px;
    display: block;
    margin-bottom: 10px;
    border: none
}

.res-align {
    margin-top: 40px;
    margin-left: 160px
}

.add-padd {
    padding: 30px 75px;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    ;
    color: #fff;
    border-radius: 0 1.25rem 1.25rem;
    margin-top: -130px
}

.orange-box,
.violet-box {
    height: 100%;
    background: var(--dark-bg-puple);
    transform: rotate(4deg);
    z-index: -1;
    transition: .3s
}

.pack-slider {
    height: 500px
}

.carousel-inner {
    width: 100%;
}

.position-relative:hover .orange-box,
.violet-box {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    ;
    visibility: visible
}

#carouselExampleCaptions .carousel-control-prev {
    left: -80px !important
}

#carouselExampleCaptions .carousel-control-next {
    right: -80px !important
}

.report-download .form-control {
    padding: 15px 27px;
    margin-bottom: 5px
}

.single-sidebar::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 100%;
    width: 20px;
    margin-right: -1px;
    height: 48px;
    background: var(--dark-bg-puple);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%)
}

.orange-box {
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: visible
}

.color-gradientBg,
.violet-box {
    opacity: 1;
    position: absolute;
    width: 100%
}

.color-gradientBg,
.gradientBg {
    background-image: var(--purple-bg-gradient);
    top: 0;
    bottom: 0;
    height: 100%
}

.box-contents,
.col-card-description,
.left-content-right-cta .white-box,
.main-div,
.modal-content {
    box-shadow: 0 5px 30px 0 rgb(147 161 176 / 25%)
}

.overlay h4 {
    font-size: 1.2rem;
    font-weight: 550;
    margin-bottom: .5rem;
    text-align: center;
    width: 100%;
    line-height: 1.2;
    margin-top: 0
}

.ytvideo,
.black,
.btn-div,
.btn-div:after,
.gradientBg,
.overlay,
.overlay h4 {
    position: absolute
}

.gradientBg {
    width: 100%;
    opacity: 0
}

.position-relative:hover .gradientBg {
    opacity: 1;
    visibility: visible;
    transition: .3s
}

.owl-item.active .owl-fade-in,
.position-relative:hover .orange-box {
    opacity: 1
}

.black {
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, .46);
    top: 0;
    opacity: 1
}

.overlay {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0;
    transition: .5s;
    padding: 60px 20px 60px 0
}

.overlay p {
    text-align: center;
    width: 100%;
    margin: 25% 0 0;
    color: #3f4d62;
    font-size: .911rem;
    font-weight: 400;
    line-height: 1.3
}

.timeline-subtitle {
    margin-bottom: 0 !important
}

.brand-new {
    margin-bottom: 100px;
    margin-top: 0
}

.col-card-description {
    border-radius: .5rem !important;
    background-color: #fff !important;
    padding: 3rem 3rem 0;
    position: relative;
    z-index: 2;
    margin-top: 45px;
    margin-bottom: 100px
}

.mb-48 {
    margin-bottom: 3rem !important
}

.col-card-description .border-right:not(:last-child):after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    right: 4px;
    top: 0;
    background: linear-gradient(180deg, #f9fafa, #e7ebee 36%, #e5e9ec 51%, #eaedf0 67%, #fff);
    display: block
}

.btn-blue,
.mt-md-24 {
    display: inline-block;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    text-align: center;
    text-decoration: none;
    user-select: none;
    vertical-align: middle
}

.brand-new .box-content .mb-24 {
    margin-bottom: 0rem !important;
    font-size: 2.75rem;
    letter-spacing: -2px;
    line-height: 3.5rem;
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.semi {
    font-weight: 500;
    margin-top: 0;
    letter-spacing: -.2px;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.5rem !important
}

.main-ct {
    margin-bottom: 1rem;
    margin-top: 0;
    font-weight: 500;
    letter-spacing: .5px;
    font-size: 1rem;
    line-height: 1.625rem;
    color: #1d2b36
}

.mt-md-24 {
    margin-top: 1.5rem !important;
    line-height: 22px;
    padding: .4125rem 1rem;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    border-color: #0d6efd;
    color: #fff !important;
    border-radius: .25rem;
    font-size: .875rem;
    touch-action: none !important
}

.left-content-right-cta {
    margin: 50px auto
}

.left-content-right-cta .white-box {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    padding: 4.5rem 5rem !important
}

.form-control.c-verify {
    padding: 9px 27px;
}

.fox-form-wrap form .btn,
select {
    padding: 10px
}

.btn-blue {
    background-color: #2a58a5;
    color: #fff;
    line-height: 26px;
    padding: .65rem 1.5rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: -.4px
}

.explain-section .box img,
.gatsby-image-wrapper-constrained {
    vertical-align: top;
    display: inline-block
}

.size-48 {
    font-size: 1.7rem
}

.days li.selected::before,
.fabe-time-chooser .fabe-time-holder .fabe-time-slot {
    box-shadow: inset 0 -1px #8ea8be3d, inset 0 0 0 1px #8ea8be29
}

.box-contents {
    border-radius: .5rem;
    background-color: #fff;
    padding: 1rem 2rem
}

.box-contents .right-border {
    border-right: 1px solid #e5e9ec
}

.my-16 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important
}

.ps-md-0 {
    padding-left: 0 !important
}

.input-group-addon {
    border-left: 5px solid #2a58a5;
    border-right: 0;
    background-color: #f1f3f5;
    border: 1px solid #f1f3f5;
    border-radius: 5px
}

.control-color {
    border-left: 0 #fff;
    background-color: #f1f3f5;
    border: 1px solid #f1f3f5;
    border-radius: 5px;
    color: #33475b
}

.bt-mdl {
    left: 10px;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    margin-top: 10px
}

.main-div,
.marg-t,
.modal-body,
.modal-content {
    background-color: #fff
}

.col-form-label,
.control-label {
    color: #1d2b36;
    font-size: .875rem;
    font-weight: 550;
    letter-spacing: -.4px;
    line-height: 1.625rem
}

.h-even .card-body {
    height: auto;
    border-top: 5px solid var(--dark-bg-green);
    padding: 10px 20px 20px
}

.card-body .text-start ul li {
    position: relative;
    padding-left: 37px;
    display: inline-block;
    margin-bottom: 10px;
    width: 100%
}

.card-body .text-start .icon-holder {
    position: absolute;
    left: 0
}

.btn-div .btn-open .fa-play,
.pce,
.pct,
.pec {
    position: relative
}

.title-test h3 {
    font-size: 18px;
    font-weight: 550;
    margin-bottom: 20px
}

.marg-t {
    margin-top: 0;
    border-top: 1px solid #2a58a5 !important;
    padding-top: 70px !important
}

.marg-t .pd-res {
    padding: 0 90px
}

.res-sec2 {
    margin-top: 70px;
    padding-bottom: 30px
}

.res-sec2 .content-1 h1 {
    line-height: 40px;
    font-size: 30px;
    font-weight: 400 !important;
    margin-bottom: 0
}

.res-sec2 .content-1 .border-center {
    display: block;
    width: 80px;
    height: 5px;
    background: #2a58a5;
    margin: 10px auto 35px;
    border-radius: 2px
}

.res-sec2 .content-2 {
    margin: 0 15% 60px
}

.pd-res .heading {
    margin-top: 60px;
    text-align: center
}

.pd-res .heading h5 {
    margin-bottom: 40px;
    line-height: 3.805rem;
    font-size: 2.75rem;
    word-spacing: .1rem;
    font-weight: 645;
    color: #e01d8d
}

.pd-res .contents {
    margin-top: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center
}

.res-sec-4 .content-2 {
    margin: 30px 7%;
    color: #3f4d62;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5
}

.border-design,
.sec-pd-one .callto-action-imgbox {
    display: block;
    padding-left: 40px;
    padding-top: 40px;
    z-index: 1;
    margin-bottom: 40px;
    position: relative
}

.sec-pd-one .callto-action-imgbox {
    margin-right: 70px
}

.hover-overlay,
.sec-pd-one .callto-action-imgbox img {
    width: 100%;
    height: auto
}

.main-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: none !important;
    border-radius: .75rem !important;
    padding: 0 40px
}

.main-div .img-holder {
    display: flex;
    align-items: center;
    max-width: 600px
}

.btn-div .btn-open,
.fabe-times .time-sub-heading,
.pec,
header .icons {
    display: flex;
    justify-content: center
}

.color-violet {
    padding: 15px 40px 0;
    background-color: #0ca8c5
}

.white-change {
    background-color: #90ee90;
    color: #000
}

.white-change:hover {
    background-color: #9ce3db;
    color: #000
}

.captcha-size-reduce {
    transform: scale(.77);
    -webkit-transform: scale(.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0
}

.pct {
    width: 100%
}

.pce {
    background: #fff
}

.ml-20,
.pct .pce .arabindo {
    margin-left: 20px
}

.pec {
    align-items: center;
    text-align: center
}

.btn-div {
    margin: 0 0 0 auto;
    z-index: 3;
    bottom: 39%
}

.btn-div .btn-open {
    max-width: 100% !important;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    align-items: center;
    cursor: pointer !important;
    border: none;
    z-index: 3
}

.btn-div .btn-open .fa-play {
    max-width: 100% !important;
    color: #0f0;
    margin-left: 5px;
    font-size: 20px
}

.calendar ul,
.month-holder h5,
.popup .heading .close,
.popup .heading h5 {
    color: var(--light-text)
}

.ytvideo {
    z-index: 1;
    top: 0;
    height: 100%;
    object-fit: cover
}

.ytvideo iframe {
    height: 100% !important;
    object-fit: cover
}

#button-hide-video {
    position: absolute;
    cursor: pointer;
    right: -5%;
    top: -15%;
    font-size: 30px
}

.btn-div:before {
    content: '';
    position: absolute !important;
    object-fit: cover;
    border-radius: 50% !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    animation: 3s linear infinite ripple-white3;
    z-index: 1
}

.btn-div:after {
    content: '';
    border: 10px solid #0f0;
    border-radius: 50% !important;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    animation: 1.5s linear .4s infinite bloom2;
    opacity: 0;
    z-index: 1
}

.item {
    transition: all 0.3s ease;
    width: 135px;
    height: 135px;
    background-color: #fff;
    transform: rotate(45deg);
    border-radius: 20px;
    box-shadow: 0 3px 9px 0 rgba(159, 175, 182, 0.33);
    margin: 30px;
    padding: 15px;
}

.comb_5,
.comb_1,
.comb_2,
.comb_3,
.comb_4 {
    display: flex;
    justify-content: center;
}

.change {
    width: 135px;
    height: 135px
}

.comb_1 .item img,
.comb_2 .item img,
.comb_3 .item img,
.comb_4 .item img,
.comb_5 .item img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    transform: rotate(-45deg);
}

.blog_section .flex-align,
.comb_1 .item,
.comb_2 .item,
.comb_3 .item,
.comb_4 .item,
.comb_5 .item {
    display: flex;
    align-items: center;
    justify-content: center
}

.cover img {
    width: 60% !important;
    ;
    height: 60% !important;
    object-fit: cover !important;
    border-radius: 100%;
}

.main-card {
    height: 100%;
    width: 100%;
    transition: transform 1.5s;
    transform-style: preserve-3d;
    animation: 3s infinite flip
}

.back,
.front {
    height: 100%;
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff
}

.back {
    transform: rotateY(180deg)
}

@-webkit-keyframes flip {

    0%,
    100% {
        transform: rotateY(0)
    }

    40%,
    60% {
        transform: rotateY(180deg)
    }
}

@keyframes flip {

    0%,
    100% {
        transform: rotateY(0)
    }

    40%,
    60% {
        transform: rotateY(180deg)
    }
}

.logos {
    padding: 60px 0;
    white-space: nowrap
}

.logos-slide {
    display: inline-block;
    width: max-content;
    animation: 15s linear infinite slide
}

.logos-slide img {
    height: 110px !important;
    width: 260px;
    margin: 0 10px
}

.our-service-card i,
.pagination span,
.pagination-controls label,
.toggle span {
    margin-right: 10px
}

@keyframes slide {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

.btn.expand-button {
    padding: .625rem 0.875rem;
}

.expand-button {
    text-align: center;
    margin: 30px auto;
    display: block;
    border-radius: 0.7rem;
    line-height: 1.2;
    font-size: 0.9rem;
    padding: 10px 15px;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    color: #fff;
    cursor: pointer;
    outline: 0 !important;
    border: none !important
}

.expand-button:focus,
.expand-button:hover {
    background-color: linear-gradient(20deg, #03c0ce 0%, indigo 100%);
    color: #fff;
    outline: 0
}

.mt-26 {
    margin-top: 0;
    padding: .7rem 2rem;
    cursor: pointer
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99999
}

.days li::before,
.popup {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.popup {
    position: absolute;
    width: 1000px;
    max-width: 100%;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: 0 0 50px rgba(183, 199, 240, .25);
    z-index: 999999;
    border-radius: 18px
}

.popup .heading {
    border-bottom: 1px solid rgba(142, 168, 190, .16);
    margin-bottom: 24px
}

.popup .heading h5 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 0;
    font-weight: 600
}

.popup .heading .close {
    font-size: 25px;
    font-weight: 600;
    cursor: pointer
}

.popup-overlay .popup .content {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 85vh;
    position: relative;
    border-radius: 18px
}

.time-form-holder {
    background: #f4f9fe;
    height: 750px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center
}

.closebtn,
.days li.selected::before,
.meetingbtn {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
}

.content .calendar-heading,
.fabe-times .time-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: initial;
    width: 100%;
    margin-left: 0;
    padding-left: 0
}

.content .calendar-holder .calendar-heading h6,
.fabe-times .time-heading h6 {
    color: #29343d;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0
}

.error-msg {
    color: red;
    font-size: 14px
}

.terms-div {
    margin-bottom: .5rem
}

.terms-div p {
    color: var(--dark-bg-green);
    margin-bottom: 0
}

.home-terms-div {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.home-terms-div p {
    color: #fff;
    margin-bottom: 0
}

#enquiry_submit {
    padding: 8px 40px;
    background-image: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    border: none;
}

.submit-div {
    margin-bottom: 20px
}

#bookmeeting_terms {
    width: 20px;
    height: 20px;
    margin-right: 10px
}

.content .calendar-holder {
    width: 720px;
    animation: 1s swashIn
}

.ml-25 {
    margin-left: 25px
}

.wrapper {
    width: 520px;
    border-radius: 30px;
    margin: auto
}

.wrapper header {
    display: flex;
    align-items: center;
    padding: 25px 30px 10px;
    justify-content: space-between
}

header .icons span {
    margin: 0 10px;
    cursor: pointer;
}

.icons span:last-child {
    margin-right: -10px
}

header .current-date,
header .responsive-month-year {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--light-text)
}

.month-holder {
    width: 260px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff
}

.month-holder h5 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 50px
}

.month-list-ul li {
    font-size: 1.1rem;
    padding-top: 15px
}

.month-list-ul .month-list.active {
    font-size: 1.25rem;
    font-weight: 800
}

.nav-slider .nav-link.active,
.tab-navigation select {
    font-weight: 700;
    color: #101c2f
}

.calendar {
    padding: 20px
}

.calendar ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    font-size: 22px
}

.calendar li {
    color: #333;
    width: calc(100% / 7);
    font-size: 1.07rem
}

.calendar .weeks li {
    font-weight: 600;
    cursor: default;
    color: var(--bs-body-color)
}

.calendar .days li {
    z-index: 1;
    cursor: pointer;
    position: relative;
    padding-top: 15px;
    padding-bottom: 12px
}

.days li.inactive {
    color: #aaa
}

.days li::before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    z-index: -1;
    border-radius: 50%
}

.meetingbtn {
    padding: 13px 25px;
    width: 100%
}

.closebtn {
    position: absolute;
    right: -10px;
    z-index: 9;
    top: -17px;
    color: #fff;
    font-size: 20px;
    width: 50px;
    height: 50px;
    padding-top: 16px;
    padding-left: 16px;
    border-radius: 100%;
    cursor: pointer
}

.aside,
.nav-pills-outline .nav-item {
    display: flex
}

.gdpr-main-box {
    background: linear-gradient(to bottom, #fff 0, #e7eaef 100%)
}

.popup-2 {
    display: none;
    animation: 1s swashIn;
    width: 720px;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    scrollbar-width: thin
}

@keyframes swashIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0)
    }

    90% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(.9, .9)
    }

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

.content .time-form-holder .fabe-times {
    animation: 1s swashIn !important;
    overflow-y: scroll;
    scrollbar-width: thin
}

.fabe-time-chooser {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center
}

.fabe-time-chooser .fabe-time-holder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 415px;
    height: 100%;
    width: 100%;
    margin: 35px 0 auto
}

.fabe-time-chooser .fabe-time-holder .fabe-time-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    border-radius: 11px;
    border: none;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    color: #fff;
    cursor: pointer;
    transition: .5s ease-out
}

.fabe-confirm-book-dialog {
    display: flex;
    flex-direction: column;
    max-width: 450px;
    padding: 0 24px;
    margin-top: 0;
    width: 100%
}

.fabe-confirm-book-dialog .popup-header-2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline
}

.fabe-confirm-book-dialog .popup-header-2 .form-heading {
    margin-bottom: .75rem
}

.fabe-confirm-book-dialog .popup-header-2 .form-heading h6 {
    font-family: Inter, "Inter fallback", sans-serif;
    color: #151d23;
    margin: 0 0 0 10px;
    line-height: 100%;
    font-size: 1rem;
    font-weight: 600
}

.fabe-confirm-book-dialog .popup-header-2 .form-sub-heading {
    display: flex;
    flex-wrap: wrap
}

.fabe-confirm-book-dialog .popup-header-2 .form-sub-heading h6,
.fabe-confirm-book-dialog .popup-header-2 .form-sub-heading p {
    font-family: Inter, "Inter fallback", sans-serif;
    line-height: 100%;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(21, 29, 35, .8);
    margin-bottom: 0;
    margin-left: 10px;
}

.fabe-confirm-book-dialog .popup-header-2 .form-sub-heading h6 {
    font-weight: 600;
    margin-left: 10px;
    text-decoration-line: underline;
    cursor: pointer
}

.popup-2 .input-box {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    padding: .4rem 1.25rem
}

.popup-2 .input-box input,
.popup-2 .input-box textarea {
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    border: none;
    outline: 0;
    resize: none
}

.popup-2 .input-box input::placeholder,
.popup-2 .input-box textarea::placeholder {
    color: #2a58a5;
    font-weight: 500;
    opacity: 1
}

.popup-2 .input-box input:-ms-input-placeholder,
.popup-2 .input-box textarea:-ms-input-placeholder {
    color: #2a58a5;
    font-weight: 500
}

.popup-2 .input-box input::-ms-input-placeholder,
.popup-2 .input-box textarea::-ms-input-placeholder {
    color: #2a58a5;
    font-weight: 500
}

.popup-2 .input-box span {
    position: absolute;
    left: 1.25rem;
    padding: 5px 0;
    font-size: 15px;
    font-weight: 500;
    margin: 5px 0;
    pointer-events: none;
    transition: .5s;
    color: #2a58a5
}

.popup-2 .form .input-box input:focus~span,
.popup-2 .form .input-box input:valid~span,
.popup-2 .form .input-box textarea:focus~span,
.popup-2 .form .input-box textarea:valid~span {
    color: #2a58a5;
    font-size: 12px;
    transform: translateY(-20px)
}

.form .confirm-meeting {
    width: 100%;
    height: 2.5rem;
    cursor: pointer;
    border-radius: .5rem;
    margin: 0 0 2rem;
    border: none;
    background: #2a58a5;
    color: #fff;
    font-weight: 600
}

@media only screen and (min-width:950px) {

    .content .time-form-holder .fabe-times,
    .popup-2 {
        height: 75vh
    }

    .fabe-confirm-book-dialog {
        height: 100%
    }
}

@media only screen and (max-width:950px) {
    .nav-item-filter .nav-link-filter {
        justify-content: flex-start !important;
        overflow-x: scroll
    }

    .content .time-form-holder .fabe-times {
        padding-top: 0;
        margin-top: 75px;
        height: 30vh;
        overflow-y: scroll;
        scrollbar-width: thin
    }

    .content .calendar-holder {
        width: 600px
    }

    .popup-overlay .popup .content {
        flex-direction: column
    }

    .time-form-holder {
        position: relative;
        height: 100%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 0;
        width: 1000px;
        justify-content: center
    }

    .fabe-time-chooser {
        margin-bottom: 50px
    }

    .popup-2 {
        margin-top: 50px;
        height: 30vh;
        overflow-y: auto;
        align-items: flex-start
    }
}

@media only screen and (max-width:830px) {
    .content .calendar-holder {
        width: 550px
    }

    .wrapper {
        width: 450px
    }
}

@media only screen and (max-width:450px) {
    .content .wrapper {
        width: 100%
    }

    .fabe-time-chooser .fabe-time-holder {
        max-width: 100%;
        padding: 0 5px
    }

    .content .time-form-holder .fabe-times,
    .popup-2 {
        width: 100vw;
        margin-top: 75px;
        height: 50vh
    }

    .time-form-holder {
        width: 600px
    }
}

.home-blog-container,
.home-container {
    max-width: 1376px;
    width: 100%;
    padding-left: 32px !important;
    padding-right: 32px !important
}

.glider-contain,
.home-carousel .home-carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.home-carousel .carousel-item {
    opacity: 0;
    transform: none;
    position: relative;
    display: none;
    float: left;
    width: 100%;
    height: 100% !important;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out
}

.home-carousel .carousel-item.active {
    display: block;
    z-index: 1;
    opacity: 1
}

.carousel-item .section-light-down .section-header {
    margin-bottom: 6.5rem !important;
    height: 100%
}

.carousel-item .section-light-down .section-header .home-h1 {
    font-size: 2.575rem !important;
    letter-spacing: -.022em;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 2rem;
    margin-top: 0;
    -webkit-background-clip: text;
    font-family: Inter, sans-serif
}

.fade-in-md-up {
    animation-name: fade-in-up;
    animation-duration: 1s;
    animation-fill-mode: both
}

.animation-delay-2 {
    animation-delay: .2s
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(3rem)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.section-header-subtitle {
    letter-spacing: -.017em;
    margin-bottom: 3rem !important
}

.animation-delay-3 {
    animation-delay: .3s
}

.carousel-controls {
    align-items: center;
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 15
}

.card-clear a,
.landing-btn {
    color: #fff;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    display: inline-block;
    text-align: center;
    padding: .625rem 0.875rem;
    font-size: 0.9rem
}

.landing-btn {
    cursor: pointer;
    line-height: 1.2;
    border-radius: 0.7rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.home-carousel-controls {
    padding-bottom: 3rem !important
}

.home-carousel-controls .carousel-indicators-primary.carousel-indicators-pills li:not(.active) {
    background-color: transparent;
    border-color: indigo
}

.home-carousel-controls .carousel-indicators-pills li {
    border: 1.5px solid #fff;
    width: 4rem;
    border-radius: .5rem;
    height: 1rem;
    cursor: pointer;
    margin-right: 10px;
}

.carousel-indicators-primary.carousel-indicators li.active {
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    border: none
}

.fade-in-lg-right {
    animation-name: fade-in-right;
    animation-duration: .5s;
    animation-fill-mode: both
}

@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(3rem)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.btn-circle-sm {
    border-width: 1.5px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    padding: 0
}

.home-carousel-controls .btn-outline-primary:hover {
    color: #06f
}

.service-bg-img {
    background-image: url(../../user_template/images/homepage/cloud-bg.webp);
    padding-bottom: 50px;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    padding-top: 0
}

.section-header-sub {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4rem
}

.card-clear img,
.service-top-head {
    margin-bottom: 1rem !important
}

.service-top-head {
    font-size: 1.3rem;
    letter-spacing: -.019em;
    line-height: 1.14286;
    font-weight: 500
}

.service-top-sub {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #5f6c76;
    text-align: left;
    margin-bottom: 1.5rem !important
}

.nav-slider-vertical {
    border-bottom-width: 0;
    border-right: 1px solid #e7eaef;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    position: relative
}

.nav-slider .nav-link {
    color: #5f6c76;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -.017em;
    line-height: 1.33333;
    padding: 0 1.5rem 1rem;
    position: relative
}

.nav-slider-vertical .nav-link {
    padding: .75rem 2rem .75rem .5rem;
    text-align: right
}

.nav-slider-icon {
    pointer-events: none;
    position: absolute;
    right: 1rem;
    top: 1.5rem;
    transform: translateY(-50%)
}

.glider,
.glider-track {
    transform: translateZ(0)
}

.nav-slider-vertical .nav-slider-bar {
    border-bottom-left-radius: .5rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 8px;
    background-color: #e7eaef;
    position: absolute;
    transition: .3s ease-in-out;
    height: 47.9875px;
    top: 24px
}

.card-clear a,
.nav-pills-outline .nav-link {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.card-clear {
    background-color: transparent;
    border: none
}

.card-title {
    font-size: 1.4rem;
    letter-spacing: -.019em;
    line-height: 1.14286;
    margin-bottom: 1rem;
    font-weight: 500;
}

.card-text {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #5f6c76;
    text-align: left;
    margin-bottom: 2rem !important
}

.card-clear a {
    border: none;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0.7rem
}

.card-clear a:hover {
    background-color: #00008b;
    border-color: transparent
}

.tab-navigation {
    margin-bottom: 1.5rem
}

.tab-navigation select {
    font-size: 0.9rem;
    font-weight: 500;
    padding: .75rem 2rem .75rem 1.5rem;
    width: 100%;
    border: 0;
    outline: 0;
    background-color: #e7eaef;
    border-radius: 1rem;
    box-shadow: none;
    appearance: none;
    background-image: url(./../images/homepage/arrow.svg);
    background-repeat: no-repeat;
    background-position: right 1.9rem top 50%;
    background-size: .65rem auto
}

#select-box:focus {
    outline: 0;
    border: none;
    box-shadow: none
}

.tab-navigation select option {
    background-color: #e7eaef;
    padding: .75rem 2rem .75rem .5rem;
    color: #101c2f;
    border: none;
    outline: 0;
    border-radius: 1rem
}

.cl-page-width {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%
}

.blog-categories-container {
    padding: 1.5rem 1rem
}

.blog-card-section-header {
    align-items: baseline;
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem
}

.blog-card-section-header-title {
    align-items: baseline;
    display: flex;
    flex-grow: 1;
    gap: .5rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.42
}

.blog-card-section-header-title:after {
    background-color: var(--dark-bg-puple);
    border: none;
    content: "";
    display: block;
    flex-grow: 1;
    height: 2px !important
}

.cl-textLink {
    background: 0 0;
    border: none;
    border-radius: 3px;
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.75;
    padding: 0 .25rem;
    text-decoration: none
}

.blog-categories-posts {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem
}

.blog-categories-card {
    color: unset;
    display: grid;
    gap: .5rem;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 104px;
    height: 100%;
    position: relative
}

.blog-categories-card a :first-child {
    border: 2px solid #dbe4ed
}

.blog-categories-card-thumbnail {
    object-fit: cover;
}

.blog-categories-card-thumbnail,
.blog-post-card-featured-image img {
    height: 100% !important;
    width: 100%
}

.blog-categories-card-body {
    border-bottom: 2px solid #dbe4ed;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: space-between
}

.blog-categories-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0
}

.blog-categories-card-body .blog-categories-card-title a,
.blog-post-card .blog-post-card-title a {
    color: #213343;
    text-decoration: none
}

.blog-categories-card-description {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.3;
    color: #2e475d;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    max-height: 45px;
    position: relative
}

.blog-categories-card-description:after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 0 1px
}

.blog-categories-card-footer {
    display: flex;
    justify-content: end;
    padding-bottom: .5rem;
    font-family: Lexend Deca, sans-serif;
    color: #2e475d
}

.blog-categories-card-footer p {
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.57;
    margin-bottom: 0
}

.blog-categories-card-footer p:first-child,
.gdpr ul li img {
    margin-right: 20px
}

.blog-categories-link {
    display: block;
    margin: 0 auto 2.5rem;
    width: max-content
}

.blog-featured-posts {
    grid-gap: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    padding: 1.5rem
}

.-featured.blog-post-card {
    background-color: var(--blog-theme-background-color)
}

.blog-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    width: auto
}

.-featured .blog-post-card-featured-image {
    height: 14.25rem;
    margin-bottom: 0;
    width: inherit
}

.blog-post-card-featured-image {
    height: 10rem;
    margin-bottom: .5rem;
    max-height: 100%
}

.-featured .blog-post-card-body {
    padding: 1rem
}

.blog-post-card-body {
    display: flex;
    flex-direction: column;
    height: 100%
}

.-featured .blog-post-card-title {
    padding-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.42
}

.blog-post-card-title {
    line-height: 1;
    margin: 0;
    padding-bottom: .5rem
}

.blog-post-card-description {
    margin: 0;
    padding-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.7;
    color: #2e475d
}

.-featured .blog-post-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: auto
}

.-featured .blog-post-card-author {
    margin-right: 1rem
}

.blog-featured-category-posts-header h2 {
    border-bottom: 2px solid #dbe4ed;
    margin-bottom: 1rem;
    padding-bottom: .25rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75
}

.blog-featured-category-posts-content.-home .blog-post-card:first-child .blog-post-card-body {
    padding: 0 0 1rem;
    margin-bottom: .25rem
}

.-noImage .blog-post-card-body {
    padding: 1rem 0
}

.-horizontal .blog-post-card-body {
    border-bottom: 2px solid #dbe4ed;
    flex-direction: column;
    gap: .5rem;
    display: flex;
    justify-content: space-between
}

.-horizontal .blog-post-card-body .blog-post-card-descriptions {
    max-height: 45px;
    overflow: hidden;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.57;
    color: #2e475d;
    text-overflow: ellipsis
}

.blog-post-card:not(.-featured) .blog-post-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    padding-bottom: 0;
    max-height: 45px;
    overflow: hidden;
    min-height: 0
}

.-horizontal .blog-post-card-footer {
    display: flex;
    justify-content: space-between;
    font-family: Lexend Deca, sans-serif;
    font-weight: 300;
    color: #2e475d
}

.delivery-content ul li,
.embed-responsive .embed-responsive-item,
.service-brochures .title h3,
.tabs_card_title {
    font-family: muli, "Myriad Pro", Helvetica, Arial, sans-serif
}

.blog-featured-posts .blog-post-card-author {
    padding-bottom: 0;
    margin-bottom: 0
}

.head-div {
    background: 0 0;
    height: 68px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9
}

.progress-bar {
    background-color: linear-gradient(to right, #f83600 0, #f9d423 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px
}

@media (min-width:600px) {
    .blog-categories-card {
        grid-template-columns: 12.75rem 1fr;
        grid-template-rows: 5.875rem
    }

    .blog-categories-container,
    .blog-featured-posts {
        padding: 2.5rem
    }

    .-featured .blog-post-card-featured-image {
        height: 18.75rem
    }

    .-featured .blog-post-card-body {
        padding: 1.5rem;
        background: #e5e5e5
    }

    .-featured .blog-post-card-description {
        padding-bottom: 1.5rem
    }
}

@media (min-width:1080px) {
    .blog-categories-container {
        padding: 2rem 1rem
    }

    .blog-card-section-header .blog-card-section-header-link {
        display: flex;
        align-items: end;
        padding-right: 0
    }

    .blog-categories-content {
        display: grid
    }

    .blog-categories-posts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 0
    }

    .blog-categories-card {
        grid-template-columns: 152px 1fr;
        grid-template-rows: 134px
    }

    .blog-categories-card-thumbnail {
        max-height: unset
    }

    .blog-categories-link {
        display: none
    }

    .blog-featured-posts {
        padding: 2.5rem .5rem
    }

    .blog-featured-category-posts-header h2 {
        margin-bottom: .25rem
    }
}

@media only screen and (max-width:950px) {
    .carousel-item .section-light-down .section-header {
        margin-bottom: 3rem !important
    }

    .carousel-controls {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }
}

@media only screen and (max-width:720px) {
    .carousel-item .section-light-down .section-header .home-h1 {
        font-size: 1.9rem !important;
        font-weight: 500;
        letter-spacing: -.022em;
        line-height: 1.3;
        text-align: center;
        color: #fff;
    }

    .carousel-item .section-light-down .section-header .landing-p {
        color: #fff;
        margin-bottom: 2rem !important;
    }

    .section-light-down {
        padding-top: 0 !important
    }

    .carousel-item .section-light-down .section-header {
        margin-bottom: 2rem !important;
        height: 100%
    }

    .nav-slider-select {
        background-color: #e7eaef;
        border-radius: 1rem;
        flex-direction: column;
        flex-wrap: nowrap;
        margin-bottom: 1.5rem;
        padding-bottom: 0;
        padding-top: 0
    }

    .nav-slider-container,
    .service-tab-content .tab-content {
        display: none
    }

    .tab-container {
        display: block
    }

    .client-sec {
        padding-top: 40px !important;
        height: 100% !important
    }

    .sidebar__title::before {
        top: 5px
    }

    .blog-single-area .single-blog-post {
        margin-bottom: 0
    }
}

.blog-card-body p,
.blog-card-body span {
    font-size: 16px;
    font-family: Inter, sans-serif
}

.section-light-up {
    background: linear-gradient(to top, #fff 0, #e7eaef 100%);
    padding-bottom: 4rem
}

.section-header-sub {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px
}

.section-header {
    margin-bottom: 2rem
}

.section-header-sub>.section-header-body {
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
    width: 100%
}

.section-header-title {
    font-size: 1.7rem !important;
    font-weight: 500;
    letter-spacing: -.022em;
    line-height: 1.17647;
    margin-bottom: 0;
    padding-top: 2rem;
    position: relative
}

.blog-card-body p,
.blog-card-body span,
.section-header-subtitle {
    font-weight: 400;
    line-height: 1.5
}

.section-header-title::before {
    background: var(--title-top-line-bg);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    content: "";
    height: .5rem;
    left: 0;
    max-width: 12rem;
    position: absolute;
    top: 0;
    width: 100%
}

.section-header-subtitle {
    color: #5f6c76;
    font-size: 1.1rem;
    letter-spacing: .5px;
    margin-top: 1rem
}

.nav-side-scroll {
    margin-left: -1rem;
    margin-right: -1rem;
    overflow-x: auto;
    padding-bottom: 1.5rem
}

.nav-side-scroll .nav {
    flex-wrap: nowrap;
    padding-left: 1rem
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0
}

.nav-pills-outline .nav-link {
    align-items: center;
    border: 2px solid #e7eaef;
    border-radius: 50rem;
    color: #3f4d62;
    flex: 1 1 auto;
    justify-content: center;
    padding: .625rem 1.375rem;
    display: flex
}

.col .card,
.glider-slide .card,
.responsive-card .card,
.row-gap .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid #3f4d62;
    border-radius: 1rem
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

.blog-shadow,
.meeting-card,
.shadow,
.tabs_card_button:hover {
    box-shadow: 0 10px 30px rgba(16, 28, 47, .08), 0 8px 22px rgba(16, 28, 47, .06), 0 5px 10px rgba(16, 28, 47, .04) !important
}

.blog-shadow-hover,
.shadow-hover {
    transition: box-shadow .15s ease-in-out
}

.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 1.1rem;
    font-weight: 400;
    color: #5f6c76
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.5rem
}

.row-cols-2>* {
    flex: 0 0 50%;
    max-width: 50%
}

.row-gap {
    gap: 32px 0
}

.glider {
    display: block;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    position: relative
}

.glider-track {
    display: flex;
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
    z-index: 1
}

.glider-track .col {
    margin-top: .5rem
}

.glider-slide {
    height: auto;
    align-content: center;
    justify-content: center;
    min-width: 220px;
    user-select: none;
    width: 100%
}

.responsive-container {
    padding-right: 16px !important;
    padding-left: 16px !important
}

.service-more-btn {
    display: inline-block;
    padding: .625rem 0.875rem;
    font-size: 0.9rem;
    line-height: 1.2;
    border-radius: 0.7rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.blog_section {
    padding-top: 50px;
    padding-bottom: 50px
}

.blog_section h3.absolute_h3 {
    position: absolute;
    margin-bottom: 15px;
    top: 65px;
    left: 20px
}

.blog_holder {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden
}

.hightlight-banner {
    background-color: #f5f5f5;
    overflow: hidden
}

.blog_holder .image_holder {
    overflow: hidden;
    max-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center
}

.blog_holder .image_holder a {
    display: block;
    width: 100%
}

.blog_holder .wrap {
    padding: 40px;
    display: inline-block
}

.blog_holder .wrap .avatar_name_date {
    margin-top: -10px;
    position: relative;
    display: flex;
    align-items: center
}

.blog_holder .wrap .avatar_name_date .avatar {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 20px
}

.blog_holder .wrap .avatar_name_date .avatar .image_holder_avatar {
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 50%
}

.blog_holder .wrap .avatar_name_date .avatar .image_holder_avatar img {
    width: 100%;
    z-index: 2;
    position: relative
}

.blog_holder .wrap .avatar_name_date .avatar .absolute_blue_ball {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #08408e;
    border-radius: 50%;
    left: 5px;
    top: 5px
}

.blog_holder .wrap .avatar_name_date .name {
    font-weight: 600;
    float: left;
    color: #08408e;
    font-size: 14px
}

.blog_holder .wrap .avatar_name_date .date {
    font-weight: 600;
    float: left;
    color: indigo;
    font-size: 12px
}

.blog_holder .wrap .tags {
    margin-top: 30px;
    margin-bottom: 20px
}

.blog_holder .wrap .tags ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.blog_holder .wrap .tags ul li {
    border-radius: 4px;
    display: inline-block;
    padding: 3px 7px;
    margin-right: 5px;
    font-size: 12px;
    font-weight: 600
}

.blog_holder .wrap h4 {
    color: var(--dark-bg-green);
    font-size: 1.25rem;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.4
}

.blog_holder .wrap p {
    color: #3f4d62;
    font-size: 1.1rem
}

.blog_holder .wrap .blog-button {
    margin-top: 15px;
    float: right;
    font-weight: 500;
    color: var(--dark-bg-green);
    display: inline-block
}

.blog-shadow-hover:hover {
    box-shadow: 0 25px 50px rgba(16, 28, 47, .1), 0 15px 40px rgba(16, 28, 47, .08), 0 8px 20px rgba(16, 28, 47, .06) !important
}

.hover-zoom:hover .hover-zoom-img {
    transform: scale(1.05)
}

.blog-card {
    height: 100%;
    border-radius: 1.25rem
}

.card-img-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    overflow: hidden
}

.hover-zoom-img {
    transition: transform .5s
}

.download-box-1,
.download-box-2,
.download-box-3 {
    border-radius: 6px;
    transition: .5s;
    background-size: 200% auto
}

.blog-card-title {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -.019em;
    line-height: 1.25;
    margin-bottom: 1rem;
    height: 55px;
    position: relative;
    overflow: hidden
}

.blog-card-body span {
    margin-bottom: .5rem;
    display: inline;
}

.blog-card-body p {
    margin-bottom: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    max-height: 45px;
    position: relative;
    color: #354764
}

.blog-more {
    padding-right: 1.3125em;
    font-weight: 700
}

.blog-more::after {
    content: "⟶";
    left: .2em;
    margin-right: -1.3125em;
    transition: transform .35s ease-in-out;
    display: inline-block;
    position: relative;
    text-align: left
}

.blog-img-tag {
    display: inline-block;
    height: 100%
}

.iso-logo {
    margin: auto 0
}

.iso-logo img {
    height: 60px !important
}

.center-semi-body,
.explain-section .box-row {
    display: flex;
    flex-direction: column
}

.center-semi-body .article h3 {
    margin: 50px 0 20px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.8 !important;
    color: #131313
}

.center-semi-body .article p {
    margin-bottom: 2.7rem;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 0;
    color: #5f6c76
}

.article {
    padding-right: 35px
}

.center-semi-body-solutions {
    display: flex;
    justify-content: space-between;
    flex-direction: row
}

.aside-solutions {
    width: 35%
}

.download-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 40px
}

.download-box i {
    color: #fff;
    font-size: 58px;
    margin-left: 15px
}

.download-box-1 {
    background-image: var(--flyer-bg-gradient);
    box-shadow: 0 .7em 1.5em -.5em #bd0041
}

.download-box-1:hover,
.download-box-2:hover,
.download-box-3:hover {
    background-position: right center
}

.download-box-2 {
    background-image: var(--casestudy-bg-gradient);
    box-shadow: 0 .7em 1.5em -.5em #702a88
}

.download-box-3 {
    background-image: var(--threats-bg-gradient);
    box-shadow: 0 .7em 1.5em -.5em #19031C
}

.main-center-card {
    padding: 21px 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap
}

.center-card-image {
    width: 20%;
    min-width: 97px;
    height: 100%;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    display: none
}

.center-card-content {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.center-card-text {
    width: 60%
}

.tabs_card_title {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    color: #fff
}

.tabs_card_description {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #5f6c76;
    display: none
}

.center-card-btn {
    width: 30%
}

.tabs_card_button {
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    padding: 6px 20px 6px 16px;
    color: #fff;
    border-radius: 24px;
    transition: .3s
}

.tabs_card_button:focus {
    border: 1px solid #131313
}

.tabs_card_button:hover {
    background: linear-gradient(20deg, indigo 0, #03c0ce 100%)
}

.right-box .right-box-content ul li,
.service-header {
    margin-bottom: 2rem !important
}

.section-header-eyebrow {
    color: #06f;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.017em;
    line-height: 1.33333;
    margin-bottom: 1.5rem
}

.highlights-wrapper {
    width: 90%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto
}

.hightlight-banner {
    min-height: 50vh;
    color: #082141;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 2em;
    padding: 7em 5em;
    position: relative
}

.highlight-content {
    width: 60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.highlight-shape {
    width: 20%;
    position: absolute;
    max-width: 100%;
    display: inline-block
}

.highlight-shape.br {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transform: translate(32%, 24%) rotate(180deg)
}

.highlight-shape.tl {
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    transform: translate(-32%, -24%)
}

.highlight-shape.bl {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    transform: translate(-32%, 24%) rotate(-180deg)
}

.highlight-shape.tr {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    transform: translate(32%, -24%)
}

.highlight-content h2 {
    font-size: 2.275rem !important;
    font-weight: 500;
    line-height: 1.1em;
    margin-bottom: 3rem;
    font-family: Inter, sans-serif
}

.highlight-content p {
    font-size: 1.05rem !important;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.7em;
    margin-bottom: 3rem
}

.advantage-content-box p,
.faq-collapse ul li {
    font-size: 1.1rem;
    margin-bottom: .5rem;
    position: relative;
    line-height: 1.5
}

.advantage-section {
    background-image: url(./../images/service/advantage-1.png);
    background-position: 95%;
    background-repeat: no-repeat;
    background-size: 37%;
    padding-top: 40px;
    padding-bottom: 90px;
    color: #fff;
    position: relative
}

.service-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.advantage-content-box p {
    color: #5f6c76;
    padding-left: 50px;
    font-weight: 400
}

.advantage-content-box img,
.advantage-content-box svg {
    position: absolute;
    left: -10px;
    top: -10px;
    font-size: 12px;
    width: 35px
}

.advantage-content-box svg {
    top: 5px
}

.advantage-content-box .advantage-list h6 {
    color: #5f6c76;
    padding-left: 50px;
    position: relative;
    font-size: 18px
}

.advantage-content-box .advantage-list h6 span {
    position: absolute;
    left: 0;
    font-size: 15px;
    color: #c42227;
    background: url(./../images/service/number-icon.png) center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    width: 35px;
    height: 35px
}

.advantage-section-bg {
    background: #f5f5f5
}

.accordion .card-light {
    background: #f6f7f7;
    border: 0 solid #3f4d62;
    border-radius: 1rem;
    padding-right: 40px
}

.faq-card h3 {
    line-height: 1.4
}

.faq-card .h3 {
    font-size: 1.25rem;
    color: #212529;
    font-weight: 500;
    letter-spacing: -.017em;
    line-height: 1.5;
    white-space: wrap;
    display: inline-block;
}

.faq-collapse ul {
    list-style-type: disc;
    padding-left: 1.5rem
}

.faq-collapse ul li {
    font-weight: 300;
    color: #5f6c76
}

.faq-collapse ul li svg {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 10px
}

.list-primary>li::marker {
    color: #06f
}

.meeting-wrapper {
    display: flex;
    align-items: baseline;
    height: 100%;
    padding-left: 30px
}

.meeting-card {
    border: none;
    border-radius: 1rem
}

.contact-us-panel .meeting-btn,
.meeting-card .meeting-btn,
.custome-btn {
    padding: .625rem 0.875rem;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    border-radius: 0.7rem;
    line-height: 1.2;
    font-size: 0.9rem;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    white-space: nowrap
}

.collapse-control:not([aria-expanded=false]):not(.collapsed) .collapse-control-icon-plus-link {
    background-image: url(./../images/service/minus-icon.svg)
}

.collapse-control-icon-plus-link {
    background-image: url(./../images/service/plus-icon.svg)
}

.collapse-control-icon-last {
    margin-left: .5em
}

.collapse-control-icon {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    flex: 0 0 auto;
    height: .775em;
    width: .775em;
    position: absolute;
    right: 20px;
    top: 20px
}

.service-brochures .title h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 500
}

.service-brochures .span {
    font-size: 1.125rem;
    line-height: 1.33333
}

.lura-section ul p {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 35px !important;
    color: #5f6c76
}

.advantage-section-content {
    padding-left: 20px;
    font-size: 1.2rem;
    color: #5f6c76;
    font-weight: 500;
    line-height: 1.7
}

.map-image p {
    position: absolute;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: visibility, opacity .5s linear
}

.map-image p:first-child {
    top: 58%;
    left: 66%
}

.map-image p:nth-child(2) {
    top: 62%;
    left: 50%
}

.map-image:hover.map-image p {
    visibility: visible;
    opacity: 1
}

.Client-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 1rem;
    outline: 0
}

#rightSlider,
.popup_event {
    z-index: 999;
    position: fixed
}

.filtered-search-modal .Client-header {
    display: flex;
    align-items: center;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    align-items: center;
    border-bottom: 0;
    padding: 1.5rem 1.5rem 0
}

.filtered-search-filter {
    border: none
}

.client-card {
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid #3f4d62;
    border-radius: 1rem;
    height: 100%
}

.client-card-title-sm {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -.017em;
    color: var(--dark-bg-green)
}

#itemsPerPage,
.client-card-text,
.filtered-search-count span,
.filtered-search-limiter label,
.form-check label,
.pagination-controls label {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #3f4d62;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif
}

#itemsPerPage {
    background: 0 0;
    box-shadow: none
}

.filtered-search-limiter select {
    background-color: transparent;
    border: 0;
    color: #06f;
    font-weight: 300
}

.card-layout {
    gap: 2rem 0
}

.tabs_card_button img {
    width: 25px
}

.pagination-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

select {
    outline: 0;
    border: 0;
}

.pagination-container ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    list-style-type: none;
    padding: 0
}

.pagination-container ul li {
    width: 150px;
    height: 100px;
    margin-bottom: 10px;
    color: #fff;
    background-color: #00008b;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
    text-align: center;
    padding: 10px 0;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .5s, transform .5s
}

.pagination {
    display: flex;
    justify-content: end;
    margin-top: 30px
}

.pack-middle,
.pack-middle img {
    margin: auto;
    position: absolute;
    bottom: 0
}

.pagination span {
    text-align: center;
    display: inline-block;
    padding: 6px 12px;
    background-color: #dadada;
    border-radius: 4px;
    cursor: pointer
}

.pagination span.active {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    color: #fff
}

.pagination-container ul li.fade-in {
    opacity: 1;
    transform: scale(1)
}

.popup_event {
    color: #fff;
    padding: 40px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 55%;
    width: 70%;
    border-radius: 8px;
    display: none
}

.close_popup-bg {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: indigo;
    position: absolute;
    right: 10px;
    top: 35px;
    text-align: center
}

#close_popup_event {
    color: #fff;
    font-size: 17px;
    font-weight: 600
}

.join-btn a {
    background: #c22328;
    color: #fff;
    padding: 5px 15px;
    position: absolute;
    top: 84%;
    left: 57%;
    border-radius: 1rem
}

@media (max-width:991px) {
    .home-container .row .col {
        padding-right: 16px;
    }

    .popup_event {
        width: 90%
    }
}

.card-holder {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    height: 100%
}

.card-holder .backed,
.card-holder .fronted {
    background-size: cover;
    border-radius: 10px;
    background-position: center;
    -webkit-transition: -webkit-transform .7s cubic-bezier(.4, .2, .2, 1);
    transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    -o-transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    transition: transform .7s cubic-bezier(.4, .2, .2, 1), -webkit-transform .7s cubic-bezier(.4, .2, .2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    min-height: 280px;
    height: auto;
    color: #fff;
    font-size: 1.5rem
}

.card-holder .fronted:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px
}

.card-holder:hover .backed,
.card-holder:hover .fronted {
    -webkit-transition: -webkit-transform .7s cubic-bezier(.4, .2, .2, 1);
    -o-transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    transition: transform .7s cubic-bezier(.4, .2, .2, 1), -webkit-transform .7s cubic-bezier(.4, .2, .2, 1)
}

.inner {
    -webkit-transform: translateY(0) translateZ(60px) scale(.94);
    transform: translateY(0) translateZ(60px) scale(.94);
    top: 20%;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: transparent solid 1px;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2
}

.card-holder .backed {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.card-holder .fronted,
.card-holder:hover .backed {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.card-holder:hover .fronted {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.play-button,
.realworld__items .thumb .play__btn {
    transform: translate(-50%, -50%);
    text-align: center
}

#map_access,
#map_inner>div>a,
#mapcontact_inner>div>a {
    display: none !important
}

.section-cverify {
    background-attachment: fixed;
    background-image: url(../../user_template/images/cverification/package-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0 50px
}

.pack-slider .package-item {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 0 6px rgb(0 0 0 / 6%);
    border-radius: 10px;
    overflow: hidden
}

.package-item {
    background: #fff;
    display: flex;
    justify-content: flex-start;
    border-radius: 10px;
    left: 0;
    top: 0;
    transition: .1s linear;
    box-shadow: rgba(82, 89, 129, .05) -5px 8px 8px 0
}

.pack-thumb img {
    max-width: none !important;
    height: 100% !important;
    border-radius: 5px 0 0 5px
}

.pack-middle {
    width: 192px;
    height: 192px;
    background: #ffebd6;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    border: 13px solid #fff;
    right: -92px;
    top: 0;
    overflow: hidden
}

.pack-middle img {
    padding: 20px;
    width: auto;
    left: 0;
    top: 0;
    right: 0;
    border-radius: 30px
}

.pack-details {
    position: relative;
    padding: 65px 60px 30px 190px
}

.pack-details h3 {
    color: #2c234d;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 13px;
    font-size: 26px
}

.pack-meta span,
.pack-price {
    line-height: .8;
    font-size: 14px
}

.pack-price {
    display: block;
    color: #5838fc;
    font-weight: 700;
    margin: 0 0 25px
}

.pack-price span {
    display: inline-block;
    color: #5d5a67;
    font-weight: 600;
    text-decoration: line-through;
    margin-left: 7px
}

.pack-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 29px
}

.pack-meta span {
    display: inline-block;
    color: #5d5a67;
    font-weight: 600;
    margin-right: 38px
}

.pack-details p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #5f6c76
}

.bisylms-btn {
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    padding: 12px 18px;
    text-align: center;
    display: inline-block;
    line-height: .8;
    letter-spacing: 0;
    position: relative;
    border-radius: 0.375rem;
    z-index: 1;
    cursor: pointer
}

.c-verify-captcha-img,
.slider-card img {
    border-radius: 5px
}

.cert-heading h2 {
    font-size: 34px !important;
    line-height: 44px;
    color: #2c234d;
    margin: 0 0 61px;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700
}

.realworld__items {
    position: relative;
    z-index: 1;
    padding: 24px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
    border-radius: 5px;
    background: #fff;
    gap: 24px;
    align-items: center;
    border-right: 4px solid rgba(25, 9, 24, 0.5);
    margin-top: 24px;
    transition: .3s
}

.hover-overlay img,
.item-overlay {
    transition: transform .5s, filter 1.5s ease-in-out
}

.realworld__items:hover {
    border-right: 4px solid var(--dark-bg-puple)
}

.realworld__items .thumb {
    position: relative;
    margin-top: -100px;
    transition: .3s;
    max-width: 100%;
    height: 259px;
    border-radius: 5px;
    overflow: hidden
}

.realworld__items .thumb img {
    height: 100% !important;
    object-fit: cover;
    width: 100%;
    border-radius: 5px;
    color: transparent
}

.realworld__items .thumb .play__btn {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffaf00;
    line-height: 60px;
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    transition: .4s
}

.realworld__items:hover .thumb .play__btn {
    opacity: 1;
    left: 50%
}

.realworld__items .content {
    width: 100%
}

.realworld__items .content h6 {
    color: #005c30;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 130%;
    font-family: Inter, sans-serif
}

.realworld__items .content h4 {
    margin-bottom: 10px;
    margin-top: 1.5rem;
    font-weight: 500;
    line-height: 130%;
    font-size: 1.25rem;
    color: #1e1e1f;
    height: 50px;
    overflow: hidden
}

.aboutarea__content__wraper .aboutarea__para p,
.aboutarea__list__2 ul li p {
    font-size: 0.9rem;
    color: #5f6c76;
    margin-bottom: 15px;
    line-height: 1.5
}

.realworld__items .content h4 a {
    color: #243757;
    display: inline-block
}

.realworld__items:hover .content h4 a {
    color: #452ff4
}

.realworld__items .content p {
    color: #5f6c76;
    font-size: 1.1rem;
    margin-bottom: 5px;
    line-height: 1.5;
    height: 50px;
    overflow: hidden;
    position: relative
}

.realworld__items .content p:after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 0 5px
}

.realworld__items .content .real__btn {
    display: flex;
    gap: 4px
}

.realworld__items .content .real__btn span {
    color: #452ff4;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1
}

.realworld__items .content .real__btn .icon {
    transition: .3s
}

.realworld__items .content .real__btn .icon i {
    color: #452ff4;
    font-size: 14px;
    margin-left: 5px
}

.realworld__items:hover .content .real__btn .icon {
    padding-left: 10px
}

@media (max-width:1199px) {
    .realworld__items {
        flex-wrap: wrap
    }

    .realworld__items .content {
        width: 100%
    }
}

.lightbox {
    background-color: rgba(0, 0, 0, .8) !important;
    overflow: scroll !important;
    position: fixed !important;
    display: none;
    z-index: 99 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important
}

.lightbox-container {
    position: relative;
    max-width: 900px;
    margin: 12% auto;
    display: block;
    padding: 0 3%;
    height: auto;
    z-index: 99
}

@media screen and (max-width:768px) {
    .lightbox-container {
        margin-top: 50%
    }

    .single-footer-widget .usefull-links {
        width: 100%;
        margin-bottom: 20px;
    }
}

.lightbox-close {
    background: 0 0;
    position: absolute;
    font-weight: 500;
    font-size: 12px;
    display: block;
    border: none;
    color: #fff;
    top: -16px;
    right: 3%
}

.video-container {
    padding-bottom: 48.25%;
    position: relative;
    padding-top: 73px;
    overflow: hidden;
    height: 0
}

.video-container iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: 65px;
    height: 65px;
    background: red;
    border-radius: 50%;
    -webkit-animation: 3s linear infinite ripple-white3;
    animation: 3s linear infinite ripple-white3
}

.gatsby-image-wrapper,
.hover-overlay,
.project-preview {
    position: relative;
    overflow: hidden
}

.hover-overlay,
.hover-overlay img,
.project-priview-img img {
    border-radius: 16px
}

@keyframes ripple-white3 {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .2), 0 0 0 10px rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .2), 0 0 0 10px rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 100px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 100px rgba(255, 255, 255, 0)
    }
}

.play-button::after {
    content: '';
    top: 21px;
    left: 26px;
    position: absolute;
    border-left: 20px solid #fff;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 20px solid transparent
}

.item-overlay,
.slider-card .static-overlay {
    left: 0;
    width: 100%;
    position: absolute;
    height: 100%
}

.inner-page-hero {
    padding-top: 100px
}

.pressroom-container {
    max-width: 1320px;
    width: 100%;
    padding-left: 32px !important;
    padding-right: 32px !important
}

.project-title h2 {
    padding-right: 5%;
    padding-bottom: 40px;
    margin-bottom: 35px;
    border-bottom: 1px solid #ddd;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 2.25rem !important;
    color: #353f4f;
    line-height: 1.25
}

.project-data p span {
    color: #353f4f;
    font-weight: 500;
    font-family: Rubik, sans-serif
}

ul.simple-list {
    list-style: disc;
    margin-left: 15px
}

.item-overlay {
    opacity: 0;
    -moz-opacity: 0;
    top: 0;
    background: rgba(20, 20, 20, .25)
}

.project-preview:hover .item-overlay {
    opacity: 1;
    -moz-opacity: 1
}

.project-link {
    width: 100%;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    opacity: 0;
    text-align: center;
    color: #fff;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    -ms-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.project-txt h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.35;
    font-weight: 700;
    font-size: 1.7rem;
    color: #353f4f;
    letter-spacing: 0
}

.section__header h2,
.section__header p {
    color: #354764;
    font-family: Inter, sans-serif
}

.slider {
    position: relative;
    cursor: grab
}

.slider .owl-item.active.center .slider-card {
    background: #f96;
    background: -webkit-linear-gradient(to bottom, #ff5e62, #f96);
    background: linear-gradient(to bottom, #ff5e62, #f96);
    color: #fff
}

.slider-card {
    background: #fff;
    border-radius: 0 20px;
    margin: 0 0 40px;
    overflow: hidden;
    box-shadow: 0 15px 45px -20px rgb(0 0 0 / 73%);
    transform: scale(.96);
    transition: .3s
}

.slider-card .static-overlay {
    bottom: 0;
    max-width: 100%;
    display: block;
    padding: 16px 20px 12px;
    transition: .7s .5s;
    display: flex;
    justify-content: center;
    align-items: end;
    border-radius: 5px
}

.slider-card .static-overlay .content {
    text-align: center;
    margin-bottom: 10px;
    color: #fff;
    padding: 10px 15px;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
    backdrop-filter: blur(16.5px);
    -webkit-backdrop-filter: blur(16.5px);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .18)
}

.course-duration {
    border-radius: 0 10px 0 20px;
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    color: #fff;
    padding: 5px 15px;
    z-index: 9
}

.slider-card .static-overlay .content h3 {
    margin-bottom: 0;
    font-size: 17px;
    color: #fff
}

.owl-fade-in,
.owl-fade-out {
    opacity: 0;
    transition: opacity .5s ease-in-out
}

.owl-item.active .owl-fade-out {
    opacity: 0
}

.sec-gradient {
    background: linear-gradient(180deg, #eceef2 0, rgba(236, 238, 242, 0) 100%);
    position: relative;
    z-index: 2
}

.home-form {
    margin-top: -50px
}

.home-form form {
    position: relative;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    border-radius: 0 30px 30px !important;
    padding: 50px 30px 40px
}

.form-section .contact-get-form form .col-form-label {
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px;
    padding: 0;
    font-weight: 500
}

.form-section .contact-get-form .form-control {
    padding: 10px 15px;
    color: #777;
    border-radius: 5px;
    background: #f8f8f8 !important;
    border: 0 solid transparent;
    margin-bottom: 10px
}

.home-form form::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 100%;
    width: 20px;
    margin-right: -1px;
    height: 48px;
    background: var(--dark-bg-puple);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%)
}

.enquiryform-content .section-header-subtitle {
    margin-top: 1rem;
    margin-bottom: 1rem !important
}

.newsletter__wrapper__four {
    background: #f5f5f5;
    border-radius: 5px;
    overflow: hidden;
    padding: 75px 20px 80px;
    z-index: 1;
    position: relative
}

.bg-circle-img,
.our-culture {
    background-repeat: no-repeat
}

.aboutarea__2 .aboutarea__content__wraper,
.list-unstyled {
    padding-left: 0
}

.newsletter__content .section__header {
    margin-bottom: 40px;
    position: relative;
    z-index: 1
}

.section__center {
    text-align: center;
    margin: 0 auto;
    max-width: 600px
}

.section__header h2 {
    margin-bottom: 40px;
    font-size: 2.5rem !important;
    font-weight: 700;
    line-height: 120%
}

.section__header p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0
}

.newsletter__wrapper__four .newsfour__ball1 {
    position: absolute;
    top: 45px;
    right: 134px
}

.newsletter__wrapper__four .newsfour__ball2 {
    position: absolute;
    bottom: 34px;
    left: 80px;
    width: 80px
}

.newsletter__wrapper__four .newsfour__element1 {
    position: absolute;
    top: 56px;
    left: 101px;
    width: 250px
}

.newsletter__wrapper__four .newsfour__element2 {
    position: absolute;
    bottom: 32px;
    right: 110px;
    width: 250px
}

.card-items,
.sb-bottom_50,
.sp_bottom_50 {
    padding-bottom: 50px
}

.sp_top_100 {
    margin-top: 100px
}

.aboutarea__list__2,
.sp_top_50 {
    margin-top: 50px
}

.sb_top_50 {
    padding-top: 50px
}

.aboutarea__2 {
    padding-top: 240px;
    padding-bottom: 125px
}

.about__right__wraper__2 {
    position: relative;
    height: 100%
}

.educationarea__img {
    display: flex;
    justify-content: center;
    position: relative
}

.educationarea__img .speedometer {
    position: absolute;
    top: 77%;
    left: 46%;
    transform: rotate(30deg);
    transform-origin: center bottom
}

.educationarea__img .speedometer-2 {
    transform: rotate(-80deg);
    left: 48%;
    top: 74%
}

.educationarea__img .speedometer-1.speedometer-animation-1 {
    animation: 1.5s speedometer-1
}

@keyframes speedometer-1 {
    0% {
        transform: rotate(-90deg)
    }

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

.educationarea__img .speedometer-2.speedometer-animation-2 {
    animation: 1.5s speedometer-2
}

@keyframes speedometer-2 {
    0% {
        transform: rotate(90deg)
    }

    100% {
        transform: rotate(-80deg)
    }
}

.about__right__wraper__4 .aboutimg__4__img__2 {
    position: absolute;
    left: 0;
    top: 0
}

.section__title__2 .section__title__heading__2 {
    margin-bottom: 13px
}

aboutarea__2 .aboutarea__content__wraper .aboutarea__para {
    margin-bottom: 25px
}

.heading__underline span,
.enquiryform-title span,
.service-section-header-lg .service-section-header-title span {
    font-weight: 500;
    line-height: 1.2;
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent
}

.aboutarea__content__wraper .aboutarea__para.aboutarea__para__2 {
    border-left: 2px solid indigo;
    padding-left: 13px
}

.heading__underline span,
.enquiryform-title span {
    position: relative;
    font-size: 1.4rem !important;
    letter-spacing: -.022em;
    margin-bottom: 20px;
    -webkit-background-clip: text
}

.aboutarea__list__2 ul li {
    color: #3f4d62;
    font-weight: 600;
    display: block;
    line-height: 1.8;
    font-size: 1rem
}

.aboutarea__list__2 ul li:first-of-type {
    color: #a3b968
}

.aboutarea__list__2 ul li:nth-of-type(2) {
    color: #ffcb4d
}

.aboutarea__list__2 ul li:nth-of-type(3) {
    color: #f7931f
}

.aboutarea__list__2 ul li:nth-of-type(4) {
    color: #c13017
}

.aboutarea__list__2 ul li p {
    font-weight: 400
}

.service-section-header-lg .service-section-header-title span {
    font-size: 50px;
    letter-spacing: -.03em;
    -webkit-background-clip: text;
    display: inline;
}

.name-card h3 {
    margin-bottom: 0;
    font-weight: 600;
    margin-top: 15px
}

@media (min-width:767px) and (max-width:991px) {
    .speedometer {
        height: 95px
    }

    .speedometer img {
        height: 100% !important
    }
}

@media (max-width:767px) {
    .logo-header {
        width: 100px
    }

    .alert-cookie {
        width: 90%;
        flex-wrap: wrap;
    }

    .alert-cookie .cookieBtn {
        margin: 15px 0px 0 10px;
    }

    .popup_event {
        width: 100%
    }

    .join-btn a {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .sp_top_100 {
        padding-top: 0;
        margin-top: 0
    }

    .aboutarea__2 {
        padding-bottom: 0;
        padding-top: 100px
    }

    .aboutarea__4 {
        margin-top: 0;
        padding-bottom: 40px
    }

    .lura-section ul li {
        margin-left: 0px
    }

    .delivery-content ul li,
    .lura-section ul p {
        margin-left: 0px !important
    }
}

@media (max-width:500px) {
    .speedometer {
        height: 50px
    }

    .speedometer img {
        height: 100% !important
    }
}

@media (max-width:380px) {
    .speedometer {
        height: 40px
    }

    .educationarea__img .speedometer-2 {
        top: 77%
    }
}

.our-culture {
    position: relative;
    background-image: url(../images/culture/culture-banner.webp);
    background-color: #000;
    background-position: 50%;
    background-size: cover;
    height: 100vh
}

.our-culture-wrapper {
    padding-top: 120px
}

.our-culture .our-culture-wrapper h2 {
    font-size: 90px !important;
    line-height: 72px;
    font-weight: 700;
    color: #fff;
    font-family: Inter, sans-serif
}

.collapsed-image-title-sec .title-sec h3,
.founder-content .semi-title {
    font-size: 2.5rem;
    letter-spacing: -1.6px;
    line-height: 3.125rem
}

.platform-sec {
    padding-bottom: 5rem;
    padding-top: 5rem;
    background-color: #000
}

.bg-circle-img {
    background-image: url(../images/culture/riseofpink.webp);
    background-size: contain
}

.text-charcoal200 {
    color: #748494 !important
}

.title-text-second-sec {
    font-size: 96px;
    line-height: 96px
}

.text-pink400 {
    color: #d341a5 !important
}

.text-ash400 {
    color: #d5dce1 !important
}

.second-sec-para h6 {
    font-size: 1.25rem;
    letter-spacing: -.4px;
    line-height: 1.875rem;
    font-weight: 400;
    margin-bottom: .25rem;
    margin-top: 0
}

.right-box .right-box-content {
    background: #0f161b;
    z-index: 10;
    padding: 3rem;
    border-radius: .5rem;
    position: relative;
    border: 1px solid #1d2b36
}

.right-box .right-box-content ul li h4 {
    font-size: 3rem;
    line-height: 3.625rem;
    margin-bottom: .25rem;
    margin-top: 0
}

.right-box .right-box-content ul li h6 {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin-bottom: .25rem;
    margin-top: 0
}

.right-box .left-circle {
    left: -40px;
    top: -40px;
    z-index: 9
}

.right-box .right-circle {
    right: -40px;
    bottom: -40px;
    z-index: 9
}

.collapsed-image-section {
    padding-top: 100px;
    position: relative
}

.brand-about-founder,
.culture-video-section {
    padding-bottom: 7rem;
    padding-top: 7rem;
    position: relative
}

.collapsed-image-title-sec .title-sec h1 {
    font-size: 96px;
    letter-spacing: -4.2px;
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-weight: 600
}

.collapsed-image-title-sec .title-sec p {
    font-size: 1.5rem;
    letter-spacing: -.4px;
    line-height: 2rem;
    margin-bottom: .25rem
}

.collapsed-image-section .image-sec {
    padding-top: 160px
}

.image-sec img {
    border-radius: 8px;
    overflow: hidden
}

.image-sec .about-image-1 {
    padding-bottom: 100px
}

.image-sec .about-image-1 img {
    width: 86%
}

.image-sec .about-image-4 {
    display: flex;
    padding-left: 70px;
    padding-top: 120px
}

.image-sec .about-image-5 {
    margin-top: -80px;
    padding-left: 50px
}

.image-sec .about-image-6 {
    padding-left: 56px;
    padding-top: 70px
}

.collapsed-image-section:before {
    background: url(../images/culture/blue-circle.webp) center center/100% 100% no-repeat;
    content: '';
    width: 220px;
    height: 280px;
    position: absolute;
    top: -50px;
    left: 0;
    z-index: -1
}

.collapsed-image-section:after {
    background: url(../images/culture/pink-circle.png) center center/100% 100% no-repeat;
    content: '';
    width: 206px;
    height: 320px;
    position: absolute;
    bottom: 60px;
    right: 0;
    z-index: -1;
    top: 100px
}

.culture-video-section h3 {
    font-size: 96px;
    line-height: 96px;
    margin-bottom: 3.5rem;
    text-align: center;
    font-weight: 600
}

.culture-video-section h5 {
    font-size: 1.5rem;
    letter-spacing: -.4px;
    line-height: 2.3rem;
    margin-bottom: .25rem;
    font-weight: 400;
    color: #1d2b36;
    text-align: center
}

.culture-video-section a img {
    box-shadow: 0 24px 120px #413d3d45
}

.culture-video-section .play-btn {
    animation: .9s linear infinite ripple;
    border-radius: 50%;
    cursor: pointer;
    height: 50px;
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 35%;
    width: 50px
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 hsla(0, 0%, 100%, .5), 0 0 0 1em hsla(0, 0%, 100%, .5), 0 0 0 3em hsla(0, 0%, 100%, .3), 0 0 0 5em hsla(0, 0%, 100%, .3)
    }

    100% {
        box-shadow: 0 0 0 1em hsla(0, 0%, 100%, .5), 0 0 0 3em hsla(0, 0%, 100%, .5), 0 0 0 5em hsla(0, 0%, 100%, .3), 0 0 0 8em hsla(0, 0%, 100%, 0)
    }
}

.culture-video-section .left-circle {
    left: 0;
    top: 40px;
    width: 50px
}

.culture-video-section .right-circle {
    bottom: 40px;
    right: 0;
    width: 50px
}

.rounded-24 {
    border-radius: 24px
}

.equalElement,
.equalcontent {
    border-radius: 16px;
    height: 100%
}

.layout-img {
    position: relative;
    z-index: 1
}

.brand-about-founder .right-circle {
    right: 0;
    width: 100px;
    bottom: 50px
}

@media (min-width:540px) {
    .culture-video-section .play-btn {
        top: 40%
    }

    .brand-about-founder .right-circle {
        right: 0;
        width: 220px;
        bottom: 50px
    }
}

.brand-about-founder .left-circle {
    left: -100px;
    width: 235px;
    z-index: 9;
    top: 20px;
    transform: rotate(-70deg)
}

@media (min-width:768px) {
    .culture-video-section .play-btn {
        height: 54px;
        top: 45%;
        width: 54px
    }

    .culture-video-section .left-circle {
        left: -20px;
        width: 100px
    }

    .culture-video-section .right-circle {
        right: -20px;
        width: 100px
    }

    .brand-about-founder .left-circle {
        left: -60px;
        transform: rotate(0)
    }

    .brand-about-founder .founder-content h2 {
        font-size: 96px !important;
        letter-spacing: -1.6px;
        margin-bottom: 5rem;
        line-height: 3.625rem
    }
}

@media (min-width:992px) {
    .blog-featured-posts {
        grid-gap: 1.75rem;
        grid-template-columns: min-content 1fr;
        grid-template-rows: auto
    }

    .-featured.blog-post-card {
        width: 37.5rem
    }

    .blog-post-card-title {
        line-height: 1.5;
        min-height: 3.5rem
    }

    .blog-categories-card[data-card-type=c] .blog-categories-card-description {
        display: block
    }

    .culture-video-section .play-btn {
        height: 100px;
        top: 40%;
        width: 100px
    }

    .culture-video-section .left-circle {
        left: -100px;
        width: 180px
    }

    .culture-video-section .right-circle {
        right: -100px;
        width: 180px
    }

    .brand-about-founder .left-circle {
        left: 0
    }
}

.founder-content .semi-title {
    padding-left: 5rem;
    margin-bottom: 1.5rem
}

.founder-right-content {
    padding-left: 4rem;
    color: #d5dce1
}

.founder-right-content h3 {
    font-size: 3.75rem;
    line-height: 4.5rem;
    font-weight: 600
}

.founder-right-content h1 {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin-bottom: 2rem
}

.founder-right-content p {
    font-size: 1rem;
    line-height: 1.625rem
}

.l-float {
    z-index: 100;
    width: 60px;
    height: 60px;
    bottom: 20px;
    left: 25px;
    background-color: #25d366;
    border-radius: 50%;
    font-size: 33px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.l-float,
.str-btn {
    position: fixed;
    text-align: center
}

#rightSlider {
    background-image: linear-gradient(to right, #ff512f 0, #f09819 51%, #ff512f 100%);
    background-size: 200% auto;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 700;
    top: 45%;
    right: -70px;
    border-radius: 10px;
    width: 66px;
    box-sizing: border-box;
    min-height: 30px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(54, 66, 75, .1);
    transition: .4s ease-in;
    cursor: pointer
}

#rightSlider:hover {
    width: 290px !important;
    animation: paused
}

#rightSlider .content {
    margin: 5px 0 7px
}

#rightSlider .content .callout {
    color: #fff;
    display: table;
    text-decoration: none;
    position: relative;
    margin-left: 3px;
    cursor: pointer;
    white-space: nowrap
}

#rightSlider .content .callout i,
#rightSlider .content .callout svg {
    display: table-cell;
    width: 24px;
    margin-left: 4px;
    margin-top: 2px;
    font-size: 18px
}

#rightSlider .content .callout .title {
    display: inline-block;
    vertical-align: middle;
    padding-left: 15px;
    line-height: 16px;
    min-width: 200px;
    text-transform: capitalize;
    font-size: 17px;
    margin-top: 5px
}

.callout.d-inline img {
    width: 42px;
    height: 40px !important
}

.shake-it {
    animation: .5s linear 1.5s 2 shake
}

@keyframes shake {

    0%,
    30%,
    60%,
    90% {
        transform: rotate(0)
    }

    10%,
    100%,
    50%,
    70% {
        transform: rotate(-10deg)
    }

    20%,
    40%,
    80% {
        transform: rotate(10deg)
    }
}

.equalElement {
    position: relative;
    background: #f7f9fc;
    box-shadow: 0 4px 57px rgba(58, 76, 102, .07), 0 -1.5px 4.5px rgba(191, 197, 202, .65) inset;
    cursor: default;
    transition: .35s;
    padding: 2px;
    will-change: transform;
    overflow: hidden;
    z-index: 2
}

.equalElement .equalElementImgBlock {
    height: 35px;
    width: 35px;
    position: relative;
    overflow: visible;
    margin-bottom: 30px
}

.equalElement .equalElementImgBlock img {
    scale: 1.9
}

.equalElement h5 {
    line-height: 1.3;
    color: #fff;
    font-size: 1.15rem;
    font-family: Comfortaa, sans-serif
}

.equalElement:hover {
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
}

.equalElement:hover.equalElement .equalElementImgBlock .image-color {
    display: block
}

.equalElement:hover.equalElement .equalElementImgBlock .image-white {
    display: none
}

.equalElement:hover.equalElement h5 {
    color: #000
}

.equalElement:hover.equalElement::before {
    display: block
}

.equalcontent {
    padding: 35px 30px 26px;
    overflow: hidden;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
}

.pattern1,
.pattern2 {
    background-image: url(./../service-images/background-shape.svg);
    height: 100%;
    width: 699px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute
}

.equalElement.active::before,
.equalElement::before {
    display: none;
    content: "";
    position: absolute;
    height: 200%;
    width: 100%;
    top: -50%;
    left: 40%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    background: #0a3cff;
    background: linear-gradient(to right, #190918f0, #190918f0);
    transform-origin: center;
    animation: 4.8s linear infinite paused moving
}

.equalElement.active::before,
.equalElement:hover::before {
    animation-play-state: running;
    z-index: -1;
    width: 17%
}

@keyframes moving {
    0% {
        transform: rotate(0)
    }

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

.pattern1 {
    left: 0;
    top: 0;
    -webkit-animation: 7s linear infinite zoom-fade;
    animation: 7s linear infinite zoom-fade;
    transform: rotateY(3.142rad)
}

.pattern2 {
    right: 0;
    top: 0;
    -webkit-animation: 7s linear infinite zoom-fade;
    animation: 7s linear infinite zoom-fade
}

.firstblockimg {
    position: absolute;
    top: 0;
    left: -30px;
    max-width: 31vw
}

.lastblockimg {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 20vw
}

.EmailModulesActiveImgBG {
    position: absolute;
    right: -5vw;
    top: 10vw;
    max-width: 50vw;
    height: 20vw
}

.eventarea__details__small__button span {
    height: 25px;
    width: 98px;
    background: linear-gradient(20deg, #03c0ce 0, indigo 100%);
    font-weight: 500;
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    display: inline-block;
    text-align: center;
    border-radius: 4px
}

.event__details__heading h3 {
    font-weight: 700;
    font-size: 40px;
    line-height: 54px;
    color: #000;
    margin-bottom: 20px
}

.eventarea__details__list ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.eventarea__details__list ul li {
    margin-right: 76px
}

.course-tab-v2 .nav-item,
.eventarea__details__list ul li .event__details__small__img,
.media {
    display: flex;
    align-items: center
}

.event__details__text span {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #000
}

.event__details__text p {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #5f6c76;
    margin-bottom: 15px
}

.event__details__inner .event__details__content h4,
.event__details__list__2 h4 {
    font-size: 24px;
    line-height: 38px;
    font-weight: 700
}

.event__details__inner {
    margin-top: 35px
}

.event__details__inner .event__details__img__2 {
    margin-bottom: 35px;
    border-radius: 4px;
    overflow: hidden
}

.event__details__inner .event__details__img__2 img {
    width: 100%
}

.event__details__inner .event__details__content {
    margin-bottom: 20px
}

.event__details__inner .event__details__content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 29px;
    color: #949392;
    margin-bottom: 15px
}

.event__details__list__2 h4 {
    color: #000
}

.event__details__list__2 ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.event__details__list__2 ul li i {
    color: var(--primaryColor);
    margin-right: 3px
}

.event__details__list__2 ul li p {
    margin: 0;
    font-size: 16px;
    color: #5f6c76
}

.gdpr ul li,
.other-privacy ul li a {
    color: #374151
}

.blogsidebar__content__wraper__2 {
    padding: 30px 35px 30px 30px;
    border: 1px solid #ddd;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .02);
    margin-bottom: 30px;
    margin-top: 35px
}

.sidebar__title {
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    position: relative;
    padding-left: 8px;
    margin-bottom: 25px;
    color: #000
}

.sidebar__title::before {
    position: absolute;
    content: "";
    width: 2px;
    height: 24px;
    background: indigo;
    left: 0;
    top: 3px;
}

.blogsidebar__content__wraper__2 .get__touch__input input {
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
    background: 0 0;
    padding-bottom: 10px;
    margin-bottom: 5px;
    margin-top: 20px;
    color: #5f6c76
}

.blogsidebar__content__wraper__2 .get__touch__input .default__button {
    padding: 13px 55px;
    background: var(--btns-bg-color);
    color: #fff;
    display: inline-block;
    text-align: center;
    border-radius: 4px;
    font-size: 15px;
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
}

.ralated-report-sec {
    margin-top: 50px;
    margin-bottom: 40px
}

.instructor__heading__2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px
}

.instructor__heading__2 h3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2px;
    margin-bottom: 30px;
    padding-left: 15px;
    color: #000
}

.gridarea__wraper {
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 20px 10px rgba(95, 45, 237, .05);
    margin-bottom: 30px;
    height: 100%;
}

.awarness-model-btn,
.book-meeting-btn {
    white-space: nowrap;
    background-image: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
}

.gridarea__wraper .gridarea__img {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px
}

.gridarea__wraper .gridarea__content .gridarea__list {
    margin-bottom: 15px
}

.gdpr-list div,
.gridarea__wraper .gridarea__content .gridarea__list ul {
    display: flex
}

.gridarea__wraper .gridarea__content .gridarea__list ul li {
    font-size: 14px;
    width: 50%;
    color: #000
}

.gridarea__wraper .gridarea__content .gridarea__list ul li:nth-child(2) {
    text-align: center
}

.gridarea__wraper .gridarea__content .gridarea__list ul li i {
    font-size: 18px;
    color: #2a58a5;
    margin-right: 5px
}

.gridarea__wraper .gridarea__content .gridarea__heading h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    color: #000
}

.gridarea__wraper .gridarea__content .gridarea__heading p {
    font-weight: 400;
    font-size: 16px;
    line-height: 29px;
    color: #949392;
    margin-bottom: 15px;
    max-height: 145px;
    text-overflow: ellipsis;
    overflow: hidden
}

.gridarea__wraper .gridarea__content .gridarea__heading h3 a,
.our-services-section .measure-list li {
    color: #000
}

.awarness-model-footer {
    margin-top: 0;
    justify-content: center
}

.awarness-model-content {
    padding: 20px 40px 40px
}

.awarness-model-header {
    justify-content: end;
    border: none;
    padding: 0
}

.awarness-model-header button span {
    font-size: 25px;
}

.awarness-model-btn {
    padding: 8px 30px;
    border: none;
}

@media (min-width:576px) {
    .awarness-model {
        max-width: 800px !important;
        margin: 30px auto
    }
}

.navbar-collapse {
    align-items: center;
    flex-basis: 100%;
    flex-grow: 1
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-left: 0
}

.navbar-nav .nav-item a {
    color: #212121 !important;
    font-size: 16px;
    font-weight: 500
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.book-meeting-btn {
    margin-right: 15px;
    outline: 0;
    border: none
}

.brand-main-menu li.active .hs_cos_wrapper_type_module.open .mega-menu-kf4,
.brand-main-menu li.active .mega-menu-kf4 {
    display: block !important
}

.mega-menu-kf4 {
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    overflow: hidden
}

.mega-menu-kf4 .headings {
    color: #405261;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 8px;
    padding-bottom: 16px;
    padding-top: 16px;
    position: relative;
    text-indent: 24px;
    font-weight: 400
}

.mega-menu-kf4 ul {
    margin-bottom: 0;
    padding-left: 0
}

.mega-menu-kf4 .bigger-column.solutions_bigger_column li {
    border-radius: 12px;
    position: relative
}

.mega-menu-kf4 a {
    color: #1d2b36;
    display: block;
    text-decoration: none
}

.mega-menu-kf4 .bigger-column li a {
    border: 1px solid transparent;
    border-radius: 8px;
    transition: .5s
}

.mega-menu-kf4 .bigger-column a {
    padding: 16px
}

.mega-menu-kf4 p {
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.5rem;
    color: #212121;
    text-align: left;
    letter-spacing: .5px;
}

button.menuitembtn {
    background-color: transparent;
    border-style: none;
    color: inherit;
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.mega-menu-kf4 .bigger-column span {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 20px
}

.text-charcoal300 {
    color: #556575 !important;
    font-weight: 300
}

.mega-menu-kf4 .small-column .headings:after {
    background-color: #d5dce1;
    bottom: 0;
    content: "";
    height: 1px;
    left: 24px;
    position: absolute;
    width: 90%
}

.mt-8,
.mt-md-8 {
    margin-top: .5rem !important
}

.mega-menu-kf4 .small-col a {
    margin-bottom: 0;
    padding: 12px 8px 12px 12px;
    position: relative
}

.me-8 {
    margin-right: 1rem !important
}

.mega-menu-kf4 .small-col li a.active,
.mega-menu-kf4 .small-col li:focus a,
.mega-menu-kf4 .small-col li:hover a {
    color: #0d48a6
}

.mega-menu-kf4 .small-col li a.active:before,
.mega-menu-kf4 .small-col li:focus a:before,
.mega-menu-kf4 .small-col li:hover a:before {
    opacity: 1;
    transform: translateX(0);
    transition: .5s
}

.mega-menu-kf4 .bigger-column.solutions_bigger_column li:hover {
    background: linear-gradient(96deg, #fff, hsla(0, 0%, 100%, .68));
    border-radius: 12px;
    box-shadow: 8px 8px 16px 0 rgba(178, 212, 255, .3);
    transition: .5s;
    z-index: 1
}

.brand-main-menu .arrow.down {
    border: solid #1d2b36;
    border-width: 0 2px 2px 0;
    display: inline-block;
    margin: 0 0 2px 4px;
    padding: 3px;
    position: relative;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: .5s
}

.dropdown-toggle::after {
    display: none
}

.py-16 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important
}

.pt-8,
.py-20 {
    padding-top: .5rem !important
}

.py-20 {
    padding-bottom: .5rem !important
}

.bg-blue100 {
    background-color: #ecf3ff !important
}

.nav-item .hs_cos_wrapper_type_module.open .back-submenu {
    color: #09366d !important
}

.ms-32 {
    margin-left: 2rem !important
}

.ms-24,
.ms-5 {
    margin-left: .5rem !important
}

.bg-ash100 {
    background-color: #f9fafa !important
}

.px-16 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.mt-16 {
    margin-top: 1rem !important
}

.px-32 {
    padding-left: 2rem !important;
    padding-right: 2rem !important
}

.pb-24 {
    padding-bottom: 1.5rem !important
}

.sticky {
    transition: .4s;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1)
}

#playme {
    cursor: pointer
}

.terms-conditions .text-holder p,
.terms-conditions ul li {
    padding-left: 0;
    font-size: .8rem;
    text-indent: 0;
    margin-left: 0
}

.terms-conditions ul li i {
    margin-left: 0;
    margin-right: 15px
}

.popup-terms-conditions .modal-header {
    justify-content: center !important
}

.popup-terms-conditions .modal-header .btn-close {
    position: absolute;
    right: 10px;
    top: 10px
}

.popup-terms-conditions .modal-body {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.popup-terms-conditions .modal-body::-webkit-scrollbar {
    display: none
}

.compliance-matters h1 {
    line-height: 1.3
}

.compliance-matters h5 {
    font-size: 1.2rem;
    background: var(--text-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.gdpr-main-box {
    padding: 20px;
    width: 100%;
    max-width: 220px;
    border-radius: 8px;
    box-shadow: rgba(17, 17, 26, .05) 0 1px 0, rgba(17, 17, 26, .1) 0 0 8px;
    margin: 10px
}

.gdpr-card,
.gdpr-left-action {
    background: linear-gradient(to bottom, #fff 0, #e7eaef 100%);
    padding: 20px 50px;
    border-radius: 8px
}

.gdpr-main-box i {
    font-size: 50px;
    background: linear-gradient(20deg, #03c0ce 0, indigo 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.gdpr-main-box h1 {
    font-size: 2rem;
    margin-top: 15px
}

.gdpr ul li {
    font-size: 19px !important;
    line-height: 1.4;
    text-indent: 0;
    margin-left: 25px;
    margin-bottom: 0
}

.gdpr ul div {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem
}

.gdpr-left-action h1 {
    font-size: 2rem;
    line-height: 1.5
}

.gdpr-card {
    border: 1px solid #146ebe;
    height: 100%
}

.gdpr-subtitle {
    margin-bottom: 1rem !important;
    line-height: 1.4
}

.text-action ul li {
    line-height: 1.4;
    font-weight: 500;
    font-size: 17px;
    color: #374151;
}

.gdpr-list div .gdpr-list-image {
    height: 80px;
    width: 80px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 5px
}

.timeline-second div:nth-child(2n):before,
.timeline-second div:nth-child(odd):before {
    content: counter(section);
    padding: 10px;
    height: 80px;
    width: 80px;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    font-size: 30px;
    display: flex;
    position: absolute;
    border-radius: 50%;
    text-align: center;
    font-weight: 600
}

.gdpr-list div ul li,
.gdpr-list div ul p {
    margin-left: 0 !important;
    margin-bottom: 0;
    text-indent: 0
}

@media (max-width:1200px) {
    .wrapping {
        flex-wrap: wrap
    }

    .gdpr-main-box {
        margin-top: 20px
    }
}

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

    .month-list-ul,
    header .current-date {
        display: none
    }

    .month-holder h5 {
        margin-bottom: 30px
    }

    .month-holder {
        width: 100%
    }

    header .responsive-month-year {
        display: block
    }

    .gdpr-left-action {
        margin-bottom: 50px
    }
}

@media only screen and (max-width:600px) {
    .col-master .col p {
        font-size: 18px !important
    }

    .project-single-area .legal-work-content h3 {
        color: #fff;
        font-size: 30px;
        font-weight: 600;
        margin-top: 30px;
        text-align: center
    }

    .project-single-area .legal-work-content p {
        margin: 20px 0 0;
        font-size: 1.1rem;
        text-align: center
    }

    .single-blog-post .text-holder-service {
        padding: 11px 25px 22px 15px;
        transition: .5s;
        position: relative;
        z-index: 1;
        height: 70px
    }

    .single-blog-post .text {
        margin-top: -20px
    }

    .single-blog-post .text-holder-service .meta-info {
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 25px;
        margin-left: -25px;
        margin-right: -25px;
        padding: 5px 0 12px 25px
    }

    .single-blog-post .text-holder-service .meta-info li {
        display: block
    }

    .single-blog-post .text-holder-service .meta-info li a {
        color: #222;
        font-size: 16px;
        font-weight: 500;
        font-family: Poppins, sans-serif;
        transition: .5s;
        line-height: 26px
    }

    .single-blog-post .text-holder-service .blog-title {
        color: #222;
        display: block;
        font-size: 20px;
        font-weight: 500;
        line-height: 26px;
        padding: 0;
        transition: .5s;
        font-family: Poppins, sans-serif
    }

    .single-blog-post .text-holder-service .blog-title:hover,
    .single-blog-post .text-holder-service .meta-info li a:hover {
        color: #3d4394
    }

    .single-blog-post .text-holder-service .text,
    .single-shop-content .content-box .text {
        display: none
    }

    .single-blog-post .text-holder-service .text p {
        margin: 0;
        text-align: justify
    }

    .single-blog-post .text-holder-service h3 {
        color: #353535 !important;
        font-size: 15px;
        text-align: center
    }

    .single-blog-post .text-holder-service .readmore {
        overflow: hidden;
        padding-top: 24px
    }

    .single-blog-post .text-holder-service .readmore a {
        color: #2a58a5;
        font-size: 14px;
        font-weight: 200;
        text-transform: capitalize;
        font-family: Poppins, sans-serif;
        transition: .5s
    }

    .single-blog-post .text-holder-service .readmore a:hover {
        color: #696969
    }

    .single-shop-area {
        padding-bottom: 50px
    }

    .single-shop-content .img-holder {
        margin-right: 50px
    }

    .single-shop-content .img-holder img {
        width: 100%
    }

    .single-shop-content .content-box {
        margin-top: -40px !important;
        margin-bottom: 0 !important
    }

    .single-shop-content .content-box h3 {
        color: #47588f;
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 8px;
        text-transform: capitalize
    }

    .single-shop-content .content-box h4 {
        color: #2a58a5;
        font-size: 14px
    }

    .lura-action-area {
        height: auto;
        background-color: #fafafa;
        padding-bottom: 30px
    }

    .lura-action-area .img-holder img {
        padding-right: 20px
    }

    .text-align {
        padding: 30px 0 !important
    }

    .center-img {
        margin-top: 0
    }

    #rc-imageselect,
    .g-recaptcha {
        transform: scale(.77);
        -webkit-transform: scale(.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0
    }

    .gdpr-left-action h1 {
        font-size: 1.5rem
    }

    .gdpr-left-action {
        padding: 20px 30px
    }
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 50px auto 0;
    list-style-type: none;
    counter-reset: css-counter 0
}

.timeline-title-card {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    text-align: center;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, .25) 0 0 20px -20px, rgba(0, 0, 0, .3) 0 30px 60px -30px, rgba(10, 37, 64, .35) 0 -2px 6px 0 inset
}

.timeline-title {
    letter-spacing: -.022em;
    line-height: 1.2;
    font-size: 2.275rem !important;
    font-weight: 500;
    color: #fff
}

.timeline-second {
    max-width: 1000px;
    width: 100%;
    margin: auto
}

.timeline-second div {
    border-top: 2px dashed;
    border-color: var(--dark-bg-green) !important;
    margin: 0;
    padding: 30px 50px;
    counter-increment: section;
    position: relative;
    margin-bottom: 0 !important;
    width: 100%
}

.timeline-second h5 {
    color: var(--dark-bg-green);
    font-size: 1.1rem;
    font-weight: 500;
}

.timeline-second div:nth-child(2n):before {
    right: 100%;
    bottom: 0;
    margin-right: -40px;
    color: #fff;
    justify-content: center;
    align-items: center
}

.timeline-second div:nth-child(odd):before {
    left: 100%;
    top: 0;
    margin-left: -40px;
    color: #fff;
    justify-content: center;
    align-items: center
}

.timeline-second div:nth-child(2n) {
    border-left: 2px dashed;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-right: 30px;
    padding-right: 0
}

.timeline-second div:nth-child(odd) {
    border-right: 2px dashed;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-left: 30px;
    padding-left: 0
}

.timeline-second div:first-child {
    border-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.timeline-second div:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.bg-frosted {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background: rgba(32, 36, 46, .9);
    box-shadow: 0 16px 48px -16px rgba(15, 19, 31, .1);
    border-radius: 48px;
    margin: auto;
    max-width: 100%
}

.int-wrapper {
    width: 1266px;
    padding: 84px 108px
}

.awards-title h2 {
    font-size: 45px !important;
    line-height: 45px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 40px
}

.w-20-md {
    min-width: 20%;
    padding: 0 10px;
    width: 20%;
    max-width: 20%
}

.integration-item {
    background: #f2f5f8;
    border: 2px solid #f2f5f8;
    border-radius: 9.24138px;
    box-sizing: border-box;
    height: 110px;
    margin-bottom: 20px;
    padding: 10px 40px
}

.int-logo-item {
    margin: auto
}

.gatsby-image-wrapper img {
    max-width: 100%;
    display: block;
    position: static;
    width: 100%;
    object-fit: cover;
    height: 100%
}

.tab-title {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    padding: 30px 40px 68px 30px;
    border-radius: 12px 12px 0 0;
    color: #fff;
    overflow: visible;
    width: 100%
}

.tab-title .bg-block {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden
}

.contact-panels {
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding-top: 64px;
    padding-bottom: 49px;
    background-image: -webkit-linear-gradient(90deg, #ebf0fb 0, #f2f7fd 25%, #f8fdff 70%, #fff 100%);
}

h2.section-gdpr-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 10px
}

.contact-panels .contact-us-panel {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 36px;
    background-color: #fff;
    box-shadow: 0 14px 34px rgba(60, 67, 87, .47);
    border-radius: 12px
}

.contact-panels .contact-us-panel .section-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 500;
    margin-bottom: 20px
}

.contact-panels .contact-us-panel:after {
    content: "";
    position: absolute;
    top: 2px;
    right: -66px;
    z-index: -1;
    width: 391px;
    height: 209px;
    background-image: url(../images/complaince/gdpr/dots.svg);
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none
}

.explain-section {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    position: relative;
}

.explain-section .column {
    width: 100%;
    background-color: rgba(40, 90, 230, .05);
    background-repeat: repeat-y;
    background-size: 1400px;
    padding: 40px 30px 30px;
    margin: 0 0 30px;
    position: relative;
    box-shadow: 0 10px 32px rgba(40, 90, 230, .1);
    border-radius: 12px
}

.explain-section .box-internal {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%
}

.explain-section .box img {
    margin: 0 0 17px;
    width: 48px
}

.explain-section .box-col {
    font-size: 1rem;
    line-height: 1.5rem
}

.explain-section .title-subtitle h2 {
    text-align: center;
    font-size: 1.5rem !important;
    line-height: 1.8125rem;
    font-weight: 700;
    color: #fff
}

.explain-section .column h3 {
    color: #9451ea;
    font-size: 1.375rem;
    line-height: 1.625rem;
    font-weight: 700
}

.explain-section .box .decor-element {
    border-radius: 999px;
    position: absolute;
    top: -38px;
    left: calc(50% - 23px);
    padding: 23px;
    width: 46px;
    height: 46px
}

.explain-section .box .decor-element:before {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 16px;
    background-color: #fff;
    content: ""
}

.explain-section .box .decor-element:after {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 2px;
    transform: translateY(-50%);
    left: 15px;
    background-color: #fff;
    content: ""
}

.measure-list li {
    transform: none;
    padding: 0 32px 15px 72px;
    max-width: 100%;
    position: relative
}

.measure-list li {
    font-size: 1.2rem;
    color: #002b4d
}

.measure-list li div.title-block {
    font-size: 1.2rem;
    color: #111827
}

.measure-list li p,
.step-card p {
    font-size: 1.07rem;
    line-height: 1.5;
    color: #5f6c76;
    margin-top: 8px
}

.measure-list li .circle {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 2;
    border: 2px solid #fff;
    top: -20px;
    left: 0;
    transform: translateY(50%);
    background-color: #fff;
    box-shadow: 0 6px 6px 0 rgba(33, 33, 33, .42)
}

.measure-list li .circle:before {
    content: "";
    display: block;
    position: relative;
    width: 300%;
    height: 300%;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 50%;
    z-index: 2;
    animation: 1.25s cubic-bezier(.215, .61, .355, 1) infinite forwards pulse-ring
}

@keyframes pulse-ring {
    0% {
        transform: scale(.33);
        background-color: #F60109
    }

    100%,
    80% {
        opacity: 0
    }
}

.measure-list li .circle:after {
    position: absolute;
    border-radius: 50%;
    border: 10px solid #f5f5f5;
    box-shadow: 0 6px 6px 0 rgba(33, 33, 33, .42);
    z-index: 3;
    content: "";
    background-color: #F60109 !important;
    border: none;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    box-shadow: none;
    width: 16px;
    height: 16px;
    animation: 1.25s cubic-bezier(.455, .03, .515, .955) -.4s infinite alternate pulse-dot;
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(.8)
    }

    50% {
        transform: scale(1)
    }
}

.measure-block .line {
    position: absolute;
    right: auto;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    height: 85%;
    left: 33px;
    width: 5px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../images/complaince/gdpr/line-vertical.svg);
    background-size: auto 100%
}

.other-privacy ul li a:hover {
    color: #0275d8
}

.single-panel {
    bottom: 0;
    transition: bottom .25s ease-out;
    cursor: default
}

.single-panel:hover {
    bottom: 10px
}

.single-panel .content-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    box-shadow: 0 3px 22px rgba(40, 90, 230, .2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    background: #fff
}

.content-panel .panel-title-1 {
    background-image: var(--flyer-bg-gradient)
}

.content-panel .panel-title-2 {
    background-image: var(--casestudy-bg-gradient)
}

.content-panel .panel-title-3 {
    background-image: var(--threats-bg-gradient)
}

.content-panel .panel-title {
    padding: 30px;
    background-size: 200%;
    width: 100%
}

.content-panel .panel-title .title {
    font-size: 1.5rem;
    line-height: 1.8125rem;
    color: #fff;
    margin-bottom: 0
}

.panel-text {
    padding: 20px 30px 40px;
    width: 100%
}

.panel-text ul div {
    margin-bottom: 10px;
}

.panel-text ul li {
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: .5rem;
    color: #5f6c76
}

.panel-text ul div span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #5f6c76;
    margin-right: 20px;
    margin-top: 7px
}

.our-services-section .measure-list li {
    padding: 0 32px 60px 72px;
    font-size: 1.2rem;
}

.our-services-section .line,
.spotlight-service-section .line {
    height: 90%
}

.grey-background-offset {
    background: #ededed
}

.pulsate {
    animation: 2s ease-in-out infinite pulsate-animation
}

@keyframes pulsate-animation {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.iq-project-info.media {
    z-index: 2;
    background: #fff;
    padding: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    top: 0;
    -webkit-transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -ms-transition: .5s ease-out;
    -o-transition: .5s ease-out;
    transition: .5s ease-out;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1)
}

.iq-project-info.media i {
    font-size: 25px;
    color: #fff;
    float: right;
    background: linear-gradient(20deg, #03c0ce 0, indigo 100%);
    line-height: 60px;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 100%
}

.type-link .content p {
    margin-bottom: 0;
    color: #5f6c76;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: .5px
}

.our-service-card {
    border: 1px dashed #fff
}

.our-service-card h3 {
    font-size: 1.1rem;
    font-weight: 500;
}

.our-service-card .content {
    padding-left: 27px;
    font-size: 1.07rem;
    line-height: 1.5;
    margin-top: 8px
}

.our-service-card:hover {
    background: var(--btns-bg-color);
    background-size: 150%;
}

.youtube-section {
    padding-top: 70px;
    background: #fafafa
}

.youtube-btn a svg {
    margin-right: 10px
}

.youtube-video {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 40px 75px;
    border-radius: 5px;
    position: relative;
    z-index: 3
}

.youtube-video h2 {
    color: #fff;
}

.youtube-video h2::before {
    display: none;
}

.youtube-video p {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    color: #fff
}

.compliance-table tbody tr td,
.tab-contents-box p {
    font-size: 1rem;
    color: #5f6c76;
    font-weight: 400;
    letter-spacing: .5px
}

.youtube-video a.btn {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--dark-bg-green) !important;
    display: flex;
    justify-content: center;
    align-items: center
}

.measure-block.irdai-benefits .line {
    height: 85%
}

.measure-list.irdai-benefits li {
    padding: 0 32px 30px 72px
}

.compliance-table {
    box-shadow: 0 5px 12px -12px rgba(0, 0, 0, .29)
}

.compliance-table tbody:before {
    content: "-";
    display: block;
    line-height: 1.5em;
    color: transparent
}

.compliance-table thead tr {
    background: #001424;
    color: #fff
}

.compliance-table thead th {
    padding: 20px 10px !important
}

.compliance-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05)
}

.compliance-table tbody tr,
th {
    padding: 20px 30px !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1.4
}

.compliance-table tbody tr td {
    line-height: 1.4;
    vertical-align: middle
}

.course-tab-v2 .nav-item:not(:last-child) {
    margin-right: 25px
}

.ccpa-tab-content,
.tab-manual {
    box-shadow: 0 0 50px rgba(183, 199, 240, .25) !important
}

.tab-manual .nav {
    justify-content: flex-start !important
}

.tab-manual .nav-pills .nav-link {
    color: #002b4d;
    text-wrap: nowrap
}

.course-tab-v2 .nav-item .nav-link i {
    margin-right: 15px
}

.tab-contents-box p {
    line-height: 1.7
}

.client-sec {
    background-image: url(../../user_template/images/homepage/client.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px
}

.embed-responsive::before {
    display: block;
    content: "";
    padding-top: 100%
}

.soc-compliance-table th {
    min-width: 250px
}

.soc-compliance-table td {
    table-layout: fixed;
    width: 50%
}

.soc-points i {
    font-size: 14px;
    line-height: 30px;
    margin-left: -24px;
    margin-right: 6px
}

.compliance-soc-section .measure-list li {
    padding: 0 32px 20px 72px
}

#noDate_error {
    color: red
}

;

.leader-card {
    border-radius: .5rem !important;
    border: 1px solid #e7e7ec !important;
    height: 100%
}

.leader-mini-card {
    margin-bottom: 1rem !important;
    overflow: hidden
}

.leadership h5 {
    line-height: 1.5;
    font-size: 1.125rem;
    font-weight: 500;
    color: #2f2d51
}

.leadership-footer span {
    font-size: 1rem;
    line-height: 1.6;
    color: #77838f
}

.mr-3 {
    margin-right: 1rem !important
}

.sec-title .border {
    display: block;
    width: 80px;
    height: 5px;
    background: var(--title-top-line-bg);
    margin: 2px 0 13px;
    border-radius: 2px;
    border: none !important
}

.sec-title .border.center {
    margin: 10px auto 5px
}

.card-footer.leadership-footer {
    border: none;
    background: 0 0
}

.overlay-about {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: .5s;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.customer-feedback-slider {
    background: #fff;
    box-shadow: 0 3px 10px #ededed;
    margin-left: 150px;
    margin-top: 20px
}

.working-area {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
}

.know-more {
    background: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
}

.single-testimonial-content {
    display: flex;
    padding: 20px
}

.single-testimonial-content .text-box {
    padding: 33px 40px 0 115px
}

.single-testimonial-content .name-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-left: 1px solid #f2f2f2
}

.single-testimonial-content .text-box:after {
    position: absolute;
    top: 75px;
    left: 40px;
    content: "“";
    font-size: 8rem;
    line-height: 40px;
    color: #f2f2f2
}

.customer-feedback-slider .owl-controls .owl-nav {
    position: absolute;
    left: -150px;
    bottom: 20px;
    display: flex
}

.customer-feedback-slider .owl-controls .owl-nav .owl-next,
.customer-feedback-slider .owl-controls .owl-nav .owl-prev {
    transition: .5s;
    border: 1px solid #e8e8e8;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    text-align: center;
    color: #555;
    line-height: 46px;
    margin-right: 10px
}

.working-area {
    position: relative;
    padding-bottom: 40px
}

.working-area .single-item {
    background: #fff;
    display: block;
    padding: 40px 40px 33px;
    margin-right: 25px
}

.working-area .owl-carousel .owl-controls {
    display: none
}

.working-area .owl-carousel .owl-item {
    height: 100%
}

.working-area .single-item .icon-holder span:before {
    color: indigo;
    font-size: 50px;
    line-height: 50px
}

.working-area .single-item .text-box {
    margin-top: 24px
}

.working-area .single-item .text-box h3 {
    color: var(--dark-bg-puple);
    margin: 0 0 16px
}

.know-more {
    display: inline-block;
    padding: 15px 30px;
    line-height: 13px;
    color: #fff;
    border-radius: 0.7rem;
    font-size: 0.9rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.single-footer-widget .footer-social-links {
    overflow: hidden;
    margin: 22px 0 0
}

.socialicon-style-two li {
    display: inline-block;
    float: left;
    margin-right: 10px
}

.socialicon-style-two li a {
    height: 40px;
    width: 40px;
    display: block;
    border-radius: 50%;
    background: #fff;
    color: #000;
    line-height: 34px;
    border: 2px solid #fff;
    transition: .5s;
    text-align: center
}

.callto-action-text .text-holder p,
.callto-action-text ul li {
    position: relative;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: #111827;
    padding-left: 15px;
}

.left-sidebar {
    margin-right: 30px
}

.left-sidebar .single-sidebar .page-links {
    overflow: hidden;
    margin-bottom: 40px;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
}

.left-sidebar .single-sidebar .page-links li a.active,
.left-sidebar .single-sidebar .page-links li a:hover {
    color: #fff;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
}

.left-sidebar .single-sidebar .service-brochures {
    overflow: hidden;
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    color: #fff;
    margin-bottom: 40px;
    display: block;
    padding: 30px
}

.left-sidebar .single-sidebar .title {
    margin-top: -6px;
    padding-bottom: 30px
}

.left-sidebar .single-sidebar .title .border {
    width: 70px;
    height: 2px;
    display: block;
    background: #fff;
    margin-top: 13px
}

.left-sidebar .single-sidebar .page-links li a {
    color: #fff;
    display: block;
    font-size: 16px;
    padding: 15px 30px;
    width: 100%;
    position: relative;
    margin-bottom: 5px
}

.casestudy-carousel .owl-nav {
    display: flex
}

.measure-block,
.step-container {
    position: relative
}

.measure-block .line {
    position: absolute;
    right: auto;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    height: 85%;
    left: 18px;
    width: 5px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../images/complaince/gdpr/line-vertical.svg);
    background-size: auto 100%
}

.our-services-section .line,
.spotlight-service-section .line {
    height: 90%
}

.compliance-media {
    display: flex;
    padding: 25px;
    box-shadow: 0 0 15px 7px rgba(0, 0, 0, .05);
    border-radius: 15px;
    height: 100%
}

.accordion .card-light h3 button {
    text-align: left
}

.border-design {
    position: relative;
    margin-left: 70px;
    display: block;
    padding-left: 40px;
    padding-top: 40px;
    z-index: 1;
    margin-bottom: 40px;
    width: 60%
}

.border-design::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 40px;
    right: 40px;
    content: "";
    background: #f7f7f7;
    border: 2px solid indigo;
    z-index: -1
}

.callto-action-text ul div svg {
    color: var(--dark-bg-green);
    font-size: 16px;
    display: inline-block;
    padding-right: 0;
}

.article-solutions {
    width: 55%
}

.single-shop-area .carousel-item-next,
.single-shop-area .carousel-item-prev,
.single-shop-area .carousel-item.active {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.single-sidebar::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 100%;
    width: 20px;
    margin-right: -1px;
    height: 48px;
    background: var(--dark-bg-puple);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%)
}

.callto-action-text .text-holder p {
    margin-top: 10px;
    padding-left: 30px
}

.captcha-img img {
    height: 42px !important;
    width: 100%;
    border-radius: 5px
}

.captchaspinning {
    animation: 2s linear infinite spinner
}

@keyframes spinner {
    0% {
        transform: rotate(0)
    }

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

.c-verify-captcha-size {
    width: 150px;
    height: 35px !important;
    border-radius: 5px
}

.content .time-form-holder .fabe-times {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.content .time-form-holder .fabe-times::-webkit-scrollbar {
    display: none
}

.threats-captcha svg {
    margin-right: 10px
}

.threats-captcha {
    margin-bottom: 20px
}

.threats-captcha img {
    width: 100%;
    height: 50px !important;
    border-radius: 5px
}

.team-style-two .single-team-member .text-holder {
    padding: 35px 30px;
    position: relative;
    background: var(--white);
    display: block;
    border-radius: 16px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.single-team-member,
.single-team-member .text-holder {
    height: 100%
}

.single-team-member .text-holder p {
    color: #222;
    font-size: 14px;
    display: inline-block;
    font-weight: 400;
}

.single-project-item .static-overlay .content span {
    color: #fcc80d
}

.blog-single-area .tag-box {
    overflow: hidden;
}

.lura-action-text {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.blog_section .flex-align.flex-column {
    position: relative;
}

.pressroom-carousel .owl-controls .owl-dots {
    display: none !important;
}

.delivery-content-text-holder {
    margin-bottom: 1rem
}

.delivery-content {
    margin-top: 1rem;
}

.delivery-content-text-holder span {
    font-size: 1.1rem
}

.control-padding {
    padding-bottom: 100px;
}

.customer-feedback-carousel .owl-controls .owl-dots {
    display: none !important;
}

.customer-feedback-carousel .animated {
    animation-duration: 0s !important;
}

.heading__underline span,
.enquiryform-title span {
    padding-top: 0 !important;
}

.job-career-area .sec-title .title-header {
    font-size: 1.7rem !important;
    font-weight: 500;
    letter-spacing: -.022em;
    line-height: 1.17647;
    margin-bottom: 0;
    padding-top: 2rem;
    position: relative;
}

.working-area .single-item .icon-holder {
    width: 50px;
}

.single-testimonial-content p {
    font-size: 1rem;
}

.working-area .single-item .text-box p {
    font-size: 1.1rem;
    line-height: 1.5;
    letter-spacing: .5px;
}

.step-subheader span {
    font-size: 1.25rem;
    font-weight: 500;
}

.text-action ul div span {
    margin-right: 10px;
}

.text-action ul div span svg {
    vertical-align: baseline;
}

.media-body h4 {
    font-size: 1.1rem;
    font-weight: 500;
}

.media-body p {
    font-size: 1rem;
}

.project-txt h3 {
    font-size: 1.2rem;
    font-weight: 400;
}

.contact-map-container {
    margin-top: 80px;
    margin-bottom: 100px;
}

.address-sec {
    margin-bottom: 60px;
}

.callto-action-text.terms-conditions .text-holder p,
.callto-action-text.privacy-policy .text-holder p,
.callto-action-text.terms-conditions ul li,
.callto-action-text.privacy-policy ul li {
    line-height: 1.6;
}

.callto-action-text.privacy-policy ul li {
    padding-left: 30px;
}

.not-found-area {
    padding: 80px 0;
}

.pt-pb-40 {
    padding: 40px 0 50px;
}

.customer-feedback-carousel.owl-carousel .owl-animated-in {
    z-index: 9;
}

.alert-cookie .cookieBtn,
.alert-cookie p {
    color: #fff;
    font-size: 13px;
    display: inline-block
}

.alert-cookie {
    align-items: center;
    background: var(--primary-bg-gradient);
    border: none;
    border-radius: 4px;
    color: #fff;
    flex-direction: row;
    left: 10px;
    margin-bottom: 0;
    max-width: 700px;
    padding: 14px 20px;
    position: fixed;
    text-align: left;
    width: 100%;
    z-index: 10000;
    bottom: 10px;
    display: none
}

.alert-cookie a {
    color: #fff;
    text-decoration: underline
}

.alert-cookie p {
    line-height: 20px;
    margin: 0
}

.alert-cookie .cookieBtn {
    background: 0 0;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    height: 35px;
    line-height: 1;
    margin: 0 0 0 15px;
    text-transform: capitalize;
    width: 100px
}

.alert-cookie .cookieBtn:hover {
    background: #fff;
    border: 1px solid transparent;
    color: #000;
    transition: .1s ease-in-out
}

.alert-cookie.down {
    bottom: -100px;
    transition: bottom .8s ease-in-out
}

.nist-compliance-table tbody tr th {
    min-width: 330px;
    text-align: center;
    vertical-align: middle;
}

.nist-compliance-table .soc-points {
    padding-left: 15px;
    padding-bottom: 10px;
}

.project-priview-img img {
    width: 100%;
}

.fixed_header {
    background: #fff;
}

.newsroom-text-holder h2 {
    color: var(--dark-bg-puple);
    font-size: 30px !important;
}

.newsroom-text-holder h3 {
    color: #000000 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}

.newsroom-text-holder p {
    font-size: 1.1rem !important;
    color: #5f6c76;
}

.leadership-team h1 {
    font-size: 2.275rem;
    letter-spacing: -.022em;
    line-height: 1.2;
    font-weight: 500;
}

.ztf-h2 {
    color: #FFF;
    font-size: 1.2rem !important;
    font-weight: 400;
    text-transform: uppercase;
}

.carousel-item .section-light-down .section-header .home-h1 {
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
}

.fabe-time-slot.inactive {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.jobs_card_content,
.jobs_card_main .jobs_card_anchor {
    flex-direction: column;
    width: 100%;
    height: 100%;
    display: flex
}

.jobs-card-title,
.jobs-main-title {
    font-weight: 500;
    letter-spacing: -.022em;
    line-height: 1.2
}

.career-jobs {
    padding-bottom: 40px
}

.jobs_card_main {
    display: flex
}

.jobs-main-title {
    text-align: center;
    font-size: 2.275rem !important;
    position: relative
}

.jobs_card_main .jobs_card_anchor {
    padding: 32px;
    border-radius: 24px;
    background-color: #fff;
    border: 1px solid #d4e0ed;
    box-shadow: rgba(71, 103, 136, .04) 0 4px 5px 0, rgba(71, 103, 136, .03) 0 8px 15px 0, rgba(71, 103, 136, .06) 0 15px 30px 0;
    background-position: right center;
    background-size: cover
}

.jobs_card_content {
    gap: 12px
}

.jobs_header {
    display: flex;
    width: 100%
}

.jobs_header_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%
}

.jobs-card-title {
    font-size: 1.4rem;
    text-align: left;
    color: #0b3558;
    margin-bottom: 0
}

.jobs-card-body {
    width: 100%;
    height: 100%;
    color: #476788;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400
}

.jobs_header_title {
    display: flex;
    width: fit-content;
    height: fit-content;
    -webkit-box-align: center;
    align-items: center;
    gap: 4px;
    background-color: #e6f0ff;
    border-radius: 50px;
    font-weight: 500;
    padding: 4px 12px;
    font-size: .825rem;
    line-height: 1.4;
    white-space: nowrap;
    color: #004eba;
    transition: .2s
}

.jobs_header_btn {
    cursor: pointer;
    width: 100%;
    max-width: 32px;
    height: 32px;
    position: relative;
    border-radius: 4px;
    color: #0b3558;
    background-color: transparent
}

.jobs_header_btn div svg {
    transform: translate(0);
    transition: transform 175ms ease-in-out
}

.jobs_card_main .jobs_card_anchor:hover .jobs_header_btn div svg {
    transform: translate(6px, -6px)
}

.jobs-form .form-group {
    position: relative
}

.jobs-form .form-group .form-control {
    border-radius: 12px;
    padding: 0 20px;
    width: 100%;
    height: 55px;
    border: 0;
    outline: 0;
    font-weight: 500;
    font-size: 15px;
    box-shadow: inset 0 0 0 1px #e5e5e5;
    transition: box-shadow .3s cubic-bezier(.3, 0, 0, .3);
    color: #000229;
    margin-bottom: 0
}

.jobs-form .form-group .form-control:focus {
    box-shadow: 0 1px 2px 1px rgba(32, 33, 36, .06), inset 0 0 0 2px #19336e;
    background-color: #fff !important
}

.jobs-form .form-group .form-control:-internal-autofill-selected {
    background-color: #fff !important
}

.jobs-form .form-group.mb-30 {
    margin-bottom: 0
}

.jobs-form .form-group textarea {
    height: 80px !important;
    resize: none;
    padding: 20px !important
}

.jobs-form .form-group .floating-label {
    position: absolute;
    pointer-events: none;
    font-size: 15px;
    color: #000;
    left: 35px;
    top: 33%;
    transform: translateY(-50%);
    transition: .2s
}

.jobs-form .form-group .form-control:focus~.floating-label,
.jobs-form .form-group .form-control:not(:placeholder-shown)~.floating-label {
    top: 0;
    left: 20px;
    font-size: 13px;
    font-weight: 400;
    color: #19336e;
    background-color: #fff;
    padding: 0 4px
}

.jobs-form .form-group .floating-label.floating-label-2 {
    top: 35px
}

.jobs-form .form-group.image-upload label {
    width: 100%;
    height: 80px;
    border: 2px dashed #c1c4ce;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.jobs-form .form-group.image-upload label span {
    background-color: #f3f3f3;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    color: #000229
}

.img-upload-title,
.job-authorization-title-box {
    padding-bottom: 15px;
    margin-bottom: .5rem
}

.job-authorization {
    margin-bottom: 20px
}

.job-authorization .switcher {
    margin-bottom: 15px
}

.job-authorization .switcher .switcher-label {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.job-authorization .switcher .switch {
    position: relative;
    width: 80px;
    height: 30px;
    text-align: center;
    background: linear-gradient(310deg, #17ad37, #98ec2d);
    transition: .2s;
    border-radius: 25px;
    box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
    background-size: 150%;
    background-position-x: 25%
}

.job-authorization .switcher .switch span {
    position: absolute;
    width: 13px;
    height: 3px;
    top: 50%;
    left: 50%;
    border-radius: 5px;
    margin: -2px 0 0 -2px;
    background: #fff;
    display: block;
    transform: rotate(-45deg);
    transition: .2s
}

.job-authorization .switcher .switch span:after {
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 6px;
    border-radius: 5px;
    margin-top: -5px;
    background: #fff;
    transition: .2s
}

.job-authorization .switcher .toggle-radio input[type=radio] {
    display: none
}

.job-authorization .switcher .switch label {
    cursor: pointer;
    color: rgba(0, 0, 0, .2);
    letter-spacing: -.025rem;
    text-transform: uppercase;
    width: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 30px;
    transition: .2s
}

.job-authorization .switcher .switch label[for$=yes] {
    position: absolute;
    left: 8px;
    height: 20px
}

.job-authorization .switcher .switch label[for$=no] {
    position: absolute;
    right: 4px
}

#bond-no:checked~.switch,
#notice-no:checked~.switch,
#onsite-no:checked~.switch,
#relocation-no:checked~.switch {
    background: linear-gradient(310deg, #ea0606, #ff667c)
}

#bond-no:checked~.switch span,
#notice-no:checked~.switch span,
#onsite-no:checked~.switch span,
#relocation-no:checked~.switch span {
    background: #fff;
    margin-left: -3px;
    margin-top: -2px
}

#bond-no:checked~.switch span:after,
#notice-no:checked~.switch span:after,
#onsite-no:checked~.switch span:after,
#relocation-no:checked~.switch span:after {
    background: #fff;
    height: 13px;
    margin-top: -5px;
    margin-left: 5px
}

#bond-no:checked~.switch label[for$=no],
#bond-yes:checked~.switch label[for$=yes],
#notice-no:checked~.switch label[for$=no],
#notice-yes:checked~.switch label[for$=yes],
#onsite-no:checked~.switch label[for$=no],
#onsite-yes:checked~.switch label[for$=yes],
#relocation-no:checked~.switch label[for$=no],
#relocation-yes:checked~.switch label[for$=yes] {
    color: #fff
}

.form.billing-info .sec-title h2 {
    padding-bottom: 20px;
    padding-top: 30px
}

.jobs-form span {
    font-size: 12px
}

.jobs-related-title {
    font-size: 20px !important;
    line-height: 1.2
}

.jobs-submit {
    padding: .925rem 1.875rem !important
}

.bg-cursor,
.cursor {
    border-radius: 100%
}

.video-service-model {
    max-width: 800px
}

.video-service-model .close-btn {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    top: -30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%
}

.video-service-model .btn-close {
    font-size: 7px;
    color: #000
}

.video-service-model .modal-content {
    background: 0 0;
    padding: 0
}

.video-service-model .modal-body {
    border-radius: 8px;
    overflow: hidden;
    background: 0 0
}

#video-section {
    cursor: none
}

.cursor {
    z-index: 3;
    background: rgba(22, 128, 251, .25);
    width: 80px;
    height: 80px;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%)
}

.bg-cursor {
    width: 60px;
    height: 60px;
    position: relative;
    background: linear-gradient(20deg, #03c0ce 0, indigo 100%)
}

.bg-cursor svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%)
}

.single-sidebar {
    position: relative;
}

.timeline-subtitle {
    margin-bottom: 0 !important;
}

.blog-single-area .single-sidebar::after {
    display: none;
}

.popup-2 .input-box input::placeholder,
.popup-2 .input-box textarea::placeholder {
    color: var(--dark-bg-green)
}

.btn.expand-button:active {
    color: #fff
}

.lura-sec-btn,
.lura-sec-btn a,
.lura-sec-btn a:hover,
:not(.btn-check)+.btn:active {
    color: var(--white)
}

.popup-terms-conditions .callto-action-text .text-holder p {
    padding-left: 10px
}

.agility-box {
    margin-bottom: 25px
}

.advantage-culture {
    background-image: url(./../images/service/advantage-culture.png)
}

.advantage-partner {
    background-image: url(./../images/service/advantage-partner.png)
}

.advantage-job {
    background-image: url(./../images/service/advantage-job.png)
}

.lura-content-wrapper {
    padding-top: 100px
}

.lura-content-inner h3 {
    letter-spacing: -.03px;
    font-size: 2.275rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 8px;
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text
}

.lura-content-inner h2 {
    letter-spacing: -.03px;
    font-size: 2.275rem !important;
    line-height: 56px;
    font-weight: 500;
    margin-bottom: 7px
}

.lura-sec-btn {
    white-space: nowrap;
    background-image: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    border: none
}

.lura-video-wrapper video {
    width: 100%;
    height: 100%;
    clip-path: fill-box;
    border-radius: .01px
}

.rating-img-wrap {
    margin-top: 10px;
    margin-bottom: 30px
}

.elementor-testimonial__content {
    padding: 20px;
    position: absolute;
    top: 160px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: .3s cubic-bezier(.85, 0, 0, 1)
}

.elementor-testimonial__text {
    color: #fff;
    font-family: "DM Sans", Sans-serif;
    font-size: 17px;
    font-weight: 400;
    font-style: normal
}

.elementor-testimonial__footer {
    display: inline-block;
    transition: .3s linear;
    background: #560b67;
    border-radius: 15px;
    overflow: hidden;
    width: 100%
}

.elementor-testimonial__image {
    flex-shrink: 0
}

.elementor-testimonial__image+cite {
    border-radius: 15px;
    margin-left: 0;
    padding: 40px 22px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: linear-gradient(0deg, #000, transparent)
}

.elementor-testimonial__footer cite,
.elementor-testimonial__header cite {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-style: normal;
    line-height: 1.2
}

.elementor-testimonial__name {
    color: #fff;
    font-size: 22px;
    font-weight: 400
}

.elementor-testimonial:hover .elementor-testimonial__content {
    opacity: 1;
    visibility: visible;
    top: 38px
}

.elementor-testimonial__image img {
    border-radius: 15px;
    object-fit: cover;
    max-width: 100%;
    width: 100% !important;
    height: 425px !important;
    transition: .3s linear
}

.elementor-testimonial:hover .elementor-testimonial__image img {
    scale: 5;
    transform-origin: top left;
    opacity: .5;
    filter: blur(8px)
}

.elementor-testimonial__content .indus_case {
    display: block;
    margin-top: 20px;
    text-decoration: none;
    background-position: center;
    color: #ff5c01
}

.case-study-area {
    padding-bottom: 50px
}

.blogsearch-container {
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 25px rgba(0, 0, 0, .1);
    padding: 6px;
    max-width: 500px;
    width: 100%;
    transition: .3s
}

.blogsearch-container:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, .15)
}

.blogformcontrol.form-control.search-input {
    border: none;
    background: 0 0;
    font-size: 1rem;
    height: 35px;
    margin-bottom: 0;
    padding: 5px 27px
}

.blogformcontrol.form-control.search-input:focus {
    box-shadow: none;
    outline: 0
}

.blogsearch-icon {
    color: #6c757d;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%)
}

.elementor-icon-list-text,
.eleminator-widget-card h5,
.eleminator-widget-card p,
.scroll-left-title ul li {
    letter-spacing: .5px;
    line-height: 1.7
}

.stick-img {
    height: 550px;
    padding-top: 50px;
    margin-right: 30px;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden
}

.stick-img-fixed {
    position: sticky;
    margin-top: 0;
    margin-bottom: 0;
    top: 180px;
    inset-inline-start: 169.6px
}

.elementor-icon-list-item {
    margin-top: 10px;
    padding-bottom: 10px
}

.elementor-icon-list-subitem {
    display: flex;
    align-items: flex-start
}

.elementor-icon-list-text {
    font-size: 1.1rem;
    color: #5f6c76
}

.blogCategory,
.blogDate {
    font-size: 12px;
    text-transform: uppercase
}

.elementor--icon-list-icon svg {
    fill: #F60109;
    margin-right: 15px
}

.elementor-icon-list-item h5 {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-top: 20px;
    font-weight: bolder
}

.elementor-content-holder {
    margin-top: 25px
}

.elementor-content-holder span {
    margin-top: 3px
}

.elementor-hold-image {
    display: flex;
    justify-content: end;
    align-items: center;
    overflow: hidden;
    padding: 40px;
    height: 100%
}

#cog {
    translate: none;
    rotate: none;
    scale: none;
    transition: transform 1s ease-out
}

.sticky-img-top {
    position: absolute;
    top: 0;
    left: 1%;
    animation: .8s infinite alternate tpupdown
}

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

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

.sticky-img-bottom {
    position: absolute;
    bottom: 30px;
    right: 2%;
    animation: 9s linear infinite moves
}

@keyframes moves {

    0%,
    100% {
        transform: translatey(0)
    }

    20% {
        transform: translateX(-50px)
    }

    50% {
        transform: translatey(-40px)
    }
}

.sticky-img-main {
    position: absolute;
    top: 0;
    left: 21px
}

.scroll-left-title {
    background-image: url(../../user_template/images/managed/about-section-two.png);
    background-size: 1250px 620px;
    background-position: center;
    inset-inline-start: 0;
    margin-right: 0;
    padding: 50px 30px 0;
    height: auto
}

.scroll-section {
    background: linear-gradient(90deg, #1f1f1f .04%, #101010);
    position: relative;
    padding-top: 40px;
    padding-bottom: 50px
}

.scroll-left-title ul li {
    font-size: 1rem;
    color: #5f6c76;
    padding-bottom: 35px;
    position: relative;
    border-radius: 8px;
    text-align: center
}

.scroll-left-title ul li::before {
    display: block;
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    background-image: radial-gradient(at center center, #00b8d9 0, #f2295B00 100%);
    width: 1px;
    height: 135px;
    inset-inline-start: 50%;
    left: 50%;
    top: -50px
}

.popular-blog-item:last-child::before,
.scroll-left-title ul li:last-child:before {
    display: none
}

.dark-theme .elementor-icon-list-item h5,
.dark-theme .elementor-icon-list-text {
    color: var(--white)
}

.dark-theme .elementor-icon-list-item b {
    color: #c50039
}

.list-group-item {
    border: none;
    transition: .5s ease-out;
    z-index: 1
}

.scroll-dark .list-group li:has(.list-group-item.active) {
    transform: scale(1.15);
    transition: transform .3s
}

.scroll-dark .list-group-item.active {
    background: var(--btns-bg-color);
    background-color: var(--btns-bg-color);
    box-shadow: 0 10px 25px rgba(246, 1, 9, .1);
    box-shadow: rgba(246, 1, 9, .12) 0 14px 28px, rgba(246, 1, 9, .2) 0 10px 10px;
    background-size: 150%;
    transform: scale(1.12);
    transition: transform .3s
}

.list-items {
    border-top: 2px dashed;
    border-color: var(--white) !important;
    margin: 0;
    padding: 30px 50px;
    counter-increment: section;
    position: relative;
    margin-bottom: 0 !important;
    width: 100%;
    padding-block-start: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    padding-block-end: clamp(3.75rem, 6.5vw + 1rem, 7.5rem)
}

.list-items:nth-child(odd) {
    border-right: 2px dashed;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-left: 30px;
    padding-left: 0
}

.list-items:nth-child(2n) {
    border-left: 2px dashed;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-right: 30px;
    padding-right: 0
}

.list-items:first-child {
    border-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.color-text-white {
    color: #fff !important
}

.elemetor-line-inside {
    height: 2px;
    width: 80px;
    background: linear-gradient(90deg, #ff5c01 0, #f60109 20%, #a1005d 36%, #740c7f 48%, #126f80 65%, #005a59 100%)
}

.elementor-left-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 30px;
    position: relative;
    z-index: 2
}

.arrow-contain,
.popular-blog-item-inner,
.widget-card-title {
    display: flex;
    align-items: center
}

.elementor-left-wrapper h5 {
    margin-bottom: 0;
    color: #c50039;
    padding: 10px;
    background: #101010
}

.challange-section {
    padding: 40px 0 50px;
    background: #f3f3f8
}

.gif-videos {
    max-width: 100%
}

.eleminator-widget-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    z-index: 2;
    position: relative
}

.eleminator-widget-card h5 {
    font-size: 1.1rem;
    font-weight: bolder;
    width: 100%
}

.eleminator-widget-card p {
    color: #5f6c76;
    font-size: 1rem
}

.widget-card-title span {
    width: 100%;
    height: 2px;
    background: var(--btns-bg-color)
}

.expand-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    background: url(../../user_template/images/managed/expandbg.png) center center/cover no-repeat #1f1f1f;
    flex: 1;
    position: relative;
    padding: 20px;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: flex .4s ease-in-out, opacity .4s ease-in-out
}

.expand-section .content h5 {
    color: #f60109;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -.022em;
    line-height: 1.2;
    margin-bottom: 20px
}

.expand-section .content p {
    color: var(--white);
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: .5px;
    font-weight: 400
}

.expand-setion-wrapper {
    display: flex;
    gap: 20px;
    position: relative
}

.expand-setion-wrapper .expand-section:hover {
    flex: 2;
    opacity: 1
}

.arrow-wrapper {
    height: 100%;
    position: relative
}

.arrow-contain {
    height: 100%;
    position: absolute;
    top: 0;
    transform: translateX(0);
    z-index: 0
}

.blog-info,
.blogCategory {
    display: flex;
    align-items: center
}

.challange-section:hover .arrow-contain {
    transform: translateX(0);
    -webkit-animation: 1s ease-in-out bounceInLeft;
    animation: 1s ease-in-out bounceInLeft
}

@keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) scaleX(3);
        transform: translate3d(-100%, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bg-gradient-dark-gray {
    position: relative;
    background: linear-gradient(90deg, #1f1f1f .04%, #101010)
}

.structure-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute
}

.structure-top-wrapper {
    background-color: #fff;
    width: 100%;
    height: 7rem;
    right: 0;
    top: 0;
    position: absolute
}

.structure-bottom-wrapper {
    height: 620px;
    width: 1250px;
    left: -25%;
    top: 0;
    position: absolute
}

.structure-bottom-wrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100% !important
}

.right-img-wrapper {
    padding-left: 5%;
    padding-right: 5%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1536px;
    padding-top: 5rem;
    position: relative
}

.heading-structure {
    position: relative;
    padding-bottom: 3rem
}

.padding-structure {
    padding: 9rem 0 5rem
}

.blog-hero {
    background: var(--blog-light-green-bg) no-repeat padding-box;
    border-radius: 20px;
    border: 1px solid var(--blog-light-dark-green);
    display: flex;
    padding: 45px;
    margin: 30px 0
}

.blog-hero-left {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    border-radius: 20px;
    width: calc(100% - 390px);
    margin-right: 30px;
    position: relative;
    padding: 50px 150px 50px 50px;
    z-index: 1
}

.blog-hero-left::before {
    background: url(../../user_template/images/icon/circle-bg.svg) 0 50%/100% no-repeat;
    content: "";
    position: absolute;
    top: 0;
    left: -125px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    opacity: .2;
    z-index: -1
}

.blog-info {
    margin-bottom: 20px
}

.blogCategory {
    border-radius: 3px;
    border: 1px solid #9ac8f8;
    color: #eff7ff;
    height: 22px;
    justify-content: center;
    min-width: 100px;
    padding: 0 10px;
    letter-spacing: .5px
}

.blog-hero-details p,
.blog-hero-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.blogDate {
    color: #bfe0ff;
    position: relative;
    padding-left: 20px;
    margin-left: 20px
}

.blogDate svg {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 12px;
    height: 14px
}

.blog-hero-title {
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 45px;
    margin: 0 0 15px;
    -webkit-line-clamp: 2
}

.blog-hero-details p {
    color: #e9f4ff;
    font-size: 1.1rem;
    line-height: 26px;
    letter-spacing: 0;
    margin: 0 0 25px;
    -webkit-line-clamp: 3
}

.blog-hero-btn {
    background: 0 0;
    border-radius: 6px;
    border: 1px solid var(--white);
    color: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    position: relative
}

.popular-blog-category,
.popular-blog-date {
    color: var(--dark-bg-puple);
    font-size: 10px;
    line-height: 12px
}

.blog-hero-btn:hover {
    border: 1px solid var(--white)
}

.blog-hero-left:hover .blog-hero-btn svg {
    left: 4px;
    top: -4px
}

.blog-hero-btn svg {
    content: "";
    position: relative;
    margin-left: 15px;
    top: 0;
    margin-top: -4px;
    left: 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: .3s ease-out
}

.blog-hero-right {
    width: 330px;
    margin-left: 30px;
    position: relative
}

.blog-hero-right::before {
    background: var(--blog-light-dark-green);
    content: "";
    position: absolute;
    top: 0;
    left: -30px;
    width: 1px;
    height: 100%
}

.blog-hero-right h3 {
    color: #181a3d;
    font-size: 22px;
    line-height: 24px;
    margin: 0 0 25px;
    font-weight: 500
}

.blog-hero-right-inner {
    border-radius: 10px;
    border: 1px solid var(--blog-light-dark-green);
    padding: 25px 30px
}

.popular-blog-item {
    display: block;
    margin-bottom: 25px;
    padding-bottom: 25px;
    position: relative
}

.popular-blog-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0
}

.popular-blog-item::before {
    background: var(--blog-light-dark-green);
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%
}

.popular-blog-item h6 {
    color: #181a3d;
    font-size: 16px;
    height: 46px;
    font-weight: 500;
    line-height: 23px;
    margin: 0 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.blog-listing-item-details,
.blog-listing-item-heading h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.popular-blog-category {
    text-transform: uppercase
}

.popular-blog-date {
    text-transform: uppercase;
    position: relative;
    padding-left: 20px;
    margin-left: 25px
}

.blog-listing-item-category,
.blog-listing-item-date {
    color: var(--dark-bg-puple);
    font-size: 12px;
    text-transform: uppercase
}

.popular-blog-date svg {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 11px;
    width: 14px
}

.blog-listing-area-inner {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    width: calc(100% + 30px)
}

.blog-listing-item {
    background: linear-gradient(0deg, #d8d1dd 0, #fff 100%) no-repeat padding-box;
    border-radius: 15px;
    border: 1px solid #61387B;
    padding: 20px 20px 30px;
    width: calc(33.33% - 30px);
    margin: 0 15px 30px;
    display: block
}

.blog-listing-item:hover {
    border: 1px solid var(--blog-light-dark-green)
}

.blog-listing-item-heading {
    background-color: var(--dark-bg-puple);
    background-image: var(--purple-bg-gradient);
    background-repeat: no-repeat;
    box-shadow: inset -1px -1px #fff3, inset 0 .5px 1px #ffffff94;
    border-radius: 15px;
    display: flex;
    align-items: center;
    height: 190px;
    padding: 0 25px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1
}

.blog-listing-item-heading::before {
    background: url(../../user_template/images/icon/blog-blue-circle.svg) -40% 0/100% no-repeat;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.blog-listing-item-heading h4 {
    color: var(--white);
    font-size: 25px;
    margin: 0;
    display: -webkit-box;
    font-weight: 500
}

.blog-listing-item-info {
    display: flex;
    align-items: center;
    margin-bottom: 25px
}

.blog-listing-item-category {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 20px;
    min-width: 140px;
    padding: 0 5px;
    letter-spacing: .5px
}

.blog-listing-item-date {
    position: relative;
    padding-left: 15px;
    margin-left: 10px
}

.blog-listing-item-date svg {
    content: "";
    position: absolute;
    top: 5px;
    left: -7px;
    height: 13px;
    width: 15px
}

.blog-listing-item-details {
    color: #181a3d;
    font-size: 14px;
    line-height: 20px;
    height: 60px;
    margin: 0 0 25px;
    display: -webkit-box
}

.blog-listing-item-btn {
    color: var(--dark-bg-puple);
    font-size: 14px;
    position: relative
}

.blog-listing-item-btn svg {
    content: "";
    position: relative;
    margin-left: 10px;
    top: -2px;
    left: 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: .3s ease-out
}

.blog-card-section-header a {
    width: 100%;
    display: flex
}

.threats-card-description p,
.threats-card-title h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.blog-listing-item:hover .blog-listing-item-btn svg {
    left: 5px;
    top: -5px
}

.pressroom-hero-left,
.pressroom-listing-item-heading {
    padding: 0;
    overflow: hidden;
    height: fit-content
}

.pressroom-listing-item-heading img,
.threats-card-left img {
    width: 100%;
    height: 100% !important;
}

.pressroom-hero-left img {
    width: 100%
}

.pressroom-blog-date {
    margin-left: 0
}

.threats-card-wrapper {
    height: 22rem;
    display: flex;
    grid-gap: 1.25rem;
    gap: 1.25rem;
    border-radius: 1rem;
    background-color: #fff;
    padding: 1.5rem
}

.threats-card-wrapper:hover .threats-card-left {
    transform: perspective(800px) rotateY(-15deg) translateY(-50px) rotateX(10deg) scale(1)
}

.threats-card-wrapper:hover .threats-card-title h2 {
    background: var(--dark-bg-green);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.threats-card-left {
    width: 40%;
    border-radius: .75rem;
    overflow: hidden;
    background-color: var(--gray);
    transform: perspective(800px) rotateY(25deg) scale(.9) rotateX(10deg);
    transition: .6s
}

.threats-card-right {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    grid-gap: 1.25rem;
    gap: 1.25rem
}

.threats-card-title h2 {
    font-size: 19px !important;
    font-weight: 500;
    letter-spacing: -.5px;
    line-height: 24px;
    margin-bottom: 0;
    -webkit-line-clamp: 2;
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text
}

.threats-card-description p {
    color: #5f6c76;
    font-size: .9rem;
    line-height: 23px;
    height: 160px;
    -webkit-line-clamp: 7
}

.threats-card-bottom {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    grid-gap: 0.75rem;
    gap: .75rem
}

.threats-card-bottom-in {
    height: 2rem;
    width: 33%;
    border-radius: 9999px;
    background-color: #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center
}

.threats-card-bottom-in p {
    margin-bottom: 0;
    font-size: .9rem
}

.gx-60 {
    --bs-gutter-x: 60px
}

.tp-service-2__shape {
    position: absolute;
    top: -145px;
    left: 0
}

.tp-section-title-lg {
    font-size: 2.275rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: var(--dark-bg-green);
}

.tp-service-2__section-box p {
    font-weight: 400;
    font-size: 18px;
    line-height: 16px
}

.tp-service-2__user-shape {
    position: absolute;
    top: 75px;
    right: 18px
}

.tp-service-2__user {
    background: var(--brand-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 65px
}

.tp-service-2__user.home span {
    font-weight: 400;
    font-size: 4.25rem;
    line-height: 5.25rem;
    padding-bottom: 16px;
    display: inline-block
}

.tp-service-2__user.home p {
    font-size: 1.125rem;
    line-height: 1.625rem
}

.tp-service-2__item-wrapper {
    min-height: 280px;
    width: 100%
}

.tp-service-2__item {
    background: hsla(0, 0%, 100%, .3);
    mix-blend-mode: normal;
    border: 1px solid hsla(0, 0%, 100%, .2);
    box-shadow: 0 30px 30px rgba(1, 10, 10, .1), inset 0 0 .5px hsla(0, 0%, 100%, .25);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 50px 30px;
    transition: .3s
}

.single-team-member .quotes-holder,
.tp-service-2__bg-shape {
    transition: .8s cubic-bezier(.075, .82, .165, 1)
}

.tp-service-2__bg-shape {
    background: linear-gradient(41.25deg, #b2d6f8 25.09%, #81e0f5 94.14%);
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 20px;
    height: 99%;
    width: 100%;
    transform: rotate(-3deg);
    z-index: -1
}

.customer-insights,
.quotes-holder {
    background: #d8d1dd
}

.tp-service-2__area {
    padding-bottom: 100px
}

.tp-service-2__icon h4 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px
}

.address-small-tag,
.expand-section:hover .content p {
    display: block
}

.tag-holder .icon-holder img {
    min-width: 23px
}

.single-team-member h2 {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px !important;
    margin-bottom: 0
}

.single-team-member b {
    font-size: 13px !important;
    width: 100%;
    display: block;
    text-align: left;
    font-weight: 500
}

.single-team-member {
    position: relative
}

.quotes-holder {
    position: absolute;
    border-radius: 50%;
    top: -17px;
    left: -17px;
    z-index: 9;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center
}

.starating-img {
    min-width: 70px;
    width: 70px
}

.expand-section .content {
    background: url(../../user_template/images/managed/expandbg.png) center center/cover no-repeat #1f1f1f;
    padding: 20px;
    border-radius: 8px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.expand-section .content p {
    display: none
}

#pagination-controls .btn-primary.active {
    background: var(--dark-bg-puple)
}

.tp-service-2__item-wrapper:hover .tp-service-2__bg-shape {
    transform: rotate(0)
}

.single-team-member:hover .quotes-holder {
    background: 0 0;
    top: 0;
    left: 0
}

.single-team-member:hover .quotes-holder img {
    width: 15px
}

.banner-mask,
.banner-mask img {
    height: 100%;
    width: 100%
}

.banner-bg {
    background: #08162e;
    padding-top: 40px;
    padding-bottom: 50px
}

.banner-mask {
    position: absolute;
    top: 0;
    opacity: .1
}

.certin-p-tag {
    font-size: 1.1rem;
    line-height: 1.7;
    letter-spacing: .5px;
    font-weight: 400;
    margin-top: 1.5rem
}

.banner-bg::after {
    background-image: url(../../user_template/images/certin/line-one.png);
    background-position-x: center;
    background-repeat: no-repeat;
    content: "";
    height: 60px;
    inset-block-end: -30px;
    inset-inline-start: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.banner-bg:nth-child(2n):after {
    background-image: url(../../user_template/images/certin/line-two.png)
}

.last-banner-bg::after {
    background-image: none
}

.certin-elementor .certin-text-white li {
    color: var(--white)
}

.certin-tab-sub-top {
    font-size: 1.2rem;
    font-weight: 500
}

.certintab-contents-box svg {
    margin-top: -6px
}

.certin-elementor-holder {
    margin-top: 35px
}

.blackbox-section {
    padding-top: 0;
    padding-bottom: 40px;
    background: 0 0
}

.certin-tab-manual .nav-link {
    padding: .5rem 3rem;
    border: 1px dotted
}

@keyframes heartbeat {

    0%,
    100%,
    50% {
        transform: scale(1)
    }

    25%,
    75% {
        transform: scale(1.1)
    }
}

.nav-link {
    display: inline-block;
    margin: 10px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #ff5c01;
    transition: transform .3s ease-in-out
}

.nav-link.animated {
    animation: 1s ease-in-out infinite heartbeat
}

.certin-card {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e7e7ec;
    border-radius: .25rem;
    text-align: center;
    box-shadow: 0 .5rem 1.5rem rgba(140, 152, 164, .15);
    transition: box-shadow .25s, transform .25s, -webkit-transform .25s
}

.blog-listing-item-heading h3,
.jobs-card-body,
.line-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.line-clamp-1 {
    -webkit-line-clamp: 1;
    font-size: 1.125rem;
    line-height: 1.5;
    color: #2f2d51;
    font-weight: 500
}

.certintab-contents-box p {
    white-space: pre-wrap;
    word-wrap: break-word
}

.lift:hover {
    box-shadow: 0 1rem 2.5rem rgba(140, 152, 164, .1), 0 .5rem 1rem -.75rem rgba(140, 152, 164, .1) !important;
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0)
}

.add-stick {
    position: sticky;
    top: 94px;
    z-index: 9;
    background: var(--white);
    box-shadow: rgba(0, 0, 0, .24) 0 3px 8px !important
}

.jobs-card-body {
    height: 94px;
    -webkit-line-clamp: 4
}

.blog-listing-item-heading h3 {
    color: var(--white);
    font-size: 16px;
    height: 46px;
    font-weight: 500;
    line-height: 23px;
    margin: 30px 15px;
    -webkit-line-clamp: 2
}

@media (min-width:992px) {
    .row-cols-lg-3>* {
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: 33.33333%
    }
}

@media (min-width:1200px) {
    .row-cols-xl-4>* {
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: 25%
    }
}

.sidebar-wrapper .single-sidebar.bg-white {
    background: #fff;
    border: none;
}

.blog-single-area .single-blog-post .text-holder h4 {
    font-size: 18px
}

.blog-single-area .single-blog-post .text-holder h5 {
    font-size: 16px
}

.blog-single-area .single-blog-post .text-holder h6 {
    font-size: 14px
}

.homepage-certin {
    margin-bottom: 25px
}

.second-section {
    padding: 40px 0 50px
}

.popup-threats-desc p {
    height: 100%
}

.t-popup-input {
    padding: 5px 10px;
    border-radius: .375rem;
    border: 2px solid #ebebeb;
    width: 100%
}

.t-popup-left {
    width: 35%
}

.t-popup-wrapper {
    height: 25rem
}

.t-popup-card-title h2 {
    font-size: 22px !important;
    line-height: 28px
}

.t-popup-captcha-img {
    height: 37px !important
}

.t-popup-button {
    margin-top: 4px
}

.threats-card-wrapper.t-popup-wrapper:hover .threats-card-left {
    transform: perspective(800px) rotateY(-15deg) translateY(-10px) rotateX(10deg) scale(1)
}

.blur-bg {
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 8px;
    overflow: hidden
}

.callto-action-banner {
    position: relative;
    min-height: 150px
}

.callaction-banner-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.tp-payment-method__line-1,
.tp-payment-method__line-10,
.tp-payment-method__line-11,
.tp-payment-method__line-12,
.tp-payment-method__line-13,
.tp-payment-method__line-14,
.tp-payment-method__line-15,
.tp-payment-method__line-16,
.tp-payment-method__line-2,
.tp-payment-method__line-3,
.tp-payment-method__line-4,
.tp-payment-method__line-5,
.tp-payment-method__line-6,
.tp-payment-method__line-7,
.tp-payment-method__line-8,
.tp-payment-method__line-9 {
    height: 1px;
    top: 50%;
    display: inline-block
}

.callaction-banner-img img {
    width: 100%;
    height: 100% !important
}

.callaction-left h3 {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--white)
}

.padding-changes {
    padding-bottom: 0;
    background: url(../../user_template/images/homepage/dots.svg)
}

.tp-payment-method__circle::after,
.tp-payment-method__line-1,
.tp-payment-method__line-10,
.tp-payment-method__line-11,
.tp-payment-method__line-12,
.tp-payment-method__line-13,
.tp-payment-method__line-14,
.tp-payment-method__line-15,
.tp-payment-method__line-16,
.tp-payment-method__line-2,
.tp-payment-method__line-3,
.tp-payment-method__line-4,
.tp-payment-method__line-5,
.tp-payment-method__line-6,
.tp-payment-method__line-7,
.tp-payment-method__line-8,
.tp-payment-method__line-9 {
    background-color: #740C7F;
    position: absolute
}

.tp-service-2__shape {
    top: -100px
}

.tp-service-2__user div i {
    font-weight: 400;
    font-size: 4.25rem;
    line-height: 5.25rem
}

.comb_3,
.comb_5 {
    margin-top: -94px !important
}

.set_middle_row_photo_grid {
    width: auto;
    margin-top: -93px;
    margin-left: 0
}

.photo-grid {
    width: auto;
    display: flex;
    justify-content: flex-start
}

.about_us_non_used_card_color {
    opacity: .4
}

.tp-payment-method__space {
    padding-top: 40px;
    padding-bottom: 50px
}

.tp-payment-method__main-circle,
.tp-payment-method__main-img {
    display: inline-block
}

.tp-payment-method__main-img img {
    background: var(--white);
    border-radius: 100px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1)
}

.tp-payment-method__circle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: -3px;
    right: 0
}

.tp-payment-method__circle.circle-10::after,
.tp-payment-method__circle.circle-12::after,
.tp-payment-method__circle.circle-14::after,
.tp-payment-method__circle.circle-16::after,
.tp-payment-method__circle.circle-1::after,
.tp-payment-method__circle.circle-3::after,
.tp-payment-method__circle.circle-5::after,
.tp-payment-method__circle.circle-6::after,
.tp-payment-method__circle.circle-8::after {
    animation: 30s linear infinite circle-animation
}

.tp-payment-method__circle.circle-11::after,
.tp-payment-method__circle.circle-13::after,
.tp-payment-method__circle.circle-15::after,
.tp-payment-method__circle.circle-2::after,
.tp-payment-method__circle.circle-4::after,
.tp-payment-method__circle.circle-7::after,
.tp-payment-method__circle.circle-9::after {
    left: 0;
    animation: 20s linear infinite circle-animation-2
}

.tp-payment-method__line-1 {
    left: -150%;
    transform: translate(-50%) rotate(-14deg);
    text-align: center;
    transform-origin: right center;
    width: 610px
}

.tp-payment-method__line-1 span {
    transform: translateY(-50%) rotate(14deg)
}

.tp-payment-method__line-2 {
    left: -9%;
    transform: translate(-50%) rotate(-44deg);
    text-align: center;
    transform-origin: right center;
    width: 190px
}

.tp-payment-method__line-2 span {
    transform: translateY(-50%) rotate(44deg)
}

.tp-payment-method__line-3 {
    left: -74%;
    transform: translate(-50%) rotate(-24deg);
    text-align: center;
    transform-origin: right center;
    width: 380px
}

.tp-payment-method__line-3 span {
    transform: translateY(-50%) rotate(24deg)
}

.tp-payment-method__line-4 {
    left: -90%;
    transform: translate(-50%) rotate(-2deg);
    text-align: center;
    transform-origin: right center;
    width: 430px
}

.tp-payment-method__line-4 span {
    transform: translateY(-50%) rotate(2deg)
}

.tp-payment-method__line-5 {
    left: -137%;
    transform: translate(-50%) rotate(10deg);
    text-align: center;
    transform-origin: right center;
    width: 570px
}

.tp-payment-method__line-5 span {
    transform: translateY(-50%) rotate(-10deg)
}

.tp-payment-method__line-6 {
    left: -63%;
    transform: translate(-50%) rotate(26deg);
    text-align: center;
    transform-origin: right center;
    width: 350px
}

.tp-payment-method__line-6 span {
    transform: translateY(-50%) rotate(-26deg)
}

.tp-payment-method__line-7 {
    left: 6%;
    transform: translate(-50%) rotate(51deg);
    text-align: center;
    transform-origin: right center;
    width: 140px
}

.tp-payment-method__line-7 span {
    transform: translateY(-60%) rotate(-51deg)
}

.tp-payment-method__line-8 {
    left: 1%;
    transform: translate(-50%) rotate(130deg);
    text-align: center;
    transform-origin: right center;
    width: 160px
}

.tp-payment-method__line-8 span {
    transform: translateY(-50%) rotate(-130deg)
}

.tp-payment-method__line-9 {
    left: -73%;
    transform: translate(-50%) rotate(150deg);
    text-align: center;
    transform-origin: right center;
    width: 380px
}

.tp-payment-method__line-9 span {
    transform: translateY(-50%) rotate(-150deg)
}

.tp-payment-method__line-10 {
    left: -146%;
    transform: translate(-50%) rotate(160deg);
    text-align: center;
    transform-origin: right center;
    width: 600px
}

.tp-payment-method__line-10 span {
    transform: translateY(-50%) rotate(-160deg)
}

.tp-payment-method__line-11 {
    left: -89%;
    transform: translate(-50%) rotate(170deg);
    text-align: center;
    transform-origin: right center;
    width: 430px
}

.tp-payment-method__line-11 span {
    transform: translateY(-50%) rotate(-170deg)
}

.tp-payment-method__line-12 {
    left: -146%;
    transform: translate(-50%) rotate(180deg);
    text-align: center;
    transform-origin: right center;
    width: 600px
}

.tp-payment-method__line-12 span {
    transform: translateY(-50%) rotate(-180deg)
}

.tp-payment-method__line-13 {
    left: -45%;
    transform: translate(-50%) rotate(190deg);
    text-align: center;
    transform-origin: right center;
    width: 300px
}

.tp-payment-method__line-13 span {
    transform: translateY(-50%) rotate(-190deg)
}

.tp-payment-method__line-13 img {
    box-shadow: 0 10px 50px rgba(32, 33, 36, .1);
    border-radius: 50%
}

.tp-payment-method__line-14 {
    left: -129%;
    transform: translate(-50%) rotate(199deg);
    text-align: center;
    transform-origin: right center;
    width: 550px
}

.tp-payment-method__line-14 span {
    transform: translateY(-50%) rotate(-199deg)
}

.tp-payment-method__line-15 {
    left: -70%;
    transform: translate(-50%) rotate(211deg);
    text-align: center;
    transform-origin: right center;
    width: 370px
}

.tp-payment-method__line-15 span {
    transform: translateY(-50%) rotate(-211deg)
}

.tp-payment-method__line-16 {
    left: -3%;
    transform: translate(-50%) rotate(228deg);
    text-align: center;
    transform-origin: right center;
    width: 170px
}

.p-relative,
.z-index-3 {
    position: relative
}

.tp-payment-method__line-16 span {
    transform: translateY(-50%) rotate(-228deg)
}

.tp-payment-method__line-1 span,
.tp-payment-method__line-10 span,
.tp-payment-method__line-11 span,
.tp-payment-method__line-12 span,
.tp-payment-method__line-13 span,
.tp-payment-method__line-14 span,
.tp-payment-method__line-15 span,
.tp-payment-method__line-16 span,
.tp-payment-method__line-2 span,
.tp-payment-method__line-3 span,
.tp-payment-method__line-4 span,
.tp-payment-method__line-5 span,
.tp-payment-method__line-6 span,
.tp-payment-method__line-7 span,
.tp-payment-method__line-8 span,
.tp-payment-method__line-9 span {
    position: absolute;
    left: -40px;
    top: 50%
}

.tp-payment-method__line-1 span:hover img,
.tp-payment-method__line-10 span:hover img,
.tp-payment-method__line-11 span:hover img,
.tp-payment-method__line-12 span:hover img,
.tp-payment-method__line-13 span:hover img,
.tp-payment-method__line-14 span:hover img,
.tp-payment-method__line-15 span:hover img,
.tp-payment-method__line-16 span:hover img,
.tp-payment-method__line-2 span:hover img,
.tp-payment-method__line-3 span:hover img,
.tp-payment-method__line-4 span:hover img,
.tp-payment-method__line-5 span:hover img,
.tp-payment-method__line-6 span:hover img,
.tp-payment-method__line-7 span:hover img,
.tp-payment-method__line-8 span:hover img,
.tp-payment-method__line-9 span:hover img {
    transform: scale(1.1)
}

.tp-payment-method__wrapper {
    padding-top: 170px;
    padding-bottom: 150px
}

.z-index-3 {
    z-index: 3
}

@keyframes circle-animation-2 {

    0%,
    100% {
        left: 0
    }

    50% {
        left: 100%
    }
}

@keyframes scroll1 {

    0%,
    100% {
        top: 0
    }

    50% {
        top: 95%
    }
}

.offer-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none
}

@keyframes show-popup {
    0% {
        transform: scale(.7);
        opacity: 0
    }

    45% {
        transform: scale(1.05);
        opacity: 1
    }

    80% {
        transform: scale(.95)
    }

    100% {
        transform: scale(1)
    }
}

.backdrop-offer {
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%
}

.offer-popup-subwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative
}

.offer-popup {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    -webkit-animation: .3s forwards show-popup;
    animation: .3s forwards show-popup;
    background: #fff;
    max-width: 730px
}

.offer-close-btn {
    position: absolute;
    right: 15px;
    top: 5px;
    z-index: 99999;
    width: 30px;
    height: 30px
}

.col img {
    transition: box-shadow .3s;
    will-change: transform;
    filter: brightness(1.1) contrast(1.05)
}

.popup-left-content {
    padding: 40px;
    color: var(--dark-bg-green)
}

.popup-right-content {
    padding: 25px
}

.popupbutton {
    background-image: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    margin-top: 25px
}

.landing-btn-div {
    margin-top: 30px
}

.pressrelease-section {
    padding: 40px 0 50px;
}

.blog-single-area .single-blog-post .text-holder h2 {
    font-weight: 600;
    line-height: 1.4;
}

.blog-single-area .single-blog-post .text-holder {
    font-family: "Work Sans", sans-serif;
}

.blog-single-area .sidebar-wrapper {
    font-family: "Work Sans", sans-serif;
}

.blog-img-holder {
    width: 43px;
    min-width: 43px;
    height: 43px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #dee2e7
}

.blog-img-holder img {
    width: 100%;
    height: 100% !important;
    object-fit: cover
}

.blog-eng-holder {
    display: flex !important;
    align-items: center
}

.blog-sub-holder {
    margin-left: 15px
}

.blog-sub-holder h5 {
    font-size: 15px !important;
    font-weight: 500;
    margin: 0;
    color: #000
}

.blog-sub-holder p {
    font-size: 12px !important;
    line-height: normal;
    font-weight: 500;
    color: #6c757d;
    margin: 0
}

.blog-sub-holder svg {
    color: #0d6efd
}

.sec-body {
    background: #fafbfc;
    color: #1f2937;
    overflow: hidden;
    position: relative;
    padding: 40px 0 50px
}

.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff5c01 0, #f60109 20%, #a1005d 36%, #740c7f 48%, #126f80 65%, #005a59 100%);
    opacity: .05;
    z-index: -1
}

.feature-description,
.feature-icon,
.feature-title {
    z-index: 2;
    position: relative
}

.iso-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    animation: 1s ease-out .2s forwards fadeInUp
}

.font-gradient {
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-top: 3rem
}

.feature-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    opacity: 0;
    transform: translateY(30px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .05)
}

.feature-card::before,
.feature-icon {
    background: linear-gradient(90deg, #ff5c01 0, #f60109 20%, #a1005d 36%, #740c7f 48%, #126f80 65%, #005a59 100%)
}

.feature-card:first-child {
    animation: .8s ease-out .4s forwards fadeInUp
}

.feature-card:nth-child(2) {
    animation: .8s ease-out .6s forwards fadeInUp
}

.feature-card:nth-child(3) {
    animation: .8s ease-out .8s forwards fadeInUp
}

.feature-card:nth-child(4) {
    animation: .8s ease-out 1s forwards fadeInUp
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity .3s
}

.feature-card:hover {
    transform: translateY(-12px);
    border-color: transparent;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .15)
}

.feature-card:hover::before {
    opacity: .08
}

.feature-card:hover .feature-icon {
    transform: scale(1.1)
}

.feature-icon {
    width: 70px;
    height: 70px;
    background-size: 150%;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform .3s;
    box-shadow: 0 8px 25px rgba(255, 92, 1, .3)
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    color: #fff
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem
}

.feature-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #4b5563
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

.headervideo-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none
}

.video-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10
}

.video-control-btn {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    margin-left: 8px
}

.video-control-btn:hover {
    background: rgba(0, 0, 0, .7);
    color: #fff
}

.logoscards {
    background-color: #fffc;
    border: 1px solid #e5e7eb80;
    padding: 1rem;
    border-radius: .75rem;
    height: 100%;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)
}

.logoscards a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.btn-gradient,
.hero-section {
    overflow: hidden;
    position: relative
}

.navbar,
.social-proof-bar {
    backdrop-filter: blur(10px)
}

.btn-gradient,
.carousel-inner,
.central-icon,
.hero-section,
.nav-link,
.stat-col {
    position: relative
}

.floating-card i,
.icon-gradient,
.text-gradient {
    -webkit-text-fill-color: transparent
}

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text
}

.icon-gradient {
    background: linear-gradient(90deg, #ff5c01 0, #f60109 20%, #a1005d 36%, #740c7f 48%, #126f80 65%, #005a59 100%);
    -webkit-background-clip: text;
    display: inline-block
}

.hero-visual,
.visual-container {
    display: flex;
    align-items: center
}

.btn-gradient {
    background: var(--brand-gradient);
    border: none;
    color: #fff;
    transition: .3s;
    background-size: 150%
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
    color: #fff
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transition: left .5s
}

.btn,
.nav-link,
.nav-link::after,
.navbar,
.trust-card {
    transition: .3s
}

.btn-gradient:hover::before {
    left: 100%
}

.btn-rounded {
    border-radius: 50px !important
}

.fw-300 {
    font-weight: 300
}

.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.fw-800 {
    font-weight: 800
}

.navbar {
    background-color: rgba(255, 255, 255, .95) !important;
    padding: 1rem 0
}

.navbar-brand {
    font-size: 1.75rem;
    color: #1a1a1a !important
}

.hero-title,
.hero-title span {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -.02em
}

.nav-link {
    color: #4a5568;
    font-weight: 500;
    padding: .75rem 1rem !important
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--brand-gradient);
    transform: translateX(-50%)
}

.cert-badge .badge {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top left, rgba(255, 92, 1, .05), transparent 50%), radial-gradient(ellipse at bottom right, rgba(18, 111, 128, .05), transparent 50%);
    pointer-events: none;
    z-index: 0
}

.carousel-inner {
    z-index: 1
}

.tp-service-2__user span {
    font-weight: 500;
    font-size: 40px;
    line-height: 40px;
    padding-bottom: 16px;
    display: inline-block;
}

.tp-service-2__user p {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
}

:root {
    /* Your existing brand colors */
    --brand-gradient: linear-gradient(90deg, #FF5C01 0%, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);
    --brand-gradient-hover: linear-gradient(90deg, #FF7A2A 0%, #FF1A2A 20%, #B52A7A 36%, #8B2B9A 48%, #3A8B9B 65%, #2A7A7A 100%);
    --btns-bg-color: linear-gradient(90deg, #FF5C01 0%, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);
    --title-top-line-bg: linear-gradient(90deg, #FF5C01 0%, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 90%, #005A59 100%);
    --text-gradient-color: -webkit-linear-gradient(40deg, #FF5C01 0%, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);

    /* Light theme primary colors */
    --primary: #FF5C01;
    --secondary: #126F80;
    --accent: #A1005D;
    --success: #005A59;
    --ocean-deep: #2563eb;
    /* Light theme backgrounds */
    --light: #ffffff;
    --dark: #ffffff;
    /* Changed from dark to white for light theme */
    --section-bg: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-bg-alt: rgba(248, 250, 252, 0.95);

    /* Text colors for light theme */
    --text: #334155;
    --text-primary: #1e293b;
    --text-secondary: #64748b;

    /* Supporting colors */
    --brisk-dark: #1e293b;
    --brisk-text: #334155;
    --brisk-light-gray: #f8fafc;
    --brisk-border: #e2e8f0;
    --brisk-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --brisk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Status colors for light theme */
    /* --success-green: #4CAF50;
    --success-light-green: color-mix(in sRGB, #fff 16%, #28c76f);
    --danger-red: #F44336;
    --warning-light-blue: color-mix(in sRGB, #fff 16%, #00bad1);
    --danger-light-red: color-mix(in sRGB, #fff 16%, #ff4c51);
    --neutral-gray: #9E9E9E;
    --neutral-light-gray: color-mix(in sRGB, #fff 16%, #808390);
    --warning-orange: #FF9800;
    --warning-light-orange: color-mix(in sRGB, #fff 16%, #ff9f43); */

    --success-green: #4CAF50;
    --success-light-green:
        color-mix(in sRGB, #fff 84%, #28c76f);
    --danger-red: #F44336;
    --warning-light-blue:
        color-mix(in sRGB, #fff 84%, #00bad1);
    --danger-light-red:
        color-mix(in sRGB, #fff 84%, #ff4c51);
    --neutral-gray: #9E9E9E;
    --neutral-light-gray:
        color-mix(in sRGB, #fff 84%, #808390);
    --warning-orange: #FF9800;
    --warning-light-orange:
        color-mix(in sRGB, #fff 84%, #ff9f43);
    --ocean-deep: #2563eb;
    --ocean-shallow: #2196F3;
    --sky-dark: #0D47A1;
    --sky-bright: #64B5F6;
    --text-dark: #212121;
    --text-light: #FAFAFA;

}



/* Light theme optimized styles */
.hero-content {
    animation: .8s ease-out fadeInUp
}

.hero-badge .badge {
    font-size: .9rem;
    font-weight: 500;
    padding: .75rem 1.5rem;
    border: 1px solid var(--brisk-border);
    background: var(--card-bg);
    box-shadow: var(--brisk-shadow)
}

.hero-badge .badge svg {
    margin-right: 5px
}

.hero-title {
    margin-bottom: 2rem;
    color: var(--text-primary);
    font-size: clamp(2.5rem, 4vw, 4rem) !important;
}

.hero-title span {
    display: inline
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
    font-weight: 400
}

.social-proof-bar {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--brisk-shadow-lg);
    border: 1px solid var(--brisk-border)
}

.central-icon,
.floating-card i {
    background: var(--brand-gradient)
}

.stat-col:not(:last-child):after,
.stat-col:not(:last-child):before {
    content: "";
    position: absolute;
    width: 3px;
    top: 0;
    right: 0;
    border-radius: 3px
}

.stat-item {
    padding: 0 1rem
}

.stat-number {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-primary)
}

.stat-label {
    font-size: .875rem;
    letter-spacing: .5px;
    line-height: normal;
    margin-top: 10px;
    color: var(--text-secondary)
}

.stat-col:not(:last-child):after {
    height: 100%;
    background-color: var(--brisk-border)
}

.stat-col:not(:last-child):before {
    inset-block-start: 0;
    height: 15px;
    background: var(--brand-gradient);
    animation: 6s linear infinite alternate topToBottom;
    z-index: 1;
    pointer-events: none
}

@keyframes topToBottom {

    0%,
    100% {
        inset-block-start: 0
    }

    50% {
        inset-block-start: 100%;
        transform: translateY(-100%)
    }
}

.hero-cta {
    margin-top: 2rem
}

.hero-visual {
    justify-content: center;
    min-height: 500px
}

.visual-container {
    width: 400px;
    height: 400px;
    justify-content: center
}

.central-icon,
.floating-card {
    align-items: center;
    display: flex
}

.central-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    box-shadow: var(--brisk-shadow-lg);
    animation: 3s infinite pulse;
    z-index: 2
}

.floating-card {
    position: absolute;
    background: var(--card-bg);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    box-shadow: var(--brisk-shadow-lg);
    gap: .75rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary);
    border: 1px solid var(--brisk-border);
    animation: 4s ease-in-out infinite float;
    z-index: 1
}

.floating-card i {
    font-size: 1.5rem;
    -webkit-background-clip: text;
    background-clip: text
}

.shield-card {
    top: 20%;
    left: 15%;
    animation-delay: 0s
}

.ai-card {
    bottom: 20%;
    right: 15%;
    animation-delay: 2s
}

.cert-card {
    top: 15%;
    left: 20%;
    animation-delay: 0s
}

.key-card {
    bottom: 15%;
    right: 20%;
    animation-delay: 2s
}

.fog-card {
    top: 25%;
    left: 10%;
    animation-delay: 0s
}

.clarity-card {
    bottom: 25%;
    right: 10%;
    animation-delay: 2s
}

.business-card {
    top: 20%;
    left: 20%;
    animation-delay: 0s
}

.monitor-card {
    bottom: 20%;
    right: 20%;
    animation-delay: 2s
}

.puzzle-card {
    top: 30%;
    left: 15%;
    animation-delay: 0s
}

.business-ops-card {
    bottom: 30%;
    right: 15%;
    animation-delay: 2s
}

.carousel-indicators {
    bottom: 50px;
    margin-bottom: 0
}

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--brisk-border);
    background-color: transparent;
    margin: 0 8px;
    transition: .3s
}

.carousel-indicators .active {
    background: var(--brand-gradient);
    border-color: transparent;
    transform: scale(1.2)
}

.trust-section {
    background: linear-gradient(135deg, var(--section-bg) 0, var(--brisk-light-gray) 100%)
}

.trust-card {
    border: 1px solid var(--brisk-border);
    background: var(--card-bg)
}

.trust-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--brisk-shadow-lg) !important
}

.trust-icon {
    opacity: .8;
    color: var(--text-secondary)
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0)
    }

    25% {
        transform: translateY(-10px) rotate(1deg)
    }

    50% {
        transform: translateY(-5px) rotate(-.5deg)
    }

    75% {
        transform: translateY(-15px) rotate(.5deg)
    }
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-outline-secondary {
    border-color: var(--brisk-border);
    color: var(--text-secondary)
}

.btn-outline-secondary:hover {
    background-color: var(--section-bg);
    border-color: var(--primary);
    color: var(--primary)
}

.carousel-item {
    transition: transform .6s ease-in-out
}

.min-vh-100 {
    min-height: 100vh;
    display: flex;
}

.hero-visual {
    position: absolute;
    left: -215px;
    top: 25%;
    animation: .8s ease-out fadeInright
}

@keyframes fadeInright {
    0% {
        opacity: 0;
        transform: translateX(50px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.header {
    text-align: center;
    margin-bottom: 4rem;
}

.header h1,
.header h1 span {
    font-size: 2.5rem;
    color: var(--text-dark);
    text-transform: capitalize;
    letter-spacing: -.02em;
}

.assessment-container {
    display: flex;
    flex-direction: row;
    gap: 60px;
}

@media (max-width: 768px) {
    .assessment-container {
        flex-direction: column;
    }
}

.layer-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: min-content;
    align-items: center;
    position: relative;
    /* background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

/* .layer-square {
            background: #ffffff;
            border-radius: 20px;
            padding: 25px 30px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.8);
            transform: rotateX(70deg) rotateZ(45deg);
            transform-style: preserve-3d;
            width: 250px;
            height: 250px;
            margin-top: -180px;
        } */
.layer-square {
    background: #ffffff;
    border-radius: 20px;
    position: relative;
    box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01), 28px 28px 28px 0 rgba(34, 33, 81, 0.25);
    ;
    border: 1px solid #9ba7ca;
    transform: rotateX(70deg) rotateZ(45deg);
    transform-style: preserve-3d;
    width: 250px;
    height: 250px;
    margin-top: -160px;
    cursor: pointer;
    /* background:
            linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #ff5c01, #f60109, #a1005d, #126f80, #005a59) border-box;
            border: 5px solid transparent; */
}

.layer-square.active {
    position: relative;
    border-radius: 20px;
    padding: 20px;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #ff5c01, #f60109, #a1005d, #126f80, #005a59) border-box;
    border: 5px solid transparent;
}

/* .layer-content{
            transform: rotateZ(-45deg) rotateX(-51deg);
            transform-style: preserve-3d;
        } */
/* .layer-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotateZ(-45deg) rotateX(-70deg) translate(-35%, -50%);
            transform-origin: center center;
            font-size: 16px;
            color: #000;
        } */
/* .layer-counts {
            font-size: 0.8em;
            margin-left: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotateZ(-45deg) rotateX(-70deg) translate(-35%, -50%);
            transform-origin: center center;
        } */
/* ✅ this inner wrapper cancels tilt ONCE */
.layer-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotateZ(-45deg) rotateX(-70deg) translate(-18%, -38%);
    transform-origin: center center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.layer-content {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.layer-counts {
    font-size: 0.8em;
    color: #444;
}

.question-container {
    flex: 2;
    /* background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    height: max-content;
}

.question-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
}

.layer-name {
    font-size: 1rem;
    color: #FFFFFF;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    background-image: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    width: max-content;
}

.question-card {
    display: none;
}

.question-card.active {
    display: block;
    margin-top: 30px;
}

.question-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 15px;
    letter-spacing: 0;
}

.question-benefit {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.6;
    background: #f1f5f9;
    padding: 15px;
    border-radius: 10px;
    border-left: 3px solid #cbd5e1;
    min-height: 80px;
}

.response-title::before {
    content: "→";
    color: #3498db;
    font-weight: bold;
    margin-right: 8px;
    font-size: 18px;
}

.response-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.status-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.status-btn {
    /* padding: 0.4812rem 1.25rem; */
    position: relative;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.375;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.status-btn.have {
    background-color: color-mix(in sRGB, #000 10%, #28c76f);
    box-shadow: 0 .125rem .375rem rgba(40, 199, 111, .3);
    border: 1px solid #28c76f;
    color: white;
}

.status-btn.need {
    background-color: #ff4c51;
    border: 1px solid #ff4c51;
    color: white;
    box-shadow: 0 .125rem .375rem rgba(255, 76, 81, .3);
}

.status-btn.unsure {
    background-color: #ff9f43;
    box-shadow: 0 .125rem .375rem rgba(255, 159, 67, .3);
    border: 1px solid #ff9f43;
    color: #fff;
}

.status-btn:hover {
    opacity: 0.8;
}

.recommended-tag {
    /* background-color: var(--warning-orange);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            display: inline-block;
            margin-bottom: 15px; */
    border: 1px dotted #d97706 !important;
    color: #d97706;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    margin-left: 20px;
}

.icon-small {
    width: 16px;
    height: 16px;
    fill: #d97706;
}

.navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.nav-btn {
    padding: 10px 20px;
    background-color: var(--ocean-deep);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.nav-btn:disabled {
    background-color: color-mix(in sRGB, #fff 84%, #808390);
    color: #808390;
    cursor: not-allowed;
}

.score-display {
    text-align: center;
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-dark);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
}

.modal-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: bold;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal .form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.modal-btn.primary {
    background-color: var(--ocean-deep);
    color: white;
}

.modal-btn.secondary {
    background-color: #ccc;
    color: #333;
}

.report-container {
    display: none;
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
}

.report-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.score-summary {
    text-align: center;
    margin-bottom: 30px;
}

.layer-scores {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.layer-scores th,
.layer-scores td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.layer-scores th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.recommendations {
    margin-top: 30px;
}

.recommendations h3 {
    margin-bottom: 15px;
    color: var(--ocean-deep);
}

.recommendations ul {
    padding-left: 20px;
}

.recommendations li {
    margin-bottom: 10px;
}

.upsell-card {
    background-color: #f8f9fa;
    border-left: 4px solid var(--ocean-deep);
    padding: 15px;
    margin: 15px 0;
    border-radius: 0 4px 4px 0;
}

.upsell-card h4 {
    margin-top: 0;
    color: var(--ocean-deep);
}

.upsell-card a {
    color: var(--ocean-deep);
    font-weight: bold;
    text-decoration: none;
}

.upsell-card a:hover {
    text-decoration: underline;
}

#thank-you-modal .modal-content {
    max-width: 600px;
}

.layer-status {
    display: flex;
    gap: 10px;
    align-items: center;
}

.status-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.status-circle.green {
    background-color: var(--success-green);
}

.status-circle.red {
    background-color: var(--danger-red);
}

.status-circle.gray {
    background-color: var(--neutral-gray);
}

.assessment-report-btn {
    padding: 10px 20px;
    background-color: var(--ocean-deep);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    font-size: 1rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-bottom: 30px;
}

.gauge-container {
    text-align: center;
}

.gauge {
    width: 200px;
    height: 200px;
    margin: auto;
}

.bars-container {
    display: flex;
    flex-direction: column;
}

.bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.bar-outer {
    flex: 1;
    background: #ddd;
    height: 20px;
    margin: 0 10px;
    border-radius: 10px;
    overflow: hidden;
}

.bar-inner {
    height: 100%;
    transition: width 0.3s;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-dot.green {
    background-color: color-mix(in sRGB, #000 10%, #28c76f);
    box-shadow: 0 .125rem .375rem rgba(40, 199, 111, .3);
    border: 1px solid #28c76f;
}

.status-dot.red {
    background-color: #ff4c51;
    border: 1px solid #ff4c51;
    box-shadow: 0 .125rem .375rem rgba(255, 76, 81, .3);
}

.status-dot.warn {
    background-color: #ff9f43;
    box-shadow: 0 .125rem .375rem rgba(255, 159, 67, .3);
    border: 1px solid #ff9f43;
}

/* .layer-progress-fill{
            animation: progressBar 1.2s ease-in-out;
            animation-fill-mode:both;
        }

        @keyframes progressBar {
            0% { width: 0; }
            100% { width: 100%; }
        } */

.layer-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
    width: var(--prev-score, 0%);
    background: var(--score-color, #e5e7eb);
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: shine 2s infinite linear, grow-from-previous 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
}

@keyframes grow-from-previous {
    from {
        width: var(--prev-score, 0%);
    }

    to {
        width: var(--score, 100%);
    }
}

.layer-score-card {
    display: flex;
}




/* ========== NEW ENHANCED STYLES ========== */

/* Your existing dashboard container styling enhanced */
/* .dashboard-container {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        } */

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.5px;
}

.real-time-wrapper {
    display: flex;
}

/* Enhanced overall score section for your existing structure */
.overall-score {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overall-score::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, rgba(255, 92, 1, .05), transparent 50%), radial-gradient(ellipse at bottom right, rgba(18, 111, 128, .05), transparent 50%);
    /* animation: shimmer 3s infinite; */
    z-index: 1;
}

/* Add SVG gauge to your existing score section */
.score-gauge-container {
    position: relative;
    width: 180px;
    height: 105px;
}

.score-gauge {
    width: 180px;
    height: 105px;
    position: relative;
}

.gauge-background {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 12;
    stroke-linecap: round;
}

.gauge-progress {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.gauge-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    font-size: 0.70rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Enhanced score value styling */
.score-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    margin-bottom: 10px;
    display: block;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced score description (level) styling */
.score-description {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    transition: all 0.5s ease;
    margin-top: 25px;
    line-height: 1.5;
}

.assessment-report-btn {
    display: none;
}

/* Level-specific styling */
.level-secure {
    background: linear-gradient(135deg, var(--success-light-green), #a7f3d0);
    color: var(--success-green);
}

.level-adequate {
    background: linear-gradient(135deg, var(--warning-light-blue), #bfdbfe);
    color: #3b82f6;
}

.level-fragile {
    background: linear-gradient(135deg, var(--warning-light-orange), #fed7aa);
    color: var(--warning-orange);
}

.level-vulnerable {
    background: linear-gradient(135deg, var(--danger-light-red), #fecaca);
    color: var(--danger-red);
}

.level-start {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: var(--text-secondary);
}

/* Enhanced layer scores grid for your existing structure */
.layer-scores-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

.layer-score-card h4 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
    letter-spacing: 0.5px;
    width: 200px;
}

.layer-progress-bar {
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    width: 100%;
}

.layer-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.2) 75%);
    background-size: 15px 15px;
    animation: progress-shine 2s linear infinite;
}

@keyframes progress-shine {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 15px 0;
    }
}

.layer-score-value {
    position: absolute;
    right: 8px;
    top: -25px;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    transition: color 0.5s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animation classes */
.score-animation {
    animation: scoreUpdate 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scoreUpdate {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
    }

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

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.layer-section {
    padding: 60px 0 60px;
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.layer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:radial-gradient(ellipse at top left,rgba(255,92,1,.05),transparent 50%),radial-gradient(ellipse at bottom right,rgba(18,111,128,.05),transparent 50%); */
    background: url(../../user_template/images/homepage/map.png);
    pointer-events: none;
    z-index: 0
}

.layer-stack::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../user_template/images/homepage/blurry.png);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
}

.progress-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
}

.spinner-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.spinner-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(45deg, #3b82f6, #10b981, #f59e0b);
    animation: spinner-bounce 1.4s ease-in-out infinite both;
}

.spinner-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.spinner-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.spinner-dots .dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes spinner-bounce {

    0%,
    80%,
    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.level-progress {
    animation: message-pulse 2.5s ease-in-out infinite;
    color: #000000 !important;
    font-weight: 500;
}

@keyframes message-pulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Enhanced Score Animation */
.score-animation {
    animation: score-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes score-reveal {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

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

.layer-line-right {
    content: "";
    position: absolute;
    width: 3px;
    top: 49px;
    right: 30px;
    border-radius: 3px;
    height: 78%;
    background-color: #f9f9fa;
}

.layer-line-left {
    content: "";
    position: absolute;
    width: 3px;
    top: 49px;
    left: 30px;
    border-radius: 3px;
    height: 78%;
    background-color: #f9f9fa;
}

.layer-line-inside {
    inset-block-start: 0;
    height: 15px;
    background: linear-gradient(90deg, #ff5c01 0, #f60109 20%, #a1005d 36%, #740c7f 48%, #126f80 65%, #005a59 100%);
    animation: 30s linear infinite alternate topToBottom;
    z-index: 1;
    pointer-events: none;
    position: relative;
}

.layer-line-inside-left {
    background: linear-gradient(90deg, #ff5c01 0, #f60109 20%, #a1005d 36%, #740c7f 48%, #126f80 65%, #005a59 100%);
    animation: 30s linear infinite alternate BottomTotop;
}

@keyframes BottomTotop {

    0%,
    100% {
        inset-block-start: 100%;
        transform: translateY(-100%)
    }

    50% {
        inset-block-start: 0
    }
}

.loader-spinner {
    width: 150px;
    height: 75px;
    display: inline-block;
    position: relative;
    border-radius: 75px 75px 0 0;
    border: 40px solid #e2e8f0;
    border-bottom: 0;
}

.loader-spinner::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 30px;
    height: 17px;
    border-radius: 24px 24px 0 0;
    background: #334155;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
}

.loader-spinner::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 67px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    background: #334155;
    transform-origin: 50% 100%;
    box-sizing: border-box;
    animation: animloader 2s linear infinite alternate;
}

.loader-spinner.init-loader-spinner::before {
    animation: none;
}

@keyframes animloader {
    0% {
        transform: rotate(-70deg);
    }

    10% {
        transform: rotate(-40deg);
    }

    20%,
    45%,
    35% {
        transform: rotate(-10deg);
    }

    40%,
    30% {
        transform: rotate(-30deg);
    }

    50%,
    60% {
        transform: rotate(20deg);
    }

    55%,
    65%,
    75% {
        transform: rotate(40deg);
    }

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

    85%,
    90% {
        transform: rotate(50deg);
    }

    95% {
        transform: rotate(75deg);
    }

    100%,
    93% {
        transform: rotate(70deg);
    }
}

.popup-container {
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 100%;
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    display: flex;
    top: 50px;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.popup-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    padding: 32px 32px 24px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.close-btn {
    position: absolute;
    top: -3px;
    right: -3px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background 0.2s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.popup-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}

.popup-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
}

.popup-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.popup-content {
    padding: 32px;
}

.assessment-question {
    text-align: center;
    margin-bottom: 32px;
}

.question-text {
    color: #374151;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-subtext {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.options-container {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.option-card {
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.1), transparent);
    transition: left 0.6s ease;
}

.option-card:hover {
    border-color: #4f46e5;
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.15);
}

.option-card:hover::before {
    left: 100%;
}

.option-card.selected {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: #4f46e5;
    color: white;
}

.option-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.option-card:not(.selected) .option-icon {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
}

.option-card.selected .option-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.option-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.option-card:not(.selected) .option-title {
    color: #1f2937;
}

.option-card.selected .option-title {
    color: white;
}

.option-description {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    transition: color 0.3s ease;
}

.option-card:not(.selected) .option-description {
    color: #6b7280;
}

.option-card.selected .option-description {
    color: rgba(255, 255, 255, 0.9);
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.btn-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover {
    background: #e5e7eb;
    color: #374151;
}

.progress-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.3s ease;
}

.progress-dot.active {
    background: #4f46e5;
    transform: scale(1.2);
}

.select-container {
    position: relative;
}

.custom-select {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
    color: #374151;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    position: relative;
}

.custom-select:hover {
    border-color: #4f46e5;
    background: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.custom-select:focus {
    outline: none;
    border-color: #4f46e5;
    background: white;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.select-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.select-container:hover .select-arrow {
    color: #4f46e5;
}

.custom-select:focus+.select-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: #4f46e5;
}

.industry-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #4f46e5;
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.15);
    z-index: 10;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.industry-option {
    padding: 16px 20px;
    color: #374151;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.industry-option:hover {
    background: #f3f4f6;
    color: #4f46e5;
}

.industry-option.selected {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
}

.industry-icon {
    font-size: 18px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon {
    display: none;
}

.score-description.static-score-description {
    background-color: #ff9f43;
    box-shadow: 0 .125rem .375rem rgba(255, 159, 67, .3);
    border: 1px solid #ff9f43;
    color: #fff;
}

@media (max-width: 640px) {
    .popup-container {
        margin: 20px;
        border-radius: 20px;
    }

    .popup-header {
        padding: 24px 24px 20px;
    }

    .popup-title {
        font-size: 24px;
    }

    .popup-content {
        padding: 24px;
    }

    .option-card {
        padding: 20px;
    }

    .options-container {
        gap: 12px;
    }

    .action-buttons {
        flex-direction: column;
    }

    .btn {
        /* width: 100%; */
    }
}

@media (max-width: 1300px) {
    .layer-line-left {
        left: 15px;
    }

    .layer-line-right {
        right: 15px;
    }
}

@media (max-width: 1200px) {
    .layer-line-left {
        left: 0px;
    }

    .layer-line-right {
        right: 0px;
    }
}

@media (max-width: 1100px) {
    .layer-line-left {
        left: -25px;
    }

    .layer-line-right {
        right: -25px;
    }
}

@media (max-width: 992px) {
    .assessment-container {
        flex-direction: column;
        gap: 0;
    }

    .layer-line-left,
    .layer-line-right {
        display: none;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .header h1,
    .header h1 span {
        font-size: 1.7rem;
    }

    .layer-stack {
        display: none;
    }
}

@media (max-width: 768px) {
    .real-time-wrapper {
        flex-direction: column;
    }

    .overall-score {
        min-height: 200px;
        margin-bottom: 20px;
    }

    .score-value {
        font-size: 2rem !important;
    }

    .layer-scores-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .navigation {
        flex-wrap: wrap;
        justify-content: left;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .nav-btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .status-buttons {
        /* flex-direction: column; */
        flex-wrap: wrap;
    }

    .btn-icon {
        display: block;
        width: 25px;
        margin-right: 10px;
    }

    .btn-text {
        display: none;
    }

    .navigation {
        flex-wrap: nowrap;
    }

    .layer-square {
        width: 200px;
        height: 200px;
        margin-top: -130px;
    }

    .question-container {
        padding: 20px;
    }

    .nav-btn {
        padding: 10px;
    }

    .assessment-report-btn {
        background: linear-gradient(90deg, #FF5C01 0, #F60109 20%, #A1005D 36%, #740C7F 48%, #126F80 65%, #005A59 100%);
        background-size: 150%;
    }

    .popup-container {
        flex-direction: column;
        top: 70px;
    }
}

.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    display: none;
}

.report-modal {
    display: flex;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 1000px;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    animation: slideUp 0.4s ease-out;
    top: 40px;
    height: 80vh;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.report-modal-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    padding: 20px;
    color: white;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.report-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0 C150,100 350,0 500,50 C650,100 850,0 1000,50 L1000,0 Z"/></svg>') no-repeat center bottom;
    background-size: cover;
}

.report-security-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    backdrop-filter: blur(10px);
}

.report-modal-title {
    font-size: 28px !important;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.report-modal-subtitle {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.report-modal-content {
    padding: 40px;
    width: 100%;
    overflow-y: scroll;
    height: 80vh;
}

.report-form-group {
    margin-bottom: 10px;
    position: relative;
}

.report-form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.required {
    color: #ef4444;
    margin-left: 4px;
}

.report-form-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #f9fafb;
    color: #374151;
}

.report-form-input:focus {
    outline: none;
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.report-form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.report-captcha-group {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.report-captcha-input {
    flex: 1;
}

.report-captcha-container {
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    min-height: 56px;
}

.report-captcha-refresh {
    cursor: pointer;
    color: #6b7280;
    margin-right: 12px;
    transition: color 0.2s ease;
    width: 20px;
    height: 20px;
}

.report-captcha-refresh:hover {
    color: #4f46e5;
}

.report-captcha-image {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.report-error-msg {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: block;
    font-weight: 500;
}

.report-modal-actions {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    top: 60px;
}

.report-modal-btn {
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.report-modal-btn.primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    flex: 2;
    line-height: 1.3;
}

.report-modal-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
}

.report-modal-btn.primary:active {
    transform: translateY(0);
}

.report-modal-btn.secondary {
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    flex: 1;
}

.report-modal-btn.secondary:hover {
    background: #e5e7eb;
    color: #374151;
}

.report-btn-icon {
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

.report-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.report-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.report-progress-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    width: 0%;
    transition: width 0.3s ease;
}

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

.thank-you-modal::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.thank-you-modal::-webkit-scrollbar-thumb {
    background-color: #059669;
    border: 2px solid #555555;
}

.radio-input {
    appearance: none;
    position: absolute;
    left: 10px;
    background-color: #ffffff;
    width: 16px;
    height: 16px;
    border: 1px solid #cccfdb;
    margin: 0;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.05s ease;
}

.radio-input::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.05s transform ease-in-out;
    box-shadow: inset 6px 6px #ffffff;
}

.radio-input:checked {
    background: #0077ff;
    border-color: #0077ff;
}

.radio-input:checked::before {
    transform: scale(1);
}

.radio {
    cursor: pointer;
    padding: 0.4812rem 1rem 0.4812rem 2rem;
}

.promo-strip {
    background: var(--navy-bg);
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid hsl(220, 40%, 25%, 0.3);
    z-index: 2;
}

.gradient-animate {
    background: var(--navy-bg);
    background-size: 400% 400%;
    animation: gradient-shift 8s ease infinite;
}

.text-accent {
    color: hsl(45, 95%, 65%);
}

.text-foreground {
    color: hsl(220, 15%, 95%);
}

.margin-div {
    margin-left: 100px;
}

.getscorebtn {
    padding: 4px 10px;
    margin: 2px 0;
    font-size: 0.9rem;
}


/* Responsive Design */
@media (max-width: 640px) {
    .report-modal {
        width: 100%;
        flex-direction: column;
        top: 35px;
        height: 90vh;
        margin: 20px;
    }

    .report-modal-header {
        padding: 24px 20px;
    }

    .report-modal-content {
        padding: 24px 20px;
    }

    .report-modal-title {
        font-size: 24px !important;
    }

    .report-captcha-group {
        flex-direction: column;
        align-items: stretch;
    }

    .report-modal-actions {
        flex-direction: column-reverse;
    }

    .report-modal-btn {
        width: 100%;
    }
}

/* Loading State */
.report-loading {
    position: relative;
}

.report-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

/* Enhanced Form Validation */
.report-form-input.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.report-form-input.success {
    border-color: #10b981;
    background: #f0fdf4;
}

.report-validation-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline;
}

.report-success-icon {
    color: #10b981;
}

.report-error-icon {
    color: #ef4444;
}



.thank-you-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.thank-you-modal {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 580px;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    animation: slideUp 0.4s ease-out;
    overflow-y: scroll;
    height: 80vh;
    top: 40px;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.thank-you-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    padding: 32px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.thank-you-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0 C150,100 350,0 500,50 C650,100 850,0 1000,50 L1000,0 Z"/></svg>') no-repeat center bottom;
    background-size: cover;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    backdrop-filter: blur(10px);
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.thank-you-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.thank-you-subtitle {
    font-size: 18px;
    opacity: 0.95;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.thank-you-content {
    padding: 40px;
}

.status-message {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #bbf7d0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    text-align: center;
}

.status-message h3 {
    color: #166534;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.status-message p {
    color: #15803d;
    font-size: 16px;
    line-height: 1.6;
}

.next-steps {
    margin-bottom: 32px;
}

.next-steps h4 {
    color: #374151;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.next-steps-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    color: #4f46e5;
}

.contact-info {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 2px solid #e2e8f0;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    color: #4f46e5;
    flex-shrink: 0;
}

.contact-text {
    color: #374151;
    font-size: 15px;
    line-height: 1.5;
}

.contact-text strong {
    color: #1f2937;
    font-weight: 600;
}

.discount-highlight {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 16px;
    color: #92400e;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .thank-you-modal {
        flex-direction: column;
        margin: 20px;
        max-width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .thank-you-header {
        flex: none;
        padding: 24px 20px;
    }

    .thank-you-content {
        padding: 24px 20px;
        flex: none;
    }

    .thank-you-title {
        font-size: 28px;
    }

    .thank-you-actions {
        flex-direction: column;
    }

    .contact-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 16px;
    }

    .contact-icon {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .success-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
    }

    .status-message {
        margin-bottom: 20px;
        padding: 16px;
    }

    .contact-info {
        padding: 16px;
    }

    .next-steps {
        margin-bottom: 20px;
    }

    .font-mobile {
        line-height: 1.2;
    }

    .font-mobile span {
        font-size: 12px;
    }

    .getscorebtn {
        padding: 4px 10px;
        margin: 3px 0;
        font-size: 0.6rem;
        margin-top: 8px;
    }

    .margin-div {
        margin-left: 0;
    }
}

/* Tablet landscape adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .thank-you-modal {
        max-width: 600px;
    }

    .thank-you-header {
        flex: 0 0 35%;
        padding: 32px 24px;
    }

    .thank-you-content {
        padding: 32px 24px;
    }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
    .thank-you-modal {
        max-width: 600px;
    }

    .thank-you-header {
        flex: 0 0 42%;
        padding: 48px 40px;
    }

    .thank-you-content {
        padding: 48px 40px;
    }
}

/* Animation for elements */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.statistics-content-inner p {
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 400;
    color: #5f6c76;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .statistics-content-inner p {
        font-size: 0.9rem;
    }

    .layer-count-wrapper {
        flex-wrap: wrap;
    }

    .question-progress-container {
        padding: 10px;
    }
}

.pressrelease-section .owl-carousel .owl-item img {
    height: 270px !important;
    transition: .3s linear;
    object-fit: cover;
    object-position: left;
}

.press-card-body {
    padding: 30px;
    position: relative;
}

.press-card-body h5 {
    font-size: 1.17rem;
    font-weight: 500;
    margin-top: 30px;
    color: #212529;
}

.pressrelease-section .owl-carousel .owl-item img:hover {
    scale: 5;
    transform-origin: top left;
    opacity: .5;
    filter: blur(8px);
}

.press-card-body span {
    display: inline-block;
    font-size: 1.1rem;
    margin-top: 40px;
    background: var(--text-gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.press-card-body span::after {
    content: "⟶";
    margin-left: .3em;
    transition: transform .35s ease-in-out;
    display: inline-block;
}

.hidden-before::before {
    display: none;
}

.pressrelease-section.remove-padding {
    padding: 0;
}

.meeting-wrapper .card-title {
    font-weight: 500;
}

@media (max-width: 400px) {
    .press-card-body {
        padding: 40px 0;
    }

    .pressrelease-section .owl-carousel .owl-item img {
        height: 100% !important;
    }
}

.technicaltools-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
}

.techinacaltools-slide {
    display: flex;
    justify-content: center;
    padding: 10px 40px;
    position: relative;
}

.card-techinacaltools {
    height: 100%;
    width: 100%;
    padding: 1.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 0 20px 0 20px;
}

.card-techinacaltools:hover {
    box-shadow: 0px 3px 6px #00000029;
}

.techinacaltools-slide::after {
    content: '';
    position: absolute;
    border-right: solid 1px #ccc;
    height: calc(100% - 20px);
    top: 10px;
    right: 0;
}

@media (max-width: 1200px) {
    .techinacaltools-slide {
        padding: 10px 20px;
    }
}

@media (max-width: 992px) {
    .techinacaltools-slide {
        padding: 10px 30px;
    }

    .card-techinacaltools {
        padding: 0.5rem;
    }
}

@media (max-width: 600px) {
    .techinacaltools-slide {
        padding: 10px 10px;
    }

}

@media (max-width: 550px) {
    .technicaltools-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .techinacaltools-slide {
        flex: 0 0 50%;
    }

    .techinacaltools-slide:nth-child(even)::after {
        display: none;
    }
}

.partners.owl-carousel .owl-stage {
    padding: 50px 0;
}

.country-flag img {
    height: 100% !important;
}

/* ========================================
   CERTIFICATIONS SECTION - WHITE THEME
   ======================================== */

.certifications-section {
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    background-image: -webkit-linear-gradient(90deg, #ebf0fb 0, #f2f7fd 25%, #f8fdff 39%, #fff 100%);
}

.bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.4) 0%, transparent 50%);
    z-index: 0;
}


.certifications-section .container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


/* .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 16px;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 16px;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
} */

/* ========================================
   CERTIFICATIONS GRID
   ======================================== */

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;

}

/* ========================================
   CERTIFICATE CARD
   ======================================== */

.home-cert-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /* background: var(--text-gradient-color); */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.home-cert-card:hover {
    /* transform: translateY(-8px); */
    border-color: #6366f1;
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.12);
}

.home-cert-card:hover::before {
    transform: scaleX(1);
}

/* ========================================
   CERTIFICATE CARD ELEMENTS
   ======================================== */

.home-cert-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    border-radius: 12px;
}

.home-cert-icon img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.home-cert-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1e293b;
    line-height: 1.3;
}

.home-cert-badge {
    display: inline-block;
    padding: 5px 12px;
    background: #dcfce7;
    border-radius: 12px;
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.home-cert-description {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.home-cert-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    margin-top: auto;
}

.home-cert-link:hover {
    color: #4f46e5;
    gap: 10px;
}

.home-cert-link svg {
    transition: transform 0.3s ease;
}

.home-cert-link:hover svg {
    transform: translateX(3px);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet and Below */
@media (max-width: 1200px) {
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .certifications-section {
        padding: 60px 16px;
    }

    .certifications-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-cert-card {
        padding: 28px 20px;
    }
}

/* Desktop Large - Optimize for full viewport */
@media (min-width: 1400px) {
    .certifications-section {
        min-height: auto;
        display: flex;
        align-items: center;
    }
}


.gitex-landing-section {
    background-image: url(../../../../themes/new_theme/user_template/images/gitex/iconic-dubai.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gitex-landing-section::before {
    position: absolute;
    content: '';
    background: #000000;
    mix-blend-mode: initial;
    opacity: 0.5;
    height: 100%;
    width: 100%;
}

.g-wrapper {
    display: flex;
    padding-top: 10%;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    height: 100%;
}

.g-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px 20px;
    height: 100%;
    margin: 0 auto;
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;
}

h1.g-title {
    color: #fff;
    font-size: 63px;
}

h2.g-title {
    font-size: 30px !important;
    color: #fff;
    font-weight: 700;
}

h1.g-title span {
    font-size: 63px !important;
    color: #fff;
    font-weight: 700;
    background: -webkit-linear-gradient(40deg, #FF5C01 0%, #FF5C01 20%, #FF5C01 36%, #F60109 48%, #F60109 65%, #F60109 100%);
    background-clip: border-box;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.stall-wrapper {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.35));
    background-color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.6),
        /* soft outer shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    /* subtle inner top sheen */
    /* backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%); */
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.stall-wrapper h3 {
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 24px;
}

.stall-wrapper p {
    background: -webkit-linear-gradient(40deg, #FF5C01 0%, #FF5C01 20%, #FF5C01 36%, #F60109 48%, #F60109 65%, #F60109 100%);
    background-clip: border-box;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 20px;
    margin-top: 18px;
    margin-bottom: 5px;
}

@media (max-width: 992px) {

    h1.g-title,
    h1.g-title span {
        font-size: 50px !important;
    }
}

@media (max-width: 768px) {

    h1.g-title,
    h1.g-title span {
        font-size: 30px !important;
    }

    .stall-wrapper h3 {
        font-size: 20px;
    }

    .stall-wrapper p {
        font-size: 18px;
        text-align: center;
    }
}

.item:hover {
    transform: scale(1.05) rotate(45deg);
}



.grid-releases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.release-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(16, 28, 47, .08), 0 8px 22px rgba(16, 28, 47, .06), 0 5px 10px rgba(16, 28, 47, .04) !important;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
}

.release-card:hover {
    transform: translateY(-8px);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.2);
}

.release-image {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.release-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.release-card:hover .release-image img {
    transform: scale(1.1) rotate(2deg);
}

.release-number {
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.5s ease;
}

.release-body {
    padding: 25px;
}

.release-date {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.release-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
    line-height: 1.4;
}

.release-excerpt {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.release-link {
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

.release-link:hover {
    gap: 12px;
}

.load-more-section {
    text-align: center;
    padding: 40px 0;
}

.load-more-btn {
    padding: 18px 50px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3);
}

.load-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 60px rgba(239, 68, 68, 0.4);
}

.press-badge {
    display: inline-flex;
    align-items: center;
    background-image: linear-gradient(to right, hsl(14 100% 57%), hsl(221 83% 53%));
    --tw-gradient-from: hsl(14 100% 57%);
    --tw-gradient-stops: hsl(14 100% 57%), hsl(221 83% 53%);
    --tw-gradient-to: hsl(221 83% 53%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse;
}

@media (max-width: 1024px) {
    .grid-releases {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-releases {
        grid-template-columns: 1fr;
    }
}

.gitex-hold-image {
    justify-content: left;
    padding: 0;
}

.layer-count-wrapper {
    display: flex;
    align-items: center;
}

.question-progress-container {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.statcount-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: #f9fafb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.statcount-label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 12px;
}

.statcount-value {
    font-size: 15px;
    font-weight: 700;
    line-height: 15px;
}

.stat-total .statcount-value {
    color: #3b82f6;
}

.stat-answered .statcount-value {
    color: #10b981;
}

.stat-remaining .statcount-value {
    color: #f59e0b;
}

:root {
    --primary-orange: #ff5722;
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --primary-red: #e11d48;
    --navy-bg: #0A192F;
}

.bg-gradient-primary {
    background: linear-gradient(to right, var(--primary-orange), var(--primary-red));
}

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

.news-section {
    padding: 3rem 0;
    background-color: var(--navy-bg);
    color: white;
    position: relative;
}

.news-card {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    background-color: #1e293b;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    border-color: rgba(255, 87, 34, 0.5);
    transform: translateY(-5px);
}

.news-card-img-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: transform 0.7s ease;
}

.news-card:hover .news-card-img-bg {
    transform: scale(1.05);
}

.news-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0A192F, rgba(10, 25, 47, 0.6), transparent);
}

.news-card-overlay-h {
    background: linear-gradient(to right, #0A192F 20%, rgba(10, 25, 47, 0.8), transparent);
}

.news-content {
    position: relative;
    z-index: 10;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.badge-category {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35em 0.65em;
    border-radius: 0.2rem;
}

.latest-card-title {
    font-weight: 700;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.news-card:hover .latest-card-title {
    color: var(--primary-orange);
}

/* Specific Card Styles */
.card-white {
    background-color: white;
    color: #0f172a;
}

.card-white:hover {
    box-shadow: 0 25px 50px -12px rgba(255, 87, 34, 0.25);
}

/* Vertical Card Image (Card 2) */
.card-vertical-img {
    height: 200px;
    position: relative;
    overflow: hidden;
}

/* Buttons */
.btn-primary-gradient {
    background: linear-gradient(to right, var(--primary-orange), var(--primary-red));
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50rem;
    font-weight: 500;
    box-shadow: 0 10px 15px -3px rgba(255, 87, 34, 0.3);
    transition: all 0.3s ease;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(255, 87, 34, 0.4);
    color: white;
}

.btn-outline-custom {
    border-radius: 50rem;
    padding: 0.75rem 2rem;
    border-color: #e2e8f0;
    color: #334155;
}

.btn-outline-custom:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.display-5 {
    font-size: calc(1.425rem + 2.1vw) !important;
    font-weight: 300;
    line-height: 1.2;
    color: #fff;
}

.display-5 span {
    font-size: calc(1.425rem + 2.1vw) !important;
    line-height: 1.2;
}

.display-5 .news-tit {
    color: var(--color-orange-500) !important;
}

.glitch-title {
    color: var(--color-orange-500);
    border: 1px solid var(--color-orange-500);
}

@media (min-width: 1200px) {
    .display-5 {
        font-size: 3rem !important;
    }

    .display-5 span {
        font-size: 3rem !important;
        font-weight: 700;
    }
}

:root {
    --brand-dark: #0b1120;
    --brand-orange: #ea580c;
    --brand-orange-hover: #c2410c;
    --text-slate-300: #cbd5e1;
    --text-slate-400: #94a3b8;
    --text-slate-500: #64748b;
    --bg-slate-800: #1e293b;
    --border-slate-700: #334155;
}

/* Footer Section Main Styles */
.footer-section {
    background-color: var(--brand-dark);
    color: var(--text-slate-300);
    position: relative;
    border-top: 1px solid var(--border-slate-700);
    padding-top: 5rem;
    padding-bottom: 2rem;
}

/* Decorative Background Elements */
.deco-line {
    height: 4px;
    background: linear-gradient(to right, var(--brand-orange), #f59e0b, var(--brand-orange));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.deco-blur-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(234, 88, 12, 0.1);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.deco-blur-2 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 200px;
    background: rgba(37, 99, 235, 0.05);
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

/* CTA Card (Top of footer) */
.cta-card {
    background-color: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 4rem;
}

.btn-brand {
    background-image: var(--btns-bg-color);
    background-size: 150%;
    box-shadow: var(--btn-box-shadow);
    color: white;
    border: none;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-brand:hover {
    background-color: var(--brand-orange-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.2);
    color: white;
}

/* Brand Identity */
.brand-logo-box {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f97316, #dc2626);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(124, 45, 18, 0.2);
}

/* Contact Info Section */
.user-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    group: transition;
}

.contact-icon-box {
    background-color: var(--bg-slate-800);
    padding: 0.5rem;
    border-radius: 8px;
    color: var(--text-slate-400);
    transition: all 0.3s;
    margin-top: 0.25rem;
}

.user-contact-item:hover .contact-icon-box {
    background-color: rgba(234, 88, 12, 0.2);
    color: var(--brand-orange);
}

.contact-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-slate-500);
    margin-bottom: 2px;
}

.contact-value {
    color: white;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 0.95rem;
}

.contact-value:hover {
    color: var(--brand-orange);
}

/* Social Media Buttons */
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-slate-800);
    border: 1px solid var(--border-slate-700);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-slate-400);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.social-btn:hover {
    /* background-color: var(--brand-orange); */
    border-color: var(--brand-orange);
    color: white;
    transform: translateY(-4px);
}

/* Footer Links */
.footer-heading {
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 32px;
    height: 4px;
    background-color: var(--brand-orange);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-link {
    color: var(--text-slate-400);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    font-size: 0.9rem;
    position: relative;
}

.footer-link svg {
    opacity: 0;
    width: 0;
    margin-right: 0;
    transition: all 0.3s ease;
    color: var(--brand-orange);
}

.footer-link:hover {
    color: white;
}

.footer-link:hover svg {
    opacity: 1;
    width: 18px;
    margin-right: 4px;
}

/* Certification Badges */
.cert-container {
    background-color: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 1rem;
    padding: 1.5rem;
}

.cert-card {
    background-color: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-slate-700);
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    height: 100%;
    cursor: default;
}

.cert-card:hover {
    border-color: rgba(234, 88, 12, 0.5);
    background-color: rgba(30, 41, 59, 0.8);
}

.cert-icon {
    color: var(--brand-orange);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s;
}

.cert-card:hover .cert-icon {
    transform: scale(1.1);
}

.footer-cert-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 1.2;
}

.cert-sub {
    font-size: 0.65rem;
    color: var(--text-slate-400);
    margin-top: 0.25rem;
    text-align: center;
}

/* Bottom Bar */
.bottom-bar {
    border-top: 1px solid var(--border-slate-700);
    padding-top: 2rem;
    margin-top: 2rem;
}

.legal-link {
    color: var(--text-slate-500);
    text-decoration: none;
    font-size: 0.875rem;
    margin: 0 0.75rem;
    transition: color 0.2s;
    font-weight: 500;
}

.legal-link:hover {
    color: var(--brand-orange);
}

/* Floating Whatsapp */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    z-index: 1000;
    transition: all 0.3s;
    text-decoration: none;
    animation: bounce 3s infinite ease-in-out;
}

.whatsapp-float:hover {
    background-color: #16a34a;
    transform: scale(1.1);
    color: white;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

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

/* Modal Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Modal Container */
#staticBackdrop {
    z-index: 1050;
}

#staticBackdrop .modal-dialog {
    max-width: 650px;
    margin: 1.75rem auto;
}

#staticBackdrop .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    max-height: 85vh;
}

#staticBackdrop .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0;
}

#staticBackdrop .modal-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #212529;
}

#staticBackdrop .btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/14px auto no-repeat;
    border: none;
    border-radius: 6px;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
}

#staticBackdrop .btn-close:hover {
    opacity: 1;
    background-color: #f1f1f1;
}

#staticBackdrop .modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(85vh - 75px);
}

#staticBackdrop .modal-body p {
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 14px;
    text-align: left;
}

#staticBackdrop .modal-body p strong {
    color: #212529;
    font-size: 15px;
}

#staticBackdrop .modal-body ul {
    margin: 0 0 14px 0;
    padding: 0;
    list-style: none;
}

#staticBackdrop .modal-body ul li {
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 8px;
    padding-left: 18px;
    position: relative;
}

#staticBackdrop .modal-body ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: #007bff;
    border-radius: 50%;
}

#staticBackdrop .modal-body .d-flex {
    margin-bottom: 8px;
}

#staticBackdrop .modal-body .d-flex li {
    padding-left: 0;
}

#staticBackdrop .modal-body .d-flex li:before {
    display: none;
}

#staticBackdrop .modal-body .d-flex span svg {
    color: #007bff;
}

/* Scrollbar */
#staticBackdrop .modal-body::-webkit-scrollbar {
    width: 6px;
}

#staticBackdrop .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#staticBackdrop .modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#staticBackdrop .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #staticBackdrop .modal-dialog {
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    #staticBackdrop .modal-content {
        max-height: 90vh;
    }

    #staticBackdrop .modal-header {
        padding: 15px 18px;
    }

    #staticBackdrop .modal-title {
        font-size: 1.1rem;
    }

    #staticBackdrop .modal-body {
        padding: 18px;
        max-height: calc(90vh - 65px);
    }

    #staticBackdrop .modal-body p {
        font-size: 13px;
    }

}

.text-end {
    text-align: center !important;
}

.standard-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 1;
    position: relative;
    overflow: hidden;
}