@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);.light-background,:root {
    --surface-color: #ffffff
}

.dark-background,:root {
    --contrast-color: #ffffff
}

a,b {
    color: var(--ns-aqua-heading)
}

a,a:hover {
    text-decoration: none
}

li,p {
    color: var(--paragraph-color)
}

.hero .hero-content,.hero .hero-image {
    z-index: 1;
    position: relative
}

:root {
    --default-font: "Inter",serif;
    --heading-font: "Poppins",sans-serif;
    --nav-font: "Poppins",sans-serif;
    --body-font: ;
    --background-color: #ffffff;
    --default-color: #212529;
    --heading-color: #17212b;
    --sub-heading-color: #2d465e;
    --accent-color: #00238d;
    --paragraph-color: #717171;
    --ns-aqua-heading: #3cb3ff;
    --nav-color: #212529;
    --nav-hover-color: #00238d;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #212529;
    --nav-dropdown-hover-color: #00238d;
    --font-15px: 15px
}

.light-background {
    --background-color: #f3f9ff
}

.dark-background {
    --background-color: #0d83fd;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #409dfd
}

::-webkit-scrollbar {
    width: 5px;
    height: 2px
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0
}

::-webkit-scrollbar-thumb {
    background: #525965;
    border: 0 #fff;
    border-radius: 0
}

::-webkit-scrollbar-thumb:hover {
    background: #525965
}

::-webkit-scrollbar-thumb:active {
    background: #525965
}

::-webkit-scrollbar-track {
    background: 0 0;
    border: 0 #fff;
    border-radius: 50px
}

.btn-outline-primary,.btn-outline-primary:hover,.btn-primary,.btn-primary:hover {
    border-color: var(--accent-color)
}

.btn-cta,.btn-primary {
    border-radius: 5px;
    transition: .3s
}

::-webkit-scrollbar-track:hover {
    background: 0 0
}

::-webkit-scrollbar-track:active {
    background: 0 0
}

::-webkit-scrollbar-corner {
    background: 0 0
}

.btn-primary {
    color: var(--contrast-color);
    padding: 10px 24px;
    align-items: center;
    background: linear-gradient(to left,#f74f68 0,#21679b 80%)
}

.btn-primary:hover {
    background-color: color-mix(in srgb,var(--accent-color),var(--contrast-color) 20%)
}

.btn-outline-primary {
    padding: 10px 20px;
    color: var(--accent-color)
}

.btn-outline-primary:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color)
}

.btn-cta {
    background-color: color-mix(in srgb,var(--contrast-color) 15%,transparent);
    color: var(--contrast-color);
    padding: 10px 24px;
    border: 2px solid var(--contrast-color);
    position: relative;
    z-index: 2
}

.footer,.header,body {
    background-color: var(--background-color)
}

.btn-cta:hover {
    background-color: var(--contrast-color);
    color: var(--accent-color)
}

.php-email-form .error-message,.php-email-form .sent-message {
    color: #fff;
    font-weight: 600;
    display: none;
    padding: 15px;
    margin-bottom: 24px
}

body {
    color: var(--default-color);
    font-family: var(--default-font)
}

p {
    line-height: 1.6;
    font-size: var(--font-15px)
}

b {
    font-size: 16px;
    font-weight: 600
}

a {
    transition: .3s
}

a:hover {
    color: color-mix(in srgb,var(--ns-aqua-heading),transparent 25%)
}

h1,h2,h3,h4,h5,h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 24px
}

.service-details .help-box .help-icon,h1 {
    font-size: 48px
}

h3 {
    font-size: 30px
}

h4 {
    font-size: 18px;
    color: var(--sub-heading-color)
}

li {
    font-size: var(--font-15px)
}

.call-to-action-2 p,.footer,.header,.page-title,.section,li b,section {
    color: var(--default-color)
}

.php-email-form .error-message {
    background: #df1529;
    text-align: left
}

.php-email-form .sent-message {
    background: #059652;
    text-align: center
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: 1s linear infinite php-email-form-loading
}

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0)
    }

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

.header {
    --background-color: rgba(255, 255, 255, 1);
    padding: 15px 0;
    transition: .5s;
    z-index: 997
}

.header .logo {
    padding-left: 0
}

.header .logo img {
    max-height: 60px;
    margin-right: 8px
}

.header .logo h1 {
    font-size: 24px;
    margin: 0;
    font-weight: 500;
    color: var(--heading-color)
}

.navmenu,.pad-none {
    padding: 0
}

.navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center
}

.about .image-wrapper,.features .tab-pane h3,.hero,.navmenu li {
    position: relative
}

.navmenu a,.navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: .3s
}

.call-to-action-2 .cta-btn,.footer .footer-about p,.stats .stats-item p {
    font-family: var(--heading-font)
}

.navmenu a i,.navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: .3s
}

.features .nav-item:last-child,.navmenu li:last-child a {
    padding-right: 0
}

.navmenu .active,.navmenu .active:focus,.navmenu li:hover>a {
    color: var(--nav-hover-color)
}

.navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: .3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0 0 30px rgba(0,0,0,.1)
}

.navmenu .dropdown ul li {
    min-width: 200px
}

.navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color)
}

.navmenu .dropdown ul a i {
    font-size: 12px
}

.navmenu .dropdown ul .active:hover,.navmenu .dropdown ul a:hover,.navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color)
}

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

.navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden
}

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

.footer {
    font-size: 14px;
    position: relative
}

.footer .footer-top {
    padding-top: 50px
}

.footer .footer-about .logo {
    line-height: 1;
    margin-bottom: 25px
}

.footer .footer-about .logo img {
    max-height: 40px;
    margin-right: 6px
}

.footer .footer-about .logo span {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-size: 24px;
    letter-spacing: 1px
}

.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb,var(--default-color),transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb,var(--default-color),transparent 20%);
    margin-right: 10px;
    transition: .3s
}

.footer .social-links a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color)
}

.footer h4 {
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding-bottom: 12px
}

.footer .footer-links {
    margin-bottom: 30px
}

.about .feature-list,.footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer .footer-links ul i {
    padding-right: 2px;
    font-size: 12px;
    line-height: 0
}

.footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center
}

.footer .footer-links ul li:first-child {
    padding-top: 0
}

.footer .footer-links ul a {
    color: color-mix(in srgb,var(--default-color),transparent 30%);
    display: inline-block;
    line-height: 1
}

.faq .faq-arrow,.faq .faq-container .faq-active h3,.faq .faq-container .faq-item .faq-toggle:hover,.faq .faq-container .faq-item h3:hover,.features .nav-link:hover h4,.footer .footer-links ul a:hover,.service-details .download-catalog a:hover {
    color: var(--accent-color)
}

.footer .footer-contact p {
    margin-bottom: 5px
}

.footer .copyright {
    padding: 15px 0;
    border-top: 1px solid color-mix(in srgb,var(--default-color),transparent 90%)
}

.contact .info-item .content p:last-child,.contact .info-item:last-child,.faq .faq-container .faq-item:last-child,.features .tab-pane p:last-child,.footer .copyright p,.section-title p {
    margin-bottom: 0
}

.footer .credits {
    margin-top: 8px;
    font-size: 13px
}

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: .4s
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0
}

.scroll-top:hover {
    background-color: color-mix(in srgb,var(--accent-color),transparent 20%);
    color: var(--contrast-color)
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px
}

.page-title {
    background-color: var(--background-color);
    padding: 170px 0 80px;
    text-align: center;
    position: relative
}

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400
}

.hero .hero-content ul li::before,.section-title h3:after {
    position: absolute;
    display: block;
    margin: auto;
    width: 50px;
    height: 3px;
    left: 0
}

.page-title .breadcrumbs ol li+li {
    padding-left: 10px
}

.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb,var(--default-color),transparent 70%)
}

.section,section {
    padding: 60px 0;
    scroll-margin-top: 60px;
    overflow: clip
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
    position: relative
}

.section-title h3 {
    margin-bottom: 0;
    padding-bottom: 10px;
    position: relative
}

.section-title h3:after {
    content: "";
    background: var(--ns-aqua-heading);
    right: 0;
    bottom: 0
}

.achievement.hero {
    padding-top: 60px!important
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--accent-color),transparent 92%),transparent 40%);
    pointer-events: none
}

.hero .company-badge,.hero .stat-item .stat-icon {
    background-color: color-mix(in srgb,var(--accent-color),transparent 92%)
}

.hero .hero-content h1 {
    margin: 0 0 15px
}

.hero .hero-content h1 .accent-text {
    color: var(--ns-aqua-heading)
}

.hero .hero-content .lead {
    font-weight: 500;
    font-size: 18px;
    color: var(--heading-color)
}

.hero .hero-content h2 {
    font-size: 30px;
    margin: 0 0 15px;
    font-weight: 600
}

.hero .hero-content ul {
    padding: 0;
    margin: 0 0 30px
}

.hero .hero-content ul li {
    position: relative;
    list-style: none;
    padding: 0 0 0 30px;
    margin: 0;
    line-height: 2
}

.hero .hero-content ul li::before {
    content: "\F26F";
    font-family: bootstrap-icons!important;
    right: auto;
    top: 0;
    color: #25d366
}

.hero .company-badge {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 50px;
    color: var(--accent-color);
    font-weight: 500
}

.about .contact-info,.hero .customers-badge,.hero .stats-row {
    background-color: var(--surface-color)
}

.hero .company-badge i {
    font-size: 1.25rem
}

.hero .hero-image {
    text-align: center
}

.hero .hero-image img {
    max-width: 100%;
    height: auto
}

.hero .customers-badge {
    position: absolute;
    bottom: 10px;
    right: 30px;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    max-width: 300px;
    animation: 3s ease-in-out infinite float-badge;
    will-change: transform
}

.hero .customers-badge .customer-avatars {
    display: flex;
    align-items: center;
    margin-bottom: .5rem
}

.hero .customers-badge .avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--surface-color);
    margin-left: -8px
}

.hero .customers-badge .avatar:first-child {
    margin-left: 0
}

.hero .customers-badge .avatar.more {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600
}

.hero .customers-badge p {
    font-size: .875rem;
    color: color-mix(in srgb,var(--default-color),transparent 40%)
}

.hero .stats-row {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,.05)
}

.hero .stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 24px
}

.hero .stat-item .stat-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: .3s
}

.hero .stat-item .stat-icon i {
    font-size: 1.5rem;
    color: var(--accent-color)
}

.clients .swiper-pagination .swiper-pagination-bullet-active,.hero .stat-item:hover .stat-icon,.swiper-pagination-bullet-active {
    background-color: var(--accent-color)
}

.contact .info-box a,.features .nav-link.active h4,.hero .stat-item:hover .stat-icon i,.pricing .pricing-card.popular .features-list li,.pricing .pricing-card.popular .features-list li i,.pricing .pricing-card.popular .price .amount,.pricing .pricing-card.popular .price .currency,.pricing .pricing-card.popular .price .period,.pricing .pricing-card.popular h3,.pricing .pricing-card.popular h4,.service-details .help-box a,.service-details .help-box h4,.service-details .services-list a.active i {
    color: var(--contrast-color)
}

.hero .stat-item .stat-content {
    flex-grow: 1
}

.hero .stat-item .stat-content h4 {
    font-size: 1.25rem;
    margin-bottom: .25rem;
    font-weight: 600
}

.hero .stat-item .stat-content p {
    font-size: .875rem;
    color: color-mix(in srgb,var(--default-color),transparent 40%);
    margin: 0
}

@keyframes float-badge {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.about .section-title,.features .section-title {
    text-align: start
}

.about .section-title h3:after,.features .section-title h3:after {
    margin: 0
}

.about .about-meta {
    color: var(--ns-aqua-heading);
    font-weight: 600;
    margin-bottom: 0;
    display: inline-block
}

.about .feature-list-wrapper {
    margin-bottom: 2rem
}

.about .feature-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    font-size: 1rem
}

.about .feature-list li i {
    color: var(--accent-color);
    font-size: 1.25rem
}

.about .profile .profile-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover
}

.about .profile .profile-name {
    font-size: 1.125rem;
    margin: 0
}

.about .profile .profile-position {
    color: var(--accent-color);
    margin: 0;
    font-size: .875rem
}

.about .contact-info {
    padding: 1rem 1.5rem;
    border-radius: .5rem;
    box-shadow: 0 0 15px rgba(0,0,0,.06)
}

.features .nav-tabs,.service-details .services-list a {
    background-color: color-mix(in srgb,var(--default-color),transparent 96%)
}

.about .contact-info i {
    color: var(--accent-color);
    font-size: 1.5rem
}

.about .contact-info .contact-label {
    color: color-mix(in srgb,var(--default-color),transparent 30%);
    font-size: .875rem;
    margin: 0
}

.about .contact-info .contact-number {
    font-weight: 600;
    margin: 0
}

.about .image-wrapper .small-image {
    position: absolute;
    top: 30%;
    left: -10%;
    width: 45%;
    border: 2px solid #f3f9ff
}

.about .image-wrapper .experience-badge {
    position: absolute;
    bottom: -10%;
    right: -15%;
    background-color: #32b9ff;
    color: var(--contrast-color);
    padding: 1.5rem;
    border-radius: .5rem;
    text-align: center;
    min-width: 200px;
    animation: 3s ease-in-out infinite experience-float
}

.about .image-wrapper .experience-badge h3 {
    color: var(--contrast-color);
    font-size: 2.5rem;
    margin: 0;
    line-height: .5
}

.about .image-wrapper .experience-badge h3 span {
    font-size: 1rem;
    display: inline-block;
    margin-left: .25rem
}

.about .image-wrapper .experience-badge p {
    margin: .5rem 0 0;
    color: #fff
}

@keyframes experience-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.features .nav-tabs {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 6px;
    width: auto
}

.features .nav-item {
    margin: 0;
    padding: 0 5px 0 0
}

.features .nav-link {
    background-color: none;
    color: var(--heading-color);
    padding: 10px 30px;
    transition: .3s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    border: 0;
    margin: 0
}

.features .nav-link i {
    padding-right: 15px;
    font-size: 48px
}

.features .nav-link h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0
}

.features .nav-link:hover {
    border-color: color-mix(in srgb,var(--default-color),transparent 80%)
}

.features .nav-link.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color)
}

.features .tab-content,.service-details .service-box+.service-box {
    margin-top: 30px
}

.features .tab-pane ul {
    list-style: none;
    padding: 0
}

.features .tab-pane ul li {
    padding: 0 0 0 25px;
    position: relative;
    line-height: 2
}

.features .tab-pane ul li::before {
    content: "\F26a";
    font-family: bootstrap-icons!important;
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    left: 0;
    right: auto;
    top: 0;
    margin: auto;
    color: var(--ns-aqua-heading)
}

.features .tab-pane ul i {
    font-size: 20px;
    padding-right: 4px;
    color: var(--accent-color)
}

.features-cards {
    --default-color: #555;
    --heading-color: #333
}

.features-cards .feature-box {
    height: 100%;
    padding: 0 0 20px;
    border-radius: 10px;
    text-align: center
}

.features-cards .feature-box i {
    font-size: 44px;
    display: inline-block;
    line-height: 0;
    color: var(--accent-color);
    margin-bottom: 20px
}

.features-cards .feature-box img {
    border-radius: 10px;
    margin: 0 0 15px;
    border: 1px solid #f3f9ff;
    width: 100%
}

.features-cards .feature-box h4 {
    margin: 0;
    padding: 0 15px;
    color: var(--ns-aqua-heading)
}

.call-to-action .container,.call-to-action .dots {
    color: var(--contrast-color)
}

.features-cards .feature-box p {
    font-size: 15px;
    margin-bottom: 0;
    padding: 0 15px 30px
}

.features-cards .feature-box.orange {
    background-color: #fff3e2
}

.features-cards .feature-box.orange i {
    color: #edb86e
}

.features-cards .feature-box.blue {
    background-color: #deedfd
}

.features-cards .feature-box.blue i {
    color: #20a5f8
}

.features-cards .feature-box.green {
    background-color: #d5f1e4
}

.features-cards .feature-box.green i {
    color: #48c88a
}

.features-cards .feature-box.red {
    background-color: #fdeded
}

.features-cards .feature-box.red i {
    color: #f28484
}

.features-2 .feature-item {
    margin: 24px 0 0;
    border: 1px solid #f3f9ff;
    border-radius: 10px;
    padding: 15px;
    min-height: 188px
}

.features-2 .feature-item .feature-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: color-mix(in srgb,var(--accent-color),transparent 92%)
}

.features-2 .feature-item .feature-icon p {
    margin: 0;
    color: #0d83fd;
    font-size: 18px;
    font-weight: 600
}

.features-2 .feature-item .feature-icon i {
    font-size: 24px;
    color: var(--accent-color)
}

.features-2 .feature-item .feature-content h4,.services .service-card p {
    margin-bottom: 10px
}

.features-2 .feature-item .feature-content p {
    font-size: 15px;
    margin-bottom: 0
}

.features-2 .phone-mockup {
    position: relative;
    padding: 30px 0
}

.features-2 .phone-mockup img {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .1))
}

.call-to-action .container {
    background: var(--accent-color);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 4rem 2rem
}

.call-to-action .dots,.call-to-action .shape {
    position: absolute;
    pointer-events: none;
    z-index: 1
}

.call-to-action .content h2,.call-to-action .content p {
    color: var(--contrast-color);
    position: relative;
    z-index: 2
}

.call-to-action .dots svg,.call-to-action .shape svg {
    width: 100%;
    height: 100%
}

.call-to-action .shape svg path {
    fill: color-mix(in srgb,var(--contrast-color) 50%,transparent)
}

.call-to-action .shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
    opacity: .1;
    transform: rotate(45deg);
    animation: 3s ease-in-out infinite shapes-float
}

.call-to-action .shape-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    opacity: .15;
    transform: rotate(-15deg);
    animation: 4s ease-in-out infinite shapes-float
}

.call-to-action .shape-3 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 15%;
    opacity: .08;
    transform: rotate(15deg)
}

.call-to-action .dots-1 {
    width: 200px;
    height: 200px;
    top: -30px;
    left: 10%;
    opacity: .1;
    transform: rotate(15deg);
    animation: 4s ease-in-out infinite shapes-float
}

.call-to-action .dots-2 {
    width: 150px;
    height: 150px;
    bottom: 20px;
    right: 15%;
    opacity: .15;
    transform: rotate(-10deg)
}

@keyframes shapes-float {
    0%,100% {
        transform: scale(.8) rotate(45deg) translateY(0)
    }

    50% {
        transform: scale(.8) rotate(45deg) translateY(-20px)
    }
}

.clients .swiper-slide img {
    opacity: .5;
    transition: .3s;
    filter: grayscale(100)
}

.clients .swiper-slide img:hover {
    filter: none;
    opacity: 1
}

.clients .swiper-wrapper {
    height: auto
}

.clients .swiper-pagination {
    margin-top: 20px;
    position: relative
}

.clients .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    opacity: 1;
    background-color: color-mix(in srgb,var(--default-color),transparent 80%)
}

.testimonials .testimonial-item {
    background-color: var(--surface-color);
    box-shadow: 0 2px 30px rgba(0,0,0,.08);
    padding: 30px;
    position: relative;
    height: 100%
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50px;
    border: 6px solid var(--background-color);
    float: left;
    margin: 0 10px 0 0
}

.testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0 5px
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: color-mix(in srgb,var(--default-color),transparent 20%);
    margin: 0
}

.testimonials .testimonial-item .stars {
    margin: 10px 0
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px
}

.testimonials .testimonial-item .quote-icon-left,.testimonials .testimonial-item .quote-icon-right {
    color: color-mix(in srgb,var(--accent-color),transparent 50%);
    font-size: 26px;
    line-height: 0
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1,-1)
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 15px 0 0;
    padding: 0
}

.stats .stats-item {
    padding: 0 30px 30px;
    width: 100%
}

.stats .stats-item span {
    color: var(--heading-color);
    font-size: 42px;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative
}

.stats .stats-item span:after {
    content: "\F4FE";
    font-family: bootstrap-icons!important;
    position: absolute;
    display: block;
    top: 3px;
    right: -35px;
    margin: auto;
    font-size: 42px
}

.stats .stats-item p {
    color: color-mix(in srgb,var(--default-color),transparent 40%);
    padding: 0;
    margin: 0;
    font-weight: 500;
    position: relative
}

.stats .stats-item p::after {
    position: absolute;
    right: 0;
    top: 0
}

.services .service-card {
    height: 100%;
    padding: 24px;
    background: var(--surface-color);
    border-radius: 10px;
    transition: .3s;
    display: flex;
    align-items: center
}

.services .service-card:hover {
    box-shadow: 0 0 15px rgba(0,0,0,.08)
}

.pricing .pricing-card.popular,.services .service-card:hover .icon {
    background: var(--accent-color);
    color: var(--contrast-color)
}

.services .service-card:hover .read-more {
    color: color-mix(in srgb,var(--accent-color),transparent 25%)
}

.services .service-card .icon {
    width: 200px;
    height: 160px;
    min-width: 200px;
    min-height: 160px;
    margin-right: 30px;
    background: color-mix(in srgb,var(--accent-color),transparent 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--accent-color);
    transition: .3s;
    line-height: 1;
    overflow: hidden
}

.pricing .pricing-card .popular-badge,.pricing .pricing-card.popular .btn-light {
    background: var(--contrast-color);
    color: var(--accent-color)
}

.services .service-card .icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center
}

.services .service-card h4 {
    margin-bottom: 10px;
    color: var(--ns-aqua-heading)
}

.services .service-card .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color);
    font-weight: 500;
    transition: .3s
}

.services .service-card .read-more i {
    font-size: 14px;
    transition: transform .3s
}

.services .service-card .read-more:hover i {
    transform: translateX(5px)
}

.pricing .pricing-card {
    height: 100%;
    padding: 2rem;
    background: var(--surface-color);
    border-radius: 1rem;
    transition: .3s;
    position: relative
}

.pricing .pricing-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.1)
}

.pricing .pricing-card.popular .btn-light:hover {
    background: color-mix(in srgb,var(--contrast-color),transparent 10%)
}

.pricing .pricing-card .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: .5rem 1rem;
    border-radius: 2rem;
    font-size: .875rem;
    font-weight: 600;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08)
}

.pricing .pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem
}

.pricing .pricing-card .price {
    margin-bottom: 1.5rem
}

.pricing .pricing-card .price .currency {
    font-size: 1.5rem;
    font-weight: 600;
    vertical-align: top;
    line-height: 1
}

.pricing .pricing-card .price .amount {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1
}

.pricing .pricing-card .price .period {
    font-size: 1rem;
    color: color-mix(in srgb,var(--default-color),transparent 40%)
}

.pricing .pricing-card .description {
    margin-bottom: 2rem;
    font-size: .975rem
}

.pricing .pricing-card h4 {
    font-size: 1.125rem;
    margin-bottom: 1rem
}

.pricing .pricing-card .features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem
}

.pricing .pricing-card .features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem
}

.pricing .pricing-card .features-list li i {
    color: var(--accent-color);
    margin-right: .75rem;
    font-size: 1.25rem
}

.pricing .pricing-card .btn {
    width: 100%;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 500;
    border-radius: 50px
}

.pricing .pricing-card .btn.btn-primary {
    background: var(--accent-color);
    border: none;
    color: var(--contrast-color)
}

.pricing .pricing-card .btn.btn-primary:hover {
    background: color-mix(in srgb,var(--accent-color),transparent 15%)
}

.faq .faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--heading-color)
}

.faq .faq-description {
    font-size: 1rem;
    color: var(--default-color);
    margin-bottom: 2rem
}

.faq .faq-container .faq-item {
    background-color: var(--surface-color);
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden
}

.faq .faq-container .faq-item h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0 30px 0 0;
    transition: .3s;
    cursor: pointer;
    display: flex;
    align-items: center
}

.faq .faq-container .faq-item h3 .num {
    color: var(--accent-color);
    padding-right: 5px
}

.faq .faq-container .faq-item .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: .3s ease-in-out;
    visibility: hidden;
    opacity: 0
}

.faq .faq-container .faq-item .faq-content p {
    margin-bottom: 0;
    overflow: hidden
}

.faq .faq-container .faq-item .faq-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    line-height: 0;
    transition: .3s;
    cursor: pointer
}

.faq .faq-container .faq-active .faq-content {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    padding-top: 10px
}

.faq .faq-container .faq-active .faq-toggle {
    transform: rotate(90deg);
    color: var(--accent-color)
}

.call-to-action-2 {
    padding: 80px 0
}

.call-to-action-2 .container {
    position: relative;
    z-index: 3
}

.call-to-action-2 h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--default-color)
}

.call-to-action-2 .cta-btn {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 50px;
    transition: .5s;
    margin: 10px;
    border: 2px solid color-mix(in srgb,var(--contrast-color),transparent 30%);
    color: var(--contrast-color)
}

.call-to-action-2 .cta-btn:hover {
    border-color: var(--contrast-color)
}

.contact .info-box {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 3rem;
    border-radius: 1rem;
    height: 100%
}

.contact .contact-form,.service-details .service-box,.service-details .services-list {
    background-color: var(--surface-color)
}

.contact .info-box h3 {
    color: var(--contrast-color);
    font-size: 2rem;
    margin-bottom: 1rem
}

.contact .info-box p {
    opacity: .8;
    margin-bottom: 2rem
}

.contact .info-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem
}

.button-group,.service-details .services-img {
    margin-bottom: 20px
}

.contact .info-item .icon-box {
    width: 3.5rem;
    height: 3.5rem;
    background-color: color-mix(in srgb,var(--contrast-color),transparent 85%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .3s
}

.contact .info-item .icon-box i {
    font-size: 1.5rem;
    color: var(--contrast-color)
}

.contact .info-item:hover .icon-box {
    background-color: color-mix(in srgb,var(--contrast-color),transparent 70%)
}

.contact .info-item .content h4 {
    color: var(--contrast-color);
    font-size: 1.25rem;
    margin-bottom: .5rem;
    font-weight: 700
}

.contact .info-item .content p {
    margin-bottom: .25rem;
    font-size: .95rem
}

.contact .contact-form {
    padding: 30px 24px;
    border-radius: 1rem;
    height: 100%;
    box-shadow: 0 0 25px rgba(0,0,0,.05)
}

.contact .contact-form .form-control,.contact .contact-form .form-select {
    padding: 12px 20px;
    border-color: color-mix(in srgb,var(--default-color),transparent 90%);
    border-radius: 5px;
    background-color: color-mix(in srgb,var(--surface-color) 90%,#fff 5%);
    color: var(--default-color)
}

.contact .contact-form .form-control:focus,.contact .contact-form .form-select:focus {
    box-shadow: none;
    border-color: var(--accent-color)
}

.contact .contact-form .form-control::placeholder,.contact .contact-form .form-select::placeholder {
    color: color-mix(in srgb,var(--default-color),transparent 50%)
}

.service-details .service-box {
    padding: 20px;
    box-shadow: 0 2px 20px rgba(0,0,0,.1)
}

.service-details .service-box h4 {
    font-size: 20px;
    font-weight: 700;
    border-bottom: 2px solid color-mix(in srgb,var(--default-color),transparent 92%);
    padding-bottom: 15px;
    margin-bottom: 15px
}

.service-details .help-box,.service-details .services-list a.active {
    background-color: var(--accent-color);
    color: var(--contrast-color)
}

.service-details .services-list a {
    color: color-mix(in srgb,var(--default-color),transparent 20%);
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-top: 15px;
    transition: .3s
}

.service-details .services-list a:first-child {
    margin-top: 0
}

.service-details .services-list a i {
    font-size: 16px;
    margin-right: 8px;
    color: var(--accent-color)
}

.service-details .services-list a:hover {
    background-color: color-mix(in srgb,var(--accent-color),transparent 95%);
    color: var(--accent-color)
}

.service-details .download-catalog a {
    color: var(--default-color);
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: .3s;
    border-top: 1px solid color-mix(in srgb,var(--default-color),transparent 90%)
}

.service-details .download-catalog a:first-child {
    border-top: 0;
    padding-top: 0
}

.service-details .download-catalog a:last-child {
    padding-bottom: 0
}

.service-details .download-catalog a i {
    font-size: 24px;
    margin-right: 8px;
    color: var(--accent-color)
}

.service-details .help-box {
    margin-top: 30px;
    padding: 30px 15px
}

.service-details h3 {
    font-size: 26px;
    font-weight: 700
}

.service-details p {
    font-size: 15px
}

.service-details ul {
    list-style: none;
    padding: 0;
    font-size: 15px
}

.service-details ul li {
    padding: 5px 0;
    display: flex;
    align-items: center
}

.service-details ul i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color)
}

.swiper {
    padding: 0 0 30px
}

.swiper-pagination {
    bottom: 0
}

.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom,0);
    top: var(--swiper-pagination-top,auto);
    left: 0;
    width: 100%
}

.swiper-button-next,.swiper-button-prev {
    background: 0 0;
    width: 55px;
    height: 55px;
    line-height: 53px;
    margin-top: -30px;
    text-align: center;
    border: 2px solid #d4d3d3;
    border-radius: 55px;
    opacity: 1;
    visibility: visible;
    transition: .3s
}

.btn-call,.btn-whatsapp {
    min-height: 45px;
    min-width: 45px;
    height: 45px;
    width: 45px;
    border-radius: 5;
    color: #fff
}

.btn-call,.btn-whatsapp,.sticky-icon a i {
    transition: .5s;
    text-align: center
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25d366
}

.btn-call,.sticky-icon a {
    display: flex;
    align-items: center
}

.btn-call,.dial {
    background-color: #00238d
}

.btn-whatsapp:hover {
    background-color: #148f41;
    color: #fff
}

.btn-call {
    justify-content: center
}

.btn-call:hover {
    background-color: #02027c;
    color: #fff
}

.sticky-icon {
    z-index: 1;
    position: fixed;
    top: 50%;
    right: 0;
    width: 160px;
    display: flex;
    flex-direction: column
}

.phone-btn1,.phone-btn2 {
    bottom: 4.8rem;
    z-index: 999;
    color: #fff;
    transition: .6s;
    box-shadow: 0 0 0 .2rem rgb(254 6 0 / 48%);
    animation: .6s linear infinite cc-calto-action-ripple;
    width: 4rem!important;
    height: 4rem;
    position: fixed;
    text-decoration: none
}

.sticky-icon a {
    transform: translate(100px,0);
    border-radius: 50px 0 0 50px;
    text-align: left;
    margin: 2px;
    text-decoration: none;
    padding: 10px;
    font-size: 18px;
    transition: .8s;
    gap: 10px
}

.phone-btn1,.sticky-icon a i {
    align-items: center;
    border-radius: 50%;
    display: flex
}

.sticky-icon a:hover {
    color: #fff;
    transform: translate(0,0)
}

.sticky-icon a:hover i {
    transform: rotate(360deg)
}

.dial {
    color: #fff
}

.Youtube {
    background-color: #fa0910;
    color: #fff
}

.Twitter {
    background-color: #53c5ff;
    color: #fff
}

.whatsapp {
    background-color: #25d366;
    color: #fff
}

.envelope {
    background-color: #bb001b;
    color: #fff
}

.sticky-icon a i {
    justify-content: center;
    background-color: #fff;
    min-height: 40px;
    min-width: 40px;
    height: 40px;
    width: 40px;
    color: #000;
    line-height: 40px
}

.sticky-icon a i.bi-telephone {
    background-color: #fff;
    color: #00238d
}

.sticky-icon a i.bi-envelope {
    background-color: #fff;
    color: #bb001b
}

.sticky-icon a i.bi-whatsapp {
    background-color: #fff;
    color: #25d366
}

.sticky-icon a i.fa-youtube {
    background-color: #fff;
    color: #fa0910
}

.sticky-icon a i.fa-twitter {
    background-color: #fff;
    color: #53c5ff
}

.phone-btn1 {
    right: 9px!important;
    justify-content: center
}

.phone-btn1:hover,.phone-btn2:hover,.phone-btn:focus {
    color: #fff!important;
    box-shadow: 0 0 16px 3px #fff;
    transform: translateY(-10px);
    transition: .6s;
    text-decoration: none
}

.phone-btn2 {
    left: 9px!important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

@-webkit-keyframes cc-calto-action-ripple {
    0% {
        -webkit-box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 0 rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2);
        box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 0 rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2)
    }

    100% {
        -webkit-box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2),0 0 0 20px transparent;
        box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2),0 0 0 20px transparent
    }
}

@keyframes cc-calto-action-ripple {
    0% {
        -webkit-box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 0 rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2);
        box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 0 rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2)
    }

    100% {
        -webkit-box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2),0 0 0 20px transparent;
        box-shadow: 0 4px 10px rgba(236,139,0,.2),0 0 0 5px rgba(236,139,0,.2),0 0 0 10px rgba(236,139,0,.2),0 0 0 20px transparent
    }
}

section.about.abt {
    padding: 15px 13px;
    z-index: 999!important
}

.popup-container {
    position: fixed;
    top: 53%;
    right: -350px;
    width: 260px;
    background-color: #f9f9f9;
    box-shadow: -3px 3px 10px rgba(0,0,0,.2);
    padding: 20px;
    z-index: 9999;
    transition: right .5s ease-in-out;
    border-radius: 8px 0 0 8px
}

.popup-container.show {
    right: 0
}

.popup-container h3 {
    color: #007bff;
    font-size: 23px;
    margin: 0
}

.popup-container p {
    font-size: 14px
}

.popup-container button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px
}

.popup-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 18px;
    cursor: pointer;
    color: #888
}

@media (max-width: 600px) {
    .popup-container {
        width:90%;
        right: -100%;
        top: 57%
    }

    .popup-container.show {
        right: 5%
    }
}

.service-section {
    background-color: #002e76;
    color: #fff;
    padding: 60px 20px
}

.service-content {
    text-align: center
}

.service-content h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #fff
}

.service-content .phone {
    font-weight: 700;
    color: #fff
}

.service-content p {
    font-size: 1rem;
    margin-bottom: 1px;
    color: #fff
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.btn {
    background-color: #007aff;
    color: #fff;
    padding: 15px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color .3s
}

.btn:hover {
    background-color: #005fcc
}

.stars {
    font-size: 24px;
    color: gold
}

@media (min-width: 600px) {
    .button-group {
        flex-direction:row;
        justify-content: center
    }

    .btn {
        width: 180px;
        text-align: center
    }
}