@charset "UTF-8";

@media only screen and (max-width: 600px) {
.mobilehide {
display: none;
}

.banner-content {
padding-top: 20px;
padding-bottom: 30px;
}

.mt100 {
margin-top: 110px;
margin-bottom: -55px;
}
}

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

.scolor {
color: #B30000;
}

.slick-arrow {
width: 48px;
height: 48px;
border-color: #000;
position: absolute;
top: 44%;
margin-top: -31px;
}

.prev-arrow {
/*
border-bottom: 6px solid;
border-left: 6px solid;
*/
/*  transform: rotate(45deg);*/
left: 10px;
border: 0;
background: #fff;
z-index: 99;
border-radius: 25px;
}

.next-arrow {
/*
border-bottom: 6px solid;
border-left: 6px solid;
*/
/*  transform: rotate(-135deg);*/
right: 10px;
border: 0;
background: #fff;
border-radius: 25px;
}

.modal .modal-dialog.modal-full-width {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
left: 0 !important;
right: 0 !important
}

.modal .modal-content {
border: 0;
border-radius: 3px
}

.modal.fade.modal-top-left .modal-dialog {
width: 100%;
position: absolute;
top: 0
}

@media (min-width:576px) {
.modal.fade.modal-top-left .modal-dialog {
left: 1.75rem;
margin: 1.75rem auto
}
}

@media (max-width:767.98px) {
.modal.fade.modal-top-left .modal-dialog {
width: calc(100% - (.5rem*2))
}
}

.modal.fade.modal-top-right .modal-dialog {
width: 100%;
position: absolute;
top: 0
}

@media (min-width:576px) {
.modal.fade.modal-top-right .modal-dialog {
right: 1.75rem;
margin: 1.75rem auto
}
}

@media (max-width:767.98px) {
.modal.fade.modal-top-right .modal-dialog {
width: calc(100% - (.5rem*2))
}
}

.modal.fade.modal-bottom-right .modal-dialog {
width: 100%;
position: absolute;
bottom: 0
}

@media (min-width:576px) {
.modal.fade.modal-bottom-right .modal-dialog {
right: 1.75rem;
margin: 1.75rem auto
}
}

@media (max-width:767.98px) {
.modal.fade.modal-bottom-right .modal-dialog {
width: calc(100% - (.5rem*2))
}
}

.modal.fade.modal-bottom-left .modal-dialog {
width: 100%;
position: absolute;
bottom: 0
}

@media (min-width:576px) {
.modal.fade.modal-bottom-left .modal-dialog {
left: 1.75rem;
margin: 1.75rem auto
}
}

@media (max-width:767.98px) {
.modal.fade.modal-bottom-left .modal-dialog {
width: calc(100% - (.5rem*2))
}
}

.modal.fade.modal-bottom-center .modal-dialog {
position: absolute;
bottom: 0;
right: 0;
left: 0
}

@media (min-width:576px) {
.modal.fade.modal-bottom-center .modal-dialog {
margin: 1.75rem auto
}
}

@media (max-width:767.98px) {
.modal.fade.modal-bottom-center .modal-dialog {
width: calc(100% - (.5rem*2))
}
}

.modal .close {
position: absolute;
z-index: 1;
right: 10px !important;
top: 10px !important;
height: 2.5rem;
width: 2.5rem;
background: rgba(193, 193, 193, .3) !important;
border-radius: 50%;
font-size: 1.8rem;
padding: 0;
border: 0px solid #f5f5f5;
}

.modal .close:focus {
outline: 0
}

.modal .close span {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,1.3c-0.4-0.4-1-0.4-1.4,0L8,6.6L2.7,1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-5.3,5.3 c-0.4,0.4-0.4,1,0,1.4C1.5,14.9,1.7,15,2,15s0.5-0.1,0.7-0.3L8,9.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8l5.3-5.3C15.1,2.3,15.1,1.7,14.7,1.3z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
color: transparent;
text-shadow: none;
background-position: center
}

.modal .close.light span {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,1.3c-0.4-0.4-1-0.4-1.4,0L8,6.6L2.7,1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-5.3,5.3 c-0.4,0.4-0.4,1,0,1.4C1.5,14.9,1.7,15,2,15s0.5-0.1,0.7-0.3L8,9.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8l5.3-5.3C15.1,2.3,15.1,1.7,14.7,1.3z'/%3E%3C/svg%3E")
}

.modal .close.size-sm {
transform: scale(.5);
right: .5rem;
top: .5rem
}

.modal .close.close-pinned {
top: -19px;
right: -19px
}

.modal[data-popup=true] {
position: relative;
top: unset;
left: unset;
right: unset;
bottom: unset;
width: unset;
height: unset
}

.modal[data-popup=true].fade.modal-bottom-center .modal-dialog,
.modal[data-popup=true].fade.modal-bottom-left .modal-dialog,
.modal[data-popup=true].fade.modal-bottom-right .modal-dialog,
.modal[data-popup=true].fade.modal-top-left .modal-dialog,
.modal[data-popup=true].fade.modal-top-right .modal-dialog {
position: fixed
}

.modal[data-popup=true].fade .modal-content {
box-shadow: 0 20px 60px -2px rgba(18, 21, 35, .19)
}

.body-scrollable {
overflow: unset;
padding-right: unset !important
}

.body-scrollable .modal-backdrop {
display: none
}

.modal-backdrop {
background: #2d343a
}

.btn-cta {
text-transform: uppercase;
letter-spacing: 1px;
padding: 15px 20px;
font-size: .8rem;
font-weight: 600
}

.event-type {
border: 3px solid #e0e6ed;
height: 80px;
width: 80px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
transition: all ease .2s;
transition-delay: .3s
}

.event-type .event-indicator {
transition: all cubic-bezier(0, .89, .44, 1) .2s;
transform: scale(0);
opacity: 0;
transition-delay: .5s
}

.show .event-type .event-indicator {
transform: scale(1);
opacity: 1
}

.show .event-type {
border-color: #e0e6ed;
background-color: #e0e6ed
}

.show .event-type.success {
border-color: #0c9;
background-color: #0c9
}

.show .event-type.error {
border-color: #f2545b;
background-color: #f2545b
}

.show .event-type.warning {
border-color: #f7bc06;
background-color: #f7bc06
}

.show .event-type.info {
border-color: #19b5fe;
background-color: #19b5fe
}

.btn-cta {
text-transform: uppercase;
letter-spacing: 1px;
padding: 15px 20px;
font-size: .8rem;
font-weight: 600
}

.modal .overlay {
background-color: rgba(0, 0, 0, .35)
}

.modal .overlay-light {
background-color: rgba(0, 0, 0, .15)
}

.modal .pull-up-lg {
margin-top: -70px
}

.modal .border-thick {
border-width: .3rem !important
}

.bg-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat
}

.pointer-events-none {
pointer-events: none
}

.m-h-10 {
min-height: 10vh
}

.m-h-20 {
min-height: 20vh
}

.m-h-30 {
min-height: 30vh
}

.m-h-40 {
min-height: 40vh
}

.m-h-50 {
min-height: 50vh
}

.m-h-60 {
min-height: 60vh
}

.m-h-70 {
min-height: 70vh
}

.m-h-80 {
min-height: 80vh
}

.m-h-90 {
min-height: 90vh
}

.m-h-100 {
min-height: 100vh
}

.bg-rhino {
background-color: #28304e !important
}

.btn-cstm-light {
color: #212841;
background-color: #fff;
border-color: #fff
}

.btn-cstm-light:hover {
color: #212841;
background-color: #ececec;
border-color: #e6e6e6
}

.btn-cstm-light.focus,
.btn-cstm-light:focus {
box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.btn-cstm-light.disabled,
.btn-cstm-light:disabled {
color: #212841;
background-color: #fff;
border-color: #fff
}

.btn-cstm-light:not(:disabled):not(.disabled).active,
.btn-cstm-light:not(:disabled):not(.disabled):active,
.show>.btn-cstm-light.dropdown-toggle {
color: #212841;
background-color: #e6e6e6;
border-color: #dfdfdf
}

.btn-cstm-light:not(:disabled):not(.disabled).active:focus,
.btn-cstm-light:not(:disabled):not(.disabled):active:focus,
.show>.btn-cstm-light.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.btn-cstm-dark {
color: #fff;
background-color: #28304e;
border-color: #28304e
}

.btn-cstm-dark:hover {
color: #fff;
background-color: #1b2035;
border-color: #171b2c
}

.btn-cstm-dark.focus,
.btn-cstm-dark:focus {
box-shadow: 0 0 0 .2rem rgba(40, 48, 78, .5)
}

.btn-cstm-dark.disabled,
.btn-cstm-dark:disabled {
color: #fff;
background-color: #28304e;
border-color: #28304e
}

.btn-cstm-dark:not(:disabled):not(.disabled).active,
.btn-cstm-dark:not(:disabled):not(.disabled):active,
.show>.btn-cstm-dark.dropdown-toggle {
color: #fff;
background-color: #171b2c;
border-color: #121624
}

.btn-cstm-danger {
color: #fff;
background-color: #f2545b;
border-color: #f2545b
}

.btn-cstm-danger:hover {
color: #fff;
background-color: #ef3039;
border-color: #ee252e
}

.btn-cstm-danger.focus,
.btn-cstm-danger:focus {
box-shadow: 0 0 0 .2rem rgba(242, 84, 91, .5)
}

.btn-cstm-danger.disabled,
.btn-cstm-danger:disabled {
color: #fff;
background-color: #f2545b;
border-color: #f2545b
}

.btn-cstm-danger:not(:disabled):not(.disabled).active,
.btn-cstm-danger:not(:disabled):not(.disabled):active,
.show>.btn-cstm-danger.dropdown-toggle {
color: #fff;
background-color: #ee252e;
border-color: #ed1922
}

.btn-cstm-danger:not(:disabled):not(.disabled).active:focus,
.btn-cstm-danger:not(:disabled):not(.disabled):active:focus,
.show>.btn-cstm-danger.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(242, 84, 91, .5)
}

.btn-cstm-success {
color: #fff;
background-color: #0c9;
border-color: #0c9
}

.btn-cstm-success:hover {
color: #fff;
background-color: #00a67c;
border-color: #009973
}

.btn-cstm-success.focus,
.btn-cstm-success:focus {
box-shadow: 0 0 0 .2rem rgba(0, 204, 153, .5)
}

.btn-cstm-success.disabled,
.btn-cstm-success:disabled {
color: #fff;
background-color: #0c9;
border-color: #0c9
}

.btn-cstm-success:not(:disabled):not(.disabled).active,
.btn-cstm-success:not(:disabled):not(.disabled):active,
.show>.btn-cstm-success.dropdown-toggle {
color: #fff;
background-color: #009973;
border-color: #008c69
}

.btn-cstm-success:not(:disabled):not(.disabled).active:focus,
.btn-cstm-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-cstm-success.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(0, 204, 153, .5)
}

.btn-cstm-secondary {
color: #fff;
background-color: #95aac9;
border-color: #95aac9
}

.btn-cstm-secondary:hover {
color: #fff;
background-color: #7c96bc;
border-color: #738fb8
}

.btn-cstm-secondary.focus,
.btn-cstm-secondary:focus {
box-shadow: 0 0 0 .2rem rgba(149, 170, 201, .5)
}

.btn-cstm-secondary.disabled,
.btn-cstm-secondary:disabled {
color: #fff;
background-color: #95aac9;
border-color: #95aac9
}

.btn-cstm-secondary:not(:disabled):not(.disabled).active,
.btn-cstm-secondary:not(:disabled):not(.disabled):active,
.show>.btn-cstm-secondary.dropdown-toggle {
color: #fff;
background-color: #738fb8;
border-color: #6b88b3
}

.btn-cstm-secondary:not(:disabled):not(.disabled).active:focus,
.btn-cstm-secondary:not(:disabled):not(.disabled):active:focus,
.show>.btn-cstm-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(149, 170, 201, .5)
}

.demo-panel {
display: flex;
overflow: hidden;
height: 100vh
}

.demo-area {
display: flex;
height: 100vh;
justify-content: center;
align-items: center
}

.demo-sidebar {
width: 320px;
overflow: auto;
height: 100vh;
padding: 25px;
background: #160f16
}

.modal-preview {
opacity: .7;
transition: all ease .2s;
overflow: hidden
}

.modal-preview:hover {
opacity: 1
}

.frame-window {
flex: 1
}

.iframe {
width: 100%;
height: 100vh;
border: 0
}

.modal-name {
color: #fff;
text-decoration: none;
position: absolute;
z-index: 1;
bottom: 10px;
background: #000;
padding: 4px 10px;
font-size: 10px;
left: 10px;
border-radius: 29px;
text-transform: uppercase;
font-weight: 600
}

.open-frame,
.open-frame:hover {
text-decoration: none;
position: relative;
display: block;
border: 2px solid rgba(255, 255, 255, .18);
border-radius: .25rem;
height: 181.89px;
background: rgba(255, 255, 255, .09)
}

.font-worksans {
font-family: 'Work Sans';
font-weight: 600
}

.underline {
color: inherit;
border-bottom: 1px dashed currentColor;
transition: all ease .2s
}

.underline:hover {
text-decoration: none;
color: inherit;
border-bottom: 1px solid currentColor
}

@media (max-width:768px) {
.frame-window {
display: none
}

.demo-sidebar {
flex: 1
}
}

a.custom-anchor {
height: 340px;
display: block;
background-size: 680px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
transition: all ease 3s
}

a.custom-anchor:hover {
background-position: center 0
}

.application-info-div {
margin-left: auto !important;
margin-right: auto !important;
width: 800px;
height: 120px;
background: #b30000;
/*         margin: 5% 0 0 0;*/
}

.main-connection-div {
margin: 5px 0 0 0;
padding: 0px;
background: #FFFFFF;
/*  width:800px;*/
/*  height:350px;*/
margin-left: auto !important;
margin-right: auto !important;
}

.icon-service {
border-right: 0px solid transparent;
width: 120px;
margin: 0;
padding: 0;
}

.text-application-info-div {
position: relative;
top: -105px;
left: 135px;
}

.title-text-application-info-div {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 23px;
font-weight: 300;
width: 82%;
}

.description-text-application-info-div {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 16px;
width: 100%;
}

.application-status {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 13px;
}

.green-text {
color: #2ecc71;
}

.cookies-used {
width: 800px;
background: rgba(0, 0, 0, 0.8);
margin-left: auto !important;
margin-right: auto !important;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #FFF;
margin: 5px 0 5% 0;
font-weight: 300;
padding: 20px;
transition: .4s background;
display: none;
}

.cookies-used:hover {
background: rgba(0, 0, 0, 0.75);
}

.log-in-main-connection-div {
width: 50%;
left: 0;
height: 100%;
float: left;
}

.register-main-connection-div {
width: 50%;
right: 0;
height: 100%;
float: left;
}

.title-log-in-main-connection-div {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
margin: 5px 0 0 15px;
padding: 0;
}

.title-register-main-connection-div {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
margin: 5px 0 0 15px;
padding: 0;
}

.main-connection-div .input-field {
width: 90%;
margin: 20px 0 0 20px;
}

/* label focus color */
.main-connection-div .input-field input[type=text]:focus+label {
color: #0072ff;
left: 0.1rem;
}

.input-field label.active {
left: 0.1rem;
}

/* label underline focus color */
.main-connection-div .input-field input[type=text]:focus {
border-bottom: 1px solid #0072ff;
box-shadow: 0 1px 0 0 #0072ff;
}

/* valid color */
.main-connection-div .input-field input[type=text].valid {
border-bottom: 1px solid #2ecc71;
box-shadow: 0 1px 0 0 #2ecc71;
}

/* invalid color */
.main-connection-div .input-field input[type=text].invalid {
border-bottom: 1px solid #e74c3c;
box-shadow: 0 1px 0 0 #e74c3c;
}

.password-forgotten {
font-size: 13px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 15px 0 0 30px;
width: 100%;
height: 100%;
}

.remember-me-check {
position: relative;
top: 10px;
margin: 0 0 0 10px;
}

.password-reset-div {
display: none;
}

.black-complete-background {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
top: 0;
z-index: 10000;
}

.content-password-reset-div {
position: fixed;
background: #F5F5F5;
width: 40%;
height: 240px;
min-width: 600px;
padding: 20px;
top: 0;
bottom: 0;
margin-left: auto !important;
margin-right: auto !important;
left: 0;
right: 0;
z-index: 100000;
margin: auto;
}

.title-content-password-reset-div {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
}

.content-content-password-reset-div {
margin: 20px 0 0 0;
width: 100%;
}

.text-content-content-password-reset-div {
font-family: 'Roboto', sans-serif;
font-weight: 300;
width: 100%;
}

.content-content-password-reset-div .input-field {
width: 50%;
margin: 20px 0 0 0;
}

/* label focus color */
.content-content-password-reset-div .input-field input[type=text]:focus+label {
color: #0072ff;
}

/* label underline focus color */
.content-content-password-reset-div .input-field input[type=text]:focus {
border-bottom: 1px solid #0072ff;
box-shadow: 0 1px 0 0 #0072ff;
}

/* valid color */
.content-content-password-reset-div .input-field input[type=text].valid {
border-bottom: 1px solid #2ecc71;
box-shadow: 0 1px 0 0 #2ecc71;
}

/* invalid color */
.content-content-password-reset-div .input-field input[type=text].invalid {
border-bottom: 1px solid #e74c3c;
box-shadow: 0 1px 0 0 #e74c3c;
}

.options-alert {
position: absolute;
bottom: -60px;
height: 60px;
background: #F5F5F5;
width: 100%;
left: 0;
padding: 20px 20px 40px 20px;
}

.right-options-alert {
position: absolute;
right: 0;
}

.options-alert a {
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
color: #777;
padding: 8px 20px;
margin-right: 10px;
border-radius: 2px;
}

.options-alert a:hover {
background: rgba(0, 0, 0, 0.1);
}

.options-alert a:active {
background: rgba(0, 0, 0, 0.2);
}

[type="checkbox"]:checked+label:before {
border-right: 2px solid #0072ff;
border-bottom: 2px solid #0072ff;
}

.modal.fade.in .lab-modal-body {
bottom: 0;
opacity: 1;
}

.lab-modal-body h1 {
font-size: 4rem;
}

.lab-modal-body p {
margin: 0 0 1.62rem 0;
line-height: 1.62;
font-weight: 300;
font-size: 1rem;
color: #666;
}

@media only screen and (max-width: 600px) {
.lab-modal-body {
max-width: 100% !important;
}
}

.lab-modal-body {
position: relative;
bottom: -100px;
margin: 150px auto 0;
margin-right: 0;
padding: 40px;
max-width: 30%;
margin-top: 9%;
height: auto;
background-color: rgb(248, 250, 247);
border: 1px solid #BEBEBE;
opacity: 0;
-webkit-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
-o-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
}

.close {
margin-top: -10px;
margin-right: -8px;
text-shadow: 0 1px 0 #ffffff;
}

.popup-button {
margin-top: 70px;
}

.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
vertical-align: -40%;
margin-right: 5px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-1);
border-radius: 34px;
transition: 0.1s;
}

.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 28px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: 0.1s;
}

input:checked+.slider:before {
transform: translateX(-25.2px);
box-shadow: 0 0 2px #2196f3;
}

input:checked+.slider {
background-color: var(--color-2);
}

.decorated {
display: inline-block;
color: var(--color-1);
font-size: 18px;
white-space: nowrap;
position: relative;
}

.decorated::after {
content: "";
display: block;
width: 100%;
height: 80px;
left: -10px;
bottom: -47px;
position: absolute;
background-image: url("https://assets.codepen.io/9277864/underline-1.svg");
background-repeat: no-repeat;
transform: rotate(6.19rad);
}

.pricing-plan {
display: flex;
gap: 30px;
flex-wrap: wrap;
padding: 70px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

.plan {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
/*  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4);*/
padding: 23px;
min-width: 220px;
flex: 1;
display: flex;
justify-content: space-between;
gap: 16px;
flex-direction: column;
}

.plan:hover,
.button:hover {
transform: scale(1.009);
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.4);
}

.price {
display: flex;
align-items: flex-start;
gap: 7px;
margin-bottom: 20px;
}

.whole {
font-weight: bold;
font-size: 35px;
}

.cent {
font-weight: bold;
}

.button {
color: white;
text-decoration: none;
background-color: var(--color-1);
display: inline-block;
width: 100%;
text-align: center;
padding: 9px 20px;
border-radius: 6px;
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.4);
margin-bottom: 20px;
}



.first-cut {
display: flex;
flex-direction: column;
}

.best {
position: relative;
}

.popular {
position: absolute;
top: -65px;
right: -57.5px;
width: 100px;
height: 200px;
overflow: hidden;
transform: rotate(-45deg);
}

.inner {
transform: rotate(45deg);
background-color: #b30000;
width: 100px;
height: 100px;
top: 20px;
left: -50px;
position: relative;
border-top-right-radius: 10px;
}

.popular p {
font-weight: bold;
font-size: 12px;
transform: rotate(46deg) translate(50px, 3px);
color: white;
}

li:last-child {
display: flex;
align-items: flex-end;
}

li:last-child::before {
align-self: center;
}

.label {
display: inline-block;
margin-right: 5px;
padding: 4px 12px;
background-color: #445566;
color: white;
border-radius: 6px;
}

.tooltip:hover {
cursor: help;
}

@media only screen and (max-width: 1100px) {
.wrapper {
height: auto;
}

.first-cut {
gap: 40px;
flex-direction: row;
}

.pricing-plan {
flex-direction: column;
}

#main-container {
margin-top: 20px;
padding: 26px;
width: 960px;
}

.plan {
max-width: 100%;
padding: 20px;
flex-direction: row;
padding-right: 60px;
}

}

@media only screen and (max-width: 870px) {
.first-cut {
gap: 0;
flex-direction: column;
}

.plan {
flex-direction: column;
}

.button {
/*     width: 75%; */
}
}

@media only screen and (max-width: 620px) {
.plan {
padding: 16px;
}

#main-container {
padding: 20px;
}

.button {
width: 100%;
}
}

.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1055;
/*    display: contents!important;*/
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden !important;
outline: 0;
}
.btn-3 {
position: relative;
background: #3a4692;
z-index: 1;
transition: all 0.3s ease-out;
height: 40px;
line-height: 5px;
border-radius: 10px;
}

.btn-3:hover {
color: black;
cursor: pointer;
}

.btn-3::after {
content: " ";
position: absolute;
height: 100%;
width: 0;
background: #990000;
right: 0;
top: 0;
border-radius: 5px;
z-index: -1;
transition: all 0.3s ease-out;
}

.btn-3:hover:after {
width: 100%;
}

@-webkit-keyframes blinker {
from {
opacity: 1.0;
}

to {
opacity: 0.0;
}
}

.blink {
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}

.hithere {
animation: hithere 2s ease infinite;
}

@keyframes hithere {
30% {
transform: scale(1.2);
}

}



.bounce {
animation: bounce 2s ease infinite;
}

@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);
}
}


/* Custom WhatsApp Floating Button */
.custom-whatsapp-btn {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

.custom-whatsapp-btn img {
    width: 35px;
    height: 35px;
}

.custom-whatsapp-btn:hover {
    transform: scale(1.1);
}

/* Tooltip Style */
.custom-tooltip {
    position: absolute;
    right: 75px;
    /* Adjusted to appear on the left */
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateX(10px);
}

/* Tooltip Arrow */
.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
}

/* Show Tooltip on Hover */
.custom-whatsapp-btn:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.d-none {
    display: none;
}


.join-maitys-btn {
    text-shadow: 2px 2px 4px #000000;
    /*margin: 15px 10px 0px 10px;*/
    /*background: #c20000 !important;*/
    background-image: linear-gradient(to top, #721a1a, #ef1515);
    font-weight: bold;
}


/**************Join maitys form start*************/
/*=========================
      MODAL DESIGN
=========================*/

#lab-slide-bottom-popup .modal-dialog{
    width:90%;
    max-width:500px;
    margin:40px auto;
}

#lab-slide-bottom-popup .modal-content{
    border-radius:15px;
    border:none;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}

#lab-slide-bottom-popup .custom-header{
    /*background:linear-gradient(135deg,#0d6efd,#1d4ed8);*/
    color:#cc1515;
    text-align:center;
    /*padding:30px 25px;*/
    border-bottom:none;
}

#lab-slide-bottom-popup .custom-header h3{
    margin:0;
    font-size:60px;
    font-weight:700;
    background: linear-gradient(to right, #e21515 0%, #7d1a1a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#lab-slide-bottom-popup .modal-subtitle{
    margin-top:12px;
    margin-bottom:0;
    font-size:15px;
    line-height:24px;
    color:#f5f5f5;
}

#lab-slide-bottom-popup .custom-close{
    color:#898989;
    opacity:1;
    font-size:32px;
    margin-top:-2px;
}

#lab-slide-bottom-popup .custom-close:hover{
    color:#fff;
    opacity:.8;
}

#lab-slide-bottom-popup .modal-body{
    padding:30px;
    background:#fff;
}

#lab-slide-bottom-popup .form-group{
    margin-bottom:20px;
}

#lab-slide-bottom-popup .form-group label{
    font-weight:600;
    color:#444;
    margin-bottom:8px;
}

#lab-slide-bottom-popup .form-control{
    height:46px;
    border-radius:8px;
    border:1px solid #d8d8d8;
    box-shadow:none;
    font-size:15px;
}

#lab-slide-bottom-popup .form-control:focus{
    border-color:#0d6efd;
    box-shadow:none;
}

#lab-slide-bottom-popup textarea.form-control{
    height:auto;
}

#lab-slide-bottom-popup .submit-btn {
    padding: 0px 25px 0px 25px;
    margin-top: 10px;
    height: 48px;
    border-radius: 8px;
    font-size: 25px;
    font-weight: 600;
    background: #b51717;
    border: none;
    transition: .3s;
    text-shadow: 2px 2px 4px #000000;
    background-image: linear-gradient(to top, #721a1a, #ef1515);
}

#lab-slide-bottom-popup .submit-btn:hover{
    background:#b51717;
}

/*=========================
        TABLET
=========================*/

@media (max-width:991px){

    #lab-slide-bottom-popup .modal-dialog{
        width:95%;
        margin:30px auto;
    }

    #lab-slide-bottom-popup .custom-header{
        padding:25px 20px;
    }

    #lab-slide-bottom-popup .custom-header h3{
        font-size:24px;
    }

    #lab-slide-bottom-popup .modal-body{
        padding:25px;
    }

}

/*=========================
        MOBILE
=========================*/

@media (max-width:767px){

    #lab-slide-bottom-popup .modal-dialog{
        width:96%;
        margin:15px auto;
    }

    #lab-slide-bottom-popup .custom-header{
        padding:20px 15px;
    }

    #lab-slide-bottom-popup .custom-header h3{
        font-size:22px;
    }

    #lab-slide-bottom-popup .modal-subtitle{
        font-size:14px;
        line-height:22px;
    }

    #lab-slide-bottom-popup .modal-body{
        padding:20px 15px;
    }

    #lab-slide-bottom-popup .form-control{
        height:44px;
        font-size:14px;
    }

    #lab-slide-bottom-popup .submit-btn{
        height:46px;
        font-size:15px;
    }

}

/* Small Phones */

@media (max-width:480px){

    #lab-slide-bottom-popup .custom-header h3{
        font-size:20px;
    }

    #lab-slide-bottom-popup .modal-subtitle{
        font-size:13px;
    }

    #lab-slide-bottom-popup .modal-body{
        padding:18px 12px;
    }

}
/**************Join maitys form end*************/



/**************Email subscribe success alert start*************/
/* =====================================================
   SWEETALERT
===================================================== */

.my-swal {
    width: 600px !important;
    max-width: 95% !important;
    border-radius: 18px !important;
    padding: 25px 20px 20px !important;
}

.swal2-title {
    font-size: 2.875em !important;
}


/* =====================================================
   ANIMATION AREA
===================================================== */

.swal-email-animation {
    width: 100%;
    height: 230px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* =====================================================
   STARS
===================================================== */

.swal-star {
    position: absolute;

    width: 15px;
    height: 15px;

    background: #f6df54;

    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 38%,
        70% 60%,
        79% 100%,
        50% 76%,
        20% 100%,
        30% 60%,
        0% 38%,
        39% 35%
    );

    animation: starBlink 1.8s ease-in-out infinite;
}


.star-1 {
    top: 50px;
    left: 23%;
    animation-delay: .2s;
}


.star-2 {
    top: 92px;
    right: 21%;
    animation-delay: .7s;
}


.star-3 {
    bottom: 38px;
    left: 16%;
    animation-delay: 1.1s;
}


.star-4 {
    bottom: 30px;
    right: 14%;
    animation-delay: .4s;
}


/* =====================================================
   CIRCLES
===================================================== */

.swal-circle {
    position: absolute;

    width: 12px;
    height: 12px;

    border: 3px solid #efaaa8;

    border-radius: 50%;

    animation: circleBlink 2s ease-in-out infinite;
}


.circle-1 {
    top: 45px;
    left: 15%;
    animation-delay: .3s;
}


.circle-2 {
    top: 85px;
    right: 16%;
    animation-delay: .9s;
}


.circle-3 {
    bottom: 28px;
    right: 30%;
    animation-delay: 1.4s;
}


/* =====================================================
   DOTTED CIRCLES
===================================================== */

.swal-dot-circle {
    position: absolute;

    width: 15px;
    height: 15px;

    border: 3px dotted #cf88d1;

    border-radius: 50%;

    animation: dotBlink 2.5s ease-in-out infinite;
}


.dot-1 {
    top: 65px;
    left: 30%;
    animation-delay: .5s;
}


.dot-2 {
    top: 15px;
    right: 28%;
    animation-delay: 1s;
}


.dot-3 {
    bottom: 55px;
    left: 28%;
    animation-delay: 1.5s;
}


/* =====================================================
   PLUS
===================================================== */

.swal-plus {
    position: absolute;

    width: 13px;
    height: 13px;

    animation: plusBlink 1.7s ease-in-out infinite;
}


.swal-plus::before,
.swal-plus::after {
    content: "";

    position: absolute;

    background: #8bcf5a;

    border-radius: 2px;
}


.swal-plus::before {
    width: 13px;
    height: 3px;

    left: 0;
    top: 5px;
}


.swal-plus::after {
    width: 3px;
    height: 13px;

    left: 5px;
    top: 0;
}


.plus-1 {
    top: 105px;
    right: 25%;
    animation-delay: .2s;
}


.plus-2 {
    bottom: 40px;
    left: 26%;
    animation-delay: .8s;
}


.plus-3 {
    top: 40px;
    right: 37%;
    animation-delay: 1.2s;
}


/* =====================================================
   ZIGZAG
===================================================== */

.swal-zigzag {
    position: absolute;

    width: 20px;
    height: 12px;

    animation: zigFloat 2.5s ease-in-out infinite;
}


.swal-zigzag::before {
    content: "";

    position: absolute;

    width: 20px;
    height: 8px;

    background:
        linear-gradient(
            135deg,
            transparent 42%,
            #8bded8 43%,
            #8bded8 55%,
            transparent 56%
        );

    background-size: 9px 9px;
}


.zig-1 {
    top: 25px;
    left: 37%;
    transform: rotate(35deg);
}


.zig-2 {
    top: 45px;
    right: 34%;
    transform: rotate(-25deg);
    animation-delay: .6s;
}


.zig-3 {
    bottom: 55px;
    left: 21%;
    transform: rotate(15deg);
    animation-delay: 1s;
}


.zig-4 {
    bottom: 65px;
    right: 22%;
    transform: rotate(-15deg);
    animation-delay: .4s;
}


/* =====================================================
   STAR ANIMATION
===================================================== */

@keyframes starBlink {

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

    50% {
        opacity: .15;
        transform: scale(.65);
    }
}


/* =====================================================
   CIRCLE ANIMATION
===================================================== */

@keyframes circleBlink {

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

    50% {
        opacity: .25;
        transform: scale(.7);
    }
}


/* =====================================================
   DOT CIRCLE ANIMATION
===================================================== */

@keyframes dotBlink {

    0%,
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    50% {
        opacity: .25;
        transform: rotate(180deg) scale(.8);
    }
}


/* =====================================================
   PLUS ANIMATION
===================================================== */

@keyframes plusBlink {

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

    50% {
        opacity: .2;
        transform: scale(.7);
    }
}


/* =====================================================
   ZIGZAG ANIMATION
===================================================== */

@keyframes zigFloat {

    0%,
    100% {
        opacity: 1;
        margin-top: 0;
    }

    50% {
        opacity: .3;
        margin-top: -7px;
    }
}


/* =====================================================
   MESSAGE
===================================================== */

.swal-message {
    margin: 0 15px 10px;

    font-size: 15px;

    line-height: 1.6;

    color: #333;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 575px) {

    .my-swal {
        width: 94% !important;
        padding: 20px 10px !important;
    }


    .swal-email-animation {
        height: 210px;
    }

    .star-1 {
        left: 10%;
    }


    .star-2 {
        right: 10%;
    }


    .circle-1 {
        left: 7%;
    }


    .circle-2 {
        right: 7%;
    }


    .swal-message {
        font-size: 14px;
    }
}
/**************Email Subscribe success alert end*************/