/** Shopify CDN: Minification failed

Line 1020:22 The "+" operator only works if there is whitespace on both sides
Line 1020:29 The "+" operator only works if there is whitespace on both sides
Line 3038:4 Expected percentage but found "0"
Line 3050:4 Expected percentage but found "0"
Line 4264:4 Expected percentage but found "0"
Line 4300:4 Expected percentage but found "0"
Line 4330:4 Expected percentage but found "0"
Line 4419:4 Expected percentage but found "0"
Line 4429:4 Expected percentage but found "0"
Line 4861:4 Expected percentage but found "0"
... and 5 more hidden warnings

**/
.app-two-feature-two .feature-content-wrap h4,
.comparison-table th,
.feature-section .feature-subtitle h5,
.live_book_btn {
    text-transform: uppercase
}

.about-content-right,
.dropdown-info,
.img-with-shape-wrap,
.roted-img-wrap,
.story-item,
.width-full-3 .dropdown-grid-item.last-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

:root {
    --bs-primary-soft: #ceddff;
    --bs-primary-light: #3a75ff;
    --bs-primary: #175cff;
    --bs-primary-dark: #0048f0;
    --bs-secondary-light: #dcdcdf;
    --bs-secondary: #c0c0c5;
    --bs-secondary-dark: #0b163f;
    --bs-success-soft: #d8f1b1;
    --bs-success-light: #c1e787;
    --bs-success: #72bf4f;
    --bs-success-dark: #7bbb1b;
    --bs-info-soft: #dcf0ff;
    --bs-info-light: #83cbff;
    --bs-info: #50b5ff;
    --bs-warning-soft: #fff2d8;
    --bs-warning-light: #ffcf70;
    --bs-warning: #ffb116;
    --bs-warning-dark: #fba700;
    --bs-danger-soft: #fcdde1;
    --bs-danger-light: #f68692f;
    --bs-danger: #f25767;
    --bs-danger-dark: #ee283c;
    --bs-purple: #442772;
    --bs-dark-soft: #c9c7f7;
    --bs-dark-light: #071c4d;
    --bs-dark: #0b163f;
    --bs-dark-dark: #010e2b;
    --body-color: #4C4C4C;
    --bs-light: #f7f9fc
}

html, body {  overflow-x: hidden !important;  width: 100%;  }

.lead {
    font-weight: 400
}

.watch-now-btn {
    font-size: 14px;
    color: var(--bs-secondary-dark);
    text-align: center
}

.watch-now-btn i {
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 12px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border: 2px solid var(--bs-light);
    margin-right: 10px;
    border-radius: 50%;
    color: var(--bs-light)
}

#thumb_img a.black.active .checkbox-check .ng-star-inserted,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-gradient h1,
.bg-gradient h2,
.bg-gradient h3,
.bg-gradient h4,
.bg-gradient h5,
.bg-gradient h6,
.bg-light .bg-dark h2,
.bg-light .bg-dark h3,
.bg-light .bg-dark h4,
.bg-light .bg-dark h5,
.bg-light .bg-dark h6,
.bg-light .bg-gradient h2,
.bg-light .bg-gradient h3,
.bg-light .bg-gradient h4,
.bg-light .bg-gradient h5,
.bg-light .bg-gradient h6,
.bg-light>.bg-dark h1,
.bg-light>.bg-gradient h1,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-purple h1,
.bg-purple h2,
.bg-purple h3,
.bg-purple h4,
.bg-purple h5,
.bg-purple h6,
.color span,
.footer-top.bg-dark .footer-nav-list li a:hover,
.footer-top.bg-gradient .footer-nav-list li a:hover,
.office-info h5,
.watch-now-btn:hover {
    color: var(--bs-white)
}

.cta-card .h5,
.tab-content .feature-tab-info h3,
.watch-now-btn:hover i {
    color: var(--bs-dark-light)
}

.ptb-120 {
    padding: 120px 0
}

.ptb-100 {
    padding: 100px 0
}

.ptb-60 {
    padding: 60px 0
}

.ptb-50 {
    padding: 50px 0
}

.pl-100 {
    padding-left: 100px
}

.pr-100 {
    padding-right: 100px
}

.p-100 {
    padding: 100px
}

.p-50 {
    padding: 50px
}

.pt-120 {
    padding-top: 120px
}

.pt-80 {
    padding-top: 80px
}

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

.pb-30 {
    padding-bottom: 30px
}

.pb-40 {
    padding-bottom: 40px
}

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

.pb-80 {
    padding-bottom: 80px
}

.pb-100 {
    padding-bottom: 100px
}

.pb-120 {
    padding-bottom: 120px
}

.page-header,
.ptb-40 {
    padding: 40px 0
}

.pt-20 {
    padding-top: 20px
}

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

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

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

.pt-60 {
    padding-top: 60px
}

.pb-60 {
    padding-bottom: 60px
}

.mt--100 {
    margin-top: -100px
}

.mt-100 {
    margin-top: 100px
}

.mt-40 {
    margin-top: 40px
}

.mt-60 {
    margin-top: 60px
}

.z-2 {
    z-index: 2
}

.z-5 {
    z-index: 5
}

.z-10 {
    z-index: 10
}

.z--1 {
    z-index: -1
}

.top--40 {
    top: -40px !important
}

.top--100 {
    top: -100px !important
}

.bottom--40 {
    bottom: -40px !important
}

.bottom--100 {
    bottom: -100px !important
}

.right--40 {
    right: -40px !important
}

.right-0 {
    right: 0
}

.left-0 {
    left: 0
}

.left--40 {
    left: -40px !important
}

.left--100 {
    left: -100px !important
}

.right--100 {
    right: -100px !important
}

.left-30 {
    left: 30%
}

.left-5 {
    left: 5%
}

.right-5 {
    right: 5%
}

.mw-60 {
    max-width: 60% !important
}

.icon-sm {
    font-size: 25px
}

.btn,
.link-with-icon,
.register-form label:not(.form-check-label) {
    font-size: 15px;
    font-weight: 500
}

.color {
    display: block;
    min-height: 50px;
    padding: 1rem
}

.bg-primary-soft {
    background-color: var(--bs-primary-soft)
}

.bg-primary-light {
    background-color: var(--bs-primary-light)
}

.bg-primary {
    background-color: var(--bs-primary) !important
}

.bg-primary-dark {
    background-color: var(--bs-primary-dark)
}

.bg-info-soft {
    background-color: var(--bs-info-soft)
}

.bg-info-light {
    background-color: var(--bs-info-light)
}

.bg-info {
    background-color: var(--bs-info) !important
}

.bg-info-dark {
    background-color: var(--bs-info-dark)
}

.bg-success-soft {
    background-color: var(--bs-success-soft)
}

.bg-success-light {
    background-color: var(--bs-success-light)
}

.bg-success {
    background-color: var(--bs-success) !important
}

.bg-success-dark {
    background-color: var(--bs-success-dark)
}

.bg-warning-soft {
    background-color: var(--bs-warning-soft)
}

.bg-warning-light {
    background-color: var(--bs-warning-light)
}

.bg-warning {
    background-color: var(--bs-warning) !important
}

.bg-warning-dark {
    background-color: var(--bs-warning-dark)
}

.bg-danger-soft {
    background-color: var(--bs-danger-soft)
}

.bg-danger-light {
    background-color: var(--bs-danger-light)
}

.bg-danger {
    background-color: var(--bs-danger) !important
}

.bg-danger-dark {
    background-color: var(--bs-danger-dark)
}

#thumb_img a.gold .checkbox-check,
#thumb_img a.silver .checkbox-check,
.bg-dark-soft {
    background-color: var(--bs-dark-soft)
}

.bg-dark-light {
    background-color: var(--bs-dark-light)
}

.bg-dark {
    background-color: var(--bs-dark) !important
}

.bg-dark-dark {
    background-color: var(--bs-dark-dark)
}

.bg-purple {
    background-color: var(--bs-purple) !important
}

.bg-secondary-light {
    background-color: var(--bs-secondary-light) !important
}

.bg-secondary {
    background-color: var(--bs-secondary) !important
}

.bg-secondary-dark {
    background-color: var(--bs-secondary-dark)
}

.bg-custom-light {
    background-color: rgba(255, 255, 255, .1)
}

.primary-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-dark)), to(var(--bs-primary))) !important;
    background: linear-gradient(90deg, var(--bs-dark), var(--bs-primary)) !important
}

.info-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-primary)), to(var(--bs-info))) !important;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info)) !important
}

.success-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-success)), to(var(--bs-success-dark))) !important;
    background: linear-gradient(90deg, var(--bs-success), var(--bs-success-dark)) !important
}

.warning-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-warning-light)), to(var(--bs-warning-dark))) !important;
    background: linear-gradient(90deg, var(--bs-warning-light), var(--bs-warning-dark)) !important
}

.danger-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-danger-light)), to(var(--bs-danger-dark))) !important;
    background: linear-gradient(90deg, var(--bs-danger-light), var(--bs-danger-dark)) !important
}

.dark-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-primary)), to(var(--bs-dark))) !important;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-dark)) !important
}

.secondary-bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(var(--bs-secondary-light)), to(var(--bs-secondary-dark))) !important;
    background: linear-gradient(90deg, var(--bs-secondary-light), var(--bs-secondary-dark)) !important
}

.bg-gradient {
    background: -webkit-gradient(linear, left top, right top, from(#021048), to(#1e38a3)) !important;
    background: linear-gradient(90deg, #021048, #1e38a3) !important
}

.quick-support a:hover,
.support-article-tab a:hover,
.support-article-tab button.nav-link:hover,
.text-primary {
    color: var(--bs-primary) !important
}

.border-primary {
    border-color: var(--bs-primary) !important
}

.text-dark {
    color: var(--bs-dark) !important
}

.border-dark {
    border-color: var(--bs-dark) !important
}

.navbar-light .main-menu li.active a.nav-link,
.navbar-light.sticky-header.affix .main-menu li.active a.nav-link,
.text-success {
    color: var(--bs-success) !important
}

.text-success-dark {
    color: var(--bs-success-dark) !important
}

.border-success {
    border-color: var(--bs-success) !important
}

.text-warning {
    color: var(--bs-warning) !important
}

.border-warning {
    border-color: var(--bs-warning) !important
}

.text-danger {
    color: var(--bs-danger) !important
}

.border-danger {
    border-color: var(--bs-danger) !important
}

.border-light {
    border-color: rgba(101, 101, 101, .1) !important
}

.link-with-icon {
    display: inline-block;
    color: var(--body-color)
}

.link-with-icon i {
    -webkit-transition: .2s;
    transition: .2s;
    padding-left: 4px
}

.btn,
.dropdown-grid-item a span {
    -webkit-transition: .3s ease-in-out
}

.link-with-icon:hover i {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
    margin-left: 3px
}

.bg-dark .copyright-text p,
.bg-dark .footer-social-list li a,
.bg-dark .link-with-icon,
.bg-gradient .copyright-text p,
.bg-gradient .footer-social-list li a,
.bg-gradient .link-with-icon,
.navbar-light .main-menu li a.nav-link {
    color: var(--bs-secondary-dark)
}

.btn {
    transition: .3s ease-in-out;
    padding: .65rem 1.75rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: .375rem;
    border: 2px solid transparent
}

.article-category a,
.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo .precio .ruppes-icon,
.coupon-alert small,
.fw-medium,
.page-link,
.read-more-link {
    font-weight: 600
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary)
}

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

.btn-group-lg>.btn,
.btn-sm,
.page-link {
    padding: .5rem 1.25rem;
    font-size: .875rem;
    line-height: 1.5
}

.btn-group-lg>.btn,
.btn-lg {
    padding: 1rem 1.875rem;
    font-size: 1rem;
    line-height: 1.5
}

.btn-xl {
    padding: 1.5rem 2rem;
    font-size: 1.5rem;
    line-height: 1.5
}

.button-style>.btn {
    margin: .5rem .5rem .5rem 0
}

.btn-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0
}

.btn-primary {
    color: var(--bs-white);
    -webkit-box-shadow: 0 11px 18px -8px rgba(23, 92, 255, .6);
    box-shadow: 0 11px 18px -8px rgba(23, 92, 255, .6)
}

.btn-soft-primary {
    color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
    border-color: var(--bs-primary-soft)
}

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary)
}

.btn-primary:hover {
    color: var(--bs-white);
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-outline-primary:hover,
.btn-soft-primary:hover {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary)
}

.btn-info,
.btn-outline-info:hover,
.btn-soft-info:hover {
    color: var(--bs-white);
    background-color: var(--bs-info);
    border-color: var(--bs-info)
}

.btn-soft-info {
    color: var(--bs-info);
    background-color: var(--bs-info-soft);
    border-color: var(--bs-info-soft)
}

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info)
}

.btn-info:hover {
    color: var(--bs-white);
    background-color: var(--bs-info-dark);
    border-color: var(--bs-info-dark)
}

.btn-outline-success:hover,
.btn-soft-success:hover,
.btn-success {
    color: var(--bs-white);
    background-color: var(--bs-success);
    border-color: var(--bs-success)
}

.btn-soft-success {
    color: var(--bs-success);
    background-color: var(--bs-success-soft);
    border-color: var(--bs-success-soft)
}

.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success)
}

.btn-success:hover {
    color: var(--bs-white);
    background-color: var(--bs-success-dark);
    border-color: var(--bs-success-dark)
}

.btn-outline-warning:hover,
.btn-soft-warning:hover,
.btn-warning {
    color: var(--bs-white);
    background-color: var(--bs-warning);
    border-color: var(--bs-warning)
}

.btn-soft-warning {
    color: var(--bs-warning);
    background-color: var(--bs-warning-soft);
    border-color: var(--bs-warning-soft)
}

.btn-outline-warning {
    color: var(--bs-warning);
    border-color: var(--bs-warning)
}

.btn-warning:hover {
    color: var(--bs-white);
    background-color: var(--bs-warning-dark);
    border-color: var(--bs-warning-dark)
}

.btn-danger,
.btn-outline-danger:hover,
.btn-soft-danger:hover {
    color: var(--bs-white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger)
}

.btn-soft-danger {
    color: var(--bs-danger);
    background-color: var(--bs-danger-soft);
    border-color: var(--bs-danger-soft)
}

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger)
}

.btn-danger:hover {
    color: var(--bs-white);
    background-color: var(--bs-danger-dark);
    border-color: var(--bs-danger-dark)
}

.btn-dark,
.btn-outline-dark:hover,
.btn-soft-dark:hover {
    color: var(--bs-white);
    background-color: var(--bs-dark);
    border-color: var(--bs-dark)
}

.btn-soft-dark {
    color: var(--bs-dark);
    background-color: var(--bs-dark-soft);
    border-color: var(--bs-dark-soft)
}

.btn-secondary,
.divider-bar {
    background-color: var(--bs-secondary)
}

.btn-outline-dark {
    color: var(--bs-dark);
    border-color: var(--bs-dark)
}

.btn-dark:hover {
    color: var(--bs-white);
    background-color: var(--bs-dark-dark);
    border-color: var(--bs-dark-dark)
}

.btn-outline-light {
    color: var(--bs-secondary-dark);
    border-color: var(--bs-secondary-dark)
}

.btn-secondary {
    color: var(--bs-dark);
    border-color: var(--bs-secondary)
}

.btn-secondary:hover {
    color: var(--bs-white);
    background-color: var(--bs-secondary-dark);
    border-color: var(--bs-secondary-dark)
}

.avatar-name,
.company-overview ul li,
.read-more-link {
    font-size: 15px
}

.facebook-btn,
.google-btn,
.process-card-two,
.promo-border-hover,
.quick-support a,
.read-more-link i,
.support-article-title,
.team-img img,
.transition-base {
    -webkit-transition: .3s;
    transition: .3s
}

.read-more-link:hover i,
.support-article-list li a:hover .read-more-link i {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
    margin-left: 6px
}

.facebook-btn:hover,
.google-btn:hover {
    background: var(--bs-primary-soft) !important
}

.divider-bar {
    width: 100%;
    min-height: 1px
}

.divider-text {
    width: 60px;
    min-width: 60px;
    line-height: 1.056em
}

.fw-bold {
    font-weight: 800 !important
}

.rounded-custom {
    border-radius: 1rem !important
}

.bg-dark li,
.bg-dark p,
.bg-dark span,
.bg-gradient li,
.bg-gradient p,
.bg-gradient span,
.bg-primary li,
.bg-primary p,
.bg-primary span,
.bg-purple li,
.bg-purple p,
.bg-purple span,
.breadcrumb-item.active {
    color: var(--bs-secondary)
}

.bg-light h1,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
    color: initial
}

.bg-white li,
.bg-white p,
.bg-white span,
.footer-light .footer-single-col h6,
.support-article-list li a:hover p,
.testimonial-tab-menu.nav-pills .nav-link.active {
    color: var(--body-color)
}

.text-white-60 {
    color: rgba(255, 255, 255, .6) !important
}

.text-white-70 {
    color: rgba(255, 255, 255, .7) !important
}

.text-white-80 {
    color: rgba(255, 255, 255, .8) !important
}

.text-white-90 {
    color: rgba(255, 255, 255, .9) !important
}

.input-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-dark-light)
}

.contact-form .form-select,
.custom-select,
.drop-title,
.form-control {
    color: var(--body-color);
    font-weight: 500
}

input[type]::-webkit-input-placeholder,
select.custom-select,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #7e8086 !important;
    font-size: 14px;
    font-weight: 500
}

input[type]:-moz-placeholder,
select.custom-select,
select:-moz-placeholder,
textarea:-moz-placeholder {
    color: #7e8086;
    font-size: 14px;
    font-weight: 500
}

input[type]::-moz-placeholder,
select.custom-select,
select::-moz-placeholder,
textarea::-moz-placeholder {
    color: #7e8086;
    font-size: 14px;
    font-weight: 500
}

input[type]:-ms-input-placeholder,
select.custom-select,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #7e8086;
    font-size: 14px;
    font-weight: 500
}

select.form-select {
    background-image: url(../img/dropdown-arrow.svg)
}

select:invalid {
    color: #7e8086
}

.custom-select,
.form-control {
    font-size: 15px;
    display: block;
    width: 100%;
    height: 44px;
    padding: .65rem 1rem;
    background-clip: padding-box;
    border: 0;
    border-bottom: 2px solid rgba(0, 0, 0, .12);
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: .375rem
}

.form-control.input-newsletter,
.hero-subscribe-form input.form-control,
.subscribe-form input.form-control {
    border: 2px solid rgba(0, 0, 0, .12);
    height: calc(1.6em+1.5rem+2px);
    padding: .75rem 1rem
}

.contact-form .form-control,
.contact-form .form-select {
    border-bottom: 0;
    border: 2px solid rgba(0, 0, 0, .12)
}

.contact-form .form-select {
    font-size: 14.5px;
    display: block;
    height: 44px;
    padding: .4rem 1rem;
    border-radius: .375rem;
    cursor: pointer
}

.contact-form .form-select:focus {
    box-shadow: none
}

.custom-select:focus,
.form-control:focus {
    color: var(--bs-dark);
    background-color: var(--bs-white);
    border-color: #bebebf;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.subscribe-feature-list li span {
    margin: 0 15px;
    font-size: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.subscribe-feature-list li span i {
    font-size: 16px
}

.bg-dark .subscribe-feature-list li span i {
    color: var(--bs-secondary-dark) !important
}

.form-check-label {
    font-size: 13px;
    line-height: 0
}

.sign-up-in-section {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.sticky-sidebar {
    position: sticky;
    top: 100px;
    -webkit-transition: .3s;
    transition: .3s
}

#preloader,
.affix {
    position: fixed;
    top: 0;
    left: 0
}

.affix,
.sticky-header {
    -webkit-transition: .3s
}

.style-guide .bg-primary-soft .style-guide-heading h2 {
    margin-bottom: 0;
    font-size: 1.75rem
}

.sticky-header {
    padding: 10px 0;
    transition: .3s
}

.affix {
    margin: auto;
    width: 100%;
    z-index: 9999;
    -webkit-animation: .3s ease-in-out fadeInDown;
    animation: .3s ease-in-out fadeInDown;
    background: var(--bs-dark);
    padding: 8px 0;
    transition: .3s;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.demo-list,
.img-overlay-list li i {
    margin-right: 12px;
    text-align: center
}

.dropdown-grid,
.loading-bar,
.navbar-light.sticky-header.affix {
    background: var(--bs-white)
}

.dropdown-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto
}

.dropdown-grid.width-half {
    grid-template-columns: 1fr;
    width: 320px
}

.dropdown-grid.width-full {
    grid-template-columns: 1fr 1fr;
    width: 650px
}

.width-full-3 {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 800px
}

.screen-grid,
.story-grid {
    grid-template-rows: auto auto
}

.width-full-3 .dropdown-grid-item {
    width: 250px
}

.dropdown-grid-item {
    width: auto;
    padding: 20px 10px
}

.width-full-3 .dropdown-grid-item.last-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: auto;
    grid-column-start: span 2
}

.radius-right-side {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem
}

.adsBannerSwiper,
.btn,
.color,
.contenedorCards,
.main-menu li.nav-item,
.process-icon-2,
li.setup-process-item:not(:last-child) {
    position: relative
}

.dropdown-menu {
    right: auto;
    left: 50% !important;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.main-menu li.nav-item .dropdown-menu:before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 20px;
    height: 20px;
    -webkit-transform: translate(-50%, 0) rotate(-315deg);
    transform: translate(-50%, 0) rotate(-315deg);
    border-radius: 3px;
    background-color: var(--bs-white);
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.footer-nav-list li a:hover,
.footer-top.bg-dark .footer-nav-list li a,
.footer-top.bg-dark .footer-single-col p,
.footer-top.bg-gradient .footer-single-col p,
.main-menu li.nav-item:hover .dropdown-menu:before,
.office-address:hover .office-overlay,
.testimonialSwiper .swiper-slide.swiper-slide-next,
.whatmakeSwiper .swiper-slide.swiper-slide-active,
.whatmakeSwiper .swiper-slide.swiper-slide-next {
    opacity: 1
}

.main-menu li a.nav-link {
    padding: .85rem 1rem;
    font-size: 15px;
    font-weight: 500;
    position: relative
}

.navbar-light .main-menu li.active a.nav-link::after {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    margin: 0 auto;
    background: var(--bs-success);
    transition: width .3s
}

.accordion-list li a:hover,
.article-title:hover,
.avatar-name:hover,
.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text h3,
.blog-grid .featured-post-wrapper .blog-item .blog-content:hover .blog-text h3,
.blog-grid .posts-wrapper .blog-item .blog-content:hover .blog-text h3,
.copyright-text p a:hover,
.footer-light .footer-nav-list li.active a,
.offcanvas-body .main-menu li a.nav-link:hover,
.support-article-list li a:hover .support-article-title {
    color: var(--bs-primary)
}

.footer-light .footer-nav-list li.active a::after {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    margin: 0 auto;
    background: var(--bs-primary);
    transition: width .3s
}

.action-btns ul li:hover a i,
.action-btns ul li:hover a span,
.annual-salary-wrap h6,
.navbar-light .action-btns a.btn-link,
.navbar-light .main-menu li a.nav-link {
    color: var(--bs-dark)
}

.bg-dark .btn,
.bg-gradient .btn,
.blog-grid .featured-post-wrapper .blog-item .blog-content:hover,
.blog-grid .posts-wrapper .blog-item .blog-content:hover,
.coming-soon-section .btn,
.navbar-light.sticky-header.affix .btn {
    -webkit-box-shadow: none;
    box-shadow: none
}

.bg-dark .logo-color,
.bg-gradient .logo-color,
.footer-light .logo-white,
.moretext,
.moretext1,
.moretext2,
.moretext3,
.moretext4,
.navbar-light .navbar-brand img.logo-white,
.offcanvas-body .dropdown-grid-item.last-item,
.offcanvas-body .dropdown-grid-item:nth-child(2) .drop-heading,
.offcanvas-body .main-menu li.nav-item .dropdown-menu:before,
.read-more-state,
.support-faq .app-content-feature-wrap,
.work-process-list li:last-child .process-icon-2:after {
    display: none
}

#preloader,
.company-info-wrap,
.company-logo .logo,
.dropdown-grid-item a,
.dropdown-info,
.hero-screen-wrap,
.job-overview-list li,
.process-icon {
    display: -webkit-box;
    display: -ms-flexbox
}

.navbar-light .navbar-brand {
    padding-top: 0;
    padding-bottom: 0
}

.navbar-light .navbar-brand .logo.logo-color {
    max-width: 130px;
    width: 130px
}

.action-btns a.btn-link:hover,
.main-menu li a.nav-link:hover,
.single-product-link li:hover a {
    color: var(--bs-success)
}

.hover-link::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin: 0 auto;
    background: var(--bs-success);
    transition: width .3s
}

.hover-link.style-primary::after {
    background: var(--bs-primary)
}

.hover-link:hover::after {
    width: 50%;
    transition: width .3s
}

.dropdown-grid-item a {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    padding: .55rem 1rem !important;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px
}

.drop-heading {
    padding-left: 1rem;
    margin-bottom: 13px
}

.action-btns .call-btn .number p,
.ads-banner-icon-list .blur-box p,
.avatar-info span,
.bottom-header .media-body p,
.drop-title,
.job-time,
.overview-item span {
    font-size: 14px
}

.dropdown-grid-item a span {
    opacity: .8;
    font-size: 14px;
    transition: .3s ease-in-out
}

.dropdown-grid-item a:hover .drop-title,
.dropdown-grid-item a:hover span,
.footer-light .footer-nav-list li a:hover,
.work-process-list li:hover .process-icon-2 i {
    color: var(--bs-primary);
    opacity: 1
}

.demo-list {
    width: 32px;
    height: 32px;
    line-height: 32px
}

.dropdown-info {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.dropdown-info p {
    font-size: 13px;
    margin-bottom: 0
}

.offcanvas-header button.close-btn {
    background: var(--bs-danger-soft);
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    font-size: 18px;
    border-radius: 20px
}

.offcanvas-header button.close-btn i {
    line-height: 29px
}

.offcanvas-body .dropdown-toggle::after {
    content: '\f067';
    font-family: FontAwesome;
    font-weight: 400;
    position: absolute;
    right: 0;
    border: 0
}

.offcanvas-body .main-menu li a.nav-link {
    color: var(--body-color);
    padding: .5rem 1rem
}

.offcanvas-body .radius-right-side {
    border-top-right-radius: 0;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem
}

.offcanvas-body .dropdown-menu {
    position: relative;
    box-shadow: none !important;
    background-color: #f1f1f1 !important
}

.offcanvas-body .dropdown-grid {
    background-color: #f1f1f1 !important;
    display: block;
    width: auto
}

#preloader,
.client-logo-img li,
.feature-container img,
.happy_cust_banner .happy_cust_img img,
.integration-list li,
.offcanvas-body .dropdown-grid-item,
.setup-process-item {
    width: 100%
}

.offcanvas-body .dropdown-grid-item:first-child {
    padding-bottom: 0 !important
}

.offcanvas-body .dropdown-grid-item:nth-child(2) {
    padding-top: 0 !important
}

@media(max-width:1199px) {
    .nav.main-menu {
        display: block !important
    }
}

#preloader {
    height: 100vh;
    background-color: var(--bs-light);
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    z-index: 999999
}

.preloader-icon {
    width: 60px;
    height: 60px
}

.loading-bar {
    width: 120px;
    height: 3px;
    margin-top: 30px;
    position: relative;
    overflow: hidden
}

.loading-bar::before {
    content: '';
    width: 35px;
    height: 3px;
    background: var(--bs-primary);
    position: absolute;
    left: -34px;
    -webkit-animation: 1.5s infinite bluebar;
    animation: 1.5s infinite bluebar
}

@-webkit-keyframes bluebar {
    50% {
        left: 96px
    }
}

@keyframes bluebar {
    50% {
        left: 96px
    }
}

.section-heading {
    margin-bottom: 50px
}

.row-title.small {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important
}

.promo-icon i {
    line-height: normal
}

.card-bar {
    width: 100px;
    height: 10px;
    border-radius: 20px 0 0 20px
}

.promo-border-hover:hover {
    background: 0 0 !important;
    border-color: var(--bs-primary) !important
}

.contact-us-promo span {
    line-height: normal;
    margin-bottom: 20px
}

.app-two-single-feature {
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 30px 70px 0 rgba(0, 15, 56, .1);
    box-shadow: 0 30px 70px 0 rgba(0, 15, 56, .1);
    padding: 40px
}

.app-two-single-feature-icon i {
    border-radius: 10px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 25px;
    display: inline-block
}

.process-icon,
.video-bg-with-icon a {
    width: 80px;
    height: 80px;
    text-align: center
}

.app-two-single-feature-icon.box-one i {
    background-color: rgba(217, 34, 255, .1);
    color: #d922ff
}

.app-two-single-feature-icon.box-two i {
    background-color: rgba(255, 62, 102, .1);
    color: #ff3e66
}

.app-two-single-feature-icon.box-three i {
    background-color: rgba(14, 149, 64, .1);
    color: #0e9541
}

.app-two-single-feature-icon.box-four i {
    background-color: rgba(57, 135, 255, .1);
    color: #3987ff
}

.feature-icon.wdth-50 .fad {
    width: 50px;
    height: 50px;
    line-height: 35px;
    text-align: center
}

.video-bg-with-icon {
    display: grid;
    padding: 200px 0;
    place-items: center;
    border-radius: 15px;
    position: relative;
    -webkit-box-shadow: 0 40px 40px 0 rgba(14, 17, 51, .2);
    box-shadow: 0 40px 40px 0 rgba(14, 17, 51, .2)
}

.video-bg-with-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: rgba(72, 43, 118, .7)
}

.video-bg-with-icon a {
    color: var(--bs-danger);
    position: relative;
    z-index: 20;
    background-color: var(--bs-white);
    display: block;
    line-height: 80px;
    border-radius: 50%;
    font-size: 20px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.video-bg-with-icon a:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white)
}

.video-promo-icon-wrapper {
    margin-top: -220px;
    padding-top: 300px
}

.single-icon-box i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    color: var(--bs-white);
    margin-bottom: 20px
}

.single-icon-box i.icon-one {
    background-color: #ee283c
}

.single-icon-box i.icon-two {
    background-color: #0e9541
}

.single-icon-box i.icon-three {
    background-color: #ff7d1a
}

.single-icon-box i.icon-four {
    background-color: #3987ff
}

.process-card {
    position: relative;
    display: block;
    -webkit-transition: .3s;
    transition: .3s
}

.custom-shadow {
    -webkit-box-shadow: 0 5px 20px 0 rgba(210, 210, 245, .5);
    box-shadow: 0 5px 20px 0 rgba(210, 210, 245, .5)
}

.shadow-hover:hover {
    -webkit-box-shadow: 0 5px 20px 0 rgba(210, 210, 245, .5);
    box-shadow: 0 5px 20px 0 rgba(210, 210, 245, .5);
    z-index: 3
}

.process-icon {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .3s;
    transition: .3s;
    margin: 0 auto 20px
}

.process-card:hover .process-icon {
    background: var(--bs-primary) !important
}

.process-card:hover .process-icon span,
.process-card:hover .process-icon span i {
    color: var(--bs-white) !important
}

.dots-line {
    position: relative;
    top: auto;
    right: auto;
    z-index: 2;
    width: 100px;
    height: 1px;
    padding-top: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-bottom: 2px dashed var(--bs-primary)
}

.hero-bg-img,
.skewed-1,
.skewed-wrap {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.dots-line.first {
    position: relative;
    margin-right: -43px;
    margin-left: -43px
}

.circle-img-1,
.circle-img-2,
.circle-img-3,
.hero-app-img::before,
.hero-bg-img,
.process-icon-2:after,
.skewed-1,
.skewed-wrap {
    position: absolute
}

.process-icon-2 i {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
    opacity: .6
}

.process-icon-2:after {
    content: '';
    top: -20px;
    width: 0;
    right: 47%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    height: 150px;
    z-index: -1;
    border-style: dashed;
    border-width: 1px;
    border-color: var(--bs-secondary-dark);
    background-color: transparent
}

.customer-logo,
.customer-logos-grid img,
.process-icon-2 i,
.work-process-list li {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.promo-card-info h3 i {
    font-size: 38px
}

.setup-process-list {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    justify-items: center
}

.setup-process-list .setup-process-item .setup-process-icon {
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 100px;
    margin: 0 auto;
    background-color: #fff;
    transition: .2s ease-in-out
}

.setup-process-list .setup-process-item .setup-process-icon img {
    width: 100%;
    height: 100%;
    padding: 18px;
    object-fit: contain;
    object-position: center center;
    transition: .2s ease-in-out
}

.setup-process-list .setup-process-item:hover .setup-process-icon {
    box-shadow: rgba(149, 157, 165, .075) 0 0 15px
}

.setup-process-list .setup-process-item:hover .setup-process-icon img {
    transform: scale(.8)
}

li.setup-process-item:not(:last-child):before {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 2px;
    background: rgba(116, 143, 181, .1)
}

.skewed-wrap {
    z-index: -1;
    overflow: hidden
}

.skewed-1 {
    border-bottom: 282px solid var(--bs-white);
    border-left: 100vw solid transparent
}

.hero-bg-img {
    z-index: -2;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.app-screen-bg {
    background-position: 50% 100%;
    background-size: contain;
    background-repeat: no-repeat
}

.app-screen-wrap {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 5;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(29.4046deg) rotateY(0) rotateZ(-19.4046deg) skew(0, 0);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(29.4046deg) rotateY(0) rotateZ(-19.4046deg) skew(0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.screen-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-row-gap: 16px;
    grid-column-gap: 16px
}

.grid-app-screens {
    width: 130%;
    max-width: 1100px;
    padding-left: 5%;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-columns: 1fr 2.2fr;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform: perspective(1000px);
    transform: perspective(1000px)
}

.screen-1 {
    grid-row-start: span 2;
    grid-row-end: span 2;
    width: 100%
}

.screen-3 {
    justify-self: start
}

.circle-shape-wrap {
    grid-column-end: 4;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    -ms-grid-row: 1;
    grid-row-start: 1
}

.circle-img-1 {
    width: 16%;
    margin-top: 2%;
    margin-left: 44%
}

.circle-img-2 {
    width: 10%;
    margin-top: -7%;
    margin-left: 57%
}

.circle-img-3 {
    width: 8%;
    margin-top: -19%;
    margin-left: 36%
}

.hero-screen-wrap {
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-right: -120px
}

.hero-screen-wrap .phone-screen {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 220px;
    flex: 0 0 220px;
    width: 220px;
    margin-bottom: -30px;
    margin-right: -220px;
    z-index: 2
}

.hero-screen-wrap .mac-screen {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 885px;
    flex: 0 0 885px;
    width: 885px;
    margin-right: -180px;
    z-index: 1
}
@media(min-width:1480px) and (max-width:1836px) {
    
    .hero-screen-wrap {
        margin-right: 0
    }

    .hero-screen-wrap .phone-screen {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 165px;
        flex: 0 0 165px
    }

    .hero-screen-wrap .mac-screen {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 765px;
        flex: 0 0 765px;
        margin-right: 0
    }
}

@media(min-width:320px) and (max-width:1479px) {
    .hero-screen-wrap {
        margin-right: 0
    }

    .hero-screen-wrap .phone-screen {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
        flex: 0 0 100px;
        margin-right: 0
    }

    .hero-screen-wrap .mac-screen {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 465px;
        flex: 0 0 465px;
        margin-right: 0
    }
}

.widget-img-1 {
    top: 22%;
    left: -90px
}

.widget-img-2 {
    bottom: -12%;
    left: -75px
}

.widget-img-3 {
    top: 40%;
    right: -100px
}

.widget-img-4 {
    bottom: -10%;
    right: 35px
}

.widget-img-5 {
    top: -35%;
    left: -35%
}

.widget-img-6 {
    top: -30%;
    right: -35%
}

.hero-app-img::before {
    content: '';
    top: 50%;
    right: 50%;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    border-radius: 50%;
    background-color: #f6c37b;
    width: 500px;
    height: 500px
}

.hero-app-img img {
    position: relative;
    z-index: 9
}

.integration-list-wrap,
.integration-list-wrap a,
.office-content,
.office-info {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.office-address {
    height: 360px;
    position: relative;
    width: 100%;
    -webkit-transition: .3s ease-in;
    transition: .3s ease-in
}

.office-content {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .45)));
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
    -webkit-transition: .3s ease-in;
    transition: .3s ease-in
}

.office-overlay {
    opacity: 0;
    background-color: rgba(11, 22, 63, .5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: .3s linear;
    transition: .3s linear;
    z-index: -1
}

.office-info {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 38%;
    flex: 0 1 38%;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.office-info address {
    color: var(--bs-white);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0 linear .5s, opacity .8s linear;
    transition: visibility 0 linear .5s, opacity .8s linear;
    padding-bottom: 33px
}

.office-address:hover .office-info {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.office-address:hover .office-info address {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.about-content-left {
    max-width: 602px;
    margin-right: 30px
}

.about-content-left .about-img-first {
    width: 100%;
    max-width: 76%
}

.about-content-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 47%;
    -ms-flex-direction: column;
    flex-direction: column
}

.about-content-right .about-img-last {
    max-width: 126%;
    margin-top: auto;
    -ms-flex-item-align: end;
    align-self: flex-end
}

@media(min-width:992px) and (max-width:1199px) {
    .about-content-left {
        max-width: 450px
    }
}

.story-grid {
    width: 100%;
    height: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr
}

.story-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    width: 100%
}

.dot-mask {
    -webkit-mask-image: url(../img/dots.svg);
    mask-image: url(../img/dots.svg)
}

.dm-wh-200 {
    width: 200px;
    height: 200px
}

.dm-wh-250 {
    width: 250px;
    height: 250px
}

.dm-wh-300 {
    width: 300px;
    height: 300px
}

.dm-wh-350 {
    width: 350px;
    height: 350px
}

.dm-size-10 {
    -webkit-mask-size: 10px;
    mask-size: 10px
}

.dm-size-12 {
    -webkit-mask-size: 12px;
    mask-size: 12px
}

.dm-size-14 {
    -webkit-mask-size: 14px;
    mask-size: 14px
}

.dm-size-16 {
    -webkit-mask-size: 16px;
    mask-size: 16px
}

.dm-size-18 {
    -webkit-mask-size: 18px;
    mask-size: 18px
}

.dm-size-20 {
    -webkit-mask-size: 20px;
    mask-size: 20px
}

.dot-mask.bottom-right,
.dot-mask.top-right {
    right: -35px;
    bottom: -35px
}

.dot-mask.top-left {
    left: -35px;
    top: -35px
}

.dot-mask.bottom-left {
    left: -35px;
    bottom: -35px
}

.two-bg-color {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, var(--bs-primary)), color-stop(0, var(--bs-light)));
    background-image: linear-gradient(90deg, var(--bs-primary) 40%, var(--bs-light) 0)
}

.two-bg-dark-light {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, var(--bs-dark)), color-stop(0, var(--bs-light)));
    background-image: linear-gradient(90deg, var(--bs-dark) 40%, var(--bs-light) 0)
}

.feature-promo.home .single-feature-promo .feature-icon.small {
    width: 46px;
    height: 46px
}

.feature-promo.home .single-feature-promo .feature-icon {
    width: 80px;
    height: 80px;
    line-height: 70px;
    text-align: center;
    margin: 0
}

.feature-icon img {
    padding: 15px
}

.img-bg-shape {
    bottom: 0;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1);
    width: 80%
}

.skewed-img-right {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-35deg) rotateX(15deg);
    transform: rotateY(-35deg) rotateX(15deg)
}

.skewed-img-left {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-25deg) rotateX(-10deg);
    transform: rotateY(-25deg) rotateX(-10deg)
}

.img-overlay-list {
    left: 40px;
    bottom: 30px;
    z-index: 1;
    grid-row-gap: 17px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto
}

.img-overlay-list li {
    margin: 12px 0
}

.img-overlay-list li i {
    width: 30px;
    height: 30px;
    line-height: 30px
}

.customer-logos-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-row-gap: 16px;
    margin-right: auto;
    margin-left: auto;
    grid-column-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto
}

.customer-logo-gray {
    -webkit-filter: opacity(0.6);
    filter: opacity(.6)
}

.customer-logo {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1)
}

.customer-logo:hover {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.customer-logo-gray:hover {
    -webkit-filter: none;
    filter: none
}

.client-logo-img {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
}

.choose-soft-img {
    position: relative;
    left: 25%
}

.list-three-col,
.list-two-col {
    max-width: 100%
}

.list-two-col li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 12px
}

.list-three-col li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 15px
}

.ads-banner-icon-list .blur-box {
    text-align: start;
    justify-content: start;
    transition: .3s ease-in-out
}

.ads-banner-icon-list .blur-box img {
    width: auto !important;
    height: 75px
}

.feature-img.about img {
    position: relative;
    display: block;
    margin: auto
}

.feature-img .feature-top-img {
    position: absolute;
    left: .5rem;
    top: 5rem
}

.feature-img-shape:before {
    display: block;
    content: '';
    position: absolute;
    top: -10px;
    right: -60px;
    z-index: -1;
    width: 150px;
    height: 150px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    background-repeat: no-repeat
}

.feature-img-shape-top-right:before {
    background-image: url(../img/shape/dot-big-square.svg)
}

.screenshots-content-wrap {
    position: relative;
    z-index: 2
}

.roted-img-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: -100px;
    -webkit-perspective: 2200px;
    perspective: 2200px
}

.roted-img {
    position: relative;
    z-index: -1;
    width: 100%;
    margin-bottom: -90px;
    -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(0);
    transform: rotateX(50deg) rotateY(0) rotateZ(0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.half-screen {
    top: 4%;
    left: 2.1%;
    width: 94%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    border-top-left-radius: .9375rem;
    border-top-right-radius: .9375rem
}

.feature-grid {
    display: -ms-grid;
    display: grid;
    width: 100%;
    grid-auto-columns: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.highlight-card {
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    display: block
}

.feature-card.border:hover {
    border-color: var(--bs-primary) !important;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    background: 0
}

.border-line-style {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: var(--bs-primary-soft);
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0 transparent;
    border-left: 0 transparent;
    border-bottom: 0 transparent
}

.border-line {
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 2px;
    height: 65px;
    margin-top: 0;
    margin-right: -1px;
    background-color: var(--bs-primary)
}

.feature-bg-mockup {
    position: absolute;
    opacity: 1;
    -o-object-fit: cover;
    object-fit: cover
}

.feature-tab-list li,
.job-overview-list li i {
    margin-right: 15px
}

.feature-tab-list li:last-child,
.feature-tab-list-2 li:last-child a {
    margin-right: 0
}

.feature-tab-list li a {
    text-align: center;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-body);
    border-radius: 5px;
    background: #fff
}

.feature-tab-list li a.active {
    background: var(--bs-primary-soft);
    color: var(--bs-primary)
}

.feature-tab-list-2 li {
    width: 18%
}

.feature-tab-list-2 li a {
    height: 100%;
    min-height: 100%;
    border-bottom: 3px solid #f4f4f4;
    background-color: #f4f4f4;
    border-radius: .5rem;
    padding: 1rem .9rem;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--body-color);
    margin-right: 15px;
    -webkit-transition: .3s;
    transition: .3s
}

.feature-tab-list-2 li a.active,
.feature-tab-list-2 li a:hover {
    border-color: var(--bs-primary)
}

.company-logo {
    height: 130px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 130px;
    flex: 0 0 130px
}

.company-logo .logo {
    display: flex;
    height: 100%
}

.company-logo .logo img {
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.company-info-wrap {
    display: flex
}

.annual-salary-wrap {
    background: var(--bs-white);
    padding: 30px;
    text-align: center
}

.content-list li {
    position: relative;
    font-size: 15px;
    padding-left: 15px;
    margin-bottom: 10px
}

.content-list li:before {
    position: absolute;
    left: 0;
    top: 8px;
    height: 5px;
    width: 5px;
    background: var(--bs-dark);
    content: '';
    border-radius: 50%
}

.job-info-list li {
    font-size: 14px;
    margin-right: 15px !important
}

.job-overview-list li {
    position: relative;
    display: flex;
    font-size: 16px;
    margin-bottom: 20px
}

.icon-box {
    margin-bottom: 30px
}

.icon-box i {
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 22px
}

.bottom-header .icon-box i {
    width: 40px;
    height: 37px;
    line-height: 37px;
    font-size: 16px
}

.bottom-header .item-block {
    padding-right: 50px
}

.bottom-header .item-block:last-child,
.single-product-link li:last-child {
    padding-right: 0
}

.app-two-feature-two .section-heading h4 {
    color: #ff3e66
}

.app-two-feature-two-content ul li i {
    color: #0e9541
}

.app-two-feature-two-content .action-btns .app-two-btn {
    background-color: #ff3e66;
    color: #fff
}

.feature-three-content-wrap {
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 30px 70px 0 rgba(0, 15, 56, .1);
    box-shadow: 0 30px 70px 0 rgba(0, 15, 56, .1);
    padding: 20px 30px;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer
}

.app-two-feature-three-img .feature-three-blob {
    position: absolute;
    width: 380px;
    z-index: 5;
    top: 50%;
    right: 50%;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%)
}

.app-two-feature-three-img>img {
    width: 390px
}

.img-peice .img-one {
    top: 250px;
    left: -5%;
    z-index: 30
}

.img-peice .img-two {
    top: 205px;
    z-index: 30;
    right: -4%
}

.img-peice .img-three {
    z-index: 30;
    bottom: 78px;
    left: -5%
}

.software-uikit {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat
}

.img-with-shape-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.shape-image {
    overflow: hidden;
    border-radius: 1rem
}

.shape-image .screen-img {
    position: relative;
    left: 80px;
    top: 90px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0;
    object-position: 0
}

.shape-bottom {
    position: absolute;
    left: 0;
    top: auto;
    right: auto;
    bottom: -10%;
    width: 100%
}

.circle-shape-2 {
    width: 335px;
    min-height: 335px;
    min-width: 335px
}

.circle-shape-1 {
    top: -240px;
    width: 356px;
    min-height: 356px;
    min-width: 356px
}

.circle-shape-3 {
    bottom: -210px;
    width: 300px;
    min-height: 300px;
    min-width: 300px
}

.app-two-mockup::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background-color: #f5a12a;
    z-index: 5
}

.action-btns ul li a {
    background-color: transparent;
    border: 2px solid var(--bs-dark-soft);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-light);
    padding: 10px 23px;
    line-height: 40px
}

.action-btns ul li:hover a {
    background-color: var(--bs-white);
    border-color: var(--bs-white);
    color: var(--bs-dark)
}

.action-btns ul li a i {
    font-size: 30px
}

.action-btns ul li a span {
    line-height: 14px;
    font-weight: 400;
    text-align: left;
    color: #fff
}

.action-btns ul li a span span {
    font-size: 16px;
    font-weight: 700;
    display: block;
    line-height: 20px;
    color: #fff
}

.featuredinSwiper,
.testimonial-section .testimonialSwiper {
    position: relative;
    cursor: all-scroll
}

.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 40px;
    border: 1px solid var(--bs-light);
    background-color: var(--bs-white);
    border-radius: 10px;
    -webkit-box-shadow: 0 11px 24px 0 rgba(0, 0, 0, .09);
    box-shadow: 0 11px 24px 0 rgba(0, 0, 0, .09);
    transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white) !important;
    border-color: var(--bs-primary)
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: 600
}

.swiper-button-next {
    right: -25px
}

.swiper-button-prev {
    left: -25px
}

.rating-list li,
.review-rate li {
    margin-right: 2px !important
}

.review-rate li i {
    font-size: 12px;
    line-height: normal
}

.blockquote {
    font-size: 1.125rem
}

.testimonial-tab-list li a {
    margin-right: 10px
}

.testimonial-tab-list li a img {
    border: 2px solid var(--bs-secondary);
    -webkit-transform: scale(1);
    transform: scale(1);
    padding: 4px;
    -webkit-transition: .3s;
    transition: .3s
}

.testimonial-tab-list li a.active img {
    border-color: var(--bs-primary);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.testimonial-tab-menu {
    display: grid;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-auto-columns: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-template-rows: auto
}

.testimonial-tab-menu li {
    width: 100%;
    cursor: pointer
}

.testimonial-tab-link {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    background: rgba(255, 255, 255, .05) !important
}

.blog-grid .blog-content,
.single-article {
    background-color: var(--bs-white);
    display: flex
}

.testimonial-video-wrapper:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .6;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 1rem;
    height: 100%;
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#171347));
    background-image: linear-gradient(180deg, transparent, #171347)
}

.testimonial-video-wrapper .video-icon i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-radius: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18)
}

.testimonial-video-wrapper .customer-info {
    position: absolute;
    left: 8%;
    bottom: 8%
}

.testimonial-tab-menu.nav-pills .nav-link {
    padding: 1rem
}

.testimonial-tab-menu.nav-pills .nav-link.active,
.testimonial-tab-menu.nav-pills .show>.nav-link {
    border-color: var(--bs-white) !important;
    -webkit-box-shadow: 0 20px 20px 0 rgba(2, 19, 79, .1);
    box-shadow: 0 20px 20px 0 rgba(2, 19, 79, .1);
    background: var(--bs-white) !important;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px)
}

.bg-dark .testimonial-tab-menu.nav-pills .nav-link.active,
.bg-dark .testimonial-tab-menu.nav-pills .show>.nav-link,
.bg-gradient .testimonial-tab-menu.nav-pills .nav-link.active,
.bg-gradient .testimonial-tab-menu.nav-pills .show>.nav-link {
    border-color: rgba(101, 101, 101, .06) !important;
    background: rgba(255, 255, 255, .1) !important
}

@-webkit-keyframes ripple-white {
    0 {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2)
    }

    100% {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2), 0 0 0 60px transparent;
        box-shadow: 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2), 0 0 0 60px transparent
    }
}

@keyframes ripple-white {
    0 {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .2), 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2)
    }

    100% {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2), 0 0 0 60px transparent;
        box-shadow: 0 0 0 20px rgba(255, 255, 255, .2), 0 0 0 40px rgba(255, 255, 255, .2), 0 0 0 60px transparent
    }
}

.appTwoReviewSwiper-Controller {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 90px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.appTwoReviewSwiper-Controller .swiper-button-next,
.appTwoReviewSwiper-Controller .swiper-button-prev {
    border: 1px solid #ebebee;
    color: #0e1133;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    -webkit-box-shadow: none;
    box-shadow: none
}

.appTwoReviewSwiper-Controller .swiper-button-next {
    right: 10px
}

.appTwoReviewSwiper-Controller .swiper-button-next:hover,
.appTwoReviewSwiper-Controller .swiper-button-prev:hover {
    border: 1px solid transparent;
    background-color: #ff3e66;
    color: #fff
}

.pricing-header .package-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px
}

.pricing-header h4 span {
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px
}

.pricing-feature-list li {
    font-size: 15px;
    padding: 5px 0
}

.single-pricing-wrap {
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.transform-hover:hover {
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

.integration-list-wrap {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.integration-list-wrap a {
    position: relative;
    display: flex;
    margin-right: 16px;
    margin-left: 16px;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100px;
    -webkit-box-shadow: 7px 7px 10px 0 rgba(55, 65, 81, .12);
    box-shadow: 7px 7px 10px 0 rgba(55, 65, 81, .12);
    width: 65px
}

.integration-list-wrap a img {
    padding: 10px
}

.integration-list-wrap a.integration-1 {
    left: -120px;
    top: 0
}

.integration-list-wrap a.integration-2 {
    top: -21px;
    right: -22px
}

.integration-list-wrap a.integration-3 {
    left: -191px;
    margin-right: 16px;
    margin-left: 16px
}

.integration-list-wrap a.integration-5 {
    left: -150px;
    bottom: -30px
}

.integration-list-wrap a.integration-6 {
    left: 50px;
    bottom: 0
}

.integration-list-wrap a.integration-7 {
    left: 120px;
    top: 0
}

.integration-list-wrap a.integration-8 {
    top: -21px;
    right: 22px
}

.integration-list-wrap a.integration-9 {
    left: 191px
}

.integration-list-wrap a.integration-11 {
    left: 150px;
    bottom: -30px
}

.integration-list-wrap a.integration-12 {
    left: -50px;
    bottom: 0
}

.integration-badge {
    top: 8%;
    right: 8%;
    font-size: 12px;
    letter-spacing: .2px
}

.connected-app-single {
    height: 290px;
    -webkit-transition: .3s;
    transition: .3s
}

.swiper-container.whatmakeSwiper {
    cursor: all-scroll
}

.integration-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    grid-gap: 25px;
    justify-items: center
}

.integration-list li .single-integration {
    border: 2px solid rgba(116, 143, 181, .1);
    text-align: center;
    background: 0;
    padding: 20px;
    border-radius: 10px;
    -webkit-transition: .3s;
    transition: .3s
}

.integration-list li .single-integration img {
    display: block;
    width: auto;
    max-width: auto;
    height: 55px;
    margin: auto;
    text-align: center;
    opacity: .6;
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition: .4s ease-in-out
}

.integration-list li:nth-child(3) .single-integration img,
.integration-list li:nth-child(4) .single-integration img {
    transform: scale(.9)
}

.integration-list li:last-child .single-integration img {
    transform: scale(.6)
}

.integration-list li .single-integration:hover {
    border-color: var(--bs-white);
    background: var(--bs-white);
    -webkit-box-shadow: 0 0 20px 0 rgba(2, 19, 79, .1);
    box-shadow: 0 0 20px 0 rgba(2, 19, 79, .1);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}

.integration-list li .single-integration:hover img {
    opacity: 1;
    filter: none;
    -webkit-filter: grayscale(0)
}

.integration-logo {
    margin-bottom: 15px;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1) !important;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1) !important
}

.integration-icon {
    width: 22px;
    height: 22px
}

.included-feature-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mb--100 {
    margin-bottom: -100px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-32 {
    margin-bottom: 32px
}

.mb-30 {
    margin-bottom: 30px
}

.white-space-100 {
    height: 100px
}

.pricing-tab-list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.pricing-tab-list li button {
    border: 0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 6px 15px;
    font-size: 14px;
    font-weight: 700;
    background: var(--bs-light)
}

.pricing-tab-list li:first-child button {
    border-radius: 5px 0 0 5px
}

.pricing-tab-list li:last-child button {
    border-radius: 0 5px 5px 0
}

.pricing-tab-list li button.active {
    background: var(--bs-dark);
    color: var(--bs-white)
}

.pricing-price span {
    font-size: 14px;
    color: var(--body-color)
}

.pricing-content-wrap {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.accordion-list li a,
.blog-grid .featured-post-wrapper .blog-item .read-more-link,
.blog-grid .posts-wrapper .blog-item .read-more-link,
.support-article-tab {
    display: inline-block
}

.price-feature-col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%
}

.left-radius {
    border-radius: 1rem 0 0 1rem
}

.right-radius {
    border-radius: 0 1rem 1rem 0
}

.faq-icon {
    font-size: 25px;
    line-height: normal
}

.faq-accordion .accordion-item {
    margin-bottom: 15px;
    border: 0;
    border-radius: .5rem
}
.faq-accordion.style_switch .accordion-item {
    box-shadow: rgba(149, 157, 165, 0.3) 0px 0px 35px;
}

.faq-accordion .accordion-item.shadow_border {
  margin-bottom: 18px;
    border: 0 !important;
    box-shadow: 0px 4px 64px 0px rgba(177, 177, 177, 0.2509803922);
    background: #ffffff;
}

.faq-accordion .accordion-item:last-child,
.faq-accordion .accordion-item:last-of-type,
.feature-content-wrap p,
.page-header .lead {
    margin-bottom: 0
}

.faq-accordion .accordion-item button {
    border-radius: .5rem .5rem 0 0;
    padding: 1rem 1.6rem;
    font-size: 16px;
    font-weight: 600
}

.faq-accordion .accordion-item button.accordion-button,
.faq-accordion .accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: .5rem
}

.faq-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem !important
}

.faq-accordion .accordion-item button:focus {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed) {
    background: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--bs-primary)
}

.accordion-list li {
    padding: 5px 0
}

.accordion-list li a {
    color: var(--body-color);
    width: 100%
}

.support-article-tab.nav-pills .nav-link.active,
.support-article-tab.nav-pills .show>.nav-link {
    color: var(--bs-primary);
    background: 0
}

.support-article-tab button.nav-link {
    padding: .5rem 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%
}

.quick-support-icon i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center
}

.support-article-list li a:hover .read-more-link {
    opacity: .9
}

.blog-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1
}

.blog-grid .featured-post-wrapper,
.blog-grid .posts-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1
}

.blog-grid .featured-post-wrapper .blog-item,
.blog-grid .posts-wrapper .blog-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
    width: 100%
}

.blog-grid .blog-content,
.blog-grid .blog-content .blog-media,
.single-article {
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative
}

.blog-grid .blog-item .blog-content {
    border-radius: 1rem
}

.blog-grid .featured-post-wrapper .blog-item .read-more-link a,
.blog-grid .posts-wrapper .blog-item .read-more-link a {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
    background-color: transparent;
    color: var(--bs-primary)
}

.blog-grid .featured-post-wrapper .blog-item .read-more-link a i,
.blog-grid .posts-wrapper .blog-item .read-more-link a i {
    margin-left: 10px;
    margin-right: 0;
    font-size: 14px;
    line-height: 14px;
    position: relative;
    text-align: left;
    margin-top: 3px
}

.blog-grid .featured-post-wrapper .blog-item .read-more-link a,
.blog-grid .featured-post-wrapper .blog-item:hover .read-more-link a,
.blog-grid .posts-wrapper .blog-item:hover .read-more-link a {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-color: var(--bs-primary);
    color: var(--bs-white)
}

.blog-grid .featured-post-wrapper .blog-item .blog-content:hover .blog-media img,
.blog-grid .posts-wrapper .blog-item .blog-content:hover .blog-media img {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.blog-text a {
    text-decoration: none
}

.blog-grid .featured-post-wrapper .blog-item .blog-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    position: relative;
    width: 100%
}

.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-media {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 46%;
    flex: 1 1 46%;
    width: 100%;
    border-radius: 1rem 1rem 0 0
}

.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text {
    height: 290px;
    width: 100%
}

.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text .featured-badge {
    position: absolute;
    right: 5%;
    top: -1px
}

.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text .featured-badge i {
    font-size: 35px
}

.blog-grid .blog-content {
    background-size: cover;
    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    -webkit-transition: .3s;
    transition: .3s
}

.blog-grid .blog-content .blog-media {
    height: auto;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 35%;
    overflow: hidden;
    border-radius: 1rem 0 0 1rem
}

.blog-grid .blog-content .blog-media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background-color: var(--bs-white);
    -webkit-transition: .3s;
    transition: .3s
}

.blog-grid .blog-content .blog-text {
    padding: 33px;
    width: 65%
}

.single-article {
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    background-clip: border-box;
    border: 1px solid #f1f1f1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.single-article a {
    text-decoration: none;
    display: block
}

.article-img,
.team-img {
    position: relative;
    overflow: hidden
}

.article-img img {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 14rem;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1)
}

.single-article.feature-article {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.single-article.feature-article .article-img {
    width: 35%;
    min-height: 100%;
    overflow: hidden
}

.hero-section.single-product-banner .product-color-block img,
.single-article.feature-article .article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center
}

.single-article.feature-article .article-content {
    width: 65%
}

.limit-2-line-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.single-article:hover .article-img img {
    -webkit-transform: rotate(3deg) scale(1.1);
    transform: rotate(3deg) scale(1.1)
}

.single-article:hover .article-img:before {
    background: 0
}

.single-article:hover {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 11px 18px -8px rgba(0, 0, 0, .16);
    box-shadow: 0 11px 18px -8px rgba(0, 0, 0, .16)
}

.page-item.active .page-link {
    background: var(--bs-primary);
    border-color: var(--bs-primary)
}

.page-link:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--bs-primary)
}

.download-btn {
    border: 1px solid var(--body-color);
    margin-right: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 20px;
    border-radius: 4px;
    margin-bottom: 10px
}

.download-btn span {
    font-size: 28px;
    line-height: 28px;
    margin-right: 15px;
    color: var(--bs-primary)
}

.download-btn p {
    line-height: 20px;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: left
}

.download-btn p small {
    opacity: .5;
    font-size: 11px
}

.team-single-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s
}

.team-single-wrap:hover .team-img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-shadow: 0 0 1.25rem rgba(31, 45, 61, .05);
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, .05)
}

.team-social-list {
    position: absolute;
    top: 8%;
    right: 8%
}

.team-social-list.team-social-style-2 {
    bottom: 8%;
    top: auto
}

.team-social-list li {
    margin: 3px 0 !important
}

.author-social-list li a,
.team-social-list li a {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 15px;
    border-radius: 3px;
    background: var(--bs-light);
    color: var(--body-color);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.author-social-list.social-bg-ts li a {
    background: 0;
    color: var(--bs-white)
}

.author-social-list li a:hover,
.team-social-list li a:hover {
    background: var(--bs-primary);
    color: var(--bs-white)
}

.team-single-wrap:hover .team-social-list li a {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12)
}

.author-social-list li a {
    -webkit-transform: none;
    transform: none
}

.animated-hero-1 .type-0 {
    right: -110px;
    top: -160px
}

.shape-bottom-img img.bottom-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    z-index: 1;
    width: 100%;
    margin: 0 auto
}

.error-404 {
    margin-bottom: 30px;
    font-size: 180px;
    line-height: .889em
}

.footer-single-col h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px
}

.copyright-text p,
.footer-nav-list li a {
    font-weight: 500
}

.footer-single-col.mt-15 {
    margin-top: 30px
}

.footer-single-col .footer-nav-list {
    display: inline-flex
}

.footer-single-col .footer-nav-list li {
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid #ddd
}

.footer-single-col .footer-nav-list.style2 li {
    display: inline-flex;
    align-items: center;
    border-right: 0;
    padding-right: 0;
    margin-right: 30px
}

.footer-single-col .footer-nav-list.style2 li .inline-flex i {
    font-size: 22px;
    color: var(--bs-primary)
}

.footer-single-col .footer-nav-list li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0
}

.footer-nav-list li a {
    font-size: 15px;
    line-height: inherit;
    margin: 0;
    display: block;
    opacity: .5;
    -webkit-transition: .3s;
    transition: .3s
}

.footer-nav-list li a,
.footer-single-col p {
    color: var(--bs-secondary-dark);
    opacity: .7
}

.footer-light .footer-nav-list li a,
.footer-light .footer-single-col p,
.footer-light .list-unstyled.style_footer li a {
    color: var(--body-color);
    opacity: .8
}

.content-list.list-unstyled.style_footer li:before {
    background: var(--body-color);
    opacity: .8
}

#thumb_img a.active .checkbox-check .ng-star-inserted,
.bg-dark .logo-white,
.bg-gradient .logo-white,
.footer-light .logo-color,
.radio-input:checked~.radio-checkmark-box .radio-checkmark:after {
    display: block
}

.newsletter-form button {
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
    border: 0;
    border-radius: .375rem;
    display: inline-block;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 15px
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo .precio.precioOferta:before,
.newsletter-form button i {
    font-size: 12px
}

.newsletter-form button:focus {
    outline: 0
}

.rating-list li i {
    font-size: 11px
}

.bg-dark input.form-control,
.bg-gradient input.form-control {
    border-color: var(--bs-light)
}

.register-form input.form-control {
    border-color: rgba(0, 0, 0, .08)
}

.register-wrap.lock-inquiry {
    border: 2px solid var(--bs-primary)
}

.register-wrap.lock-inquiry .register-form input.form-control {
    border: 2px solid rgba(0, 0, 0, .08)
}

.register-form input.form-control:focus,
.register-wrap.lock-inquiry .register-form input.form-control:focus {
    border-color: var(--bs-secondary)
}

.register-form.style2 input.form-control {
    border: 2px solid #efefef;
    background-color: #efefef
}

.register-form.style2 input.form-control:focus {
    background-color: #fff
}

.footer-bottom {
    position: relative;
    display: block;
    border-top: 1px solid rgba(248, 249, 250, .05)
}

.footer-bottom.footer-light {
    border-top: 1px solid rgba(0, 0, 0, .05)
}

.copyright-text p {
    font-size: 14px;
    color: #65676d
}

.copyright-text p a {
    color: #000
}

.footer-light .copyright-text p {
    color: #65676d
}

.bg-dark .copyright-text p a,
.bg-gradient .copyright-text p a,
.radio.white {
    color: #fff
}

.footer-social-list li a {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    border: none !important;
    border-radius: 4px;
    -webkit-transition: .2s ease-in;
    -webkit-transform: scale(1);
    -ms-transition: .2s ease-in;
    -ms-transform: scale(1);
    -moz-transition: .2s ease-in;
    -moz-transform: scale(1);
    transition: .2s ease-in;
    transform: scale(1)
}

.footer-social-list li a.facebook {
    background-color: #1877f2
}

.footer-social-list li a.twitter {
    background-color: #1da1f2
}

.footer-social-list li a.instagram {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
}

.footer-social-list li a.google-plus {
    background-color: #db4a39
}

.footer-social-list li a.youtube {
    background-color: #cd201f
}

.footer-light .footer-social-list li a,
.pre-book-form .form-control {
    border: 2px solid rgba(0, 0, 0, .12)
}

.footer-social-list li a:hover {
    -webkit-transition: .2s ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: .2s ease-in;
    -ms-transform: scale(1.1);
    -moz-transition: .2s ease-in;
    -moz-transform: scale(1.1);
    transition: .2s ease-in;
    transform: scale(1.1)
}

.icon-box.support {
    height: 55px
}

.page-header.style2 {
    padding: 53px 0
}

.page-header.product-header {
    padding: 52px 0
}

.page-header.product-header .row {
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border-radius: 8px
}

.hero-section.single-product-banner .product-color-block {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden
}

.hero-section.single-product-banner .hero-content-wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%)
}

.font-small {
    font-size: 14px;
    opacity: .9;
    vertical-align: top
}

.font-medium {
    font-size: 16px;
    opacity: 1;
    vertical-align: top
}

.hero-section {
    position: relative;
    padding: 70px 0
}

.single-product-link li {
    padding-right: 35px
}

.single-product-link li:first-child {
    list-style: none
}

.single-product-link li a {
    color: var(--bs-secondary-dark);
    transition: .3s ease-in-out
}

.btn.buy-button {
    padding: .64rem 1.25rem;
    border-radius: .375rem
}

.dot-shape-img {
    bottom: 30px
}

.product-price {
    line-height: inherit
}

.product-price .cut-price {
    color: var(--body-color);
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 12px;
    text-decoration-color: #dd1d26
}

.btn-add-to-cart {
    font-size: 18px;
    color: var(--bs-dark);
    background-color: rgba(0, 0, 0, .05);
    transition: .2s ease-in-out
}

.btn-add-to-cart:hover {
    color: var(--bs-white);
    background-color: var(--bs-dark)
}

.btn-add-to-cart:focus {
    transform: scale(.9);
    -webkit-box-shadow: 0 0 0 .25rem rgba(133, 133, 133, .4);
    box-shadow: 0 0 0 .25rem rgba(133, 133, 133, .4)
}

.action-btns.style-mob .btn-add-to-cart {
    position: absolute;
    right: 55px;
    bottom: 4.5px;
    width: 2.7rem;
    height: 2.7rem
}

.action-btns.style-mob .btn-call {
    position: absolute;
    right: 115px;
    bottom: 4.5px;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 18px;
    color: var(--bs-white);
    background-color: var(--bs-success)
}

.p-4-5 {
    padding: 2.5rem !important
}

.py-4-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important
}

.contact-us-form .register-form .w-100 {
    width: auto !important;
    max-width: auto !important
}

.whatsapp-widget {
    width: 54px;
    height: 54px;
    line-height: 50px;
    left: 30px;
    bottom: 30px;
    background: #25d366;
    box-shadow: 0 0 12px rgba(0, 0, 0, .12);
    position: fixed;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    z-index: 999;
    display: inline-block;
    transition: color .3s linear, background .3s linear
}

.whatsapp-widget:before {
    position: absolute;
    content: " ";
    z-index: -1;
    top: -15px;
    left: -15px;
    background-color: #25d366;
    width: 84px;
    height: 84px;
    border-radius: 100%;
    opacity: .6;
    -webkit-animation: 1s ease-out infinite pulses;
    animation: 1.8s ease-out infinite pulses
}

.whatsapp-widget:focus,
.whatsapp-widget:focus:before,
.whatsapp-widget:hover,
.whatsapp-widget:hover:before {
    background: #128c7e
}

@-webkit-keyframes pulses {
    0 {
        -webkit-transform: scale(0);
        opacity: 0
    }

    25% {
        -webkit-transform: scale(.3);
        opacity: 1
    }

    50% {
        -webkit-transform: scale(.6);
        opacity: .6
    }

    75% {
        -webkit-transform: scale(.9);
        opacity: .3
    }

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

.wave {
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block
}

@keyframes wave-animation {

    0,
    100%,
    60% {
        transform: rotate(0)
    }

    10%,
    30% {
        transform: rotate(14deg)
    }

    20% {
        transform: rotate(-8deg)
    }

    40% {
        transform: rotate(-4deg)
    }

    50% {
        transform: rotate(10deg)
    }
}

.motion {
    animation: 3s infinite motion
}

@keyframes motion {

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

    50% {
        transform: translateY(20px)
    }
}

/* .modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 15px;
    overflow: auto;
    background-color: rgba(0, 0, 0, .5);
    -webkit-animation-duration: .35s;
    animation-duration: .35s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    z-index: 9999999
}

.modal__dialog {
    position: relative;
    width: 500px;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    background-color: #fff;
    z-index: 9
}

.modal.demo .modal__dialog {
    width: 390px
}

.modal__close {
    position: absolute;
    top: -15px;
    right: -40px;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    line-height: inherit;
    font-size: 36px;
    text-align: center;
    color: #fff;
    background-color: transparent;
    border: 0
}

.modal__close:focus {
    outline: 0
}

.modal__header {
    border-bottom: 1px solid #efefef
}

.modal__title {
    margin: 0 0 15px
}

.modal__content {
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.6
}

.modal__footer {
    padding-top: 20px;
    border-top: 1px solid #efefef;
    text-align: right
}

.modal.is-modal-active {
    display: -webkit-box;
    display: flex
} */

@-webkit-keyframes fadeIn {
    0 {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0 {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.contenedorCards .product-card {
    transition: .3s
}

.contenedorCards .product-card .wrapper {
    margin: 0;
    padding-top: 260px;
    box-sizing: border-box;
    position: relative;
    border: 2px solid var(--bs-light);
    transition: .3s
}

.contenedorCards .product-card .wrapper .percent_block {
    position: absolute;
    font-size: 12px;
    top: 15px;
    right: 15px;
    padding: 2px 8px 1px;
    border-radius: 3px;
    color: #fff;
    z-index: 1;
    font-weight: 600;
    background-color: var(--bs-warning)
}

.contenedorCards .product-card .wrapper:hover {
    transform: translateY(-10px);
    background-color: #fff !important;
    -webkit-box-shadow: rgb(13 21 55 / 6%) 0 5px 50px;
    box-shadow: rgb(13 21 55 / 6%) 0 5px 50px
}

.contenedorCards .product-card .wrapper:hover .imgProd {
    height: 305px
}

.contenedorCards .product-card .wrapper .colorProd {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #efefef;
    border-radius: .8rem .8rem 0 0;
    transition: .3s
}

.contenedorCards .product-card:hover .wrapper .colorProd {
    background-color: var(--bs-secondary-light)
}

.contenedorCards .product-card .wrapper .imgProd {
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 280px;
    transition: .3s
}

.owl-carousel.single-product-carousel {
    position: absolute;
    bottom: calc(100% - 280px);
    left: 0;
    right: 0;
    margin: 0 auto
}

.owl-carousel.single-product-carousel .owl-nav {
    position: absolute;
    top: 35%;
    width: 100%;
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.contenedorCards .product-card:hover .wrapper .owl-carousel.single-product-carousel .owl-nav {
    opacity: 1;
    visibility: visible
}

.contenedorCards .product-card .wrapper .jpgBlock .styleJpg {
    width: 100%;
    height: 280px;
    overflow: hidden;
    object-fit: cover;
    object-position: center right;
    border-radius: 8px
}

.contenedorCards .product-card .wrapper .jpgBlock .stylePNG {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 280px;
    margin-top: -20px;
    transform: scale(1.090)
}

.contenedorCards .product-card .wrapper .infoProd {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding: 30px 20px 20px;
    box-sizing: border-box
}

.contenedorCards .product-card .wrapper .infoProd p {
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    text-align: center
}

.contenedorCards .product-card .wrapper .infoProd .nombreProd a {
    color: var(--bs-gray-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-top: 8px;
    text-decoration: none;
    transition: .3s
}

.contenedorCards .product-card .wrapper:hover .infoProd .nombreProd a {
    color: var(--bs-dark-dark)
}

.contenedorCards .product-card .wrapper .infoProd .actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #efefef
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo {
    flex-grow: 1;
    position: relative
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo .precio {
    color: var(--bs-dark);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    text-align: left
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo .precio.precioOferta,
.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo .precio.precioOferta .ruppes-icon {
    color: var(--bs-success);
    font-size: 15px;
    font-weight: 500;
    line-height: inherit;
    text-decoration: line-through
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo .precio:before {
    content: var(--currencyPrefix);
    font-size: 20px
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo.icon-btn button {
    border: 0;
    background-color: transparent;
    width: 125px;
    padding: 8px 14px;
    text-align: center;
    border-radius: 10px;
    font-size: 15px;
    color: var(--bs-secondary-dark);
    background-color: var(--bs-secondary-light);
    overflow: hidden;
    transition: .2s linear 0
}

.contenedorCards .product-card .wrapper .infoProd .actions .preciosGrupo.icon-btn button::before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 14px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 35px;
    transition: .2s linear 0
}

.contenedorCards .product-card:hover .wrapper .infoProd .actions .preciosGrupo.icon-btn button {
    text-indent: -15px;
    color: var(--bs-white);
    background-color: var(--bs-primary)
}

.contenedorCards .product-card:hover .wrapper .infoProd .actions .preciosGrupo.icon-btn button:before {
    opacity: 1;
    text-indent: 0
}

.contenedorCards .product-card:hover .wrapper .infoProd .actions .preciosGrupo.icon-btn button>span {
    opacity: 1;
    visibility: visible;
    display: inline-block
}

.demo-product-img img {
    display: block;
    width: auto !important;
    height: auto
}

.hero-img .product-img {
    width: auto !important;
    height: 370px
}

.feature-container.vh-lg-70 {
    height: 70vh
}

.mobile-step-mockup-img {
    width: auto;
    height: 400px
}

.vh-lg-100 {
    height: 100vh
}

#thumb_img a {
    display: inline-flex;
    align-items: center;
    color: var(--body-color);
    text-decoration: none;
    transition: .3s ease-in-out
}

#thumb_img a,
#thumb_img a.active {
    margin-top: 0;
    margin-bottom: 0
}

#thumb_img a .checkbox-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50px;
    margin-right: 10px
}

#thumb_img a.black .checkbox-check {
    background-color: var(--bs-black)
}

#thumb_img a .checkbox-check .ng-star-inserted {
    display: none;
    font-size: 8px
}

#thumb_img a.gold.active .checkbox-check .ng-star-inserted,
#thumb_img a.silver.active .checkbox-check .ng-star-inserted {
    color: var(--bs-black)
}

.specification-block {
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: .5rem;
    -moz-column-gap: .5rem;
    column-gap: .5rem;
    justify-content: space-between;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 60px
}

.specification-block .specif-area {
    width: 13rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px
}

.specification-block .specif-area .text-xs {
    font-size: 12px;
    margin-bottom: 2px;
    color: var(--bs-secondary)
}

.modal-confirm {
    color: #434e65;
    width: 100%
}

.modal-confirm .modal-content {
    padding: 25px;
    font-size: 15px;
    line-height: 1.7;
    border-radius: 5px;
    border: 0
}

.modal-confirm .modal-header {
    background: #fff;
    border-bottom: 0;
    position: relative;
    text-align: center;
    margin: -20px -20px 0;
    border-radius: 5px 5px 0 0;
    padding: 10px 35px 0
}

.modal-confirm h4 {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    margin: 10px 0
}

.modal-confirm .btn,
.modal-confirm .form-control {
    min-height: 40px;
    border-radius: 3px
}

.modal-confirm .close {
    position: absolute;
    top: 18px;
    right: 12px;
    color: #666 !important;
    text-shadow: none;
    opacity: 1 !important;
    font-size: 38px;
    line-height: 0;
    background-color: transparent;
    border: 0;
    margin: 0;
    padding: 0
}

.modal-confirm .close:focus,
.modal-confirm .close:hover {
    outline: 0;
    opacity: .6 !important
}

.modal-confirm.modal-dialog {
    padding: 0 !important
}

.modal-dialog.modal-confirm {
    max-width: 440px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: +999999999
}

.body-loader:after,
.intro-popup {
    top: 0;
    height: 100%;
    position: fixed;
    width: 100%;
    left: 0
}

.modal-body p {
    margin: 0
}

.body-loader:after {
    content: "Loading...";
    background: rgba(0, 0, 0, .5);
    z-index: +999999999;
    text-align: center;
    font-size: 22px;
    padding: 25%;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px
}

/* .modal.show {
    display: -webkit-box !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important
} */

@-webkit-keyframes scaleAnimation {
    0 {
        opacity: 0;
        transform: scale(1.5)
    }

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

@keyframes scaleAnimation {
    0 {
        opacity: 0;
        transform: scale(1.5)
    }

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

@-webkit-keyframes drawCircle {
    0 {
        stroke-dashoffset: 300px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes drawCircle {
    0 {
        stroke-dashoffset: 300px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes drawCheck {
    0 {
        stroke-dashoffset: 35px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes drawCheck {
    0 {
        stroke-dashoffset: 35px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes drawLine {
    from {
        stroke-dashoffset: 100
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes drawLine {
    from {
        stroke-dashoffset: 100
    }

    to {
        stroke-dashoffset: 0
    }
}

#successAnimationCheck {
    stroke-dasharray: 150px 150px;
    stroke: #4bb543
}

#successAnimationCircle {
    stroke-dasharray: 150px 150px;
    stroke: #c4ecc1
}

#failureAnimationCheck {
    stroke-dasharray: 35px 35px;
    stroke: #f44336
}

#failureAnimationCircle {
    stroke-dasharray: 150px 150px;
    stroke: #fae3e1
}

#failureAnimation.animated,
#successAnimation.animated {
    -webkit-animation: 1s ease-out 0 both scaleAnimation;
    animation: 1s ease-out 0 both scaleAnimation
}

#failureAnimation.animated #failureAnimationCircle,
#failureAnimation.animated #successAnimationCircle,
#successAnimation.animated #failureAnimationCircle,
#successAnimation.animated #successAnimationCircle {
    -webkit-animation: 1s cubic-bezier(.77, 0, .175, 1) 0 both drawCircle;
    animation: 1s cubic-bezier(.77, 0, .175, 1) 0 both drawCircle
}

#failureAnimation.animated #successAnimationCheck,
#successAnimation.animated #successAnimationCheck {
    -webkit-animation: 1s cubic-bezier(.77, 0, .175, 1) 0 both drawCheck;
    animation: 1s cubic-bezier(.77, 0, .175, 1) 0 both drawCheck
}

#failureAnimation.animated .failureAnimationCheckLine,
#successAnimation.animated .failureAnimationCheckLine {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    -webkit-animation: 1s cubic-bezier(1, .2, .1, 1) forwards drawLine;
    animation: 1s cubic-bezier(1, .2, .1, 1) forwards drawLine
}

#animate {
    position: relative;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    color: #4bb543;
    outline: 0
}

#animate:active {
    background: rgba(255, 255, 255, .1)
}

.product-card.mb-4rem {
    padding-bottom: 5rem !important
}

.float-right {
    float: right !important
}

.author-wrap .register-form h4,
.intro-popup .enquiry_form h4 {
    font-size: 1.2rem
}

.author-wrap .register-form .form-select {
    font-size: 15px;
    font-weight: 500;
    display: block;
    height: 44px;
    padding: .65rem 1rem;
    color: var(--body-color);
    border-radius: .375rem;
    border: 0;
    cursor: pointer;
    border-bottom: 2px solid rgba(0, 0, 0, .08)
}

.action-btns .call-btn {
    margin-right: 30px
}

.action-btns .btn.call {
    width: 48px;
    height: 48px;
    line-height: 46px;
    font-size: 20px;
    text-align: center;
    padding: 0;
    transition: .2s ease-in-out
}

.action-btns .call-btn .number {
    margin-left: 15px
}

.action-btns .call-btn .number h6 a {
    text-decoration: none;
    color: var(--bs-dark);
    transition: .2s ease-in-out
}

.action-btns .call-btn:hover .number h6 a {
    color: var(--bs-primary);
    text-decoration: underline
}

.padding-left-20 {
    padding-left: 20px
}

.featured-logo,
.featured-logo img {
    display: block;
    margin: auto
}

.intro-popup {
    z-index: 1099;
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    visibility: hidden;
    opacity: 0;
    transition: 1s
}

.intro-popup.show {
    visibility: visible;
    opacity: 1
}

.intro-popup .box {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    opacity: 0;
    border-radius: 8px;
    margin-left: 50px;
    transition: 1s
}

.intro-popup.show .box {
    opacity: 1;
    margin-left: 0
}

.intro-popup .box .img-area {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
    overflow: hidden;
    display: block
}

.intro-popup .box .form {
    padding: 15px 20px 20px
}

.intro-popup .box .form .form-control {
    height: 40px;
    padding: .5rem 1rem
}

.intro-popup .box .close-modal {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    right: 10px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    border-radius: 50px;
    background-color: #ee283c
}

.xdsoft_datetimepicker {
    border: none !important;
    z-index: +99999999999 !important
}

.hero-content-wrap select.form-control {
    height: 50px;
    cursor: pointer
}

.hero-content-wrap .btn.message {
    height: 48px;
    padding: .44rem 1rem
}

#fixed-form-container {
    position: fixed;
    bottom: 35px;
    left: auto;
    width: 390px;
    text-align: end;
    margin: 0;
    z-index: +99999
}

#fixed-form-container .button:before {
    content: "+ "
}

#fixed-form-container .expanded:before {
    content: "- "
}

#fixed-form-container .button {
    font-size: 16px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #175cff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px 5px 0 0;
    padding: 7px 20px;
    background-color: #175cff;
    color: #fff;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: 4px 0 5px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 4px 0 5px 0 rgba(0, 0, 0, .3);
    box-shadow: 4px 0 5px 0 rgba(0, 0, 0, .3)
}

#fixed-form-container .body {
    text-align: start;
    background-color: #071c4d;
    border-radius: 5px 0 5px 5px;
    border: 2px solid #175cff;
    margin-bottom: 16px;
    padding: 10px;
    -webkit-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, .3);
    box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, .3)
}

#fixed-form-container .body .hero-subscribe-form .form-control {
    color: #efefef;
    font-weight: 600;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, .12)
}

#fixed-form-container .body .hero-subscribe-form select:invalid {
    color: #efefef
}

#fixed-form-container .body .hero-subscribe-form select option {
    color: #071c4d
}

#fixed-form-container .body .hero-subscribe-form .btn.buy-button {
    background-color: #fff;
    border-color: #fff;
    color: #071c4d;
    padding: .54rem 1rem;
    box-shadow: none
}

.form-msg-area {
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
    height: 100vh;
    padding: 140px 15px 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    vertical-align: center
}

.dropdown-toggle::after,
.link-with-icon i,
.read-more-link i,
.show-more .far,
.sw__hero__countdown__dates {
    vertical-align: middle
}

.radio,
.radio-checkmark-box {
    align-items: center;
    display: flex
}

.form-msg-area .form-block {
    width: 460px;
    background-color: #fff;
    padding: 0 25px 25px;
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: rgba(149, 157, 165, .15) 0 0 24px
}

.form-msg-area h4 {
    margin: 14px 0 10px;
    font-weight: 600
}

.bottom-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    background: #ddd;
    padding: 15px 20px
}

.bottom-footer p a {
    color: #175cff;
    text-decoration: none;
    font-weight: 700
}

.certification-block img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    margin-right: 15px;
    filter: gray;
    -webkit-filter: grayscale(1)
}

.pre-book-form.register-form label:not(.form-check-label) {
    font-size: 13px;
    color: var(--bs-dark)
}

.show-hidden-block,
.show-hidden-block1,
.show-hidden-block2,
.show-hidden-block3,
.show-hidden-block4 {
    font-weight: 500;
    text-decoration: none
}

.availablity_form .theme_btn:hover,
.review_img_block .play_button:hover,
.testimonialSwiper .swiper-slide,
.whatmakeSwiper .swiper-slide {
    opacity: .7
}

.radio {
    position: relative;
    cursor: pointer;
    user-select: none;
    font-weight: 600
}

.radio:hover .checkbox-checkmark {
    border: 2px solid #6340ff
}

.radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.radio-input:disabled:checked~.radio-checkmark-box .radio-checkmark:after {
    background: url("data:image/svg+xml,%3Csvgwidth='14'height='10'viewBox='001410'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M4.88669.91722L0.08733485.36761C0.05965665.341370.0376925.310180.02270395.27582C0.007715855.2414605.2046105.1674C05.130190.007715855.093350.02270395.05899C0.0376925.024630.05965664.993430.08733484.96719L1.298933.81086C1.414713.700491.601833.700491.717613.81086L4.877186.80501C4.992966.915385.181436.914095.29726.80372L12.27870.0839022C12.3945-0.027752612.5829-0.027752612.70010.0826188L13.9131.23895C14.02881.3493214.02881.5277113.91431.63809L6.308218.95468L6.309568.95597L5.306629.91722C5.1908510.02765.0023810.02764.88669.91722Z'fill='%2374767B'/%3E%3C/svg%3E%0A") center/contain no-repeat
}

.radio-checkmark-box {
    min-width: 26px;
    max-width: 26px;
    min-height: 26px;
    max-height: 26px;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%
}

.radio-checkmark {
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    border-radius: 50%;
    cursor: pointer
}

.radio-checkmark.black {
    border-color: #000;
    background-color: #000
}

.radio-checkmark.rosegold {
    border-color: #d89d93;
    background-color: #d89d93
}

.radio-input:focus~.radio-checkmark-box.rosegold {
    border-color: #d89d93
}

.radio-input:checked~.radio-checkmark-box.rosegold .radio-checkmark {
    background-color: #d89d93;
    border: 2px solid #d89d93
}

.radio-input:disabled~.radio-checkmark-box.rosegold .radio-checkmark {
    border: 2px solid #d89d93;
    cursor: not-allowed
}

.radio-input:disabled:checked~.radio-checkmark-box.rosegold .radio-checkmark {
    background-color: #d89d93
}

.radio-input:focus~.radio-checkmark-box.black {
    border-color: #000
}

.radio-input:checked~.radio-checkmark-box.black .radio-checkmark {
    background-color: #000;
    border: 2px solid #000
}

.radio-input:disabled~.radio-checkmark-box.black .radio-checkmark {
    border: 2px solid #000;
    cursor: not-allowed
}

.radio-input:disabled:checked~.radio-checkmark-box.black .radio-checkmark {
    background-color: #000
}

.radio-checkmark:after {
    content: "";
    display: none;
    background: url("data:image/svg+xml,%3Csvgwidth='11'height='7'viewBox='001410'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M4.88669.91722L0.08733485.36761C0.05965665.341370.0376925.310180.02270395.27582C0.007715855.2414605.2046105.1674C05.130190.007715855.093350.02270395.05899C0.0376925.024630.05965664.993430.08733484.96719L1.298933.81086C1.414713.700491.601833.700491.717613.81086L4.877186.80501C4.992966.915385.181436.914095.29726.80372L12.27870.0839022C12.3945-0.027752612.5829-0.027752612.70010.0826188L13.9131.23895C14.02881.3493214.02881.5277113.91431.63809L6.308218.95468L6.309568.95597L5.306629.91722C5.1908510.02765.0023810.02764.88669.91722Z'fill='white'/%3E%3C/svg%3E%0A") center/contain no-repeat;
    width: 14px;
    height: 10px
}

.page-header {
    z-index: 9
}

.breadcrumb-item a {
    color: var(--bs-success);
    text-decoration: none
}

.single-feature-promo .feature-icon {
    width: 60px;
    height: 60px;
    line-height: 70px;
    text-align: center;
    margin: 0 auto
}

.bg-gray {
    background-color: #dcdcdf70
}

.faq-img img {
    display: block;
    width: 75%;
    margin: 0 auto
}

.register-wrap.lock-inquiry {
    position: relative;
    margin-bottom: -80px
}

.blink-soft {
    animation: 1.2s linear infinite blinker
}

.highlight-text h6,
.shine_text {
    -webkit-animation-iteration-count: infinite
}

@keyframes blinker {
    50% {
        opacity: .3
    }
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s
}

.read-more-state:checked~.read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em
}

.read-more-state~.read-more-trigger:before {
    content: "Show more"
}

.read-more-state:checked~.read-more-trigger:before {
    content: "Show less"
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    color: var(--bs-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: inherit
}

.product-banner-section.k1_style {
    height: 65vh
}

.style_pro {
    position: relative;
    top: -3px;
    border: 1px solid #071c4d;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: .8 !important
}

.new_label {
    background-color: #ee283c;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.35;
    padding: 0 4px
}

.dropdown-grid-item a:hover,
.watch-now-btn:hover i {
    background: var(--bs-light)
}

.single-article,
.testi_text {
    word-wrap: break-word
}

.featured-logo img {
    max-height: 50px
}

.available_block {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #efefef;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.availablity_form .form-control {
    padding: .375rem 1.25rem .375rem 40px;
    height: 54px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    border: 0;
    background-color: #fff;
    box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .4)
}

.availablity_form .theme_btn {
    position: relative;
    margin-top: -46px;
    margin-right: 9px;
    float: right;
    outline: 0;
    border: 0;
    padding: 6px 18px;
    opacity: 1;
    font-size: 15px;
    font-weight: 600;
    border-radius: 7px;
    overflow: hidden;
    color: #fff;
    background: #54af3a;
    background: -moz-linear-gradient(135deg, #54af3a 0, #b0cb1f 100%);
    background: -webkit-linear-gradient(135deg, #54af3a 0, #b0cb1f 100%);
    background: linear-gradient(135deg, #54af3a 0, #b0cb1f 100%);
    transition: .3s ease-in-out
}

.availablity_form .icofont {
    position: relative;
    float: left;
    color: #888;
    font-size: 18px;
    margin-top: -36px;
    margin-left: 16px
}

.availablity_form .form-control::placeholder {
    font-size: 16px;
    font-weight: 400;
    color: #555
}

.availablity_form .form-control::-moz-placeholder {
    font-size: 16px;
    font-weight: 400;
    color: #555
}

.availablity_form .form-control::-webkit-input-placeholder {
    font-size: 16px;
    font-weight: 400;
    color: #555
}

.available {
    color: #54af3a
}

.not-available {
    color: red
}

.featured_icon {
    width: 100%;
    height: 90px;
    border-radius: 10px;
    background-color: #f8f9fa
}

.featured_icon img {
    position: relative;
    display: block;
    width: 100%;
    top: 18px;
    height: 50px;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
    transform: scale(.8)
}

.review-content {
    text-align: center
}

.review_img_block {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px
}

.review_img_block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.review_img_block .play_button {
    position: absolute;
    top: 40%;
    left: 90%;
    transform: translate(-90%, -40%);
    width: 50px;
    height: auto;
    margin: auto;
    z-index: 1;
    opacity: 1;
    transition: .2s ease-in-out
}

.rating i {
    font-size: 15px;
    line-height: 25px;
    opacity: 1;
    color: #ffb116
}

.d-flex {
    height: auto !important
}

.review-info-wrap img {
    width: 64px;
    height: 64px
}

.section-heading .custom_title {
    position: relative;
    bottom: -35px;
    font-size: 70px;
    line-height: 1;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke: 2px #EFEFEF;
    text-stroke: 2px #EFEFEF
}

.shine_text {
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(.5, #ddd)) no-repeat #fff;
    -webkit-background-size: 150px;
    color: rgba(255, 255, 255, .3);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 5s;
    text-shadow: 0 0 0 rgba(255, 255, 255, .5)
}

@-webkit-keyframes shine {

    0%,
    10% {
        background-position: -1000px
    }

    20% {
        background-position: top left
    }

    90% {
        background-position: top right
    }

    100% {
        background-position: 1000px
    }
}

.coupon__wrap {
    position: relative;
    display: flex;
    flex-flow: row;
    width: 100%;
    border-radius: 6px;
    border: 1px dashed var(--body-color);
    background-color: #4c4C4C05
}

.coupon__wrap .coupon__title {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 35%;
    padding: 10px
}

.coupon__wrap .coupon__title:before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 100%;
    border: 1px dashed var(--body-color)
}

.coupon__wrap .coupon__title:after {
    content: "";
    position: absolute;
    top: -11px;
    right: -10px;
    width: 20px;
    height: 10px;
    background-color: #fff
}

.coupon__wrap .coupon__title .couple__category {
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--body-color)
}

.coupon__wrap .coupon__title .coupon__max {
    font-size: 12px;
    color: var(--body-color)
}

.coupon__wrap .coupon__detail {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    flex: 0 0 auto;
    width: 65%;
    padding: 10px 10px 10px 15px
}

@media (max-width:991px) {
    .coupon__wrap .coupon__detail {
        width: 70%
    }
}

.coupon__wrap .coupon__detail:before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 100%;
    border: 1px dashed var(--body-color)
}

.coupon__wrap .coupon__detail:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: -10px;
    width: 20px;
    height: 10px;
    background-color: #fff
}

.coupon__wrap .coupon__detail .coupon__price {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--body-color)
}

.coupon__wrap .coupon__detail .coupon__info {
    display: flex;
    flex-flow: column;
    align-items: flex-start
}

.coupon__wrap .coupon__detail .coupon__info span {
    margin-bottom: 0;
    font-size: 12px;
    text-align: left;
    color: var(--body-color)
}

.coupon__wrap .coupon__footer {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: start;
    margin-top: 5px
}

.coupon__wrap .coupon__footer .coupon__btn .coupon-btn,
.coupon__wrap .coupon__footer .coupon__condition {
    display: inline-flex;
    padding: 5px 10px;
    text-decoration: none
}

.coupon__wrap .coupon__footer .coupon__condition {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-warning-dark);
    background-color: #fba70020
}

.coupon__wrap .coupon__footer .coupon__btn .coupon-btn {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    border: none;
    background-color: var(--bs-warning-dark);
    transition: .2s ease-in-out
}

.coupon__wrap .coupon__footer .coupon__btn .coupon-btn:hover {
    background-color: var(--bs-warning-light)
}

.coupon__wrap .coupon__border {
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: calc(100% - 30px);
    transform: translateY(-50%);
    border-left: 1px dashed #4c4C4C95
}

.coupon-alert {
    display: none;
    margin-left: 5px;
    color: var(--bs-success)
}

.highlight-text h6,
.show-more {
    display: block;
    font-weight: 600
}

.video_frame {
    overflow: hidden;
    border-radius: 10px
}

.blog-btn {
    color: var(--bs-white);
    background-color: var(--bs-success)
}

.blog-btn:hover {
    color: var(--bs-white);
    background-color: var(--bs-success-dark)
}

.support-form {
    height: 365px
}

@media (max-width:575px) {
    .support-form {
        height: 820px
    }
}

.comparison-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    border-right: 0px;
    border-bottom: 0
}

.comparison-table td,
.comparison-table th {
    padding: 12px 20px;
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef
}

.comparison-table th {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    border-top: 0;
    border-left: 0;
    color: #2f353e
}

.comparison-table th.gray-bg {
    background-color: #efeFEF76
}

.comparison-table td {
    font-weight: 400;
    line-height: 1.45;
    text-align: center
}

.comparison-table td:first-of-type {
    color: #2f353e;
    font-weight: 500;
    text-align: start;
    border-left: 0
}

.comparison-table td .icon {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background-size: contain
}

.comparison-table td .icon-check {
    background-image: url('https://ik.imagekit.io/deltahome/landing/check.svg')
}

.comparison-table td .icon-cross {
    background-image: url('https://ik.imagekit.io/deltahome/landing/cross.svg')
}

.comparison-table>tbody>tr>td:nth-child(2) {
    background-color: #efeFEF75
}

.comperission_width {
    width: 45%
}

.show-more-height {
    position: relative;
    height: 270px;
    overflow: hidden
}
.show-more-height.style_faq {
  height:395px;
  margin:-30px;
  padding:30px;
}
.show-more.style_faq {
  z-index:99;
}

.show-more {
    position: relative;
    text-align: center;
    color: var(--bs-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.3rem
}

.sw__hero__countdown__date_label,
.sw__hero__countdown__dates {
    font-stretch: normal;
    font-style: normal;
    text-align: center;
    color: #fff
}

.show-more .far {
    font-size: 21px
}

/* .highlight-text {
    border-radius: 6px;
    background-color: #ffb6b6
}

.highlight-text h6 {
    text-align: center;
    padding: 4px;
    color: red;
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate
} */

@-webkit-keyframes blinker {
    from {
        opacity: 1
    }

    to {
        opacity: .85
    }
}

.doubts_btn span {
  display: inline;
  text-decoration: blink;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

.sw__hero__countdown__wrapper .wrap {
    text-align: center;
    position: relative;
    margin-right: 5px
}

.sw__hero__countdown__wrapper .links {
    display: flex;
    justify-content: space-between;
    position: relative
}

.sw__hero__countdown__wrapper .wrap:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .12);
    width: 100%;
    transform: translateY(-50%);
    z-index: 1
}

.sw__hero__countdown__wrapper {
    text-align: center;
    margin: 0 5px;
    position: relative;
    display: inline-block;
    animation: 0s 1.2s forwards showHeroText;
    visibility: hidden
}

.sw__hero__arrow_container {
    position: absolute;
    top: 88%
}

.sw__hero__countdown__wrapper .link::before {
    content: '';
    position: relative;
    top: 50%;
    left: 0;
    border-top: 1px solid #000;
    background: #000;
    width: 100%;
    transform: translateY(-50%)
}

.sw__hero__countdown__date_container {
    background-color: var(--bs-dark);
    border-radius: 4px;
    height: 34px;
    vertical-align: middle;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between
}

.sw__hero__countdown__dates {
    margin: 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    display: inline-block
}

.sw__hero__countdown__date_label {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 2px;
    margin: 8px 0 0;
    text-transform: uppercase
}

@-webkit-keyframes showHeroText {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes showHeroText {
    to {
        visibility: visible
    }
}

.live_book_btn {
    display: block;
    width: 100%;
    height: 50px;
    padding: 11px 0;
    color: red;
    border: 2px solid red;
    background-color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: initial !important;
    min-height: 40px;
    border-radius: 7px
}

.live_book_btn span {
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes glow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 5px red;
        opacity: 1
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 20px red;
        opacity: .85
    }
}

.template-page .headannunce,
.template-product .headannunce,
.template-collection .headannunce,
.template-blog .headannunce,
.template-article .headannunce{
  background-color: #0b163f !important;
  border-bottom:1px solid rgb(255,255,255,0.15);
}

.template-cart .header-wrapper {
  position: relative;
  top: inherit;
  left: inherit;
  right: inherit;
  background: #0b163f!important;
}
@media (min-width: 992px) {
    .template-cart .header--middle-left.page-width, 
    .template-cart .wbmenuup>.page-width {
        position: relative;
        border-top:1px solid rgba(255,255,255,.13);
        background: #0b163f !important;
    }
}
.template-cart .content-for-layout {
  padding: 25px 0px 50px;
  background-color: #FFF;
}
@media only screen and (min-width: 360px) {
    .template-cart .shiprocket-headless[data-type="cart"] .sr-headless-checkout {
        background-color: var(--bs-primary) !important;
        color: #FFF;
    }
}


.comparission-block.style_home {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}
.comparission-block.style_home:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(239, 239, 239, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
}
.comparission-block.style_home:after,
.show-more-height.style_faq:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(
    0deg,
    rgba(239, 239, 239, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
}
.show-more-height.style_faq:after {
  height: 90px;
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 25%, rgba(255,255,255,0.4962359943977591) 50%, rgba(255,255,255,0) 100%);
}
.comparission-block.style_home .show-more-height {
    height: 490px;
}
.comparission-block.style_home .comparison-table,
.comparission-block.style_home .show-more {
  position:relative;
  z-index: 2;
  background-color: transparent;
}
.comparison-table .table_color {
  display: flex;
  text-transform: capitalize;
  font-size: calc(var(--font-body-scale)* 14px);
  font-weight: var(--font-body-weight);
  color: rgb(var(--color-foreground), .6);
}
.comparison-table .table_color .color {
  margin-right:3px;
  min-height: 0px;
  padding:0px;
  width:16px;
  height:16px;
  border-radius:50px;
  border:1px solid #EFEFEF;
}
.comparison-table .table_color .color.bronze {
  background-color: #DEB7A9;
}
.comparison-table .table_color .color.black {
  background-color: #000000;
}
.comparison-table img {
  width: auto;
  height: 85px;
}
.style_home .comparison-table>tbody>tr>td:nth-child(2) {
    background-color: transparent;
}
.comparission-block.style_home .comperission_width {
    width: 20%;
}
.comparission-block.style_home .comparison-table th {
  position: relative;
}
.comparission-block.style_home .comparison-table th .table_modal_name {
  position: relative;
  font-size: 16px;
  font-weight: bold;
}
.switch_banner {
    position: relative;
    overflow: hidden;
}
.switch_banner,
.switch_banner.style_curtain video {
    height: 565px;
}
/* .switch_banner.sec_beaty {
    height: 640px;
} */
.switch_banner .mockup_img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 152px;
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
}
.switch_banner .mockup_img img {
    display: block;
    width: 250px;
    height: auto;
}
.switch_banner .mockup_img .img_center {
    z-index: 99;
}
.switch_banner .mockup_img .img_center img {
    position: relative;
    transform: scale(1.3);
    top: -19px;
}
.switch_banner.sec_mixcontrol,
.switch_banner.sec_mixcontrol video {
    height: 650px;
}
.switch_banner.sec_mixcontrol .switchBanner_content {
    top: 15%;
    justify-content: start;
    background-color: transparent;
}
.switch_banner.sec_mixcontrol video,
.switch_banner.style_curtain video {
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}
.switch_banner .switchBanner_content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #0D0D0F;
}
.switch_banner .switchBanner_content.p_relative {
    position: relative;
    top: inherit;
    left: inherit;
    display: inherit;
    flex-wrap: inherit;
    flex-direction: inherit;
    justify-content: inherit;
    width: inherit;
    height: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #0D0D0F;
}
.switch_banner .switchBanner_content h2,
.switch_banner .switchBanner_content h5 {
    color: #FFF;
    text-shadow: 0 0 50px rgba(0, 0, 0, .9);
}
.switch_banner .switchBanner_content .mouse_scroll {
    position: absolute;
    bottom: 30px;
    left: 9%;
}
.security_guarntee .security_block {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: .25s ease-in;
    background-color: #D6E9F7;
}
/* .security_guarntee .security_block::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(255,255,255,1) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
} */
.security_guarntee .security_block h3 {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #FFF;
}
/* .security_guarntee .security_block.bg_gray {
    background-color: #D8D8DF;
}
.security_guarntee .security_block:hover {
    transform: scale(1.02);
} */
.experience_ai .ai_block {
    display: block;
    width: 100%;
    height: 350px;
    overflow: hidden;
    padding: 40px 40px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right top;
    background-color: #FFF;
    box-shadow: 0 0 12px #00000005;
    transition: all .3scubic-bezier(0,0,.5,1);
}
.switch_title h2 span {
    color: #6E6E73;
}
.experience_ai h3,
.experience_ai p {
    color: #FFF;
}
.switch_title h2 {
    color: #0D0D0F;
}
.experience_ai,
.security_guarntee {
    background-color: #FFF;
}
.experience_ai .ai_block.mobile_access {
    background-image: url('https://ik.imagekit.io/deltahome/switches/pixel/mobile-access1.jpg?tr=w-800,h-auto,fo-webp');
}
.zigbee_area {
    position: absolute;
    bottom: 50px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 690px;
    /* display: flex;
    flex-wrap: wrap; */
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid #B0BDCC;
    background-color: rgb(255,255,255,0.8);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 24px;
    z-index: 9;
}
.zigbee_area .form-control {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
}
.zigbee_area .form-control::placeholder {
    opacity: 1;
    color: #0D0D0F !important;
}
.zigbee_area .form-control::-moz-placeholder {
    opacity: 1;
    color: #0D0D0F !important;
}
.zigbee_area .form-control::-webkit-input-placeholder {
    opacity: 1;
    color: #0D0D0F !important;
}
.zigbee_area .zigbee_block {
    flex: 0 0 auto;
    width: auto;
    text-align: center;
    margin-right: 15px;
}
.zigbee_area .zigbee_block.last {
    margin-right: 0;
}
.style_zigbee {
    position: relative;
    padding: 70px 0 80px;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 64%;
}
.style_zigbee .feature_img {
    width: 80%;
}

/* .switch_banner.style_curtain .sh-one {
    background-color: rgba(213, 192, 58, .04);
    top: 0;
    left: 0;
    animation: sh-ripple 2s ease .2s infinite;
    z-index: 999999;
}
.switch_banner.style_curtain .sh-one {
    width: 3.65rem;
    height: 3.65rem;
    position: relative;
    border-radius: 50%;
}
.switch_banner.style_curtain .sh-two {
    background-color: rgba(213,192,58,.06)
}
.switch_banner.style_curtain .sh-three {
    background-color: rgba(213,192,58,.1);
    opacity: .1
}
.switch_banner.style_curtain .sh-five,
.switch_banner.style_curtain .sh-four {
    background-color: rgba(213,192,58,.29)
}
.switch_banner.style_curtain .sh-six {
    background-color: rgba(222,194,11,.71)
}
@keyframes sh-ripple {
    0% {
        transform: scale(0);
        transform-origin: 50% 50%
    }

    50% {
        opacity: 1
    }

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

.fix_custimze {
    position: fixed;
    bottom: 88px;
    right: 30px;
    border-radius: 50px;
    background-color: #FFF;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 28px;
    z-index: +99999999;
}
.fix_custimze .custimize_btn {
    display: block;
    margin: 3px 3px;
    padding: 6px 12px;
    font-weight: 600;
    border-radius: 50px;
    color: #FFF;
    background-color: var(--bs-primary);
}

@media (max-width: 767px) {
    .switch_banner,
    .switch_banner video {
        height: 620px;
    }
    .switch_banner.style_beauty,
    .switch_banner.style_beauty video {
        height: 460px;
    }
    .switch_banner.sec_mixcontrol {
        height: auto;
    }
    .switch_banner.sec_mixcontrol video {
        height: 260px;
    }
    .switch_banner.style_curtain {
        height: auto;
        background-color: #FFF;
    }
    .switch_banner.style_curtain video {
        height: 260px;
        object-position: left center
    }
    .switch_banner.sec_mixcontrol .switchBanner_content {
        position: relative;
        display: block;
        top: inherit;
        left: inherit;
        right: inherit;
    }
    .switch_banner.sec_mixcontrol .switchBanner_content h2,
    .switch_banner.sec_mixcontrol .switchBanner_content p {
        color: #0D0D0F !important;
        text-shadow: none;
    }
    .switch_banner.sec_mixcontrol .switchBanner_content .container {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .switch_banner .switchBanner_content {
        justify-content: start;
    }
    .switch_banner .switchBanner_content .container {
        padding-top: 50px;
    }
    .switch_banner .mockup_img img {
        width: 200px;
    }
    .switch_banner .mockup_img {
        bottom: 130px;
    }
    .switch_banner .mockup_img .img_center img {
        top: -10px;
    }
    .security_guarntee .security_block {
        height: 240px;
    }
    .experience_ai .ai_block.mobile_access {
        height: 350px;
        background-image: url('https://ik.imagekit.io/deltahome/switches/pixel/mob_mobile-access1.jpg?tr=w-600,h-auto,fo-webp');
    }
    .experience_ai .ai_block {
        padding: 30px 30px;
        height: 400px;
    }
    .style_zigbee {
        padding: 50px 0 210px;
        background-size: 100%;
    }
    .style_zigbee .feature_img {
        width: 100%;
    }
    .switch_banner .switchBanner_content .row {
        justify-content: center;
        text-align: center;
    }
    .zigbee_area {
        position: relative;
        bottom: inherit;
        right: inherit;
        left: inherit;
        margin: 0px auto -20px;
        width: 95%;
        background-color: #FFF;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 24px;
    }
    .fix_custimze {
        bottom: 90px;
        right: 28px;
    }
  .fix_custimze .custimize_btn {
        padding: 6px 11px;
  }
    .switch_banner .switchBanner_content .banner_video {
        position: relative;
        height: 350px;
        left: 80px;
        transform: scale(2.2) !important;
    }
}
.switch_banner .switchBanner_content .banner_video {
    width: 100%;
    transform: scale(1.5);
}
.switch_banner .switchBanner_content .container .col-md-5 {
    position: relative;
    z-index: 9;
}
.modal-dialog.style_msg {
    max-width: 240px;
    margin: 15px 15px 0 auto;
}
.modal-dialog.style_msg .btn-close {
    position: absolute;
    top: 7px;
    right: 10px;
    opacity: .2;
}
.modal-dialog.style_msg .modal-content {
    padding: 12px 15px;
    border: none;
}
.modal-dialog.style_msg .modal-content.success {
    border-left: 3px solid var(--bs-success-dark);
}
.modal-dialog.style_msg .modal-content.error {
    border-left: 3px solid var(--bs-danger-dark);
}
.modal-dialog.style_msg .modal-content.success h5 {
    color: var(--bs-success-dark);
}
.modal-dialog.style_msg .modal-content.error h5 {
    color: var(--bs-danger-dark);
}
.modal-dialog.style_msg .modal-content p {
    color: rgb(47, 53, 62);
}