/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --navi_blue: #0019c9;
    --green: #007b75;
    --yellow: #996b00;
    --black: #000000;
    --gray: #555C62;
    --dark: #454545;
    --light_bg: #f5f5f5;
    --light_blue_bg: #eff4ff;
    --light_green_bg: #e5f7ee;
}
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0px; margin: 0px; }
html { width: 100%; height: 100%; font-family: "Jost", sans-serif; font-weight: normal; scroll-behavior: smooth; }
body { width: 100%; height: 100%; font-family: "Jost", sans-serif; font-weight: normal; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background-color: #DDDDDD; -webkit-border-radius: 0px; border-radius: 0px; }
body::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #29282D; }
ul, ol { list-style: none; margin: 0px; padding: 0px; }
a { font-family: "Jost", sans-serif; display: inline-block; vertical-align: top; color: var(--navi_blue); outline: none !important; box-shadow: none; text-decoration: none; font-weight: 500; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
a:hover, a:focus, a:active { color: var(--primary); outline: none !important; box-shadow: none; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: "Jost", sans-serif; font-weight: 400; padding: 0px; margin: 0px; }
h1, .heading { font-size: 50px; line-height: 60px; font-weight: 700; color: #414141; text-transform: none; margin-bottom: 20px; }
h2 { color: #454545; font-size: 48px; font-weight: 700; line-height: 64px; margin-bottom: 12px; }
h3 { color: #454545; font-size: 38px; font-weight: 800; line-height: 44px; }
h4 { font-size: 24px; line-height: 34px; color: var(--dark); font-weight: 700; }
h5 { font-size: 20px; line-height: 30px; color: var(--dark); font-weight: 500; }
h6 { font-size: 16px; line-height: 26px; color: var(--dark); font-weight: 500; }
p { font-family: "Jost", sans-serif; font-size: 16px; line-height: 24px; color: var(--dark); font-weight: 400; margin-bottom: 20px; word-break: break-word; }
p:last-of-type { margin-bottom: 0px; }
figure { padding: 0px; margin: 0px; }
button { font-family: "Jost", sans-serif; outline: none !important; box-shadow: none; }
.btn { border-radius: 12px; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; color: var(--white); font-size: 16px; font-weight: 500; line-height: 22px; position: relative; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; outline: none !important; }
.btn:not(.btn-loader) img { height: 14px; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
.btn:not(.btn-loader):hover img { -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -ms-transform: translateX(6px); -o-transform: translateX(6px); transform: translateX(6px); }
.btn:hover, .btn:focus, .btn:active { color: var(--white); background-color: var(--navi_blue); border-color: var(--navi_blue); outline: none !important; box-shadow: none !important; }
.btn-rev { color: var(--primary); border: 1px solid var(--primary); background-color: transparent; padding: 15px 30px; }
.btn-rev:hover, .btn-rev:focus, .btn-rev:active { background-image: none; background-color: var(--navi_blue); border-color: var(--navi_blue); color: var(--white); }
.btn.delete { border: 1px solid #f56e6e; color: #f56e6e; }
.btn.delete:hover { background-color: #ffb4b4; border-color: #ffb4b4; color: var(--black); }
.btn-loader { pointer-events: none; cursor: not-allowed; background-color: #f7f7f7 !important; background-image: none !important; border: 1px solid #f7f7f7 !important; color: #cccccc !important; box-shadow: none !important; }
.btn-loader:after { content: ""; width: 18px; height: 18px; border: 2px solid var(--dark); border-top-color: #f7f7f7; display: inline-block; vertical-align: middle; border-radius: 50%; margin-left: 8px; -webkit-animation: spin 0.6s linear infinite; animation: spin 0.6s linear infinite; }
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.text-blue { color: var(--primary); }

/* For SVG Icons */
.icon { display: inline-block; stroke-width: 0; stroke: currentColor; fill: currentColor; }
/* For SVG Icons */

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"], input[type="date"], input[type="search"], textarea, select { width: 100%; height: 46px; line-height: 44px; background-color: var(--white); padding: 0px 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; font-size: 14px; color: var(--dark); font-weight: 400; }
textarea { line-height: 20px; resize: none; height: 100px; }
input[type="email"]:disabled { cursor: not-allowed; color: #BBBBBB; background-color: #F9F9F9; }
select { background-image: url(../images/select-dropdown.png); background-repeat: no-repeat; background-position: right 10px center; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; padding-right: 30px; }
input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus, select:focus, textarea:focus { outline: none !important; }
textarea { padding: 10px; }
input.btn { min-width: 100px; }
input::-webkit-input-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
input:-moz-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
input::-moz-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
input:-ms-input-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
textarea::-webkit-input-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
textarea:-moz-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
textarea::-moz-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
textarea:-ms-input-placeholder { font-size: 13px; color: var(--gray); opacity: 1; text-transform: capitalize; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; }
.contact-form li { position: relative; margin-bottom: 25px; }
.contact-form li:last-child { margin-bottom: 0px; }
.container, .container-fluid { position: relative; z-index: 3; }
.form-group { margin-bottom: 24px; }
.form-group.submit { margin-top: 0px; }
.form-group:last-child { margin-bottom: 0px; }
.form-group label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dark); text-transform: capitalize; text-align: left; margin: 0px 0px 4px; display: inline-block; vertical-align: top; width: 100%; }
.form-group label sup { color: #f34e3a; top: -2px; }
.form-group span { font-size: 12px; line-height: 12px; display: inline-block; width: 100%; margin-top: 8px; }
.form-group span.input-group-append { background-color: var(--white); }
.form-group span i { margin-right: 4px; }
.form-group .custom-checkbox { margin-bottom: 24px; padding-left: 30px; }
.form-group .custom-checkbox:last-child { margin-bottom: 0px; }
.form-group .custom-control-label { font-size: 13px; line-height: 20px; font-weight: 400; text-transform: none; margin: 0px; }
.form-group .custom-checkbox .custom-control-label:before { top: 3px; left: -30px; width: 20px; height: 20px; border-radius: 2px; }
.form-group .custom-checkbox .custom-control-label:after { top: 3px; left: -30px; width: 20px; height: 20px; }
.form-group .viewIcon { display: inline-flex; margin: 0px; position: absolute; right: 10px; top: 15px; width: auto; cursor: pointer; }
.form-group .viewIcon .iconShow { display: block; }
.form-group .viewIcon .iconHide { display: none; }
.custom-radio .custom-control-label:before { width: 16px; height: 16px; box-shadow: none !important; }
input[type="radio"] { position: absolute; left: 0px; }
.custom-control-input { left: 0px; top: 0px; }
.custom-control-input:checked ~ .custom-control-label::before { color: var(--white); border-color: var(--primary); background-color: var(--primary); }
.div-recaptcha { max-width: 100%; }
mark, .mark { background-color: var(--white); }
.g-recaptcha { transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0; }

@media only screen and (max-width:1499.98px) {
    input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 14px; }

    h3 { font-size: 30px; line-height: 40px; }
}
@media only screen and (max-width:1199.98px) {
    h1, .heading { font-size: 40px; line-height: 46px; }
    h2 { font-size: 36px; line-height: 44px; }
}
@media only screen and (max-width:991.98px) {
    h1, .heading { font-size: 36px; line-height: 46px; }
    h2 { font-size: 30px; line-height: 38px; }
    h3 { font-size: 28px; line-height: 38px; }
    h5 { font-size: 18px; line-height: 28px; font-weight: 700; }
    .contact-form li { margin-bottom: 15px; }
    .container { padding: 0px 20px; }
}
@media only screen and (max-width:767.98px) {
    h1, .heading { font-size: 30px; line-height: 40px; }
    h2 { font-size: 28px; line-height: 36px; }
    h3 { font-size: 26px; line-height: 36px; font-weight: 700; }
    h4 { font-size: 20px; line-height: 30px; font-weight: 700; }
    h6 { line-height: 24px; }
}
@media only screen and (max-width:639.98px) {
    .form-group:last-child { margin-bottom: 0px; }
    .form-group .custom-control-label { font-size: 12px; }
}
@media only screen and (max-width:575.98px) {
    .form-group label { font-size: 14px; line-height: 20px; }
    .btn { padding: 10px 20px; font-size: 14px; line-height: 20px; }
}
@media only screen and (max-width:479.98px) {
    p { font-size: 14px; line-height: 24px; }
}
@media only screen and (max-width:374.98px) {
    .btn { padding: 8px 18px; }
}

@media (min-width:1200px) {
    .collapse.dont-collapse-lg { display: block; height: auto !important; visibility: visible; }
    .collapsing.dont-collapse-lg { display: block; height: auto !important; visibility: visible; }
}
@media (min-width:992px) {
    .collapse.dont-collapse-md { display: block; height: auto !important; visibility: visible; }
    .collapsing.dont-collapse-md { display: block; height: auto !important; visibility: visible; }
}
@media (min-width:768px) {
    .collapse.dont-collapse-sm { display: block; height: auto !important; visibility: visible; }
    .collapsing.dont-collapse-sm { display: block; height: auto !important; visibility: visible; }
}

/* Spinner & Shimmer */
.gradient { animation-duration: 1.8s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%); background-size: 1000px 100%; width: 100%; height: 100%; }
@keyframes placeHolderShimmer {
  from {
    background-position: -1000px 0;
  }
  to {
    background-position: 1000px 0;
  }
}

span.top-spinner { height: 3px; width: 100%; top: 0px; left: -100%; background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary)); border-top-right-radius: 1px; border-bottom-right-radius: 1px; animation: span1 2s linear infinite; animation-delay: 0s; }
@keyframes span1 {
    0% { left: -180px }
    100% { left: 180px; }
}
span.right-spinner { height: 48px; width: 3px; top: -48px; right: 0px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--primary)); border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; animation: span2 2s linear infinite; animation-delay: 1s; }
@keyframes span2 {
    0% { top: -48px; }
    100% { top: 48px; }
}
span.bottom-spinner { height: 3px; width: 100%; right: -100%; bottom: 0px; background: linear-gradient(to left, rgba(0, 0, 0, 0), var(--primary)); border-top-left-radius: 1px; border-bottom-left-radius: 1px; animation: span3 2s linear infinite; animation-delay: 2s; }
@keyframes span3 {
    0% { right: -180px; }
    100% { right: 180px; }
}
span.left-spinner { height: 48px; width: 3px; bottom: -48px; left: 0px; background: linear-gradient(to top, rgba(0, 0, 0, 0), var(--primary)); border-top-right-radius: 1px; border-top-left-radius: 1px; animation: span4 2s linear infinite; animation-delay: 3s; }
@keyframes span4 {
    0% { bottom: -48px; }
    100% { bottom: 48px; }
}

.nav-tabs { border-bottom: 1px solid #ddd; text-align: center; justify-content: center; flex-flow: wrap; gap: 40px; margin-bottom: 50px; }
.nav-tabs .nav-item { margin-bottom: 0px; }
.nav-tabs .nav-link { border: none; border-bottom: 4px solid transparent; background: var(--white); display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 6px 18px 10px; color: #54616C; text-align: center; font-size: 16px; font-weight: 600; line-height: 24px; }
.nav-tabs .nav-link:hover { color: var(--primary); border-color: transparent;  }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--primary); border-color: var(--primary); background-color: var(--white); }
@media only screen and (max-width:991.98px) {
    .nav-tabs { gap: 10px; margin-bottom: 24px; }
}
@media only screen and (max-width: 767.98px) {
    .nav-tabs { border: none; display: block; white-space: nowrap; padding: 4px 20px; margin: 0px -20px 24px; overflow-y: hidden; overflow-x: auto; gap: 24px; -ms-overflow-style: none; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item { display: inline-block; margin-right: 6px; }
    .nav-tabs .nav-item:last-child { margin-right: 0px; }
    .nav-tabs .nav-link { background-color: #f5f5f5; border-bottom: none; border-radius: 6px; font-weight: 500; padding: 6px 24px;
        height: 40px; min-width: 120px; }
    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--secondary); color: var(--white); }
}

/* NAVBER -------------------------------------------------------*/
.navbar { width: 100%; position: fixed; left: 0px; top: 36px; text-align: left; border-bottom: 1px solid #F7F7FF; padding: 15px 0px; z-index: 101; }
body:has( .image-upload-visible) .navbar,
.navbar.top0 { top:  0px; }
.full-wrapper { padding: 0px 24px; width: 100%; margin: 0px auto; }
.navbar-brand { font-family: "Jost", sans-serif; margin: 0px; padding: 0px; text-decoration: none; color: #001C5C; z-index: 99; }
.navbar-brand img { width: 121px; }
.navbar-collapse { justify-content: space-between; margin-left: 40px; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease; transition: 0.4s ease; }
.navbar-nav, .navber-links { display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; }
.navbar-collapse > ul > li { margin-right: 6px; background: none; line-height: 0px; }
.navbar-collapse > ul > li:last-child { margin-right: 0px; }
.navbar-collapse ul li a { padding: 10px 16px; color: #54616c; font-size: 16px; line-height: 24px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; border-radius: 8px; }
.navbar-collapse ul li a img { height: 20px; }
.navbar-collapse ul li a:hover, .navbar-collapse ul li a.active { color: var(--dark); background-color: #e5e7ec; text-decoration: none; }
.navbar-collapse a.menu i { position: relative; top: -2px; }
.navbar-collapse > ul.navber-links > li { margin-right: 8px; }
.navbar-collapse > ul.navber-links > li:last-child { margin-right: 0px; }
.navbar-collapse ul > li.sale > a { position: relative; }
.navbar-collapse ul > li.sale > a:after { background-color: var(--danger); content: attr(title); color: var(--white); font-size: 14px; line-height: 20px; text-transform: capitalize; font-weight: 600; padding: 3px 8px; border-radius: 24px; margin-left: 8px; }
.navbar-collapse .login a, .navbar-collapse .create-account a { padding: 5px 10px; }
.navbar-collapse .create-account a { background-color: var(--light_blue_bg); }
.navbar-collapse .login a:hover, .navbar-collapse .create-account a:hover { color: var(--white); background-color: var(--navi_blue); border-color: var(--navi_blue); outline: none !important; box-shadow: none !important; }
.navbar-collapse .signup { margin-right: 10px; }
.navbar-collapse .removed-bg a { display: inline-flex; align-items: center; justify-content: center; height: 40px; position: relative; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--navi_blue); text-transform: none; background-color: var(--white); border: 1px solid var(--navi_blue); padding: 10px 15px; border-radius: 8px; }
.navbar-collapse .login a i, .navbar-collapse .removed-bg a i { position: absolute; font-size: 14px; opacity: 0; visibility: hidden; right: 25px; top: 11px; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease; transition: 0.4s ease; }
.navbar-collapse .removed-bg a:hover { color: var(--white); background-color: var(--primary); border-color: var(--primary); outline: none !important; box-shadow: none !important; }
.navbar-collapse .login a:hover i, .navbar-collapse .removed-bg a:hover i { opacity: 1; visibility: visible; right: 15px; }
.navbar .dropdown-toggle { font-size: 14px; line-height: 18px; text-transform: none; color: var(--dark); font-weight: 400; padding: 0px; }
.navbar .dropdown-toggle span { display: inline-block; vertical-align: top; background-image: url(../images/user.png); width: 38px; height: 38px; border-radius: 50%; background-color: var(--light_blue_bg); background-repeat: no-repeat; background-position: center; background-size: 16px; border: 1px solid var(--navi_blue); }
.navbar .dropdown-toggle:after { content: "\f0dd"; display: inline-block; vertical-align: top; border: none; font-family: FontAwesome; text-align: center; font-weight: normal; margin-left: 5px; margin-top: 8px; z-index: 9; display: none; }
.navbar .dropdown-toggle:hover { color: var(--dark); background: none; }
.navbar .accountDropdown { background-color: var(--white); border: none; padding: 20px; width: 260px; margin-top: 10px; -webkit-box-shadow: 0px 0px 20px 0px #eaf1ff; -moz-box-shadow: 0px 0px 20px 0px #eaf1ff; -ms-box-shadow: 0px 0px 20px 0px #eaf1ff; -o-box-shadow: 0px 0px 20px 0px #eaf1ff; box-shadow: 0px 0px 20px 0px #eaf1ff; border-radius: 16px; margin-right: -17px; }
.navbar .accountDropdown:before { content: ""; position: absolute; right: 25px; top: -8px; border-left: 6px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--white); }
.navbar .accountDropdown li { font-size: 14px; line-height: 20px; margin-bottom: 20px; }
.navbar .accountDropdown li:first-child a { padding: 0px; margin-left: 15px; }
.navbar .accountDropdown li:last-child { border-bottom: none; margin: 0px; }
.navbar .accountDropdown li a { padding: 5px 0px; }
.navbar .accountDropdown li span { display: block; font-size: 12px; line-height: 18px; word-break: break-all; }
.navbar .accountDropdown li img { width: 20px; display: inline; margin-right: 10px; }
.navbar .accountDropdown li img.blue { display: none; }
.navbar .accountDropdown li a:hover { background-color: transparent; color: var(--primary) }
.navbar .accountDropdown li a:hover img.blue { display: inline; }
.navbar .accountDropdown li a:hover img.black { display: none; }
.navbar-collapse ul li.menu-item-has-children { position: relative; line-height: 0px; }
.navbar .menu-dropdown { position: absolute; left: -20px; top: 53px; background-color: var(--white); border: none; padding: 0px; width: 400px; border-radius: 10px; -webkit-box-shadow: 0px 0px 20px 0px #eaf1ff; -moz-box-shadow: 0px 0px 20px 0px #eaf1ff; -ms-box-shadow: 0px 0px 20px 0px #eaf1ff; -o-box-shadow: 0px 0px 20px 0px #eaf1ff; box-shadow: 0px 0px 20px 0px #eaf1ff; }
.navbar .menu-dropdown:before { content: ""; position: absolute; left: 40px; top: -8px; border-left: 12px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid var(--white); }
.navbar .menu-dropdown li { font-size: 14px; line-height: 20px; overflow: hidden; }
.navbar .menu-dropdown li:first-child { border-radius: 10px 10px 0px 0px; }
.navbar .menu-dropdown li:last-child { border-radius: 0px 0px 10px 10px; }
.navbar .menu-dropdown li a { padding: 15px 20px; width: 100%; font-size: 13px; display: inline-flex; flex-wrap: wrap; justify-content: space-between; }
.navbar .menu-dropdown li figure { display: inline-block; width: calc(100% - 50px); }
.navbar .menu-dropdown li a span { font-size: 16px; line-height: 22px; font-weight: 500; display: inline-block; vertical-align: top; width: 100%; margin-bottom: 6px; }
.navbar .menu-dropdown li a:hover { background-color: #f9fbff; }
.navbar .right-header { display: none; }
.navbar .right-header .AppIcon { height: 36px; }
.navbar .right-header .AppIcon a { display: inline-block; height: 100%; }
.navbar .right-header .AppIcon img { height: 100%; }
.navbar-collapse .mobileApp a { padding: 0px; height: 40px; }
.navbar-collapse .mobileApp img { height: 100%; }
.header-height { height: 75px; }
.megamenu ul li a { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; padding: 10px 0px; font-size: 15px; font-weight: 500; width: 100%; }
.megamenu ul img { height: 28px; }
.megamenu ul.cusecases li a:hover { background-color: var(--white); }
.megamenu .aside { display: flex; flex-wrap: wrap; }
.megamenu .block .all { color: var(--navi_blue); display: inline-flex; align-items: center; gap: 6px; }
.megamenu .block .all img { font-size: 13px }

.navbar .notification { margin-left: 16px; position: relative; }
.navbar .notificationToggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--white); border: 1px solid var(--dark); padding: 0px; position: relative; }
.navbar .notificationToggle img { width: 20px; }
.navbar .notificationToggle .count { background-color: var(--primary); border-radius: 50%; color: var(--white); font-size: 10px; font-weight: 600; height: 18px; line-height: 18px; position: absolute; right: 2px; top: -2px; text-align: center; width: 18px; }

.navbar .notificationDropdown { background-color: var(--white); border: none; padding: 20px; width: 260px; margin-top: 10px; -webkit-box-shadow: 0px 0px 20px 0px #eaf1ff; -moz-box-shadow: 0px 0px 20px 0px #eaf1ff; -ms-box-shadow: 0px 0px 20px 0px #eaf1ff; -o-box-shadow: 0px 0px 20px 0px #eaf1ff; box-shadow: 0px 0px 20px 0px #eaf1ff; border-radius: 16px; }
.navbar .notificationDropdown:before { content: ""; position: absolute; right: 10px; top: -8px; border-left: 6px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--white); }
.navbar .notificationDropdown li { font-size: 14px; line-height: 20px; color: var(--dark); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; padding-top: 16px; margin-top: 16px; border-top: 1px solid #DDDDDD; }
.navbar .notificationDropdown li:first-child { padding-top: 0px; margin-top: 0px; border-top: none; }
.navbar .notificationDropdown li strong { font-weight: 600; padding-right: 4px; }
.navbar .notificationDropdown a { background-color: transparent; color: var(--primary); font-size: 14px; line-height: 20px; font-weight: 400; padding: 0px; }
.navbar .notificationDropdown a.viewAll { font-weight: 500; text-decoration: underline; margin-top: 12px; }
.navbar .notificationDropdown a:hover { background-color: transparent; color: var(--navi_blue); text-decoration: none; }

/* ToggleMenu */
.navbar-toggler { display: inline-flex; align-items: center; justify-content: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; background-color: transparent; border: 1px solid #103b78; padding: 0px; width: 36px; height: 32px; cursor: pointer; outline: none !important; box-shadow: none !important; }
.navbar-toggler span { display: inline-block; height: 2px; border-radius: 12px; background-color: #103b78; position: relative; width: 18px; }
.navbar-toggler span:before, .navbar-toggler span:after { content: ""; position: absolute; left: 0px; display: inline-block; height: 2px; border-radius: 12px; background-color: #0c2476; }
.navbar-toggler span:before { width: 100%; top: -5px; }
.navbar-toggler span:after { width: 9px; bottom: -5px; }

@media only screen and (min-width:1200px) {
    .navbar { background-color: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); -moz-backdrop-filter: blur(8px); -ms-backdrop-filter: blur(8px); -o-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .megamenu { position: absolute; left: 0px; top: 68px; width: 100%; background-color: var(--white); display: grid !important; grid-template-rows: 0fr; transition: 250ms grid-template-rows ease; -webkit-box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.1); }
    .navbar-collapse > ul > li:hover .megamenu { visibility: visible; grid-template-rows: 1fr; }
    .megamenu .wrap { overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 100px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0px 24px;  }
    .megamenu .aside { width: calc(100% - 540px); gap: 60px; padding: 32px 0px; }
    .navbar-collapse .megamenu ul { display: flex; flex-wrap: wrap; gap: 32px; }
    .navbar-collapse .megamenu ul a:hover { background-color: var(--white); color: var(--primary); }
    .megamenu .block { width: 36%; }
    .megamenu .block span { font-size: 14px; line-height: 20px; color: #aaaaaa; font-weight: 500; text-transform: capitalize; display: inline-block; margin-bottom: 24px; }
    .megamenu .block ul { flex-direction: column; gap: 10px; }
    .megamenu .block .all { font-size: 13px; line-height: 20px; text-transform: capitalize; padding: 0px; margin-top: 24px; }
    .megamenu .block .all.phone { display: none; }
    .megamenu .block .all:hover { background-color: var(--white); color: var(--blue); }
    .megamenu ul.cusecases li { width: calc((100% - 72px) / 3); }
    .megamenu figure { width: 400px; border: 1px solid #ddd; border-radius: 12px; padding: 6px; margin: 32px 0px; margin-left: auto; }
    .megamenu figure video,
    .megamenu figure img { width: 100%; border-radius: 6px; }
}
@media only screen and (max-width:1799.98px) {
    .navbar-collapse { margin-left: 60px; }
    .offerCode { padding: 8px 24px; }
    .offerCode p { font-size: 14px; line-height: 24px; }
    .offerCode span { font-size: 16px; }
    .offerCode a { padding: 6px 20px; }
    .megamenu .wrap { max-width: 1200px; }
}
@media only screen and (max-width: 1599.98px) {
    .megamenu .wrap { gap: 80px; }
}
@media only screen and (max-width: 1399.98px) {

}
@media only screen and (max-width: 1349.98px) {
    .navbar-collapse { margin-left: 30px; }
    .navbar-collapse > ul > li { margin-right: 20px; }
}
@media only screen and (max-width:1299.98px) {
    .navbar-collapse { margin-left: 30px; }
    .navbar-collapse ul li a { font-size: 14px; }
}
@media only screen and (max-width:1199.98px) {
    .navbar { padding: 12px 0px; background-color: var(--white); -webkit-box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.1); }
    .header-height { height: 65px; }
    .offcanvas-collapse { position: fixed; top: 65px; bottom: 0; right: 100%; left: -460px; width: 100%; max-width: 460px; height: calc(100svh - 65px); margin: 0px; padding: 20px 32px; background-color: var(--white); overflow-y: auto; visibility: hidden; transition-timing-function: ease-in-out; transition-duration: .3s; transition-property: left, visibility; z-index: 99; }
    .offcanvas-collapse { align-items: start; }
    .offcanvas-collapse.open { left: 0; visibility: visible; z-index: 1000; }
    body:has( .offcanvas-collapse.open) { overflow: hidden; }
    .navbar-brand img { width: 130px; }
    .navbar .full-wrapper { flex-flow: wrap; }
    .navbar .right-header { display: inline-flex; gap: 20px; }
    .navbar-nav, .navber-links { display: block; max-width: 672px; margin: 0 auto; }
    .navbar-nav { padding-top: 16px }
    .navber-links { padding-bottom: 15px; }
    .navbar-collapse ul { width: 100%; padding-top: 0px;  }
    .navbar-collapse ul li { position: relative; width: 100%; padding: 0px; }
    .navbar-collapse > ul > li { margin-right: 0px; text-align: left; padding: 24px 0px; }

    .navbar-collapse ul li a { padding: 0px; font-size: 17px; line-height: 24px; color: var(--black); font-weight: 500; text-transform: capitalize; }
    .navbar-collapse ul li a:hover, .navbar-collapse ul li a.active, .navbar-collapse .login a:hover, .navbar-collapse .create-account a:hover { color: var(--navi_blue); background-color: transparent; text-decoration: none; }
    .navbar-collapse ul li a.menu { position: relative; }
    .navbar-collapse ul li a.menu i { display: none; }
    .navbar-collapse ul li a.menu:after, .navbar-collapse ul li.menu-item-has-children > a:after { margin-top: 2px; }
    .navbar .megamenu { position: relative; width: 100%; border-radius: 0px; box-shadow: none; max-width: 100%; float: none; left: auto; top: auto; }
    .navbar .megamenu .wrap { padding-left: 24px; }
    .navbar .megamenu .block { padding-top: 32px; width: 100%; }
    .megamenu .block span { display: none; }
    .megamenu .block .all.desktop { display: none; }
    .megamenu .block .all.phone { display: inline-flex; }
    .megamenu figure { display: none; }
    .megamenu ul.cusecases { padding-top: 32px; }
    .navbar .megamenu ul li { width: 100%; margin-bottom: 32px; }
    .navbar .megamenu ul li:last-child { margin-bottom: 0px; }
    .navbar .megamenu li a { padding: 10px 0px; font-size: 15px; }
    .megamenu .block .all { margin-top: 32px; }
    .navbar .menu-dropdown { position: relative; width: 100%; border-radius: 0px; box-shadow: none; max-width: 100%; float: none; left: auto; top: auto; }
    .navbar-collapse > ul.navber-links > li { margin: 0px; }
    .navbar .dropdown-toggle { display: none; }
    .navbar .accountDropdown { display: block; position: relative; padding: 0px; width: 100%; border-radius: 0px; box-shadow: none; margin: 0px; float: none; }
    .navbar .accountDropdown:before { display: none; }
    .navbar .accountDropdown li { margin-bottom: 48px; }
    .navbar .accountDropdown li:first-child { display: none }
    .navbar .accountDropdown li:last-child { margin-bottom: 0px; }
    .navbar .accountDropdown li a { padding: 0px; font-size: 17px; line-height: 24px; color: var(--black); font-weight: 500; text-transform: capitalize; }
    .navbar .accountDropdown li img { display: none; }
    .navbar .accountDropdown li p { font-size: 14px; line-height: 20px; }
    .navbar-collapse .removed-bg a { font-size: 17px; line-height: 24px; color: var(--black); font-weight: 500; text-transform: capitalize; padding: 0px; background-color: transparent; border: none; border-radius: 0px; }
    .navbar-collapse .login a, .navbar-collapse .create-account a { font-size: 17px; line-height: 24px; color: var(--black); font-weight: 500; text-transform: capitalize; padding: 0px; background-color: transparent; border: none; border-radius: 0px; }
    .navbar-collapse .signup a { padding: 15px 2px; font-size: 14px; line-height: 20px; color: var(--black); font-weight: 500; text-transform: capitalize; width: 100%; border-radius: 0px; background: transparent; border: none; }
    .navbar-collapse .signup a:hover { color: var(--primary); background: none; }
    .navbar-collapse .signup i { display: none; }
    .navbar-collapse > ul > li.sale a:after { top: 3px; }
    .navbar-collapse > ul > li.sale a:before { top: 17px; }
    .offerCode { top: 52px; }
    .navbar-collapse .mobileApp { display: none; }
    .navbar .notification { margin-left: auto; margin-right: 12px; }
    .navbar .notificationDropdown { margin-right: -20px; }
    .navbar .notificationDropdown:before { right: 30px; }
}
@media only screen and (max-width:1024px) {
    .navbar:has( + .featuresList.desktopApp) { top: 56px; }
}
@media only screen and (max-width:991.98px) {
    .navbar .full-wrapper { padding: 0px 20px; }
    .navbar .notification{display: none;}
}
@media only screen and (max-width:767.98px) {
    .navbar-nav, .navber-links { max-width: 540px; }
    .navbar-brand img { width: 120px; }
    .navbar-brand span { font-size: 20px; line-height: 26px; }
    .navbar-collapse { top: 98px; height: calc(100svh - 98px); }
    .navbar-collapse.featureDrawerShow { top: 98px; height: calc(100svh - 98px); }
    .offerCode { font-size: 13px; letter-spacing: 0px; display: block; }
    .offerCode p { display: inline; }
    .offerCode span { font-size: 16px; font-weight: 500; }
    .offerCode a { padding: 0px; background-color: transparent; font-size: 16px; line-height: 30px; margin-left: 6px; text-decoration: underline;  }
    .header-height { height: 62px; }
}
@media only screen and (max-width: 599.98px) {
    .offerCode { font-size: 12px; }
}
@media only screen and (max-width:479.98px) {
    .offerCode a { font-size: 14px; line-height: 24px; }
}

/* BLACK FRIDAY -------------------------------------------------------*/
.blackFriday { height: 47px; }
.blackFriday .offerText { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 1px; background-color: var(--blue); color: var(--white); padding: 12px 16px; text-align: center; position: fixed; top: 78px; left: 0px; width: 100%; z-index: 90; }
.blackFriday span { color: var(--warning); margin-right: 10px; }
.blackFriday strong { font-size: 110%; font-weight: 500; }
.blackFriday a { color: #ffe629; margin-left: 10px; font-weight: 600; }
.blackFriday a i { margin-left: 2px; font-size: 12px; }

@media only screen and (max-width: 1199.98px) {
    .blackFriday .offerText  { top: 65px; }
}
@media only screen and (max-width: 991.98px) {
    .blackFriday { height: 72px; }
    .blackFriday.hasopenApp { height: 70px; }
    .blackFriday span { display: none; }
    .blackFriday.hasopenApp .offerText { top: 84px; }
}
@media only screen and (max-width: 767.98px) {
    .blackFriday { height: 67px; }
    .blackFriday.hasopenApp { height: 90px; }
    .blackFriday .offerText  { top: 61px; font-size: 14px; line-height: 22px; }
    .blackFriday.hasopenApp .offerText { top: 84px; }
}
@media only screen and (max-width: 363.98px) {
    .blackFriday { height: 89px; }
}


/* OPEN IN APP -------------------------------------------------------*/
.openApp { position: fixed; left: 8px; top: -86px; visibility: hidden; width: calc(100% - 16px); display: flex; align-items: center; gap: 8px; padding: 12px; padding-left: 32px;
    padding-top: 20px; background-color: var(--white); border-radius: 8px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -webkit-animation-name: openApp; -moz-animation-name: openApp; animation-name: openApp; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; z-index: 104; }
.openApp.show { top: 8px; opacity: 1; visibility: visible; }
.openApp img { width: 50px; }
.openApp h6 { font-size: 16px; line-height: 22px; font-weight: 700; color: #000; }
.openApp p { color: var(--gray); font-size: 12px; line-height: 16px; font-weight: 500; }
.openApp a { display: inline-flex; align-items: center; justify-content: center; width: 116px; margin-left: auto; background-image: linear-gradient(45deg, var(--navi_blue), var(--blue)); padding: 7px 16px; font-size: 13px; }
.openApp button { width: 24px; height: 24px; background-color: transparent; border: none; display: inline-flex; align-items: center; justify-content: center; position: absolute;
    left: 3px; top: 4px; }
.openApp button img { width: 10px; }

@media only screen and (min-width: 992px) {
    .openApp { display: none; }
}

@keyframes openApp {
  from { top: -84px; }
    to { top: 0px; }
}

/* BANNER SECTION [Home Page] -------------------------------------------------------*/
.sec-home-01 { padding: 70px 0px; }
.sec-home-01 .container { display: flex; flex-wrap: wrap; justify-content: space-between; }
.sec-home-01 .heroBanner { width: 48%; background-color: var(--light); border-radius: 24px; }
.sec-home-01 .heroBanner video { display: block; width: 100%; object-fit: cover; border-radius: 24px; aspect-ratio: 562 / 596; }
.sec-home-01 .heroBanner ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 36px; }
.sec-home-01 .heroBanner a { border-radius: 12px; border: 1px solid #E5E7EB; background-color: rgba(255, 255, 255, 0.24); -webkit-box-shadow: 0px 12px 48px -8px rgba(84, 84, 84, 0.16); -moz-box-shadow: 0px 12px 48px -8px rgba(84, 84, 84, 0.16); -ms-box-shadow: 0px 12px 48px -8px rgba(84, 84, 84, 0.16); -o-box-shadow: 0px 12px 48px -8px rgba(84, 84, 84, 0.16); box-shadow: 0px 12px 48px -8px rgba(84, 84, 84, 0.16); display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 10px 18px 10px 10px; color: #606060; font-size: 14px; font-weight: 500; line-height: 20px; min-width: 164px; }
.sec-home-01 .heroBanner span { border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.sec-home-01 .heroBanner li:first-child span { background-color: #E34F40; }
.sec-home-01 .heroBanner li:nth-child(2) span { background-color: #5831E5; }
.sec-home-01 .heroBanner li:nth-child(3) span { background-color: #F5A626; }
.sec-home-01 .heroBanner li:nth-child(4) span { background-color: #4CDE27; }
.sec-home-01 .heroContent { width: 38%; }
.sec-home-01 h1 { margin-bottom: 24px; }
.sec-home-01 h4 { font-weight: 600; margin-bottom: 36px; }
.sec-home-01 h4 span { color: var(--navi_blue); }

.upload { border-radius: 24px; background-color: rgba(255, 255, 255, 0.65); -webkit-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); text-align: center; padding: 60px 30px; }
.upload-photo { border-radius: 16px; border: none; background-color: var(--primary); -webkit-box-shadow: 0px 14px 20px -8px rgba(0, 70, 255, 0.40); -moz-box-shadow: 0px 14px 20px -8px rgba(0, 70, 255, 0.40); -ms-box-shadow: 0px 14px 20px -8px rgba(0, 70, 255, 0.40); -o-box-shadow: 0px 14px 20px -8px rgba(0, 70, 255, 0.40); box-shadow: 0px 14px 20px -8px rgba(0, 70, 255, 0.40); display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 234px; height: 56px; padding: 16px 24px; color: var(--white); font-size: 16px;font-weight: 400; line-height: 22px; }
.upload-photo:hover { background-color: var(--navi_blue); color: var(--white); }
.upload p { color: #707070; text-align: center; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.24px; margin-top: 24px; margin-bottom: 6px; }
.upload p:last-child { margin: 0px; }
.upload p mark { border-radius: 6px; background: #F4F4F4; color: #707070; font-weight: 600; padding: 2px 8px; }

.directTesting { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; width: 100%; }
.directTesting .b-l { max-width: calc(100% - 248px); }
.directTesting .b-l p { color: #414141; font-size: 13px; font-weight: 400; line-height: 16px; letter-spacing: 0.26px; margin: 0px; }
.directTesting ul { display: inline-flex; gap: 12px; }
.directTesting li { width: 48px; height: 48px; background-color: var(--light_bg); border-radius: 12px; overflow: hidden; cursor: pointer; }
.directTesting li img { object-fit: cover; display: inline; margin: 0 auto; height: 100%; width: 100%; object-fit: cover; }

.terms-service { margin-top: 32px; color: #707070; font-size: 10px; font-weight: 400; text-align: center; line-height: 16px; letter-spacing: 0.3px; }
.terms-service a { color: #4E7EFE; }
.terms-service a:hover { text-decoration: underline; }
@media only screen and (min-width: 1300px) {
    .sec-home-01 .container { max-width: 1110px }
}
@media only screen and (min-width: 1800px) {
    .sec-home-01 .container { max-width: 1250px }
}
@media only screen and (max-width: 1799.98px) {
    .sec-home-01 { padding-top: 50px; }
    .sec-home-01 .heroBanner ul { margin-top: 52px; }
    .sec-home-01 .heroBanner a { font-size: 13px; min-width: 148px; }
}
@media only screen and (max-width: 1199.98px) {
    .sec-home-01 .heroBanner { width: 48%; }
    .sec-home-01 .heroContent { width: 48%; }
    .sec-home-01 .heroBanner ul { gap: 12px }
    .sec-home-01 .heroBanner li { width: calc((100% - 12px) / 2); }
    .sec-home-01 .heroBanner a { width: 100%; }
}
@media only screen and (max-width: 991.98px) {
    .sec-home-01 { padding: 24px 0px 0px; overflow: hidden; }
    .sec-home-01 .heroBanner { width: 100%; display: flex; flex-direction: column; }
    .sec-home-01 .heroBanner video { order: 2 }
    .sec-home-01 .heroBanner ul { width: calc(100% + 40px); flex-wrap: nowrap; justify-content: flex-start; gap: 8px; order: 1; margin-top: 0px; padding: 0px 20px; margin: 0px -20px 32px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .sec-home-01 .heroBanner ul::-webkit-scrollbar { display: none; }
    .sec-home-01 .heroBanner li { width: calc((100% - 24px) / 4); min-width: 180px; }
    .sec-home-01 .heroBanner a { width: 100%; height: 44px; padding: 6px 12px 6px 6px; }
    .sec-home-01 .heroContent { width: 100%; text-align: center; margin-top: 32px; }
    .upload { background-color: transparent; box-shadow: none; border-radius: 0px; padding: 0px; }
    .upload .upload-photo { width: 100%; height: 60px; font-size: 18px; font-weight: 500; line-height: 24px; }
    .upload p { display: none; }
    .directTesting { gap: 16px; }
    .directTesting .b-l { width: 100%; max-width: 100%; text-align: center; }
    .directTesting .b-l p { font-size: 16px; font-weight: 500; line-height: 22px; display: inline-block; }
    .directTesting ul { width: 100%; justify-content: center; }
}
@media only screen and (max-width: 767.98px) {
    .sec-home-01 h1 { margin-bottom: 12px; }
}



/* Visualize -------------------------------------------------------*/
.visualize { position: relative; overflow: hidden; text-align: center; padding: 120px 0px; }
.subheading { display: block; max-width: 800px; margin: 0 auto !important; color: var(--dark); font-size: 18px; line-height: 30px; font-weight: 400; }
.visualize h2 { margin-bottom: 36px; }
.visualize .tab-content { max-width: 950px; height: 523px; background-color: var(--light_bg); border-radius: 16px; margin: 0 auto; }
.visualize .twentytwenty-container { border-radius: 16px; }
.visualize .twentytwenty-container img { width: 950px; height: 523px; background-image: url(../images/sample/transparent-bg.svg); background-repeat: repeat;
    background-position: 0px 0px; background-size: 20px; background-color: #F9F9F9; }
.visualize .btn { margin-top: 50px; padding: 16px 36px; }
@media only screen and (max-width:1799.98px) {
    .subheading { font-size: 16px; line-height: 26px; }
    .visualize { padding: 80px 0px; }
}
@media only screen and (max-width:1199.98px) {
    .visualize .tab-content { max-width: 800px; height: 440px; }
    .visualize .twentytwenty-container img { width: 800px; height: 440px; }
}
@media only screen and (max-width:991.98px) {
    .visualize { padding: 50px 0px; }
    .visualize .tab-content { max-width: 650px; height: 358px; }
    .visualize .twentytwenty-container img { width: 650px; height: 358px; }
    .visualize .btn { margin-top: 40px; padding: 14px; }
}
@media only screen and (max-width:767.98px) {
    .subheading { font-size: 14px; font-weight: 400; }
    .subheading strong { font-weight: 500; }
    .visualize .tab-content { max-width: 476px; height: 262px; }
    .visualize .twentytwenty-container img { width: 476px; height: 262px; }

}
@media only screen and (max-width: 575.98px) {
    .visualize .tab-content { max-width: 400px; height: 220px; }
    .visualize .twentytwenty-container img { width: 400px; height: 220px; }
    .visualize .btn { width: 100%; }
}
@media only screen and (max-width: 479.98px) {
    .visualize .tab-content { max-width: 360px; height: 198px; }
    .visualize .twentytwenty-container img { width: 360px; height: 198px; }
    .visualize .btn { margin-top: 32px; }
}
@media only screen and (max-width: 399.98px) {
    .visualize .tab-content { max-width: 335px; height: 184px; }
    .visualize .twentytwenty-container img { width: 335px; height: 184px; }
}
@media only screen and (max-width:374.98px) {
    .visualize .tab-content { max-width: 320px; height: 176px; }
    .visualize .twentytwenty-container img { width: 320px; height: 176px; }
}


/* Card List Section -------------------------------------------------------*/
.cardList-sec { padding: 100px 0px; position: relative; }
.cardList-sec .wrapper { margin: 0px auto; }
.cardList-sec h2, .cardList-sec h3 { color: #171717; font-size: 36px; font-weight: 700; line-height: 46px; margin-bottom: 24px; }
.cardList-sec h2.heading { color: #454545; text-align: center; font-size: 48px; font-weight: 700; line-height: 64px; margin-bottom: 100px; }
.cardList-sec p { font-weight: 500; margin-top: 20px; }
.cardList-sec p:first-of-type { margin-top: 0px; }
.cardList-sec ul { margin-top: 20px; list-style: outside; padding-left: 20px; }
.cardList-sec li { font-size: 16px; line-height: 24px; color: var(--dark); font-weight: 400; margin-bottom: 20px; }
.cardList-sec li:last-child { margin-bottom: 0px; }
.cardList-sec .cardList { padding: 90px 0px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.cardList-sec .cardList:last-child { padding-bottom: 0px; }
.cardList-sec .cardList:nth-of-type(even) { flex-direction: row-reverse; }
.cardList-sec .cardList.reverse { flex-direction: row-reverse; }
.cardList-sec .cardList.reverse:nth-of-type(even) { flex-direction: row; }
.cardList-sec .aside { width: calc((100% - 120px) / 2); }
.cardList-sec img, .cardList-sec video { width: 100%; border-radius: 24px; }
.cardList-sec .twentytwenty-container { height: 460px; }
.cardList-sec .twentytwenty-container img { width: 460px; height: 460px; }
.cardList-sec .twentytwenty-container.auto { height: auto; }
.cardList-sec .twentytwenty-container.auto img { width: 100%; height: auto; }
.cardList-sec .nav-tabs { border: none; margin-bottom: 24px; gap: 12px; justify-content: flex-start; }
.cardList-sec .nav-tabs .nav-link { border-radius: 12px; border: 1px solid #E5E7EB; background: rgba(255, 255, 255, 0.24); display: inline-flex; padding: 12px 15px; justify-content: center; align-items: center; gap: 10px; color: #606060;font-size: 16px; font-weight: 500; line-height: 24px; }
.cardList-sec .nav-tabs .nav-link.active { border-color: var(--primary); background-color: var(--white); color: var(--primary); }
.cardList-sec .nav-tabs .nav-link.active path { stroke: var(--primary); }

.cardList-sec .btn { padding: 16px 32px; margin-top: 50px; }
.cardList-sec .btn img { width: 18px; height: auto; }
.cardList-sec .buttonGroup { display: inline-flex; gap: 12px; margin-top: 32px; }
.cardList-sec .buttonGroup a { border: 1px solid var(--white); border-radius: 12px; overflow: hidden; }
.cardList-sec .buttonGroup img { border-radius: 0px; max-width: 160px; }
@media only screen and (min-width: 1200px) {
    .cardList-sec .wrapper { max-width: 1000px; }
}
@media only screen and (max-width:1799.98px) {
    .cardList-sec { padding: 80px 0px; }
    .cardList-sec .cardList { padding: 60px 0px; }
    .cardList-sec h2.heading { margin-bottom: 80px; }
}
@media only screen and (max-width:1599.98px) {
    .cardList-sec { zoom: 0.9 }
}
@media only screen and (max-width: 1199.98px) {
    .cardList-sec { zoom: 1 }
    .cardList-sec h2.heading { font-size: 40px; line-height: 48px; margin-bottom: 60px; }
    .cardList-sec .cardList { padding: 70px 0px; }
    .cardList-sec .twentytwenty-container { height: 440px; }
    .cardList-sec .twentytwenty-container img { width: 440px; height: 440px; }
}
@media only screen and (max-width: 991.98px) {
    .cardList-sec { padding: 50px 0px; }
    .cardList-sec h2, .cardList-sec h3 { font-size: 24px; line-height: 32px; }
    .cardList-sec h2.heading { font-size: 36px; line-height: 44px; }
    .cardList-sec .cardList { padding: 50px 0px; background-color: var(--white); }
    .cardList-sec .aside { width: 100%; }
    .cardList-sec .aside:last-child { margin-top: 40px; }
    .cardList-sec .twentytwenty-wrapper { width: 100%; max-width: 500px; margin: 0 auto; }
    .cardList-sec .twentytwenty-container { width: 500px; height: 500px; margin: 0 auto; }
    .cardList-sec .twentytwenty-container img { width: 500px; height: 500px; }
    .cardList-sec .btn { margin-top: 32px; }
    .cardList-sec .btn img { width: 14px; }
    .cardList-sec .nav-tabs { justify-content: center; }
}
@media only screen and (max-width: 767.98px) {
    .cardList-sec h2.heading { font-size: 30px; line-height: 38px; margin-bottom: 40px; }
    .cardList-sec .nav-tabs .nav-item { margin-right: 4px; }
    .cardList-sec .btn { width: 100%; padding: 14px; }
    .cardList-sec .nav-tabs .nav-link { border-radius: 8px; font-size: 13px; font-weight: 400; padding: 2px 16px 2px 8px; margin-right: 8px; }
    .cardList-sec .nav-tabs .nav-link { margin-right: 0px; }
}
@media only screen and (max-width: 575.98px) {
    .cardList-sec .twentytwenty-wrapper { max-width: 416px; }
    .cardList-sec .twentytwenty-container { width: 416px; height: 416px; }
    .cardList-sec .twentytwenty-container img { width: 416px; height: 416px; }
}
@media only screen and (max-width: 479.98px) {
    .cardList-sec .twentytwenty-wrapper { max-width: 360px; }
    .cardList-sec .twentytwenty-container { width: 360px; height: 360px; }
    .cardList-sec .twentytwenty-container img { width: 360px; height: 360px; }
}
@media only screen and (max-width: 399.98px) {
    .cardList-sec .twentytwenty-wrapper { max-width: 335px; }
    .cardList-sec .twentytwenty-container { width: 335px; height: 335px; }
    .cardList-sec .twentytwenty-container img { width: 335px; height: 335px; }
}
@media only screen and (max-width: 374.98px) {
    .cardList-sec .twentytwenty-wrapper { max-width: 320px; }
    .cardList-sec .twentytwenty-container { width: 320px; height: 320px; }
    .cardList-sec .twentytwenty-container img { width: 320px; height: 320px; }
}



/* Demo -------------------------------------------------------*/
.demo { position: relative; overflow: hidden; text-align: center; padding: 120px 0px; }
.subheading { display: block; max-width: 800px; margin: 0 auto !important; color: var(--dark); font-size: 18px; line-height: 30px; font-weight: 400; }
.demo h3 { margin-bottom: 50px; }
.demo p { color: #454545; font-size: 18px; font-weight: 400; line-height: 30px; }
.demo .nav-tabs { margin-top: 80px; }
.demo .btn { margin-top: 40px; }
.demo .tab-pane ul { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.demo .tab-pane ul li { width: 23.5%; }
.demo .tab-pane img { max-width: 100%; border-radius: 16px; -webkit-box-shadow: 0px 0px 20px 0px #DDDDDD; -moz-box-shadow: 0px 0px 20px 0px #DDDDDD; -ms-box-shadow: 0px 0px 20px 0px #DDDDDD; -o-box-shadow: 0px 0px 20px 0px #DDDDDD; box-shadow: 0px 0px 20px 0px #DDDDDD; }
.demo .tab-pane ul span { display: inline-block; font-size: 14px; line-height: 14px; color: #666666; font-weight: 400; margin-top: 12px; }
@media only screen and (min-width:1300px) {
    .demo .container { max-width: 1200px; }
    .demo h2 { font-size: 38px; line-height: 44px; margin-bottom: 16px; }
}
@media only screen and (max-width:1799.98px) {
    .subheading { font-size: 16px; line-height: 26px; }
    .demo { padding: 80px 0px; }
    .demo h3 { margin-bottom: 24px; }
    .demo .nav-tabs { margin-top: 50px; }
}
@media only screen and (min-width: 1200px) and (max-width:1499.98px) {
    .demo h2 { font-size: 42px; }
}
@media only screen and (max-width:991.98px) {
    .demo { padding: 50px 0px; background-color: var(--white); }
    .demo h3 { margin-bottom: 16px; }
    .demo p { font-size: 16px; line-height: 24px; }
    .demo .nav-tabs { margin-top: 50px; margin-bottom: 32px; }
    .demo .tab-pane ul { gap: 32px }
    .demo .tab-pane ul li { width: calc((100% - 32px) / 2); }
    .demo .tab-pane ul li:nth-child(2n) { margin-top: 32px; }
}
@media only screen and (max-width:767.98px) {
    .subheading { font-size: 14px; font-weight: 400; }
    .subheading strong { font-weight: 500; }
    .demo .nav-tabs { margin-top: 30px; margin-bottom: 40px; }
    .demo .tab-pane ul { gap: 20px }
    .demo .tab-pane ul li { width: calc((100% - 20px) / 2); }
    .demo .tab-pane ul li:nth-child(2n) { margin-top: 16px; }
    .demo .tab-pane img { border-radius: 8px; }
    .demo p { font-size: 15px; }
}
@media only screen and (max-width:479.98px) {
    .demo .tab-pane ul span { font-size: 12px; line-height: 14px; }
}


/* Producr Efficiency -------------------------------------------------------*/
.producrEfficiency { padding: 120px 0px; }
.producrEfficiency h2 { text-align: center; margin-bottom: 50px; }
.producrEfficiency p { text-align: center; margin-bottom: 80px; }
.producrEfficiency .customTabContainer { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.producrEfficiency .customTabNav { width: 200px; display: inline-flex; flex-direction: column; gap: 16px; margin-top: 100px; }
.producrEfficiency .customTabNav .mobileView { display: none; }
.producrEfficiency .customTabNav a { border-radius: 12px; background: var(--white); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); display: flex; align-items: center; gap: 12px; width: 100%; height: 60px; padding: 10px 24px; color: #707070; font-size: 16px; font-weight: 400; line-height: 25px; }
.producrEfficiency .tabActive a { color: var(--primary); }
.producrEfficiency .tabActive a svg,
.producrEfficiency .tabActive a path { stroke: var(--primary); }
.producrEfficiency .customTabsStage { width: calc(100% - 464px); position: relative; }
.producrEfficiency .customTabsContent { display: none; }
.producrEfficiency figure { width: 100%; height: 100%; line-height: 0px; border-radius: 16px; overflow: hidden; }
.producrEfficiency figure img { max-width: 100%; }
.producrEfficiency .box { border-radius: 16px; background: rgba(255, 255, 255, 0.65); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); backdrop-filter: blur(10px); padding: 40px; position: relative; width: calc(100% - 48px); margin: -42px auto 0px; }
.producrEfficiency .box h4 { color: #292929; font-weight: 500; margin-bottom: 18px; }
.producrEfficiency .box p { text-align: left; margin-bottom: 18px; }
@media only screen and (max-width:1799.98px) {
    .producrEfficiency { padding: 80px 0px; }
    .producrEfficiency h2 { margin-bottom: 32px; }
    .producrEfficiency p { margin-bottom: 60px; }
}
@media only screen and (max-width: 991.98px) {
    .producrEfficiency { padding: 50px 0px; }
    .producrEfficiency h2 { margin-bottom: 16px; }
    .producrEfficiency p { margin-bottom: 50px; }
    .producrEfficiency .customTabNav { width: calc(100% + 40px); padding: 0px 20px; margin: 0px -20px; flex-direction: row; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .producrEfficiency .customTabNav::-webkit-scrollbar { display: none; }
    .producrEfficiency .customTabNav.notOnMobile { display: none; }
    .producrEfficiency .customTabNav .mobileView { display: block; }
    .producrEfficiency .customTabNav a { border: 1px solid #EDF0F2; background: #EDF0F2; box-shadow: none; height: 40px; padding: 4px 16px; font-size: 14px; gap: 8px; }
    .producrEfficiency .customTabNav a svg { height: 18px; width: 18px; }
    .producrEfficiency .tabActive a { border-color: var(--primary); background-color: var(--white); }
    .producrEfficiency .customTabsStage { width: 100%; }
    .producrEfficiency .box { margin-top: 32px; padding: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 100%; }
}



/* Trusted By------------------------------------------------- */
.trustedBy { padding: 80px 0px; position: relative; }
.trustedBy .container { max-width: 1250px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.trustedBy h6 { color: #000; font-weight: 400; line-height: 22px; width: 156px; }

.trustedBy .marquee { width: calc(100% - 180px); display: flex; line-height: 30px; position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent 100%); }
.trustedBy .marquee-content { display: flex; gap: 60px; animation: scrolling 27s linear infinite; }
.trustedBy li img { max-height: 36px; max-width: 110px; }

@keyframes scrolling {
    0% { transform: translate3d(0%, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@media only screen and (max-width: 1799.98px) {
    .trustedBy { padding: 70px 0px 40px; }
    .trustedBy .container { max-width: 1110px }
}

@media only screen and (max-width: 991.98px) {
    .trustedBy { padding: 32px 0px 50px; overflow: hidden; }
    .trustedBy h6 { display: none; }
    .trustedBy .marquee { width: calc(100% + 40px); padding: 0px 20px; margin: 0px -20px; }
    .trustedBy .marquee-content { gap: 40px; }
    .trustedBy li img { max-height: 24px; }
}


/* Our Subscribers -------------------------------------------------------*/
.ourSubscribers {  padding: 0px 0px 120px; overflow: hidden; position: relative; text-align: center; }
.ourSubscribers h4 { text-align: center; color: #666666; }
.ourSubscribers .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;
    display: block; touch-action: pan-y; margin-top: 70px; width: 100%; }
.ourSubscribers .swiper-slide { flex-shrink: 0; transition: all 0.5s ease; display: flex; align-items: center; width: 100%; position: relative; }
.ourSubscribers .swiper-slide.swiper-slide-active { z-index: 3; }
.ourSubscribers .swiper-slide li { text-align: center; font-size: 18px; background: #444; display: flex; justify-content: center; align-items: center; }
.ourSubscribers ul img { max-height: 32px; max-width: 130px; display: block; margin: 0 auto; }
@media only screen and (max-width: 1199.98px) {
    .ourSubscribers {  padding: 0px 0px 90px; }
}
@media only screen and (max-width: 1024px) {
    .ourSubscribers .swiper { margin-top: 40px; }
    .ourSubscribers ul img { max-width: 120px; }
}
@media only screen and (max-width: 991.98px) {
    .ourSubscribers {  padding: 70px 0px; }
}
@media only screen and (max-width: 767.98px) {
    .ourSubscribers {  padding: 50px 0px; }
    .ourSubscribers ul img { margin: 0px; }
}


/* BANNER SECTION [Use Cases Pages] -------------------------------------------------------*/
.static-banner { background-color: var(--white); padding: 70px 0px; position: relative; }
.static-banner .container { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; }
.static-banner .image-aside { width: 448px; }
.static-banner .text-aside { width: 530px; }
.static-banner .delarLeft { width: 50%; }
.static-banner video { max-width: 100%; border-radius: 12px; }
.static-banner h1 { font-size: 40px; line-height: 54px; font-weight: 600; }
.static-banner h1 span { margin-bottom: 16px; font-size: 20px; line-height: 28px; color: var(--navi_blue); font-weight: 500; display: block; }
.static-banner .topHeading { text-align: center; width: 100%; margin-bottom: 70px; }
.static-banner .topHeading h1 { max-width: 800px; margin: 0px auto; }
.static-banner .aside .upload { margin-top: 48px; }
.static-banner .btn { margin-top: 25px; }

@media only screen and (min-width: 1300px) {
    .static-banner .container { max-width: 1200px; }
}
@media only screen and (min-width: 1800px) {
    .static-banner .container { max-width: 1250px; }
}
@media only screen and (max-width: 1799.98px) {
    .static-banner { padding: 50px 0px 70px; }
}
@media only screen and (max-width: 1199.98px) {
    .static-banner .image-aside { width: 400px; }
    .static-banner .text-aside { width: 460px; }
}
@media only screen and (max-width: 991.98px) {
    .static-banner { padding: 50px 0px 0px; }
    .static-banner .image-aside { display: none; }
    .static-banner .text-aside { width: 100%; }
    .static-banner h1 { font-size: 36px; line-height: 46px; }
}
@media only screen and (max-width: 767.98px) {
    .static-banner h1 { font-size: 30px; line-height: 40px; }
}


/* BANNER SECTION [Enterprise Page] -------------------------------------------------------*/
.enterpriseBanner { padding: 70px 0px 20px; }
.enterpriseBanner .container { display: flex; flex-wrap: wrap; align-items:center; justify-content:space-between; }
.enterpriseBanner aside { width: 46%; }
.enterpriseBanner p { color: #0D1216; font-size: 21px; font-weight: 400; line-height: 32px; }
.enterpriseBanner .buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.enterpriseBanner .btn { padding: 10px 20px; }
.enterpriseBanner .bannerImage img { max-width: 100%; border-radius: 24px; }

@media only screen and (min-width: 1300px) {
    .enterpriseBanner .container { max-width: 1110px }
}
@media only screen and (min-width: 1800px) {
    .enterpriseBanner .container { max-width: 1250px; }
}
@media only screen and (max-width: 1799.98px) {
    .enterpriseBanner { padding: 50px 0px 20px; }
}
@media only screen and (max-width: 1199.98px) {
    .enterpriseBanner aside { width: 48%; }
}
@media only screen and (max-width: 991.98px) {
    .enterpriseBanner { padding: 24px 0px; }
    .enterpriseBanner aside { width: 100%; }
    .enterpriseBanner .bannerText { order: 2; margin-top: 32px; text-align:center; }
    .enterpriseBanner .bannerImage { order: 1; max-width: 500px; margin: 0 auto; border: 1px solid #ddd; border-radius: 24px; }
    .enterpriseBanner p { font-size: 18px; line-height: 26px; }
    .enterpriseBanner .buttons { justify-content: center; }
}
@media only screen and (max-width: 767.98px) {
    .enterpriseBanner .buttons .btn { width: 100%; height: 50px; font-size: 16px; font-weight: 500; line-height: 24px; }
}


/* BANNER SECTION [About Us Page] -------------------------------------------------------*/
.aboutBanner { position: relative; text-align: center; }
.aboutBanner img { width: 100%; }
.aboutBanner .wrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)); display: flex; align-items: center; justify-content: center; z-index: 2; }
.aboutBanner .container { z-index: 4; }
.aboutBanner .wave { position: absolute; left: 0px; bottom: -16px; width: 100%; z-index: 3; }
@media only screen and (max-width: 991.98px) {
    .aboutBanner { overflow: hidden; }
    .aboutBanner .heroImage { height: 240px; width: auto; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
    .aboutBanner .wave { height: 66px; width: auto; }
}


/* About Us -------------------------------------------------------*/
.aboutUs { text-align: center; padding: 50px 0px 100px; }
.aboutUs h5 { margin-bottom: 12px; }
.aboutUs ul { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 70px; }
.aboutUs li { width: calc((100% - 72px) / 4); display: inline-flex; flex-direction: column; justify-content: center; }
.aboutUs li img { max-width: 100%; }
.aboutUs li .box { border-radius: 24px; -webkit-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 48px 24px 24px; height: 100%; }
.aboutUs .box figure { background-color: var(--secondary); border-radius: 50%; width: 64px; height: 64px; margin: 0 auto 24px; padding: 16px; }
.aboutUs .box h4 { margin-bottom: 16px; }
@media only screen and (max-width: 1199.98px) {
    .aboutUs ul { margin-top: 32px; }
    .aboutUs li { width: calc((100% - 48px) / 3); }
    .aboutUs li:first-child { width: 100%; }
    .aboutUs li:first-child img { max-width: 240px; margin: 0 auto; }
}
@media only screen and (max-width: 991.98px) {
    .aboutUs { padding-bottom: 50px; }
}
@media only screen and (max-width: 767.98px) {
    .aboutUs { padding: 20px 0px 50px; }
    .aboutUs li { width: 100%; }
    .aboutUs li .box { padding: 32px 24px; }
}



/* About Us -------------------------------------------------------*/
.OurTeam { padding: 100px 0px; }
.OurTeam .swiper { width: 100%; overflow: hidden; margin-top: 60px; }
.OurTeam .swiper-wrapper { gap: 40px; }
.OurTeam .swiper-slide { flex-shrink: 0; transition: all 0.5s ease; }
.OurTeam .memberBox { border: 1px solid #DDDDDD; border-radius: 20px; padding: 32px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; position: relative; }
.OurTeam .swiper-slide-active .memberBox { background: #FDFDFD; }
.OurTeam .memberBox figure { width: 200px; border-radius: 16px; overflow: hidden; }
.OurTeam .memberBox figure img { width: 100%; }
.OurTeam .memberBox .memberDescription { width: calc(100% - 224px); }
.OurTeam .memberBox h5 { color: var(--black); }
.OurTeam .memberBox h6 { color: var(--gray); font-weight: 400; }
.OurTeam .memberBox p { font-size: 18px; line-height: 26px; margin-top: 16px; }
.OurTeam .memberBox .memberDescription a { position: absolute; right: 12px; top: 12px; }
.OurTeam .memberBox .memberDescription a img { width: 60px; border: 3px solid #EEEEEE; border-radius: 50%; }
.OurTeam .swiper-button-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.OurTeam .swiper-button-prev, .OurTeam .swiper-button-next { background-color: #F0F1F5; border-radius: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.OurTeam .swiper-button-prev svg, .OurTeam .swiper-button-next svg { width: 24px; }


/* Accordian -------------------------------------------------------*/
.accordion-wrap { padding: 100px 0px; }
.accordion { max-width: 900px; margin: 50px auto 0px; }
.accordion .accordion-row { border: 1px solid #d1d1d1; border-radius: 16px; margin-bottom: 20px; }
.accordion .accordion-row:last-child { margin-bottom: 0px; }
.accordion .card-header { box-shadow: none !important; outline: none !important; background-color: transparent !important; border: none; padding: 0px; }
.accordion h3 { font-size: 18px; line-height: 24px; font-weight: 500; margin: 0px; padding: 16px 40px 16px 20px; padding-right: 40px !important; box-shadow: none !important; background-color: transparent !important; background-image: url(../images/accordian-open.svg); background-repeat: no-repeat; background-size: 16px; background-position: 97% 20px; padding-right: 30px; cursor: pointer; appearance: none !important; -webkit-appearance: none !important; }
.accordion h3[aria-expanded="true"],
.accordion .active-acc h3 { background-image: url('../images/accordian-close.svg'); }
.accordion h3 span { display: inline-block; vertical-align: text-top; font-size: 16px; line-height: 20px; width: 30px; height: 22px; border: 1px solid var(--black); border-radius: 3px; text-align: center; margin-right: 10px; }
.accordion .card-body { padding: 0px 20px 20px; }
.accordion .card-body span { font-weight: 500; font-style: italic; }
.accordion ul { padding-left: 25px; list-style: outside; margin-bottom: 15px; }
.accordion ul li { margin-bottom: 8px; }
.accordion ul li:last-child { margin-bottom: 0px; }
.accordion-wrap.pb-lg { padding-bottom: 150px; }

@media only screen and (max-width:1199.98px) {
    .accordion-wrap { padding: 80px 0px; }
}
@media only screen and (max-width:991.98px) {
    .accordion-wrap { padding: 50px 0px; }
    .accordion-wrap.pb-lg { padding-bottom: 70px; }
    .accordion { margin-top: 40px; }
}
@media only screen and (max-width:575.98px) {
    .accordion { margin-top: 30px; }
    .accordion h3 { font-size: 16px; line-height: 26px; }
}
@media only screen and (max-width:399.98px) {
    .accordion h3 { font-size: 15px; line-height: 24px; }
    .accordion p { line-height: 26px; }
}


/* Static Tab Content -------------------------------------------------------*/
.static-tab--content { text-align: center; padding: 50px 0px; }
.static-tab--content h2 { margin-bottom: 10px; }
.static-tab--content h6 { color: var(--dark); font-weight: 500; max-width: 750px; margin: 0 auto 50px; }
.static-tab--content .tab-content-row { max-width: 700px; margin: 0 auto; position: relative; }
.static-tab--content .tab-content-row .twentytwenty-container img { width: 700px !important; max-width: inherit; }
.static-tab--content .tab-content-row span.toggler { font-size: 12px; line-height: 18px; color: var(--white); font-weight: 500; text-transform: capitalize; background-color: rgba(0, 0, 0, 0.7); border-radius: 3px; padding: 2px 8px; cursor: pointer; position: absolute; top: 10px; z-index: 9; }
.static-tab--content .tab-content-row span.original { left: 10px; }
.static-tab--content .tab-content-row span.transparent { right: 10px; }
.static-tab--content .btn { margin-top: 50px; }
.side-nav-tab .main-content { width: calc(100% - (220px + 50px)); height: 445px; overflow-x: hidden; overflow-y: auto; }
.side-nav-tab .main-content section { height: 100%; }
@media only screen and (max-width:991.98px) {
    .static-tab--content .tab-content-row { max-width: 650px; }
    .static-tab--content .tab-content-row .twentytwenty-container img { width: 650px !important; }
}
@media only screen and (max-width:767.98px) {
    .static-tab--content { display: none; }
}


/* Footer ------------------------------*/
.footer { background-color: #222222; position: relative; padding: 100px 0px; }
.footer .wrapper { max-width: 1298px; padding: 0px 24px; margin: 0 auto; }
.footer section { display: flex; flex-wrap: wrap;  justify-content: space-between; }
.footer .topFooter aside { width: 18%; }
.footer .topFooter h6 { color: var(--white); font-size: 16px; font-weight: 700; line-height: 22px; }
.footer .topFooter ul { margin-top: 48px; }
.footer .topFooter li { margin-bottom: 16px }
.footer .topFooter li:last-child { margin-bottom: 0px; }
.footer .topFooter li a { color: rgba(255, 255, 255, 0.81); font-size: 16px; font-weight: 400; line-height: 22px; }
.footer .topFooter li a:hover { color: var(--primary); }
.footer .middleFooter { margin-top: 100px; }
.footer .middleFooter aside { width: 25%; }
.footer .middleFooter aside img { max-height: 36px; }
.footer .middleFooter .footerLogo { margin-bottom: 20px; }
.footer .middleFooter p { color: rgba(255, 255, 255, 0.81); font-size: 12px; font-weight: 400; line-height: 18px; }
.footer .middleFooter h6 { color: var(--white); font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; }
.footer .social { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer .social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.lan-select { position: relative; z-index: 10; }
.lan-select .selectBtn { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--black); font-weight: 600; line-height: 20px; position: relative; background-color: var(--white); padding: 10px 20px 10px 14px; border-radius: 10px; position: relative; margin-left: auto; }
.lan-select .selectBtn img { width: 18px; }
.lan-select .selectBtn:after { display: none; content:"\f107"; font-family: FontAwesome; font-size: 16px; color: var(--bs-gray); line-height: 7px; border: none; position: absolute; right: 10px; top: 16px; }
.lan-select .dropdown-menu { background-color: transparent; padding: 0px; border: none; width: 500px; min-width: inherit; top: -10px !important; }
.lan-select .dropdown-menu:before { content: ""; position: absolute; right: 44px; bottom: -8px; border-left: 6px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--black); }
.lan-select .selectDropdown { width: 100%; padding: 24px; background-color: var(--black); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 16px; }
.lan-select .selectDropdown .option { display: inline-flex; align-items: center; gap: 12px; width: calc((100% - 32px) / 3); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--white); text-align: center; padding: 6px 0px; cursor: pointer; }
.lan-select .selectDropdown .option img { width: 18px; }
.lan-select .selectDropdown .option:hover { color: var(--primary); }
.footer .getApp { display: flex;  align-items: center; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.footer .lastFooter { margin-top: 120px; align-items: center; }
.footer .lastFooter aside { max-width: 42%; }
.footer .lastFooter aside:last-child { text-align: right; }
.footer .lastFooter p { color: #FAFAFA; font-size: 13px; font-weight: 500; line-height: 20px; }

@media only screen and (max-width: 1799.98px) {
    .footer { padding: 80px 0px; }
}
@media only screen and (max-width: 991.98px) {
    .footer { padding: 50px 0px; }
    .footer .topFooter aside { width: 100%; }
    .footer .topFooter h6 { padding: 16px 0px; border-bottom: 1px solid #2a3865; font-weight: 500; background-image: url('../images/down-arrow.svg'); background-repeat: no-repeat; background-position: 100% center; background-size: 12px; }
    .footer .topFooter ul { margin: 0px; padding: 20px 0px 32px; }
    .footer .topFooter li { margin-bottom: 24px; }
    .footer .middleFooter { margin-top: 0px; }
    .footer .middleFooter aside { width: 100%; margin-top: 32px; }
    .footer .middleFooter h6 { text-align: left; font-weight: 500; }
    .footer .social { justify-content: flex-start; }
    .lan-select .selectBtn { margin-left: 0px; }
    .lan-select .dropdown-menu { width: 100%; }
    .lan-select .dropdown-menu:before { right: auto; left: 44px; }
    .footer .lastFooter { margin-top: 0px; }
    .footer .lastFooter aside { width: 100%; max-width: 100%; margin-top: 32px; }
    .footer .lastFooter aside:last-child { text-align: left; }
    .footer .getApp { justify-content: flex-start; }
}
@media only screen and (max-width: 575.98px) {
    .lan-select .selectDropdown { padding: 16px; max-height: 160px; overflow-x: hidden; overflow-y: auto; }
    .lan-select .selectDropdown .option { width: calc((100% - 16px) / 2); }
}

/* Preview Image Popup -------------------------------------------------------*/
#fullImage .modal-dialog { max-width: 500px; }
#fullImage .modal-content { border-radius: 8px; }
#fullImage .modal-title { margin-bottom: 20px; }
#fullImage .close { position: absolute; right: 10px; top: 10px; opacity: 1; line-height: 30px; text-decoration: none; }
#fullImage .modal-body .close span { font-size: 30px; color: var(--black); margin: 0px; }
#fullImage .modal-body { padding: 30px 20px 30px; text-align: center; }
#fullImage figure { max-width: 300px; margin: 0 auto 10px; height: 250px; }
#fullImage figure img { max-width: 100%; max-height: 100%; margin: 0 auto; display: block; background-image: url('../images/sample/transparent-bg.jpg'); background-repeat: repeat; background-position: 0px 0px; }
#fullImage h6 { position: relative; color: var(--dark); }
#fullImage h6 a { display: inline-block; vertical-align: baseline; width: 14px; height: 14px; margin-top: 4px; margin-left: 5px; background-image: url(../images/icon-info.svg); background-repeat: repeat; background-position: center; background-size: 100%; }
#fullImage span { font-size: 13px; line-height: 20px; display: block; color: var(--dark); margin-bottom: 3px; font-weight: 500; }
#fullImage .credits { margin-top: 15px; }
#fullImage .credits .btn { text-transform: none; }
#fullImage .credits .btn.disable { background-color: #999999; border-color: #999999; cursor: not-allowed; color: var(--white) !important; }
#fullImage .credits h6 { margin: 0px 0px 10px; color: var(--black); font-weight: 700; }
#fullImage .credits h6 img { max-width: 36px; margin-right: 10px; }
#fullImage .credits h5 a { color: var(--dark); }
#fullImage .credits p { font-size: 14px; line-height: 20px; margin-top: 10px; }
#fullImage .credits p a { margin-left: 5px; }
#fullImage .credits p a i { display: inline-block; vertical-align: middle; }
#fullImage .credits h5 a:hover, #fullImage .credits p a:hover { color: #007bff; }
@media only screen and (max-width:767.98px) {
    #fullImage .modal-dialog { width: 98%; max-width: 400px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
    #fullImage .aside { width: 100%; }
    #fullImage .modal-title { font-size: 24px; line-height: 30px; }
}
@media only screen and (max-width:575.98px) {
    #fullImage .modal-body { padding: 30px; }
    #fullImage .modal-title { font-size: 24px; line-height: 30px; margin-bottom: 15px; }
    #fullImage .modal-title { font-size: 20px; line-height: 26px; }
    #fullImage .modal-dialog { width: calc(100% - 1rem); max-width: 100%; }
    #fullImage .credits { margin-top: 20px; }
    #fullImage .credits h5 { margin-bottom: 30px; }
}
@media only screen and (max-width:479.98px) {
    #fullImage .modal-body { padding: 20px; }
    #fullImage .modal-title { font-size: 20px; line-height: 26px; margin-bottom: 10px; }
    #fullImage .credits { margin-top: 15px; }
    #fullImage .credits h5 { margin-bottom: 25px; }
    #fullImage span { font-size: 12px; line-height: 18px; }
}

/* Inside Second -------------------------------------------------------*/
.section { padding: 80px 0px; }
.bg-gray { background-color: #fbfbfb !important; background-image: none !important; }
.bg-white { background-color: var(--white) !important; background-image: none !important; }
.left-doted { background-image: url('../images/bg-dotted.jpg'); background-repeat: no-repeat; background-position: left top; }
.right-doted { background-image: url('../images/bg-dotted1.jpg'); background-repeat: no-repeat; background-position: right bottom; }
.mt-30 { margin-top: 30px; }
.mb-30 { margin-bottom: 30px; }
@media only screen and (max-width:1449.98px) {
    .section { padding: 70px 0px; }
}
@media only screen and (max-width:1199.98px) {
    .section { padding: 60px 0px; }
}
@media only screen and (max-width:767.98px) {
    .section { padding: 50px 0px; }
    .bg-gray { background-color: var(--white) !important; }
}
@media only screen and (max-width:767.98px) {
    .section { padding: 40px 0px; }
}

/* SVG UNderline -------------------------------------------------------*/
.underline { margin: 0px 0px 30px !important; }
.underline span, .underline .underline-text { position: relative; z-index: 9; }
.underline svg { position: absolute; width: 100%; height: 60px; left: 0; top: 0; z-index: -1; }
.underline svg path { stroke: var(--navi_blue); stroke-width: 9; fill: none; animation: underline 10s infinite; animation-delay: 0s; opacity: 0; }
.underline svg path + path { animation-delay: 0.5s; }
@keyframes underline {
    0% { stroke-dasharray: 0 1500; opacity: 1; }
    15% { stroke-dasharray: 1500 1500; }
    85% { opacity: 1; }
    90% { stroke-dasharray: 1500 1500; opacity: 0; }
    100% { stroke-dasharray: 0 1500; opacity: 0; }
}

/* About -------------------------------------------------------*/
.about .block { height: 100%; padding: 20px; }
.about figure { background-color: #eeeeee; }
.about .sl-text { padding: 20px; }
.about .img-text { padding: 20px; text-align: center; }
.about address { display: block; margin: 10px 0px; }
.about h4 { margin-top: 15px; margin-bottom: 5px; }
.about img { max-width: 100%; }
.about .btn { margin-top: 30px; }
.about .map { padding: 10px; height: 100%; text-align: center; }
.about .map iframe { display: block; width: 100%; height: 100%; margin: 0px; }
.shadow { background-color: var(--white); -webkit-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -moz-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -ms-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -o-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); }
.row-padding { padding: 30px 15px; }
.column-padding { padding: 30px; }
@media only screen and (max-width:991.98px) {
    .about h3 { font-weight: 500; }
}
@media only screen and (max-width:767.98px) {
    .about figure { padding: 10px; }
}

/* Affiliate -------------------------------------------------------*/
.affiliate { background-color: var(--light_bg); padding: 70px 0px; }
.affiliate h1 { text-align: center; margin-bottom: 40px; }
.affiliate .form-content { max-width: 850px; background-color: var(--white); padding: 50px; margin: 0 auto; position: relative; border-radius: 20px; -webkit-box-shadow: 0px 0px 20px #ddd; -moz-box-shadow: 0px 0px 20px #ddd; -ms-box-shadow: 0px 0px 20px #ddd; -o-box-shadow: 0px 0px 20px #ddd; box-shadow: 0px 0px 20px #ddd; }
.affiliate h3 { margin-bottom: 10px; }
.affiliate h4 { margin-bottom: 10px; }
.affiliate h5 { margin-bottom: 10px; }
.affiliate h6 { margin-bottom: 10px; }
.affiliate h6 a { color: var(--primary); }
.affiliate h6 a:hover { color: var(--navi_blue); }
.affiliate p a { color: var(--primary); }
.affiliate p a:hover { color: var(--navi_blue); }
.affiliate p strong { font-weight: 600; }
.affiliate ul { margin: 15px 0px 30px; list-style: outside; padding-left: 18px; }
.affiliate ul li { font-size: 16px; line-height: 30px; color: #29282d; position: relative; margin-bottom: 12px }
.affiliate ul li:last-child { padding-bottom: 0px; }
.affiliate .refund-form { margin-top: 25px; }
.affiliate .refund-form input.btn { padding: 0px 20px; line-height: 40px; height: 42px; }
.affiliate .refund-form .form-group .input-group { box-shadow: none; }
.affiliate .refund-form textarea { height: 60px; }
.affiliate .refund-form .input-group:first-child input[type="email"] { cursor: not-allowed; }
@media only screen and (max-width:991.98px) {
    .affiliate { background-color: var(--white); padding: 60px 0px; }
    .affiliate h1 { margin-bottom: 30px; }
    .affiliate .form-content { padding: 0px; box-shadow: none }
}
@media only screen and (max-width:767.98px) {
    .affiliate { padding: 50px 0px; }
}
@media only screen and (max-width:575.98px) {
    .affiliate ul { margin: 10px 0px; }
}
@media only screen and (max-width:479.98px) {
    .affiliate ul li { font-size: 14px; line-height: 24px; }
}


/* Contact -------------------------------------------------------*/
.contact-page--map { background-image: url('../images/contact-page-map.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.contact-page--map .contact-page--text { max-width: 500px; margin-left: auto; padding: 70px; padding-left: 0px; text-align: right; }
.contact-page--map .contact-page--text h3 { line-height: 45px; font-weight: 500; }
.contact img { width: 100%; }
.contact .contact-form { width: 100%; max-width: 600px; padding: 50px 30px; padding-right: 0px; }
.contact .contact-form input[type="button"] { background-color: var(--white); color: #29282d; text-decoration: none; padding: 15px 20px; min-width: 240px; font-size: 16px; line-height: 22px; text-transform: uppercase; text-align: center; border: 1px solid #29282d; border-radius: 0px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; }
.contact .contact-form input[type="button"]:hover { background-color: #f34e3a; border-color: #f34e3a; color: var(--white); }
@media only screen and (max-width:1399.98px) {
    .contact .contact-form input[type="button"] { font-size: 14px; line-height: 20px; }
}
@media only screen and (max-width:991.98px) {
    .contact .contact-page--map { display: none; }
    .contact .contact-form { padding: 40px; margin: 0 auto; -webkit-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -moz-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -ms-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -o-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); }
    .contact .contact-form input[type="button"] { padding: 12px 15px; }
}
@media only screen and (max-width:767.98px) {
    .contact { padding: 50px 0px; }
}
@media only screen and (max-width:575.98px) {
    .contact { padding: 30px 0px; }
    .contact .contact-form { padding: 30px; }
}
@media only screen and (max-width:479.98px) {
    .contact .contact-form { padding: 20px; }
    .contact .contact-form input[type="button"] { width: 100%; padding: 10px 15px; }
}


/* Result ---------------------------------------------------------*/
.results { padding: 40px 0px; background-color: #f1f1f1; text-align: center; }
.results h2 { font-weight: 700; }
.results li { margin-top: 25px; }
.results .btn { margin-top: 40px; }
@media only screen and (max-width:991.98px) {
    .results { padding: 30px 0px; }
    .results h2 { font-weight: 500; }
    .results .btn { margin-top: 30px; }
}
@media only screen and (max-width:767.98px) {
    .results { border-top: 1px solid #ccc; }
    .results li { margin-top: 20px; }
    .results li:first-child { margin-top: 10px; }
    .results .btn { margin-top: 20px; }
}


/* Try Now -------------------------------------------------------*/
.try-now { padding: 80px 0px; }
.try-now h1, .try-now .heading { display: block; max-width: 750px; margin: 0px auto; text-align: center; font-weight: 700; margin-bottom: 46px; }
.try-now .upload { padding: 80px 30px; }
.try-now .bannerUpload { max-width: 500px; margin: 0 auto; }
.try-now .terms-service { max-width: 600px; padding: 0px 32px; margin: 32px auto 0px; }
.try-more { padding: 20px 0px; border-bottom: 1px solid #ddd; text-align: center; background-color: var(--white); z-index: 99; }
.try-more .btn i { margin-right: 10px; }
@media only screen and (max-width: 991.98px) {
    .try-now .upload { padding: 0px; }
    .try-more { top: 53px; padding: 12px 0px; }
}
@media only screen and (max-width:767.98px) {
    .try-more { top: 44px; }
    .try-more .btn { padding: 10px 30px; }
}


/* FAQ -------------------------------------------------------*/
.faq { padding: 60px 0px; }
.faq .mt-36 { margin-top: 36px; }
.faq .mb-20 { margin-bottom: 20px; }
.faq h1 { font-size: 36px; font-weight: 600; line-height: 1.3; color: var(--black); margin-bottom: 6px; }
.faq h4 { margin-bottom: 20px; color: var(--black); font-weight: 600; }
.faq h5 { margin-bottom: 20px; color: var(--black); font-weight: 600; font-size: 18px; line-height: 26px; }
.faq h6 { margin-bottom: 20px; color: var(--black); font-weight: 600; }
.faq p { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--black); margin-bottom: 24px; }
.faq p:last-of-type { margin-bottom: 0px; }
.faq p span { display: inline-block; vertical-align: top; width: 100%; padding-top: 8px; }
.faq p strong { font-weight: 600; }
.faq .faqBox { padding: 32px; margin: 24px 0px 32px; border-radius: 16px; background-color: #e1e1e1; }
.faq ol { list-style: decimal; padding-left: 20px; }
.faq ul { list-style: outside; padding-left: 40px; }
.faq li { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--black); margin-bottom: 24px; }
.faq li:last-child { margin-bottom: 0px; }
.faq mark { background-color: var(--light_blue_bg); }
.faq table { width: 100%; border: 1px solid #e6e6e6; margin: 0px 0px 24px; }
.faq table th { font-size: 12px; line-height: 18px; color: var(--gray); font-weight: 500; text-transform: uppercase; padding: 16px; border: none; border-right: 1px solid #e6e6e6; }
.faq table th:last-child { border-right: none; }
.faq table td { border-top: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; padding: 16px; font-size: 14px; line-height: 20px; color: var(--black); font-weight: 400; }
.faq table td:last-child { border-right: none; }
.faq table td:nth-child(2) { font-weight: 500; }
.faq section { padding-top: 36px; }


/* Help -------------------------------------------------------*/
.help { text-align: center; padding: 60px 0px; background-image: linear-gradient(to bottom, #F3F3F3, #FFFFFF); }
.help h1 { font-size: 40px; line-height: 46px; margin: 0px 0px 10px; }
.help ul { display: flex; flex-flow: wrap; flex-direction: row; justify-content: center; margin-top: 50px; }
.help ul li { background-color: var(--white); width: 15%; margin-right: 2%; border-radius: 8px; margin-bottom: 25px; -webkit-box-shadow: 0px 0px 10px 0px #ddd; -moz-box-shadow: 0px 0px 10px 0px #ddd; -ms-box-shadow: 0px 0px 10px 0px #ddd; -o-box-shadow: 0px 0px 10px 0px #ddd; box-shadow: 0px 0px 10px 0px #ddd; }
.help ul li:nth-child(6n), .help ul li:last-child { margin-right: 0px; }
.help li a { width: 100%; height: 100%; display: inline-block; vertical-align: top; padding: 30px 20px; border-radius: 10px; font-size: 14px; line-height: 20px; color: #777; text-transform: capitalize; }
.help li img { max-height: 44px; margin-bottom: 15px; }
.help li span { display: block; font-size: 14px; line-height: 20px; color: var(--black); font-weight: 500; }
.help li a:hover { background-color: var(--light_blue_bg); color: var(--primary); }
.get-support { max-width: 450px; margin: 50px auto 0px; background-color: var(--white); border-radius: 8px; padding: 50px 30px; text-align: center; -webkit-box-shadow: 0px 0px 10px 0px #ddd; -moz-box-shadow: 0px 0px 10px 0px #ddd; -ms-box-shadow: 0px 0px 10px 0px #ddd; -o-box-shadow: 0px 0px 10px 0px #ddd; box-shadow: 0px 0px 10px 0px #ddd; }
.get-support span { display: block; width: 70px; height: 70px; border: 2px solid var(--black); border-radius: 50%; padding: 21px 15px; margin: 20px auto 15px; }
.get-support span img { max-width: 100%; }
@media only screen and (max-width:991.98px) {
    .help h1 { font-size: 36px; line-height: 42px; }
    .help ul li { width: 30%; margin-right: 5%; }
    .help ul li:nth-child(5n) { margin-right: 5%; }
    .help ul li:nth-child(3n), .help ul li:last-child { margin-right: 0px; }
    .get-support { margin-top: 20px; }
}
@media only screen and (max-width:767.98px) {
    .help { padding: 50px 0px; }
    .help h1 { font-size: 30px; line-height: 36px; }
    .help form.search { margin-top: 15px; margin-bottom: 30px; }
    .help ul { margin-top: 30px; }
}
@media only screen and (max-width:575.98px) {
    .help h1 { font-size: 24px; line-height: 30px; }
    .help ul li { width: 48%; margin-right: 4%; }
    .help ul li:nth-child(5n) { margin-right: 4%; }
    .help ul li:nth-child(3n) { margin-right: 4%; }
    .help ul li:nth-child(2n), .help ul li:last-child { margin-right: 0px; }
    .get-support { margin-top: 10px; }
}
@media only screen and (max-width:374.98px) {
    .get-support { padding: 40px 20px; }
    .get-support h5 { margin-bottom: 5px; font-size: 16px; line-height: 22px; }
    .get-support h6 { font-size: 14px; line-height: 20px; }
    .get-support span { display: none; }
    .get-support .btn { margin-top: 15px; }
}

/* Sample -------------------------------------------------------*/
.sample { text-align: center; padding: 50px 0px; }
.sample .nav-tabs { margin: 20px 0px 50px; }
.sample .sample-row { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; }
.sample .grid-item { margin-bottom: 30px; }
.sample .grid-item.half { width: 540px; }
.sample .grid-item.half img { width: 540px; height: 360px; }
.sample .grid-item.full { width: 1110px; }
.sample .grid-item.full img { width: 1110px;  height: 450px; }
.sample .twentytwenty-container { border-radius: 16px; }
@media only screen and (min-width:1200.98px) {
    .sample h1 { font-size: 40px; line-height: 46px; }
}
@media only screen and (min-width:1200px) and (max-width:1499.98px) {
    .sample .grid-item.half { width: 470px; }
    .sample .grid-item.half img { width: 470px; height: 313px; }
    .sample .grid-item.full { width: 970px; }
    .sample .grid-item.full img { width: 970px; height: 393px; }
}
@media only screen and (max-width:1199.98px) {
    .sample .grid-item.half { width: 450px; }
    .sample .grid-item.half img { width: 450px; height: 300px; }
    .sample .grid-item.full { width: 930px; }
    .sample .grid-item.full img { width: 930px; height: 377px; }
}
@media only screen and (max-width:991.98px) {
    .sample .nav-tabs { margin: 16px 0px 32px; }
    .sample .grid-item { margin-bottom: 20px; }
    .sample .grid-item.half { width: 318px; }
    .sample .grid-item.half img { width: 318px; height: 212px; }
    .sample .grid-item.full { width: 665px; }
    .sample .grid-item.full img { width: 665px; height: 266px; }
}
@media only screen and (max-width:767.98px) {
    .sample .sample-row { justify-content: center; }
    .sample .grid-item { margin: 0px auto 20px; }
    .sample .grid-item.half { width: 476px; }
    .sample .grid-item.half img { width: 476px; height: 317px; }
    .sample .grid-item.full { display: none; }
}
@media only screen and (max-width:575.98px) {
    .sample .grid-item.half { width: 416px; }
    .sample .grid-item.half img { width: 416px; height: 277px; }
}
@media only screen and (max-width: 479.98px) {
    .sample .grid-item.half { width: 320px; }
    .sample .grid-item.half img { width: 320px; height: 213px; }
}
@media only screen and (max-width:399.98px) {
    .sample .grid-item.half { width: 300px; }
    .sample .grid-item.half img { width: 300px; height: 200px; }
}
@media only screen and (max-width:374.98px) {
    .sample .grid-item.half { width: 280px; }
    .sample .grid-item.half img { width: 280px; height: 187px; }
}

/* Account -------------------------------------------------------*/
.account { padding: 60px; }
.account .account-row { display: flex; flex-flow: wrap; justify-content: space-between; align-items: flex-start; max-width: 1400px; margin: 0 auto; }
.account .side-ber { width: 300px; text-align: left; background-color: var(--white); border-radius: 16px; position: sticky; top: 86px; -webkit-box-shadow: 0px 0px 24px 0px #e7e7e7; -moz-box-shadow: 0px 0px 24px 0px #e7e7e7; -ms-box-shadow: 0px 0px 24px 0px #e7e7e7; -o-box-shadow: 0px 0px 24px 0px #e7e7e7; box-shadow: 0px 0px 24px 0px #e7e7e7; }
.account .user-account { background-color: var(--light_bg); padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.account h1 { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--white); background-color: #001C5C; text-transform: capitalize; padding: 20px; padding-left: 30px; border-radius: 16px 16px 0px 0px; margin: 0px; }
.account .nav-tabs { text-align: left; flex-flow: wrap; white-space: inherit; margin-bottom: 24px; gap: 0px; }
.account .nav-tabs .nav-item { width: 100%; margin: 0px 0px 12px; }
.account .nav-tabs .nav-item:last-child { margin-bottom: 0px; margin-top: 10px; }
.account .nav-tabs .nav-link { background-color: transparent; display: inline-flex; align-items: center; justify-content: flex-start; width: 100%; font-size: 16px; line-height: 22px; color: var(--dark); font-weight: 400; text-transform: capitalize; border: none; border-right: 4px solid var(--white); border-radius: 0px; padding: 15px; padding-left: 30px; position: relative; cursor: pointer; }
.account .nav-tabs .nav-link:before { display: none; }
.account .nav-tabs .nav-link img { width: 24px; }
.account .nav-tabs .nav-link .icon-black { display: inline-block; margin-right: 15px; }
.account .nav-tabs .nav-link .icon-white { display: none; margin-right: 15px; }
.account .nav-tabs .nav-link:hover, .account .nav-tabs .nav-link.active, .account .nav-tabs .nav-item.show .nav-link { color: var(--navi_blue); background-color: var(--light_blue_bg); border-color: #001C5C; }
.account .nav-tabs .nav-link:hover .icon-white, .account .nav-tabs .nav-link.active .icon-white, .account .nav-tabs .nav-item.show .nav-link .icon-white { display: inline-block; }
.account .nav-tabs .nav-link:hover .icon-black,.account .nav-tabs .nav-link.active .icon-black, .account .nav-tabs .nav-item.show .nav-link .icon-black { display: none; }
.account .userInfo { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px; padding-left: 30px; margin: 10px 0px; }
.account .userInfo figure { width: 44px; height: 44px; border: 2px solid #001C5C; border-radius: 50%; background-color: var(--white); line-height: 40px; text-align: center; }
.account .userInfo img { height: 24px; }
.account .userName { width: calc(100% - 60px); }
.account .userName h6 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: capitalize; position: relative; padding-right: 20px; }
.account .userName h6 a { display: inline-block; vertical-align: top; width: 20px; height: 20px; border: 1px solid #001C5C; border-radius: 50%; text-align: center; font-size: 11px; line-height: 18px; color: #001C5C; margin-left: 5px; }
.account .userName span { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dark); }
.account .tab-content { width: calc(100% - 350px); background-color: var(--white); border-radius: 16px; overflow: hidden; -webkit-box-shadow: 0px 0px 24px 0px #e7e7e7; -moz-box-shadow: 0px 0px 24px 0px #e7e7e7; -ms-box-shadow: 0px 0px 24px 0px #e7e7e7; -o-box-shadow: 0px 0px 24px 0px #e7e7e7; box-shadow: 0px 0px 24px 0px #e7e7e7; }
.account .tab-content .topBox { background-color: #001C5C; padding: 20px 40px; text-align: left; }
.account .tab-content .topBox h3 { font-size: 20px; line-height: 28px; margin: 0px; color: var(--white); }
.account .tab-content .topBox h3 span { display: inline-block; vertical-align: top; font-weight: 400; padding-right:10px; margin-left: 0px; }
.account .tab-content .topBox h5 { line-height: 28px; color: var(--white); }
.account .tab-content .topBox .navLog { background-color: transparent; border: none; font-size: 18px; line-height: 24px; color: var(--light); font-weight: 600; text-transform: capitalize; text-decoration: none; padding: 0px 0px 10px; border-bottom: 3px solid transparent; position: relative; margin-right: 50px; }
.account .tab-content .topBox .navLog:last-child { margin-right: 0px; }
.account .tab-content .topBox .navLog:not(.btn-rev) { color: var(--light_blue_bg); border-color: var(--light_blue_bg); }
.account .tab-content .bottomBox { padding: 40px; }
.account .tab-content .boxCard { max-width: 800px; }
.collapseHeading { display: none; }
.account ul.credit-list { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: center; width: 100%; }
.account ul.credit-list li { width: 31%; text-align: center; margin-right: 3.5%; border-radius: 12px; padding: 30px; background-color: #fdfdfd; border: 1px solid #eeeeee; position: relative; }
.account ul.credit-list li:nth-child(3n), .account ul.credit-list li:last-child { margin-right: 0px; }
.account ul.credit-list p img { display: inline-block; vertical-align: top; margin-top: 5px; margin-left: 6px; }
.account ul.credit-list h5 { margin-top: 10px; font-weight: 600; }
.account ul.credit-list span { display: block; margin-top: 10px; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--gray); }
.account ul.credit-list span.renewal { background-color: var(--dark); position: absolute; left: 0px; bottom: 0px; width: 100%; padding: 5px; color: var(--white); border-radius: 0px 0px 12px 12px; }
.account .flex-pane { width: 100%; display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 12px; padding: 20px 30px; margin-top: 50px; background-color: #fdfdfd; border: 1px solid #eeeeee; }
.account .left-pane { width: calc(100% - 250px); }
.account .right-pane { width: 230px; text-align: center; }
.account .tab-pane .btn { font-size: 15px; padding: 12px 30px; border-width: 1px; }
.account .tab-pane .btn-small { font-size: 14px; padding: 6px 24px; border-width: 1px; }
.account .tab-pane .btn-small .spinner-border { width: 16px; height: 16px; border-width: 2px; margin-right: 4px; }
.account .flex-pane h4 { margin-bottom: 10px; }
.account .flex-pane h6 .payment-active { color: var(--green); }
.account .flex-pane h6 .payment-past-due { color: var(--orange); }
.account .flex-pane h6 .payment-cancel { color: var(--red); }
.account .flex-pane span { font-size: 13px; line-height: 19px; display: block; margin-top: 15px; }
.account .flex-pane span img { display: inline-block; vertical-align: top; width: 14px; margin-top: 2px; margin-right: 5px; }
.account .flex-pane p { color: var(--navi_blue); font-size: 14px; font-weight: 500; }
.account .getkey { background-color: #fdfdfd; border: 1px solid #eeeeee; padding: 16px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.account .getkey:last-child { margin-bottom: 0px; }
.account .getkey h5 { font-weight: 500; word-break: break-all; text-align: left; }
.account .bottomBox .active { margin-left: 20px; display: inline-block; vertical-align: middle; background-color:transparent; border: none; }
.account .bottomBox .api_key_show,
.account .bottomBox .ent_api_key_show { display: inline-block; vertical-align: middle; font-size: 16px; line-height: 26px; color: #001C5C; background-color: transparent; border: 1px solid #001C5C; width: 36px; height: 36px; line-height: 34px; border-radius: 50%; }
.account .bottomBox .copy_to_clipboard,
.account .bottomBox .enterprise_key_btn { font-size: 16px; line-height: 26px; margin-left: 6px; color: #001C5C; background-color: transparent; border: 1px solid #001C5C; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; }
.account .invite-firends { margin-top: 40px; }
.account .invite-firends .search { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; max-width: 500px; margin-top: 16px; border: 1px solid #001C5C; background-color: #FFFFFF; border-radius: 30px; overflow: hidden; }
.account .invite-firends input[type="email"] { width: calc(100% - 136px); height: 44px; line-height: 44px; border-radius: 0px; border: none; background-color: transparent; padding: 0px 16px; }
.account .invite-firends .btn { width: 136px; text-align: center; padding: 10px 25px; text-transform: uppercase; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 1px; background: #001C5C; border: none; border-radius: 0px 30px 30px 0px; }
.account ul.social { display: flex; flex-flow: wrap; width: 100%; margin-top: 16px; }
.account ul.social li { margin-right: 16px; }
.account ul.social li:last-child { margin-right: 0px; }
.account ul.social a { display: inline-block; vertical-align: top; font-size: 20px; line-height: 40px; color: var(--navi_blue); width: 40px; height: 40px; border-radius: 50%; background-color: var(--light_blue_bg); text-align: center; }
.account ul.social a i { margin: 0px; }
.account ul.social li a:hover { background-color: var(--navi_blue); color: var(--light_blue_bg); }
.account .payment-info { max-width: 460px; padding: 30px 45px; border: 1px solid #ddd; border-radius: 16px; margin: 50px auto 80px; }
.account .payment-info h3 { line-height: 32px; margin-bottom: 30px; font-weight: 700; }
.account .payment-info h3 .btn { float: right; padding: 7px 15px; }
.account .payment-info h6 { margin-bottom: 6px; text-transform: capitalize; }
.account .payment-info span { font-size: 18px; line-height: 28px; color: var(--black); font-weight: 500; letter-spacing: 4px; display: block; margin-bottom: 20px; }
.account .payment-info span:last-child { margin-bottom: 0px; }
.account .billing ul { max-height: 530px; overflow-x: hidden; overflow-y: auto; padding-right: 10px; }
.account .billing ul::-webkit-scrollbar { width: 6px; }
.account .billing ul::-webkit-scrollbar-track { background-color: var(--light); -webkit-border-radius: 0px; border-radius: 0px; }
.account .billing ul::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #cccccc; }
.account .billing li { width: 100%; display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px; border: 1px solid #EEEEEE; margin-bottom: 16px; border-radius: 10px; }
.account .billing li:nth-child(2n) { background-color: #fdfdfd; }
.account .billing li:last-child {  }
.account .billing li p { width: calc(100% - 180px); text-align: left; }
.account .tab-pane .billing li a { padding: 6px 20px; font-size: 13px; border-width: 1px; }

.account table { text-align: center; width: 100% !important; border: none; border-collapse: separate; border-spacing: 0 10px; margin-top: 0px !important; min-height: 120px; }
.account table th { font-size: 12px; line-height: 14px; color: var(--gray); font-weight: 500; text-transform: uppercase; text-align: left; padding: 0px 15px; border: none; }
.account .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.account table.table-bordered.dataTable tbody td { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 15px; font-size: 14px; line-height: 20px; color: var(--dark); font-weight: 400; text-align: left; }
.account table.table-bordered.dataTable tbody td.dataTables_empty { text-align: center; }
.account table.table-bordered.dataTable tbody td:first-child { border-left: 1px solid #e6e6e6; border-right: none; border-radius: 10px 0px 0px 10px; }
.account table.table-bordered.dataTable tbody td:last-child { border-right: 1px solid #e6e6e6; border-radius: 0px 10px 10px 0px; }
.account table.table-bordered.dataTable tbody td.dataTables_empty { border-radius: 10px; }
div.dataTables_wrapper div.dataTables_info { font-size: 12px; font-weight: 500; color: var(--gray); }
div.dataTables_wrapper div.dataTables_paginate ul.pagination li { margin-right: 10px; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination a { border: 1px solid #ddd; border-radius: 10px; font-size: 12px; line-height: 18px; color: var(--dark); font-weight: 400; cursor: pointer; text-align: center; min-width: 36px; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a { background-color: var(--navi_blue); color: var(--white); font-size: 16px;   font-weight: 600; border: none; }
.account .editProfile { display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding: 20px 0px; margin-bottom: 20px; }
.account .editProfile .change-email { width: 100%; border-top: 1px solid #eee; padding-top: 20px; margin-top: 20px; }
.account .editProfile .box { max-width: 500px; padding: 30px; background-color: #fdfdfd; border: 1px solid #eeeeee; border-radius: 16px; }

.account .deleteAccount { display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; margin-top: 50px; background-color: #fdfdfd; border: 1px solid #eeeeee; padding: 20px; border-radius: 12px; }
.account .deleteAccount .delete { border-color: #ff0000; color: #ff0000; padding: 10px !important; width: 44px; height: 44px; }
.account .addApiKey { text-align: left; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; gap: 20px; }
.account .addApiKey p { max-width: calc(100% - 220px); font-weight: 600; }
.account .addApiKey .btn { padding: 6px 20px; font-size: 14px; }
.account .dateGlobalFilter { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #EEEEEE; border-radius: 12px; margin-top: 32px; }
.account .dateGlobalFilter select { max-width: 140px; height: 32px; font-size: 12px; line-height: 30px; }
.account .npremApiWrap { margin-top: 24px; background-color: #f7f7f7; padding: 10px; border-radius: 12px; }
.account .npremApiWrap .title { margin: 10px -10px; padding: 10px 10px 0px; border-top: 1px solid #EEEEEE; text-align: left; }
.account .onpremApi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: var(--white); border: 1px solid #EEEEEE; border-radius: 12px; margin-bottom: 16px; }
.account .onpremApi:last-child { margin-bottom: 0px; }
.account .onpremApi.disabled { opacity: 0.5; pointer-events: none; }
.account .onpremApi .keyName { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #EEEEEE; }
.account .onpremApi h6 { text-align: left; font-size: 14px; line-height: 20px; font-weight: 500; }
.account .onpremApi input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 40px; height: 22px; border: 1px solid #DDDDDD; border-radius: 15px; background-color: var(--white); position: relative; cursor: pointer; -webkit-transition: .3s; transition: .3s; pointer-events: all; }
.account .onpremApi input[type="checkbox"]:before { position: absolute; content: ""; top: 3px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background-color: #a0b5df; -webkit-transition: .3s; transition: .3s; }
}
.account .onpremApi input[type="checkbox"]:checked { background-color: var(--white); }
.account .onpremApi input[type="checkbox"]:checked:before { left: 20px; background-color: var(--navi_blue); }
.account .onpremApi .apiOptions { padding: 12px 16px; }
#modalEnterpriseUsagesDownload h4 { margin-bottom:24px }
#modalEnterpriseUsagesDownload .form-group i { margin: 0px; }
#modalEnterpriseUsagesDownload .addApiKey { width: 100%; padding: 10px; border-radius: 6px; border: none; margin-top: 12px; }
#account-log #filterCreditLog { margin-bottom: 24px; }
#account-log .filter .dropdown-toggle { width: 200px; background-color: var(--light); border: 1px solid #e1e1e1; display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; height: 40px; }
#account-log .filter .dropdown-menu { background-color: var(--light); width: 260px; margin-top: 8px; padding: 12px; border-radius: 8px; max-height: 170px; overflow-x: hidden; overflow-x: auto; }
#account-log .filter .dropdown-menu a { padding: 8px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--dark); }
#account-log .filter .dropdown-menu a:hover,
#account-log .filter .dropdown-menu a:active { background-color: var(--light_blue_bg); color: var(--navi_blue); }
#account-log #countUsagesLog { background-color: var(--white); border: 1px solid #e1e1e1; display: inline-block; padding: 8px 20px; border-radius: 8px; font-size: 16px; line-height: 20px; font-weight: 500; height: 40px; }
#account-log #countUsagesLog:empty { display: none; }
.customSelectDate .close { border-radius: 50%; border: 1px solid rgba(0, 0, 0, .05); background: hsla(0, 0%, 100%, .7); display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; position: absolute; right: 12px; top: 12px; cursor: pointer; z-index: 4; }
.customSelectDate .modal-body { padding: 50px 24px 24px; }
.customSelectDate .btn { width: 100%; }
@media only screen and (max-width: 1199.98px) {
    .account { padding: 36px 0px 60px; }
    .account .side-ber { width: 100%; border-radius: 0px; box-shadow: none; padding: 24px; top: -14px; z-index: 9; }
    .account h1 { padding: 0px; color: var(--dark); background-color: transparent; font-size: 24px; line-height: 34px; font-weight: 600; margin-bottom: 30px; }
    .account .userInfo { padding: 0px; }
    .account .side-ber .block { margin: 30px 0px 0px; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }
    .collapseHeading { display: block; font-size: 16px; line-height: 24px; color: var(--black); text-transform: uppercase; background-color: var(--light); padding: 12px 15px; position: relative; }
    .collapseHeading:after { content: "\f107"; font-family: FontAwesome; position: absolute; right: 10px; font-size: 24px; }
    .collapseHeading.active-acc:after { content: "\f106"; }
    .account .nav-tabs { margin: 0px; padding-top: 12px; max-height: 200px; overflow-y: auto; }
    .account .nav-tabs .nav-item { margin: 0px; }
    .account .nav-tabs .nav-item:last-child { margin-top: 0px; }
    .account .nav-tabs .nav-link { padding-left: 15px; border: none; }
    .account .nav-tabs .nav-link:hover, .account .nav-tabs .nav-link.active, .account .nav-tabs .nav-item.show .nav-link { background-color: var(--white); }
    .account .tab-content { width: calc(100% - 48px); margin: 0 auto; }
    .account .tab-content .topBox { padding: 20px 40px; background-color: var(--gray); }
    .account .tab-content .bottomBox { padding: 40px; }
    .account h4 { font-size: 20px; line-height: 26px; }
    .account .flex-pane { margin-top: 50px; }
}
@media only screen and (max-width: 991.98px) {
    .account ul.credit-list li { width: 100%; margin: 0px 0px 30px; }
    .account ul.credit-list li:last-child { margin-bottom: 0px; }
    .account .flex-pane { margin-top: 30px; }
    .account .editProfile { padding: 16px 0px; margin-bottom: 10px; }
    .account .payment-info { width: calc(100% - 48px); margin: 40px auto 60px; }
}
@media only screen and (max-width: 767.98px) {
    .account .side-ber { top: -88px; }
    .account .tab-content .topBox { padding: 16px 24px; }
    .account .tab-content .bottomBox { padding: 30px 24px; }
    .account ul.credit-list li { padding: 24px 16px; }
    .account .flex-pane { padding: 24px 16px; }
    .account .left-pane { width: 100%; }
    .account .right-pane { width: 100%; text-align: left; margin-top: 16px; }
    .account .tab-pane .btn { font-size: 14px; padding: 6px 24px; border-width: 1px; }
    .account .getkey { padding: 24px 16px; flex-flow: wrap; }
    .account .getkey > div { width: 100%; }
    .account .getkey h5 { width: 100%; margin-bottom: 16px; text-align: center; }
    .account .bottomBox .active { margin-left: 0px; }
    .account .billing li p { width: 100%; }
    .account .tab-pane .billing li a { margin-top: 10px; }
    .account .deleteAccount { padding: 20px 16px; text-align: center; justify-content: center; }
    .account .deleteAccount p { width: 100%; margin-bottom: 16px; }
    .account .payment-info { margin: 30px auto 60px; }
    .account .addApiKey { justify-content: center; gap: 6px }
    .account .addApiKey p { max-width: 100%; }
    .account .addApiKey .btn { width: 100%; }
    .account .npremApiWrap .title { border: none; margin: 16px 0px 8px; padding: 0px; font-weight: 600; }
    .account .onpremApi .keyName { margin-bottom: 12px; }
    .account .onpremApi .apiOptions { width: 100%; padding: 0px 16px; justify-content: center; }
    .account .onpremApi .apiOptions:last-child { padding-bottom: 12px; }
    .account .npremApiWrap { background-color: var(--white); padding: 0px; border-radius: 0px; }
    #account-log .filter .dropdown-toggle { width: 100%; }
    #account-log .filter .dropdown-menu { width: 100%; }
    #account-log #countUsagesLog { width: 100%; margin-top: 8px; padding: 0px; border: none; font-size: 13px; line-height: 20px; }
}
@media only screen and (max-width: 479.98px) {
    .account .g-recaptcha { transform: scale(0.6); -webkit-transform: scale(0.6); }
    .account .payment-info { padding: 24px; }
    .account .payment-info h3 i { display: block; font-size: 40px; }
    .account .payment-info h3 .btn { float: none; margin-top: 16px; }
    .account .payment-info span { font-size: 16px; line-height: 26px; letter-spacing: 2px; }
    .account .addApiKey { margin-top: 24px; }
}


/* Subscription Terms ------------------------------------------------- */
.subscription-terms { padding: 50px 0px; }
.subscription-terms h3 { margin-bottom: 10px; }
.subscription-terms img { max-width: 100%; }
ul.subscription-list { margin-top: 20px; }
ul.subscription-list li { padding-left: 30px; padding-bottom: 15px; position: relative; font-size: 16px; line-height: 22px; color: #29282d; }
ul.subscription-list li:last-child { padding-bottom: 0px; }
ul.subscription-list li:before { content: ""; width: 11px; height: 11px; background-color: #29282d; border-radius: 50%; position: absolute; left: 0px; top: 5px; z-index: 5; }
ul.subscription-list li:after { content: ""; width: 1px; height: 100%; background-color: #29282d; position: absolute; left: 5px; top: 5px; z-index: 3; }
ul.subscription-list li:last-child:after { display: none; }
@media only screen and (max-width:1199.98px) {
    ul.subscription-list li { font-size: 14px; line-height: 20px; }
}
@media only screen and (max-width:979px) {
    ul.subscription-list { margin-top: 15px; }
}
@media only screen and (max-width:767px) {
    ul.subscription-list { margin-top: 10px; }
}
@media only screen and (max-width:639px) {
    .subscription-terms { padding: 30px 0px; }
    ul.subscription-list { margin-top: 15px; }
}
@media only screen and (max-width:479px) {
    .subscription-terms { padding: 20px 0px; }
    ul.subscription-list { margin-top: 10px; }
}


/* Output Format -------------------------------------------------------*/
.output-format { padding-top: 70px; }
.output-format--table { width: 100%; margin-top: 30px; margin-bottom: 20px; border: 1px solid #dee2e6; }
.output-format--table th { background-color: var(--light_bg); border-bottom: 1px solid #dee2e6; font-size: 16px; line-height: 22px; color: var(--dark); text-transform: capitalize; font-weight: 700; text-align: center; padding: 15px 10px; }
.output-format--table td { background-color: var(--white); border-bottom: 1px solid #dee2e6; font-size: 16px; line-height: 22px; color: #0a193b; text-align: center; padding: 10px; }
.output-format--table th:last-child, .output-format--table td:last-child { border-right: none; }
.output-format--table tr:last-child td { border-bottom: none; }
.output-format--table ul { list-style: none; text-align: left; }
.output-format--table li { margin-bottom: 5px; }
.output-format--table li:last-child { margin-bottom: 0px; }
.output-format--table a { font-weight: 700; }
.output-format--table a i { margin-right: 10px; }
.output-format--table span { display: block; color: #0069d9; font-size: 13px; }
@media only screen and (max-width:1199.98px) {
    .output-format { padding-top: 60px; }
    .output-format--table th { font-size: 14px; line-height: 20px; }
    .output-format--table td { font-size: 14px; line-height: 20px; }
}
@media only screen and (max-width:991.98px) {
    .output-format { padding-top: 60px; }
    .output-format { padding-top: 30px; }
}
@media only screen and (max-width:767.98px) {
    .output-format { padding-top: 40px; }
}
@media only screen and (max-width:639.98px) {
    .output-format--table, .output-format--table tbody, .output-format--table tr, .output-format--table td { display: block; }
    .output-format--table thead { display: none; }
    .output-format--table td { text-align: left; position: relative; padding-left: 50%; }
    .output-format--table td:before { content: attr(data-th); font-size: 14px; line-height: 20px; color: #777; font-weight: 500; text-transform: uppercase; width: 50%; height: 100%; padding: 10px; position: absolute; left: 0px; top: 0px; }
    .output-format--table tr:last-child td { border-bottom: 1px solid #e4efff; }
    .output-format--table tr:last-child td:last-child { border-bottom: none; }
    .output-format--table td:last-child { border-color: #29282d; }
}
@media only screen and (max-width:575.98px) {
    .output-format--table { margin-top: 20px; margin-bottom: 10px; }
}

/* Swagger API Doc -------------------------------------------------------*/
.swagger-api--doc { padding-top: 70px; text-align: left; }
.swagger-api--doc .api-doc { background-color: var(--light_bg); border: 1px solid #dee2e6; margin-top: 30px; }
.swagger-api--doc h5 { margin: 0px; }
.swagger-api--doc h5 span { float: right; font-size: 16px; font-weight: 500; position: relative; }
.swagger-api--doc h5 span:after { content: "required"; font-size: 10px; line-height: 18px; color: #ff0000; position: relative; padding-left: 4px; top: -6px; }
.swagger-api--doc .first-col { padding: 30px; background-color: var(--white); display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; }
.swagger-api--doc .first-col p { width: 48%; margin-right: 4%; font-weight: 500; font-style: italic; }
.swagger-api--doc .first-col p:nth-child(2n) { margin-right: 0px; }
.swagger-api--doc .first-col p span { font-style: normal; font-weight: 700; padding-right: 10px; color: #29282d; }
.swagger-api--doc h5 { padding: 10px 20px; background-color: var(--light_blue_bg); color: var(--dark); font-weight: 700; }
.swagger-api--doc ul { list-style: none; }
.swagger-api--doc li { width: 100%; display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; padding: 20px; }
.swagger-api--doc li:nth-child(odd) { background-color: var(--white); }
.swagger-api--doc li:last-child { border: none; }
.swagger-api--doc .param-left-col { width: 26%; margin-right: 4%; }
.swagger-api--doc .param-right-col { width: 70%; }
.swagger-api--doc .param-right-col p { font-size: 14px; line-height: 24px; }
.swagger-api--doc li h6 { text-transform: none; font-weight: 700; word-break: break-all; }
.swagger-api--doc li span { font-size: 13px; line-height: 18px; font-weight: 400; display: inline-block; vertical-align: top; text-transform: none; }
.swagger-api--doc .param-right-col .param { padding: 10px; border-radius: 10px; background-color: var(--dark); color: var(--white); font-size: 16px; line-height: 24px; margin-top: 10px; }
@media only screen and (max-width:1199.98px) {
    .swagger-api--doc { padding-top: 60px; }
}
@media only screen and (max-width:991.98px) {
    .swagger-api--doc { padding-top: 50px; }
}
@media only screen and (max-width:767.98px) {
    .swagger-api--doc { padding-top: 40px; }
    .swagger-api--doc .first-col p { width: 100%; margin-right: 0px; }
    .swagger-api--doc .param-left-col { width: 30%; margin-right: 2%; }
    .swagger-api--doc .param-right-col { width: 68%; }
}
@media only screen and (max-width:575.98px) {
    .swagger-api--doc .first-col { padding: 15px 10px; }
    .swagger-api--doc h5 { padding: 10px; }
    .swagger-api--doc li { padding: 15px 10px; }
    .swagger-api--doc .param-left-col { width: 100%; margin-bottom: 5px; }
    .swagger-api--doc .param-right-col { width: 100%; }
}

/* How Works -------------------------------------------------*/
.how-box { margin-bottom: 25px; }
.how-box a { background: var(--white); width: 100%; height: 100%; display: inline-block; text-align: center; padding: 40px 30px; color: #212121; font-size: 20px; border-radius: 10px; -webkit-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -moz-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -ms-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -o-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; }
.how-box i { background-color: #696969; color: var(--white); width: 80px; height: 80px; line-height: 80px; border-radius: 50%; margin-bottom: 15px; font-size: 40px; }
.how-box a:hover { color: #f34e3a; }
.how-box a:hover i { background-color: #f34e3a; }
@media only screen and (max-width:1199.98px) {
    .how-box:last-child { margin-bottom: 0px; }
}

/* Pricing -------------------------------------------------*/
.pricing { padding: 70px 0px; position: relative; position: relative; background-color: var(--white); }
.pricing h1 { text-align: center; margin-bottom: 5px; }
.pricing h1 span { color: var(--navi_blue); }
.black-fliday-sale { display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.black-fliday-sale div { background-color: var(--danger); color: var(--white); font-size: 18px; line-height: 24px; text-align: center; padding: 8px 20px; border-radius: 40px; }
.black-fliday-sale strong { font-weight: 600; }
.black-fliday-sale mark { border-radius: 2px; padding: 0px 0.4em; background-color: #ffd9dd; }
.black-fliday-sale span { font-size: 110%; font-weight: 500; }
.pricing .price-block h2 { font-size: 18px; line-height: 24px; font-weight: 500; color: var(--dark); text-transform: capitalize; margin: 0px; }
.pricing .price-block h3 { color: var(--black); font-weight: 800; margin-top: 8px; }
.pricing .price-block h3 small { font-size: 14px; font-weight: 500; }
.pricing h4 { font-size: 40px; line-height: 48px; color: var(--black); text-transform: capitalize; font-weight: 700; margin-top: 8px; }
.pricing h4 small { font-size: 14px; font-weight: 400; }
.pricing h4 .currency { font-weight: 600; padding-right: 2px; }
.pricing h5 { text-align: center; color: var(--dark); font-weight: 500; margin-bottom: 25px; }
.pricing h5 span svg { height: 32px; }
.pricing h5 a { color: var(--green); }
.pricing h5 a:hover { color: var(--green); }
.pricing h6.offer { font-size: 22px; line-height: 28px; color: #001C5C; text-align: center; }
.pricing h6.offer small { display: block; font-size: 15px; padding-top: 3px; color: #888888; }
.pricing h6.offer span { font-size: 26px; font-weight: 700; color: var(--navi_blue); }
.pricing h6.offer font { color: #d1a90d; font-weight: 700; }

.pricing ul { padding: 16px 0px; }
.pricing ul li { font-size: 16px; line-height: 22px; color: #233d62; font-weight: 500; padding-left: 32px; background-image: url(../images/check.png); background-repeat: no-repeat; background-position: 0px 1px; background-size: 20px; margin-bottom: 32px; }
.pricing ul li:last-child { margin-bottom: 0px; }
.pricing .pricing-row { display: flex; flex-flow: wrap; flex-direction: row; justify-content: center; align-items: flex-start; gap: 2%; width: 100%; margin-top: 50px; }
.pricing .price-block { position: relative; position: relative; background-color: var(--white); border: 1px solid #ddd; border-radius: 8px; }
.pricing .column-1 { width: 28%; }
.pricing .column-2 { width: 36%; }
.pricing .column-3 { width: 32%; }
.pricing .column-4 { width: 28%; }
.pricing .priceTop { width: 100%; padding: 36px 30px 10px; position: relative; }
.pricing .priceTop .popular,
.pricing .priceTop .get-discount { position: absolute; top: 5px; right: 5px; border-radius: 20px; color: var(--white); display: inline-block; vertical-align: top; font-style: normal; font-weight: 500; padding: 4px 8px; font-size: 12px; line-height: 18px; letter-spacing: 1px; text-transform: capitalize; animation: gradient 15s ease infinite; background-size: 400% 400%; background-image: var(--navi_blue); background-image: linear-gradient(140deg, #c99f00 0, #c99f00 40%, #ffea9c, #c99f00 60%, #c99f00 100%); }
@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
.pricing .priceTop .get-discount { background-color: var(--yellow); }
.pricing .priceTop .get-discount:after { border-top-color: var(--yellow); }
.pricing .priceBottom { padding: 0px 16px 20px; }
.pricing .free-features { display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; width: 100%; gap: 20px; margin-top: 30px; }
.pricing .free-features img { width: 36px; height: 36px; border-radius: 50%; }
.pricing .free-features span { font-size: 16px; line-height: 22px; color: #233d62; display: block; width: calc(100% - 56px); }
.pricing table { width: 100%; font-size: 13px; line-height: 18px; text-align: left; font-weight: 500; color: #233d62; border-collapse: separate; position: relative; border-spacing: 0 6px }
.pricing table tr { position: relative; }
.pricing table tr:has(input:checked) { background-color: var(--light); }
.pricing td { padding: 10px 8px; text-align: left; vertical-align: top; }
.pricing td:first-child { width: 22px; padding: 8px 12px; border-radius: 8px 0px 0px 8px; }
.pricing td:nth-child(2) { font-size: 14px; font-weight: 400; }
.pricing td:last-child { text-align: right; font-weight: 500; border-radius: 0px 10px 10px 0px; }
.pricing td strong { font-weight: 700; }
.pricing td .small-mobile { display: none; }
.pricing td span { display: block; color: var(--navi_blue); font-size: 12px; line-height: 16px; }
.pricing td span.best-value { font-weight: 500; }
.pricing td span.discount { display: block; color: #ff0000; font-size: 12px; line-height: 16px; }
.pricing td del { position: relative; text-decoration: none; color: #888888; }
.pricing td del:after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--gray); transform: rotate(-7deg); }
.pricing td .strikediag { background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%); }
.pricing .custom-radio { padding-left: 22px; position: absolute; width: 100%; left: 0px; }
.pricing .custom-radio .custom-control-label { position: absolute; margin-bottom: 0; vertical-align: top; width: 100%; left: 6px; top: 0px; height: 100%; cursor: pointer; }
.pricing .custom-radio .custom-control-label:before { left: -1px; top: 3px; width: 18px; height: 18px; border: 2px solid #ddd; background: none; }
.pricing .custom-control-label:after { left: 3px; top: 7px; background-image: none !important; border-radius: 50%; width: 10px; height: 10px; }
.pricing .custom-radio .custom-control-input:checked ~ .custom-control-label:after { background-color: var(--primary); }
.pricing .custom-control-input:checked ~ .custom-control-label:before { background-color: transparent !important; border-color: var(--primary); }
.tenure { display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; justify-content: center; width: 100%; margin-top: 20px; }
.tenure span { font-size: 13px; line-height: 20px; font-weight: 500; text-transform: capitalize; color: #aaa; }
.tenure span.active { color: var(--primary); }
.tenure span strong { color: var(--black); padding-left: 5px; }
.custom-switch { padding-left: 32px; margin: 0px 10px; }
.custom-switch .custom-control-label:before { width: 32px; height: 18px; border-radius: 20px; left: -32px; top: 4px; border-color: #DDDDDD; background-color: #DDDDDD ; box-shadow: none !important; cursor: pointer; }
.custom-switch .custom-control-input:focus ~ .custom-control-label:before { border-color: #DDDDDD; }
.custom-switch .custom-control-input:checked ~ .custom-control-label:before { border-color: var(--primary); background-color: var(--primary); }
.custom-switch .custom-control-label:after { top: 7px; left: -30px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--white); }
.custom-switch .custom-control-input:checked ~ .custom-control-label:after { background-color: var(--white); -webkit-transform: translateX(16px); -moz-transform: translateX(16px); -ms-transform: translateX(16px); -o-transform: translateX(16px); transform: translateX(16px); }
.pricing .buttons { text-align: center; margin-top: 24px; }
.pricing .buttons.topGap { margin-top: 60px; }
.pricing .buttons .btn { width: 100%; padding: 12px 30px; border-radius: 10px; }
.pricing .buttons .btn-rev.check_click { padding: 12px 16px; font-size: 15px; }
.pricing .buttons .animate { animation-duration: 10s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: gradientBg; animation-timing-function: linear; background-image: var(--navi_blue); background-image: linear-gradient(135deg,  var(--navi_blue) 0%, var(--navi_blue) 30%, #dce3ff, var(--navi_blue) 70%, var(--navi_blue) 100%); background-size: 250%; }
.pricing .buttons span { font-size: 13px; line-height: 19px; display: block; margin: 10px 0px 15px; }
.pricing .buttons span.textDark { color: #0b163f; }
.pricing .recomended { padding: 24px 16px; text-align: center; border-top: 1px solid #ddd; }
.pricing .recomended p { font-size: 12px; line-height: 18px; color: var(--dark); margin-bottom: 2px; width: 100%; }
.pricing .recomended p strong { padding: 0px 5px; font-weight: 500; }
.pricing .recomended p:last-child { margin-bottom: 0px; }
.pricing .guarantee { padding: 0px; margin: 0px; border: none; display: inline-block; vertical-align: middle; background-color: transparent; text-align: center; cursor: pointer; font-size: 12px; line-height: 18px; color: var(--primary); text-align: left; }
.pricing .guarantee i { padding-left: 3px; color: #29282d; }
.pricing .price-block .tax { display: block; font-size: 11px; line-height: 20px; text-align: center; color: #777777; margin-top: 5px; }
.popover-body { text-align: center; }
.popover-body p { font-size: 14px; line-height: 20px; }
.popover-body a { font-size: 14px; line-height: 20px; text-transform: capitalize; }
.popover-body span { display: block; padding-top: 6px; }
.pricing .rollover { max-width: 1000px; margin: 0 auto; font-size: 18px; }
.pricing .rollover-more { display: inline-block; margin: 10px 0px 0px; font-size: 18px; }
.pricing .price-block .offer { font-size: 10px; line-height: 16px; color: var(--dark); text-transform: none; font-weight: 500; display: block; }
.pricing .price-block .offer span { font-size: 11px; font-weight: 500; display: inline; text-transform: uppercase; color: var(--yellow); }
.pricing .black-friday-sale { font-size: 14px; line-height: 18px; color: #fff; text-transform: capitalize; font-weight: 700; text-align: center; position: absolute; right: -50px; top: 24px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.pricing .black-friday-sale .top { float: left; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 28px solid var(--yellow); margin-right: -28px; position: relative; z-index: 15; }
.pricing .black-friday-sale .middle { float: left; background: var(--yellow); width: 120px; padding: 5px 0 3px 0; height: 28px; position: relative; z-index: 20; }
.pricing .black-friday-sale .bottom { float: left; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 28px solid var(--yellow); margin-left: -28px; position: relative; z-index: 15; }
.pricing .black-friday-sale .top-curb { position: absolute; left: 0; top: 28px; z-index: 10; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #785400; }
.pricing .black-friday-sale .bottom-curb { position: absolute; right: 0; top: 28px; z-index: 10; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #785400; }
.pricing .grabOffer { display: block; text-align: center; font-size: 20px; line-height: 26px; color: var(--dark); font-weight: 600; background-color: var(--light_blue_bg); padding: 10px; max-width: 450px; margin: 10px auto; border-radius: 12px; }
.pricing  .grabOffer span { color: var(--navi_blue); font-weight: 700; }
.pricing .unlimitedImageProcess { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; border: 1px solid #ddd; border-radius: 24px; overflow: hidden; }
.pricing .unlimitedImageProcess video { width: 300px; }
.pricing .unlimitedImageProcess aside { width: calc(100% - 340px); padding: 24px; }
.pricing .unlimitedImageProcess h3 { font-weight: 800; }
.pricing .unlimitedImageProcess h3 span { color: var(--primary); }
.pricing .unlimitedImageProcess .btn { padding: 14px 50px; font-weight: 600; margin-top: 16px; }

@media only screen and (min-width: 1350px) {
    .pricing .container { max-width: 1240px; }
    .pricing .price-block h3 { font-size: 32px; line-height: 38px; }
}
@media only screen and (min-width:1200px) and (max-width:1349.98px) {
    .pricing .container { max-width: 1140px; }
}
@media only screen and (max-width:1199.98px) {
    .pricing { padding: 40px 0px 70px; }
    .pricing .row { margin-top: 40px; }
    .pricing .pricing-row { margin-top: 40px; }
    .pricing .priceTop { padding: 36px 24px 16px; }
    .pricing .price-block h3 { font-size: 28px; line-height: 36px; }
    .pricing .free-features { margin-top: 20px; gap: 12px; }
    .pricing .free-features span { font-size: 14px; line-height: 20px; font-weight: 500; width: calc(100% - 48px); }
    .pricing .free-features img { max-width: 36px; }
    .pricing table { font-size: 12px; line-height: 18px; }
    .pricing td { padding: 8px 5px; }
    .pricing td:nth-child(2) { font-size: 13px; }
    .pricing .recomended { padding: 20px; }
    .pricing h5 { font-size: 16px; line-height: 22px; }
    .pricing .grabOffer { font-size: 16px; line-height: 22px; max-width: 360px; }
    .pricing .unlimitedImageProcess h3 { font-size: 24px; line-height: 32px; }
}
@media only screen and (max-width:991.98px) {
    .pricing { padding: 50px 0px; }
    .pricing .price-block h2 { font-size: 20px; line-height: 26px; }
    .pricing h4 { font-size: 36px; line-height: 44px; }
    .pricing h4 small { font-size: 13px; }
    .pricing h4 .currency { font-size: 20px; }
    .pricing .pricing-row { margin-top: 36px; }
    .pricing .column-1,
    .pricing .column-2,
    .pricing .column-3,
    .pricing .column-4 { width: 100%; margin-bottom: 24px; }
    .pricing .column-1 .priceTop { padding: 20px; height: auto; }
    .pricing .free-features span { font-size: 16px; line-height: 22px; }
    .pricing .guarantee { width: 100%; }
    .pricing table { font-size: 13px; line-height: 19px; }
    .pricing td:nth-child(2) { font-size: 15px; }
    .pricing ul li { margin-bottom: 24px; }
    .pricing .unlimitedImageProcess { margin-top: 0px; }
    .pricing .unlimitedImageProcess video { display: none; }
    .pricing .unlimitedImageProcess aside { width: 100%; }
    .pricing .buttons.topGap { margin-top: 24px; }
    .black-fliday-sale div { font-size: 16px; line-height: 22px; }
    .black-fliday-sale strong { font-weight: 500; }
    .black-fliday-sale span { font-size: 100%; }
    .black-fliday-sale mark { padding: 0px 2px; }
}
@media only screen and (max-width:767.98px) {
    .pricing .price-block .priceTop { padding: 30px 16px 10px; height: auto; }
    .pricing .price-block:last-child { margin-right: auto; }
    .pricing .rollover { font-size: 16px; }
    .pricing h6.offer { font-size: 18px; line-height: 24px; }
    .pricing h6.offer small { font-size: 14px; }
    .pricing h6.offer span { font-size: 22px; }
    .pricing h5 { font-size: 14px; line-height: 20px; }
    .pricing .unlimitedImageProcess { padding: 36px 20px; gap: 0px; }
    .pricing .unlimitedImageProcess aside { width: 100%; text-align: center; padding: 0px; }
    .pricing .unlimitedImageProcess h3 { font-size: 20px; line-height: 26px; }
}
@media only screen and (max-width:599.98px) {
    .pricing { padding: 40px 0px; }
}
@media only screen and (max-width:499.98px) {
    .black-fliday-sale div { font-size: 14px; line-height: 20px; max-width: 412px; }
}
@media only screen and (max-width:479.98px) {
    .pricing { overflow: hidden; }
    .pricing .container { padding: 0px 16px; }
    .pricing .black-friday-sale { font-size: 12px; font-weight: 500; text-transform: capitalize; top: 19px; }
    .pricing .black-friday-sale .middle { width: 106px; }
    .pricing ul li { font-size: 14px; }
}
@media only screen and (max-width:419.98px) {
    .pricing td .large-screen { display: none; }
    .pricing td .small-mobile { display: block; }
}
@media only screen and (max-width:374.98px) {
    .pricing .priceBottom { padding: 0px 15px 20px; }
    .pricing h1 { font-size: 24px; line-height: 30px; }
}


/* Price Comparison -------------------------------------------------*/
.comparePrice { padding: 80px 0px; }
.comparePrice .tableWrap { border: 1px solid rgb(232, 235, 237); }
.comparePrice table { width: 100%; }
.comparePrice th { background-color: var(--light); border-bottom: 1px solid rgb(232, 235, 237); border-right: 1px solid rgb(232, 235, 237); font-size: 16px; line-height: 22px; color: var(--dark); text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; padding: 24px 16px; text-align: center; }
.comparePrice th:last-child { border-right: none; }
.comparePrice td { border-bottom: 1px solid rgb(232, 235, 237); border-right: 1px solid rgb(232, 235, 237); padding: 24px 16px; }
.comparePrice td:last-child { border-right: none; }
.comparePrice tr:last-child td { border-bottom: none; }
.comparePrice h6 { font-size: 16px; line-height: 22px; color: var(--black); font-weight: 600; }
.comparePrice h5 { font-size: 18px; line-height: 24px; color: var(--black); font-weight: 600; text-align: center; }
.comparePrice p { font-size: 13px; line-height: 18px; color: var(--dark); font-weight: 500; text-align: center; margin-top: 4px; }
.comparePrice ul { list-style: outside; padding-left: 24px; }
.comparePrice ul li { font-size: 14px; line-height: 20px; color: var(--dark); margin-bottom: 12px; }
.comparePrice ul li:last-child { margin-bottom: 0px; }
.comparePrice li strong { color: var(--secondary); font-weight: 500; }

@media only screen and (max-width: 767.98px) {
    .comparePrice th { font-size: 14px; line-height: 20px; padding: 16px 12px; }
    .comparePrice td { padding: 16px 12px; }
    .comparePrice h6 { font-size: 14px; line-height: 20px; }
    .comparePrice h5 { font-size: 16px; line-height: 22px; }
}

/* Common Features -------------------------------------------------*/
.plans-common-features { background-color: var(--white); padding: 60px 0px 100px; }
.plans-common-features ul { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 40px; align-items: center; margin-top: 60px; }
.plans-common-features li { width: calc((100% - 48px) / 3); }
.plans-common-features li a { display: inline-flex; flex-flow: wrap; align-items: center; gap: 24px; width: 100%; }
.plans-common-features li figure { border-radius: 16px; background-color: var(--white); -webkit-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); width: 64px; height: 64px; line-height: 0px; display: inline-flex; align-items: center; justify-content: center; }
.plans-common-features li img { max-width: 100%; }
.plans-common-features li h6 { color: #171717; font-size: 20px; font-weight: 400; line-height: 32px; max-width: calc(100% - 88px); }
@media only screen and (max-width: 991.98px) {
    .plans-common-features { padding: 40px 0px 80px; }
    .plans-common-features ul { margin-top: 40px; row-gap: 32px; }
    .plans-common-features li { width: calc((100% - 24px) / 2); }
    .plans-common-features li a { gap: 20px; }
    .plans-common-features li figure { width: 60px; height: 60px; }
    .plans-common-features li h6 { font-size: 16px; line-height: 22px; max-width: calc(100% - 80px); }
}
@media only screen and (max-width: 479.98px) {
    .plans-common-features li { width: 100%; }
}


/* Contact for Pricing -------------------------------------------------*/
.unlimitedCutouts { padding: 100px 0px; background-color: var(--light); text-align: center; }
.unlimitedCutouts .staticRow { display: flex; flex-flow: wrap; justify-content: space-between; margin-top: 40px; }
.unlimitedCutouts .box { width: 31%; background-color: var(--white); padding: 40px; border-radius: 12px; border: 1px solid #eee; -webkit-transition: .4s ease; -moz-transition: .4s ease; -ms-transition: .4s ease; -o-transition: .4s ease; transition: .4s ease; }
.unlimitedCutouts .box:hover { border-color: transparent; -webkit-box-shadow: 0 20px 50px rgba(0,5,39,0.07); -moz-box-shadow: 0 20px 50px rgba(0,5,39,0.07); -ms-box-shadow: 0 20px 50px rgba(0,5,39,0.07); -o-box-shadow: 0 20px 50px rgba(0,5,39,0.07); box-shadow: 0 20px 50px rgba(0,5,39,0.07); }
.unlimitedCutouts .box span { display: inline-block; margin-bottom: 30px; padding-top: 16px; }
.unlimitedCutouts .box img { max-width: 40px; }
.unlimitedCutouts .box h6 { margin-bottom: 16px; }
.unlimitedCutouts .box p { font-size: 14px; line-height: 24px; }
.unlimitedCutouts .box .btn { font-size: 14px; line-height: 20px; padding: 8px 30px; margin-top: 24px; }
@media only screen and (max-width: 1499.98px) {
    .unlimitedCutouts .box { width: 32%; }
}
@media only screen and (max-width:1199.98px) {
    .unlimitedCutouts { padding: 80px 0px; }
}
@media only screen and (max-width:767.98px) {
    .slz-infinity-04 ul { margin-top: 40px }
    .slz-infinity-04 li { width: 100%; padding: 40px 24px; }
}
@media only screen and (max-width: 991.98px) {
    .unlimitedCutouts { padding: 70px 0px; background-color: var(--white); }
    .unlimitedCutouts .box { width: 48%; margin-bottom: 30px; background-color: var(--white); -webkit-box-shadow: 0px 0px 16px 0px #ddd; -moz-box-shadow: 0px 0px 16px 0px #ddd; -ms-box-shadow: 0px 0px 16px 0px #ddd; -o-box-shadow: 0px 0px 16px 0px #ddd; box-shadow: 0px 0px 16px 0px #ddd; }
    .unlimitedCutouts .box:last-child { width: 100%; margin-bottom: 0px; }
}
@media only screen and (max-width: 767.98px) {
    .unlimitedCutouts .box { width: 100%; padding: 40px 24px; }
}


/* Welcome -------------------------------------------------*/
.welcome { padding: 30px 0px; display: flex; flex-flow: wrap; flex-direction: column; justify-content: center; align-items: center; }
.welcome .brand { text-align: center; margin-bottom: 30px; }
.welcome .brand .brand-img { width: 200px; display: inline-block; vertical-align: top; }
.welcome .brand img { width: 100%; }
.welcome .column { width: 100%; max-width: 1030px; padding: 0px 15px; }
.welcome .containt-block { background-color: var(--white); width: 100%; display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; position: relative; }
.welcome .main-block { width: 50%; padding: 15px 50px 15px 0px; }
.welcome h1 { text-transform: none; margin-bottom: 10px; font-size: 30px; line-height: 36px; }
.welcome ul { list-style: none; margin-top: 40px; }
.welcome li { padding-left: 60px; position: relative; margin-bottom: 30px; list-style: none; }
.welcome li:last-child { margin-bottom: 0px; }
.welcome li .free-icon { text-align: center; display: block; position: absolute; left: 0px; top: 5px; }
.welcome li .free-icon i { font-size: 30px; width: 100%; height: 100%; border-radius: 50%; color: var(--black); line-height: 40px; }
.welcome li span { font-size: 13px; line-height: 20px; display: block; }
.welcome li a { font-size: 16px; line-height: 22px; color: var(--navi_blue); margin-top: 10px; display: inline-block; vrtical-align: top; }
.welcome li a i { padding-left: 5px; }
.welcome li a:hover { color: var(--primary); }
.welcome .image-block { width: 50%; background-image: url('../images/welcome-bg.jpg'); background-repeat: no-repeat; background-position: 0px 0px; background-size: 100%; }
.welcome .foot { max-width: 1000px; margin: 15px auto 0px; text-align: center; }
.welcome .foot ul { display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; justify-content: center; width: 100%; margin: 5px 0px 0px; }
.welcome .foot li { line-height: 14px; margin: 0px; padding: 0px; }
.welcome .foot li:not(:last-child) { padding-right: 10px; margin-right: 10px; border-right: 1px solid #ddd; }
.welcome .foot li a { font-size: 14px; line-height: 14px; color: #444444; text-decoration: none; }
.welcome .foot li a:hover { color: var(--navi_blue); }
.welcome .back-home { margin-top: 50px; text-align: center; }
@media only screen and (max-width:1399.98px) {
    .welcome ul { margin-top: 30px; }
}
@media only screen and (max-width:1299.98px) {
    .welcome .containt-block:before { display: none; }
}
@media only screen and (max-width:1049.98px) {
    .welcome .foot { margin: 20px 15px 0px; }
}
@media only screen and (max-width:991.98px) {
    .welcome .main-block { width: 100%; padding: 0px 40px; }
    .welcome .image-block { display: none; }
}
@media only screen and (max-width:767.98px) {
    h6 { font-weight: normal; }
    .welcome .back { margin-top: 20px; }
}
@media only screen and (max-width:575.98px) {
    .welcome .main-block { padding: 0px 30px; }
    .welcome h1 { font-size: 24px; line-height: 30px; }
    .welcome .foot { margin: 10px 0px 0px; }
    .welcome .foot li, .welcome .foot li:not(:last-child) { margin-bottom: 5px; }
    .welcome .foot li a { font-size: 13px; line-height: 13px; }
    .welcome .back a { padding: 10px 20px; }
}
@media only screen and (max-width:479.98px) {
    .welcome .column { padding: 0px 20px; }
    .welcome .main-block { padding: 0px; }
    .welcome .foot li, .welcome .foot li:not(:last-child) { margin: 0px 10px 5px; border: none; padding: 0px; }
}

/* History -------------------------------------------------*/
.history { text-align: center; }
.history form.search { margin-top: 10px; }
.history select { color: #29282d; border: 1px solid var(--light_bg); padding-left: 10px; }
.history label.select-label { color: #29282d; }
.history table { width: 100%; margin-top: 20px; border: 1px solid var(--light_bg); }
.history table th { font-size: 16px; line-height: 22px; color: var(--black); text-transform: uppercase; background-color: var(--light_blue_bg); padding: 15px 10px; border-right: 2px solid var(--light_bg); }
.history table th:last-child { border-right: none; }
.history table td { border-top: 2px solid var(--light_bg); border-right: 2px solid var(--light_bg); font-size: 16px; line-height: 22px; color: #29282d; padding: 10px; }
.history table td:last-child { border-right: none; }
@media only screen and (max-width:1399.98px) {
    .history table th { font-size: 14px; line-height: 20px; }
    .history table td { font-size: 14px; line-height: 20px; }
}
@media only screen and (max-width:991.98px) {
    .history table { margin-top: 50px; }
}
@media only screen and (max-width:767.98px) {
    .history table { margin-top: 40px; }
}
@media only screen and (max-width:639.98px) {
    .history table, .history tbody, .history tr, .history td { display: block; }
    .history thead { display: none; }
    .history tr:nth-child(even) { background-color: #f3f3f3; }
    .history td { position: relative; text-align: right; padding: 10px 10px 10px 50%; }
    .history td:before { position: absolute; left: 0px; top: 0px; width: 50%; padding: 10px; font-size: 14px; line-height: 20px; color: #29282d; text-align: left; font-weight: 500; text-transform: uppercase; }
    .history td:first-child:before { content: "PLAN TYPE"; }
    .history td:nth-child(2):before { content: "AMOUNT (IN USD)"; }
    .history td:nth-child(3):before { content: "TOTAL CREDITS"; }
    .history td:nth-child(4):before { content: "PURCHASE DATE"; }
    .history td:nth-child(5):before { content: "PLAN STATUS"; }
}
@media only screen and (max-width:575.98px) {
    .history table { margin-top: 30px; }
}

/* Email Verification -------------------------------------------------*/
.verify-email { padding: 80px 0px; }
.verify-email .block { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; background-color: var(--white); border-radius: 8px; padding: 30px; text-align: center; }
.verify-email h3 { color: #ffa195; margin-bottom: 10px; }
@media only screen and (max-width:991.98px) {
    .verify-email { padding: 50px 0px; }
}
@media only screen and (max-width:575.98px) {
    .verify-email .block { padding: 20px; }
}

/* Subscription Modal -------------------------------------------------*/
.basicmodal .modal-dialog { max-width: 500px; margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.basicmodal.show .modal-dialog { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.basicmodal .modal-content { background-color: var(--white); border-radius: 10px; }
.basicmodal .close { color: #29282d; text-shadow: none; position: absolute; right: 15px; top: 7px; z-index: 9; font-size: 24px; line-height: 24px; text-decoration: none; border: 1px solid #ebebeb; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; opacity: 1; }
.basicmodal .modal-body { padding: 0px; }
.basicmodal .top-part { padding: 30px 40px 40px; }
.basicmodal figure { width: 72px; height: 72px; border: 1px solid #4b5e84; border-radius: 50%; margin: 0 auto 20px; line-height: 70px; text-align: center; }
.basicmodal figure img { max-height: 40px; }
.basicmodal h5 { font-weight: 500; margin-bottom: 10px; }
.basicmodal .bottom-part { padding: 0px 20px 30px; border-radius: 0px 0px 10px 10px; }
.basicmodal form ul { display: block; margin-top: 10px; }
.basicmodal form li { position: relative; margin-bottom: 20px; }
.basicmodal form li:last-child { margin-bottom: 0px; }
.basicmodal h4 { font-weight: 700; }
.basicmodal h6 { font-size: 14px; line-height: 20px; color: #007bff; }
.basicmodal .btn-group { width: 100%; margin-top: 15px; }
.basicmodal .charge { display: block; padding: 5px 10px 5px 60px; background-color: #0069d9; border-radius: 5px; margin-top: 25px; position: relative; }
.basicmodal .charge i { position: absolute; color: #f34e3a; left: 15px; font-size: 24px; line-height: 40px; }
.basicmodal .more-info { margin: 10px 0px 25px; text-align: center; }
.basicmodal .more-info a { font-size: 12px; line-height: 18px; color: #666; text-transform: capitalize; display: inline-block; vertical-align: top; margin-right: 10px; }
.basicmodal .more-info a:last-child { margin-right: 0px; }
.basicmodal .btn-gropu { margin-top: 20px; text-align: center; }
.basicmodal .btn-gropu button { padding: 5px 20px; }
.basicmodal .btn-gropu button:hover { padding: 5px 20px; }
.basicmodal .buttons { margin-top: 15px; }
.basicmodal .buttons .btn { padding: 4px 24px; margin: 0px 5px; }
.basicmodal .btn-small { padding: 8px 20px; }
#error_confirm_password { font-size: 12px; line-height: 18px; color: var(--red); text-align: left; display: block; }
.basicmodal .usagesValue { width: 100%; }
.basicmodal .usagesValue ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0px; }
.basicmodal .top-part .usagesValue li { width: calc((100% - 8px) / 2);  text-align: center; border-radius: 12px; padding: 10px; background-color: #fdfdfd; border: 1px solid #eeeeee; position: relative; font-size: 14px; line-height: 20px; color: var(--gray); margin: 0px; }
.basicmodal .top-part .usagesValue li strong { font-size: 120%; color: #001C5C; font-weight: 600; padding-left: 4px; display: inline-block; width: 100%; }
.basicmodal .spinner-border { margin: 0 auto; }
@media only screen and (max-width: 767.98px) {
    .basicmodal .top-part { padding: 60px 30px 40px; }
}

/* Image signup -------------------------------------------------*/
.edit-image { background-color: rgb(0, 0, 0, .8); }
.edit-image .modal-dialog { padding: 0px; width: 100%; max-width: 100%; max-width: inherit; height: 96%; max-height: 720px; margin: 0px; background-color: transparent; top: 50%; left: 50%; bottom: auto; -webkit-transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -o-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; -webkit-transition: 1s ease !important; -moz-transition: 1s ease !important; -ms-transition: 1s ease !important; -o-transition: 1s ease !important; transition: 1s ease !important; }
.edit-image.show .modal-dialog { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -o-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; }
.edit-image .modal-content { background-color: transparent; padding: 0px; border: none; border-radius: 0px; }
.edit-image .modal-body { padding: 0px; display: flex; align-items: center; justify-content: center; }
.edit-image .flexBox { display: flex; justify-content: center; gap: 30px; padding: 50px 40px; background-color: #fff; border-radius: 20px; position: relative; }
.edit-image.modal .close { border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); background-color: var(--white); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; opacity: 1; position: absolute; right: 12px; top: 12px; }
.edit-image.modal .close span { line-height: 0px; }
.edit-image.modal .close img { height: 16px; }
.edit-image .previmg { width: 600px; height: 100%; background-color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; }

.range { -webkit-appearance: none; vertical-align: middle; outline: none; border: none; padding: 0; background: none; width: 100%; }
.range::-webkit-slider-runnable-track { background-color: #494949; height: 2px; border-radius: 3px; border: none; }
.range[disabled]::-webkit-slider-runnable-track { background-color: #494949; height: 2px; border-radius: 3px; border: none; }
.range::-moz-range-track { background-color: #494949; height: 2px; border-radius: 3px; border: none; }
.range::-ms-track { background-color: #494949; height: 2px; border-radius: 3px; border: none; }
.range::-ms-fill-lower { background-color: #494949; border-radius: 3px; }
.range::-ms-fill-upper { background-color: #494949; border-radius: 3px; }
.range::-ms-tooltip { display: none; }
.range::-moz-range-thumb { border-radius: 40px; height: 18px; width: 18px; border: 1px solid #494949; background: none; background-color: var(--white); }
.range:active::-moz-range-thumb { outline: none; border: 1px solid #494949; }
.range::-webkit-slider-thumb { -webkit-appearance: none !important; border-radius: 100%; border: 1px solid #494949; background-color: var(--white); height: 18px; width: 18px; margin-top: -9px; }
.range:active::-webkit-slider-thumb { outline: none; border: 1px solid #494949; }
.range::-ms-thumb { border-radius: 100%; background-color: var(--white); height: 18px; width: 18px; border: 1px solid #494949; }
.range:active::-ms-thumb { border: 1px solid #494949; }
output { border: none; color: #29282d; font-size: 14px; line-height: 20px; font-weight: 500; position: absolute; right: 20px; top: 0px; }

.edit-image .edited-image-area { position: relative; width: 100%; height: calc(100% - 88px); height: -webkit-calc(100% - 88px); background-color: var(--white); display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#drawing { overflow: auto; border: 1px solid #cbcbcb; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjkzNyA3LjkzOCIgaGVpZ2h0PSIzMCIgd2lkdGg9IjMwIj48cGF0aCBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgZD0iTS4wMTQuMDE0SDMuOTdWMy45N0guMDE0ek0zLjk3IDMuOTY4aDMuOTU0djMuOTU1SDMuOTd6IiBmaWxsPSIjZWVlZmYwIi8+PC9zdmc+); background-size: 24px; max-width: 100%; max-height: 100%; font-size: 0; }

.drawing_holder { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.editor-cursor { position: absolute; pointer-events: none; border: 1px solid var(--black); border-radius: 50%; }
.edit-image .edited-image { background-image: url("../images/sample/transparent-bg.jpg"); background-repeat: repeat; background-position: 0px 0px; border: 1px solid var(--dark); height: 100%; }
.edit-image .edited-image img { max-width: 100%; max-height: 100%; }
.edit-image .edited-image-area svg { background-repeat: no-repeat; background-position: center; background-size: cover; }
.edit-image .previmg .download { background-color: var(--white); border-radius: 30px; -webkit-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 6px; margin-top: 32px; display: flex; align-items: center; gap: 24px; position: relative; }
.edit-image .previmg .roundBtns { display: inline-flex; align-items: center; gap: 16px; }
.edit-image .previmg .roundBtns button { border: none; background-color: var(--white); border-radius: 50%; display: inline-flex;  align-items: center; justify-content: center; padding: 0px; height: 44px; width: 44px; }
.edit-image .previmg .roundBtns button:hover { background-color: #F3F5F8; }
.edit-image .previmg .roundBtns button img { max-width: 20px; max-height: 20px; }
.edit-image .previmg .roundBtns button.disabled { opacity: 0.2; }
.edit-image .previmg .download .btn { border-radius: 35px; padding: 0px 20px; height: 44px; width: auto; overflow: hidden; position: relative; gap: 16px; }
.edit-image .prev_option { border-radius: 22px; border: 1px solid #F3F3F3; background-color: var(--white); -webkit-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -moz-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -ms-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -o-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); padding: 30px 20px; width: 400px; height: 100%; }
.edit-image .prev_option #tabs { height: 100%; }
.edit-image .ui-tabs-nav { border-bottom: 1px solid #EAEAEA; display: flex; align-items: center; gap: 16px; padding-bottom: 24px; }
.edit-image .ui-tabs-tab { width: calc((100% - 16px) / 2); }
.edit-image .ui-tabs-anchor { border-radius: 27px; border: 2px solid #EDEDED; background-color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #7F8991; font-size: 16px; font-weight: 500; line-height: 22px; height: 54px; width: 100%; }
.edit-image .ui-tabs-anchor img { max-height: 24px; }
.edit-image .ui-tabs-anchor:hover, .edit-image .ui-tabs-active .ui-tabs-anchor { background-color: #EDEDED; color: #636D80; }
.edit-image .ui-tabs-panel { height: calc(100% - 79px); padding: 20px 0px 0px; }
.edit-image .ui-tabs-panel .card { height: 100%; border: none; display: block; border-radius: 0px; }
.edit-image .prev_option span { color: #7F8991; font-size: 14px; font-weight: 500; line-height: 20px; display: block; margin-bottom: 20px; }
.edit-image .inside-tab#background-tabs { height: calc(100% - 110px); overflow: hidden; padding-top: 24px; }
.edit-image .inside-tab .ui-tabs-nav { border: none; display: flex; align-items: center; gap: 20px; }
.edit-image .inside-tab .ui-tabs-tab { width: auto; min-width: 120px; }
.edit-image .inside-tab .ui-tabs-anchor { padding: 2px 20px; height: 44px; }
.edit-image .inside-tab#background-tabs .ui-tabs-panel { overflow-x: hidden; overflow-y: auto; height: calc(100% - 68px); }
.edit-image .inside-tab#background-tabs .ui-tabs-panel::-webkit-scrollbar { width: 4px; }
.edit-image .inside-tab#background-tabs .ui-tabs-panel::-webkit-scrollbar-track { background: var(--white); }
.edit-image .inside-tab#background-tabs .ui-tabs-panel::-webkit-scrollbar-thumb { background: #DDDDDD; }
.edit-image .inside-tab#background-tabs .ui-tabs-panel { padding: 0px; }
.edit-image ul.thumbnail { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0px; }
.edit-image ul.thumbnail li { background-color: var(--white); border-radius: 16px; width: calc((100% - 48px) / 4); position: relative; overflow: hidden; }
.edit-image ul.thumbnail li.active { border-color: #f34e3a; }
.edit-image ul.thumbnail li button { background-color: var(--white); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 16px; border: 1px solid #E3E6E6; display: inline-flex; align-items: flex-end; justify-content: center; height: 70px; padding: 0px; width: 100%; }
.edit-image ul.thumbnail li button span { margin: 0px; border-radius: 16px; }
.edit-image ul.thumbnail li img { max-width: 80%; margin: 0 auto; }
.edit-image ul.image-options li input[type="file"] { height: 70px !important; -webkit-appearance: none; appearance: none; position: absolute; left: 0px; top: 0px; opacity: 0; cursor: pointer; }
.edit-image ul.image-options li label { border-radius: 16px; border: 2px solid #F3F3F3; background: var(--white); -webkit-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -moz-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -ms-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -o-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; }
.edit-image .inside-tab#erase-tabs .ui-tabs-panel { padding: 0px; height: auto; }
.edit-image ul.image-options li:nth-child(2) button { background-image: url('../images/editor_images/thumbnails/editor-image-1.jpg'); }
.edit-image ul.image-options li:nth-child(3) button { background-image: url('../images/editor_images/thumbnails/editor-image-2.jpg'); }
.edit-image ul.image-options li:nth-child(4) button { background-image: url('../images/editor_images/thumbnails/editor-image-3.jpg'); }
.edit-image ul.image-options li:nth-child(5) button { background-image: url('../images/editor_images/thumbnails/editor-image-4.jpg'); }
.edit-image ul.image-options li:nth-child(6) button { background-image: url('../images/editor_images/thumbnails/editor-image-5.jpg'); }
.edit-image ul.image-options li:nth-child(7) button { background-image: url('../images/editor_images/thumbnails/editor-image-6.jpg'); }
.edit-image ul.image-options li:nth-child(8) button { background-image: url('../images/editor_images/thumbnails/editor-image-7.jpg'); }
.edit-image ul.image-options li:nth-child(9) button { background-image: url('../images/editor_images/thumbnails/editor-image-8.jpg'); }
.edit-image ul.image-options li:nth-child(10) button { background-image: url('../images/editor_images/thumbnails/editor-image-9.jpg'); }
.edit-image ul.image-options li:nth-child(11) button { background-image: url('../images/editor_images/thumbnails/editor-image-10.jpg'); }
.edit-image ul.image-options li:nth-child(12) button { background-image: url('../images/editor_images/thumbnails/editor-image-11.jpg'); }
.edit-image ul.image-options li:nth-child(13) button { background-image: url('../images/editor_images/thumbnails/editor-image-12.jpg'); }
.edit-image ul.image-options li:nth-child(14) button { background-image: url('../images/editor_images/thumbnails/editor-image-13.jpg'); }
.edit-image ul.image-options li:nth-child(15) button { background-image: url('../images/editor_images/thumbnails/editor-image-14.jpg'); }
.edit-image ul.image-options li:nth-child(16) button { background-image: url('../images/editor_images/thumbnails/editor-image-15.jpg'); }
.edit-image ul.image-options li:nth-child(17) button { background-image: url('../images/editor_images/thumbnails/editor-image-16.jpg'); }
.edit-image ul.image-options li:nth-child(18) button { background-image: url('../images/editor_images/thumbnails/editor-image-17.jpg'); }
.edit-image ul.image-options li:nth-child(19) button { background-image: url('../images/editor_images/thumbnails/editor-image-18.jpg'); }
.edit-image ul.image-options li:nth-child(20) button { background-image: url('../images/editor_images/thumbnails/editor-image-19.jpg'); }
.edit-image ul.image-options li:nth-child(21) button { background-image: url('../images/editor_images/thumbnails/editor-image-20.jpg'); }
.edit-image ul.image-options li:nth-child(22) button { background-image: url('../images/editor_images/thumbnails/editor-image-21.jpg'); }
.edit-image ul.image-options li:nth-child(23) button { background-image: url('../images/editor_images/thumbnails/editor-image-22.jpg'); }
.edit-image ul.image-options li:nth-child(24) button { background-image: url('../images/editor_images/thumbnails/editor-image-23.jpg'); }
.edit-image ul.image-options li:nth-child(25) button { background-image: url('../images/editor_images/thumbnails/editor-image-24.jpg'); }
.edit-image ul.image-options li:nth-child(26) button { background-image: url('../images/editor_images/thumbnails/editor-image-25.jpg'); }
.edit-image ul.image-options li:nth-child(27) button { background-image: url('../images/editor_images/thumbnails/editor-image-26.jpg'); }
.edit-image ul.image-options li:nth-child(28) button { background-image: url('../images/editor_images/thumbnails/editor-image-27.jpg'); }
.edit-image ul.image-options li:nth-child(29) button { background-image: url('../images/editor_images/thumbnails/editor-image-28.jpg'); }
.edit-image ul.image-options li:nth-child(30) button { background-image: url('../images/editor_images/thumbnails/editor-image-29.jpg'); }
.edit-image ul.image-options li:nth-child(31) button { background-image: url('../images/editor_images/thumbnails/editor-image-30.jpg'); }
.edit-image ul.image-options li:nth-child(32) button { background-image: url('../images/editor_images/thumbnails/editor-image-31.jpg'); }
.edit-image ul.image-options li:nth-child(33) button { background-image: url('../images/editor_images/thumbnails/editor-image-32.jpg'); }
.edit-image ul.image-options li:nth-child(34) button { background-image: url('../images/editor_images/thumbnails/editor-image-33.jpg'); }
.edit-image ul.image-options li:nth-child(35) button { background-image: url('../images/editor_images/thumbnails/editor-image-34.jpg'); }
.edit-image ul.image-options li:nth-child(36) button { background-image: url('../images/editor_images/thumbnails/editor-image-35.jpg'); }
.edit-image ul.image-options li:nth-child(37) button { background-image: url('../images/editor_images/thumbnails/editor-image-36.jpg'); }
.edit-image ul.image-options li:nth-child(38) button { background-image: url('../images/editor_images/thumbnails/editor-image-37.jpg'); }
.edit-image ul.image-options li:nth-child(39) button { background-image: url('../images/editor_images/thumbnails/editor-image-38.jpg'); }
.edit-image ul.image-options li:nth-child(40) button { background-image: url('../images/editor_images/thumbnails/editor-image-39.jpg'); }
.edit-image ul.image-options li:nth-child(41) button { background-image: url('../images/editor_images/thumbnails/editor-image-40.jpg'); }
.edit-image ul.image-options li:nth-child(42) button { background-image: url('../images/editor_images/thumbnails/editor-image-41.jpg'); }
.edit-image ul.image-options li:nth-child(43) button { background-image: url('../images/editor_images/thumbnails/editor-image-42.jpg'); }
.edit-image ul.color-options li:nth-child(2) button { background-image: linear-gradient(to right, #dddddd, var(--black)); }
.edit-image ul.color-options li:nth-child(3) button { background-color: var(--black); }
.edit-image ul.color-options li:nth-child(4) button { background-color: var(--white); }
.edit-image ul.color-options li:nth-child(5) button { background-image: linear-gradient(to right, #b9b400, #00920c); }
.edit-image ul.color-options li:nth-child(6) button { background-color: #ff9800; }
.edit-image ul.color-options li:nth-child(7) button { background-color: #cddc39; }
.edit-image ul.color-options li:nth-child(8) button { background-color: #30b5bb; }
.edit-image ul.color-options li:nth-child(9) button { background-color: #9c27b0; }
.edit-image ul.color-options li:nth-child(10) button { background-color: #e0327a; }
.edit-image ul.color-options li:nth-child(11) button { background-color: #8bc34a; }
.edit-image ul.color-options li:nth-child(12) button { background-color: #34da48; }
.edit-image ul.color-options li:nth-child(13) button { background-image: linear-gradient(to right, #d8ff00, #001fff); }
.edit-image ul.color-options li:nth-child(14) button { background-color: #4c3ec1; }
.edit-image ul.color-options li:nth-child(15) button { background-image: linear-gradient(to right, #0de9ff, #4a1da2); }
.edit-image ul.color-options li:nth-child(16) button { background-color: #d8ff00; }
.edit-image ul.color-options li:nth-child(17) button { background-image: linear-gradient(to right, #b52b2b, #480d0d); }
.edit-image ul.color-options li:nth-child(18) button { background-color: #EEEEEE; }
.edit-image ul.color-options li:nth-child(19) button { background-color: #f44336; }
.edit-image ul.color-options li:nth-child(20) button { background-color: #673ab7; }
.edit-image ul.color-options li:nth-child(21) button { background-color: #03a9f4; }
.edit-image ul.color-options li:nth-child(22) button { background-color: #4caf50; }
.edit-image ul.color-options li:nth-child(23) button { background-color: #ffeb3b; }
.edit-image ul.color-options li:nth-child(24) button { background-color: #e91e63; }
.edit-image ul.color-options li:nth-child(25) button { background-color: #3f51b5; }
.edit-image ul.color-options li:nth-child(26) button { background-color: #00bcd4; }
.edit-image ul.color-options li:nth-child(27) button { background-image: linear-gradient(to right, #27a749, #d8ff00); }
.edit-image ul.color-options li:nth-child(28) button { background-color: #ffc107; }
.edit-image ul.color-options li:nth-child(29) button { background-color: #f44336; }
.edit-image ul.color-options li:nth-child(30) button { background-image: linear-gradient(to right, #ffec0d, #6e3fff); }
.edit-image ul.color-options li:nth-child(31) button { background-color: #2196f3; }
.edit-image ul.color-options li:nth-child(32) button { background-color: #009688; }
.edit-image ul.color-options li:nth-child(33) button { background-image: linear-gradient(to right, #0d36ff, #a325b3); }
.edit-image ul.color-options li:nth-child(34) button { background-color: #ff8f3f; }
.offset { display: none; }
.editor-finger-cursor { display: none; color: #fc1b44; position: absolute; left: 50%; font-size: 30px; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; line-height: 1; }
.offset { display: none; }
.editor-finger-cursor { display: none; color: #fc1b44; position: absolute; left: 50%; font-size: 30px; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; line-height: 1; }
.edit-image .parent-spinner-border { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); display: flex; flex-flow: row wrap; align-items: center; justify-content: center; z-index: 21; }
.edit-image .parent-spinner-border .spinner-border { border-color: #f34e3a; border-right-color: transparent; }
.edit-image .parent-spinner-border span { font-size: 16px; line-height: 22px; display: inline-block; vertical-align: middle; color: #f34e3a; margin-left: 10px; }

@media only screen and (min-width: 992px) {
    .edit-image .ui-tabs-panel .close { display: none; }
}
@media only screen and (max-width:1199.98px) {
    .edit-image .previmg { width: 500px; }
}
@media only screen and (max-width:1023.98px) {
    .edit-image .previmg { width: 400px; }
}
@media only screen and (max-width:991.98px) {
    .edit-image { background-color: var(--white); }
    .edit-image.show .modal-dialog { height: 100%; max-height: 100%; width: 100%; top: 0px; left: 0px; -webkit-transform: translate(0px, 0px) !important; -moz-transform: translate(0px, 0px) !important; -ms-transform: translate(0px, 0px) !important; -o-transform: translate(0px, 0px) !important; transform: translate(0px, 0px) !important; }
    .edit-image .flexBox { display: block;  padding: 0px 0px 72px; width: 100%; }
    .edit-image .prev_option { border: none; border-radius: 0px; -webkit-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 12px;position: fixed; bottom: 0px; left: 0px; width: 100%; height: 72px; z-index: 1000; }
    .edit-image .prev_option > .ui-tabs > .ui-tabs-nav { border: none; padding: 0px; gap: 12px; }
    .edit-image .ui-tabs-tab { width: calc((100% - 12px) / 2); }
    .edit-image .ui-tabs-anchor { height: 48px; }
    .edit-image #tabs > .ui-tabs-nav > .ui-tabs-active > .ui-tabs-anchor { background-color: var(--white); color: #7F8991; }
    .edit-image #tabs > .ui-tabs-nav > .ui-state-hover > .ui-tabs-anchor { background-color: #EDEDED; color: #636D80; }
    .edit-image .collapse:not(.show) { display: none !important; }
    .edit-image .ui-tabs-panel#background,
    .edit-image .ui-tabs-panel#erase { background-color: var(--white); border-radius: 16px 16px 0px 0px; -webkit-box-shadow: 0px -8px 10px 0px #ededed; -moz-box-shadow: 0px -8px 10px 0px #ededed; -ms-box-shadow: 0px -8px 10px 0px #ededed; -o-box-shadow: 0px -8px 10px 0px #ededed; box-shadow: 0px -8px 10px 0px #ededed; padding: 0px; position: fixed; left: 0px; bottom: 72px; height: auto; width: 100%; z-index: 5; }
    .edit-image .ui-tabs-panel#background { display: block !important; }
    .edit-image .ui-tabs-panel .card { border-radius: 16px 16px 0px 0px; padding: 24px 16px; height: auto; height: 35vh; overflow-x: hidden; overflow-y: auto; }
    .edit-image .inside-tab#background-tabs { height: auto; }
    .edit-image .inside-tab#background-tabs .ui-tabs-panel { overflow: visible; height: auto; }
    .edit-image .previmg { width: 100%; height: calc(100% - 35vh); padding: 0px; justify-content: flex-start; }
    .edit-image .previmg .download { border-radius: 0px; width: 100%; gap: 8px; margin-top: 0px; order: 1; }
    .edit-image .previmg .roundBtns { gap: 0px; }
    .edit-image .previmg .roundBtns button { height: 40px; width: 40px; }
    .edit-image .previmg .download .btn { height: 40px; }
    .edit-image .edited-image-area { height: calc(100% - 54px); order: 2; padding: 8px 16px 16px; }
    .edit-image.modal .close { height: 30px; width: 30px; z-index: 1000; }
    .edit-image.modal .close img { height: 8px; }
}

/* Push Notification -------------------------------------------------------*/
.push-notification { background-image: url('../images/notification-bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; min-height: 100%; }
.push-notification .top { background-color: var(--white); padding: 5px 0; -webkit-box-shadow: 0px 5px 15px 0px rgba(159, 164, 189, .7); -moz-box-shadow: 0px 5px 15px 0px rgba(159, 164, 189, .7); -ms-box-shadow: 0px 5px 15px 0px rgba(159, 164, 189, .7); -o-box-shadow: 0px 5px 15px 0px rgba(159, 164, 189, .7); box-shadow: 0px 5px 15px 0px rgba(159, 164, 189, .7); }
.push-notification .logo img { max-width: 100%; }
.push-notification .notification .inner-block { background-color: var(--white); -webkit-box-shadow: 0 10px 40px 0 rgba(159, 164, 189); -moz-box-shadow: 0 10px 40px 0 rgba(159, 164, 189); -ms-box-shadow: 0 10px 40px 0 rgba(159, 164, 189); -o-box-shadow: 0 10px 40px 0 rgba(159, 164, 189); box-shadow: 0 10px 40px 0 rgba(159, 164, 189); }
.push-notification .notification img { max-width: 100%; }
@media only screen and (max-width:575.98px) {
    .push-notification .logo { max-width: 170px; }
    .push-notification .top .btn { padding: 8px 25px; }
}
@media only screen and (max-width:359.98px) {
    .push-notification .top { padding: 10px 0; }
    .push-notification .logo { max-width: 150px; }
    .push-notification .top .btn { padding: 6px 20px; }
}

/* 404 not found -------------------------------------------------------*/
.not-found { width: 100%; height: 100%; }
.not-found .container { height: 100%; }
.not-found .row { flex-flow: wrap; justify-content: space-between; align-items: center; height: 100%; }
.not-found img { max-width: 100%; }
.not-found .btn { margin-top: 30px; padding: 10px 45px; }
.not-found .btn i { top: 14px; }
.not-found .btn:hover i { right: 30px; }
@media only screen and (max-width:767.98px) {
    .not-found { padding: 50px 0px; text-align: center; }
    .not-found img { display: block; max-width: 300px; margin: 0 auto 15px; }
}
@media only screen and (max-width:639.98px) { }
@media only screen and (max-width:575.98px) { }
@media only screen and (max-width:479.98px) {
    .not-found img { max-width: 250px; }
}
@media only screen and (max-width:359.98px) { }

/* Payment Success -------------------------------------------------------*/
.payment-success { width: 100%; height: 100%; padding: 0px 15px; display: flex; flex-flow: wrap; justify-content: center; align-items: center; }
.payment-success .success { width: 100%; max-width: 600px; padding: 50px 30px; text-align: center; background-color: var(--white); -webkit-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -moz-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -ms-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); -o-box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); box-shadow: 0 10px 40px 0 rgba(159, 164, 189, .7); }
.payment-success h3 { font-weight: 700; color: #f34e3a; text-transform: capitalize; margin: 30px 0px 10px; }
.payment-success a { display: inline-block; vertical-align: top; font-size: 18px; line-height: 24px; font-weight: 500; text-transform: capitalize; margin-top: 20px; }
@media only screen and (max-width:575.98px) {
    .payment-success h3 { margin: 20px 0px 5px; }
    .payment-success a { font-size: 16px; line-height: 22px; }
}

/* Others css -------------------------------------------------------*/
.anchor_tag { color: #0037ff; text-decoration: none; font-weight: 500; cursor: pointer; font-size: 22px; }
.anchor_tag:hover { color: #0037ff; }

/* Drag & Drop -------------------------------------------------------*/
.showDragAndDropBackground { position: fixed; left: 0px; top: 0px; background-color: rgba(69, 86, 124, 0.7); width: 100%; height: 100%; display: flex; flex-flow: wrap; align-items: center; justify-content: center; z-index: 999; flex-direction: column; }
.showDragAndDropBackground h2, .showDragAndDropBackground span { width: 100%; font-size: 50px; line-height: 56px; font-weight: 700; color: #FFFFFF; text-align: center; }
.showDragAndDropBackground p { width: 100%; font-size: 20px; line-height: 22px; font-weight: 400; color: #FFFFFF; text-align: center; }
.alert { font-size: 13px; line-height: 20px; padding: 4px 20px 4px 4px; }
.alert-dismissible .close { padding: 0px; right: 4px; top: 0px; width: 20px; text-align: center; text-decoration: none; }
@media only screen and (max-width:575.98px) {
    .alert { font-size: 12px; line-height: 18px; padding: 2px 24px 2px 5px; text-align: left !important; }
}
.corona { position: fixed; right: 0px; bottom: 0px; width: 100%; max-width: 260px; z-index: 999; }
.corona img { max-width: 100%; }
@media only screen and (max-width:1199.98px) {
    .corona { max-width: 180px; }
}
.rotate-90 { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.rotate-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.rotate-270 { -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
.flip { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); }
.flip-and-rotate-90 { -moz-transform: rotate(90deg) scaleX(-1); -webkit-transform: rotate(90deg) scaleX(-1); -o-transform: rotate(90deg) scaleX(-1); transform: rotate(90deg) scaleX(-1); }
.flip-and-rotate-180 { -moz-transform: rotate(180deg) scaleX(-1); -webkit-transform: rotate(180deg) scaleX(-1); -o-transform: rotate(180deg) scaleX(-1); transform: rotate(180deg) scaleX(-1); }
.flip-and-rotate-270 { -moz-transform: rotate(270deg) scaleX(-1); -webkit-transform: rotate(270deg) scaleX(-1); -o-transform: rotate(270deg) scaleX(-1); transform: rotate(270deg) scaleX(-1); }
.background-thumb, .foreground-thumbnail { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-position: 50%; background-size: cover; }
.foreground-thumbnail { background-repeat: no-repeat; z-index: 20; }
.background-thumb { z-index: 10; }


/*Slazzer Try Now && Newsletter -------------------------------------------------*/
.slz-frag-try { padding: 100px 0px; background-color: var(--white); position: relative; text-align: center; }
.slz-frag-try h2 { max-width: 700px; margin: 0px auto 24px; }
.slz-frag-try h6 { margin-bottom: 50px; }
.slz-frag-try .upload { max-width: 550px; margin: 0 auto; background-color: var(--white); border-radius: 20px; border: 1px dashed var(--primary); padding: 80px 0px 60px; }
.slz-frag-try .directTesting { justify-content: center; margin-top: 44px; }
@media only screen and (max-width: 1799.98px) {
    .slz-frag-try { padding: 80px 0px; }
}
@media only screen and (max-width: 991.98px) {
    .slz-frag-try { padding: 70px 0px; text-align: center; }
    .slz-frag-try h2 { font-size: 24px; line-height: 34px; }
    .slz-frag-try .upload { max-width: 100%; }
}
@media only screen and (max-width: 767.98px) {
    .slz-frag-try { background-image: none; background-color: var(--white); padding: 50px 0px; }
    .slz-frag-try .upload { max-width: 350px; margin: 0 auto; box-shadow: none; background-color: var(--white); border: none; border-radius: 20px; padding: 0px; }
    .slz-frag-try h2 { font-size: 22px; line-height: 32px; margin-bottom: 16px; }
    .slz-frag-try h6 { margin-bottom: 32px; }
}

/* Download Guideline -------------------------------------------------*/
.download-guideline { padding: 70px 0px 200px; background-color: #F9F9F9; }
.download-guideline .guideline-img { position: relative; }
.download-guideline .guideline-img img { max-width: 100%; }
.download-guideline h1 { margin-bottom: 40px; }
.download-guideline h1 small { font-size: 60%; color: #f34e3a; font-weight: 500; }
.download-guideline h6 { position: relative; display: inline-block; vertical-align: top; margin-top: 15px; font-weight: 700; }
.download-guideline h6 img { position: absolute; right: -55px; top: 12px; }
.download-guideline .static-img img { padding: 0px; margin: 0px; display: block; width: 100%; background-color: var(--white); }
@media only screen and (max-width:1199.98px) {
    .download-guideline { padding: 60px 0px 180px; background-position: 98% 98%; }
    .download-guideline .guideline-img:before { left: -10px; }
    .download-guideline h1 { font-size: 40px; line-height: 50px; margin-bottom: 30px; }
}
@media only screen and (max-width:991.98px) {
    .download-guideline { padding: 60px 0px; text-align: center; }
}
@media only screen and (max-width:767.98px) {
    .download-guideline { padding: 50px 0px; }
    .download-guideline h1 { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
    .download-guideline h6 img { right: -20px; top: 8px; max-width: 20px; }
}
@media only screen and (max-width:579.98px) {
    .download-guideline h1 { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
    .download-guideline .btn { margin-top: 15px; }
    .download-guideline .guideline-img:before { left: 5px; top: -20px; }
}

/* Download Guideline -------------------------------------------------*/
.desktoApp { position: relative; margin-top: -100px; margin-bottom: 40px; z-index: 3; }
.desktoApp .application { background-color: var(--white); padding-top: 20px; border-radius: 15px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; -webkit-box-shadow: 0 10px 30px 0 rgba(159, 164, 189, .7); -moz-box-shadow: 0 10px 30px 0 rgba(159, 164, 189, .7); -ms-box-shadow: 0 10px 30px 0 rgba(159, 164, 189, .7); -o-box-shadow: 0 10px 30px 0 rgba(159, 164, 189, .7); box-shadow: 0 10px 30px 0 rgba(159, 164, 189, .7); }
.desktoApp .application .application-img { display: inline-block; vertical-align: top; padding-bottom: 40px; }
.desktoApp .application img { width: 100%; }
.desktoApp .application .download-options { padding: 20px 10px 15px; position: relative; z-index: 3; }
.desktoApp .application .btn-group { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; margin-bottom: 0px; }
.desktoApp .application .download { display: inline-block; vertical-align: top; font-weight: 500; color: var(--white); border: 2px solid var(--white); background-color: var(--primary); text-transform: none; font-size: 14px; line-height: 20px; border-radius: 0px; padding: 5px 20px; border-radius: 5px; letter-spacing: 3px; text-align: center; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; }
.desktoApp .application .download:hover, .desktoApp .application .download:focus { background-color: var(--primary); color: var(--white); }
.desktoApp .application .download small { display: block; text-transform: capitalize; letter-spacing: 1px; }
.desktoApp .application .download i { margin-left: 10px; }
.desktoApp .application table { width: 100%; }
.desktoApp .application tr { border-bottom: 1px solid #ddd; }
.desktoApp .application tr:last-child { border-bottom: none; }
.desktoApp .application td { font-size: 13px; line-height: 20px; font-weight: 500; padding: 5px 0px; }
.desktoApp .application td a { color: var(--primary); display: inline-block; vertical-align: top; margin-right: 5px; }
.desktoApp .application td a:last-child { margin-right: 0px; }
.desktoApp .application td a:hover, .desktoApp .application td a:focus { color: #f34e3a; }
@media only screen and (max-width:1199.98px) {
    .desktoApp .application .download { font-size: 13px; padding: 5px 8px; }
}
@media only screen and (max-width:991.98px) {
    .desktoApp { margin: 0px; padding: 50px 0px; }
    .desktoApp .application { padding-top: 0px; }
    .desktoApp .application .download-options { padding-top: 10px; }
    .desktoApp .application .download { font-size: 14px; padding: 5px 12px; }
}
@media only screen and (max-width:767.98px) {
    .desktoApp { margin-top: 0px; padding: 30px 0px; }
    .desktoApp .application { max-width: 380px; margin: 0 auto; -webkit-box-shadow: 0 10px 20px 0 rgb(159 164 189 / 70%); -moz-box-shadow: 0 10px 20px 0 rgb(159 164 189 / 70%); -ms-box-shadow: 0 10px 20px 0 rgb(159 164 189 / 70%); -o-box-shadow: 0 10px 20px 0 rgb(159 164 189 / 70%); box-shadow: 0 10px 20px 0 rgb(159 164 189 / 70%); }
    .desktoApp .application:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -ms-transform: none; -o-transform: none; transform: none; }
    .desktoApp .application .download-options { padding: 10px 0px 0px; }
    .desktoApp .application .download { min-width: 49%; }
}
@media only screen and (max-width:375.98px) {
    .desktoApp .application .download { width: 100%; margin-top: 3px; }
}
@media only screen and (max-width:359.98px) {
    .desktoApp .application .download { padding: 5px 11px; }
}


/* Contact Us -------------------------------------------------------*/
.div-form-contact { padding: 60px 0px 120px; text-align: center; background-color: #d5e7f3; position: relative; }
.div-form-contact .wave { position: absolute; left: 0px; right: 0px; bottom: -16px; width: 100%; }
.div-form-contact .contactPersion { display: flex; align-items: center; justify-content: center; margin-top: 36px; }
.div-form-contact h1 { font-size: 36px; line-height: 46px; }
.div-form-contact figure { width: 70px; height: 70px; background-color: var(--white); border: 2px solid #d1dcf5; border-radius: 50%; overflow: hidden; line-height: 0px; margin: 0px -4px; }
.div-form-contact figure img { width: 100%; height: 100%; object-fit: contain; }
.div-form-contact .block { text-align: left; }
.div-form-contact p { font-size: 20px; line-height: 28px; }
.div-form-contact h1, .div-form-contact h5, .div-form-contact p, .div-form-contact span { color: var(--black); }
.sellFormSection { padding: 30px 0px 80px; }
@media only screen and (max-width: 991.98px) {
    .div-form-contact { padding: 30px 0px 70px; overflow: hidden; }
    .div-form-contact .wave { height: 54px; width: auto; }
    .div-form-contact h1 { font-size: 30px; line-height: 40px; }
    .div-form-contact p { font-size: 18px; line-height: 24px; }
    .sellFormSection { padding: 30px 0px 50px; }
    .sellFormSection .btn { padding: 16px; }
}
@media only screen and (max-width: 767.98px) {
    .div-form-contact h1 { font-size: 20px; line-height: 28px; }
    .div-form-contact .contactPersion { margin-top: 24px; }
    .div-form-contact figure { width: 60px; height: 60px; }
    .sellFormSection { padding: 0px 0px 80px; }
}




/* Review Popup------------------------------------------------------------------- */
#popup { display: none; position: fixed; display: hidden; top: 50%; left: 50%; width: 300px; max-width: 96%; height: auto; background-color: var(--white); border-radius: 10px; text-align: center; z-index: 6; padding: 30px 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 104; }
#popup span { display: block; font-size: 20px; line-height: 26px; font-weight: 700; color: #222; text-align: center; margin-bottom: 15px; }
#popup a { background-color: var(--primary); font-size: 14px; line-height: 20px; color: var(--white); text-transform: uppercase; font-weight: 500; padding: 5px 10px; border-radius: 5px; float: none; opacity: 1; }
#mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 5; display: none; z-index: 103; }
@media only screen and (max-width:479px) {
    #popup .popup-review { padding: 20px 10px; }
    #popup .popup-review a { padding: 10px; }
}


/* RoadMap -------------------------------------------------------*/
.road-map { padding: 70px 0px; text-align: center; }
.road-map ul { width: 100%; position: relative; margin-top: 50px; }
.road-map ul:before { content: ""; position: absolute; left: 50%; top: 0px; width: 8px; height: 100%; background-color: #ddd; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; }
.road-map li { display: flex; flex-flow: wrap; flex-direction: row; align-items: center; position: relative; }
.road-map li:nth-child(even) { justify-content: flex-end; }
.road-map li .achievement { width: 44%; padding: 30px 20px; background-color: var(--white); text-align: left; border-radius: 15px; -webkit-box-shadow: 0px 3px 6px 0px var(--black)29; -moz-box-shadow: 0px 3px 6px 0px var(--black)29; -ms-box-shadow: 0px 3px 6px 0px var(--black)29; -o-box-shadow: 0px 3px 6px 0px var(--black)29; box-shadow: 0px 3px 6px 0px var(--black)29; position: relative; }
.road-map li .achievement:before, .road-map li .achievement:after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.road-map li .achievement:before { right: -17px; border-left: 18px solid var(--black)08; border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.road-map li .achievement:after { right: -15px; border-left: 16px solid var(--white); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.road-map li:nth-child(2n) .achievement:before { right: auto; left: -17px; border-left: none; border-right: 18px solid var(--black)08; }
.road-map li:nth-child(2n) .achievement:after { right: auto; left: -15px; border-left: none; border-right: 16px solid var(--white); }
.road-map li .achievement span { font-size: 14px; line-height: 20px; color: #bbb; text-align: right; text-transform: uppercase; margin-top: 20px; display: block; }
.road-map li .achievement span i { padding-right: 10px; }
.road-map li h5 { margin-bottom: 0px; }
.road-map li .calender { width: 12%; text-align: center; }
.road-map li figure { width: 70px; height: 70px; background-color: var(--white); border: 4px solid var(--primary); border-radius: 50%; margin: 0 auto; font-size: 32px; line-height: 62px; color: var(--white); font-weight: 700; position: relative; z-index: 2; }
.road-map li figure span { position: relative; z-index: 5; }
.road-map li figure:before { content: ""; position: absolute; left: 3px; top: 3px; width: 55px; height: 55px; border-radius: 50%; background-color: var(--primary); z-index: 3; }
.road-map li:nth-child(even) .achievement { order: 2; }
.road-map li:nth-child(even) .calender { order: 1; }
@media only screen and (max-width:1399.98px) {
    .road-map .container:before { left: 0px; }
    .road-map .container:after { right: 0px; }
}
@media only screen and (max-width:1199.98px) {
    .road-map { padding: 60px 0px; }
}
@media only screen and (max-width:991.98px) {
    .road-map ul { margin-top: 30px; }
    .road-map ul:before { display: none; }
    .road-map li { margin-bottom: 20px; }
    .road-map li .achievement { width: 100%; padding-left: 100px; }
    .road-map li .achievement:before, .road-map li .achievement:after { display: none; }
    .road-map li .calender { position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
}
@media only screen and (max-width:767.98px) {
    .road-map { padding: 50px 0px; }
    .road-map ul { margin-top: 15px; }
}

/* Onprem In Action -------------------------------------------------------*/
.onprem-action { text-align: center; padding: 70px 0px; }
.onprem-action .block { max-width: 700px; margin: 30px auto 0px; }
.onprem-action img { max-width: 100%; }
@media only screen and (max-width:1199.98px) {
    .onprem-action { padding: 60px 0px; }
}
@media only screen and (max-width:991.98px) {
    .onprem-action { padding: 50px 0px; }
}
@media only screen and (max-width:767.98px) {
    .onprem-action .block { margin-top: 20px; }
}

/*Enterprise Client -------------------------------------------------------*/
.enterprise-client { padding-top: 70px; text-align: center; }
.enterprise-client ul { display: flex; flex-flow: wrap; flex-direction: row; align-items: center; justify-content: center; margin-top: 30px; }
.enterprise-client ul li { margin-right: 50px; margin-bottom: 20px; }
.enterprise-client ul li img { max-width: 120px; }
.enterprise-client ul li:nth-child(6n), .enterprise-client ul li:last-child { margin-right: 0px; }
@media only screen and (max-width:1199.98px) {
    .enterprise-client ul li:nth-child(6n) { margin-right: 50px; }
    .enterprise-client ul li:nth-child(5n), .enterprise-client ul li:last-child { margin-right: 0px; }
}
@media only screen and (max-width:991.98px) {
    .enterprise-client { padding: 60px 0px; }
    .enterprise-client ul li:nth-child(5n) { margin-right: 50px; }
    .enterprise-client ul li:nth-child(4n), .enterprise-client ul li:last-child { margin-right: 0px; }
}
@media only screen and (max-width:767.98px) {
    .enterprise-client { padding: 50px 0px; }
    .enterprise-client ul { margin-top: 15px; }
    .enterprise-client ul li { margin: 10px; }
    .enterprise-client ul li:nth-child(6n), .enterprise-client ul li:nth-child(5n), .enterprise-client ul li:nth-child(4n), .enterprise-client ul li:last-child { margin-right: 10px; }
    .enterprise-client ul li img { max-width: 100px; }
}

/*Customer Support -------------------------------------------------------*/
.customer-support { padding: 70px 0px 40px; border-top: 1px solid #ddd; text-align: center; }
.customer-support h6 { max-width: 900px; margin: 0 auto; }
.customer-support ul { margin-top: 40px; display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: center; align-items: center; width: 100%; text-align: left; }
.customer-support li:last-child { margin-left: 30px; }
.customer-support li img { max-width: 140px; }
@media only screen and (max-width:1199.98px) {
    .customer-support { padding: 70px 0px 0px; }
}
@media only screen and (max-width:991.98px) {
    .customer-support { padding: 60px 0px 30px; }
}
@media only screen and (max-width:767.98px) {
    .customer-support { padding: 50px 0px 0px; }
}
@media only screen and (max-width:575.98px) {
    .customer-support { padding: 40px 0px 30px; }
}
@media only screen and (max-width:479.98px) {
    .customer-support li img { max-width: 120px; }
    .customer-support li:last-child { margin-left: 20px; }
}

/*Our Team -------------------------------------------------------*/
.our-team { background-color: var(--white); text-align: center; }
.our-team h2 { text-transform: capitalize; margin-bottom: 30px; }
.our-team .block { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; height: 100%; text-align: left; background-color: var(--light_bg); padding: 40px; }
.our-team figure { width: 130px; height: 130px; border-radius: 50%; background-image: url('../images/icon-user-large.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.our-team figure img { width: 100%; height: 100%; border-radius: 50%; }
.our-team .description { width: calc(100% - 150px); }
.our-team .description h5 { text-transform: capitalize; margin-bottom: 10px; }
.our-team .description p { font-size: 13px; line-height: 20px; }
@media only screen and (max-width:991.98px) {
    .our-team h2 { margin-bottom: 20px; }
}
@media only screen and (max-width:767.98px) {
    .our-team .block { background-color: var(--white); -webkit-box-shadow: 0px 0px 5px 0px #ddd; -moz-box-shadow: 0px 0px 5px 0px #ddd; -ms-box-shadow: 0px 0px 5px 0px #ddd; -o-box-shadow: 0px 0px 5px 0px #ddd; box-shadow: 0px 0px 5px 0px #ddd; }
}
@media only screen and (max-width:479.98px) {
    .our-team .block { padding: 20px; }
    .our-team figure { width: 80px; height: 80px; }
    .our-team .description { width: calc(100% - 100px); }
}
@media only screen and (max-width:359.98px) {
    .our-team .block { text-align: center; }
    .our-team figure { margin: 0 auto; }
    .our-team .description { width: 100%; margin-top: 10px; }
}


/*more-plugins -------------------------------------------------------*/
.more-plugins { padding-bottom: 70px; background-color: #fdfdfd; }
.more-plugins h2 { text-align: center; margin-bottom: 40px; }
.more-plugins .aside { margin-bottom: 30px; }
.more-plugins .aside:last-child { margin-bottom: 0px; }
.more-plugins a { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; text-decoration: none; }
.more-plugins figure { width: 80px; height: 80px; background-color: #ddd; border-radius: 50%; line-height: 78px; text-align: center; }
.more-plugins figure img { max-width: 60%; max-height: 60%; }
.more-plugins h5 { width: calc(100% - 95px); color: var(--navi_blue); }
.more-plugins h5 i { margin-left: 5px; }
.more-plugins a:hover h5 { color: var(--primary); }
@media only screen and (max-width:1499.98px) {
    .more-plugins h5 { font-size: 18px; line-height: 24px; font-weight: 400; }
}
@media only screen and (max-width:1499.98px) {
    .more-plugins h5 { font-size: 16px; line-height: 22px; }
}
@media only screen and (max-width:991.98px) {
    .more-plugins { padding-bottom: 50px; background-color: var(--white); }
    .more-plugins h2 { margin-bottom: 30px; }
    .more-plugins .aside { margin-bottom: 30px; }
    .more-plugins .aside:last-child { margin-bottom: 0px; }
}
@media only screen and (max-width:767.98px) {
    .more-plugins { padding-bottom: 40px; }
    .more-plugins .aside { margin-bottom: 20px; }
    .more-plugins h5 { font-size: 14px; line-height: 20px; }
}

/*Create Account -------------------------------------------------------*/
.create-acount { padding: 70px 0px; background-color: var(--white); position: relative; min-height: calc(100vh - 70px); }
.create-acount .wrap { padding: 0px 15px; width: 100%; max-width: 1400px; margin: 0 auto; }
.create-acount h1 { font-size: 40px; line-height: 48px; font-weight: 500; text-align: center; margin-bottom: 20px; }
.create-acount .heading { font-size: 20px; line-height: 28px; font-weight: 700; display: none; }
.create-acount h6 { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--gray); line-height: 28px; }
.create-acount p { font-size: 14px; line-height: 20px; color: var(--gray); }
.create-acount a { font-size: 14px; line-height: 20px; color: var(--dark); font-weight: 400; }
.create-acount p a { font-weight: 600; }
.create-acount a:hover { color: var(--navi_blue); }
.create-acount .account-form { width: 100%; max-width: 480px; padding: 36px 40px; margin: 0 auto; }
.create-acount form { display: block; text-align: left; }
.create-acount .input-group .block { width: 48%; margin-right: 4%; }
.create-acount .input-group .block:last-child { margin-right: 0px; }
.create-acount .from-recaptcha { margin-bottom: 10px; }
.create-acount .from-recaptcha#divLoginRecaptcha { margin-bottom: 20px; }
.create-acount .submit input[type="button"],
.create-acount .submit button.submit { width: 100%; background-color: var(--primary); border-radius: 0px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--white); text-transform: capitalize; text-align: center; border: none; border-radius: 16px; padding: 16px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.create-acount .forgot { margin-top: -12px; }
.create-acount .forgot a { font-size: 13px; color: var(--primary); text-decoration: underline; }
.create-acount .socialmedia-login { text-align: center; }
.create-acount .socialmedia-login p { font-size: 14px; line-height: 20px; margin: 30px 0px; position: relative; z-index: 2; }
.create-acount .socialmedia-login p:before,
.create-acount .socialmedia-login p:after { content: ""; position: absolute; top: 10px; width: 30%; height: 1px; background-color: #d8dcdc; z-index: -1; }
.create-acount .socialmedia-login p:before { left: 0px; }
.create-acount .socialmedia-login p:after { right: 0px; }
.create-acount .socialmedia-login .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background-color: var(--white); border-radius: 16px; padding: 2px 12px; height: 54px; -webkit-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); -moz-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); -ms-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); -o-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); color: var(--dark); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.5px; text-align: center; width: 100%; margin-bottom: 12px; }
.create-acount .socialmedia-login .button:last-child { margin-bottom: 0px; }
.create-acount .socialmedia-login .button img { height: 24px; }
.create-acount .socialmedia-login .button.facebook img { height: 28px; }
.create-acount .socialmedia-login .button:hover { background-color: var(--light_blue_bg); color: var(--black); }
.create-acount .registrationTab { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.create-acount .registrationTab .btn-group { background-color: var(--white); border: 1px solid #dddddd; padding: 2px; border-radius: 30px; display: inline-flex; align-items: center; gap: 6px; }
.create-acount .registrationTab .btnSecondary { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--dark); border: none; border-radius: 30px; padding: 8px 24px; background-color: transparent; }
.create-acount .registrationTab .btnSecondary.active { background-color: var(--navi_blue); background-image: linear-gradient(180deg, var(--primary), var(--navi_blue)); color: var(--white); }
@media only screen and (max-width:1599.98px) {
    .create-acount .wrap { max-width: 1300px; }
}
@media only screen and (max-width:1499.98px) {
    .create-acount .wrap { max-width: 1270px; }
}
@media only screen and (max-width:1399.98px) {
    .create-acount .wrap { max-width: 1170px; }
}
@media only screen and (max-width:1199.98px) {
    .create-acount .wrap { padding: 0px 24px; }
}
@media only screen and (max-width:991.98px) {
    .create-acount .md-d-none { display: none }
    .create-acount .heading { display: block; }
}
@media only screen and (max-width:767.98px) {
    .create-acount { padding: 70px 0px; background-color: var(--white); }
    .create-acount { padding: 50px 0px; }
    .create-acount .input-group .block { width: 100%; margin-right: 0px; margin-bottom: 30px; }
    .create-acount .input-group .block:last-child { margin-bottom: 0px; }
    .create-acount .registrationTab .btnSecondary { font-size: 14px; line-height: 20px; padding: 6px 24px; }
}
@media only screen and (max-width:639.98px) {
    .create-acount .submit input[type="button"] { font-size: 14px; line-height: 20px; }
    .create-acount .account-form p { font-size: 12px; line-height: 18px; }
    .create-acount .account-form .alterlinks a { font-size: 12px; line-height: 18px; }
}
@media only screen and (max-width:575.98px) {
    .create-acount { padding: 0px; }
    .create-acount .wrap { padding: 0px; }
    .create-acount .account-form { padding: 48px 0px 30px; border-radius: 0px; box-shadow: none; }
    .create-acount h1 { font-size: 18px; line-height: 24px; }
    .create-acount h6 { font-size: 13px; margin-bottom: 20px !important; }
    .create-acount .account-form .alterlinks.submit input[type="button"] { width: auto; min-width: 120px; }
    .create-acount .registrationTab { margin-top: 50px; margin-bottom: 0px; }
}
@media only screen and (max-width:479.98px) {
    .create-acount form { margin-top: 20px; }
}

/*API Alert -------------------------------------------------------*/
.success, .fail { width: 96%; max-width: 600px; padding: 50px 30px; background-color: var(--white); box-shadow: 0px 0px 16px 6px #ddd; margin: 15px auto; text-align: center; }
.success i, .fail i { font-size: 100px; line-height: 100px; color: #008000; display: inline-block; vertical-align: top; margin-bottom: 30px; }
.fail i { color: #ff0000; }
.fail h4 { margin: 5px 0px 25px; }
.alert { position: fixed; right: 10px; width: 100%; max-width: 280px; border-radius: 8px; padding: 12px 32px 12px 12px; z-index: 99; }
.alert.alert-danger { -webkit-box-shadow: -4px 5px 10px 0px #cd9096; -moz-box-shadow: -4px 5px 10px 0px #cd9096; -ms-box-shadow: -4px 5px 10px 0px #cd9096; -o-box-shadow: -4px 5px 10px 0px #cd9096; box-shadow: -4px 5px 10px 0px #cd9096; }
.alert-dismissible .close { top: 7px; text-decoration: none; }
.api-deprecate { border-radius: 0px; text-align: center; position: relative; background-color: var(--primary); border-color: var(--primary); color: var(--light_bg); margin: 0px; }
.api-deprecate span { font-weight: 500; }
.cookis-alert { right: 40px; bottom: 40px; left: auto; width: 100%; max-width: 564px; background: #fff; border-radius: 12px; border: none; padding: 32px; margin: 0px; text-align: left; font-size: 16px; line-height: 26px; color: var(--dark); -webkit-box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2); box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2); z-index: 999; }
.cookis-alert a { color: var(--primary); font-weight: 500; }
.cookis-alert p { margin: 12px 0px 0px; }
.cookis-alert a.close { color: var(--navi_blue); text-shadow: none; font-weight: 600; font-size: 14px; line-height: 20px; opacity: 1; float: none; background-color: var(--light_blue_bg); padding: 4px 16px; border-radius: 20px; }
@media only screen and (max-width:1499px) {
    .api-deprecate { font-size: 12px; }
}
@media only screen and (max-width:575.98px) {
    .cookis-alert { width: calc(100% - 32px); right: 16px; bottom: 16px; font-size: 14px; line-height: 22px; }
}

/*Start Slazzer -------------------------------------------------------*/
.start-slazzer { padding: 50px 0px; }
.start-slazzer h2 { font-size: 28px; line-height: 34px; }
.start-slazzer ul { margin-top: 40px; }
.start-slazzer ul li { width: 100%; text-align: left; background-image: url(../images/business/check-mark.svg); background-repeat: no-repeat; background-position: 0px 0px; background-size: 16px; font-size: 16px; line-height: 22px; color: var(--dark); padding-left: 24px; margin-bottom: 20px; }
.start-onprem ul li:last-child { margin-bottom: 0px; }
.start-slazzer .btn { margin-top: 30px; }
@media only screen and (max-width:1199.98px) {
    .start-slazzer h2 { font-size: 24px; line-height: 30px; }
}
@media only screen and (max-width:767.98px) {
    .start-slazzer { padding: 40px 0px; }
    .start-slazzer .text { order: 2; }
    .start-slazzer .img { order: 1; margin-bottom: 20px; }
    .start-slazzer .img img { max-width: 400px; max-height: 300px; margin: 0 auto; display: block; }
    .start-slazzer ul { margin-top: 25px; }
    .start-slazzer .btn { margin-top: 25px; }
    .start-slazzer ul li { margin-bottom: 12px; }
}

/*The Unique Slazzer -------------------------------------------------------*/
.the-unique-slazzer { padding: 50px 0px; }
.the-unique-slazzer .container { max-width: 800px; }
.the-unique-slazzer h2 { font-size: 30px; line-height: 36px; text-align: center; }
.the-unique-slazzer ul { margin-top: 40px; }
.the-unique-slazzer ul li { width: 100%; text-align: left; background-image: url(../images/business/check-mark.svg); background-repeat: no-repeat; background-position: 0px 0px; background-size: 16px; font-size: 16px; line-height: 22px; color: var(--dark); padding-left: 24px; margin-bottom: 20px; }
.the-unique-slazzer li:last-child { margin-bottom: 0px; }
@media only screen and (max-width:1199.98px) {
    .the-unique-slazzer h2 { font-size: 24px; line-height: 30px; }
}
@media only screen and (max-width:991.98px) {
    .the-unique-slazzer h2 { text-align: left; }
}
@media only screen and (max-width:767.98px) {
    .the-unique-slazzer { padding: 40px 0px; }
    .the-unique-slazzer ul { margin-top: 25px; }
}

/* static-content-04 -------------------------------------------------------*/
.static-content-04 { padding: 50px 0px; }
.static-content-04 .static-row { display: flex; flex-flow: wrap; flex-direction: row; align-items: center; margin-bottom: 70px; }
.static-content-04 .static-row:last-child { margin-bottom: 0px; }
.static-content-04 .aside { width: 58%; }
.static-content-04 .image-holder { border-radius: 15px; overflow: hidden; }
.static-content-04 .image-holder img { width: 100%; }
.static-content-04 .text-holder { position: relative; margin-right: -16%; z-index: 5; }
.static-content-04 .text-holder h2 { font-size: 24px; line-height: 30px; max-width: 65%; margin-bottom: 25px; }
.static-content-04 .text { background-color: rgba(255, 255, 255, 0.6); padding: 40px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, .4); -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, .4); -ms-box-shadow: 0 20px 30px rgba(0, 0, 0, .4); -o-box-shadow: 0 20px 30px rgba(0, 0, 0, .4); box-shadow: 0 20px 30px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(8px); -moz-backdrop-filter: blur(8px); -ms-backdrop-filter: blur(8px); -o-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.static-content-04 .static-row:nth-child(2n) .image-holder { order: 1; }
.static-content-04 .static-row:nth-child(2n) .text-holder { order: 2; margin-left: -16%; margin-right: 0px; }
.static-content-04 .static-row:nth-child(2n) .text-holder h2 { margin-left: auto; text-align: right; }
@media only screen and (max-width:991.98px) {
    .static-content-04 { padding: 0px; }
    .static-content-04 .container { width: 100%; max-width: 100%; padding: 0px; }
    .static-content-04 .static-row { padding: 50px 15px; margin: 0px; }
    .static-content-04 .aside { width: 100%; max-width: 720px; margin: 0 auto; }
    .static-content-04 .image-holder { max-width: 500px; margin-bottom: 25px; }
    .static-content-04 .static-row .image-holder, .static-content-04 .static-row:nth-child(2n) .image-holder { order: 1; }
    .static-content-04 .static-row .text-holder, .static-content-04 .static-row:nth-child(2n) .text-holder { order: 2; margin: 0px auto; }
    .static-content-04 .static-row .text-holder h2, .static-content-04 .static-row:nth-child(2n) .text-holder h2 { margin: 0px; width: 100%; max-width: 100%; text-align: left; }
    .static-content-04 .text { background-color: var(--white); padding: 0px; border-radius: 0px; margin-top: 15px; }
}
@media only screen and (max-width:767.98px) {
    .static-content-04 .static-row { padding: 40px 15px; }
    .static-content-04 .aside { max-width: 540px; }
    .static-content-04 .image-holder { max-width: 400px; }
}

/*Account Page Setting -------------------------------------------------------*/
.account-page-setting { padding: 100px 24px; background-color: var(--light); }
.account-page-setting .wrap { max-width: 650px; margin: 0 auto; border-radius: 20px; background-color: var(--white); -webkit-box-shadow: 0px 0px 20px 0px #e5e5e5; -moz-box-shadow: 0px 0px 20px 0px #e5e5e5; -ms-box-shadow: 0px 0px 20px 0px #e5e5e5; -o-box-shadow: 0px 0px 20px 0px #e5e5e5;    box-shadow: 0px 0px 20px 0px #e5e5e5; }
.account-page-setting .back { padding: 30px; border-bottom: 1px solid #ddd; }
.account-page-setting .back a { font-size: 18px; line-height: 24px; color: var(--black); text-transform: capitalize; }
.account-page-setting .back img { margin-right: 10px; }
.account-page-setting .back a:hover { color: var(--primary); }
.account-page-setting .middle-box { max-width: 520px; margin: 0 auto; padding: 40px 60px 60px; }
.account-page-setting h1 { text-align: center; margin-bottom: 16px; }
.account-page-setting h5 { font-size: 18px; line-height: 28px; font-weight: 700; }
.account-page-setting h6 { font-weight: 400; line-height: 28px; text-align: center; margin-bottom: 20px; }
.account-page-setting h6:last-of-type { margin-bottom: 0px; }
.account-page-setting h6 span { font-size: 16px; line-height: 22px; color: var(--navi_blue); display: inline; }
.account-page-setting .middle-box select { margin-top: 40px; }
.account-page-setting .buttons { margin-top: 30px; text-align: center; }
.account-page-setting .buttons .btn-rev { margin-right: 10px; }
.account-page-setting .middle-box p { font-size: 13px; line-height: 20px; }
.account-page-setting .middle-box p a { color: var(--primary); }
.account-page-setting .middle-box p a:hover { color: var(--navi_blue); }
.account-page-setting .center-box { padding: 40px 60px 60px; text-align: center; }
.account-page-setting .center-box .planName { display: inline-block; max-width: 100%; border: 1px dashed #001C5C; background-color: #001C5C; border-radius: 16px; padding: 10px 30px; font-size: 16px; line-height: 26px; color: var(--white); margin-top: 12px; }
.account-page-setting .center-box .planName span { font-size: 16px; line-height: 26px; font-weight: 600; color: var(--white); display: inline-block; }
.account-page-setting .center-box p.red { color: #ff0000; font-weight: 500; }
.account-page-setting .center-box mark { background-color: var(--light_green_bg); font-weight: 600; }
.account-page-setting .center-box span { display: block; font-size: 14px; line-height: 24px; color: var(--black); }
.account-page-setting ol { list-style: decimal; text-align: left; padding-left: 30px; margin-top: 12px; }
.account-page-setting ol li { font-size: 14px; line-height: 24px; color: var(--black); margin-bottom: 10px; }
.account-page-setting ol li:last-child { margin-bottom: 0px; }
.account-page-setting .important-note { background-color: var(--light); border: 1px dashed #001C5C; border-radius: 16px; padding: 15px; padding-left: 70px; margin: 36px 0px; font-size: 14px; line-height: 24px; color: var(--dark); text-align: left; background-image: url('../images/icon-important-note1.svg'); background-repeat: no-repeat; background-position: 20px 15px; background-size: 30px; }
.account-page-setting .center-box span.note { color: #4B4B4B; font-size: 12px; line-height: 17px; margin-top: 20px; }
.account-page-setting .hepl-center { display: flex; flex-flow: wrap; flex-direction: row; justify-content: center; max-width: 500px; margin: 40px auto 30px; }
.account-page-setting .hepl-center li { width: 48%; margin-right: 4%; }
.account-page-setting .hepl-center li:last-child { margin-right: 0px; }
.account-page-setting .hepl-center li.single { width: 100%; max-width: 300px; margin: 0px; }
.account-page-setting .hepl-center a { display: inline-block; vertical-align: top; width: 100%; background-color: #eff5ff; border: 1px dashed #001C5C; padding: 50px 30px; font-size: 12px; line-height: 18px; color: var(--navi_blue); border-radius: 30px; }
.account-page-setting .hepl-center i { font-size: 30px; }
.account-page-setting .hepl-center span { display: block; font-size: 20px; line-height: 26px; color: var(--navi_blue); text-transform: capitalize; font-weight: 500; margin: 20px 0px 5px; }
.account-page-setting .hepl-center a:hover { background-color: var(--navi_blue); color: var(--white); }
.account-page-setting .hepl-center a:hover span { color: var(--light_bg); }
.account-page-setting .usage-chart { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; margin-top: 30px; }
.account-page-setting .usage-chart .form-group { width: 48%; text-align: left; }
.account-page-setting .usage-chart .buttons { margin-top: 10px; }
.devider { font-size: 16px; line-height: 22px; margin-top: 20px; position: relative; max-width: 220px; margin: 0 auto; margin-bottom: 30px; z-index: 2; }
.account-page-setting .center-box .devider span { padding: 0px 10px; background-color: var(--white); display: inline-block; }
.devider:before { content: ""; position: absolute; left: 50%; top: 12px; width: 80%; height: 1px; border-top: 1px dashed #001C5C; opacity: 0.5; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; }
@media only screen and (min-width:992px) {
    .account-page-setting h1 { font-size: 30px; line-height: 36px; }
}
@media only screen and (max-width: 1499.98px) {
    .account-page-setting { padding: 80px 24px; }
}
@media only screen and (max-width: 991.98px) {
    .account-page-setting { padding: 70px 24px; }
}
@media only screen and (max-width:767.98px) {
    .account-page-setting .back { padding: 20px 30px; }
    .account-page-setting .back a { font-size: 14px; line-height: 22px; }
    .account-page-setting .back img { width: 10px; }
    .account-page-setting h1 { font-size: 24px; line-height: 34px; }
    .account-page-setting h6 span { line-height: 24px; }
    .account-page-setting .middle-box { padding: 40px 30px; }
    .account-page-setting .center-box { padding: 40px 30px; }
    .account-page-setting .center-box .planName { font-size: 14px; line-height: 24px; padding: 10px 20px; }
    .account-page-setting .center-box .planName span { font-size: 14px; line-height: 24px; }
}
@media only screen and (max-width:575.98px) {
    .account-page-setting .hepl-center li { width: 100%; max-width: 350px; margin: 0px; margin-bottom: 25px; }
    .account-page-setting .hepl-center li:last-child { margin-bottom: 0px; }
}
@media only screen and (max-width:479.98px) {
    .account-page-setting .back { padding: 24px 20px 16px; }
    .account-page-setting .usage-chart .form-group { width: 100%; }
    .account-page-setting .middle-box { padding: 30px 24px; }
    .account-page-setting .center-box { padding: 30px 24px; }
    .account-page-setting h6 { font-size: 14px; line-height: 24px; }
    .account-page-setting h5 { font-size: 16px; line-height: 26px; }
}
@media only screen and (max-width:399.98px) {
    .account-page-setting .buttons .btn { margin-bottom: 8px; padding: 7px 18px; }
    .account-page-setting .buttons .btn-rev { margin-right: 0px; }
}

/*Plan Popup -------------------------------------------------------*/
.planpopup .modal-dialog { max-width: 750px; }
.planpopup .modal-content { border: none; border-radius: 0px; padding: 0px 0px 30px; }
.planpopup .modal-title { font-size: 30px; line-height: 36px; text-align: center; text-transform: capitalize; }
.planpopup .modal-header { align-items: center; justify-content: center; border: none; padding: 15px 50px; }
.planpopup .modal-header .close { position: absolute; left: 0px; top: 20px; opacity: 1; text-decoration: none; }
.planpopup .modal-header .close img { width: 20px; display: block; }
.planpopup .modal-body { padding: 0px; }
.planpopup table { width: 100%; }
.planpopup th { background-color: var(--light_blue_bg); padding: 20px 25px; text-align: center; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--black); text-transform: capitalize; }
.planpopup th:last-child { border: none; }
.planpopup td { border-bottom: 1px solid #ddd; padding: 10px 15px; text-align: center; font-size: 14px; line-height: 20px; }
.planpopup td:first-child { text-align: right; width: 30%; white-space: nowrap; }
.planpopup td:last-child { background-color: var(--light_bg); }
.planpopup h3 { font-size: 24px; line-height: 30px; margin: 0px; }
.planpopup span { font-size: 11px; line-height: 17px; color: #4B4B4B; max-width: 105px; display: block; margin: 0 auto; }
.planpopup tr:first-child td { padding: 20px 25px; }
.planpopup tr:first-child h4 { margin: 5px 0px; }
.planpopup tr:first-child td:nth-child(2) h4 { color: #4B4B4B; }
.planpopup tr:first-child td:last-child span { color: var(--navi_blue); font-weight: 500; }
.planpopup tr:first-child td:last-child h3 { color: var(--navi_blue); }
.planpopup tr:last-child td { border-bottom: none; padding-top: 20px; }
.planpopup tr:last-child td:last-child { background-color: var(--white); }
.planpopup .important-note { max-width: 90%; margin: 25px auto 0px; font-size: 13px; line-height: 20px; color: #FC2727; background-image: url('../images/icon-important-note.svg'); background-repeat: no-repeat; background-position: 0px 2px; padding-left: 35px; }
@media only screen and (max-width:767.98px) {
    .planpopup .modal-header .close img { width: 24px; }
    .planpopup td { padding: 15px 10px; }
    .planpopup .important-note { max-width: 94%; font-size: 13px; }
    .planpopup .table-outer { overflow-y: hidden; overflow-x: auto; width: 100%; }
    .planpopup h3 { font-size: 20px; line-height: 26px; }
}
@media only screen and (max-width:575.98px) {
    .planpopup td { padding: 15px 5px; }
}
@media only screen and (max-width:479.98px) {
    .planpopup .modal-title { font-size: 24px; line-height: 30px; }
    .planpopup .modal-header .close { padding: 10px; top: 24px; }
    .planpopup .modal-header .close img { max-width: 16px; }
}
@media only screen and (max-width:375.98px) {
    .planpopup td { min-width: 170px; padding: 10px; }
}
@media only screen and (max-width:359.98px) {
    .planpopup .modal-title { font-size: 20px; line-height: 26px; }
}

/*Mailbox -------------------------------------------------------*/
.account-page-setting .mailbox { max-width: 500px; margin: 0 auto; text-align: center; }
.account-page-setting form { display: block; margin-top: 40px; }
.account-page-setting textarea { height: 160px; }
.account-page-setting .allow-contact { margin-top: 20px; padding: 0px 20px; text-align: left; }
.account-page-setting .allow-contact h6 { font-weight: 500; text-align: left; }
.account-page-setting .allow-contact ul { margin-top: 15px; }
.account-page-setting .allow-contact li { margin-bottom: 10px; font-size: 14px; line-height: 20px; color: var(--black); }
@media only screen and (max-width:479.98px) {
    .account-page-setting textarea { height: 120px; }
}

/*Download App -------------------------------------------------------*/
.download-app { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 130px; overflow: hidden; opacity: 0; visibility: hidden; z-index: 99; }
.download-app .download-now { display: flex; flex-flow: wrap; flex-direction: row; align-items: center; margin-left: auto; width: 420px; background-color: var(--white); padding: 20px; border-radius: 8px; -webkit-box-shadow: 0px 0px 10px 0px #ccc; -moz-box-shadow: 0px 0px 10px 0px #ccc; -ms-box-shadow: 0px 0px 10px 0px #ccc; -o-box-shadow: 0px 0px 10px 0px #ccc; box-shadow: 0px 0px 10px 0px #ccc; position: absolute; left: 50%; bottom: -100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 0.8s ease; -moz-transition: 0.8s ease; -ms-transition: 0.8s ease; -0-transition: 0.8s ease; transition: 0.8s ease; }
.download-app.active { opacity: 1; visibility: visible; }
.download-app.active .download-now { bottom: 10px; }
.download-app .close { position: absolute; right: 15px; top: 5px; display: inline-block; vertical-align: top; width: 10px; text-decoration: none; }
.download-app img { width: 50px; display: inline-block; margin-right: 20px; }
.download-app .content { width: calc(100% - 70px); }
.download-app h6 { margin-bottom: 0px; }
.download-app p { font-size: 13px; line-height: 20px; }
.download-app .download { display: inline-block; vertical-align: top; margin-top: 5px; font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.download-app .close img { width: 100%; }
@media only screen and (max-width:991.98px) {
    .download-app { display: none; }
}


/*Download Mobile App -------------------------------------------------------*/
.downloadMobileApp { background-color: rgba(0, 0, 0, 0.7); position: fixed; bottom: -100%; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; visibility: hidden; -webkit-animation-name: openApp; -moz-animation-name: openApp; animation-name: openApp; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; z-index: 103; }
.downloadMobileApp.show { top: 0px; opacity: 1; visibility: visible; }
.downloadMobileApp .ContentWrapper { background-color: var(--white); padding: 16px; border-radius: 20px 20px 0px 0px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); position: relative; }
.downloadMobileApp .top { display: flex; align-items: center; gap: 12px; }
.downloadMobileApp .top img { width: 50px; }
.downloadMobileApp .top .text { width: calc(100% - 72px); }
.downloadMobileApp .closeBtn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 28px; height: 28px; padding: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .05); background-color: hsla(0, 0%, 100%, .5); position: absolute; right: 12px; top: 12px; }
.downloadMobileApp .closeBtn img { width: 10px; }
.downloadMobileApp h5 { font-size: 18px; line-height: 24px; font-weight: 700; color: #000; }
.downloadMobileApp p { color: var(--gray); line-height: 20px; font-weight: 500; }

.downloadMobileApp .features { display: flex; align-items:center; gap: 12px; margin-top: 20px; }
.downloadMobileApp .features video,
.downloadMobileApp .features img { width: 140px; border-radius: 8px; }
.downloadMobileApp .features .content { width: calc(100% - 152px); }
.downloadMobileApp .features h6 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--gray-dark); margin-bottom: 2px; }
.downloadMobileApp .features span { display: inline-block; color: var(--gray); font-size: 12px; line-height: 16px; font-weight: 400; }
.downloadMobileApp .getApp { background-image: linear-gradient(45deg, var(--navi_blue), var(--blue)); border: none; border-radius: 8px; color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 20px; padding: 12px 16px; font-size: 16px; line-height: 20px; font-weight: 600; text-transform: capitalize; width: 100%; }

@media only screen and (min-width: 992px) {
    .downloadMobileApp { display: none; }
}


/*Help Desk -------------------------------------------------------*/
.helpdesk { padding: 70px 0px; background-image: linear-gradient(to bottom, var(--light_blue_bg), var(--white)); text-align: center; }
.helpdesk h1 { font-size: 40px; line-height: 50px; margin-bottom: 40px; }
.helpdesk h1 span { display: block; }
.helpdesk .row { justify-content: center; }
.helpdesk a { display: inline-block; vertical-align: top; width: 100%; height: 100%; background-color: var(--white); padding: 70px 50px; border-radius: 8px; text-decoration: none; -webkit-box-shadow: 0px 0px 10px 0px #ccc; -moz-box-shadow: 0px 0px 10px 0px #ccc; -ms-box-shadow: 0px 0px 10px 0px #ccc; -o-box-shadow: 0px 0px 10px 0px #ccc; box-shadow: 0px 0px 10px 0px #ccc; }
.helpdesk img { max-height: 70px; }
.helpdesk h4 { margin-top: 35px; margin-bottom: 15px; }
.helpdesk p strong { display: block; font-weight: 500; color: var(--black); }
.helpdesk a:hover { background-color: var(--light_blue_bg); }
@media only screen and (max-width:1199.98px) {
    .helpdesk h1 { font-size: 36px; line-height: 46px; }
}
@media only screen and (max-width:991.98px) {
    .helpdesk { padding: 60px 0px; }
}
@media only screen and (max-width:767.98px) {
    .helpdesk { padding: 50px 0px; }
    .helpdesk h1 { font-size: 30px; line-height: 40px; margin-bottom: 30px; }
    .helpdesk .block { max-width: 400px; margin: 0 auto 25px; }
    .helpdesk .block:last-child { margin-bottom: 0px; }
    .helpdesk a { padding: 50px 30px; }
    .helpdesk img { max-height: 60px; }
    .helpdesk h4 { margin-top: 25px; margin-bottom: 10px; }
}
@media only screen and (max-width:479.98px) {
    .helpdesk h1 { font-size: 24px; line-height: 30px; margin-bottom: 20px; }
}

/*Last Included -------------------------------------------------------*/
.status-contact h6 { font-size: 20px; line-height: 26px; font-weight: 500; color: var(--black); padding: 0px; margin: 0px; }
.status-contact h6:before, .status-contact h6:after { display: none; }


/* Integrate -------------------------------------------------------*/
.integrate { padding: 70px 0px; background-color: var(--light_bg); text-align: center; }
.integrate ul { margin-top: 30px; display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; }
.integrate li { width: 28%; background-color: var(--white); border-radius: 8px; padding: 30px 20px; position: relative; -webkit-box-shadow: 0px 0px 1px 0px #ddd; -moz-box-shadow: 0px 0px 1px 0px #ddd; -ms-box-shadow: 0px 0px 1px 0px #ddd; -o-box-shadow: 0px 0px 1px 0px #ddd; box-shadow: 0px 0px 1px 0px #ddd; }
.integrate li:before { content: "\f101"; font-family: FontAwesome; font-size: 50px; line-height: 50px; color: var(--gray); font-weight: normal; position: absolute; right: -55px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.integrate li:last-child:before { display: none; }
.integrate li i { width: 50px; height: 50px; border: 1px solid var(--primary); border-radius: 50%; color: var(--primary); font-size: 24px; line-height: 48px; }
.integrate li h6 { color: var(--black); font-weight: 700; text-transform: capitalize; margin-top: 20px; margin-bottom: 5px; }
.integrate li span { display: block; color: var(--black); font-size: 13px; line-height: 20px; }
@media only screen and (max-width:1499.98px) {
    .integrate li:before { right: -50px; }
}
@media only screen and (max-width:991.98px) {
    .integrate { padding: 60px 0px; }
    .integrate li { width: 30%; padding: 25px 15px; }
    .integrate li:before { font-size: 30px; line-height: 30px; right: -28px; }
}
@media only screen and (max-width:767.98px) {
    .integrate { padding: 50px 0px; background-color: var(--white); }
    .integrate li { width: 100%; max-width: 360px; margin: 0 auto 25px; -webkit-box-shadow: 0px 0px 5px 0px #DDD; -moz-box-shadow: 0px 0px 5px 0px #DDD; -ms-box-shadow: 0px 0px 5px 0px #DDD; -o-box-shadow: 0px 0px 5px 0px #DDD; box-shadow: 0px 0px 5px 0px #DDD; }
    .integrate li:before { content: "\f103"; font-size: 22px; line-height: 22px; left: 50%; right: auto; top: auto; bottom: -22px; transform: translate(-50%, 0px); }
}
@media only screen and (max-width:575.98px) {
    .integrate { padding: 40px 0px; }
}


/* All Design Template -------------------------------------------------------*/
.all-design-template { padding: 70px 0px; background-color: var(--white); }
.all-design-template .title-ber { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.all-design-template h1 { font-size: 30px; line-height: 36px; color: var(--dark); margin: 0px; }
.all-design-template .title-ber button { font-size: 18px; line-height: 24px; color: var(--dark); text-transform: capitalize; font-weight: 700; border: none; padding: 3px 0px; background: none; margin-right: 15px; border-bottom: 2px solid transparent; cursor: pointer; }
.all-design-template .title-ber button:last-child { margin-right: 0px; }
.all-design-template .title-ber button:hover { color: var(--sky-blue); }
.all-design-template .title-ber button.current { color: var(--navi_blue); border-color: var(--navi_blue); }
.all-design-template .static-row { display: flex; flex-flow: wrap; flex-direction: row; }
.all-design-template .aside { width: 32%; margin-right: 2%; margin-bottom: 30px; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0px 0px 4px 0px #ddd; -moz-box-shadow: 0px 0px 4px 0px #ddd; -ms-box-shadow: 0px 0px 4px 0px #ddd; -o-box-shadow: 0px 0px 4px 0px #ddd; box-shadow: 0px 0px 4px 0px #ddd; }
.all-design-template .aside:nth-child(3n), .all-design-template .aside:last-child { margin-right: 0px; }
.all-design-template .aside > a { display: inline-block; vertical-align: top; width: 100%; text-decoration: none; }
.all-design-template figure { position: relative; overflow: hidden; }
.all-design-template figure img { -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; }
.all-design-template .front-img { width: 100%; position: relative; opacity: 1; }
.all-design-template .back-img { width: 100%; opacity: 0; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -0-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.all-design-template .aside > a:hover .front-img { opacity: 0.5; }
.all-design-template .aside > a:hover .back-img { opacity: 1; width: 100%; height: 100%; }
.all-design-template .block { padding: 25px; background-color: var(--white); text-align: left; position: relative; z-index: 3; }
.all-design-template h2 { font-size: 20px; line-height: 28px; text-transform: capitalize; font-weight: 500; color: var(--black); margin-bottom: 5px; }
.all-design-template .block span { font-size: 14px; line-height: 17px; color: var(--dark); display: block; }
.all-design-template .aside > a:hover h6 { color: var(--primary); }
@media only screen and (min-width:1200px) and (max-width:1499.98px) {
    .all-design-template .container { max-width: 1140px; }
}
@media only screen and (max-width:1199.98px) {
    .all-design-template h1 { width: 100%; text-align: center; margin-bottom: 15px; }
    .all-design-template .toolbar { width: 100%; text-align: center; }
}
@media only screen and (max-width:991.98px) {
    .all-design-template { padding: 60px 0px; }
    .all-design-template .aside { margin-bottom: 25px; }
    .all-design-template .block { padding: 15px; }
    .all-design-template h2 { font-size: 16px; line-height: 22px; }
    .all-design-template p { font-size: 14px; line-height: 20px; }
}
@media only screen and (max-width:767.98px) {
    .all-design-template { padding: 50px 0px 30px; }
    .all-design-template .title-ber button { font-size: 16px; line-height: 22px; }
    .all-design-template .aside { width: 48%; margin-right: 4%; }
    .all-design-template .aside:nth-child(3n) { margin-right: 4%; }
    .all-design-template .aside:nth-child(2n) { margin-right: 0px; }
}
@media only screen and (max-width:575.98px) {
    .all-design-template { padding: 40px 0px 20px; }
    .all-design-template h1 { font-size: 24px; line-height: 30px; }
    .all-design-template .aside { width: 100%; max-width: 360px; margin: 0px auto 25px; }
    .all-design-template .aside:nth-child(2n) { margin-right: auto; }
    .all-design-template .aside:nth-child(3n) { margin-right: auto; }
    .all-design-template .aside:last-child { margin-right: auto; }
    .all-design-template .block { padding: 25px 15px; }
}
@media only screen and (max-width:479.98px) {
    .all-design-template { padding: 40px 0px; }
}
@media only screen and (max-width:375.98px) { }
@media only screen and (max-width:359.98px) { }

/* Photo Optimizer -------------------------------------------------------*/
.photo-optimizer { padding: 70px 0px; text-align: center; position: relative; background-color: var(--white); z-index: 9; }
.photo-optimizer h1 { font-size: 40px; line-height: 46px; color: var(--dark); position: relative; margin-bottom: 5px; }
.photo-optimizer h5 { margin-bottom: 50px; }
.photo-optimizer .back { text-align: left; margin-bottom: 15px; }
.photo-optimizer .back a { height: 30px; font-size: 16px; line-height: 22px; color: var(--dark); text-decoration: none; }
.photo-optimizer .back a img { height: 16px; margin-right: 5px; }
.template-editer { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; text-align: left; }
.template-editer .background-options { width: 200px; }
.template-editer .select-background { background-color: var(--white); height: 100%; overflow: hidden; -webkit-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 29%); -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); -ms-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); -o-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 29%); }
.template-editer .select-background h6 { width: 100%; text-align: center; }
.template-editer .select-background h6.collapse { display: none; text-align: left; }
.template-editer .select-background .nav-tabs { margin: 0px; gap: 0px; }
.template-editer .select-background .nav-item { width: 50%; margin: 0px; }
.template-editer .select-background .nav-link { display: inline-block; width: 100%; font-size: 14px; line-height: 20px; color: var(--black); background-color: #EFEFEF; text-transform: capitalize; padding: 10px; border: none; border-radius: 0px; }
.template-editer .select-background .nav-link:before { display: none; }
.template-editer .select-background .nav-link img { width: 20px; display: inline; padding-right: 5px; }
.template-editer .select-background .nav-link.active, .template-editer .select-background .nav-item.show .nav-link { color: #707070; background-color: var(--white); border: none; }
.template-editer .select-background .tab-content { width: 100%; height: calc(100% - 81px); padding: 10px; position: relative; z-index: 2; }
.template-editer .select-background .tab-pane { height: 445px; overflow-x: hidden; overflow-y: auto; }
.template-editer .select-background .tab-pane.height-430 { height: 430px; }
.template-editer .select-background .tab-pane::-webkit-scrollbar { width: 2px; }
.template-editer .select-background .tab-pane::-webkit-scrollbar-track { background: var(--light_bg); }
.template-editer .select-background .tab-pane::-webkit-scrollbar-thumb { background: var(--gray); }
.template-editer .select-background .tab-pane::-webkit-scrollbar-thumb:hover { background: var(--gray); }
.template-editer .template-bg { display: inline-flex; flex-flow: wrap; flex-direction: row; width: 100%; }
.template-editer .not-in-tab { padding: 10px; }
.template-editer .template-bg img { width: calc((100% - 8px) / 2); height: auto; margin: 0px; margin-right: 8px; margin-bottom: 8px; cursor: pointer; }
.template-editer .template-bg img:nth-child(2n), .template-editer img:last-child { margin-right: 0px; }
.template-editer .template-bg .active { border: 2px solid var(--navi_blue); }
.template-editer .select-background .template-bg.color-bg { justify-content: space-between; }
.template-editer .select-background .sp-replacer { width: calc((100% - 8px) / 2); height: 50px; border-radius: 0px; border: none; margin-bottom: 8px; }
.template-editer .select-background .colorbox { display: inline-block; vertical-align: top; width: calc((100% - 8px) / 2); height: 50px; border: none; cursor: pointer; margin-bottom: 8px; }
.template-editer .editing-output { background-color: var(--white); padding: 20px; width: calc(100% - 550px); display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: center; align-items: flex-start; position: relative; -webkit-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 29%); -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); -ms-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); -o-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 29%); }
#mainImageElement { max-width: 100%; }
.template-editer .editing-option { width: 300px; }
.template-editer .whitebox { background-color: var(--white); margin-bottom: 20px; -webkit-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 29%); -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); -ms-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); -o-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29); box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 29%); }
.template-editer h6 { text-transform: capitalize; padding: 10px; background-color: #EFEFEF; margin: 0px; }
.template-editer h6 small { color: var(--gray); text-transform: capitalize; }
.template-editer h6 span { font-weight: 500; float: right; font-size: 80%; color: var(--black); text-transform: capitalize; }
.template-editer .optionsBox { padding: 10px; display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; width: 100%; }
.template-editer .whitebox button { font-size: 12px; line-height: 18px; color: #6AA9FF; text-transform: capitalize; font-weight: 500; border: 1px solid #6AA9FF; border-radius: 3px; padding: 8px 20px; width: auto; }
.template-editer .drag { display: block; font-size: 11px; line-height: 17px; color: var(--dark); }
.template-editer .progress { width: 100%; height: 6px; margin-top: 10px; }
.template-editer .img-thumbnails { width: 70px; height: 70px; background-color: var(--light_bg); border-radius: 3px; line-height: 50px; text-align: center; margin-right: 20px; }
.template-editer .img-thumbnails img { max-width: 100%; max-height: 100%; }
.template-editer .templateLogoElements .optionsBox { justify-content: space-between; }
.template-editer figure { width: 80px; height: 36px; background-color: var(--light_bg); border-radius: 3px; text-align: center; overflow: hidden; }
.template-editer figure img { max-width: 100%; max-height: 100%; }
.radioWrapper { width: 36px; height: 36px; background-color: #F8FAFF; border: 1px solid #707070; border-radius: 3px; position: relative; }
.radioWrapper .custom-radio { width: 8px; height: 8px; padding: 0px; margin: 0px; min-height: inherit; position: absolute; }
.radioWrapper .custom-radio.left-top { left: 2px; top: 2px; }
.radioWrapper .custom-radio.top-right { top: 2px; right: 4px; }
.radioWrapper .custom-radio.left-bottom { left: 2px; bottom: 4px; }
.radioWrapper .custom-radio.bottom-right { bottom: 4px; right: 4px; }
.radioWrapper .custom-radio .custom-control-label:before { left: 0px; top: 0px; width: 10px; height: 10px; border: none; background-color: #D2D2D2; }
.radioWrapper .custom-control-label::after { width: 10px; height: 10px; border-radius: 50%; left: 0px; top: 0px; }
.radioWrapper .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-color: #36B3FF; background-image: none; }
.radioWrapper input[type="radio"].place-decider { position: absolute; margin: 0px; cursor: pointer; }
.radioWrapper input[type="radio"].place-decider:first-child { left: 2px; top: 2px; }
.radioWrapper input[type="radio"].place-decider:nth-child(2) { left: 80%; top: -8px; }
.radioWrapper input[type="radio"].place-decider:nth-child(3) { left: -8px; bottom: -8px; }
.radioWrapper input[type="radio"].place-decider:nth-child(4) { left: 80%; bottom: -8px; }
.template-editer .save-share { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; padding-top: 10px; }
.template-editer .share .dropdown-toggle { width: 40px; height: 40px; background-color: var(--white); border: 1px solid #6AA9FF; border-radius: 50%; line-height: 38px; text-align: center; top: 2px; }
.template-editer .share .dropdown-toggle:after { display: none; }
.template-editer .share .dropdown-menu { background-color: var(--light_bg); border: none; }
.template-editer .share .dropdown-menu:before { content: ""; position: absolute; left: 14px; top: -6px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--light_bg); }
.template-editer .share .dropdown-item { font-size: 13px; line-height: 20px; color: var(--black); text-decoration: none; text-transform: capitalize; padding: 5px 20px; }
.template-editer .share .dropdown-item i { width: 30px; height: 30px; border: 1px solid var(--black); border-radius: 50%; font-size: 18px; line-height: 28px; text-align: center; margin-right: 5px; }
.template-editer .share .dropdown-item:hover, .template-editer .share .dropdown-item:hover i { color: var(--navi_blue); border-color: var(--navi_blue); }
.template-editer .download { width: calc(100% - 50px); display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; }
.template-editer .download .btn { font-size: 14px; line-height: 20px; padding: 8px 15px; position: relative; overflow: hidden; }
.template-editer .download .btn.disable { opacity: 0.3; pointer-events: none; cursor: not-allowed; }
.template-editer .download .btn-rev.disable { background-color: transparent; color: var(--black); border-color: var(--black); }
.template-editer .download .btn.disable img { pointer-events: all; }
.template-editer .download .btn.btn-hd, .template-editer .download .btn.btn-hd:focus { border-color: var(--primary); background-color: var(--white); color: var(--black); }
.template-editer .imagebox { padding: 10px; display: inline-flex; flex-flow: wrap; flex-direction: row; align-items: center; width: 100%; }
.template-editer .imagebox img { cursor: pointer; width: calc((100% - 24px) / 4); margin-right: 8px; margin-bottom: 8px; }
.template-editer .imagebox img:nth-child(4n) { margin-right: 0px; }
.template-editer .imagebox img.active { border: 2px solid var(--navi_blue); }
.template-editer .ranger { padding: 10px 20px; }
.template-editer .ranger span { font-size: 12px; line-height: 18px; color: var(--black); font-weight: 500; margin-bottom: 10px; display: block; }
.template-editer .range-wrap { position: relative; margin-bottom: 30px; }
.template-editer .range { width: 100%; }
.template-editer .bubble { max-width: 40px; text-align: center; min-width: 36px; background: var(--black); color: var(--white); padding: 4px; position: absolute; border-radius: 4px; top: 25px; left: 0px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
.template-editer .bubble::after { content: ""; position: absolute; width: 2px; height: 3px; background: var(--black); top: -2px; left: 50%; }
.photo-optimizer .back-btn { color: var(--black); margin-top: 30px; font-weight: 500; letter-spacing: 2px; text-transform: capitalize; font-size: 16px; text-decoration: none; }
.photo-optimizer .back-btn i { margin-right: 10px; }
.photo-optimizer .back-btn:hover { color: var(--primary); }
@media only screen and (min-width:1200px) {
    .photo-optimizer .container { max-width: 1170px; }
    .template-editer .select-background #flex-box { height: 100%; }
    .template-editer h6 { pointer-events: none; }
    .template-editer .not-in-tab { height: 570px; }
    .template-editer .select-background .tab-pane { height: 290px; }
    .template-editer .select-background .tab-pane.height-430 { height: 486px; }
}
@media only screen and (min-width:1330px) {
    .photo-optimizer .container { max-width: 1300px; }
    .template-editer .select-background .tab-pane { height: 378px; }
    .template-editer .select-background .tab-pane.height-430 { height: 616px; }
}
@media only screen and (min-width:1360px) {
    .photo-optimizer .container { max-width: 1330px; }
    .template-editer .not-in-tab { height: 720px; }
    .template-editer .select-background .tab-pane { height: 398px; }
    .template-editer .select-background .tab-pane.height-430 { height: 648px; }
}
@media only screen and (min-width:1400px) {
    .photo-optimizer .container { max-width: 1370px; }
    .template-editer .not-in-tab { height: 770px; }
    .template-editer .select-background .tab-pane { height: 425px; }
    .template-editer .select-background .tab-pane.height-430 { height: 688px; }
}
@media only screen and (max-width:1199.98px) {
    .photo-optimizer h5 { margin-bottom: 30px; }
    .photo-optimizer { padding: 50px 0px; }
    .template-editer .background-options { width: 100%; order: 2; margin-top: 20px; }
    .template-editer .editing-output { width: 100%; order: 1; }
    .template-editer .editing-option { width: 100%; order: 3; }
    .template-editer h6 { padding: 8px 20px; padding-right: 25px; background-color: var(--white); margin: 0px; font-size: 15px; line-height: 22px; color: var(--black); font-weight: 500; text-transform: uppercase; background-image: url('../images/design_templates/all_templates/arrow.png'); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; }
    .template-editer h6.active-acc { background-color: var(--light_bg); background-image: url('../images/design_templates/all_templates/uparrow.png'); }
    .template-editer .select-background { border: 1px solid #f5f5f5; -webkit-box-shadow: 0px 1px 2px 0px #cdd; -moz-box-shadow: 0px 1px 2px 0px #cdd; -ms-box-shadow: 0px 1px 2px 0px #cdd; -o-box-shadow: 0px 1px 2px 0px #cdd; box-shadow: 0px 1px 2px 0px #cdd; }
    .template-editer .select-background .dont-collapse-lg h6 { display: none; }
    .template-editer .select-background h6.collapse { display: block; }
    .template-editer .select-background .nav-tabs { margin: 0px; width: 100%; padding: 15px; flex-direction: row; justify-content: left; }
    .template-editer .select-background .nav-item { width: auto; margin-right: 20px; line-height: 0px; }
    .template-editer .select-background .nav-item:last-child { margin-right: 0px; }
    .template-editer .select-background .nav-link { font-size: 13px; line-height: 20px; padding: 2px 15px; border-radius: 20px; background-color: transparent; }
    .template-editer .select-background .nav-link.active, .template-editer .select-background .nav-item.show .nav-link { background-color: var(--navi_blue); color: var(--white); }
    .template-editer .select-background .tab-content { width: 100%; padding: 0px 15px 15px; box-shadow: none; }
    .template-editer .select-background .tab-pane { height: auto; }
    .template-editer .select-background .template-bg { height: 60px; max-height: inherit; width: 100%; max-width: 100%; flex-flow: nowrap; white-space: nowrap; overflow-y: hidden; overflow-x: auto; }
    .template-editer .select-background .template-bg.color-bg { display: block; flex-flow: nowrap; }
    .template-editer .select-background .template-bg::-webkit-scrollbar { height: 2px; }
    .template-editer .select-background .template-bg img { height: 60px; width: auto; margin: 0px; margin-right: 8px; }
    .template-editer .select-background .template-bg img:last-child { margin-right: 0px; }
    .template-editer .select-background .sp-replacer { width: 80px; height: 60px; }
    .template-editer .select-background .colorbox { width: 80px; height: 60px; margin: 0px; margin-left: 4px; }
    .template-editer .whitebox { margin-top: 20px; margin-bottom: 0px; border-radius: 0px; border: 1px solid #f5f5f5; -webkit-box-shadow: 0px 1px 2px 0px #cdd; -moz-box-shadow: 0px 1px 2px 0px #cdd; -ms-box-shadow: 0px 1px 2px 0px #cdd; -o-box-shadow: 0px 1px 2px 0px #cdd; box-shadow: 0px 1px 2px 0px #cdd; }
    .template-editer .optionsBox.collapse:not(.show) { display: none; }
    .template-editer .optionsBox { padding: 10px 25px; }
    .template-editer .save-share { padding-top: 20px; }
    .template-editer .download { width: auto; max-width: calc(100% - 40px); }
    .template-editer .download .btn { padding: 8px 30px; margin-right: 10px; }
    .template-editer .download .btn:last-child { margin-right: 0px; }
}
@media only screen and (max-width:991.98px) {
    .photo-optimizer { border-bottom: 1px solid #F5F5F5; }
    .photo-optimizer h1 { font-size: 36px; line-height: 42px; }
}
@media only screen and (max-width:767.98px) {
    .photo-optimizer { padding: 40px 0px; }
    .photo-optimizer h1 { font-size: 30px; line-height: 34px; margin-bottom: 10px; }
    .photo-optimizer .back a { font-size: 14px; line-height: 20px; height: auto; position: relative; }
    .photo-optimizer .back a img { height: 14px; margin-right: 3px; }
    .photo-optimizer h5 { font-size: 16px; line-height: 22px; }
    .template-editer .editing-output { padding: 10px; }
    .template-editer .download .btn { margin-right: 5px; }
}
@media only screen and (max-width:399.98px) {
    .template-editer h6 { padding: 8px 25px 8px 15px; }
    .template-editer .optionsBox { padding: 10px 25px 10px 15px; }
    .template-editer .download .btn { padding: 8px 16px; }
}
.lds-ring { display: inline-block; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 60px; height: 60px; margin: 8px; border: 5px solid var(--primary); border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: var(--primary) transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Twenty Twenty Slider -------------------------------------------------------*/
.vertical .before-handle, .vertical .after-handle { display: none; }
@media only screen and (max-width: 991.98px) {
    .before-handle, .after-handle { display: none; }
}

/* Development Css -------------------------------------------------------*/
.grecaptcha-badge { display: none !important; }


/* Onprem Sec 01 -------------------------------------------------------*/
.onprem-sec-01 { padding: 100px 0px; text-align: center;  }
.onprem-sec-01 h1 { margin-bottom: 30px; }
.onprem-sec-01 h1 span { display: block; font-size: 75%; font-weight: 500; }
.onprem-sec-01 h6 { color: #414141; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.16px; margin-bottom: 10px; }
.onprem-sec-01 h4 { font-weight: 400; max-width: 900px; margin: 0px auto; }
.onprem-sec-01 p { color: #414141; font-size: 20px; font-weight: 500; line-height: 32px; margin-top: 12px; }
.onprem-sec-01 .buttons { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.onprem-sec-01 .btn { border-radius: 60px; font-size: 20px; line-height: 28px; }
.onprem-sec-01 .btn img { height: 16px; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
.onprem-sec-01 .btn:hover img { -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -ms-transform: translateX(6px); -o-transform: translateX(6px); transform: translateX(6px); }
.onprem-sec-01 .col { display: inline-flex; flex-direction: column; gap: 16px; padding: 0px; }
.onprem-sec-01 .col span { display: block; color: #414141; font-size: 16px; font-weight: 500; line-height: 24px; }
.onprem-sec-01 .col span sup { font-size: 130%; color: var(--blue); padding-left: 8px; }
.onprem-sec-01 .mobileBtn { display: none; }
.onprem-sec-01 video { border: 2px solid #EEEEEE; border-radius: 32px; width: 100%; margin-top: 112px; }

@media only screen and (min-width: 1200px) {
    .onprem-sec-01 h1 { color: #454545; font-size: 48px; line-height: 64px; margin-bottom: 48px; }
    .onprem-sec-01 h4 { color: #454545; font-size: 24px; line-height: 36px; }
    .onprem-sec-01 .btn { font-size: 24px; line-height: 32px; }
}
@media only screen and (min-width: 992px) {
    .onprem-sec-01 .container { max-width: 1000px; }
}
@media only screen and (max-width: 991.98px) {
    .onprem-sec-01 { padding-bottom: 70px; text-align: center; position: relative; z-index: 4; }
    .onprem-sec-01 video { margin-top: 90px; }
}
@media only screen and (max-width: 991.98px) {
    .onprem-sec-01 { padding: 50px 0px 0px; }
    .onprem-sec-01 .appBtns .col { display: none; }
    .onprem-sec-01 .mobileBtn { display: inline-flex; }
}
@media only screen and (max-width: 767.98px) {
    .onprem-sec-01 { padding: 30px 0px 0px; }
    .onprem-sec-01 h1 { font-size: 24px; line-height: 36px; margin-bottom: 24px; }
    .onprem-sec-01 h4 { font-size: 18px; line-height: 28px; }
    .onprem-sec-01 p { font-size: 16px; line-height: 24px; }
    .onprem-sec-01 video { border-radius: 12px; margin-top: 48px; }
    .onprem-sec-01 .buttons { margin-top: 40px; gap: 8px; }
    .onprem-sec-01 .btn { border-radius: 8px; width: calc((100% - 8px) / 2); padding: 4px; height: 44px; font-size: 14px; line-height: 20px; }
    .onprem-sec-01 .btn.fullBtn { border-radius: 32px; font-size: 18px; line-height: 26px; height: 52px; max-width: 370px; width: 100%; }
    .onprem-sec-01 .btn img { display: none; }
}


/* Onprem Sec 02 -------------------------------------------------------*/
.onprem-sec-02 {  padding: 120px 0px 100px; }
.onprem-sec-02 ul { display: flex; flex-wrap: wrap; gap: 70px; margin-top: 100px; }
.onprem-sec-02 li { width: calc((100% - 210px) / 4); text-align: center; }
.onprem-sec-02 li img { max-width: 100%; max-height: 110px; }
.onprem-sec-02 li h5 { margin-top: 44px; }
.onprem-sec-02 li p { margin-top: 16px; }
@media only screen and (max-width: 1024px) {
    .onprem-sec-02 { padding: 90px 0px; }
    .onprem-sec-02 ul { margin-top: 70px; gap: 48px; }
    .onprem-sec-02 li { width: calc((100% - 48px) / 2); text-align: left; position: relative; padding-left: 50px; }
    .onprem-sec-02 li:before { content: ""; position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; background-image: url('../images/onpremise/icon-check.svg'); background-repeat: no-repeat; background-position: center; background-size: 100%; }
    .onprem-sec-02 li img { display: none; }
    .onprem-sec-02 li h5 { margin-top: 0px; }
}
@media only screen and (max-width: 991.98px) {
    .onprem-sec-02 {  padding: 70px 0px; }
    .onprem-sec-02 ul { gap: 32px; margin-top: 50px; }
    .onprem-sec-02 li { width: calc((100% - 32px) / 2); }
}
@media only screen and (max-width: 767.98px) {
    .onprem-sec-02 {  padding: 50px 0px; }
    .onprem-sec-02 ul { margin-top: 40px; }
    .onprem-sec-02 li { padding-left: 40px; width: 100%; }
    .onprem-sec-02 li:before { top: 2px; width: 26px; height: 26px; }
    .onprem-sec-02 li p { margin-top: 12px; }
}


/* Onprem Sec 03 -------------------------------------------------------*/
.onprem-sec-03 {  padding: 100px 0px; }
.onprem-sec-03 .mainTab { border: 1px solid #F3F3F3; border-radius: 50px; padding: 8px; justify-content: space-between; margin-top: 70px; }
.onprem-sec-03 .mainTab .nav-link { border: none; border-bottom: none; border-radius: 40px; background-color: var(--white); height: 48px; padding: 10px 18px; }
.onprem-sec-03 .mainTab .nav-link.active, 
.onprem-sec-03 .mainTab .nav-item.show .nav-link { background-color: var(--primary); color: var(--white); }
.onprem-sec-03 .mainTabContent > .tab-pane.active { display: flex; }
.onprem-sec-03 .mainTabContent > .tab-pane { flex-wrap: wrap; justify-content: space-between; }
.onprem-sec-03 .subTab,
.onprem-sec-03 .subTabContent { border: none; width: calc((100% - 90px) / 2); gap: 0px; margin: 0px; display: block; }
.onprem-sec-03 .subTab .nav-item { margin-bottom: 24px; width: 100%; }
.onprem-sec-03 .subTab .nav-item:last-child { margin-bottom: 0px; }
.onprem-sec-03 .subTab .nav-link { background: var(--white); border: none; height: auto; color: #121212; font-size: 18px; font-weight: 500; line-height: 26px; justify-content: flex-start; gap: 12px; text-align: left; padding: 0px; padding-right: 50px; position: relative; width: 100%; }
.onprem-sec-03 .subTab .nav-link strong { font-weight: 500; }
.onprem-sec-03 .subTab .nav-link .icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background-color: var(--white); -webkit-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.08); width: 64px; height: 64px; line-height: 0px; display: inline-flex; align-items: center; justify-content: center; }
.onprem-sec-03 .subTab .nav-link.active { color: #121212; }
.onprem-sec-03 .subTab .nav-link.active svg.stroke path { stroke: #0F5DDF; }
.onprem-sec-03 .subTab .nav-link.active svg.fill path { fill: #0F5DDF; }
.onprem-sec-03 .subTab .nav-link .text { display: none; white-space: normal; font-weight: 400; }
.onprem-sec-03 .subTabContent img,
.onprem-sec-03 .subTabContent video { border-radius: 12px; max-width: 100%; }
@media only screen and (max-width: 1199.98px) {
    .onprem-sec-03 {  padding: 90px 0px; }
    .onprem-sec-03 .subTab, .onprem-sec-03 .subTabContent { width: calc((100% - 24px) / 2); }
}
@media only screen and (max-width: 991.98px) {
    .onprem-sec-03 {  padding: 70px 0px; }
    .onprem-sec-03 .mainTab { border: none; border-radius: 0px; padding: 0px; margin-top: 60px; margin-bottom: 44px; overflow: visible; white-space: normal; display: flex; gap: 8px; justify-content: center; }
    .onprem-sec-03 .mainTab .nav-item { margin: 0px; }
    .onprem-sec-03 .mainTab .nav-link { background-color: #f5f5f5; font-size: 16px; line-height: 24px; font-weight: 500; padding: 6px 24px; border-radius: 6px; }
    .onprem-sec-03 .mainTab .nav-link.active, 
    .onprem-sec-03 .mainTab .nav-item.show .nav-link { background-color: var(--secondary); }
    .onprem-sec-03 .mainTabContent { border: none; border-radius: 0px; box-shadow: none; padding: 0px; }
    .onprem-sec-03 .subTab { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 32px; }
    .onprem-sec-03 .subTab .nav-item { width: calc((100% - 32px) / 2); margin: 0px; }
    .onprem-sec-03 .subTab .nav-link { border: 3px solid #edf0f2; border-radius: 16px; color: #596169; font-size: 16px; line-height: 24px; cursor: default; padding: 32px 32px 48px; flex-direction: column; align-items: flex-start; gap: 0px; height: 100%; }
    .onprem-sec-03 .subTab .nav-link .icon { background-color: transparent; width: auto; height: auto; margin-bottom: 16px; }
    .onprem-sec-03 .subTab .nav-link svg { height: 40px; width: 40px; }
    .onprem-sec-03 .subTab .nav-link strong { font-weight: 600; }
    .onprem-sec-03 .subTab .nav-link.active { color: #596169; }
    .onprem-sec-03 .subTab .nav-link.active .icon { background-color: transparent; }
    .onprem-sec-03 .subTab .nav-link svg.stroke path,
    .onprem-sec-03 .subTab .nav-link.active svg.stroke path { stroke: #454545; }
    .onprem-sec-03 .subTab .nav-link svg.fill path,
    .onprem-sec-03 .subTab .nav-link.active svg.fill path { fill: #454545; }
    .onprem-sec-03 .subTab .nav-link .text { display: inline; }
    .onprem-sec-03 .subTabContent { display: none; }
}
@media only screen and (max-width: 767.98px) {
    .onprem-sec-03 {  padding: 50px 0px; }
    .onprem-sec-03 .mainTab { padding: 0px 20px 2px; margin: 50px -20px 36px; justify-content: flex-start; }
    .onprem-sec-03 .mainTab .nav-link { height: 44px; font-size: 16px; line-height: 24px; font-weight: 500; }
    .onprem-sec-03 .subTab { padding: 0px; gap: 24px; }
    .onprem-sec-03 .subTab .nav-item { margin: 0px; width: 100%; }
}


/* Onprem Sec 04 -------------------------------------------------------*/
.onprem-sec-04 { padding: 70px 0px; }
.onprem-sec-04 .wrapper { border-radius: 24px; -webkit-box-shadow: 0px 0px 10px 0px #ddd; -moz-box-shadow: 0px 0px 10px 0px #ddd; -ms-box-shadow: 0px 0px 10px 0px #ddd; -o-box-shadow: 0px 0px 10px 0px #ddd; box-shadow: 0px 0px 10px 0px #ddd; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 50px; }
.onprem-sec-04 aside { width: 48%; }
.onprem-sec-04 ul { margin-top: 20px; max-height: 570px; overflow-x: hidden; overflow-y: auto; padding-right: 10px; }
.onprem-sec-04 ul::-webkit-scrollbar { width: 6px; }
.onprem-sec-04 ul::-webkit-scrollbar-track { background: var(--white); }
.onprem-sec-04 ul::-webkit-scrollbar-thumb { background: #DDDDDD; }
.onprem-sec-04 li { font-size: 16px; line-height: 26px; color: var(--dark); background-image: url('../images/icon-tick-square.svg'); background-repeat: no-repeat;
    background-position: 0px 1px; background-size: 24px; padding-left: 30px; margin-bottom: 24px; margin-bottom: 20px; }
.onprem-sec-04 li:last-child { margin-bottom: 0px; }
.onprem-sec-04 li img { max-width: 30px; margin-right: 16px; }
.onprem-sec-04 img { max-width: 100%; border-radius: 16px; }
.onprem-sec-04 h2 sup { display: inline-block; vertical-align: middle; font-size: 50%; font-weight: 500; padding-right: 4px; }
.onprem-sec-04 h2 span { display: inline-block; vertical-align: middle; font-size: 50%; font-weight: 400; padding-left: 10px; }
.onprem-sec-04 .calendly-inline-widget { width: 100%; height: 832px; border-radius: 16px; overflow: hidden; background-color: #F7F7F7; border: 1px solid #ddd; }
@media only screen and (max-width:991.98px) {
    .onprem-sec-04 { padding: 50px 0px; }
    .onprem-sec-04 .wrapper { gap: 42px; }
    .onprem-sec-04 aside { width: 100%; }
    .onprem-sec-04 ul { height: auto; max-height: inherit; }
}
@media only screen and (max-width: 767.98px) {
    .onprem-sec-04 .wrapper { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; padding: 0px; }
}


/* Onprem Sec 05 -------------------------------------------------------*/
.onprem-sec-05 { background-color: #FBFBFB; padding: 120px 0px; }
.onprem-sec-05 span { display: block; }
.onprem-sec-05 ul { margin-top: 24px; }
.onprem-sec-05 ul > li { margin-bottom: 24px; font-weight: 600; }
.onprem-sec-05 ul > li:last-child { margin-bottom: 0px; }
.onprem-sec-05 ul ul { list-style: inside; margin-top: 10px; padding-left: 20px; }
.onprem-sec-05 li > ul > li { margin-bottom: 2px; font-weight: 400; }
.onprem-sec-05 li h6 { font-weight: 600; }
@media only screen and (max-width: 1799.98px) {
    .onprem-sec-05 { padding: 90px 0px; }
}
@media only screen and (max-width: 991.98px) {
    .onprem-sec-05 { background-color: var(--white); padding: 70px 0px; }
    .onprem-sec-05 ul { margin-top: 12px; }
}
@media only screen and (max-width: 767.98px) {
    .onprem-sec-05 { padding: 50px 0px; }
}


/* Onprem Sec 06 -------------------------------------------------------*/
.onprem-sec-06 { position: relative; overflow: hidden; text-align: center; padding: 120px 0px; }
.onprem-sec-06 h2 { margin-bottom: 16px; }
.onprem-sec-06 h6 { max-width: 800px; margin: 0px auto; }
.onprem-sec-06 .nav-tabs { border-bottom: 1px solid #ddd; margin-top: 70px; gap: 38px; }
.onprem-sec-06 .nav-tabs .nav-link { background-color: var(--white); border: none; border-bottom: 4px solid transparent; border-radius: 0px; padding: 10px 18px; }
.onprem-sec-06 .nav-tabs .nav-link.active, .onprem-sec-06 .nav-tabs .nav-item.show .nav-link { border-bottom-color: var(--primary); }
.onprem-sec-06 .tab-content { max-width: 950px; height: 523px; background-color: var(--light_bg); border-radius: 16px; margin: 0 auto; }
.onprem-sec-06 .twentytwenty-container { border-radius: 16px; }
.onprem-sec-06 .twentytwenty-container img { width: 950px; height: 523px; background-image: url(../images/sample/transparent-bg.svg); background-repeat: repeat; background-position: 0px 0px; background-size: 20px; background-color: #F9F9F9; }
@media only screen and (max-width:1799.98px) {
    .subheading { font-size: 16px; line-height: 26px; }
    .onprem-sec-06 { padding: 80px 0px; }
}
@media only screen and (max-width:1199.98px) {
    .onprem-sec-06 { padding: 90px 0px; }
    .onprem-sec-06 .nav-tabs { gap: 2px; }
}
@media only screen and (max-width:991.98px) {
    .onprem-sec-06 { padding: 70px 0px; }
    .onprem-sec-06 .nav-tabs { display: block; white-space: nowrap; margin: 50px -20px 36px; overflow-y: hidden; overflow-x: auto; gap: 24px; -ms-overflow-style: none; scrollbar-width: none; }
    .onprem-sec-06 .nav-tabs .nav-item { display: inline-block; margin-right: 24px; }
    .onprem-sec-06 .nav-tabs::-webkit-scrollbar { display: none; }
    .onprem-sec-06 .nav-tabs .nav-item:last-child { margin-right: 0px; }
    .onprem-sec-06 .tab-content { max-width: 650px; height: 358px; }
    .onprem-sec-06 .twentytwenty-container img { width: 650px; height: 358px; }
    .onprem-sec-06 .btn { margin-top: 40px; padding: 14px; }
}
@media only screen and (max-width:767.98px) {
    .onprem-sec-06 { padding: 50px 0px; }
    .onprem-sec-06 .nav-tabs { border: none; margin: 40px -20px 36px; }
    .onprem-sec-06 .nav-tabs .nav-item { margin-right: 6px; }
    .onprem-sec-06 .nav-tabs .nav-link { background-color: #f5f5f5; height: 44px; font-size: 16px; font-weight: 500; line-height: 24px; border: none; border-radius: 6px; }
    .onprem-sec-06 .nav-tabs .nav-link.active, 
    .onprem-sec-06 .nav-tabs .nav-item.show .nav-link { background-color: var(--secondary); color: var(--white); }
    .onprem-sec-06 .tab-content { max-width: 476px; height: 262px; }
    .onprem-sec-06 .twentytwenty-container img { width: 476px; height: 262px; }
}
@media only screen and (max-width: 575.98px) {
    .onprem-sec-06 .tab-content { max-width: 400px; height: 220px; }
    .onprem-sec-06 .twentytwenty-container img { width: 400px; height: 220px; }
    .onprem-sec-06 .btn { width: 100%; }
}
@media only screen and (max-width: 479.98px) {
    .onprem-sec-06 .tab-content { max-width: 360px; height: 198px; }
    .onprem-sec-06 .twentytwenty-container img { width: 360px; height: 198px; }
    .onprem-sec-06 .btn { margin-top: 32px; }
}
@media only screen and (max-width: 399.98px) {
    .onprem-sec-06 .tab-content { max-width: 335px; height: 184px; }
    .onprem-sec-06 .twentytwenty-container img { width: 335px; height: 184px; }
}
@media only screen and (max-width:374.98px) {
    .onprem-sec-06 .tab-content { max-width: 320px; height: 176px; }
    .onprem-sec-06 .twentytwenty-container img { width: 320px; height: 176px; }
}

/* Onprem Sec 08 -------------------------------------------------------*/
.onprem-sec-08 {  display: flex; flex-wrap: wrap; background-color: var(--white); height: calc(100vh - 98px); }
.onprem-sec-08 aside { width: 50%; padding: 50px 80px; height: 100%; }
.onprem-sec-08 .centerArea { width: 500px; overflow: hidden; }
.onprem-sec-08 aside:first-child { overflow-x: hidden; overflow-y: auto; }
.onprem-sec-08 aside:first-child::-webkit-scrollbar { width: 6px; }
.onprem-sec-08 aside:first-child::-webkit-scrollbar-track { background: var(--white); }
.onprem-sec-08 aside:first-child::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 24px; }
.onprem-sec-08 aside:first-child .centerArea { margin-left: auto; }
.onprem-sec-08 aside:last-child { background-color: #FBFBFB; display: flex; align-items: center; justify-content: center; }
.onprem-sec-08 h1 { font-size: 36px; line-height: 48px; }
.onprem-sec-08 h1 span { color: var(--primary); }
.onprem-sec-08 h6 { margin-top: 12px; }
.onprem-sec-08 .swiper-slide { flex-shrink: 0; transition: all 0.5s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; position: relative; }
.onprem-sec-08 .swiper-slide.swiper-slide-active { z-index: 3; }
.onprem-sec-08 .swiper-slide img, .onprem-sec-08 .swiper-slide video { display: block; border-radius: 12px; width: 100%; }
.onprem-sec-08 .swiper-slide h3 { font-size: 30px; line-height: 38px; text-align: center; margin-top: 24px; }
.onprem-sec-08 .swiper-pagination { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); margin-top: 44px; z-index: 10; }
.onprem-sec-08 .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background-color: #DDDDDD; }
.onprem-sec-08 .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--blue); }

@media only screen and (max-width: 1299.98px) {
    .onprem-sec-08 aside { padding: 50px; }
}
@media only screen and (max-width: 1199.98px) {
    .onprem-sec-08 aside { padding: 50px 40px; }
    .onprem-sec-08 .centerArea { width: 450px; }
}
@media only screen and (max-width: 1099.98px) {
    .onprem-sec-08 aside { padding: 50px 32px; }
    .onprem-sec-08 .centerArea { width: 400px; }
}
@media only screen and (max-width: 992.98px) {
    .onprem-sec-08 aside { padding: 50px 32px; width: 100%; overflow: visible; }
    .onprem-sec-08 aside:last-child { display: none; }
    .onprem-sec-08 .centerArea { width: 500px; margin: 0 auto; }
    .onprem-sec-08 h1 { font-size: 30px; line-height: 40px; margin-top: 20px; }
}
@media only screen and (max-width: 767.98px) {
    .onprem-sec-08 aside { padding: 40px 24px; }
    .onprem-sec-08 .centerArea { width: 100%; }
    .onprem-sec-08 h1 { font-size: 24px; line-height: 36px; margin-top: 6px; }
}

/* Congratulations -------------------------------------------------------*/
.congratulations { padding: 70px 32px; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; background-image: url('../images/background-image.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.congratulations .box { border-radius: 12px; background: var(--white); max-width: 640px; padding: 56px 32px; -webkit-box-shadow: 4px 10px 20px 0px rgba(36, 104, 147, 0.04); -moz-box-shadow: 4px 10px 20px 0px rgba(36, 104, 147, 0.04); -ms-box-shadow: 4px 10px 20px 0px rgba(36, 104, 147, 0.04); -o-box-shadow: 4px 10px 20px 0px rgba(36, 104, 147, 0.04); box-shadow: 4px 10px 20px 0px rgba(36, 104, 147, 0.04); }
.congratulations img { max-width: 320px; margin: 0 auto 50px; }
.congratulations h1 { margin-bottom: 30px; }
.congratulations p { margin: 0px; }
.congratulations .btn { margin-top: 50px; }
.congratulations.reply img { max-width: 250px; }
.congratulations .box figure { width: 120px; height: 120px; border: 4px solid var(--green); border-radius: 50%; margin: 0px auto 30px; display: flex; align-items: center; justify-content: center; }
.congratulations .box figure img { margin: 0px; }
.congratulations .middle-box { max-width: 600px; margin: 30px auto 0px; }
.congratulations .middle-box h6 { margin-bottom: 20px; }
.congratulations .social { margin-top: 15px; }
.congratulations .social a { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray); width: 36px; height: 36px; border-radius: 30px; background-color: transparent; border: 1px solid var(--gray); text-align: center; overflow: hidden; margin-right: 5px; }
.congratulations .social a:hover { border-color: var(--primary); background-color: var(--primary); color: var(--white); }
@media only screen and (max-width:1199.98px) {
    .congratulations { padding: 60px 15px; }
}
@media only screen and (max-width:991.98px) {
    .congratulations { padding: 50px 15px; }
    .congratulations .box figure { width: 80px; height: 80px; border-width: 2px; }
}
@media only screen and (max-width:767.98px) {
    .congratulations { padding: 0px; background-image: none; background-color: var(--white); align-items: flex-start; }
    .congratulations .box { padding: 50px 24px; box-shadow: none; max-width: 100%; }
    .congratulations img { margin-bottom: 40px; }
    .congratulations h1 { margin-bottom: 20px; }
    .congratulations img { max-width: 280px; margin: 0 auto 40px; }
    .congratulations .btn { width: 100%; height: 50px; font-size: 16px; line-height: 24px; font-weight: 500; }
}
@media only screen and (max-width:479.98px) {
    .congratulations img { margin-bottom: 36px; }
    .congratulations h1 { margin-bottom: 16px; }
}


/* Enterprise Section 03 -------------------------------------------------------*/
.enterpriseSec02 { padding: 100px 0px 90px; }
.enterpriseSec02 h2 { text-align: center; max-width: 900px; margin: 0px auto; }
.enterpriseSec02 h6 { font-size: 20px; line-height: 28px; text-align: center; max-width: 900px; margin: 24px auto 0px; }
.enterpriseSec02 ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; row-gap: 32px; margin-top: 70px; }
.enterpriseSec02 li { border-radius: 24px; background: var(--white); -webkit-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 32px; padding-left: 100px; position: relative; width: calc((100% - 48px) / 3); }
.enterpriseSec02 ul.col02 li { width: calc((100% - 24px) / 2); }
.enterpriseSec02 img { position: absolute; left: 32px; top: 32px; width: 50px; }
.enterpriseSec02 figure { background-color: var(--primary); border-radius: 50%; color: #EAE5FF; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; line-height: normal; position: absolute; left: 32px; top: 32px; height: 50px; width: 50px; }
.enterpriseSec02 p { margin-top: 12px; }

@media only screen and (max-width: 1799.98px) {
    .enterpriseSec02 { padding: 90px 0px; }
    .enterpriseSec02 ul { margin-top: 50px; }
}
@media only screen and (max-width: 1599.98px) {
    .enterpriseSec02 { zoom:  0.9; }
}
@media only screen and (max-width: 1199.98px) {
    .enterpriseSec02 { zoom:  1; }
}
@media only screen and (max-width: 1199.98px) {
    .enterpriseSec02 ul { gap: 48px; justify-content: flex-start; }
    .enterpriseSec02 li { width: calc((100% - 48px) / 2); -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; padding: 0px; padding-left: 50px; }
    .enterpriseSec02 img, .enterpriseSec02 figure { height: 36px; width: 36px; top: 0px; left: 0px; font-size: 18px; }
}
@media only screen and (max-width: 991.98px) {
    .enterpriseSec02 { padding: 70px 0px; }
    .enterpriseSec02 h6 { font-size: 16px; line-height: 24px; }
}
@media only screen and (max-width: 767.98px) {
    .enterpriseSec02 { padding: 50px 0px; }
    .enterpriseSec02 ul { gap: 32px; }
    .enterpriseSec02 h6 { margin-top: 16px; }
    .enterpriseSec02 li, .enterpriseSec02 ul.col02 li { width: 100%; }
}


/* Enterprise Section 04 -------------------------------------------------------*/
.enterprise-section-04 { padding: 50px 0px; background-color: #001C5C; }
@media only screen and (max-width:767.98px) {
    .enterprise-section-04 { padding: 40px 0px; }
}

/* Checkout Page -------------------------------------------------------*/
.checkoutWrap { width: 100%; height: 100%; padding: 40px 0px; }
.checkoutWrap .container { display: flex; flex-flow: wrap; flex-direction: row; align-items: center; justify-content: space-between; height: 100%; }
.checkoutWrap .purchaseDetails { width: 460px; padding: 0px 20px; max-height: 100%; background-color: var(--white); max-width: 100%; overflow-y: auto; }
.checkoutWrap .purchaseDetails::-webkit-scrollbar { width: 6px; }
.checkoutWrap .purchaseDetails::-webkit-scrollbar-track { background-color: #f7f7f7; -webkit-border-radius: 24px; border-radius: 24px; }
.checkoutWrap .purchaseDetails::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #dddddd; }
.checkoutWrap .checkoutForm { background-color: #dbdbe4; background-image: linear-gradient(90deg, #f8f8ff, #f5f0ff, #fff2e2); width: calc(100% - 570px); max-height: 100%; overflow-y: auto; border-radius: 24px; }
.checkoutWrap .checkoutForm::-webkit-scrollbar { width: 6px; }
.checkoutWrap .checkoutForm::-webkit-scrollbar-track { background-color: #f7f7f7; -webkit-border-radius: 0px; border-radius: 0px; }
.checkoutWrap .checkoutForm::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #dddddd; }
.checkoutWrap .checkout-container { width: 100%; max-width: 100%; padding: 40px; margin: auto; }
.checkoutWrap .logo { display: block; vertical-align: top; max-width: 200px; max-height: 64px; margin-bottom: 20px; }
.checkoutWrap .logo.infinity { margin: 0px auto 30px; }
.checkoutWrap h6 { margin-bottom: 10px; }
.checkoutWrap h6 span { color: var(--navi_blue); font-weight: 600; }
.checkoutWrap h1 { font-size: 20px; line-height: 30px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.checkoutWrap h5 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--dark); }
.checkoutWrap h5 span { font-size: 14px; font-weight: 400; font-weight: 600; color: var(--dark); }
.checkoutWrap h5 small { font-size: 14px; line-height: 22px; font-weight: 400; color: #001C5C; display: block; }
.checkoutWrap ul { padding: 0px; position: relative; margin-top: 60px; }
.checkoutWrap ul li { background-image: url(../images/check.png); background-repeat: no-repeat; background-position: 2px 1px; background-size: 20px; padding-left: 32px; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--dark); margin-bottom: 30px; position: relative; z-index: 4; }
.checkoutWrap ul li:last-child { margin-bottom: 0px; }
.checkoutWrap ul li strong { font-weight: 600; }
.checkoutWrap ul li span { font-weight: 400; text-decoration: none; border-bottom: 1px dotted #ccc; }
.checkoutWrap table { width: 100%; border-radius: 12px; -webkit-box-shadow: 0px 0px 10px 0px #ddd; -moz-box-shadow: 0px 0px 10px 0px #ddd; -ms-box-shadow: 0px 0px 10px 0px #ddd; -o-box-shadow: 0px 0px 10px 0px #ddd; box-shadow: 0px 0px 10px 0px #ddd; }
.checkoutWrap table td { padding: 0px 20px 12px; font-size: 14px; line-height: 28px; color: var(--dark); }
.checkoutWrap table td:last-child { text-align: right; }
.checkoutWrap table tr:first-child td { padding: 20px 20px 12px; }
.checkoutWrap table #subtotal, .checkoutWrap table #tax { font-size: 18px; line-height: 28px; }
.checkoutWrap table tr:last-child td:first-child { font-size: 24px; line-height: 30px; font-weight: 700; }
.checkoutWrap table tr:last-child td { padding: 16px 20px; border-top: 1px solid #888888; }
.checkoutWrap table #total { font-size: 24px; line-height: 30px; font-weight: 700; }
.checkoutWrap table a { display: inline-block; vertical-align: baseline; font-size: 13px; font-weight: 400; color: var(--navi_blue); display: inline-block; text-decoration: none; }
.checkoutWrap table a:hover { color: var(--primary); }
.checkoutWrap .dropdownTrigger { display: none; }
.checkoutWrap .dropdownTrigger:after { content: "\f107"; font-family: FontAwesome; margin-left: 10px; display: inline-block; }
.checkoutWrap .dropdownTrigger[aria-expanded="true"]:after { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); }
.checkout-container h3 { width: 100%; max-width: 643px; padding: 0px 13px ; margin: 0px; }
.checkoutWrap .pricingBlock { display: none }
.checkoutWrap .loader { text-align: center; }
.checkoutWrap .loader img { max-width: 50px; }
.checkoutWrap .black-fliday-sale { margin-bottom: 20px; justify-content:flex-start; }
.checkoutWrap .black-fliday-sale div { border-radius: 8px; text-align: left; font-size: 16px; padding: 8px 16px; }


@media only screen and (max-width: 1499px) {
    .checkoutWrap .checkoutForm { width: calc(100% - 480px); }
}
@media only screen and (max-width:991.98px) {
    .checkoutWrap { display: block; padding: 84px 0px 12px; height: auto; }
    .checkoutWrap .container { align-items: flex-start; height: auto; }
    .checkoutWrap .purchaseDetails { position: fixed; left: 0px; top: 0px; width: 100%; background-color: var(--white); padding: 0px; -webkit-box-shadow: 0px 0px 6px 1px #ddd; -moz-box-shadow: 0px 0px 6px 1px #ddd; -ms-box-shadow: 0px 0px 6px 1px #ddd; -o-box-shadow: 0px 0px 6px 1px #ddd; z-index: 9; }
    .checkoutWrap .phoneFixed { display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 530px; margin: 0 auto; padding: 15px; }
    .checkoutWrap .logo { display: none; }
    .checkoutWrap .dropdownTrigger { display: block; }
    .checkoutWrap .phoneCollapse { width: 100%; max-width: 500px; margin: 0 auto; padding: 20px; border-top: 1px solid #ddd; }
    .checkoutWrap h1, .checkoutWrap ul { display: none; }
    .checkoutWrap h2 { font-size: 20px; line-height: 26px; font-weight: 500; margin-bottom: 12px; }
    .checkoutWrap h5 { font-size: 16px; line-height: 22px; }
    .checkoutWrap h5 span { font-size: 13px; }
    .checkoutWrap table td { font-size: 13px; line-height: 20px; }
    .checkoutWrap table tr:last-child td { border-bottom: none; }
    .checkoutWrap table tr:last-child td:first-child { font-size: 20px; }
    .checkoutWrap table #total { font-size: 20px; }
    .checkoutWrap .checkoutForm { padding: 0px; width: 100%; max-width: 500px; margin: 0 auto; overflow: hidden; height: auto; }
    .checkoutWrap .checkout-container {  }
    .checkout-container h3 { margin-bottom: 0px; }
    .checkoutWrap .black-fliday-sale { justify-content: center; }
}
@media only screen and (max-width: 767.98px) {
    .checkoutWrap .checkoutForm { border-radius: 0px; }
    .checkoutWrap .checkout-container { padding: 0px; background-color: var(--white); background-image: none; }
}
@media only screen and (max-width:399.98px) {
    .checkoutWrap h5 small { display: block; margin: 0px; font-size: 14px; line-height: 20px; }
}


/* Infinity Section 01 -------------------------------------------------------*/
.infinity-sec-01 { padding: 100px 0px; position: relative; }
.infinity-sec-01 h1 {color: #233d62; font-weight: 800; margin-top: 24px; }
.infinity-sec-01 h1 span { color: var(--primary); }
.infinity-sec-01 h4 { color: #233d62; font-weight: 800; }
.infinity-sec-01 .subText { font-size: 18px; line-height: 26px; color: #233d62; font-weight: 600; display: block; }
.infinity-sec-01 h6 { font-size: 14px; line-height: 20px; text-transform: uppercase; color: var(--blue); font-weight: 600; position: relative; display: inline-block; }
.infinity-sec-01 h6 img { position: absolute; right: -32px; top: 3px; height: 70px; }
.infinity-sec-01 .keyFeatures { margin: 40px 0px; }
.infinity-sec-01 .keyFeatures li { font-size: 18px; line-height: 24px; color: #233d62; font-weight: 500; padding-left: 36px; background-image: url('../images/infinity-app/checked.svg'); background-repeat: no-repeat; background-size: 24px; margin-bottom: 16px; }
.infinity-sec-01 .keyFeatures li:last-child { margin-bottom: 0px; }
.infinity-sec-01 figure { background-image: linear-gradient(to bottom, #A1B6D3, transparent); border-radius: 16px; padding: 10px; border: 1px solid #6986af; margin-left: 40px; }
.infinity-sec-01 video { max-width: 100%; display: block; }
.infinity-sec-01 .dropdown { margin-top: 40px; z-index:5;}
.infinityAppDropdown .dropdown-toggle:after { display:none; }
.infinityAppDropdown .dropdown-menu { background-color: var(--dark); border-radius: 12px; width: 260px; padding: 10px; margin: 12px 0px; position: absolute; top: calc(100% + 12px); position: relative; }
.infinityAppDropdown .dropdown-toggle:after { display: none; }
.infinityAppDropdown .dropdown-menu button { display: inline-flex; width: 100%; align-items: center; gap: 12px; padding: 20px; font-size: 16px; line-height: 22px; color: var(--white); border-radius: 12px; }
.infinityAppDropdown .dropdown-menu button:hover { background-color: var(--black); }
.infinityAppDropdown .dropdown-menu img { width: 20px; }
.infinityAppDropdown .dropdown-menu span span { font-size: 13px; color: var(--primary); }
@media only screen and (max-width: 1399.98px) {
    .infinity-sec-01 { padding: 80px 0px; }
    .infinity-sec-01 h1 { font-size: 44px; line-height: 56px; }
}
@media only screen and (max-width: 991.98px) {
    .infinityButtonGroup .btnSecondary { font-size: 14px; line-height: 20px; padding: 6px 20px; }
    .infinity-sec-01 { padding: 50px 0px 70px; }
    .infinity-sec-01 h1 { font-size: 36px; line-height: 44px; }
    .infinity-sec-01 .keyFeatures { margin: 30px 0px; }
    .infinity-sec-01 .keyFeatures li { font-size: 16px; line-height: 22px; padding-left: 32px; background-size: 18px; background-position:0px 2px; }
}
@media only screen and (max-width: 767.98px) {
    .infinityButtonGroup .btnSecondary { font-size: 12px; line-height: 18px; }
    .infinity-sec-01 h1 { font-size: 30px; line-height: 38px; }
    .infinity-sec-01 .dropdown { margin-top: 30px; }
    .infinity-sec-01 h4, .infinity-sec-01 .subText { display: none; }
    .infinity-sec-01 .keyFeatures { margin: 20px 0px 30px; }
    .infinity-sec-01 .keyFeatures li { font-size: 14px; line-height: 20px; padding-left: 28px; background-size: 16px; }
    .infinity-sec-01 h6 img { display: none; }
}
@media only screen and (max-width: 374.98px) {
    .infinity-sec-01 .subText { font-size: 16px; line-height: 24px; }
    .infinity-sec-01 h6 {
        display: inline-block;
    }
}


/* Login Popup Modal -------------------------------------------------------*/
#loginPopupModal .modal-content { padding: 60px 40px; border-radius: 32px; text-align: center; }
#loginPopupModal .close { position: absolute; width: 28px; height: 28px; background-color: var(--white); border: 1px solid #ddd; border-radius: 50%; right: 15px; top: 15px; text-align: center; opacity: 1; text-shadow: none; }
#loginPopupModal img { max-width: 120px; }
#loginPopupModal h6 { margin: 24px 0px; }
#loginPopupModal .btn { padding: 10px 45px; }
@media only screen and (max-width: 575.98px) {
    #loginPopupModal .modal-content { padding: 40px 24px; border-radius: 16px; }
    #loginPopupModal .btn { padding: 10px 40px; }
}


/* Infinity Section 03 -------------------------------------------------------*/
.infinity-sec-02 { padding: 100px 0px; }
.infinity-sec-02 h2 { font-size: 45px; font-weight: 800; line-height: 55px; color: #233d62; text-align: center; }
.infinity-sec-02 .cardList { padding: 90px 0px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.infinity-sec-02 .cardList:last-child { padding-bottom: 0px; }
.infinity-sec-02 .aside { width: calc((100% - 50px) / 2); }
.infinity-sec-02 h3 { font-weight: 800; color: #454545; margin-bottom: 16px }
.infinity-sec-02 p { line-height: 26px; }
.infinity-sec-02 img, .infinity-sec-02 video { width: 100%; border-radius: 24px; }
.infinity-sec-02 .cardList:nth-of-type(even) .col-l { order: 2; }
.infinity-sec-02 .cardList:nth-of-type(even) .col-r { order: 1; }
.infinity-sec-02 .tab-content img { width: 460px; height: 460px; }
.infinity-sec-02 .nav-tabs { margin-top: 20px; margin-bottom: 0px; gap: 12px; }
.infinity-sec-02 .nav-tabs .nav-link { border: 1px solid var(--navi_blue); border-radius: 8px; background-color: var(--white); color: var(--navi_blue); font-size: 14px; line-height: 20px; padding: 5px 12px }
.infinity-sec-02 .nav-tabs .nav-link.active { border-color: var(--navi_blue); background-color: var(--navi_blue); color: var(--white); }
@media only screen and (min-width: 1200px) {
    .infinity-sec-02 .container { max-width: 1000px; }
}
@media only screen and (max-width: 1199.98px) {
    .infinity-sec-02 h2 { font-size: 40px; line-height: 48px; }
    .infinity-sec-02 .cardList { padding: 70px 0px; }
    .infinity-sec-02 .tab-content img { width: 440px; height: 440px; }
}
@media only screen and (max-width: 991.98px) {
    .infinity-sec-02 { padding: 70px 0px; }
    .infinity-sec-02 h2 { font-size: 36px; line-height: 44px; }
    .infinity-sec-02 .cardList { padding: 60px 0px; }
    .infinity-sec-02 .aside { width: 100%; max-width: 500px; margin: 0 auto; }
    .infinity-sec-02 .cardList .col-l { order: 2; }
    .infinity-sec-02 .cardList .col-r { order: 1; margin-bottom: 40px; }
    .infinity-sec-02 .tab-content img { width: 500px; height: 500px; }
}
@media only screen and (max-width: 767.98px) {
    .infinity-sec-02 h2 { font-size: 30px; line-height: 38px; }
    .infinity-sec-02 .nav-tabs .nav-item { margin-right: 4px; }
}
@media only screen and (max-width: 575.98px) {
    .infinity-sec-02 .cardList { padding: 50px 0px; }
    .infinity-sec-02 .aside { max-width: 416px; }
    .infinity-sec-02 .tab-content img { width: 416px; height: 416px; }
}
@media only screen and (max-width: 479.98px) {
    .infinity-sec-02 .aside { max-width: 310px; }
    .infinity-sec-02 .tab-content img { width: 310px; height: 310px; }
}
@media only screen and (max-width: 374.98px) {
    .infinity-sec-02 .aside { max-width: 280px; }
    .infinity-sec-02 .tab-content img { width: 280px; height: 280px; }
}


/* Grab the deal -------------------------------------------------------*/
.grabTheDEal { padding: 16px 32px; display: none; align-items: center; justify-content: center; gap: 16px; width: 100%; position: fixed; z-index: 99; bottom: -50px; -webkit-animation-name: position; -moz-animation-name: position; animation-name: position; -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
.grabTheDEal.show { display: flex; bottom: 0px; animation-name: position; bottom: 0px; }
.grabTheDEal .btn { font-size: 20px; line-height: 28px;padding: 14px 36px; }
.grabTheDEal .btn.btn-rev { background-color: var(--white); }
.grabTheDEal .btn.btn-rev:hover { background-color: var(--primary); }
.grabTheDEal .btn font { font-size: 80%; font-style: italic; }
@media only screen and (max-width: 991.98px) {
    .grabTheDEal, .grabTheDEal.show { display: none; }
}
@media only screen and (max-width: 767.98px) {
    .grabTheDEal { background-color: var(--white); -webkit-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .08); -moz-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .08); -ms-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .08); -o-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .08); box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .08); gap: 8px; padding: 8px 12px 24px; }
    .grabTheDEal .btn { border-radius: 8px; width: calc((100% - 8px) / 2); font-size: 13px; line-height: 20px; gap: 4px; padding: 2px; height: 44px; }
    .grabTheDEal .btn svg { width: 12px; height: 12px; }
}
@keyframes position {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}


/* Infinity Section 03 -------------------------------------------------------*/
.slz-infinity-03 { padding: 120px 0px; text-align: center; background-color: #112f62; position: relative; }
.slz-infinity-03 .wrap { max-width: 1000px; margin: 0 auto; padding: 0px 15px; position: relative; z-index: 3; }
.slz-infinity-03 h1 { margin-bottom: 30px; }
.slz-infinity-03 h1 span { color: #39b9fc; }
.slz-infinity-03 p { font-size: 20px; line-height: 28px; }
.slz-infinity-03 .buttons { margin-top: 40px; display: flex; flex-flow: wrap; align-items: center; justify-content: center; }
.slz-infinity-03 .btn-rev { margin-left: 16px; }
.slz-infinity-03 iframe, .slz-infinity-03 video { margin-top: 90px; width: 100%; background-color: var(--black); border-radius: 16px; }
.slz-infinity-03 .deepBg { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 25%; background-color: #f7f9fc; }
@media only screen and (max-width: 1499.98px) {
    .slz-infinity-03 { padding: 100px 0px; }
    .slz-infinity-03 h1 { margin-bottom: 20px; }
    .slz-infinity-03 iframe, .slz-infinity-03 video { margin-top: 70px; }
}
@media only screen and (max-width: 1299.98px) {
    .slz-infinity-03 { padding: 80px 0px; }
}
@media only screen and (max-width: 1199.98px) {
    .slz-infinity-03 .wrap { padding: 0px 32px; }
    .slz-infinity-03 p { font-size: 18px; line-height: 26px; }
}
@media only screen and (min-width: 992px) {
    .slz-infinity-03 h1 { color: var(--white); }
    .slz-infinity-03 p { color: var(--white); }
    .slz-infinity-03 .btn-rev { border-color: var(--white); color: var(--white); }
    .slz-infinity-03 .btn-rev:hover { border-color: var(--navi_blue); }
}
@media only screen and (max-width: 991.98px) {
    .slz-infinity-03 { padding: 70px 0px; background-image: none; background-color: var(--white); }
    .slz-infinity-03:before { display: none; }
    .slz-infinity-03 .wrap { max-width: 720px; }
    .slz-infinity-03 video, .slz-case-01 img { margin-bottom: 0px; margin-top: 40px; }
    .slz-infinity-03 .divider { display: none; }
    .slz-infinity-03 p { font-size: 16px; }
    .slz-infinity-03 .deepBg { display: none; }
}
@media only screen and (max-width: 767.98px) {
    .slz-infinity-03 { padding: 50px 0px 70px; }
    .slz-infinity-03 .wrap { max-width: 540px; }
}


/* Infinity Section 02 -------------------------------------------------------*/
.slz-infinity-04 { padding-bottom: 120px; text-align: center; }
.slz-infinity-04 .static-row { display: flex; flex-flow:wrap; justify-content: space-between; }
.slz-infinity-04 .box { width: 31%; background-color: var(--white); padding: 40px; border-radius: 12px; border: 1px solid #eee; -webkit-transition: .4s ease; -moz-transition: .4s ease; -ms-transition: .4s ease; -o-transition: .4s ease; transition: .4s ease; }
.slz-infinity-04 .box:hover { border-color: transparent; -webkit-box-shadow: 0 20px 50px rgba(0, 5, 39, 0.07); -moz-box-shadow: 0 20px 50px rgba(0, 5, 39, 0.07); -ms-box-shadow: 0 20px 50px rgba(0, 5, 39, 0.07); -o-box-shadow: 0 20px 50px rgba(0, 5, 39, 0.07); box-shadow: 0 20px 50px rgba(0, 5, 39, 0.07); }
.slz-infinity-04 h6 { margin-bottom: 16px; }
.slz-infinity-04 p { font-size: 14px; line-height: 26px; color: var(--gray); }
.slz-infinity-04 span { display: inline-block; margin-bottom: 40px; padding-top: 16px; }
.slz-infinity-04 span img { max-width: 40px; }
@media only screen and (max-width: 1499.98px) {
    .slz-infinity-04 { padding-bottom: 100px; }
    .slz-infinity-04 .box { width: 32%; }
}
@media only screen and (max-width: 1299.98px) {
    .slz-infinity-04 { padding-bottom: 80px; }
}
@media only screen and (max-width: 991.98px) {
    .slz-infinity-04 { padding: 70px 0px; background-color: var(--white); }
    .slz-infinity-04 .box { width: 48%; margin-bottom: 30px; background-color: var(--white); -webkit-box-shadow: 0px 0px 16px 0px #ddd; -moz-box-shadow: 0px 0px 16px 0px #ddd; -ms-box-shadow: 0px 0px 16px 0px #ddd; -o-box-shadow: 0px 0px 16px 0px #ddd; box-shadow: 0px 0px 16px 0px #ddd; }
    .slz-infinity-04 .box:last-child { width: 100%; margin-bottom: 0px; }
}
@media only screen and (max-width: 767.98px) {
    .slz-infinity-04 .box { width: 100%; padding: 40px 24px; }
}



/* Infinity Section 04 -------------------------------------------------------*/
.slz-infinity-05 { padding: 120px 0px; text-align: center; }
.slz-infinity-05 .row { align-items: center; justify-content: space-between; }
.slz-infinity-05 h2 { margin-bottom: 15px; }
.slz-infinity-05 .subheading { font-size: 18px; line-height: 24px; }
.slz-infinity-05 ul { display: flex; flex-flow: wrap; justify-content: space-between; margin-top: 70px; }
.slz-infinity-05 li { width: 32%; background-color: var(--white); padding: 48px; border-radius: 16px; border: 1px solid #EEEEEE; -webkit-box-shadow: 0px 0px 2px 0px #EEEEEE; -moz-box-shadow: 0px 0px 2px 0px #EEEEEE; -ms-box-shadow: 0px 0px 2px 0px #EEEEEE; -o-box-shadow: 0px 0px 2px 0px #EEEEEE; box-shadow: 0px 0px 2px 0px #EEEEEE; }
.slz-infinity-05 li:last-child { margin-bottom: 0px; }
.slz-infinity-05 li figure { width: 80px; height: 80px; line-height: 78px; background-color: #4d7231; border-radius: 16px; margin: 0 auto 36px; }
.slz-infinity-05 li:nth-child(2) figure { background-color: #314972 }
.slz-infinity-05 li:nth-child(3) figure { background-color: #723531 }
.slz-infinity-05 li figure img { width: 48px; max-height: 48px; }
.slz-infinity-05 li span { font-size: 22px; line-height: 28px; font-weight: 600; margin-bottom: 6px; display: block; }
.slz-infinity-05 li span span { font-size: 70%; display:inline-block; display: block; }
@media only screen and (max-width:1499.98px) {
    .slz-infinity-05 { padding: 100px 0px; }
    .slz-infinity-05 li { padding: 40px; }
}
@media only screen and (max-width:1199.98px) {
    .slz-infinity-05 { padding: 80px 0px; }
    .slz-infinity-05 ul { margin-top: 50px }
}
@media only screen and (max-width:991.98px) {
    .slz-infinity-05 { padding: 70px 0px; background-color: var(--white); }
    .slz-infinity-05 .subheading { color: var(--dark); font-size: 16px; }
    .slz-infinity-05 li { width: 48%; margin-bottom: 30px; background-color: var(--white); -webkit-box-shadow: 0px 0px 16px 0px #ddd; -moz-box-shadow: 0px 0px 16px 0px #ddd; -ms-box-shadow: 0px 0px 16px 0px #ddd; -o-box-shadow: 0px 0px 16px 0px #ddd; box-shadow: 0px 0px 16px 0px #ddd; }
    .slz-infinity-05 li:last-child { width: 100%; margin-bottom: 0px; }
    .slz-infinity-05 li span { font-size: 18px; line-height: 28px; color: var(--black); line-height: 30px; }
}
@media only screen and (max-width:767.98px) {
    .slz-infinity-05 ul { margin-top: 40px }
    .slz-infinity-05 li { width: 100%; padding: 40px 24px; }
}

/* Infinity Section 06 -------------------------------------------------------*/
.slz-infinity-06 { padding: 40px 0px 100px; background-color: #f7f9fc; }
.slz-infinity-06 h2 { color: #233d62; text-align: center; }
.slz-infinity-06 ul { margin-top: 70px; display: flex; flex-wrap: wrap; gap: 30px; }
.slz-infinity-06 li { width: calc((100% - 60px) / 3); padding: 60px 36px; background-color: var(--white); border-radius: 30px; }
.slz-infinity-06 img { height: 60px; margin-bottom: 30px; }
.slz-infinity-06 h5 { font-weight: 800; color: #454545; margin-bottom: 16px; }
@media only screen and (max-width: 1699.98px) {
    .slz-infinity-06 li { padding: 60px 30px; }
    .slz-infinity-06 h5 { font-size: 18px; line-height: 28px; }
}
@media only screen and (max-width: 991.98px) {
    .slz-infinity-06 { padding: 70px 0px; background-color: #f7f9fc; }
    .slz-infinity-06 ul { margin-top: 50px; wrap; gap: 20px; }
    .slz-infinity-06 li { width: calc((100% - 24px) / 2); padding: 50px 20px; border-radius: 20px; }
}
@media only screen and (max-width: 575.98px) {
    .slz-infinity-06 ul { gap: 30px; }
    .slz-infinity-06 li { width: 100%; }
}


/* Infinity Section 05 Pop UP -------------------------------------------------------*/
#imageLightbox { position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; z-index: 999; }
#imageLightbox img { max-width: 1200px; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#imageLightbox button.close { display: inline-block; vertical-align: top; border: none; width: 30px; height: 30px; border-radius: 50%; opacity: 1; position: absolute; top: 20px; right: 20px; cursor: pointer; }
#imageLightbox button.close:after { content: "\f057"; font-family: FontAwesome; position: absolute; left: 1px; top: -1px; font-size: 30px; line-height: 30px; color: var(--white); }
@media only screen and (max-width: 1299.98px) {
    #imageLightbox img { max-width: 1100px; }
}
@media only screen and (max-width: 1199.98px) {
    #imageLightbox img { max-width: 90%; max-height: 94%; }
}


/* OS Tab List -------------------------------------------------------*/
.os-tab-list { background: #001C5C; }
.os-tab-list .nav-tabs { margin: 0px; }
.os-tab-list .nav-tabs .nav-item { margin-right: 40px; margin-bottom: 0px; }
.os-tab-list .nav-tabs .nav-item:last-child { margin-right: 0px; }
.os-tab-list .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 10px; padding: 24px 10px 16px; border: none; border-bottom: 2px solid transparent; background-color: transparent;  border-radius: 0px; color: var(--white); }
.os-tab-list .nav-tabs img { height: 20px; }
.os-tab-list .nav-tabs span { font-size: 14px; line-height: 14px; display: block; }
.os-tab-list .nav-tabs .nav-link.active, .os-tab-list .nav-tabs .nav-item.show .nav-link { border-color: var(--navi_blue); }
@media only screen and (max-width: 767.98px) {
    .os-tab-list .nav-tabs { padding: 0px; }
    .os-tab-list .nav-tabs .nav-item { margin-right: 24px; }
}

/* OS Tab List -------------------------------------------------------*/
.os-tab-content { padding: 100px 0px; }
.os-tab-content .section-hero { max-width: 100%; }
.os-tab-content h2 { margin-top: 30px; }
.os-tab-content .nav-tabs { margin-top: 30px; margin-bottom: 30px; justify-content: flex-start; }
.os-tab-content .nav-tabs .nav-item { margin-right: 50px; }
.os-tab-content .nav-tabs .nav-item:last-child { margin-right: 0px; }
.os-tab-content ul.select-version { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; margin-top: 30px; }
.os-tab-content .select-version li { margin-bottom: 15px; width: 48%; }
.os-tab-content .select-version li:last-child { margin-bottom: 0px; }
.os-tab-content .select-version li span { display: block; font-size: 11px; line-height: 20px; margin-top: 3px; color: #888888; font-weight: 400; padding: 0px 10px; }
.os-tab-content .tab-pane img { max-width: 100%; }
@media only screen and (max-width:991.98px) {
    .os-tab-content { padding: 50px 0px; text-align: center; }
    .os-tab-content h2 { margin-top: 0px; }
    .os-tab-content .nav-tabs { justify-content: center; }
    .os-tab-content ul.select-version { justify-content: center; }
    .os-tab-content .download-options span.coming-soon { margin: 0 auto; }
}
@media only screen and (max-width:575.98px) {
    .os-tab-content { padding: 40px 0px; }
    .os-tab-content .select-version li { width: 100%; }
    .os-tab-content .download-options span.coming-soon { font-size: 14px; line-height: 20px; max-width: 200px; }
}
@media only screen and (max-width:479.98px) {
    .os-tab-content .nav-tabs { margin: 20px 0px; }
    .os-tab-content .nav-tabs .nav-item { margin-right: 30px; }
}


/* Infinity Purchase Details -------------------------------------------------------*/
.infinityAccount { padding: 70px 0px; }
.infinityAccount .wrap { max-width: 1000px; margin: 0 auto; padding: 0px 15px; }
.infinityAccount h1 { text-align: center; margin-bottom: 50px; }
.infinityAccount table { width: 100%; border: none; border-collapse: separate; border-spacing: 0 15px; }
.infinityAccount th { font-size: 12px; line-height: 14px; color: var(--gray); font-weight: 500; text-transform: uppercase; text-align: left; padding: 0px 15px; border: none; }
.infinityAccount th:first-child { width: 90px; text-align: center; }
.infinityAccount th:last-child { width: 90px; text-align: center; }
.infinityAccount td { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 15px; font-size: 14px; line-height: 20px; color: var(--dark); font-weight: 600; text-align: left; }
.infinityAccount td:first-child { width: 90px; text-align: center; border-left: 1px solid #e6e6e6; border-right: none; border-radius: 10px 0px 0px 10px; }
.infinityAccount td:last-child { width: 90px; text-align: center; border-right: 1px solid #e6e6e6; border-radius: 0px 10px 10px 0px; }
.infinityAccount td a { display: inline-block; vertical-align: middle; padding: 5px; color: #ec9e9e; text-decoration: none; }


/* Thank You Page -------------------------------------------------------*/
.thankyou-page { background-color: rgb(243, 247, 254); width: 100%; min-height: 100%; display: flex; flex-flow: wrap; justify-content: center; align-items: center; padding: 24px; }
.thankyou-page .wrap { background: rgb(255,255,255); border-radius: 90px; max-width: 940px; padding: 80px 130px; text-align: center; }
.thankyou-page img { max-height: 260px; margin-bottom: 30px; animation: bounce 2s linear forwards; }
.thankyou-page h1 { font-size: 40px; line-height: 50px; color: #001C5C; margin-bottom: 30px; }
.thankyou-page .tick { position: relative; margin-bottom: 30px; }
.thankyou-page .tick .done-tick { width: 120px; height: 120px; border: solid 1px transparent; text-align: center; margin-left: auto; margin-right: auto; border-left-color: rgb(34, 208, 136); animation: rotate-circle 0.5s linear forwards; animation-delay: 0.5s; border-radius: 50%; background-color: transparent; }
.thankyou-page .tick i { font-weight: 900; font-size: 50px; color: rgb(34, 208, 136); position: absolute; animation: tick-icon 0.8s linear forwards; animation-delay: 0.5s; top: 30%; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; animation-delay: 0.5s; }
.thankyou-page .btn { margin-top: 40px; }

@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}
@-webkit-keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

@keyframes tick-icon {
  0% { font-size: 0; opacity: 1; top: 50%; }
  20% { font-size: 10px; top: 45%; }
  40% { font-size: 20px; top: 40%; }
  70% { font-size: 200px; top: 0; }
  100% { font-size: 50px; opacity: 1; top: 30%; }
}
@-webkit-keyframes tick-icon {
  0% { font-size: 0; opacity: 1; top: 50%; }
  20% { font-size: 10px; top: 45%; }
  40% { font-size: 20px; top: 40%; }
  70% { font-size: 200px; top: 0; }
  100% { font-size: 50px; opacity: 1; top: 30%; }
}

@keyframes rotate-circle {
    25% { border-left-color: rgb(34, 208, 136); }
    50% { border-left-color: rgb(34, 208, 136); border-top-color: rgb(34, 208, 136); }
    75% { border-left-color: rgb(34, 208, 136); border-top-color: rgb(34, 208, 136); border-right-color: rgb(34, 208, 136); }
    100% { transform: rotate(360deg); border-color: rgb(34, 208, 136); }
}
@-webkit-keyframes rotate-circle {
    25% { border-left-color: rgb(34, 208, 136); }
    50% { border-left-color: rgb(34, 208, 136); border-top-color: rgb(34, 208, 136); }
    75% { border-left-color: rgb(34, 208, 136); border-top-color: rgb(34, 208, 136); border-right-color: rgb(34, 208, 136); }
    100% { transform: rotate(360deg); border-color: rgb(34, 208, 136); }
}
@media only screen and (max-width: 800px) {
    .thankyou-page .wrap { padding: 60px; }
    .thankyou-page h1 { font-size: 30px; line-height: 40px; }
    .thankyou-page img { max-height: 200px; }
}
@media only screen and (max-width: 767px) {
    .thankyou-page { padding: 40px 24px; }
    .thankyou-page .wrap { background-color: transparent; padding: 0px; border-radius: 0px; }
}



/* Use Cases Section 04 -------------------------------------------------------*/
.slz-case-04 { padding: 100px 0px 70px; text-align: center; }
.slz-case-04 h2 { margin-bottom: 20px; }
.slz-case-04 ul { display: flex; flex-flow: wrap; margin-top: 100px; }
.slz-case-04 li { padding: 0px 70px; border-right: 1px solid #ddd; width: 33.333%; }
.slz-case-04 li:last-child { border: none; }
.slz-case-04 img { display: block; margin: 0 auto 36px; max-height: 32px; }
.slz-case-04 li span { background-color: var(--white); border: 1px solid #ddd; font-size: 12px; text-transform: capitalize; line-height: 16px; color: var(--dark); font-weight: normal; border-radius: 16px; padding: 2px 8px; }
.slz-case-04 h6 { margin-top: 20px; font-weight: 500; }
.slz-case-04 h6 a { color: var(--primary); }
.slz-case-04 h6 a:hover { color: var(--primary); }
.slz-case-04 p { margin-top: 70px; }
.slz-case-04 p a { font-weight: 400; font-style: italic; color: var(--navi_blue); text-decoration: underline; }
.slz-case-04 p a:hover { color: var(--primary); }
@media only screen and (max-width: 1799.98px) {
    .slz-case-04 { padding: 80px 0px; }
    .slz-case-04 ul { margin-top: 80px; }
    .slz-case-04 li { padding: 0px 50px; }
    .slz-case-04 p { margin-top: 50px; }
}
@media only screen and (max-width: 1199.98px) {
    .slz-case-04 ul { margin-top: 60px; }
    .slz-case-04 p { margin-top: 40px; }
}
@media only screen and (max-width: 991.98px) {
    .slz-case-04 { padding: 50px 0px; }
    .slz-case-04 li { padding: 0px 20px; }
    .slz-case-04 img { margin-bottom: 30px; }
}
@media only screen and (max-width: 767.98px) {
    .slz-case-04 { background-color: var(--white) !important; }
    .slz-case-04 ul {  margin-top: 40px; gap: 32px; }
    .slz-case-04 li { padding: 30px 20px; width: 100%; border: 1px solid #ddd; border-radius: 24px; }
    .slz-case-04 li:last-child { border: 1px solid #ddd; }
    .slz-case-04 img { margin-bottom: 30px; }
}


/* Career Page Section 01 -------------------------------------------------------*/
.slz-career-01 { padding: 70px 0px 100px; }
.slz-career-01 .open { font-size: 14px; line-height: 20px; color: var(--navi_blue); background-color: var(--light_blue_bg); border-radius: 20px; padding: 0px 10px; display: inline-block; vertical-align: top; margin-bottom: 24px; }
.slz-career-01 h1 { font-size: 34px; line-height: 44px; color: #001C5C; font-weight: 500; margin-bottom: 24px; }
.slz-career-01 p { color: #001C5C; }
.slz-career-01 figure { margin-top: 48px; position: relative; }
.slz-career-01 .wrap { max-width: 816px; margin: 60px auto 0px; padding: 0px 32px; }
.slz-career-01 h5 { color: #001C5C; margin-top: 50px; margin-bottom: 24px; }
.slz-career-01 h6 { color: #001C5C; margin-bottom: 10px; }
.slz-career-01 .jobDescription { border: 1px solid #b6bfd3; border-radius: 16px; padding: 24px; margin-bottom: 24px; }
.slz-career-01 .jobDescription:last-of-type { margin-bottom: 0px; }
.slz-career-01 .box { max-width: calc(100% - 110px); }
.slz-career-01 ul { display: flex; margin-top: 24px; font-size: 16px; line-height: 26px;color: #001C5C; }
.slz-career-01 li:not(:last-child) { margin-right: 40px; }
.slz-career-01 li span { font-size: 130%; }
.slz-career-01 .jobDescription a { font-size: 18px; line-height: 24px; color: var(--black); }
.slz-career-01 .jobDescription a span { display: inline-block; vertical-align: top; margin-top: 3px; }
.slz-career-01 .jobDescription a:hover { color: var(--navi_blue); }
@media only screen and (max-width: 1199.98px) {
    .slz-career-01 { padding: 70px 0px 80px; }
}
@media only screen and (max-width: 991.98px) {
    .slz-career-01 { padding: 50px 0px 70px; }
}
@media only screen and (max-width: 767.98px) {
    .slz-career-01 .open { font-size: 13px; margin-bottom: 16px; }
    .slz-career-01 h1 { font-size: 24px; line-height: 34px; margin-bottom: 16px; }
    .slz-career-01 figure { height: 200px; overflow: hidden; margin-top: 30px; }
    .slz-career-01 figure img { position: absolute; top: 0px; right: -100px; height: 100%; max-width: inherit; width: auto; }
    .slz-career-01 .wrap { margin-top: 40px; }
}

/* Career Page Section 02 -------------------------------------------------------*/
.slz-career-02 { background-color: var(--light); background-image: url('../images/career/career-bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 100px 0px; text-align: center; }
.slz-career-02 span { font-size: 14px; line-height: 20px; color: var(--navi_blue); background-color: var(--light_blue_bg); border-radius: 20px; padding: 0px 10px; display: inline-block; vertical-align: top; margin-bottom: 24px; }
.slz-career-02 h3 { margin-bottom: 24px; }
.slz-career-02 h5 { margin-bottom: 6px; }
@media only screen and (max-width: 1199.98px) {
    .slz-career-02 { padding: 80px 0px; }
}
@media only screen and (max-width: 991.98px) {
    .slz-career-02 { padding: 70px 0px; background-image: none; background-color: var(--white); }
    .slz-career-02 h3 { font-weight: 500; margin-bottom: 20px; }
}
@media only screen and (max-width: 767.98px) {
    .slz-career-02 h3 { font-size: 20px; line-height: 36px; }
}

/* Career Page Section 03 -------------------------------------------------------*/
.slz-career-03 { padding: 100px 0px; }
.slz-career-03 .container { max-width: 1340px; padding: 0px 32px; }
.slz-career-03 ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; }
.slz-career-03 li { width: 22%; background-color: var(--white); border-radius: 8px; padding: 40px 24px; position: relative; -webkit-box-shadow: 0px 0px 10px 0px #e1e4e9; -moz-box-shadow: 0px 0px 10px 0px #e1e4e9; -ms-box-shadow: 0px 0px 10px 0px #e1e4e9; -o-box-shadow: 0px 0px 10px 0px #e1e4e9; box-shadow: 0px 0px 10px 0px #e1e4e9; }
.slz-career-03 li span { font-size: 60px; line-height: 60px; color: var(--light_blue_bg); font-weight: 700; position: absolute; right: 20px; top: 20px;
     }
.slz-career-03 li p { font-size: 14px; line-height: 24px; }
@media only screen and (max-width: 1299.98px) {
    .slz-career-03 li { width: 23%; }
}
@media only screen and (max-width: 1199.98px) {
    .slz-career-03 { padding: 80px 0px; }
    .slz-career-03 li { width: 24%; }
}
@media only screen and (max-width: 991.98px) {
    .slz-career-03 { padding: 70px 0px; background-color: var(--white); }
    .slz-career-03 ul { margin-top: 0px; }
    .slz-career-03 li { width: 46%; margin-top: 40px; }
}
@media only screen and (max-width: 767.98px) {
    .slz-career-03 li { width: 100%; margin-top: 24px; }
}

/* ----------------------------------------------
additional Page Design
---------------------------------------------- */
.center { max-width: 1300px; margin: 0 auto; padding: 0px 15px; position: relative; z-index: 3; }
/*01*/
.add-sec-01 { background-image:url('../images/additional/01.svg'); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; padding: 70px 0px; position: relative; }
.add-sec-01:before { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-image:linear-gradient(to right, #FFFFFF, transparent); }
.add-sec-01 .box { max-width: 535px; }
.add-sec-01 h1 { font-size: 48px; line-height: 74px; font-weight: 700; margin-bottom: 30px; }
.add-sec-01 h1 span { color: var(--primary); }
.add-sec-01 h5 { margin-bottom: 20px; }
/*02*/
.add-sec-02 { padding: 70px 0px; background-color: #f5f5f5; }
.add-sec-02 .aside { max-width: 610px; padding-left: 100px; }
.add-sec-02 img { max-width: 100%; display: block; margin: 0 auto; }
.mkthed { display: inline-flex; flex-flow: wrap; justify-content: space-between; align-items: center; width: 100%; color: var(--primary); margin-bottom: 50px; }
.mkthed img { max-width: 50px; margin-right: 16px; }
.mkthed span { width: calc(100% - 66px); }
.add-sec-02 h4 { font-weight: 700; margin-bottom: 30px; }
.add-sec-02 p { font-size: 20px; line-height: 36px; margin-bottom: 30px; }
.add-sec-02 p:last-of-type { margin-bottom: 0px; }
.addList01 li { margin-bottom: 30px; display: inline-flex; flex-flow: wrap; justify-content: space-between; align-items: center; width: 100%; font-size: 20px; line-height: 30px; color: var(--black); }
.addList01 li:last-child { margin-bottom: 0px; }
.addList01 li img { max-width: 30px; margin-right: 20px; }
.addList01 li span { width: calc(100% - 50px); }
/*03*/
.add-sec-03 { padding: 70px 0px; background-color: #f5f5f5; }
.add-sec-03 p { font-size: 20px; line-height: 36px; }
.add-sec-03 .box { text-align: center; padding: 50px; border-radius: 24px; -webkit-box-shadow: 0px 5px 30px 0px #ddd; -moz-box-shadow: 0px 5px 30px 0px #ddd; -ms-box-shadow: 0px 5px 30px 0px #ddd; -o-box-shadow: 0px 5px 30px 0px #ddd; box-shadow: 0px 5px 30px 0px #ddd; }
.add-sec-03 .box img { height: 100px; margin-bottom: 20px; }
.add-sec-03 .box h4 { margin-bottom: 20px; }
.add-sec-03 .box h5 { font-weight: bold; margin-bottom: 20px; }
.addList02 { display: flex; flex-flow: wrap; justify-content: space-between; }
.addList02 li { width: 32%; margin-top: 50px; font-size: 20px; line-height: 30px; color: var(--black); }
.addList02 .title { display: inline-flex; flex-flow: wrap; align-items: center; width: 100%; margin-bottom: 24px; }
.addList02 .title img { margin-right: 16px; }
.addList02 .title span { font-size: 20px; line-height: 26px; color: var(--dark); text-transform: capitalize; font-weight: 600; }
.add-sec-03 .aside { margin-bottom: 30px; }
.add-sec-03 .card { height: 100%; border: none; padding: 50px 24px; text-align: center; -webkit-box-shadow: 0px 0px 10px 0px #ddd; -moz-box-shadow: 0px 0px 10px 0px #ddd; -ms-box-shadow: 0px 0px 10px 0px #ddd; -o-box-shadow: 0px 0px 10px 0px #ddd; box-shadow: 0px 0px 10px 0px #ddd; }
.add-sec-03 .aside img { height: 88px; margin-bottom: 40px; }
.add-sec-03 .aside h4 { margin-bottom: 30px; }
.add-sec-03 .box p, .add-sec-03 .aside p { font-size: 16px; line-height: 26px; }
.add-sec-03 .engageBox { background-color: var(--white); padding: 20px 40px; border-radius: 12px; margin-bottom: 16px; text-align: left; -webkit-box-shadow: 0px 0px 10px 0px #ddd; -moz-box-shadow: 0px 0px 10px 0px #ddd; -ms-box-shadow: 0px 0px 10px 0px #ddd; -o-box-shadow: 0px 0px 10px 0px #ddd; box-shadow: 0px 0px 10px 0px #ddd; }
.add-sec-03 .engageBox:last-child { margin-bottom: 0px; }
.add-sec-03 .aside img { height: 88px; }
.addList03 { padding-left: 60px; display:flex; flex-flow: wrap; justify-content: space-between; }
.addList03 li { width: 48%; margin-bottom: 20px; }
.addList03 li:last-child { margin-bottom: 0px; }
.addList03 li span { width: 48px; height: 48px; line-height: 48px; background-color: #36B3FF; border-radius: 7px; font-size: 24px; font-weight: 700; color: var(--white); text-align: center; display: inline-block; vertical-align: top; margin-bottom: 8px; }
/*04*/
.add-sec-04 { padding: 70px 0px; }
.add-sec-04 h2 { font-weight: 500; font-size: 55px; line-height: 80px; }
.add-sec-04 h2 span { color:var(--primary); font-weight: 700; }
.add-sec-04 p { font-size: 20px; line-height: 36px; }
@media only screen and (max-width: 1499.98px) {
    /*01*/
    .add-sec-01 h1 { font-size: 40px; line-height: 60px; }
    /*04*/
    .add-sec-04 h2 { font-size: 40px; line-height: 60px; }
}
@media only screen and (max-width: 1399.98px) {
    .center { max-width: 1170px; }
}
@media only screen and (max-width: 1199.98px) {
    .center { padding: 0px 32px; }
    /*01*/
    .add-sec-01 { padding: 60px 0px; }
    .add-sec-01 h1 { font-size: 36px; line-height: 50px; }
    /*02*/
    .add-sec-02 .container-fluid { padding: 0px 32px; }
    .add-sec-02 .row > div { padding: 0px 15px !important; }
    .add-sec-02 p { font-size: 18px; line-height: 30px; margin-bottom: 24px; }
    .add-sec-02 .aside { padding-left: 50px; }
    /*03*/
    .add-sec-03 { padding: 60px 0px; }
    .add-sec-03 p { font-size: 18px; line-height: 30px; }
    .addList01 li { font-size: 18px; line-height: 30px; margin-bottom: 24px; }
    /*04*/
    .add-sec-04 { padding: 60px 0px; }
    .add-sec-04 h2 { font-size: 36px; line-height: 50px; }
    .add-sec-04 p { font-size: 18px; line-height: 30px; }
}
@media only screen and (max-width: 991.98px) {
    .center { max-width: 768px; }
    /*01*/
    .add-sec-01 { padding: 50px 0px; }
    .add-sec-01:before { background-image:linear-gradient(to right, #FFFFFF, #ffffff transparent); }
    /*02*/
    .add-sec-02 { padding: 70px 0px 60px; background-color: var(--white); border-top: 1px solid #EFEFEF; }
    .add-sec-02 .container-fluid { max-width: 768px; }
    .add-sec-02 .aside { padding-left: 0px; max-width: 100%; margin-top: 30px; }
    .add-sec-02 .img img { width: 100%; max-width: 500px; }
    .mkthed { margin-bottom: 30px; }
    .add-sec-02 h4 { margin-bottom: 20px; }
    /*03*/
    .add-sec-03 { background-color: var(--white); border-top: 1px solid #EFEFEF; }
    .addList02 li { width: 48%; }
    .add-sec-03 .aside img { margin-bottom: 30px; }
    .add-sec-03 .engageBox { padding: 30px; text-align: center; margin-bottom: 30px; }
    .add-sec-03 .engageBox h4 { margin: 30px 0px 20px; }
    .add-sec-03 .img img { width: 100%; max-width: 500px !important; }
    .addList03 { padding-left: 0px; }
    /*04*/
    .add-sec-04 { background-color: var(--white); border-top: 1px solid #EFEFEF; }
    .add-sec-04 h2 { margin-bottom: 24px; }
}
@media only screen and (max-width: 767.98px) {
    /*01*/
    .add-sec-01 { padding: 30px 0px 50px; }
    .add-sec-01:before { background-image: none; background-color: rgba(255, 255, 255, 0.6); }
    .add-sec-01 h1 { font-size: 30px; line-height: 40px; margin-bottom: 24px; }
    /*02*/
    .add-sec-02 { padding: 60px 0px 50px; }
    .add-sec-02 p { font-size: 16px; line-height: 26px; margin-bottom: 20px; }
    /*03*/
    .add-sec-03 { padding: 50px 0px; }
    .add-sec-03 p { font-size: 16px; line-height: 26px; }
    .addList01 li { font-size: 16px; line-height: 26px; margin-bottom: 20px; }
    .add-sec-03 .box { padding: 30px; }
    /*04*/
    .add-sec-04 { padding: 50px 0px; }
    .add-sec-04 h2 { font-size: 30px; line-height: 40px; }
    .add-sec-04 p { font-size: 16px; line-height: 26px; }
}
@media only screen and (max-width: 575.98px) {
    /*03*/
    .addList02 li { width: 100%; }
    .addList02 li:first-child { margin-top: 0px; }
    .addList03 li { width: 100%; margin-bottom: 30px; }
    .addList03 li span { width: 40px; height: 40px; line-height: 40px; font-size: 18px; }
}


/* Background Remover 01 -------------------------------------------------------*/
.bg-remover-01 { padding: 100px 0px; background-color: #f5f5f5; background-image: linear-gradient(97deg, #f3f1fe -.75%, #EEF4F3 45%, #ecfbfe 96%); text-align: center; position: relative; overflow: hidden; }
.animationEffect { position: absolute; left: -10%; top: -10%; animation-duration: 3s; animation: effect 3s alternate infinite; -webkit-animation: effect 2s alternate infinite; }
.animationEffect1 { position: absolute; left: 6%; top: 9%; animation-name: effect1; animation-timing-function: linear; animation-duration: 12s; animation-iteration-count: infinite; }

.bg-remover-01 .topDiv { max-width: 800px; margin: 0 auto; }
.bg-remover-01 .upload { border: none; padding: 0px; margin: 40px auto 0px;  background-color: transparent; box-shadow: none; position: relative; }
.bg-remover-01 .upload img { max-width: 50px; }
.bg-remover-01 .upload p { margin-top: 10px; }
.bg-remover-01 .upload img { max-width: 74px; position: absolute; right: 0px; top: 30px; animation-name: effect2; animation-timing-function: linear; animation-duration: 4s; animation-iteration-count: infinite; }

.bg-remover-01 ul { margin-top: 60px; display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.bg-remover-01 ul li { width: 38%; border-radius: 16px; }
.bg-remover-01 ul li:first-child { width: 20% }
.bg-remover-01 ul li:nth-child(2) { margin-top: 57px; }
.bg-remover-01 ul li img { max-width: 100%; }
.bg-remover-01 ul .itemHover { position: relative; overflow: hidden; border-radius: 16px; }
.bg-remover-01 ul .itemHover + .itemHover { margin-top: 24px; }
.bg-remover-01 ul .itemHover:hover { -webkit-box-shadow: 0px 0px 20px 0px #e2eaef; -moz-box-shadow: 0px 0px 20px 0px #e2eaef; -ms-box-shadow: 0px 0px 20px 0px #e2eaef; -o-box-shadow: 0px 0px 20px 0px #e2eaef; box-shadow: 0px 0px 20px 0px #e2eaef; }
.bg-remover-01 ul span { font-size: 14px; line-height: 14px; color: #00479d; font-weight: 400; text-align: left; position: absolute; left: 10px; top: 12px; }

.achivementsStatus { padding: 70px 0px 100px; }
.achivementsStatus ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.achivementsStatus ul li  { width: 32%; max-width: 320px; border: 5px solid #ddd; border-radius: 12px; padding: 40px; background-color: var(--light_bg); text-align: center }
.achivementsStatus span { font-size: 36px; line-height: 1; color: var(--green); font-weight: 700; display: inline-block; margin-bottom: 10px; }
.achivementsStatus h6 {  }
@keyframes effect1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes effect2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
@media only screen and (max-width:1499.98px) {
    .bg-remover-01 { padding: 80px 0px; }
    .bg-remover-01 ul { max-width: 800px; margin: 60px auto 0px; }
    .bg-remover-01 ul li:nth-child(2) { margin-top: 54px; }
}
@media only screen and (max-width:1399.98px) {
    .bg-remover-01 .upload { width: 420px; }
}
@media only screen and (max-width:1199.98px) {
    .bg-remover-01 .topDiv { max-width: 700px }
    .bg-remover-01 .upload img { max-width: 66px; top: 24px; }
}
@media only screen and (max-width:991.98px) {
    .bg-remover-01 { padding: 70px 0px; }
    .animationEffect { display: none; }
    .bg-remover-01 .topDiv { max-width: 600px }
    .bg-remover-01 .upload .upload-photo { padding: 14px 30px; }
    .bg-remover-01 .upload img { max-width: 60px; top: 12px; }
    .bg-remover-01 ul { margin-top: 40px; }
    .bg-remover-01 ul li { width: 36%; }
    .bg-remover-01 ul li:first-child { width: 24% }
    .bg-remover-01 ul li:nth-child(2) { margin-top: 80px; }
}
@media only screen and (max-width:767.98px) {
    .bg-remover-01 h6 { font-weight: 400; line-height: 28px; }
    .bg-remover-01 .upload { width: 100%; margin-top: 24px; }
    .bg-remover-01 .upload img { max-width: 50px; top: 12px; }
    .bg-remover-01 ul { margin-top: 30px; }
    .bg-remover-01 ul li { width: 48%; }
    .bg-remover-01 ul li:first-child { width: 100%; display: inline-flex; flex-flow: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
    .bg-remover-01 ul li:nth-child(2) { margin-top: -40px; }
    .bg-remover-01 ul li:nth-child(4) { margin-top: 0px; }
    .bg-remover-01 ul li:first-child .itemHover { width: 48%; }
    .bg-remover-01 ul .itemHover + .itemHover { margin-top: 36px; }
}
@media only screen and (max-width:479.98px) {
    .bg-remover-01 ul span { font-size: 12px; line-height: 14px; }
}


/* Background Remover 02 -------------------------------------------------------*/
.bg-remover-02 .static-row { padding: 140px 0px; }
.bg-remover-02 .static-row:nth-child(2n) { background-color: var(--light); }
.bg-remover-02 .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.bg-remover-02 .static-img { width: 40%; text-align: center; position: relative; }
.bg-remover-02 .static-row:nth-child(2n) .static-img { order: 2; }
.bg-remover-02 .static-img img { width: 100%; border-radius: 16px; }
.bg-remover-02 .static-img .dark-bg { position: absolute; width: 70%; background-size: 13px; z-index: -1; }
.bg-remover-02 .static-img .top-left { left: -40px; top: -40px; text-align: left; }
.bg-remover-02 .static-img .bottom-right { right: -40px; bottom: -40px; text-align: right; -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); }
.bg-remover-02 .static-img .dark-bg img { width: auto; max-width: 100%; border-radius: 0px; }
.bg-remover-02 .static-content { width: 50%; }
.bg-remover-02 .static-row:nth-child(2n) ..static-content { order: 1; }
.bg-remover-02 h2 { margin-bottom: 20px; }
.bg-remover-02 ul { padding-left: 18px; }
.bg-remover-02 ul li { margin-bottom: 16px; list-style: circle; font-size: 16px; line-height: 26px; }
@media only screen and (max-width:1499.98px) {
    .bg-remover-02 .static-row { padding: 120px 0px; }
}
@media only screen and (max-width:1199.98px) {
    .bg-remover-02 .static-row { padding: 100px 0px; }
}
@media only screen and (max-width:991.98px) {
    .bg-remover-02 .static-row { padding: 80px 0px; background-color: var(--white); }
    .bg-remover-02 .static-row:nth-child(2n) { background-color: var(--white); }
    .bg-remover-02 .static-img { text-align: center; width: 100%; max-width: 450px; margin: 0px auto 50px; border-radius: 16px; padding: 6px; background-color: #fff; border: 1px solid #ddd; }
    .bg-remover-02 .static-content { width: 100%; max-width: 500px; margin: 0px auto; text-align: center; }
    .bg-remover-02 .static-row:nth-child(2n) .static-img { order: 1; }
    .bg-remover-02 .static-row:nth-child(2n) .static-content { order: 2; }
    .bg-remover-02 .static-img .dark-bg { display: none; }
    .bg-remover-02 ul { text-align: left; }
}
@media only screen and (max-width: 767.98px) {
    .bg-remover-02 .static-row { padding: 70px 0px; background-color: var(--white); }
}
@media only screen and (max-width: 479.98px) {
    .bg-remover-02 ul li { font-size: 14px; line-height: 24px; }
}


.slz-infinity-04 .dropdown-togglea[aria-expanded="false"] {
    position: relative; display: inline-block; vertical-align: top; font-weight: 400; color: var(--white); background-image: linear-gradient(to right, var(--primary), var(--navi_blue)); font-size: 16px; line-height: 22px; padding: 12px 36px; border: 2px solid var(--primary); border-radius: 40px; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; outline: none !important;
}


/* Unlimited Cutouts -------------------------------------------------------*/
.unlimitedBgRemover { padding: 100px 0px; }
.unlimitedBgRemover h2{ max-width: 900px; margin: 0 auto; text-align: center; }
.unlimitedBgRemover .wrap { display: flex; flex-wrap: wrap; gap: 50px; margin-top: 60px; line-height: 0px; }
.unlimitedBgRemover aside { width: calc((100% - 50px) / 2); background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border-radius: 16px; position: relative; overflow: hidden; border: 1px solid #ddd; }
.unlimitedBgRemover aside img { width: 100%; padding: 6px 6px 0px; border-radius: 16px 16px 0px 0px; }
.unlimitedBgRemover .content { padding: 24px 24px 40px; }
.unlimitedBgRemover h6 { color: #233d62; margin-top: 5px; }
.unlimitedBgRemover ul { min-height: 136px; margin: 20px 0px 30px; }
.unlimitedBgRemover li { font-size: 16px; line-height: 22px; color: #233d62; font-weight: 500; padding-left: 36px; background-image: url('../images/infinity-app/checked.svg'); background-repeat: no-repeat; background-size: 22px; margin-bottom: 16px; }
.unlimitedBgRemover .btn { display: inline-block; width: 100%; padding: 16px; font-weight: 600; border-radius: 8px; }
.unlimitedBgRemover .animate { animation-duration: 10s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: gradientBg; animation-timing-function: linear; background-color: var(--navi_blue); background-image: linear-gradient(135deg,  var(--navi_blue) 0%, var(--navi_blue) 30%, #dce3ff, var(--navi_blue) 70%, var(--navi_blue) 100%); background-size: 250%; }
@keyframes gradientBg {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
@media only screen and (max-width: 1199.98px) {
    .unlimitedBgRemover { padding: 80px 0px; }
}
@media only screen and (max-width: 991.98px) {
    .unlimitedBgRemover { padding: 70px 0px; }
    .unlimitedBgRemover .wrap { gap: 30px; margin-top: 50px; }
    .unlimitedBgRemover aside { width: calc((100% - 30px) / 2); }
}
@media only screen and (max-width: 767.98px) {
    .unlimitedBgRemover aside { width: 100%; }
}
@media only screen and (max-width: 479.98px) {
    .unlimitedBgRemover .content { padding: 20px 16px 30px; }
    .unlimitedBgRemover .btn { padding: 12px; }
}

/* Mail Verification -------------------------------------------------------*/
.mailVerificatio .modal-dialog { max-width: 460px; border-radius: 20px; }
.mailVerificatio .close { display: flex; align-items: center; justify-content: center; position: absolute; right: 10px; top: 10px; font-size: 24px; line-height: 28px; color: #001C5C; font-weight: 400; text-decoration: none; text-shadow: none; opacity: 1; width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 50%; text-align: center; background-color: var(--light_blue_bg); z-index: 2; }
.mailVerificatio .modal-content { border-radius: 20px; border: 6px solid var(--light_blue_bg); }
.mailVerificatio .modal-body { padding: 40px; text-align: center; }
.mailVerificatio .modal-body img { max-width: 160px; margin-bottom: 36px; }
.mailVerificatio h4 { margin-bottom: 16px; }
.mailVerificatio h6 { font-size: 18px; line-height: 28px; font-weight: 400; }
.mailVerificatio h6 strong { font-size: 110%; color: var(--gray-dark); }
.mailVerificatio .btn { margin-top: 24px; }
@media only screen and (max-width: 767px) {
    .mailVerificatio .modal-body { padding: 40px 24px; }
    .mailVerificatio .modal-body h6 { font-size: 16px; line-height: 24px; }
}



/*API pages -------------------------------------------------------*/
.apiPage { background-color: var(--white); }
.apiPage .flexBox { display: flex; flex-wrap: wrap; align-items: flex-start; }
.apiPage .heading { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e6e6e6; width: 100%; font-size: 18px; line-height: 26px; color: var(--navi_blue); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-top: 16px; margin: 16px 0px 0px; cursor: pointer; }
.apiPage .heading:first-of-type { border: none; padding-top: 0px; }
.apiPage .heading:before { content: "\f105"; font-family: FontAwesome; width: 12px; text-align: center; }
.apiPage .heading[aria-expanded="true"] { color: var(--dark); }
.apiPage .heading.show[aria-expanded="true"] { opacity: 1; }
.apiPage .heading[aria-expanded="true"]:before { content: "\f107"; }
.apiPage .heading span { font-size: 13px; text-transform: capitalize; margin-left: auto; }
.apiPage .heading span:after { content: "required"; font-size: 10px; line-height: 18px; color: #dd1e2e; position: relative; padding-left: 4px; width: 12px; top: -6px; }
.apiPage nav { background-color: var(--white); border-right: 1px solid #DDDDDD; width: 290px; position: sticky; top: 78px; height: calc(100vh - 78px); overflow-x: hidden; overflow-y: auto; }
.apiPage nav::-webkit-scrollbar { width: 5px; }
.apiPage nav::-webkit-scrollbar-track { background-color: var(--white); }
.apiPage nav::-webkit-scrollbar-thumb { background-color: #AAAAAA; border-radius: 12px; }
.apiPage nav .top { background-color: var(--white); display: flex; align-items: center; gap: 12px; padding: 24px 16px 0px; }
.apiPage nav .dropdown-toggle { border-radius: 4px; border: 1px solid #454545; background: #454545; font-size: 13px; line-height: 20px; color: var(--white); font-weight: 400; padding: 0px 4px; cursor: default; }
.apiPage nav .dropdown-toggle::after { display: none; }
.apiPage nav .dropdown-menu.show { display: none; }
.apiPage nav h5 { font-size: 20px; line-height: 28px; color: var(--black); font-weight: 700; }

.apiPage nav ul { display: flex; flex-wrap: wrap; flex-direction: column; gap: 12px; padding: 24px 0px; }
.apiPage nav li:first-child { padding-bottom: 16px; border-bottom: 1px solid #DEDEDE; }
.apiPage nav li a { color: #121212; font-size: 14px; font-weight: 400; line-height: 22px; padding: 10px 16px; width: 100%; display: inline-flex; align-items: center; gap: 12px; }
.apiPage nav li img { max-height: 24px; }
.apiPage nav li span { border: 1px solid; color: var(--black); border-radius: 20px; padding: 0px 8px; font-size: 12px; line-height: 22px; text-transform: capitalize; }
.apiPage nav li .get { background-color: #8FFDDB; border-color: #8FFDDB; }
.apiPage nav li .post { background-color: #F0F0F0; border-color: #F0F0F0; margin-left: auto; }
.apiPage nav li.current a { color: var(--black); background-color: #d5d5d5; }
.apiPage main { width: calc(100% - 290px - 480px); padding: 24px; }
.apiPage main h1 { font-size: 32px; line-height: 38px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
.apiPage main h2 { font-size: 26px; line-height: 32px; font-weight: 500; color: var(--black); margin-bottom: 0px; }
.apiPage main h4 { font-size: 18px; line-height: 26px; color: var(--dark); font-weight: 600; }
.apiPage .box { border-radius: 12px; background: var(--white); padding: 24px; -webkit-box-shadow: 0px 1px 6px 5px #EDF0F6; -moz-box-shadow: 0px 0px 4px 2px #f3f5f9; -ms-box-shadow: 0px 0px 4px 2px #f3f5f9; -o-box-shadow: 0px 0px 4px 2px #f3f5f9; box-shadow: 0px 0px 4px 2px #f3f5f9; }
.apiPage .secAPI { margin-top: 60px; }
.apiPage .secAPI:first-child { margin-top: 0px; }
.secAPI p { color: var(--dark); margin-bottom: 16px; }
.secAPI p:last-child { margin-bottom: 0px; }
.secAPI mark { background-color: #fcf8e3; border-radius: 2px; }
.secAPI .referanceList { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px; }
.secAPI .referanceList li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: calc((100% - 20px) / 2); border-radius: 8px; font-size: 16px; line-height: 22px; color: var(--dark); }
.secAPI .referanceList h6 { font-size: 16px; line-height: 22px; color: var(--black); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 2px; }
.secAPI .referanceList mark { background-color: #90C6FF; color: var(--black); border-radius: 6px; padding: 4px 10px; }
.secAPI .authorizationList { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
.secAPI .authorizationList li { padding: 12px 36px; border: 1px solid #e6e6e6; border-radius: 16px; text-align: center; display: flex; align-items: center; gap: 12px; }
.secAPI .authorizationList li:last-child { border: none; padding: 0px; }
.secAPI .authorizationList h6 { font-size: 16px; line-height: 22px; color: var(--dark); text-transform: uppercase; letter-spacing: 1px; }
.secAPI .authorizationList span { font-size: 16px; line-height: 22px; color: var(--gray); }
.secAPI .parameters { padding: 24px 0px; }
.secAPI .parameters > li { border-bottom: 1px solid #DDDDDD; padding: 32px 20px; }
.secAPI .parameters > li:first-child { padding-top: 0px; }
.secAPI .parameters > li:last-child { border: none; padding-bottom: 0px; }
.secAPI .parameters .content { padding-left: 20px; margin-top: 24px; }
.secAPI .parameters h5 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--black); margin-top: 20px; }
.secAPI .parameters h6 { font-size: 16px; line-height: 22px; color: var(--black); letter-spacing: 1px; display: inline-block; background-color: #e8ffea; padding: 3px; border-radius: 4px; border: 1px solid #bcffb4; }
.secAPI .parameters p strong { font-weight: 600; color: var(--black); padding-right: 8px; }
.secAPI .important { border-left: 3px solid var(--primary); background-color: #fbfbfb; padding: 16px; font-size: 16px; line-height: 24px; border-radius: 4px; margin-top: 16px; }
.secAPI .description { width: 100%; display: inline-flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.secAPI .description h5 { margin: 0px; }
.secAPI .description strong { width: 90px; font-size: 14px; line-height: 20px; }
.secAPI .description p { margin-bottom: 0px; }
.secAPI .parameters ul { margin-top: 20px; list-style: disc; padding-left: 24px; }
.secAPI .parameters ul li { margin-bottom: 20px; font-size: 16px; line-height: 24px; color: var(--dark); }
.secAPI .parameters ul li:last-child { margin-bottom: 0px; }
.secAPI .responseTab .nav-tabs { gap: 20px; margin: 20px 0px; justify-content: flex-start; }
.secAPI .nav-link { background-color: transparent; font-size: 14px; line-height: 22px; font-weight: 600; padding: 6px 20px; display: inline-flex;   align-items: center; gap: 10px; height: auto; }
.secAPI .nav-link span { width: 12px; height: 12px; background-color: #DF200C; border-radius: 50%; }
.secAPI .nav-link span.green { background-color: #00d354; }
.secAPI .responseTab .tab-pane { border: 1px solid #ddd; padding: 20px; border-radius: 16px; background-color: #F7F7F7; }
.secAPI .responseTab p { font-size: 14px; line-height: 20px; }
.secAPI .responseTab h5 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--black); margin-top: 20px; }
.secAPI .responseTab mark { background-color: #ff9090; border-radius: 6px; padding: 4px 10px; }
.secAPI .responseTab mark.green { background-color: #90ffbc; }
.secAPI .responseTab .param { padding: 10px 16px; border-radius: 8px; background-color: #00024a; color: var(--white); font-size: 14px; line-height: 20px; margin-top: 10px; display: inline-block; }
.secAPI table { text-align: center; width: 100% !important; border: none; border-collapse: separate; border-spacing: 0 10px; }
.secAPI table th { font-size: 12px; line-height: 14px; color: var(--gray); font-weight: 500; text-transform: uppercase; text-align: left; padding: 0px 15px; border: none; }
.secAPI td { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 15px; font-size: 14px; line-height: 20px; color: var(--black); font-weight: 400; text-align: left; }
.secAPI td:first-child { border-left: 1px solid #e6e6e6; border-right: none; border-radius: 10px 0px 0px 10px; }
.secAPI td:last-child { border-right: 1px solid #e6e6e6; border-radius: 0px 10px 10px 0px; }
.secAPI01 .main-api--text { font-size: 13px; line-height: 26px;margin-top: 20px; }
.secAPI01 .main-api--text::-webkit-scrollbar { height: 6px; }
.secAPI01 .main-api--text::-webkit-scrollbar-track { background: #FFFFFF; }
.secAPI01 .main-api--text::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 24px; }
.secAPI01 h5 { margin-top: 16px; }
.secAPI01 p { margin-top: 12px; }
.apiPage .secAPI01 h6 { font-size: 13px; line-height: 20px; color: var(--gray); font-weight: 500; }
.apiPage .secAPI01 ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.apiPage .secAPI01 li { background: linear-gradient(90deg, #f3b024, #ffe371); border-radius: 4px; color: #191919; font-size: 14px; line-height: 20px; font-weight: 500; text-transform: capitalize; padding: 2px 8px; }
.apiPage .secAPI01 li:nth-child(2) { background: linear-gradient(90deg, #59d1ac, #91ffdd); }
.apiPage .secAPI01 li:nth-child(3) { background: linear-gradient(90deg, #ffa7a3, #ffdcd4); }
.apiPage .secAPI01 li:nth-child(4) { background: linear-gradient(90deg, #70d7ff, #c0ebff); }
.apiPage .secAPI01 li:nth-child(5) { background: linear-gradient(90deg, #be9dff, #d1d4ff); }
.apiPage .secAPI01 li:nth-child(6) { background: linear-gradient(90deg, #f3b024, #ffe371); }
.apiPage .secAPI01 li:nth-child(7) { background: linear-gradient(90deg, #59d1ac, #91ffdd); }
.apiPage .secAPI01 li:nth-child(8) { background: linear-gradient(90deg, #ffa7a3, #ffdcd4); }
.apiPage .secAPI01 li:nth-child(9) { background: linear-gradient(90deg, #70d7ff, #c0ebff); }
.apiPage .secAPI01 li:nth-child(10) { background: linear-gradient(90deg, #be9dff, #d1d4ff); }
.apiPage .secAPI02 { margin-top: 32px; }
.apiPage .secAPI02 .box { margin-top: 12px; }
.apiPage .secAPI02 h4 { margin-top: 32px; margin-bottom: 12px; }
.apiPage .secAPI04 h2 { margin-bottom: 16px; }
.apiPage .secAPI04 .box { margin-bottom: 24px; }
.apiPage .secAPI04 .box:last-child { margin-bottom: 0px; }
.apiPage .secAPI04 h4 { display: flex; align-items: center; margin-bottom: 12px; }
.apiPage .secAPI04 h4 span { font-size: 13px; text-transform: capitalize; margin-left: auto; }
.apiPage .secAPI04 h4 span:after { content: "required"; font-size: 10px; line-height: 18px; color: #dd1e2e; position: relative; padding-left: 4px; top: -6px; }
.apiPage .secAPI05 h6 { font-size: 16px; line-height: 22px; font-weight: 400; margin-top: 10px; }
.apiPage .secAPI05 .box { margin-top: 24px; }
.apiPage .secAPI05 p { font-size: 12px; line-height: 20px; }

.apiPage aside { width: 480px; position: sticky; top: 78px; border-left: 1px solid #DDDDDD; height: calc(100vh - 78px); padding: 24px 15px;    overflow-x: hidden; overflow-y: auto; }
.apiPage aside video { width: 100%; margin-bottom: 24px; }
.apiPage aside h6 { font-size: 14px; line-height: 22px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 16px; }
.apiPage aside .nav-tabs { justify-content: flex-start; gap: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; margin-bottom: 30px; }
.apiPage aside .nav-tabs::-webkit-scrollbar { height: 4px; }
.apiPage aside .nav-tabs::-webkit-scrollbar-track { background: #FFFFFF; }
.apiPage aside .nav-tabs::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.apiPage aside .nav-link { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 8px 16px; border-radius: 12px; border: 1px solid #ddd; font-size: 12px; }
.apiPage aside .nav-link:hover { background-color: var(--white); border-color: #ddd; color: var(--navi_blue); }
.apiPage aside .nav-link img { max-width: 32px; max-height: 16px; display: block; margin: 0 auto; }
.apiPage aside .tab-content { border-radius: 12px; overflow: hidden; }
.apiPage aside .codeTop { background-color: #303b42; display: flex;  align-items: center; justify-content: space-between; padding: 10px 16px; }
.apiPage aside .codeTop span { font-size: 12px; line-height: 18px; color: var(--white); text-transform: uppercase; font-weight: 600; }
.apiPage aside .tab-pane { background-color: #303b42; }
.apiPage aside .copyCode { background-color: #303b42; padding: 12px; border-top: 1px solid #444e62; display: flex; align-items: center; justify-content: space-between; }
.apiPage aside .copyCode button,
.apiPage aside .copyCode .btn { border: 1px solid #444e62; color: var(--white); height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.apiPage aside .copyCode .copy { background-color: #303b42; width: 40px; border-radius: 50%; }
.apiPage aside .copyCode .btn { background-color: var(--white); border-radius: 8px; color: #303b42; padding: 0px 16px; }
.apiPage aside .CodeMirror-scroll { max-height: calc(100vh - 320px) }

@media only screen and (max-width: 1599.98px) {
    .apiPage main { width: calc(100% - 290px - 400px); }
    .apiPage aside { width: 400px; }
    .secAPI01 h5 { font-size: 18px; line-height: 28px; }
    .secAPI p { font-size: 14px; line-height: 22px; }
    .apiPage main h2 { font-size: 22px;; line-height: 30px; }
    .secAPI .referanceList li, .secAPI .referanceList h6, .secAPI .parameters ul li, .secAPI .parameters h6, .secAPI .authorizationList h6 { font-size: 14px; line-height: 20px; }
    .secAPI .authorizationList { gap: 12px; }
    .secAPI .authorizationList li { padding: 10px 30px; font-size: 14px; line-height: 20px; }
}
@media only screen and (min-width: 1300px) {
    .apiPage nav .collapse.dontCollase { display: block; height: auto !important; visibility: visible; }
}
@media only screen and (max-width: 1299.98px) {
    .apiPage .flexBox { padding: 0px; }
    .apiPage nav { width: 100%; border: none; height: auto; padding: 0px; border-bottom: none; top: 79px; z-index: 9; }
    .apiPage nav .top { background-color: transparent; border-bottom: 1px solid #DEDEDE; margin: 0px; padding: 16px 24px; align-items: flex-start; }
    .apiPage nav h5 { position: relative; display: flex; align-items: center; gap: 16px; padding: 0px; cursor: pointer; font-size: 20px; line-height: 24px; }
    .apiPage nav h5:before { content: "\f105"; font-family: FontAwesome; width: 16px; text-align: center; }
    .apiPage nav h5[aria-expanded="true"]:before { content: "\f107"; }
    .apiPage nav .dropdown { display: inline-flex; flex-direction: column; text-align: right; align-items: flex-end; }
    .apiPage nav .dropdown-menu { position: relative !important; transform: none !important; }
    .apiPage nav #apiToggle { max-height: calc(100vh - 134px); }
    .apiPage .heading { gap: 8px; }
    .apiPage nav ul { padding: 12px 0px; }
    .apiPage main { width: calc(100% - 480px); }
    .apiPage aside { width: 480px; top: 137px; }
}
@media only screen and (max-width: 1199.98px) {
    .apiPage nav { top: 65px; }
    .apiPage nav #apiToggle { max-height: calc(100vh - 119px); }
    .apiPage main { padding: 24px; width: 100%; }
    .secAPI .important { line-height: 24px; }
    .apiPage aside { padding: 24px 24px 50px; width: 100%; height: auto; position: relative; top: auto; }
    .apiPage aside video { display: none; }
    .apiPage aside .btn-group { margin-left: 0px; }
    .apiPage aside .dropdown-toggle { display: none; }
    .apiPage aside .nav-link:hover { border-color: var(--navi_blue); }
    .apiPage aside .dropdown-menu { display: flex; gap: 12px; padding: 0px; border: none; box-sizing: border-box; background-color: transparent; backdrop-filter: none; position: relative; left: auto; top: auto; transition: none; margin: 0px; }
    .apiPage aside .dropdown-menu .nav-link { padding: 8px 12px; border-radius: 12px; border: 1px solid #ddd; font-size: 12px; }
    .apiPage aside .dropdown-menu .nav-link.active { color: var(--navi_blue); border-color: var(--navi_blue); background-color: var(--white); }
    .apiPage aside .CodeMirror-scroll { max-height: 50vh }
    .secAPI .parameters > li { padding-left: 0px; padding-right: 0px; }
}
@media only screen and (max-width: 991.98px) {
    .apiPage nav h5 { font-size: 18px; line-height: 22px; }
    .apiPage nav h5:before { width: 12px; }
    .apiPage nav .dropdown-toggle { line-height: 22px; }
    .apiPage nav #apiToggle { padding: 0px; }
}
@media only screen and (max-width: 767.98px) {
    .apiPage nav { top: 61px; }
    .apiPage nav #apiToggle { max-height: calc(100vh - 116px); }
    .apiPage aside .dropdown-menu { gap: 4px; }
    .apiPage .heading { font-size: 16px; line-height: 22px; }
    .apiPage main h1 { font-size: 28px; line-height: 36px; }
    .secAPI .parameters .content { margin-top: 20px; padding-left: 16px; }
    .secAPI .important { font-size: 14px; line-height: 24px; }
    .secAPI .referanceList li { width: 100%; gap: 8px; }
    .secAPI .authorizationList li { width: 100%; flex-direction: column; gap: 10px; text-align: left; align-items: flex-start; padding: 16px; }
    .secAPI .parameters h5 { margin-top: 16px; }
    .secAPI .parameters ul li { margin-bottom: 16px; }
    .secAPI .responseTab .nav-tabs { display: block; margin: 20px -24px 24px; padding: 0px 24px; }
    .apiPage .box { border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0px; }
    .apiPage .secAPI05 .box { margin-top: 16px; }
    .apiPage aside .nav-tabs { margin: 0px -24px 24px; padding: 2px 24px; }
}


/* Features -------------------------------------------------------*/
.featuresPage { padding: 80px 0px; }
.featuresPage h1 { text-align: center; }
.featuresPage h4 { margin-top: 60px; padding: 0px 13px; }
.featuresPage h5 { text-align: center; }
.featuresPage ul { display: flex; flex-wrap: wrap; row-gap: 24px; column-gap: 8px; margin-top: 16px; }
.featuresPage li { width: calc((100% - 16px) / 3); }
.featuresPage li a { display: inline-block; vertical-align: top; height: 100%; width: 100%; line-height: 0px; padding: 12px; border: 1px solid transparent; border-radius: 12px; }
.featuresPage li a:hover { border-color: #ddd; box-shadow: 0 8px 28px 4px rgba(0,0,0,.05); background-color: var(--light_bg); }
.featuresPage figure { line-height: 0px; border-radius: 8px; overflow: hidden; }
.featuresPage figure img { width: 100% }
.featuresPage h6 { margin-top: 20px; font-weight: 600; }
.featuresPage p { font-size: 14px; line-height: 20px; }

@media only screen and (max-width: 991.98px) {
    .featuresPage { padding: 50px 0px 70px; }
    .featuresPage h4 { margin-top: 32px; }
    .featuresPage li { width: calc((100% - 24px) / 2); }
}
@media only screen and (max-width: 479.98px) {
    .featuresPage { padding: 40px 0px 70px; }
    .featuresPage li { width: 100%; }
}


/* Feature Banner -------------------------------------------------------*/
.featureBanner { padding: 100px 0px; background-color: var(--white); }
.featureBanner .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.featureBanner .aside-01 { width: 45%; position: relative; }
.featureBanner video,
.featureBanner img { width: 100%; border-radius: 16px; }
.featureBanner .aside-02 { width: 50%; }
.featureBanner span { display: inline-block; vertical-align: top; margin-bottom: 20px; font-size: 20px; line-height: 30px; color: var(--navi_blue); font-weight: 500; }
.featureBanner h5 { margin-bottom: 20px; color: #707177; font-weight: 400; }
.featureBanner .buttons { margin-top: 32px; display: flex; gap: 16px; }
.featureBanner .btn { border-radius: 12px; padding: 14px 24px; width: calc((100% - 16px) / 2); }
@media only screen and (max-width: 1799.96px) {
    .featureBanner { padding: 70px 0px 80px; }
}
@media only screen and (max-width: 991.96px) {
    .featureBanner { padding: 30px 0px 60px; overflow: hidden; }
    .featureBanner .aside-01 { width: 100%; order: 1; }
    .featureBanner .aside-02 { margin-top: 24px; order: 2; width: 100%; }
    .featureBanner h1 { font-size: 30px; line-height: 40px; }
    .featureBanner h5 { margin-top: 16px; margin-bottom: 0px; }
    .featureBanner .buttons { gap: 8px; margin-top: 32px;  }
}



/* more featutes tools -------------------------------------------------------*/
.featutesTool { padding: 70px 0px 0px; text-align: center; }
.featutesTool.bottomGap { margin-bottom: 70px; }
.featutesTool ul { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; }
.featutesTool ul a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0px 24px; border-radius: 8px; border: 1px solid var(--primary); background-color: var(--light_blue_bg); color: var(--dark); font-weight: 500; font-size: 14px; }
.featutesTool ul a:hover { background-color: var(--primary); color: var(--white); }


/* Use of Featutes AI -------------------------------------------------------*/
.featuresSteps { padding: 100px 0px 130px; }
.featuresSteps ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 50px; }
.featuresSteps li { width: calc((100% - 48px) / 3); background-color: var(--light_bg); border-radius: 18px; padding: 32px; }
.featuresSteps span { border-radius: 4px; background-color: var(--light_blue_bg); padding: 0px 8px; font-size: 12px; line-height: 20px; text-transform: capitalize; font-weight: 500; color: var(--navi_blue); }
.featuresSteps h5 { color: var(--black); font-weight: 600; margin-top: 12px; margin-bottom: 16px; }

@media only screen and (max-width: 991.98px) {
    .featuresSteps { padding: 80px 0px; }
    .featuresSteps li { width: 100%; }
}
@media only screen and (max-width: 767.98px) {
    .featuresSteps { padding: 50px 0px; }
    .featuresSteps ul { margin-top: 32px; }
    .featuresSteps li { padding: 32px 24px; }
}


/* Feature Page Section -------------------------------------------------------*/
.feature-sec-03 { padding: 80px 0px; text-align: center; }
.feature-sec-03 .wrapper { max-width: 700px; padding: 0px 24px; margin: 0px auto; }
.feature-sec-03 h2 { margin-bottom: 24px; }
.feature-sec-03 .btn { margin-top: 44px; }
@media only screen and (max-width: 991.98px) {
    .feature-sec-03 { padding: 60px 0px; }
}
@media only screen and (max-width: 767.98px) {
    .feature-sec-03 { padding: 50px 0px; }
}


/*Tools & API -------------------------------------------------------*/
.toolsApi { background-color: var(--white); }
.toolsApi nav { background-color: var(--white); border-bottom: 1px solid #e1e4e8; width: 100%; }
.toolsApi nav.sticky { position: sticky; top: 0px; z-index: 102; }
.toolsApi nav ul { display: flex; justify-content: space-between; max-width: 1140px; margin: 0 auto; height: 82px; }
.toolsApi nav a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--dark); font-size: 12px; font-weight: 500; line-height: 20px; padding: 12px 32px; background-color: #fff; cursor: pointer; white-space: nowrap; }
.toolsApi nav li.current a { color: var(--blue); border-color: var(--blue); border-left: 1px solid #e1e4e8; border-right: 1px solid #e1e4e8; padding-bottom: 13px; }
.toolsApi nav li.current svg path[fill] { fill: var(--primary); }
.toolsApi nav li.current svg path[stroke] { stroke: var(--primary); }
.toolsApi nav li.current svg mask path[fill] { fill: var(--white); }
.toolsApi section { padding: 50px 0px; position: relative; }
.toolsApi section:last-child { padding-bottom: 80px; }
.toolsApi section h2 { font-size: 28px; font-weight: 700; line-height: 36px; }
.toolsApi h5 { color: var(--black); font-weight: 600; margin-bottom: 8px; }
.toolsApi main img { max-width: 100%; max-height: 100%; }
.GeneralToolsFlexBox { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px; }
.GeneralToolsFlexBox .box { border-radius: 12px; background: var(--white); padding: 40px 16px; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07); -ms-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07); -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07); width: 100%; height: 100%; }
.GeneralToolsFlexBox figure { width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.GeneralToolsFlexBox .featureContent { width: calc(100% - 100px); }
.toolsApi .GeneralToolsFlexBox p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; box-orient: vertical; }
.GeneralToolsFlexBox button { border: none; background-color: var(--white); display: inline-block; vertical-align: top; font-size: 16px; line-height: 22px; text-transform: capitalize; color: var(--navi_blue); text-decoration: none; font-weight: 500; margin-top: 16px; }
.GeneralToolsFlexBox button i { display: inline-block; vertical-align: top; font-size: 14px; margin-left: 5px; margin-top: 4px; }
.GeneralToolsFlexBox button:hover { text-decoration: underline; }
.toolsApi .featured { padding: 70px 0px 80px; background-color: var(--white); }
.toolsApi .featured .box { background: var(--white); display: flex; flex-wrap: wrap; gap: 20px; padding: 30px; height: 100%; }
.toolsApi .featured h6 { margin-bottom: 36px; }
.toolsApi .featured aside { width: calc((100% - 30px) / 2); }
.toolsApi .featured .GeneralToolsFlexBox { gap: 30px; }
.toolsApi .featured span { display: inline-block; vertical-align: top; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; color: var(--gray); margin-bottom: 12px; }

.toolsApi .seeAll { display: inline-flex; align-items: center; gap: 12px; position: absolute; right: 0px; top: 3px; }
.toolsApi .seeAll span { border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.70); display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; margin: 0px; }
.toolsApi .seeAll span img { width: 10px; margin: 0px; }

.GeneralToolsSection aside { width: calc((100% - 72px) / 4); text-align: center; }
.GeneralToolsSection img { height: 80px; margin-bottom: 32px; }
.GeneralToolsSection h6 { font-weight: 700; color: var(--black); }
.GeneralToolsSection p { font-size: 14px; line-height: 20px; }
.GeneralToolsSection span { display: inline-block; vertical-align: top; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gray); margin-top: 12px; }


.GeneralToolsSection.pluginsPage { padding: 70px 0px; }
.GeneralToolsSection.pluginsPage h2 { font-size: 28px; font-weight: 700; line-height: 36px; margin-bottom: 30px; }
.workflowAutomation { margin-bottom: 80px; }
.workflowAutomation .box { border-radius: 12px; background: var(--white); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 30px; -webkit-box-shadow: 0px 1px 6px 5px #EDF0F6; -moz-box-shadow: 0px 1px 6px 5px #EDF0F6; -ms-box-shadow: 0px 1px 6px 5px #EDF0F6; -o-box-shadow: 0px 1px 6px 5px #EDF0F6; box-shadow: 0px 1px 6px 5px #EDF0F6; height: 100%; }
.workflowAutomation aside { width: 47%; }
.workflowAutomation video { width: 100%; border-radius: 12px; }
.workflowAutomation h6 { margin-bottom: 12px; }
.workflowAutomation span { display: inline-block; vertical-align: top; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gray); width: 100%; }
.workflowAutomation .btn { margin-top: 36px; }

@media only screen and (max-width: 1799.98px) {
    .toolsApi .featured { padding: 50px 0px 80px; }
}
@media only screen and (max-width: 1199.98px) {
    .toolsApi nav ul { overflow-y: hidden; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; height: 72px; }
    .toolsApi nav ul::-webkit-scrollbar { display: none; }
    .toolsApi nav a { height: 72px; padding-left: 24px; padding-right: 24px; }
    .toolsApi nav li.current svg { height: 18px; width: 18px; }
    .toolsApi section h1 { margin-bottom: 12px; }
    .toolsApi section h2 { margin: 0px; }
    .GeneralToolsSection aside { width: calc((100% - 48px) / 3); }
    .GeneralToolsFlexBox { padding: 20px 0px; margin: 0px; }
    .GeneralToolsFlexBox.nowrap { flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding: 12px 0px; }
    .GeneralToolsFlexBox.nowrap::-webkit-scrollbar { display: none; }
    .GeneralToolsFlexBox.nowrap aside { min-width: 260px; }
    .toolsApi .featured .nowrap aside { min-width: 540px; }
}
@media only screen and (max-width: 991.98px) {
    .GeneralToolsSection aside { width: calc((100% - 24px) / 2); }
    .toolsApi .featured { margin-bottom: 0px; }
}
@media only screen and (max-width: 767.98px) {
    .GeneralToolsFlexBox { gap: 16px; }
    .GeneralToolsSection aside { width: calc((100% - 16px) / 2); }
    .GeneralToolsFlexBox .box { padding: 32px 8px; }
    .GeneralToolsSection img { height: 60px; }
    .toolsApi .GeneralToolsFlexBox p { font-size: 12px; font-weight: 500; }
    .GeneralToolsFlexBox.nowrap { padding: 20px; margin: 0px -20px; }
    .toolsApi .seeAll { display: none; }
    .toolsApi section:first-child { padding-top: 40px; }
    .toolsApi section { padding: 60px 0px 0px; }
    .toolsApi .featured { padding: 40px 0px 0px; }
    .toolsApi section h2 { font-size: 24px; line-height: 32px; }
}
@media only screen and (max-width: 574.98px) {
    .toolsApi .featured .GeneralToolsFlexBox { gap: 16px; }
    .toolsApi .featured .nowrap aside { min-width: 94%; }
    .GeneralToolsFlexBox .featureContent { width: 100%; }
}
@media only screen and (max-width: 399.98px) {
    .GeneralToolsSection aside { width: 100%; }
}

.zohoPluginsPage .container { display: flex; flex-wrap: wrap; gap: 40px; }
.zohoPluginsPage main { width: 66%; }
.zohoPluginsPage aside { width: calc(100% - 66% - 40px); }
.zohoPluginsPage .carousel { border-radius: 16px; overflow: hidden; }
.zohoPluginsPage .carousel img { width: 100%; }
.zohoPluginsPage .description { padding: 48px 0px; border-bottom: 1px solid #D2D2D7; }
.zohoPluginsPage .description:last-child { padding-bottom: 0px; border-bottom: none; }
.zohoPluginsPage .topHeading { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.zohoPluginsPage .topHeading figure { width: 120px; height: 120px; background-color: #f4f5f7; padding: 12px; border-radius: 12px; display: inline-flex;    align-items: center; justify-content: center; }
.zohoPluginsPage .topHeading img { max-width: 70px; max-height: 70px; }
.zohoPluginsPage .topHeading .content { width: calc(100% - 150px); }
.zohoPluginsPage .topHeading h1 { font-size: 40px; line-height: 48px; }
.zohoPluginsPage .topHeading span { display: inline-block; vertical-align: top; width: 100%; font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; color: var(--gray); margin-top: 4px; }
.zohoPluginsPage .topHeading .btn { margin-top: 24px; }
.zohoPluginsPage .description h4 { margin-bottom: 20px; }
.zohoPluginsPage .description ul { margin-bottom: 24px; list-style: inside; }
.zohoPluginsPage .description ul:last-child { margin-bottom: 0px; }
.zohoPluginsPage .description li { margin-bottom: 24px; }
.zohoPluginsPage .description li:last-child { margin-bottom: 0px; }
.zohoPluginsPage .description li a {  }

.zohoPluginsPage .stickyBox { border-radius: 12px; border: 1px solid #E1E4E8; background: var(--white); -webkit-box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); padding: 20px 20px 24px 20px; position: sticky; top: 200px; }
.zohoPluginsPage .stickyBox .column { margin-bottom: 24px; }
.zohoPluginsPage .stickyBox h6 { font-weight: 700; margin-bottom: 4px; }
.zohoPluginsPage .stickyBox .btn { border-radius: 8px; }
.zohoPluginsPage .stickyBox a:not(.btn) { color: var(--gray); }
.zohoPluginsPage .stickyBox a:not(.btn):hover { text-decoration: underline; }
.zohoPluginsPage .social a { display: inline-block; vertical-align: top; font-size: 20px; line-height: 36px; color: #314572; width: 36px; height: 36px; border: 1px solid #001C5C; border-radius: 50%; text-align: center; overflow: hidden; margin-right: 10px; }
.zohoPluginsPage .social a:last-child { margin-right: 0px; }
.zohoPluginsPage .stickyBox text { font-size: 12px; line-height: 18px; color: #afafaf; display: inline-block; vertical-align: top; width: 100%; }


/* Mobile App -------------------------------------------------------*/
.mobileApp01 { padding: 100px 0px; }
.mobileApp01 .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.mobileApp01 .aside-01 { width: 46%; position: relative; }
.mobileApp01 .aside-02 { width: 46%; }
.mobileApp01 h1 { font-size: 60px; line-height: 70px; }
.mobileApp01 h5 { margin-top: 32px; }
.mobileApp01 .buttons { display: inline-flex; gap: 16px; margin-top: 46px;  }
.mobileApp01 video { width: 100%; border-radius: 12px; }
.mobileApp01 .circle { position: absolute; left: -30%; bottom: 0px; z-index: -1; }

@media only screen and (max-width: 991.96px) {
    .mobileApp01 { padding-top: 50px; overflow: hidden; }
    .mobileApp01 .aside-01, .mobileApp01 .aside-02 { width: 100%; }
    .mobileApp01 .aside-02 { margin-top: 24px; }
    .mobileApp01 h1 { font-size: 30px; line-height: 40px; }
    .mobileApp01 h5 { margin-top: 16px; }
    .mobileApp01 .buttons { gap: 8px; margin-top: 24px;  }
}


/* Download App -------------------------------------------------------*/
.GetApp { position: relative; background: #0b163f; margin: 280px 0px 0px; }
.GetApp .appScreen { position: relative; }
.GetApp .appImg { position: absolute; top: -200px; }
.GetApp .appImg:first-child { z-index: 3; width: 59%; left: 0%; }
.GetApp .appImg:nth-child(2) { z-index: 2; right: 1%; width: 58%; }
.GetApp .circle { position: relative; margin-top: -100px; max-width: 90%; }

.GetApp .download { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 70px 0px; }
.GetApp h2 { color: var(--white); }
.GetApp h6 { color: var(--white); margin-top: 24px; }
.GetApp .buttons { display: inline-flex; gap: 16px; margin-top: 36px;  }
.GetApp .buttons a { border: 1px solid var(--white); border-radius: 12px; overflow: hidden; }

@media only screen and (max-width: 1499.99px) {
    .GetApp .appImg { top: -90px; }
    .GetApp .circle { margin-top: -20px; }
}
@media only screen and (max-width: 991.99px) {
    .GetApp { margin-top: 100px }
    .GetApp .appImg { top: -140px; }
}
@media only screen and (max-width: 767.99px) {
    .GetApp { margin-top: 70px }
    .GetApp .appImg { top: -70px; }
    .GetApp .circle { margin-top: -20px; }
}

/* Features Slider -------------------------------------------------------*/
.featureSlider { overflow: hidden; padding: 80px 0px 100px; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; }
.featureSlider .swiper-slide a { border: 1px solid #dddddd; border-radius: 12px; overflow: hidden; padding-bottom: 20px; min-width: 282px; width: 100%; height: 100%; }
.featureSlider figure img { width: 100%; }
.featureSlider h6 { margin-top: 16px; font-weight: 600; padding: 0px 12px; }
.featureSlider p { font-size: 14px; line-height: 20px; padding: 0px 12px; }
.featureSlider .swiper-button-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.featureSlider .swiper-button-prev, .featureSlider .swiper-button-next { background-color: #F0F1F5; border-radius: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.featureSlider .swiper-button-prev svg, .featureSlider .swiper-button-next svg { width: 24px; }
.featureSlider .btn { width: 160px; display: flex; margin: 36px auto 0px; }
.featureSlider h2 { margin-bottom: 70px; text-align: center; }
.featureSlider .swiper-slide .box { border-radius: 16px; border: 3px solid #EDF0F2; background: var(--white); padding: 64px 48px; min-width: 282px; width: 100%; height: 100%; text-align: center; }
.featureSlider .box h5 { color: #454545; font-size: 16px; font-weight: 600; line-height: 24px; margin-top: 20px; }
@media only screen and (min-width: 992px) {
    .featureSlider .swiper-slide { width: 282px !important; }
}
@media only screen and (max-width: 991.98px) {
    .featureSlider { padding: 70px 0px; }
    .featureSlider .swiper-slide { flex-shrink: 0; }
    .featureSlider .swiper-slide a  { min-width: inherit; }
    .featureSlider .swiper-button-wrap { display: none; }
    .featureSlider .swiper-slide .box { min-width: inherit; }
    .featureSlider h2 { margin-bottom: 40px; }
}
@media only screen and (max-width: 767.98px) {
    .featureSlider { padding: 60px 0px; }
}


/* Integrations Workflow -------------------------------------------------------*/
.integrationsWorkflow { padding: 80px 0px; }
.integrationsWorkflow span { font-size: 14px; text-transform: uppercase; text-align: center; font-weight: 600; display: block; margin-bottom: 16px; }
.integrationsWorkflow h2 { text-align: center; }
.integrationsWorkflow .flex-vertical { display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; margin-top: 30px; }
.integrationsWorkflow .marquee-horizontal-large { position: relative; z-index: 20; display: flex; overflow: hidden; width: 100%; height: 130px; justify-content: flex-start; align-items: center; flex: 0 0 auto; }
.integrationsWorkflow .marquee-cover-horizontal { position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 10; background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 70%, #FFFFFF), linear-gradient(270deg, #FFFFFF, hsla(0, 0%, 100%, 0) 30%); }
.integrationsWorkflow .track-horizontal { display: flex; justify-content: flex-start; align-items: center; position: absolute; white-space: nowrap; will-change: transform; animation: marquee-horizontal 40s linear infinite; }
.integrationsWorkflow .track-horizontal-alt { position: absolute; white-space: nowrap; will-change: transform; animation: marquee-horizontal-alt 40s linear infinite; }
.integrationsWorkflow .flex-horizontal { display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center; gap: 16px; }
.integrationsWorkflow .flex-horizontal.flex-left { justify-content: flex-start; }
.integrationsWorkflow .icon-container-alt { display: flex; width: 180px; height: 110px; padding-right: 30px; padding-left: 30px; justify-content: center; align-items: center; flex: 0 0 auto; border-radius: 8px; border: 1px solid #eaeaea; background-color: #ffffff; }
.integrationsWorkflow .track-horizontal-alt { display: flex; justify-content: flex-start; align-items: center; }
.integrationsWorkflow .icon-container-alt img { max-width: 70%; max-height: 60%; filter: grayscale(0);  }
@keyframes marquee-horizontal {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes marquee-horizontal-alt {
    from { transform: translateX(-50%); }
    to { transform: translateX(0%); }
}
@media only screen and (max-width: 991.98px) {
    .integrationsWorkflow { padding: 50px 0px; }
    .integrationsWorkflow .icon-container-alt { width: 120px; height: 80px; }
    .integrationsWorkflow .marquee-horizontal-large { height: 100px; }
}


/* Desktop App Page Banner-------------------------- */
.wp-bnr-sec { padding: 70px 0px 100px; }
.wp-bnr-sec .container { display: flex;  flex-wrap: wrap; justify-content: space-between; align-items: center; }
.wp-bnr-sec .aside01 { width: 40%; }
.wp-bnr-sec .aside02 { width: 52%; }
.wp-bnr-sec video, .wp-bnr-sec img { width: 100%; border-radius: 12px; }
.wp-bnr-sec h1 span { display: block; font-size: 65%; }
.wp-bnr-sec .btn { margin-top: 32px; }
@media only screen and (max-width: 1799.98px) {
    .wp-bnr-sec { padding: 40px 0px 70px; }
}
@media only screen and (max-width: 991.98px) {
    .wp-bnr-sec { padding: 32px 0px 50px; }
    .wp-bnr-sec .aside01 { width: 100%; order: 2; margin-top: 32px; text-align: center; }
    .wp-bnr-sec .aside02 { width: 100%; order: 1; max-width: 500px; margin: 0 auto; }
}
@media only screen and (max-width: 767.98px) {
    .wp-bnr-sec { padding: 24px 0px 50px; }
    .wp-bnr-sec .btn { width: 100%; height: 50px; font-weight: 500; font-size: 16px; line-height: 24px; }
}

/* Play Ground Header ----------------------------------------------------*/
.sticktTopHeader { width: 100%; background-color: var(--white); border-bottom: 1px solid #F7F7FF; padding: 12px 0px; position: relative; z-index: 29; }
.sticktTopHeader .wrapper { display: flex;  flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0px 24px; }
.sticktTopHeader .buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sticktTopHeader .btn { padding: 8px 24px; font-size: 15px; font-weight: 600; }
.sticktTopHeader .btn img { height: 22px; }

.sticktTopHeader .featuresDropdown .dropdown-toggle,
.FeaturesDropdownWrapper .featuresDropdown .dropdown-toggle { border-radius: 8px; border: none; background-color: #F3F3F4; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 38px; padding: 0px 12px; color: var(--dark); font-size: 16px; line-height: 24px; }
.sticktTopHeader .featuresDropdown .dropdown-menu { -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); -moz-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); -ms-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); -o-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); border: none; width: 260px; border-radius: 12px; margin-top: 15px; max-height: 70vh; overflow-x: hidden; overflow-y: auto; }
.sticktTopHeader .featuresDropdown .dropdown-menu::-webkit-scrollbar { width: 6px; }
.sticktTopHeader .featuresDropdown .dropdown-menu::-webkit-scrollbar-track { background-color: #f7f7f7; -webkit-border-radius: 0px; border-radius: 0px; }
.sticktTopHeader .featuresDropdown .dropdown-menu::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #DDDDDD; }
.sticktTopHeader .featuresDropdown ul { padding: 12px 4px; }
.sticktTopHeader .featuresDropdown li,
.FeaturesDropdownWrapper .featuresDropdown li { width: 100%; margin-bottom: 4px; }
.sticktTopHeader .featuresDropdown li:last-child,
.FeaturesDropdownWrapper .featuresDropdown li:last-child { margin-bottom: 0px; }
.sticktTopHeader .featuresDropdown li img,
.FeaturesDropdownWrapper .featuresDropdown li img { height: 20px; }
.sticktTopHeader .featuresDropdown li a,
.FeaturesDropdownWrapper .featuresDropdown li a { border-radius: 4px; padding: 10px; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: #121212; width: 100%; }
.sticktTopHeader .featuresDropdown li a:hover,
.FeaturesDropdownWrapper .featuresDropdown li a:hover { background-color: #F3F3F4; }
.sticktTopHeader .navber-links .creditList { margin-right: 16px; padding-right: 17px; position: relative; }
.sticktTopHeader .navber-links .creditList:after { content: ""; width: 1px; height: 20px; background-color: #dddddd; position: absolute; right: 0px; top: 9px; }
.sticktTopHeader .dropdownToggle { font-size: 14px; line-height: 18px; text-transform: none; color: var(--dark); font-weight: 400; padding: 0px; }
.sticktTopHeader .dropdownToggle span { display: inline-block; vertical-align: top; background-image: url(../images/user.png); width: 38px; height: 38px; border-radius: 50%; background-color: var(--light_blue_bg); background-repeat: no-repeat; background-position: center; background-size: 16px; border: 1px solid var(--navi_blue); }
.sticktTopHeader .dropdownToggle:after { content: "\f0dd"; display: inline-block; vertical-align: top; border: none; font-family: FontAwesome; text-align: center; font-weight: normal; margin-left: 5px; margin-top: 8px; z-index: 9; display: none; }
.sticktTopHeader .dropdownToggle:hover { color: var(--dark); background: none; }
.sticktTopHeader .accountDropdown { background-color: var(--white); border: none; padding: 20px; width: 260px; margin-top: 10px; -webkit-box-shadow: 0px 0px 20px 0px #eaf1ff; -moz-box-shadow: 0px 0px 20px 0px #eaf1ff; -ms-box-shadow: 0px 0px 20px 0px #eaf1ff; -o-box-shadow: 0px 0px 20px 0px #eaf1ff; box-shadow: 0px 0px 20px 0px #eaf1ff; border-radius: 16px; margin-right: -17px; }
.sticktTopHeader .accountDropdown:before { content: ""; position: absolute; right: 25px; top: -8px; border-left: 6px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--white); }
.sticktTopHeader .accountDropdown li { font-size: 14px; line-height: 20px; margin-bottom: 20px; }
.sticktTopHeader .accountDropdown li:first-child a { padding: 0px; margin-left: 15px; }
.sticktTopHeader .accountDropdown li:last-child { border-bottom: none; margin: 0px; }
.sticktTopHeader .accountDropdown li a { padding: 5px 0px; color: var(--dark) }
.sticktTopHeader .accountDropdown li span { display: block; font-size: 12px; line-height: 18px; word-break: break-all; }
.sticktTopHeader .accountDropdown li img { width: 20px; display: inline; margin-right: 10px; }
.sticktTopHeader .accountDropdown li img.blue { display: none; }
.sticktTopHeader .accountDropdown li a:hover { background-color: transparent; color: var(--primary) }
.sticktTopHeader .accountDropdown li a:hover img.blue { display: inline; }
.sticktTopHeader .accountDropdown li a:hover img.black { display: none; }
.sticktTopHeader .login { margin-right: 8px; }
.sticktTopHeader .login:last-child { margin-right: 0px; }
.sticktTopHeader .login a { border-radius: 8px; color: var(--black); font-size: 16px; font-weight: 500; line-height: 20px; display: flex; height: 38px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--light_bg); padding: 0px 12px; }
.sticktTopHeader .login a:hover { color: var(--primary); }
.sticktTopHeader .credits { border-radius: 26px; background: #F5F5F5;display: inline-flex; align-items: center; gap: 6px; color: var(--black); font-size: 14px; font-weight: 600; line-height: 20px; padding: 8px 12px; }
.sticktTopHeader .credits img { height: 22px; }
.sticktTopHeader .credits button { border: none; background-color: transparent; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.sticktTopHeader .credits button img { height: 16px; }
.sticktTopHeader .credits .credit-refresh-btn img { -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }
.FeaturesDropdownWrapper { display: none; }

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 1199.98px) {
    .sticktTopHeader .navber-links { display: flex; max-width: inherit; margin: 0px; }
    .sticktTopHeader { padding: 8px 0px; border-color: #EEEEEE; }
    .sticktTopHeader .wrapper { padding: 0px 16px; }
    .sticktTopHeader .navbar-brand img { width: 100px; }
    .sticktTopHeader .navber-links { padding-bottom: 0px; }
    .sticktTopHeader .featuresDropdown { width: calc(100% - 136px); max-width: 300px; }
    .sticktTopHeader .featuresDropdown .dropdown-toggle { width: 100%; }
    .sticktTopHeader .featuresDropdown span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sticktTopHeader .featuresDropdown .dropdown-toggle { font-size: 14px; gap: 8px; }
}
@media only screen and (max-width: 991.98px) {
    .sticktTopHeader.uploadPageHeade { display: none; }
    .FeaturesDropdownWrapper.uploadPageDropdown { display: none; }
}
@media only screen and (max-width: 767.98px) {
    .sticktTopHeader .login a { font-size: 14px; }
    .sticktTopHeader { border: none; }
    .sticktTopHeader .featuresDropdown { display: none; }
    .sticktTopHeader .navber-links .creditList { margin-right: 8px; padding-right: 9px; }
    .sticktTopHeader .credits { gap: 2px; font-size: 13px; padding: 8px; max-width: 180px; }
    .sticktTopHeader .credits > img { display: none; }
    .sticktTopHeader .dropdownToggle span { width: 32px; height: 32px; background-size: 12px; }
    .FeaturesDropdownWrapper { background-color: #CCCCCC; display: block; padding: 1px 0px; }
    .FeaturesDropdownWrapper .featuresDropdown .dropdown-toggle { border-radius: 0px; background-color: var(--light_blue_bg); height: 40px; width: 100%; }
    .FeaturesDropdownWrapper .featuresDropdown .dropdown-menu { position: fixed !important; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; margin: 0px; transform: none !important; border: none; border-radius: 0px; padding: 32px 0px; }
    .FeaturesDropdownWrapper .featuresDropdown .close { border: none; border-radius: 50%; width: 28px; height: 28px; position: absolute; right: 8px;  top: 8px; }
    .FeaturesDropdownWrapper .featuresDropdown .close img { width: 100%; }
    .FeaturesDropdownWrapper .featuresDropdown ul { padding: 0px 8px; height: 100%; overflow-x: hidden; overflow-y: auto; }
    .FeaturesDropdownWrapper .featuresDropdown li { margin-bottom: 12px; }
}


/* Play Ground Upload Secttion ----------------------------------------------------*/
.playgroundUpload { padding: 100px 0px; text-align: center; min-height: calc(100vh - 63px); position: relative; background-color: var(--white); z-index: 25; }
.playgroundUpload h1 { max-width: 600px; margin: 0px auto 60px; }
.playgroundUpload .uploadWrapper { max-width: 450px; margin: 0px auto; }
.playgroundUpload .uploadWrapper h6 { margin-top: 24px; }
@media only screen and (max-width: 767.98px) {
    .playgroundUpload { padding: 70px 0px; min-height: calc(100vh - 95px); display: flex; flex-wrap: wrap; align-items: center;  }
    .playgroundUpload h1 { margin-bottom: 40px; font-size: 28px; line-height: 36px; }
}
@media only screen and (max-height: 800px) {
    .playgroundUpload { padding: 80px 0px; }
    .playgroundUpload h1 { font-size: 34px; line-height: 42px; margin-bottom: 50px; }
}
@media only screen and (max-height: 750px) {
    .playgroundUpload { padding: 50px 0px; }
}


/* Feature Page Section -------------------------------------------------------*/
.playGround { background-color: var(--light); height: calc(100vh - 63px); height: calc(100svh - 63px); padding: 8px; }
.playGround .buttons { border-radius: 8px; background-color: #fff; -webkit-box-shadow: 0px 0px 4px 0px #ddd; -moz-box-shadow: 0px 0px 4px 0px #ddd; -ms-box-shadow: 0px 0px 4px 0px #ddd; -o-box-shadow: 0px 0px 4px 0px #ddd; box-shadow: 0px 0px 4px 0px #ddd; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 9; }
.playGround .buttons .dropdown { width: 100%; position: relative; }
.playGround .buttons .dropdown-toggle { height: 48px; display: inline-flex; flex-wrap: wrap; flex-direction: column; justify-content: center; background-color: #EDF0F2; border-radius: 8px; border: 1px solid #e5e7eb; padding: 0px 12px; width: 100%; font-size: 16px; line-height: 22px; color: var(--dark); font-weight: 400; min-width: 210px; }
.playGround .buttons .dropdown-toggle span { display: inline-flex; width: 100%; font-size: 10px; line-height: 10px; letter-spacing: 0.5px; color: var(--primary); align-items: center; gap: 2px; }
.playGround .buttons .dropdown-toggle strong { padding: 0px 3px; border-radius: 4px; background-color: var(--primary); color: var(--white); font-weight: 500; height: 14px; display: inline-block; vertical-align: middle; line-height: 14px; font-size: 10px; }
.playGround .buttons .dropdown-toggle:after { position: absolute; right: 10px; }
.playGround .buttons .dropdownMenuWrap { position: absolute; left: 0px; top: calc(100% + 8px); -webkit-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -moz-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -ms-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -o-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); background-color: var(--white); border: 1px solid #e5e7eb; border-radius: 12px; }
.playGround .buttons .dropdown:last-child .dropdownMenuWrap { left: auto; right: 0px; }
.playGround .buttons .dropdownMenu { border-radius: 12px; padding: 16px; width: 396px; overflow-x: hidden; overflow-y: auto; max-height: 60vh; }
.playGround .buttons .dropdownMenu::-webkit-scrollbar { width: 4px; }
.playGround .buttons .dropdownMenu::-webkit-scrollbar-track { background: #FFFFFF; }
.playGround .buttons .dropdownMenu::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.playGround .buttons h5 { margin-bottom: 20px; }
.playGround .toggleSwitch { display: flex; flex-wrap: wrap; gap: 12px; }
.playGround .toggleSwitch .custom-switch { position: relative; display: block; margin: 0px; }
.playGround .btn.createBg { background-color: var(--blue); border-color: var(--blue); gap: 8px; padding: 9px 12px; }
.playGround .btn.createBg:hover { background-color: var(--navi_blue); border-color: var(--navi_blue); }
.playGround .btn-rev { gap: 6px; padding: 8px 24px 8px 12px; }
.playGround .btn-rev img { height: 24px; }
.playGround .nav-tabs {margin-bottom: 16px; gap: 12px; justify-content: flex-start; }
.playGround .nav-tabs .nav-item { width: calc((100% - 24px) / 2); }
.playGround .nav-tabs.twoNav .nav-item { width: calc((100% - 12px) / 2); }
.playGround .nav-tabs .nav-link { width: 100%; border: none; border-radius: 8px 8px 0px 0px; background-color: transparent; flex-direction: column; padding: 8px 2px; height: auto; font-size: 14px; font-weight: 500; gap: 4px; line-height: 20px; }
.playGround .nav-tabs .nav-link img { max-width: 30px; height: 20px; }
.playGround .nav-tabs .nav-link.active, .playGround .nav-tabs .nav-item.show .nav-link { background-color: var(--white); }
.playGround .color-options,
.playGround .image-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.playGround .color-options li { width: 49px; height: 49px; }
.playGround .color-options li button { width: 100%; height: 100%; border-radius: 50%; border: 1px solid #ddd; }
.playGround .color-options li button.active { border-color: var(--primary); }
.playGround .color-options .sp-replacer { width: 100%; height: 100%; border-radius: 50%; }
.playGround .color-options .sp-preview { background-image: url('../images/playGround/color-picker.svg') }
.playGround .image-options li { width: calc((100% - 30px) / 3); height: 80px; border-radius: 8px; border: 1px solid #ddd; overflow: hidden; position: relative; }
.playGround .image-options input[type="file"] { height: 100% !important; -webkit-appearance: none; appearance: none; position: absolute; left: 0px; top: 0px; opacity: 0; cursor: pointer; }
.playGround .image-options label { width: 100%; height: 100%; display: inline-flex; flex-flow: wrap; align-items: center; justify-content: center; padding: 10px; margin: 0px; text-align: center; cursor: pointer; cursor: pointer; }
.playGround .image-options button { border: none; width: 100%; height: 100%; }
.playGround .image-options button img { width: 100%; height: 100%; object-fit: cover; }
.playGround .error { font-size: 13px; line-height: 19px; color: var(--red); display: inline-block; vertical-align: top; width: 100%; }
.playGround .optionsBtns { display: flex; flex-wrap: wrap; gap: 12px; }
.playGround .optionsBtns button { border: none; background-color: transparent; padding: 0px; margin: 0px; font-size: 14px; line-height: 20px; color: var(--navi_blue); text-decoration: underline; cursor: pointer; }

.playGround .prompt { padding-left: 32px; }
.playGround .promptType { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.playGround .prompt .custom-control-label { color: var(--dark); display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.playGround .prompt .custom-control-label svg { height: 40px; }
.playGround .prompt .custom-control-label:before { width: 22px; height: 22px; left: -32px; top: 8px; }
.playGround .prompt .custom-control-label:after { top: 1px; left: -39px; display: block; width: 36px; height: 36px; }

.playGround .paddingRangeSelect { display: flex; align-items: center; gap: 12px; }
.playGround .paddingRangeSelect .range { width: calc(100% - 112px); }
.playGround .paddingType { width: 100px; height: 30px; display: inline-flex; border: 1px solid #ddd; border-radius: 12px; }
.playGround .paddingType input[type='number'] { border: none; line-height: 24px; padding: 2px; text-align: center; font-size: 12px; font-weight: 600; height: 100%; width: 50px; -webkit-appearance: none; appearance: none; }
.playGround .paddingType .dropdown { width: 50px; }
.playGround .paddingType .dropdown-toggle { border: none; background-color: #ddd; border-radius: 0px 12px 12px 0px; height: 28px; font-size: 12px;     font-weight: 500; color: var(--black); min-width: inherit; width: 100%; }
.playGround .paddingType .dropdown-toggle:after { right: 8px; }
.playGround .paddingType .dropdown-menu { width: 50px; min-width: 50px; border: none; border-radius: 12px; -webkit-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); --box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); --box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); --box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 0px; overflow: hidden; margin-bottom: 8px; }
.playGround .paddingType .dropdown-item { padding: 10px 2px; text-align: center; font-size: 13px; line-height: 18px; font-weight: 500; }
.playGround .paddingType .dropdown-item:hover,
.playGround .paddingType .dropdown-item:active { background-color: var(--navi_blue); color: var(--white) }

.playGround .addSidePadding { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 20px; }
.playGround .addSidePadding .paddingBox { display: inline-flex; align-items: center; gap: 12px; width: calc((100% - 12px) / 2); }
.playGround .addSidePadding svg { width: 20px; height: 20px; }

.playGround .form-check input,
.playGround .form-check.form-check-inline label { cursor: pointer; }

.playGround .pgSection { display: flex; height: 100%; background-color: var(--light); }
.playGround .pgAside01 { width: 120px; height: 100%; background-color: var(--white); border-radius: 8px; -webkit-box-shadow: 0px 0px 4px 0px #ddd; -moz-box-shadow: 0px 0px 4px 0px #ddd; -ms-box-shadow: 0px 0px 4px 0px #ddd; -o-box-shadow: 0px 0px 4px 0px #ddd; box-shadow: 0px 0px 4px 0px #ddd; }
.playGround .pgAside01.w-340 { width: 340px; }
.playGround .pgAside01 h6 { padding: 16px 16px 0px; }
.playGround .pgAside01 ul { display: flex; flex-direction: column; gap: 8px; padding: 16px; height: 100%; overflow-x: hidden; overflow-y: auto; }
.playGround .pgAside01 ul::-webkit-scrollbar { width: 4px; }
.playGround .pgAside01 ul::-webkit-scrollbar-track { background: #FFFFFF; }
.playGround .pgAside01 ul::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.playGround .pgAside01 button { background-color: var(--white); width: 87px; height: 87px; border-radius: 8px; border: 1px solid #e5e7eb; overflow: hidden; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; line-height: 18px; color: var(--black); font-weight: 500; cursor: pointer; }
.playGround .pgAside01 button.active { border: 2px solid #007bff; border-radius: 4px; }
.playGround .pgAside01 button img { width: 100%; height: 100%; object-fit: cover; }
.playGround .pgAside01.w-340 ul { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px; height: auto; max-height: 100%; padding-top: 6px; }
.playGround .pgAside01.w-340 li { line-height: 0px; width: calc((100% - 4px) / 2); }
.playGround .pgAside01.w-340 button { width: 100%; height: auto; }
.playGround .customTabNav { background-color: #F1F1F1; border-radius: 10px; padding: 4px; display: flex; gap: 9px }
.playGround .customTabNav li:first-child { width: 150px; }
.playGround .customTabNav li:last-child { width: 100px; }
.playGround .customTabNav a { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 4px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--dark); text-transform: capitalize; width: 100%; }
.playGround .customTabNav .tabActive a { background-color: var(--white); }
.playGround .customTabsContent { padding: 16px 0px; }

.playGround .mesurement { gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.playGround .mesurement .form-group { width: calc((100% - 56px) / 2); margin: 0px; }
.playGround .mesurement.noLock .form-group { width: calc((100% - 8px) / 2); }
.playGround .mesurement input[type='number'] { height: 40px; line-height: 38px; -webkit-appearance: none; -mox-appearance: none; appearance: none; }
.playGround .mesurement .lock { width: 40px; height: 40px; background-color: transparent; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.playGround .mesurement .lock img { height: 20px; }
.playGround .mesurement .error { font-size: 13px; line-height: 20px; color: #cf0013; width: 100%; display: none; }
.playGround .mesurement.formError input[type='number'] { border-color: #cf0013; }
.playGround .mesurement.formError .error { display: inline-block; }
.playGround .directSearch { margin-top: 20px; position: relative; }
.playGround .directSearch input[type='search'] { height: 42px; line-height: 38px; background-image: url('../images/playGround/icon-search.svg'); background-repeat: no-repeat; background-position: 12px center; background-size: 18px; padding-left: 36px; }
.playGround .directSearch .clear { background-color: transparent; border: none; width: 20px; height: 20px; display: inline-flex; align-items: center;
    justify-content: center; position: absolute; right: 6px; top: 11px; cursor: pointer; }
.playGround .directSearch .clear img { width: 100%; height: 100%; }

.playGround .sizeTabContent h6 { font-size: 18px; line-height: 26px; margin-top: 20px; color: var(--black) }
.playGround .sizeTabContent ul { margin-top: 6px; }
.playGround .sizeTabContent li { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #ddd; border-radius: 4px; padding: 10px 6px; font-size: 14px; line-height: 20px; color: var(--dark); cursor: pointer; }
.playGround .sizeTabContent li:last-child { border: none }
.playGround .sizeTabContent li:hover { background-color: #F3F3F4; }
.playGround .sizeTabContent li.sizeBorder { background-color: #d5d5d5; }
.playGround .sizeTabContent li img { width: 20px; }
.playGround .sizeTabContent li strong { font-weight: 500; }
.playGround .sizeTabContent li span { margin-left: auto; color: var(--gray); font-size: 12px; }

.playGround .pgAside02 { background-color: var(--white); width: 350px; padding: 16px; height: 100%; position: relative; border-radius: 8px; -webkit-box-shadow: 0px 0px 4px 0px #ddd; -moz-box-shadow: 0px 0px 4px 0px #ddd; -ms-box-shadow: 0px 0px 4px 0px #ddd; -o-box-shadow: 0px 0px 4px 0px #ddd; box-shadow: 0px 0px 4px 0px #ddd; padding: 16px; overflow-x: hidden; overflow-y: auto; }
.playGround .pgAside02::-webkit-scrollbar { width: 4px; }
.playGround .pgAside02::-webkit-scrollbar-track { background: #FFFFFF; }
.playGround .pgAside02::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.playGround .pgAside02 h6 { color: var(--black); text-transform: capitalize; padding-bottom: 8px; }
.playGround .pgAside02 hr { width: 100%; height: 1px; border: none; border-top: 1px solid #F0F0F0; margin: 16px 0px; }
.pgAside02:has( .collapsePopup.show) { overflow: hidden; }
.playGround .downloadButtons { border-radius: 8px; background-color: var(--white); padding: 8px 12px; margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin: auto auto 0px; }
.playGround .downloadButtons .dropdown-toggle,
.playGround .downloadButtons .btn { padding: 10px; height: 48px; width: 340px; overflow: hidden; position: relative; }
.playGround .downloadButtons.twoButton .btn { max-width: calc((100% - 12px) / 2); }
.playGround .downloadButtons.twoButton .downloadDropdown { width: calc((100% - 12px) / 2); }
.playGround .downloadButtons .btn .size { font-size: 12px; font-weight: 400; }
.playGround .downloadButtons .btn img { height: 16px; }
.playGround .downloadButtons .btn.btn-rev:hover { background-color: var(--light_blue_bg); color: var(--black); }
.playGround .downloadButtons .btn span.spinner { display: none; }
.playGround .downloadButtons .processbtn span.spinner, .playGround .downloadButtons .downloading span.spinner { position: absolute; display: block; }
.playGround .downloadButtons .btnProcess.processbtn img { display: block; }
.playGround .downloadButtons .btnProcess .t1 { display: block; }
.playGround .downloadButtons .btnProcess .t2 { display: none; }
.playGround .downloadButtons .btnProcess.processbtn .t1 { display: none; }
.playGround .downloadButtons .btnProcess.processbtn .t2 { display: block; }
.playGround .downloadButtons .dropdown-toggle:disabled,
.playGround .downloadButtons .btn:disabled { background-color: #AAAAAA; border-color: #AAAAAA; cursor: not-allowed; opacity: 0.6; }
.playGround .downloadButtons .btn.btn-rev:disabled { background-color: var(--white); color: #AAAAAA; }
.playGround .downloadButtons .downloadDropdown { position: relative; }
.playGround .downloadButtons .downloadDropdown .dropdown-toggle { max-width: 100%; }
.playGround .downloadButtons .dropdown-menu { border: none; border-radius: 24px; background: var(--white); -webkit-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 8px; width: 320px; top: auto !important; bottom: 60px; transform: none !important; left: auto !important; right: 0px; }
.playGround .downloadButtons .dropdown-menu ul { display: flex; flex-direction: column; gap: 8px; }
.playGround .downloadButtons .dropdown-menu li { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px; border-radius: 24px; }
.playGround .downloadButtons .dropdown-menu li:hover { background-color: #E4EEF5; }
.playGround .downloadButtons .dropdown-menu p { color: var(--black); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.36px; margin: 0px; }
.playGround .downloadButtons .dropdown-menu span { color: var(--black); font-size: 16px; font-weight: 400; line-height: 24px; margin-top: 4px; display: block; }
.playGround .downloadButtons .dropdown-menu button { border: none; border-radius: 30px; background: #D9D9D9; color: var(--black); text-align: center; font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: 0.36px; padding: 2px 14px; display: flex; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; }
.playGround .downloadButtons .dropdown-menu button.btnBlue { background-color: var(--primary); color: var(--white) }

.playGround .pgMain { width: calc(100% - 120px - 350px); padding: 8px 32px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: auto; }
.playGround .pgMain.p8 { padding: 8px; }
.playGround .pgMain.singleAside { width: calc(100% - 120px); }
.playGround .imageUploadDIv { width: 100%; max-width:700px; margin:auto; height: calc(100% - 170px); overflow: auto; display: flex; position:relative }
.playGround .imageUploadDIv.small { height: calc(100% - 136px); }
.playGround .imageUploadDIv img {max-width: 100%; max-height: 100%; margin: auto; background-image: url('../images/sample/transparent-bg.jpg'); background-repeat: repeat; background-position: 0px 0px; }
.imageUploadDIv .slazzerLoader { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
.playGround .pgMain p { font-size: 12px; line-height: 18px; color: var(--gray); margin-top: 16px; }
.playGround .pgMain p button { border: none; background-color: transparent; color: var(--navi_blue); padding-left: 12px; }

.playGround .pgMain .trending { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }
.playGround .trending .trendingHeading { width: 100%; padding: 0px 20px 24px; display: flex; align-items: center; gap: 12px; }
.playGround .trending .back { border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.90); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.playGround .trending .back img { max-width: 16px; }
.playGround .pgMain .trendingList { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-height: calc(100% - 156px); overflow-x: hidden; overflow-y: auto; }
.playGround .pgMain .trendingList::-webkit-scrollbar { width: 4px; }
.playGround .pgMain .trendingList::-webkit-scrollbar-track { background: #FFFFFF; }
.playGround .pgMain .trendingList::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.playGround .trending li { border-radius: 12px; cursor: pointer; position: relative; overflow: hidden; position: relative; }
.playGround .trending li img { max-width: 240px; max-height: 240px; border-radius: 12px; }
.playGround .trending li h6 { margin-top:  6px; text-align: center;}
.playGround .trending li .download { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.8); border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.playGround .trending .download img { max-width: 16px; max-height: 16px; }
.playGround .imageUploadDIv ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 496px; margin: auto; }
.playGround .imageUploadDIv li { background-image: url('../images/sample/transparent-bg.jpg'); background-repeat: repeat; background-position: 0px 0px; background-color: var(--white); border-radius: 12px; overflow: hidden; width: calc((100% - 16px) / 2); max-width: 240px; position: relative; }
.playGround .imageUploadDIv li img { width: 100%; }
.playGround .pgMain .trendingList.Shimmer li { width: 240px; height: 240px; position: relative; border-radius: 12px; overflow: hidden; }

.playGround .pgMain .editerOptions { border-radius: 9px; background: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; margin-bottom: 24px; }


.playGround .editerOptions .switch { position: relative; display: inline-block; width: 104px; height: 32px; }
.playGround .editerOptions .switch input { opacity: 0; width: 0; height: 0; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; cursor: pointer; outline: none; z-index: 5; }
.playGround .editerOptions .slider { display: inline-flex; align-items: center; justify-content: space-between; padding: 0px 4px; border-radius: 20px; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #EEEEEE; -webkit-transition: .4s; transition: .4s; }
.playGround .editerOptions .slider p { color: var(--dark); font-weight: 500; margin: 0px; width: 48px; text-align: center; position: relative; z-index: 3; }
.playGround .editerOptions .slider p:first-of-type { color: var(--white); }
.playGround .editerOptions .slider:before { border-radius: 12px; position: absolute; content: ""; height: 26px; width: 48px; left: 3px; bottom: 3px; background-color: var(--blue); -webkit-transition: .4s; transition: .4s; }
.playGround .editerOptions input:checked + .slider:before { -webkit-transform: translateX(49px); -ms-transform: translateX(49px); transform: translateX(49px); }
.playGround .editerOptions input:checked + .slider p:first-of-type { color: var(--dark); }
.playGround .editerOptions input:checked + .slider p:last-of-type { color: var(--white); }

.playGround .editerOptions .imgBtn { border: 1px solid var(--secondary); background-color: var(--light); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; }
.playGround .editerOptions .imgBtn:disabled { opacity: 0.3; cursor: not-allowed; }
.playGround .editerOptions .imgBtn img { height: 14px; }
.playGround .editerOptions .imgBtn:nth-child(2) { margin-right: 20px; }
.playGround .editerOptions .imgBtn.active { border-color: var(--blue); }
.playGround .editerOptions .imgBtn.active svg path { fill: var(--blue); }

#stage-wrapper { width: 100%; max-width: 700px; margin: auto; height: calc(100% - 170px); position: relative; }
#stage-wrapper #container { width: 100%; height: 100%; transform: none !important; }
#stage-wrapper .konvajs-content { width: 100% !important; height: 100% !important; background-repeat: repeat; background-position: 0px 0px; }
#stage-wrapper .konvajs-content canvas { max-width: 100%; max-height: 100%; }




.pgMain .directPrompt { width: 100%; background: #fff; padding: 16px; border-radius: 12px; margin-top: auto; }
.pgMain .directPrompt form { display: flex; flex-wrap: wrap; gap: 16px; }
.pgMain .directPrompt input { width: calc((100% - 172px) / 2); }
.pgMain .directPrompt textarea { width: calc(100% - 156px); height: 46px; }
.pgMain .directPrompt .btn { height: 44px; width: 140px; padding: 2px; margin: 0px; }

.pgMain.aiBGmain { justify-content: space-between; gap: 20px; }
.pgMain.aiBGmain h4 { width: 100%; }
.pgMain.aiBGmain p { font-size: 14px; line-height: 20px; color: var(--gray); text-align: center; max-width: 500px; margin: 0px auto; padding-bottom: 20px; }

.pgMain .carousel { height: auto; width: 100%; max-width: 500px; max-height: calc(100% - 276px); }
.pgMain .carousel .carousel-inner,
.pgMain .carousel .carousel-item { height: 100%; }
.pgMain .carousel img { max-width: 100%; max-height: 100%; margin: 0px auto; }
.pgMain .carousel .carouselBtn { border: 1px solid #79a3ff; background-color: var(--white); border-radius: 50%; width: 40px; height: 40px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.pgMain .carousel .carousel-control-prev { left: -50px; }
.pgMain .carousel .carousel-control-next { right: -50px; }
.pgMain .carousel .carouselBtn img { width: 12px; }
.pgMain .aiBgButtons { display: flex; align-items: center; gap: 12px; }
.pgMain .aiBgButtons .btn { padding: 12px 40px; }
.pgMain .aiBgButtons .textBtn { border: none; background-color: transparent; color: var(--primary); font-size: 16px; font-weight: 500; padding: 8px 40px; line-height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pgMain .aiBgButtons .textBtn img { height: 32px; }

.pgMain .aiBgSelectedList { background-color: var(--white); padding: 4px; border-radius: 8px; width: 100%; display: flex; align-items: center; gap: 4px; overflow-y: hidden; overflow-x: auto; }
.pgMain .aiBgSelectedList::-webkit-scrollbar { height: 2px; }
.pgMain .aiBgSelectedList::-webkit-scrollbar-track { background: var(--white); }
.pgMain .aiBgSelectedList::-webkit-scrollbar-thumb { background: var(--gray); }
.pgMain .aiBgSelectedList li { text-align: center; border: 1px solid #ddd; border-radius: 8px; padding: 2px; cursor: pointer; }
.pgMain .aiBgSelectedList li.active { border-color: var(--blue); }
.pgMain .aiBgSelectedList li figure { height: 40px; border-radius: 8px; overflow: hidden; }
.pgMain .aiBgSelectedList li img { max-height: 100%; }
.pgMain .aiBgSelectedList li span { font-size: 12px; font-weight: 500; line-height: 18px; display: block; }

.playGround .pgMain.upscale .imageUploadDIv { height: calc(100% - 190px); }
.playGround .pgMain.upscale .size { font-size: 14px; line-height: 20px; font-weight: 500; margin: 12px 0px; }

.playGround .collapsePopup { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 82px; width: 100%; height: 100%; z-index: 21; }
.playGround .collapsePopup.collapsing { height: calc(100% - 82px) !important; }
.playGround .collapsePopupInner { width: 100%; height: 100%; background-color: var(--white); padding: 16px; }
.playGround .collapsePopupInner::-webkit-scrollbar { height: 4px; }
.playGround .collapsePopupInner::-webkit-scrollbar-track { background: #FFFFFF; }
.playGround .collapsePopupInner::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.playGround .collapsePopup .back { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; }
.playGround .pgAside02 .back button { width: 28px; height: 28px; border: 1px solid rgba(0, 0, 0, .05); border-radius: 50%; background-color: var(--white); display: inline-flex; justify-content: center; align-items: center; }
.playGround .pgAside02 .back img { width: 12px; }
.playGround .generateImage input[type='text'],
.playGround .generateImage textarea { border-radius: 10px; border: 2px solid #E0E0E0; background-image: url('../images/playGround/icon-edit-text.svg'); background-repeat: no-repeat; background-position: 96% 80%; background-size: 16px; }
.playGround .generateImage .btn { width: 100%; padding: 10px; margin-top: 8px; }
.playGround .generateImage .btn img { height: 14px; }

.playGround .multiOptionsDropdown { border-bottom: 1px solid #F0F0F0; padding: 16px 0px; }
.playGround .multiOptionsDropdown:first-child { padding-top: 0px; }
.playGround .multiOptionsDropdown:last-child { padding-bottom: 0px; border-bottom: 0px; }
.playGround .collapseHeader { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.playGround .collapseHeader output { position: relative; left: auto; right: auto; top: auto; }
.playGround .collapseHeader p { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--black); text-transform: capitalize; width: 50%; }
.playGround .collapseHeader img { height: 20px; }
.playGround .collapseHeader .options { color: var(--blue); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; width: auto; }
.playGround .collapseHeader .options strong { padding: 0px 3px; border-radius: 4px; background-color: var(--blue); color: var(--white); font-weight: 500; height: 14px; display: inline-block; vertical-align: middle; line-height: 14px; font-size: 10px; }
.playGround .collapseHeader .optionsType { background: transparent; border: none; padding: 0px; font-size: 16px; line-height: 22px; color: var(--dark);
    font-weight: 500; }
.playGround .collapseHeader .multiOptionsBtn { border: 1px solid var(--black); background-color: var(--white); border-radius: 4px; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--black); text-align: center; padding: 6px 16px; width: 76px; }
.playGround .collapseHeader span { border: 1px solid #DDDDDD; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.playGround .collapseHeader span.percent {border: none; width: auto; height: auto;}
.playGround .collapseHeader span img { height: 10px; }
.playGround .multiOptionsDropdown .card { border: 1px solid #F0F0F0; border-radius: 8px; padding: 16px; margin-top: 8px; }
.playGround .multiOptionsDropdown .card.rangeCard { padding: 32px 16px; }
.playGround .multiOptionsDropdown .card.themeImages { border: none;  padding: 16px 0px 0px; }
.playGround .multiOptionsDropdown .multiCollapseBtn { border: none; border-bottom: 1px solid #F0F0F0; background-color: var(--white); padding: 8px 0px; font-size: 16px; line-height: 22px; color: var(--black); text-align: left; }
.playGround .multiOptionsDropdown .optionDropdown { padding: 12px; background-color: #f9f9f9; border-radius: 12px; margin-top: 12px; }
.playGround .multiOptionsDropdown .multiCollapseBtn:last-child { border-bottom: none }
.multiOptionsDropdown .optionTab { gap: 8px; }
.multiOptionsDropdown .optionTab .nav-link { width: 100%; border-radius: 8px 8px 0px 0px; flex-direction: column; padding: 8px 2px; height: auto; font-size: 14px; font-weight: 500; gap: 4px; line-height: 20px; }
.multiOptionsDropdown .optionTab .nav-link img { max-width: 30px; height: 20px; }
.multiOptionsDropdown .platformList li { border-radius: 8px; display: inline-flex; gap: 16px; padding: 8px 12px; width: 100%; cursor: pointer; font-size: 16px; line-height: 22px; }
.multiOptionsDropdown .platformList li img { height: 18px; margin-top: 6px; }
.multiOptionsDropdown .platformList li:hover,
.multiOptionsDropdown .platformList li.sizeBorder { background-color: var(--white); }
.multiOptionsDropdown .platformList p { font-size: 14px; line-height: 22px; }

.playGround .moodOfBg { margin-top: 20px; }
.playGround .moodOfBg:last-child { padding-bottom: 12px; }
.playGround .moodOfBg h6 { font-size: 16px; line-height: 22px; padding-bottom: 8px; }
.playGround .moodOfBg ul { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 12px; }
.playGround .moodOfBg li { width: calc((100% - 24px) / 4); cursor: pointer; line-height: 0px; }
.playGround .moodOfBg li figure { width: 100%; height: 70px; border: 2px solid #DDDDDD; border-radius: 8px; background-color: var(--white); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.playGround .moodOfBg li figure.active { border-color: var(--blue); }
.playGround .moodOfBg figure img { width: 100%; height: 100%; object-fit: cover; }
.playGround .moodOfBg figure img.icon { width: 40px; max-height: 40px; }
.playGround .moodOfBg li span { display: block; text-align: center; font-size: 12px; line-height: 18px; color: var(--dark); font-weight: 500; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.playGround .filterSearchArae { padding: 16px 0px; height: calc(100% - 78px); overflow-x: hidden; overflow-x: auto; }
.playGround .filterSearchArae::-webkit-scrollbar { width: 4px; }
.playGround .filterSearchArae::-webkit-scrollbar-track { background: #FFFFFF; }
.playGround .filterSearchArae::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.playGround .filterSearchArae h6 { font-size: 16px; line-height: 22px; padding-bottom: 12px; }
.playGround .searchResultList { display: flex; flex-direction: column; gap: 12px; }
.playGround .searchResultList li { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 2px; border-radius: 24px; }
.playGround .searchResultList li:hover { background-color: var(--light_blue_bg); }
.playGround .searchResultList figure { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.playGround .searchResultList figure img { width: 100%; height: 100%; object-fit: cover; }
.playGround .filterSearchArae .noRecentSearch { background-color: var(--light); padding: 16px; text-align: center; border-radius: 12px; margin: 12px 0px; }
.playGround .filterSearchArae p { font-size: 14px; line-height: 20px; }

.playGround .upscaleButtons { display: flex; flex-wrap: wrap; gap: 10px; }
.playGround .upscaleButtons button { border-radius: 6px; border: 1px solid #F9F9F9; background-color: #F9F9F9; padding: 14px 2px; width: calc((100% - 10px) / 2); display: inline-flex; flex-direction: column; align-items: center; color: var(--black); cursor: pointer; }
.playGround .upscaleButtons button strong { font-size: 20px; font-weight: 500; line-height: 26px; }
.playGround .upscaleButtons button span { font-size: 14px; font-weight: 400; line-height: 20px; display: inline-flex; align-items: center; gap: 4px; }
.playGround .upscaleButtons button span img { height: 16px; }
.playGround .upscaleButtons button img { max-width: 70%; }
.playGround .upscaleButtons button img.mrg01 { margin-left: 30px; }
.playGround .upscaleButtons button img.mrg02 { margin-left: -20px; }
.playGround .upscaleButtons button:hover,
.playGround .upscaleButtons button.upscalesborder { border-color: var(--primary); }

.mobileFilter { background-color: var(--white); border-bottom: 1px solid #EEEEEE; gap: 12px; padding: 8px 16px; height: 53px; width: 100%; }
.mobileFilter .filterBtn { border: 1px solid #cee6ff; border-radius: 4px; background-color: var(--light_blue_bg); background-image: linear-gradient(45deg, #F1F1F1, var(--white)); color: var(--black); font-size: 16px; font-weight: 500; line-height: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0px 16px; height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.mobileFilter .filterBtn img { max-height: 14px; }
.mobileFilter .filterBtn.lastBtn { margin-left: auto; }

.playGround .slazzerLoader { display: inline-flex; align-items: center; justify-content: center; animation: placeHolderShimmer 2s; animation-iteration-count: infinite; background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%); background-size: 1000px 100%; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 3; }
.playGround .slazzerLoader span { font-size: 16px; line-height: 22px; color: var(--black); font-weight: 600; margin: 0px !important; }

.playGround .advanceOption { margin-top: auto; }
.playGround .advanceOption .options { display: flex; gap: 8px; }
.playGround .advanceOption button { background-color: var(--white); border: 1px solid var(--secondary); border-radius: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 20px; color: var(--dark); cursor: pointer; }
.playGround .advanceOption button.active { background-color: var(--light_blue_bg); border-color: var(--navi_blue); color: var(--navi_blue); cursor: default; }
@media only screen and (min-width: 1200px) {
    .playGround .pgAside02 { display: flex; flex-direction: column; }
    .mobileFilter { display: none; }
    .playGround .mobileAllFilter { display: none }
    .playGround .pgAside02 .scrollingAside { height: 100%; }
}

@media only screen and (max-width: 1199.98px) {
    .playGround { padding: 0px; height: calc(100vh - 55px); }
    .playGround .pgSection { flex-wrap: wrap; flex-direction: column; height: 100%; }
    .playGround .pgAside01 { background-color: var(--white); border-radius: 20px 20px 0px 0px; border: 1px solid #e5e7eb; -webkit-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -moz-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -ms-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -o-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); width: 100%; height: auto; max-height: 90vh; padding: 0px 16px; margin: 0px; position: absolute; bottom: 0px; left: 0px; overflow-x: hidden; overflow-y: auto; z-index: 30; }
    .playGround .pgAside01 ul { padding: 0px; height: auto; flex-direction: row; flex-wrap: wrap; }
    .playGround .pgAside01 li:first-child { display: none; }
    .playGround .pgAside01 button { width: 78px; height: 78px; }
    .playGround .pgAside02 { background-color: var(--white); border-radius: 20px 20px 0px 0px; border: 1px solid #e5e7eb; -webkit-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -moz-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -ms-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); -o-box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); box-shadow: 0px 8px 20.48px rgba(0, 0, 0, .11), 0px 16px 40.96px rgba(0, 0, 0, .05), 0px 32px 81.92px rgba(0, 0, 0, .03); width: 100%; height: auto; max-height: 90vh; padding: 0px 16px 16px; margin: 0px; position: absolute; bottom: 0px; left: 0px; z-index: 30; }
    .playGround .pgAside02.mobileOff { display: none; }
    .playGround .mobileAllFilter { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #ddd; margin: 0px -16px 16px; width: calc(100% + 32px); position: sticky; top: 0px; background: var(--white); z-index: 4; }
    .playGround .mobileAllFilter .closeBtn { width: 28px; height: 28px; background-color: var(--white); border: none; cursor: pointer; }
    .playGround .mobileAllFilter .closeBtn img { width: 28px; height: 28px; }
    .mobileFilter { display: flex; }
    .playGround .downloadButtons { border-radius: 0px; position: fixed; bottom: 0px; left: 0px; right: 0px; padding: 16px; z-index: 9; }
    .playGround .downloadButtons .btn { height: 42px; max-width: 100%; }
    .playGround .downloadButtons .btn:disabled { background-color: #AAAAAA; border-color: #AAAAAA; cursor: not-allowed; opacity: 0.6; }
    .playGround .downloadButtons .dropdown-menu { width: calc(100% - 32px); bottom: bottom: calc(100% + 8px); min-width: 260px; right: 0px; }
    .playGround .pgAside02 .downloadButtons { opacity: 0; height: 16px; position: relative; overflow: hidden; }
    .playGround .pgMain, .playGround .pgMain.singleAside { order: 3; width: 100%; padding: 0px; height: calc(100% - 53px); padding: 63px 10px 88px; position: relative; }
    .playGround .imageUploadDIv, .playGround .imageUploadDIv.small { height: 100%; }
    .playGround .pgMain.workflow { padding-top: 16px; }
    .playGround .pgMain .editerOptions { border-bottom: 1px solid #EEEEEE; border-radius: 0px; margin: 0px; position: absolute; left: 0px; top: 0px; width: 100%; }
    .playGround .editerOptions .textBtn { font-size: 12px; gap: 6px; }
    .playGround .editerOptions .imgBtn { background-color: var(--light_bg); border-radius: 8px; }
    .playGround .pgMain.aiBGmain { padding-top: 8px; padding-bottom: 72px; gap: 12px; }
    .pgMain .carousel { max-height: calc(100% - 196px); }
    .pgMain .carousel.pointer-event { height: calc(100% - 230px); }
    .playGround .downloadButtons .downloadDropdown  { width: 100%; max-width: 100%; }
    .playGround .downloadButtons .downloadDropdown .dropdown-toggle { width: 100%; max-width: 100%; }
}
@media only screen and (max-width: 991.98px) {
    .playGround .top { padding: 0px; border-bottom: 1px solid #F7F7FF; }
    .playGround .top .dropdown { width: 100%; }
    .playGround .top .dropdown-toggle { width: 100%; border-radius: 0px; }
    .playGround .buttons { overflow-y: hidden; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .playGround .buttons::-webkit-scrollbar { display: none; }
    .playGround .buttons .dropdownMenuWrap { border-radius: 20px 20px 0px 0px; position: fixed; left: 0px; top: auto; right: 0px; bottom: 0px; width: 100%; height: auto; max-height: 90vh; z-index: 5; }
    .playGround .buttons .dropdownMenu { border-radius: 20px 20px 0px 0px; max-height: calc(90vh - 62px); width: 100%; }
    .playGround .buttons .dropdownMenuWrap .mobileAllFilter { border-radius: 20px 20px 0px 0px; padding: 16px; margin: 0px; }
    .playGround .buttons .mobileAllFilter h5 { margin: 0px; }
    .playGround .image-options { max-height: inherit; }
    .playGround .paddingType .dropdown,
    .playGround .paddingType .dropdown-toggle { min-width: 50px; }
    .playGround .moodOfBg ul { flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; width: calc(100% + 32px); margin: 0px -16px; padding: 0px 16px; }
    .playGround .moodOfBg ul::-webkit-scrollbar { display: none; }
    .playGround .moodOfBg li { width: 70px; min-width: 70px; }
    .playGround .collapsePopup { height: 100% !important; bottom: 0px; }
    .playGround .collapsePopup.collapsing { height: 100% !important; }
    .pgMain.aiBGmain p { padding-bottom: 0px; }
}
@media only screen and (max-width: 767.98px) {
    .playGround { height: calc(100svh - 95px); }
    .playGround .uploadEdit { height: 100%; }
    .mobileFilter { gap: 8px; padding: 8px; justify-content: space-between; }
    .mobileFilter .filterBtn { font-size: 14px; gap: 4px; padding: 0px 8px; }
    .mobileFilter .filterBtn.lastBtn { margin-left: 0px; }
    .playGround .pgAside01 ul { gap: 4px; }
    .playGround .trending li img { max-width: 170px; max-height: 200px; }
    .playGround .pgMain, .playGround .pgMain.singleAside { padding-bottom: 16px; }
    .playGround .downloadButtons { background-color: transparent; left: auto; right: auto;position: relative; padding: 8px; width: 100%; }
    .playGround .imageUploadDIv, .playGround .imageUploadDIv.small { height: calc(100% - 64px); }
    .playGround .pgMain.upscale .imageUploadDIv { height: calc(100% - 90px); }
    .pgMain .aiBgButtons { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .pgMain .aiBgButtons .btn { padding: 0px 8px; width: calc((100% - 8px) / 2); height: 42px; }
    .pgMain .aiBgButtons .textBtn { padding: 8px; }
    .pgMain .aiBgButtons .textBtn img { display: none; }
    .pgMain .carousel .carouselBtn { width: 30px; height: 30px; }
    .pgMain .carousel .carouselBtn img { width: 8px; }
    .pgMain .carousel .carousel-control-prev { left: 0px; }
    .pgMain .carousel .carousel-control-next { right: 0px; }
}


/* Playground Login Popup -------------------------------*/
.playgrounLoginModal .modal-dialog { max-width: 530px; }
.playgrounLoginModal .modal-content { border-radius: 16px; }
.playgrounLoginModal .modal-body { background-color: var(--white); border-radius: 16px; padding: 80px; text-align: center; }
.playgrounLoginModal .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background-color: var(--white); border-radius: 16px; padding: 2px 12px; height: 54px; -webkit-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); -moz-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); -ms-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); -o-box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); box-shadow: 0 5px 15px rgba(62, 79, 234, 0.1); color: var(--dark); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: 0.5px; text-align: center; width: 100%; }
.playgrounLoginModal .button.email { background-color: var(--blue); color: var(--white); }
.playgrounLoginModal .button img { height: 28px; }
.playgrounLoginModal p { margin-top: 8px; margin-bottom: 32px; }
.playgrounLoginModal h6 { font-size: 14px; line-height: 20px; text-align: center; margin: 24px 0px; position: relative; z-index: 2; }
.playgrounLoginModal h6:before, .playgrounLoginModal h6:after { content: ""; position: absolute; top: 10px; width: 36%; height: 1px; background-color: #d8dcdc; z-index: -1; }
.playgrounLoginModal h6:before { left: 0px; }
.playgrounLoginModal h6:after { right: 0px; }
.playgrounLoginModal span { display: block; margin-top: 36px; font-size: 14px; line-height: 22px; color: var(--gray); }
@media only screen and (max-width: 767.98px) {
    .playgrounLoginModal .modal-body { padding: 32px; }
}


/* Rate Limit -------------------------------*/
.rateLimitPage { padding: 80px 0px; }
.rateLimitPage .box { background-color: var(--white); border-radius: 24px; max-width: 450px; margin: 0px auto; padding: 50px 70px; text-align: center; -webkit-box-shadow: 0px 0px 20px 0px #E1C3C3; -moz-box-shadow: 0px 0px 20px 0px #E1C3C3; -ms-box-shadow: 0px 0px 20px 0px #E1C3C3; -o-box-shadow: 0px 0px 20px 0px #E1C3C3; box-shadow: 0px 0px 20px 0px #E1C3C3; }
.rateLimitPage .box img { width: 100px; }
.rateLimitPage .box h4 { margin-top: 32px; margin-bottom: 8px; }
.rateLimitPage .box a { font-size: 18px; line-height: 24px; color: #d10000; font-weight: 600; margin-top: 48px; }
@media only screen and (max-width: 575.98px) {
    .rateLimitPage { padding: 70px 0px; }
    .rateLimitPage .box { padding: 50px 32px; }
}



/* Rate Limit -------------------------------*/
.changeLog { padding: 100px 0px; }
.changeLog .details { margin-top: 60px; }
.changeLog .flexBox { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #ddd; }
.changeLog .flexBox:last-child { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none; }
.changeLog h6 { font-size: 17px; line-height: 24px; color: var(--dark); font-weight: 600; }
.changeLog ul { display: flex; flex-direction: column; gap: 12px; padding-left: 20px; margin-top: 16px; }
.changeLog li { font-size: 16px; line-height: 22px; color: var(--black); font-weight: 400; list-style: outside; }

@media only screen and (max-width: 991.98px) {
    .changeLog { padding: 70px 0px; }
    .changeLog .details { margin-top: 40px; }
    .changeLog .flexBox { padding-bottom: 24px; margin-bottom: 24px; }
    .changeLog .flexBox:last-child { padding-bottom: 0px; margin-bottom: 0px; }
}
@media only screen and (max-width: 767.98px) {
    .changeLog { padding: 60px 0px; }
}


/* ========================================
Image Upload 
======================================== */
.ImageUploadSection { height: calc(100vh - 75px); padding: 24px; display: flex; }
body:has( .image-upload-visible) { overflow: hidden; }
body:has( .image-upload-visible) .featuresList { display: none; }
.ImageUploadSection .asideUpload { height: 100%; padding: 0px; padding-right: 16px; width: 108px; }
.ImageUploadSection .asideUpload ul { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow-x: hidden; overflow-y: auto; }
.ImageUploadSection .asideUpload ul::-webkit-scrollbar { width: 4px; }
.ImageUploadSection .asideUpload ul::-webkit-scrollbar-track { background: #FFFFFF; }
.ImageUploadSection .asideUpload ul::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 12px; }
.ImageUploadSection .asideUpload button { background-color: var(--white); width: 76px; height: 76px; border-radius: 8px; border: 2px solid #e5e7eb; overflow: hidden; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; line-height: 18px; color: var(--black); font-weight: 500; cursor: pointer; }
.ImageUploadSection .asideUpload button.active { border-color: var(--primary); }
.ImageUploadSection .asideUpload button img { width: 100%; height: 100%; object-fit: cover; }

.ImageUploadSection main { display: flex; flex-direction: column; align-items: center; padding: 0px 32px; height: 100%; width: calc(100% - 108px); }
.ImageUploadSection .imagePreview { height: calc(100% - 172px); width: 100%; display: flex; gap: 24px; align-items: center; justify-content: center; }
.ImageUploadSection .imagedragger { height: 100%; display: flex; align-items: center; justify-content: center; }
.ImageUploadSection .imagedragger .scrollableArea { border-radius: 24px; max-width: 100%; max-height: 100%; overflow: auto;  position: relative; -ms-overflow-style: none; scrollbar-width: none; }
.ImageUploadSection .imagedragger .scrollableArea::-webkit-scrollbar { display: none; }

.ImageUploadSection .imagedragger .scrollableArea > img { max-width: 100%; max-height: 58vh; background-image: url('../images/sample/transparent-bg.jpg'); background-repeat: repeat; background-position: 0px 0px; border-radius: 24px; -webkit-animation-name: imageFade; -moz-animation-name: imageFade; animation-name: imageFade; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; }
.ImageUploadSection .imagedragger .gradient.shimmer { background: linear-gradient(to right, #e4f1ff 5%, #b8cfe8 25%, #e4f1ff 35%); opacity: 0.7; position: absolute; border-radius: 24px; animation-duration: 5s; }

.ImageUploadSection .edit-dropdown { position: absolute; left: 24px; top: 24px; }
.ImageUploadSection .edit-dropdown .btn { border: none; border-radius: 20px; background-color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #000; text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.36px; height: 40px; padding: 0px 20px; position: relative; }
.ImageUploadSection .edit-dropdown .btn img { -webkit-transition: none; -moz-transition: none; transition: none; }
.ImageUploadSection .edit-dropdown .btn:hover img { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }
.ImageUploadSection .edit-dropdown img { border-radius: 0px; background: none; }
.ImageUploadSection .edit-dropdown .btn .gradient { border-radius: 20px; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; }
.ImageUploadSection .edit-dropdown .dropdown-menu { border-radius: 24px; background-color: var(--white); -webkit-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); min-width: 180px; padding: 10px;  margin-top: 8px; }
.ImageUploadSection .edit-dropdown .dropdown-item { border-radius: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 12px; color: var(--black); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.36px; text-decoration: none; }
.ImageUploadSection .edit-dropdown .dropdown-item.disabled { opacity: 0.5; background-image: linear-gradient(to bottom, #ddd, var(--white), #ddd); cursor: default; pointer-events: none; }
.ImageUploadSection .edit-dropdown .dropdown-item i { margin-left: 5px; pointer-events: all; }
.ImageUploadSection .edit-dropdown .dropdown-item:hover { background-color: #eeeeee; }

.ImageUploadSection .FaeturesLists { display: flex; justify-content: center; gap: 16px; }
.ImageUploadSection .FaeturesLists li a { border-radius: 35px; border: 1px solid #F3F3F3; background: var(--white); -webkit-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -moz-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -ms-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); -o-box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); box-shadow: 0 0 48px -8px rgba(0, 0, 0, 0.03); display: inline-flex; align-items: center; gap: 12px; color: #6F787E; font-size: 16px; font-weight: 500; line-height: 18px; padding: 4px 24px; height: 52px; }
.ImageUploadSection .FaeturesLists li a:hover { background-color: #F3F5F8; }
.ImageUploadSection .FaeturesLists li img { height: 24px; opacity: 0.5; }
.ImageUploadSection .FaeturesLists a span { display: inline-flex; }
.ImageUploadSection .bottomOption { background-color: var(--white); border-radius: 30px; -webkit-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 6px; margin-top: 32px; display: flex; align-items: center; gap: 16px; position: relative; }
.ImageUploadSection .mobileTopNav { display: flex; align-items: center; gap: 16px; }
.ImageUploadSection .bottomOption .zooming { display: inline-flex; align-items: center; gap: 10px; }
.ImageUploadSection .zooming button { border: none; background-color: var(--white); border-radius: 50%; width: 44px; height: 44px; display: inline-flex;  align-items: center; justify-content: center; }
.ImageUploadSection .zooming button:hover { background-color: #F3F5F8; }
.ImageUploadSection .zooming button img { max-width: 20px; max-height: 20px; }
.ImageUploadSection .bottomOption .preview { border: none; background-color: transparent; border-radius: 35px; display: inline-flex;  align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0px; color: #7F8991; text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 20px; }
.ImageUploadSection .bottomOption .preview span.active { font-weight: 500; color: var(--primary); }
.ImageUploadSection .bottomOption .preview:hover { background-color: #F3F5F8; }
.ImageUploadSection .bottomOption .preview img { max-width: 20px; max-height: 20px; }
.ImageUploadSection .bottomOption .gradient { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; border-radius: 35px; }
.ImageUploadSection .downloadDropdown { position: relative; }
.ImageUploadSection .downloadDropdown .dropdown-toggle { border-radius: 35px; padding: 0px 20px; height: 44px; width: auto; overflow: hidden; position: relative; gap: 16px; }
.ImageUploadSection .downloadDropdown .dropdown-toggle img { height: 12px; }
.ImageUploadSection .downloadDropdown .dropdown-toggle:after { display: none; }

.ImageUploadSection .downloadDropdown .dropdown-menu { border: none; border-radius: 24px; background: var(--white); -webkit-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -ms-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); -o-box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); box-shadow: 0px 12px 48px -8px rgba(0, 0, 0, 0.16); padding: 8px; width: 320px; top: auto !important; bottom: 60px; transform: none !important; left: auto !important; right: 0px; }
.ImageUploadSection .downloadDropdown ul { display: flex; flex-direction: column; gap: 8px; }
.ImageUploadSection .downloadDropdown li { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px; border-radius: 24px; }
.ImageUploadSection .downloadDropdown li:hover { background-color: #E4EEF5; }
.ImageUploadSection .downloadDropdown p { color: var(--black); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.36px; margin: 0px; }
.ImageUploadSection .dropdown-menu span { color: var(--black); font-size: 16px; font-weight: 400; line-height: 24px; margin-top: 4px; display: block; }
.ImageUploadSection .downloadDropdown li.noPreview,
.ImageUploadSection .downloadDropdown li.noPreview:hover { cursor: default; background-color: var(--white); }
.ImageUploadSection .downloadDropdown li.noPreview p { color: #999999; }
.ImageUploadSection .dropdown-menu button { border: none; border-radius: 30px; background: #D9D9D9; color: var(--black); text-align: center; font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: 0.36px; padding: 2px 14px; display: flex; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; }
.ImageUploadSection .dropdown-menu button.btnBlue { background-color: var(--primary); color: var(--white) }
.ImageUploadSection .downloadDropdown span.spinner { display: none; }
.ImageUploadSection .downloadDropdown .processbtn span.spinner, 
.ImageUploadSection .downloadDropdown .downloading span.spinner { position: absolute; display: block; }

.ImageUploadSection .rate-us { display: flex; flex-flow: wrap; align-items: center; gap: 12px; position: absolute; right: 24px; bottom: 34px; }
.ImageUploadSection .thank-you { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--green); padding: 0px; margin-top: 40px; }
.ImageUploadSection .rate-us li { display: inline-block; vertical-align: middle; font-size: 14px; line-height: 20px; color: #001C5C; font-weight: 500; position: relative; }
.ImageUploadSection .rate-us li a { display: inline-block; vertical-align: top; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; position: relative; }
.ImageUploadSection .rate-us li img { width: 100%; }

.uploadImageModals .modal-content { border-radius: 16px; }
.uploadImageModals .modal-dialog { max-width: 500px; }
.uploadImageModals .modal-body { padding: 60px; text-align: center; }
.uploadImageModals h4 { margin-bottom: 10px; }
.uploadImageModals h6 { margin: 12px 0px 32px; }
.uploadImageModals h6 span { color: var(--gray); font-weight: 400; }
.uploadImageModals .close { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .05); background-color: hsla(0, 0%, 100%, .9); opacity: 1; position: absolute; right: 8px; top: 8px; z-index: 23; }
.uploadImageModals .close img { width: 10px; }
.uploadImageModals figure { border-radius: 16px; max-height: 260px; overflow: hidden; margin-bottom: 24px; }
.uploadImageModals figure img { width: 100%; max-height: 100%; object-fit: cover; }
.uploadImageModals ul { text-align: left; margin-bottom: 32px; }
.uploadImageModals li { font-size: 16px; line-height: 24px; position: relative; margin-bottom: 16px; padding-left: 28px; }
.uploadImageModals li:before { content: "\f0a4"; font-family: FontAwesome; position: absolute; left: 0px; top: 0px; }
.uploadImageModals form { display: block; text-align: left; }
.uploadImageModals .form-group { margin-bottom: 24px; }
.uploadImageModals .form-group .custom-control-label { font-size: 16px; line-height: 24px; }
.uploadImageModals .you-choose { margin-top: 15px; display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; }
.uploadImageModals .you-choose .block { width: calc((100% - 12px) / 2); }
.uploadImageModals .you-choose span { font-size: 12px; line-height: 18px; color: #888; display: block; margin-top: 3px; }
.uploadImageModals .you-choose .btn { font-size: 14px; padding: 12px 4px; width: 100%; }
.uploadImageModals .buttons { display: flex; gap: 12px; }
.uploadImageModals .buttons .btn { font-size: 14px; padding: 12px 4px; width: calc((100% - 12px) / 2); }

@media only screen and (min-width: 1399.98px) {
    .ImageUploadSection .FaeturesLists a span { flex-direction: column; }
}
@media only screen and (min-width: 992px) {
    .ImageUploadSection .asideMoreFeatures { height: 100%; padding: 16px; width: 270px; }
    .ImageUploadSection .mobileCollapse .close { display: none; }
    .ImageUploadSection .filterBtn { display: none; }
    .ImageUploadSection .FaeturesLists { margin-bottom: 32px; }
}
@media only screen and (min-width: 992px) and (max-width: 1220px) {
    .ImageUploadSection .FaeturesLists { gap: 12px; }
    .ImageUploadSection .FaeturesLists li a { font-size: 14px; white-space: nowrap; }
}
@media only screen and (max-width: 991.98px) {
    .ImageUploadSection { height: calc(100svh - 62px); padding: 0px; position: relative; display: block; }
    .ImageUploadSection .asideUpload { height: 80px; padding: 16px 24px; width: 100%; }
    .ImageUploadSection .asideUpload ul { flex-direction: row; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; }
    .ImageUploadSection .asideUpload ul::-webkit-scrollbar { display: none; }
    .ImageUploadSection .asideUpload button { width: 48px; height: 48px; border-radius: 16px; }
    .ImageUploadSection .asideUpload .uploadNewImage span { display: none; }
    .ImageUploadSection .asideUpload .uploadNewImage svg { width: 24px; height: 24px; }
    .ImageUploadSection main { padding: 0px 20px 20px; height: calc(100% - 80px); width: 100%; position: relative; }
    .ImageUploadSection .FaeturesLists { display: block; white-space: nowrap; padding: 0px 20px 4px; margin: 0px -20px 20px; width: calc(100% + 48px); overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; }
    .ImageUploadSection .FaeturesLists::-webkit-scrollbar { display: none; }
    .ImageUploadSection .FaeturesLists li { display: inline-block; margin-right: 4px; }
    .ImageUploadSection .FaeturesLists li:last-child { margin-right: 0px; }
    .ImageUploadSection .FaeturesLists li a { font-size: 12px; line-height: 16px; padding: 4px 16px; height: 38px; gap: 8px; }
    .ImageUploadSection .FaeturesLists a span { flex-direction: row; gap: 4px; }
    .ImageUploadSection .FaeturesLists li img { height: 16px; }
    .ImageUploadSection .bottomOption { margin-top: 44px; width: 100%; }
    .ImageUploadSection .mobileTopNav { width: calc((100% - 12px) / 2); }
    .ImageUploadSection .bottomOption .zooming { display: none; }
    .ImageUploadSection .mobileTopNav .preview { background-color: #F3F5F8; padding: 0px 12px; gap: 8px; font-weight: 400; width: 100%; }
    .ImageUploadSection .bottomOption .filterBtn { background-color: #F3F5F8; border: none; border-radius: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0px 2px; height: 44px; width: calc((100% - 12px) / 2); }
    .ImageUploadSection .bottomOption .filterBtn img { max-height: 20px; }
    .ImageUploadSection .downloadDropdown { width: calc((100% - 12px) / 2); }
    .ImageUploadSection .downloadDropdown .dropdown-toggle { width: 100%; min-width: 140px; }
    .ImageUploadSection .downloadDropdown .dropdown-menu { width: 300px; }
    .ImageUploadSection .imagePreview { height: calc(100% - 162px); }
    .ImageUploadSection .imagedragger { width: 100%; }
    .ImageUploadSection .imagedragger .scrollableArea > img { max-height: calc(100svh - 323px); width: auto !important; max-width: calc(100vw - 40px); }
    .ImageUploadSection .edit-dropdown { left: 12px; top: 12px; }
    .ImageUploadSection .edit-dropdown .btn { font-size: 14px; line-height: 20px; height: 32px; padding: 0px 12px; }
    .ImageUploadSection .edit-dropdown .btn img { height: 14px; }
    .ImageUploadSection .edit-dropdown .dropdown-item { font-size: 14px; line-height: 20px; padding: 8px; }
    .ImageUploadSection .mobileCollapse { background-color: var(--white); border-radius: 16px 16px 0px 0px; -webkit-box-shadow: 0px 0px 10px 0px #dbdbdb; -moz-box-shadow: 0px 0px 10px 0px #dbdbdb; -ms-box-shadow: 0px 0px 10px 0px #dbdbdb; -o-box-shadow: 0px 0px 10px 0px #dbdbdb; box-shadow: 0px 0px 10px 0px #dbdbdb; padding: 0px; position: fixed; left: 0px; bottom: 0px; height: auto; width: 100%; z-index: 5; }
    .ImageUploadSection .mobileCollapse ul { padding: 24px; height: auto; max-height: calc(100vh - 60px); flex-direction: column; }
    .ImageUploadSection .mobileCollapse .close { border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); background-color: var(--white); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; opacity: 1; position: absolute; right: 6px; top: -46px; }
    .ImageUploadSection .mobileCollapse .close img { max-width: 20px; }
    .ImageUploadSection .rate-us { bottom: 88px; }
    .ImageUploadSection .rate-us li a { border-radius: 0px; width: 20px; height: 20px; }
}

@media only screen and (max-width:575.98px) {
    .uploadImageModals .modal-body { padding: 30px 15px; }
    .uploadImageModals li { font-size: 14px; line-height: 20px; }
    .uploadImageModals .you-choose .btn { font-size: 13px; padding: 4px; height: 40px; }
}
@media only screen and (max-width:479.98px) {
    .uploadImageModals .you-choose .block { width: 100%; margin-bottom: 20px; }
    .uploadImageModals .you-choose .block:last-child { margin-bottom: 0px; }
}

@keyframes imageFade {
  from { opacity: 0 }
    to { opacity: 1; }
}


/* Header Features Listing Thumbnails */
.featuresList { height: 36px; position: relative; }
.featuresList .full-wrapper { background-color: var(--dark); padding: 8px 16px; position: fixed; top: 0px; left: 0px; height: 36px; width: 100%; z-index: 21; }
.featuresList .swiper { width: 100%; overflow: hidden; }
.featuresList .swiper-slide { background-color: var(--dark); flex-shrink: 0; transition: all 0.5s ease; display: flex; align-items: center; width: 100%; position: relative; }
.featuresList .swiper-slide.swiper-slide-active { z-index: 3; }
.featuresList p { color: var(--white); font-weight: 400; line-height: 20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0px; width: 100%; }
.featuresList a { color: var(--white); text-decoration: underline; }
.featuresList a:hover { color: var(--primary); }
.featuresList .gradient { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 25; }

@media only screen and (max-width: 1024.98px) {
    .featuresList p { font-size: 13px; line-height: 18px; }
    .featuresList.desktopApp { height: 56px; }
    .featuresList.desktopApp .full-wrapper { height: 56px; }
    .featuresList.desktopApp p { line-height: 20px; white-space: normal; text-align: left; }
}

/* Desktop App Section 02 -------------------------------*/
.da-sec-02 { padding: 100px 0px; }
.da-sec-02 h2 { color: var(--black); text-align: center; max-width: 900px; margin: 0 auto; }
.da-sec-02 h6 { color: var(--black); text-align: center; max-width: 800px; margin: 32px auto 0px; }
.da-sec-02 ul { display: flex; flex-wrap: wrap; row-gap: 40px; column-gap: 32px; margin-top: 80px; }
.da-sec-02 li { width: calc((100% - 64px) / 3); }
.da-sec-02 li a { border-radius: 32px; border: 1px solid rgba(0, 0, 0, 0.05); background-color: #FFF; display: inline-flex; flex-direction: column; height: 100%; }
.da-sec-02 li figure { border-radius: 32px 32px 0px 0px; line-height: 0px; overflow: hidden; position: relative; width: 100%; }
.da-sec-02 li figure img { -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; width: 100%; }
.da-sec-02 li figure img + img { opacity: 0; visibility: hidden; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.da-sec-02 a:hover figure img + img { opacity: 1; visibility: visible; }
.da-sec-02 li .description { padding: 16px 24px 32px; }
.da-sec-02 li h5 { color: var(--black); font-size: 16px; font-weight: 600; line-height: 24px; margin-bottom: 12px; }
.da-sec-02 li p { color: #5A5F69; font-weight: 500; }

.da-sec-02 .collapsing { display: flex; flex-wrap: wrap; row-gap: 40px; column-gap: 32px; width: 100%; height: 0px; opacity: 0; visibility: hidden; }
.da-sec-02 .collapse.show { display: flex; flex-wrap: wrap; row-gap: 40px; column-gap: 32px; width: 100%; }
.da-sec-02 .btn { border-radius: 12px; border: 2px solid rgba(0, 0, 0, 0.10); color: #1E2A3B; font-size: 16px; font-weight: 700; line-height: 24px; display: flex; align-items: center; justify-content: center; width: 200px; padding: 12px 42px; margin: 0px auto; }
.da-sec-02 .btn:hover, .da-sec-02 .btn:focus { background-color: var(--light_blue_bg); }

@media only screen and (max-width: 1799.98px) {
    .da-sec-02 { padding: 80px 0px; }
}
@media only screen and (max-width: 1599.98px) {
    .da-sec-02 { zoom:  0.9; }
}
@media only screen and (max-width: 1199.98px) {
    .da-sec-02 { zoom:  1; }
}
@media only screen and (max-width: 991.98px) {
    .da-sec-02 { padding: 50px 0px; }
    .da-sec-02 li { width: calc((100% - 32px) / 2); }
}
@media only screen and (max-width: 767.98px) {
    .da-sec-02 h6 { margin-top: 16px; }
    .da-sec-02 ul { row-gap: 32px; margin-top: 50px; }
    .da-sec-02 li { border-radius: 20px; width: 100%; max-width: 500px; margin: 0px auto; }
    .da-sec-02 li figure { border-radius: 20px 20px 0px 0px; }
}


/* Desktop App Section 03 -------------------------------*/
.da-sec-03 { padding: 100px 0px; text-align: center; }
.da-sec-03 h2 { color: var(--black); max-width: 900px; margin: 0 auto; }
.da-sec-03 ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px; }
.da-sec-03 li { width: 20%; }
.da-sec-03 li figure { border-radius: 28px; background-color: #448AFF; -webkit-box-shadow: 0 14px 20px -8px rgba(0, 70, 255, 0.40); -moz-box-shadow: 0 14px 20px -8px rgba(0, 70, 255, 0.40); -ms-box-shadow: 0 14px 20px -8px rgba(0, 70, 255, 0.40); -o-box-shadow: 0 14px 20px -8px rgba(0, 70, 255, 0.40); box-shadow: 0 14px 20px -8px rgba(0, 70, 255, 0.40); display: inline-flex; align-items: center; justify-content: center; height: 80px; width: 80px; }
.da-sec-03 li h5 { color: var(--black); font-weight: 700; margin-top: 28px; }
.da-sec-03 li p { font-weight: 500; margin-top: 24px; }

@media only screen and (max-width: 1799.98px) {
    .da-sec-03 { padding: 80px 0px; }
}
@media only screen and (max-width: 1599.98px) {
    .da-sec-03 { zoom:  0.9; }
}
@media only screen and (max-width: 1199.98px) {
    .da-sec-03 { zoom:  1; }
}
@media only screen and (max-width: 991.98px) {
    .da-sec-03 { padding: 50px 0px; }
    .da-sec-03 ul { margin-top: 60px; gap: 32px; }
    .da-sec-03 li { width: calc((100% - 32px) / 2); }
}
@media only screen and (max-width: 991.98px) {
    .da-sec-03 { padding: 50px 0px; }
    .da-sec-03 ul { margin-top: 60px; column-gap: 32px; row-gap: 48px; text-align: left; }
    .da-sec-03 li { width: calc((100% - 32px) / 2); padding-left: 70px; position: relative; }
    .da-sec-03 li figure { border-radius: 12px; height: 50px; width: 50px; position: absolute; left: 0px; top: 0px; }
    .da-sec-03 li figure svg { width: 24px; height: 24px; }
    .da-sec-03 li h5 { margin-top: 0px; }
    .da-sec-03 li p { margin-top: 16px; }
}  
@media only screen and (max-width: 767.98px) {
    .da-sec-03 ul { margin-top: 50px; row-gap: 32px; }
    .da-sec-03 li { width: 100%; }
    .da-sec-03 li figure { border-radius: 12px; height: 50px; width: 50px; position: absolute; left: 0px; top: 0px; }
}


/* Desktop App Section 03 -------------------------------*/
.carbgPopup { background-color: rgba(51, 59, 82, 0.6); cursor: pointer; justify-content: center; align-items: center; display: flex; position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; z-index: 999999; }
.carbgPopup .popupDialog { width: 90%; max-width: 960px; position: relative; }
.carbgPopup .wrapper { background-color: var(--white); border-radius: 24px; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; }
.carbgPopup .col01 { padding: 50px 32px; width: 30%; }
.carbgPopup .col02 { line-height: 0px; width: 70%; }
.carbgPopup img { width: 100%; }
.carbgPopup h3 span { color: var(--navi_blue); }
.carbgPopup p { margin-top: 20px; }
.carbgPopup .btn { padding: 12px 36px; margin-top: 28px; }
.carbgPopup .close { border-radius: 50%; border: 1px solid rgba(0, 0, 0, .05); background: hsla(0, 0%, 100%, .7); display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; position: absolute; right: 12px; top: 12px; cursor: pointer; opacity: 1; z-index: 4; }
@media only screen and (max-width: 1023.98px) {

}
@media only screen and (max-width: 767.98px) {
    .carbgPopup aside { width: 100%; }
    .carbgPopup .col01 { padding: 32px; order: 2; width: 100%; }
    .carbgPopup .col02 { order: 1; width: 100%; }
    .carbgPopup p { margin-top: 16px; }
    .carbgPopup .btn { padding: 10px 30px; margin-top: 24px; }
}