@charset "UTF-8";
@import "root.css";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: var(--body-color);
    line-height: 26px;
}

a {
    text-decoration: none;
}

.w-img img {
    width: 100%;
}

.m-img img {
    max-width: 100%;
}

.font-normal {
    font-weight: var(--font-weight-400)!important;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: var(--a-hover) !important;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
    border: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-primary {
    color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans", sans-serif;
    color: var(--heading-color);
    margin-top: 0px;
    font-weight: var(--font-weight-700);
    line-height: 1.2;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

.redeem ul li {
    list-style-type: disc !important;
    color: var(--list-color) !important;
    font-family: var(--para-font-family);
    font-size: var(--para-font-size)!important;
    font-weight: var(--para-font-weight);
    margin-bottom: 10px;
}

p {
    font-family: var(--para-font-family);
    font-size: var(--para-font-size)!important;
    font-weight: var(--para-font-weight);

    color: var(--para-color) !important;
    margin-bottom: 15px;
    line-height: 26px;

}

*::-moz-selection {
    background: var(--selection-color);
    color: #ffffff;
    text-shadow: none;
}

::-moz-selection {
    background: var(--selection-color);
    color: #ffffff;
    text-shadow: none;
}

::selection {
    background: var(--selection-color);
    color: #ffffff;
    text-shadow: none;
}


/*--
    - Input Placeholder
-----------------------------------------*/

*::-moz-placeholder {
    color: var(--placeholder-color);
    font-size: 14px;
    opacity: 1;
}

*::placeholder {
    color: var(--placeholder-color);
    font-size: 14px;
    opacity: 1;
}


/*--
    - Common Classes
-----------------------------------------*/

.fix {
    overflow: hidden;
}

.clear {
    clear: both;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

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

.overflow-y-visible {
    overflow-x: hidden;
    overflow-y: visible;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}


/*--
    - Background color
-----------------------------------------*/

.grey-bg {
    background: #f5faff;
}

.grey-bg-2 {
    background: #dadada;
}

.grey-bg-3 {
    background: #f4f9fd;
}

.grey-bg-5 {
    background: #faf9ff;
}

.grey-bg-6 {
    background: #f0f4f8;
}

.grey-bg-8 {
    background: #e6ebf3;
}

.grey-bg-9 {
    background: #fafafb;
}

.grey-bg-12 {
    background: #f7f7fc;
}

.grey-bg-13 {
    background: #f2f7ff;
}

.grey-bg-20 {
    background: var(--gray-bg);
}

.dark-blue-bg {
    background: #063e85;
}

.footer-bg-3 {
    background: #011126;
}

.white-bg {
    background: #ffffff;
}

.black-bg {
    background: #222222;
}

.blue-bg-5 {
    background: #005ad3;
}

.blue-bg-6 {
    background: #0151bd;
}

.blue-bg-10 {
    background: #5f55ff;
}


/*--
    - color
-----------------------------------------*/

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #ffffff !important;
}

.white-color {
    color: #ffffff;
}

.theme-color {
    color: #808080 !important;
}

.black-color {
    color: #222222;
}

.mt-350 {
    margin-top: 350px;
}

.ml-220 {
    margin-left: 220px;
}

.ml--30 {
    margin-left: -30px;
}

.mb--149 {
    margin-bottom: -149px;
}

.mt--70 {
    margin-top: -70px;
}

.mt--30 {
    margin-top: -30px;
}

.pt-270 {
    padding-top: 270px;
}

.section-padding {
    padding-left: 70px;
    padding-right: 70px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-padding {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 575px) {
    .section-padding {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-padding-2 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-padding-2 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .section-padding-2 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.section-padding-3 {
    padding: 0 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .section-padding-3 {
        padding: 0 100px;
    }
}

@media (max-width: 575px) {
    .section-padding-3 {
        padding: 0;
    }
}

.section-padding-4 {
    padding: 0 75px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .section-padding-4 {
        padding: 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-padding-4 {
        padding: 0px 30px;
    }
}

@media (max-width: 575px) {
    .section-padding-4 {
        padding: 0px;
    }
}

@media (max-width: 575px) {
    .section-padding-p-0 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

.section-mb-15 {
    margin-bottom: 13px !important;
}

.custom-col-5 {
    flex: 0 0 auto;
    width: 20%;
}


/* theme btn */

.w-btn {

    color: var(--text-white);
    background: var(--btn-bg-color);
    height: 44px;
    line-height: 40px;
    border: 2px solid var(--btn-bg-bdrcolor);
    text-align: center;
    padding: 0 30px;
    display: inline-block;
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.w-btn::after {
    position: absolute;
    content: "";
    z-index: -1;
    display: block;
    left: -20%;
    right: -20%;
    top: -4%;
    height: 150%;
    width: 150%;
    bottom: 0;
    color: var(--text-dark);
    -webkit-transform: skewX(45deg) scale(0, 1);
    -moz-transform: skewX(45deg) scale(0, 1);
    -ms-transform: skewX(45deg) scale(0, 1);
    transform: skewX(45deg) scale(0, 1);
    background: var(--btn-bg-reverse-color);
    border: 2px solid var(--btn-bg-reverse-bdrcolor);
    color: var(--text-dark);
}

.w-btn:hover {
    color: var(--text-dark);
    border: 2px solid var(--btn-bg-reverse-bdrcolor);
    background: var(--btn-bg-reverse-color);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    -webkit-box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    -moz-box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
}

.w-btn:hover::after {
    background: var(--btn-bg-reverse-color);
    color: var(--text-dark);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    -webkit-transform: skewX(45deg) scale(1, 1);
    -moz-transform: skewX(45deg) scale(1, 1);
    -ms-transform: skewX(45deg) scale(1, 1);
    transform: skewX(45deg) scale(1, 1);
}

.w-btn-reverse {
    font-size: 15px;
    color: var(--text-white);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    background: var(--btn1-bg-color);
    height: 44px;
    line-height: 40px;
    border: 2px solid var( --btn1-bg-bdrcolor);
    text-align: center;
    padding: 0 30px;
    display: inline-block;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.w-btn-reverse::after {
    position: absolute;
    content: "";
    z-index: -1;
    display: block;
    left: -20%;
    right: -20%;
    top: -4%;
    height: 150%;
    width: 150%;
    bottom: 0;
    -webkit-transform: skewX(45deg) scale(0, 1);
    -moz-transform: skewX(45deg) scale(0, 1);
    -ms-transform: skewX(45deg) scale(0, 1);
    transform: skewX(45deg) scale(0, 1);
    background: var(--btn1-bg-reverse-color);
}

.w-btn-reverse:hover {
    color: var(--menu-text-color);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    -webkit-box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    -moz-box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
}

.w-btn-reverse:hover::after {
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    -webkit-transform: skewX(45deg) scale(1, 1);
    -moz-transform: skewX(45deg) scale(1, 1);
    -ms-transform: skewX(45deg) scale(1, 1);
    transform: skewX(45deg) scale(1, 1);
}

.w-btn-danger {
    font-size: 15px;
    color: var(--text-white);
    background: var(--btn1-bg-color);
    height: 44px;
    line-height: 40px;
    border: 2px solid var( --btn1-bg-bdrcolor);
    text-align: center;
    padding: 0 30px;
    display: inline-block;
    font-weight: 600;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.w-btn-danger::after {
    position: absolute;
    content: "";
    z-index: -1;
    display: block;
    left: -20%;
    right: -20%;
    top: -4%;
    height: 150%;
    width: 150%;
    bottom: 0;
    -webkit-transform: skewX(45deg) scale(0, 1);
    -moz-transform: skewX(45deg) scale(0, 1);
    -ms-transform: skewX(45deg) scale(0, 1);
    transform: skewX(45deg) scale(0, 1);
    background: var(--btn1-bg-reverse-color);
}

.w-btn-danger:hover {
    color: var(--menu-text-color);
    -webkit-box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    -moz-box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
}

.w-btn-danger:hover::after {
    -webkit-transform: skewX(45deg) scale(1, 1);
    -moz-transform: skewX(45deg) scale(1, 1);
    -ms-transform: skewX(45deg) scale(1, 1);
    transform: skewX(45deg) scale(1, 1);
}


/*

.w-btn-transparent {
    background: transparent;
    border-color: transparent;
    color: #222222;
}

.w-btn-transparent::after {
    display: none;
}

.w-btn-transparent:hover {
    background: transparent;
    color: #808080;
}

.w-btn-transparent-2 {
    font-size: 15px;
    color: #011224;
    background: transparent;
    padding: 0;
}

.w-btn-transparent-2:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #1c7df8;
} */

.w-btn-white {
    background: #222222;
    color: #ffffff;
    border-color: #222222;
}

.w-btn-white::after {
    background: #222222;
}

.w-btn-white:hover {
    border-color: #222222;
    color: #ffffff;
}


/*
.w-btn-white-2 {
    color: #2f80ed;
    height: 54px;
    line-height: 50px;
    padding: 0 38px;
}

.w-btn-white-2::after {
    background: #2f80ed;
}

.w-btn-white-2:hover {
    border-color: #2f80ed;
    color: #ffffff;
}

.w-btn-white-3 {
    color: #ffffff;
    border-color: #ffffff;
    background: transparent;
}

.w-btn-white-3::after {
    background: #ffffff;
}

.w-btn-white-3:hover {
    color: #5d41c2;
    border-color: #ffffff;
    background: #ffffff;
}

.w-btn-white-4 {
    color: #425b76;
}

.w-btn-white-4::after {
    background: #1c7df8;
}

.w-btn-white-4:hover {
    background: #1c7df8;
    border-color: #1c7df8;
    color: #ffffff;
}

.w-btn-2 {
    height: 54px;
    line-height: 50px;
    padding: 0 38px;
    font-size: 18px;
}

.w-btn-3 {
    padding: 0 25px;
}

.w-btn-4 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #ffffff;
    color: #808080;
}

.w-btn-4::after {
    background: #808080;
}

.w-btn-4:hover {
    color: #ffffff;
}

.w-btn-5 {
    padding: 0 48px;
}

.w-btn-6 {
    height: 50px;
    line-height: 46px;
}

.w-btn-7 {
    padding: 0 22px;
}

.w-btn-8 {
    color: #222222;
    background: #ffffff;
    border-color: #222222;
    height: 46px;
    line-height: 42px;
    padding: 0 30px;
}

.w-btn-8::after {
    background: #222222;
}

.w-btn-8:hover {
    border-color: #222222;
    color: #ffffff;
}

.w-btn-9 {
    padding-left: 35px;
    padding-right: 35px;
}

.w-btn-10 {
    height: 46px;
    line-height: 42px;
    padding: 0 20px;
    color: #5d41c2;
    border-color: #5d41c2;
    background: #ffffff;
}

.w-btn-10::after {
    background: #ffffff;
}

.w-btn-10:hover {
    color: #ffffff;
}

.w-btn-10:hover::after {
    background: #5d41c2;
}

.w-btn-11 {
    height: 40px;
    line-height: 36px;
    padding: 0 17px;
    background: #ffffff;
    border-color: #222222;
}

.w-btn-11:hover {
    border-color: #222222;
    color: #222222;
}

.w-btn-12 {
    padding-left: 14px;
    padding-right: 14px;
}

.w-btn-13 {
    border-color: #1c7df8;
    color: #1c7df8;
    background: #ffffff;
}

.w-btn-13::after {
    background: #1c7df8;
}

.w-btn-13:hover {
    color: #ffffff;
}

.w-btn-14 {
    padding-left: 26px;
    padding-right: 26px;
}

.w-btn-blue {
    border-color: #2f80ed;
    background: #2f80ed;
}

.w-btn-blue-header {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    background: rgba(47, 128, 237, 0.08);
    color: #2f80ed;
    border: none;
}

.w-btn-blue::after {
    background: #ffffff;
}

.w-btn-blue:hover {
    color: #2f80ed;
}

.w-btn-blue-2 {
    background: #ffffff;
    color: #2f80ed;
    border-color: #2f80ed;
}

.w-btn-blue-2::after {
    background: #2f80ed;
}

.w-btn-blue-2:hover {
    border-color: #2f80ed;
    color: #ffffff;
}

.w-btn-blue-5 {
    background: #ffffff;
    color: #222222;
    border-color: #222222;
}

.w-btn-blue-5:hover {
    color: #222222;
    background: #222222;
}

.w-btn-purple {
    background: #5d41c2;
    border-color: #5d41c2;
    color: #ffffff;
}

.w-btn-purple:hover {
    color: #5d41c2;
}

.w-btn-purple-2 {
    background: #ffffff;
    color: #5d41c2;
}

.w-btn-purple-2:hover {
    color: #ffffff;
}

.w-btn-purple-2:hover::after {
    background: #5d41c2;
}

.w-btn-round {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #6c63ff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    height: 50px;
    line-height: 50px;
    padding: 0 32px;
    text-transform: capitalize;
    text-align: center;
}

.w-btn-round:hover {
    background: #0f1432;
    color: #ffffff;
}

.w-btn-round-header {
    height: 40px;
    line-height: 40px;
}

.w-btn-round-2 {
    background: rgba(108, 99, 255, 0.14);
    color: #6c63ff;
}

.w-btn-round-2:hover {
    background: #0f1432;
    color: #ffffff;
}

.w-btn-round-border {
    background: #ffffff;
    border: 2px solid #6c63ff;
    line-height: 46px;
    color: #6c63ff;
}

.w-btn-round-border:hover {
    background: #6c63ff;
    color: #ffffff;
}

.w-btn-header {
    font-size: 15px;
    font-weight: 600;
    color: #0f1432;
    text-transform: capitalize;
}

.w-btn-header:hover {
    color: #6c63ff;
}

.w-btn-1::after {
    display: none;
}

.w-btn-1:hover {
    color: #222222;
}

.w-btn-1-3::after {
    display: none;
}

.w-btn-1-3:hover {
    color: #ffffff;
}

.w-btn-1-5::after {
    display: none;
}

.w-btn-1-5:hover {
    background: #222222;
    color: #ffffff;
} */

.link-btn {
    position: relative;
    font-size: 14px;
    font-weight: var(--font-weight-600);
    text-transform: capitalize;
    color: #0a0030;
}

.link-btn i {
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 58%;
    -webkit-transform: translateX(10px) translateY(-50%);
    -moz-transform: translateX(10px) translateY(-50%);
    -ms-transform: translateX(10px) translateY(-50%);
    transform: translateX(10px) translateY(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.link-btn:hover {
    color: #5d41c2;
}

.link-btn:hover>i {
    right: -14px;
    opacity: 1;
    visibility: visible;
}

.pulse-play {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 84px;
    text-align: center;
    color: #1c7df8;
    font-size: 30px;
    background: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: pulse 2s infinite;
    -moz-animation: pulse 2s infinite;
    -o-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}


/* section title */

.section__pre-title {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 22px;
    font-size: 14px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-bottom: 19px;
    text-transform: capitalize;
    background: #2f80ed;
    color: #ffffff;
}

.section__pre-title.purple {
    background: rgba(200, 84, 255, 0.14);
    color: #8f16c9;
}

.section__pre-title.pink {
    color: #e50351;
    background: rgba(253, 75, 133, 0.1);
}

.section__pre-title.blue {
    color: #116ae1;
    background: rgba(47, 128, 237, 0.1);
}

.section__pre-title-img {
    display: inline-block;
    margin-bottom: 18px;
}

.section__title {
    font-size: 40px;
    font-weight: var(--font-weight-800);
    color: var(--small-heading);
    margin-bottom: 25px;
}

.section__title-2 {
    color: #021937;
    margin-bottom: 15px;
    line-height: 1.3;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-2 {
        font-size: 30px;
    }
}

.section__title-3 {
    color: #0a0030;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section__title-3 {
        font-size: 35px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-3 {
        font-size: 29px;
    }
}

.section__title-4 {
    font-size: 46px;
    color: #0f1432;
    font-weight: var(--font-weight-700);
    margin-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section__title-4 {
        font-size: 43px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-4 {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .section__title-4 {
        font-size: 24px !important;
    }
}

.section__title-4-p {
    padding-left: 95px;
    padding-right: 95px;
}

.section__title-4-p-2 {
    padding-left: 95px;
    padding-right: 95px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .section__title-4-p-2 {
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-4-p-2 {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 575px) {
    .section__title-4-p-2 {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 575px) {
    .section__title {
        font-size: 27px;
    }
}

.section__title-5 {
    font-size: 46px;
    font-weight: var(--font-weight-800);
    line-height: 1.1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section__title-5 {
        font-size: 45px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section__title-5 {
        font-size: 37px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-5 {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .section__title-5 {
        font-size: 28px;
    }
}

.section__title-5-p {
    padding-left: 40px;
    padding-right: 40px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-5-p {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 575px) {
    .section__title-5-p {
        padding-left: 0;
        padding-right: 0;
    }
}

.section__title-wrapper-2 p {
    font-weight: var(--font-weight-600);
}

.section__title-wrapper-3 p {
    color: #625e6e;
    font-weight: var(--font-weight-600);
}

.section__title-wrapper-4 p {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: #57556a;
}

.section__title-wrapper-5 p {
    color: #545b65;
    font-weight: var(--font-weight-400);
}

.section__title-wrapper-5-p p {
    padding-left: 80px;
    padding-right: 80px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section__title-wrapper-5-p p {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 575px) {
    .section__title-wrapper-5-p p {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.section__title-white .section__title-5,
.section__title-white .section__title-4 {
    color: #ffffff;
}

.section__title-white p {
    color: #ffffff;
}


/* gradient backgrounds */

.gradient-pink {
    background-image: -moz-linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
    background-image: -webkit-linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
    background-image: -ms-linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
    background-image: linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
    -webkit-box-shadow: 0px 20px 16px 0px rgba(254, 12, 125, 0.16);
    -moz-box-shadow: 0px 20px 16px 0px rgba(254, 12, 125, 0.16);
    box-shadow: 0px 20px 16px 0px rgba(254, 12, 125, 0.16);
}

.gradient-blue {
    background-image: -moz-linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
    background-image: -webkit-linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
    background-image: -ms-linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
    background-image: linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
    -webkit-box-shadow: 0px 20px 16px 0px rgba(2, 60, 253, 0.16);
    -moz-box-shadow: 0px 20px 16px 0px rgba(2, 60, 253, 0.16);
    box-shadow: 0px 20px 16px 0px rgba(2, 60, 253, 0.16);
}

.gradient-blue-2 {
    background: linear-gradient(90deg, #07408e 20%, #2f80ed 100%);
}

.gradient-yellow {
    background-image: -moz-linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
    background-image: -webkit-linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
    background-image: -ms-linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
    background-image: linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
    -webkit-box-shadow: 0px 20px 16px 0px rgba(246, 157, 3, 0.16);
    -moz-box-shadow: 0px 20px 16px 0px rgba(246, 157, 3, 0.16);
    box-shadow: 0px 20px 16px 0px rgba(246, 157, 3, 0.16);
}

.gradient-purple {
    background-image: -moz-linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
    background-image: -webkit-linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
    background-image: -ms-linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
    background-image: linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
    -webkit-box-shadow: 0px 20px 16px 0px rgba(106, 47, 255, 0.16);
    -moz-box-shadow: 0px 20px 16px 0px rgba(106, 47, 255, 0.16);
    box-shadow: 0px 20px 16px 0px rgba(106, 47, 255, 0.16);
}

.circle-animation {
    border: 1px solid rgba(113, 39, 234, 0.14);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
}

.circle-animation span {
    display: block;
    position: absolute;
    content: "";
    top: calc( 50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    -webkit-animation: circle-animation 3s linear infinite;
    -moz-animation: circle-animation 3s linear infinite;
    -o-animation: circle-animation 3s linear infinite;
    animation: circle-animation 3s linear infinite;
}

.circle-animation span::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    top: -4px;
    right: -4px;
}

.circle-animation.testimonial {
    top: 21%;
    left: 11%;
    border: 1px solid rgba(113, 39, 234, 0.14);
    width: 270px;
    height: 270px;
}

.circle-animation.testimonial span::before {
    background: #808080;
}

.circle-animation.features {
    top: -5%;
    right: -440px;
    border: 1px solid rgba(34, 34, 34, 0.2);
    width: 560px;
    height: 560px;
}

.circle-animation.features span {
    -webkit-animation: circle-animation 5s linear infinite;
    -moz-animation: circle-animation 5s linear infinite;
    -o-animation: circle-animation 5s linear infinite;
    animation: circle-animation 5s linear infinite;
}

.circle-animation.features span::before {
    background: transparent;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #30edfe;
    top: -12px;
    right: -12px;
}

.circle-animation.cta-1 {
    top: -77%;
    left: 0%;
    border: 1px solid rgba(18, 129, 255, 0.14);
    width: 270px;
    height: 270px;
}

.circle-animation.cta-1 span {
    -webkit-animation: circle-animation 5s linear infinite;
    -moz-animation: circle-animation 5s linear infinite;
    -o-animation: circle-animation 5s linear infinite;
    animation: circle-animation 5s linear infinite;
}

.circle-animation.cta-1 span::before {
    background: transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fe238b;
    top: -10px;
    right: -10px;
}

.circle-animation.cta-1.cta-2 {
    top: -23%;
    left: 8%;
}

.circle-animation.cta-1.cta-2 span {
    -webkit-animation: circle-animation 12s linear infinite;
    -moz-animation: circle-animation 12s linear infinite;
    -o-animation: circle-animation 12s linear infinite;
    animation: circle-animation 12s linear infinite;
}

.circle-animation.cta-1.cta-2 span::before {
    background: transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #1281ff;
    top: -10px;
    right: -10px;
}

.circle-animation.cta-3 {
    top: -29%;
    right: 13%;
    border: 1px solid rgba(18, 129, 255, 0.14);
    width: 270px;
    height: 270px;
}

.circle-animation.cta-3 span {
    -webkit-animation: circle-animation 6s linear infinite;
    -moz-animation: circle-animation 6s linear infinite;
    -o-animation: circle-animation 6s linear infinite;
    animation: circle-animation 6s linear infinite;
}

.circle-animation.cta-3 span::before {
    background: #f1b004;
    width: 16px;
    height: 16px;
    top: -8px;
    right: -8px;
}

@keyframes circle-animation {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.basic-pagination ul li {
    display: inline-block;
}

.basic-pagination ul li:first-child {
    margin-right: 5px;
}

.basic-pagination ul li:not(:first-child) {
    margin: 0 5px;
}

@media (max-width: 575px) {
    .basic-pagination ul li {
        margin-bottom: 10px;
    }
}

.basic-pagination ul li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f2f7ff;
    color: #6a727f;
    font-weight: var(--font-weight-700);
    font-size: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.basic-pagination ul li a:hover {
    background: #1c7df8;
    color: #ffffff;
}

.basic-pagination ul li.active a {
    background: #1c7df8;
    color: #ffffff;
}


/*----------------------------------------*/


/*  02. HEADER CSS START
/*----------------------------------------*/

.header__area.sticky,
.header__bottom.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    z-index: 99;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    background: var(--header-scroll-bg);
}

header {
    background: var(--header-bg);
}

.header__transparent {
    /* position: absolute; */
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 11;
}

.header__right a.login {
    font-size: 15px;
    color: #222222;
}

.header__right a.login:hover {
    color: #808080;
}

.header__border-bottom {
    border-bottom: 1px solid #f1f1f3;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__padding {
        padding: 15px 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header__padding {
        padding: 15px 0;
    }
}

@media (max-width: 575px) {
    .header__padding {
        padding: 0px 0;
    }
}

.header__shadow {
    -webkit-box-shadow: 0px 30px 40px 0px rgba(10, 0, 48, 0.2);
    -moz-box-shadow: 0px 30px 40px 0px rgba(10, 0, 48, 0.2);
    box-shadow: 0px 30px 40px 0px rgba(10, 0, 48, 0.2);
    position: relative;
    z-index: 9;
}

.header__shadow-2 {
    -webkit-box-shadow: 0px 10px 20px 0px rgba(3, 1, 30, 0.06);
    -moz-box-shadow: 0px 10px 20px 0px rgba(3, 1, 30, 0.06);
    box-shadow: 0px 10px 20px 0px rgba(3, 1, 30, 0.06);
}

.header__info a {
    color: #6d737a;
    font-size: 13px;
    font-weight: var(--font-weight-600);
}

.header__info a:not(:last-child) {
    margin-right: 20px;
}

.header__info a:hover {
    color: #1c7df8;
}

.header__info a i {
    color: #1c7df8;
    padding-right: 3px;
    display: inline-block;
}

.header__info a i.w-phone {
    -webkit-animation: phoneShake 1s linear infinite;
    -moz-animation: phoneShake 1s linear infinite;
    -o-animation: phoneShake 1s linear infinite;
    animation: phoneShake 1s linear infinite;
}

.header__social h5 {
    font-size: 13px;
    font-weight: var(--font-weight-600);
    color: #6d737a;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
}

.header__social ul {
    display: inline-block;
}

.header__social ul li {
    display: inline-block;
}

.header__social ul li:not(:last-child) {
    margin-right: 15px;
}

.header__social ul li a {
    font-size: 13px;
    color: #6d737a;
}

.header__social ul li a:hover {
    color: #1c7df8;
}

.header__search a {
    font-size: 17px;
    color: #011224;
}

.header__btn {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: #222222;
    text-transform: capitalize;
}

.header__btn:hover {
    color: #808080;
}

@keyframes phoneShake {
    0%,
    100% {
        transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20%,
    40% {
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
    }
}


/* main menu css */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu {
        padding-left: 40px;
    }
}

.main-menu ul li {
    display: inline-block;
    position: relative;
}

.main-menu ul li:not(:last-child) {
    margin-right: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu ul li:not(:last-child) {
        margin-right: 20px !important;
    }
}

.main-menu ul li.has-dropdown>a {
    position: relative;
}

.main-menu ul li.has-dropdown>a::after {
    content: "";
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
    font-size: 14px;
    color: var(--menu-text-color);
    font-family: "Font Awesome 5 Pro";
    font-weight: var(--font-weight-400);
    margin-left: 5px;
    display: inline-block;
}

.main-menu ul li a {

    font-size: var(  --menu-font-size);
    font-family: var( --menu-font-family);
    font-weight: var(  --menu-font-weight);
    color: var(--menu-text-color);
    display: block;
    padding: 35px 0;
}

.main-menu ul li:hover>a {
    color: var(--menu-hover-text-color);
    font-size: var(  --menu-font-size);
    font-family: var( --menu-font-family);
    font-weight: var(  --menu-font-weight)!important;
}

.main-menu ul li:hover>a::after {
    color: #808080;
}

.main-menu ul li:hover .submenu {
    top: 100%;
    visibility: visible;
    opacity: 1;
}

.main-menu ul li .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 180px;
    background: var(--dropdown-bg);
    z-index: 99;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}

..main-menu ul li .submenu a{
    color: var(--dropdown-link);
}


.main-menu ul li .submenu li {
    display: block;
    width: 100%;
}

.main-menu ul li .submenu li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.main-menu ul li .submenu li.has-dropdown>a::after {
    right: 25px;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}

.main-menu ul li .submenu li a {
    padding: 10px 25px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.main-menu ul li .submenu li a::before {
    position: absolute;
    content: "";
    top: 0;
    left: auto;
    right: 0;
    width: 0;
    height: 100%;
    background: var(--submenu-li-hover);
    z-index: -1;
}

.main-menu ul li .submenu li .submenu {
    left: 120%;
    top: 0;
    visibility: hidden;
    opacity: 0;
}

.main-menu ul li .submenu li:hover>a {
    color: #ffffff;
}

.main-menu ul li .submenu li:hover>a::after {
    color: #ffffff;
}

.main-menu ul li .submenu li:hover>a::before {
    left: 0;
    right: auto;
    width: 100%;
}

.main-menu ul li .submenu li:hover .submenu {
    left: 100%;
    visibility: visible;
    opacity: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu-2 {
        padding-left: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu-2 ul li:not(:last-child) {
        margin-right: 19px;
    }
}

.main-menu-2 ul li a {
    padding: 28px 0;
    padding-bottom: 32px;
}

.main-menu-2 ul li:hover>a {
    color: #2f80ed;
}

.main-menu-2 ul li:hover>a::after {
    color: #2f80ed;
}

.main-menu-2 ul li .submenu li a::before {
    background: #2f80ed;
}

.main-menu-3 ul li:not(:last-child) {
    margin-right: 35px;
}

.main-menu-3 ul li a {
    color: #0a0030;
    padding: 25px 0;
    padding-bottom: 29px;
}

.main-menu-3 ul li:hover>a {
    color: #5d41c2;
}

.main-menu-3 ul li:hover>a::after {
    color: #5d41c2;
}

.main-menu-3 ul li .submenu li a::before {
    background: #5d41c2;
}

.main-menu-4 ul li a {
    color: #0f1432;
    padding: 30px 0;
    padding-bottom: 33px;
}

.main-menu-4 ul li:hover>a {
    color: #6c63ff;
}

.main-menu-4 ul li:hover>a::after {
    color: #6c63ff;
}

.main-menu-4 ul li .submenu li a::before {
    background: #6c63ff;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .main-menu-5 {
        margin-left: 70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu-5 {
        margin-left: 0px;
    }
}

.main-menu-5 ul li:not(:last-child) {
    margin-right: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu-5 ul li:not(:last-child) {
        margin-right: 25px;
    }
}

.main-menu-5 ul li a {
    color: #011224;
    padding: 27px 0;
    padding-bottom: 31px;
}

.main-menu-5 ul li:hover>a {
    color: #1c7df8;
}

.main-menu-5 ul li:hover>a::after {
    color: #1c7df8;
}

.main-menu-5 ul li .submenu li a::before {
    background: #1c7df8;
}


/* sidebar area start */

.sidebar__area {
    position: fixed;
    right: -340px;
    top: 0;
    width: 320px;
    height: 100%;
    background:var( --menu-slide-mobile-bg) none repeat scroll 0 0;
    overflow-y: hidden;
    -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 9999;
}

.sidebar__area.sidebar-opened {
    right: 0px;
}

.sidebar__wrapper {
    position: relative;
    padding: 30px;
}

.sidebar__close {
    position: absolute;
    top: 30px;
    right: 80px;
}

.sidebar__close-btn {
    transition: all 450ms cubic-bezier(0.4, 0.25, 0.3, 1.3);
    width: 40px;
    height: 40px;
    position: absolute;
    text-align: center;
    top: -10px;
    /*left: 50%;*/
    transform: translateX(50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--slide-close-btn);
    border: 1px solid var(--slide-close-bdr);
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    z-index: 99}

    .sidebar__close-btn:hover{
    transition: all 450ms cubic-bezier(0.4, 0.25, 0.3, 1.3);
    width: 40px;
    height: 40px;
    position: absolute;
    text-align: center;
    top: -10px;
    /*left: 50%;*/
    transform: translateX(-20%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222222;
    border: 1px solid rgba(34, 34, 34, 0.9);
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    z-index: 99}

.sidebar__close-btn:focus {
    border: 1px solid #222222;
}

.sidebar__close-btn span {
    transition: all 400ms cubic-bezier(0.4, 0.25, 0.3, 1.3) 100ms;
    position: absolute;
    top: 47%;
    left: 50%;
    font-size: 14px;
    font-weight: var(--font-weight-900);
    line-height: 40px;
    vertical-align: middle;
}

.sidebar__close-btn span:first-of-type {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.sidebar__close-btn span:last-of-type {
    text-transform: uppercase;
    transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    -o-transform: translate(-50%, 50%);
}

.sidebar__close-btn:hover {
    width: 80px;
    border-radius: 0;
}

.sidebar__close-btn:hover span:first-of-type {
    transform: translate(-50%, -150%);
    -webkit-transform: translate(-50%, -150%);
    -moz-transform: translate(-50%, -150%);
    -ms-transform: translate(-50%, -150%);
    -o-transform: translate(-50%, -150%);
}

.sidebar__close-btn:hover span:last-of-type {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sidebar-toggle-btn {
        margin-left: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sidebar-toggle-btn {
        margin-left: 30px;
    }
}

@media (max-width: 575px) {
    .sidebar-toggle-btn {
        margin-left: 30px;
    }
    .sidebar__area {
    position: fixed;
    right: -340px;
    top: 0;
    width: 320px;
    height: 100%;
    background:var( --menu-slide-mobile-bg) none repeat scroll 0 0;
    overflow-y: scroll;
    -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 9999;
}
}

.sidebar-toggle-btn .line {
    width: 30px;
    height: 3px;
    background-color: var(--toggle-color);
    display: block;
    margin: 6px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.sidebar-toggle-btn:hover {
    cursor: pointer;
}

.sidebar-toggle-btn:hover .line {
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.sidebar-toggle-btn:hover .line:nth-child(1) {
    width: 10px;
}

.sidebar-toggle-btn:hover .line:nth-child(2) {
    width: 20px;
}

.sidebar-toggle-btn-2 .line {
    background-color: #2f80ed;
}

.sidebar-toggle-btn-2 .line {
    background-color: #5d41c2;
}

.sidebar-toggle-btn-5 .line {
    background-color: #1c7df8;
}

.body-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.body-overlay.opened {
    opacity: 1;
    visibility: visible;
}

.search-form {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .search-form {
        width: 80%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .search-form {
        width: 80%;
    }
}

@media (max-width: 575px) {
    .search-form {
        width: 80%;
    }
}

.search-form input {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border: 2px solid #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: transparent;
    padding-left: 30px;
    padding-right: 65px;
    font-size: 14px;
    color: #ffffff;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.search-form input::placeholder {
    color: #ffffff;
    font-weight: var(--font-weight-600);
}

.search-form input:focus {
    border-color: #1c7df8;
    outline: none;
}

.search-form .search-btn {
    position: absolute;
    top: 0;
    right: 10px;
    width: 50px;
    height: 100%;
    text-align: center;
    line-height: 60px;
    background-color: transparent;
    color: #ffffff;
    font-size: 18px;
}

.search-form .search-btn:hover {
    cursor: pointer;
    color: #1c7df8;
}

.search-close {
    position: absolute;
    top: -250px;
    right: -150px;
    color: #ffffff;
    font-size: 25px;
    z-index: 9999;
}

.search-close:hover {
    color: #1c7df8;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .search-close {
        right: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .search-close {
        right: 0;
    }
}

@media (max-width: 575px) {
    .search-close {
        right: 0;
    }
}

.search-wrapper.search-open .search-form {
    top: 50%;
    opacity: 1;
    visibility: visible;
}


/* mean menu customize */

.mean-container a.meanmenu-reveal {
    display: none;
}

.mean-container .mean-nav {
    background: none;
    margin-top: 0;
}

.mean-container .mean-bar {
    padding: 0;
    min-height: auto;
    background: none;
}

.mean-container .mean-nav>ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}

.mean-container a.meanmenu-reveal {
    display: none !important;
}

.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 10px 0;
    font-size: var(  --menu-font-size);
    font-family: var( --menu-font-family);
    font-weight: var(  --menu-font-weight);
    color: var(--menu-text-color);
    border-top: 1px solid #dedee3;
    font-size: 13px;

}

.mean-container .mean-nav ul li a:hover {
    color:var( --menu-text-hover-color);
    letter-spacing: 2px;
}

.mobile-menu-2.mean-container .mean-nav ul li a:hover {
    color:var( --menu-text-hover-color);
}

.mobile-menu-3.mean-container .mean-nav ul li a:hover {
    color: #5d41c2;
}

.mobile-menu-5.mean-container .mean-nav ul li a:hover {
    color: #1c7df8;
}

.mean-container .mean-nav ul li a.mean-expand {
    margin-top: 2px;
    height: 15px;
    line-height: 14px;
    border-bottom: none;
    padding: 0;
    display: inline-block;
    width: 40px;
    height: 44px;
    line-height: 44px;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    color: #222222;
}

.mean-container .mean-nav>ul>li:first-child>a {
    border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
    color: #222222;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #222222;
}


/*----------------------------------------*/


/*  03. HERO CSS START
/*----------------------------------------*/

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

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

.hero__height {
    min-height: 600px;
}

.hero__height-banner {
    height: 400px;
    width: 100%;
}

.hero__height-banner-mobile {
    height: 80vh;
    width: 100%;
}

/* .slider-mobile .carousel-item img {
    min-height: 80vh;
} */

.thriwe-logo {
    text-align: center;
    width: 12%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__height {
        min-height: 650px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__height {
        min-height: 1050px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__height {
        min-height: 1100px;
    }
    .m-hero{min-height: 400px!important;}
}

@media (max-width: 575px) {
    .hero__height {
        min-height: 950px;
    }
    .m-hero{min-height: 400px!important;}
}

.hero__height-2 {
    min-height: 757px;
}

.hero__height-3 {
    min-height: 870px;
}

.hero__height-4 {
    min-height: 860px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__height-4 {
        min-height: 700px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__height-4 {
        min-height: 1200px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__height-4 {
        min-height: 1200px;
    }
}

@media (max-width: 575px) {
    .hero__height-4 {
        min-height: 1000px;
    }
}

.hero__height-5 {
    min-height: 830px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__height-5 {
        min-height: 1250px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__height-5 {
        min-height: 1100px;
    }
}

@media (max-width: 575px) {
    .hero__height-5 {
        min-height: 850px;
    }
}

.hero__title {
    font-size: var(  --main-heading-font-size);
    font-family: var( --main-heading-font-family);
    font-weight: var(  --main-heading-font-weight)!important;
    line-height: 1.14;
    margin-bottom: 20px;
    color: var(--main-heading-color);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__title {
        font-size: 60px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title {
        font-size: 53px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__title {
        font-size: 52px;
    }
}

@media (max-width: 575px) {
    .hero__title {
        font-size: 34px;
    }
}

.hero__title-2 {
    font-size: 60px;
    color: #021937;
    font-weight: var(--font-weight-800);
    margin-bottom: 20px;
    text-transform: capitalize;
}

@media (max-width: 575px) {
    .hero__title-2 {
        font-size: 35px;
    }
}

.hero__title-3 {
    font-size: 70px;
    line-height: 1.14;
    color: #ffffff;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title-3 {
        font-size: 55px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__title-3 {
        font-size: 34px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__title-3 {
        font-size: 55px;
    }
}

@media (max-width: 575px) {
    .hero__title-3 {
        font-size: 35px;
    }
}

.hero__title-4 {
    font-size: 70px;
    font-weight: var(--font-weight-800);
    line-height: 1.1;
    margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__title-4 {
        font-size: 65px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title-4 {
        font-size: 45px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__title-4 {
        font-size: 50px;
    }
}

@media (max-width: 575px) {
    .hero__title-4 {
        font-size: 32px;
    }
}

.hero__title-4 span {
    color: #6c63ff;
}

.hero__title-5 {
    font-size: 70px;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__title-5 {
        font-size: 63px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title-5 {
        font-size: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__title-5 {
        font-size: 60px;
    }
}

@media (max-width: 575px) {
    .hero__title-5 {
        font-size: 35px;
    }
}

.hero__pre-title {
    font-size: 14px;
    color: #179d50;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 20px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: rgba(39, 174, 96, 0.14);
    margin-bottom: 15px;
}

.hero__content {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__content {
        padding-right: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__content {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__content {
        padding-right: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__content {
        padding-right: 0;
    }
}

@media (max-width: 575px) {
    .hero__content {
        padding-right: 0;
    }
}

.hero__content p {
    font-size: 20px;
    line-height: 32px;
    color: var(--main-heading-para-color)!important;
    margin-bottom: 45px;
}

@media (max-width: 575px) {
    .hero__content p {
        font-size: 16px;
    }
}

.hero__content-2 a:hover {
    -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 24, 55, 0.16);
    -moz-box-shadow: 0px 30px 40px 0px rgba(1, 24, 55, 0.16);
    box-shadow: 0px 30px 40px 0px rgba(1, 24, 55, 0.16);
}

.hero__content-2 p {
    font-size: 17px;
    color: #52575e;
    margin-bottom: 45px;
}

.hero__content-3 {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__content-3 {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__content-3 {
        padding-left: 45px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__content-3 {
        padding-left: 0;
    }
}

@media (max-width: 575px) {
    .hero__content-3 {
        padding-left: 0;
    }
}

.hero__content-3 p {
    font-size: 20px;
    line-height: 32px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--font-weight-400);
    padding-right: 125px;
    margin-bottom: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__content-3 p {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__content-3 p {
        padding-right: 0;
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .hero__content-3 p {
        padding-right: 0;
        font-size: 16px;
    }
}

.hero__content-4 {
    position: relative;
    z-index: 1;
}

@media (max-width: 575px) {
    .hero__content-4 {
        padding-right: 0;
    }
}

.hero__content-4 p {
    font-size: 16px;
    color: #5d5c72;
    padding-right: 80px;
    margin-bottom: 20px;
}

@media (max-width: 575px) {
    .hero__content-4 p {
        padding-right: 0;
    }
}

.hero__content-5 {
    position: relative;
    z-index: 1;
}

.hero__content-5 p {
    color: #ffffff;
    opacity: 0.7;
    font-size: 18px;
    line-height: 32px;
    padding-right: 35px;
    margin-bottom: 40px;
}

@media (max-width: 575px) {
    .hero__content-5 p {
        padding-right: 0;
        font-size: 16px;
        line-height: 1.5;
    }
}

.hero__content-5 .play-btn {
    font-size: 15px;
    color: #ffffff;
    font-weight: var(--font-weight-600);
    display: inline-block;
}

@media (max-width: 575px) {
    .hero__content-5 .play-btn {
        margin-top: 15px;
    }
}

.hero__content-5 .play-btn span {
    padding-right: 15px;
}

.hero__content-5 .play-btn span i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 20px;
    border: 1px solid #ffffff;
}

.hero__content-5 .play-btn:hover i {
    background: #ffffff;
    color: #1c7df8;
}

.hero__client ul li {
    display: inline-block;
}

.hero__client ul li:not(:last-child) {
    margin-right: 42px;
}

@media (max-width: 575px) {
    .hero__client ul li:not(:last-child) {
        margin-right: 20px;
    }
}

.hero__search input {
    width: 370px;
    height: 54px;
    line-height: 50px;
    padding: 0 23px;
    background: #ffffff;
    outline: none;
    border: 2px solid #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.14);
    -moz-box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.14);
    box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.14);
    margin-right: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__search input {
        width: 280px;
    }
}

@media (max-width: 575px) {
    .hero__search input {
        width: 280px;
    }
}

.hero__search input::placeholder {
    font-size: 15px;
    color: #8f959d;
}

.hero__search input:focus {
    border-color: #808080;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__search button {
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    .hero__search button {
        margin-top: 15px;
    }
}

.hero__search-info {
    margin-top: 20px;
}

.hero__search-info span {
    font-size: 14px;
    color: var(--main-heading-smalltext-color);
    margin-right: 30px;
}

.hero__search-info span i {
    padding-right: 6px;
}

@media (max-width: 575px) {
    .hero__search-info span {
        display: block;
        margin-top: 10px;
    }
}

.hero__shape img {
    position: absolute;
    z-index: 0;
}

.hero__shape img.hero-circle-1 {
    top: 19%;
    right: 0;
}

.hero__shape img.hero-circle-2 {
    top: 33%;
    right: 37%;
    -webkit-animation: hero-circle-2 4s linear 0s infinite alternate;
    -moz-animation: hero-circle-2 4s linear 0s infinite alternate;
    -o-animation: hero-circle-2 4s linear 0s infinite alternate;
    animation: hero-circle-2 4s linear 0s infinite alternate;
}

.hero__shape img.hero-triangle-1 {
    right: 7%;
    top: 14%;
    -webkit-animation: hero-triangle-1 6s linear infinite;
    -moz-animation: hero-triangle-1 6s linear infinite;
    -o-animation: hero-triangle-1 6s linear infinite;
    animation: hero-triangle-1 6s linear infinite;
}

.hero__shape img.hero-triangle-2 {
    left: 6%;
    top: 32%;
    -webkit-animation: hero-triangle-2 5s linear infinite;
    -moz-animation: hero-triangle-2 5s linear infinite;
    -o-animation: hero-triangle-2 5s linear infinite;
    animation: hero-triangle-2 5s linear infinite;
}

.hero__shape-2 img {
    position: absolute;
}

.hero__shape-2 img.hero-2-dot {
    left: 2%;
    top: 40%;
    -webkit-animation: hero-circle-2 4s linear 0s infinite alternate;
    -moz-animation: hero-circle-2 4s linear 0s infinite alternate;
    -o-animation: hero-circle-2 4s linear 0s infinite alternate;
    animation: hero-circle-2 4s linear 0s infinite alternate;
}

.hero__shape-2 img.hero-2-dot-2 {
    right: 7%;
    top: 14%;
    -webkit-animation: hero-circle-2 4s linear 0s infinite alternate;
    -moz-animation: hero-circle-2 4s linear 0s infinite alternate;
    -o-animation: hero-circle-2 4s linear 0s infinite alternate;
    animation: hero-circle-2 4s linear 0s infinite alternate;
}

.hero__shape-2 img.hero-2-flower {
    right: 2%;
    bottom: 12%;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__shape-2 img.hero-2-flower {
        bottom: -13%;
    }
}

@media (max-width: 575px) {
    .hero__shape-2 img.hero-2-flower {
        bottom: -13%;
    }
}

.hero__shape-2 img.hero-2-triangle {
    left: 2%;
    top: 12%;
    -webkit-animation: hero-triangle-2 5s linear infinite;
    -moz-animation: hero-triangle-2 5s linear infinite;
    -o-animation: hero-triangle-2 5s linear infinite;
    animation: hero-triangle-2 5s linear infinite;
}

.hero__shape-2 img.hero-2-triangle-2 {
    right: 7%;
    bottom: 50%;
    -webkit-animation: hero-triangle-2 5s linear infinite;
    -moz-animation: hero-triangle-2 5s linear infinite;
    -o-animation: hero-triangle-2 5s linear infinite;
    animation: hero-triangle-2 5s linear infinite;
}

.hero__shape-3 img {
    position: absolute;
}

.hero__shape-3 img.hero-3-dot {
    left: 7%;
    bottom: 31%;
    -webkit-animation: hero-3-dot 2s linear infinite alternate;
    -moz-animation: hero-3-dot 2s linear infinite alternate;
    -o-animation: hero-3-dot 2s linear infinite alternate;
    animation: hero-3-dot 2s linear infinite alternate;
}

.hero__shape-3 img.hero-3-circle {
    left: 7%;
    bottom: 31%;
}

.hero__shape-3 img.hero-3-circle-2 {
    left: 15%;
    top: 31%;
    -webkit-animation: hero-3-dot-4 2s linear infinite alternate;
    -moz-animation: hero-3-dot-4 2s linear infinite alternate;
    -o-animation: hero-3-dot-4 2s linear infinite alternate;
    animation: hero-3-dot-4 2s linear infinite alternate;
}

.hero__shape-3 img.hero-3-dot-3 {
    right: 6%;
    top: 12%;
    -webkit-animation: hero-3-dot 2s linear infinite alternate;
    -moz-animation: hero-3-dot 2s linear infinite alternate;
    -o-animation: hero-3-dot 2s linear infinite alternate;
    animation: hero-3-dot 2s linear infinite alternate;
}

.hero__shape-3 img.hero-3-dot-4 {
    bottom: 20%;
    right: 0;
    -webkit-animation: hero-3-dot-4 4s linear infinite alternate;
    -moz-animation: hero-3-dot-4 4s linear infinite alternate;
    -o-animation: hero-3-dot-4 4s linear infinite alternate;
    animation: hero-3-dot-4 4s linear infinite alternate;
}

.hero__shape-3 img.hero-3-triangle {
    top: 15%;
    left: 2%;
    -webkit-animation: hero-triangle-2 4s linear infinite alternate;
    -moz-animation: hero-triangle-2 4s linear infinite alternate;
    -o-animation: hero-triangle-2 4s linear infinite alternate;
    animation: hero-triangle-2 4s linear infinite alternate;
}

.hero__shape-4 img {
    position: absolute;
}

.hero__shape-4 img.smile {
    right: 10%;
    top: 31%;
}

.hero__shape-4 img.smile-2 {
    right: 35%;
    top: 17%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__shape-4 img.smile-2 {
        right: 13%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__shape-4 img.smile-2 {
        right: 9%;
    }
}

@media (max-width: 575px) {
    .hero__shape-4 img.smile-2 {
        top: 8%;
        right: 7%;
    }
}

.hero__shape-4 img.cross-1 {
    bottom: 30%;
    right: 16%;
    -webkit-animation: hero-triangle-1 4s linear infinite alternate;
    -moz-animation: hero-triangle-1 4s linear infinite alternate;
    -o-animation: hero-triangle-1 4s linear infinite alternate;
    animation: hero-triangle-1 4s linear infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__shape-4 img.cross-1 {
        right: 30%;
    }
}

.hero__shape-4 img.cross-2 {
    right: 19%;
    top: 16%;
    -webkit-animation: hero-triangle-1 4s linear infinite alternate;
    -moz-animation: hero-triangle-1 4s linear infinite alternate;
    -o-animation: hero-triangle-1 4s linear infinite alternate;
    animation: hero-triangle-1 4s linear infinite alternate;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__shape-4 img.cross-2 {
        top: 8%;
    }
}

@media (max-width: 575px) {
    .hero__shape-4 img.cross-2 {
        top: 9%;
    }
}

.hero__shape-4 img.cross-3 {
    right: 41%;
    top: 46%;
    -webkit-animation: hero-triangle-1 4s linear infinite alternate;
    -moz-animation: hero-triangle-1 4s linear infinite alternate;
    -o-animation: hero-triangle-1 4s linear infinite alternate;
    animation: hero-triangle-1 4s linear infinite alternate;
}

.hero__shape-4 img.dot-1 {
    right: 51%;
    bottom: 20%;
}

.hero__shape-4 img.dot-2 {
    left: 10%;
    top: 10%;
}

.hero__shape-4 img.dot-3 {
    left: 28%;
    top: 16%;
}

.hero__shape-5 img {
    position: absolute;
}

.hero__shape-5 img.hero-5-triangle-1 {
    left: 3%;
    top: 20%;
    -webkit-animation: hero-triangle-2 5s linear infinite;
    -moz-animation: hero-triangle-2 5s linear infinite;
    -o-animation: hero-triangle-2 5s linear infinite;
    animation: hero-triangle-2 5s linear infinite;
}

@media (max-width: 575px) {
    .hero__shape-5 img.hero-5-triangle-1 {
        top: 7%;
    }
}

.hero__shape-5 img.hero-5-triangle-2 {
    right: 1%;
    top: 44%;
    -webkit-animation: hero-triangle-2 5s linear infinite;
    -moz-animation: hero-triangle-2 5s linear infinite;
    -o-animation: hero-triangle-2 5s linear infinite;
    animation: hero-triangle-2 5s linear infinite;
}

.hero__shape-5 img.hero-5-line {
    right: 0%;
    top: 33%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .hero__thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb {
        margin-left: 100px;
        margin-top: 80px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb {
        margin-left: 80px;
        margin-top: 80px;
    }
}

@media (max-width: 575px) {
    .hero__thumb {
        margin-left: 0;
        margin-top: 80px;
    }
}

.hero__thumb-wrapper {
    z-index: 1;
    width: 570px;
    height: 570px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-wrapper {
        width: 500px;
        height: 500px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-wrapper {
        width: 450px;
        height: 450px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-wrapper {
        width: 450px;
        height: 450px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-wrapper {
        width: 450px;
        height: 450px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-wrapper {
        width: 290px;
        height: 290px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-wrapper img {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-wrapper img {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-wrapper img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .hero__thumb-wrapper img {
        width: 100%;
    }
    .hero__thumb-shape.shape-1 {
        top: 60px!important;
        right: 0px!important;
        -webkit-animation: none;
        -moz-animation: none;
        -o-animation: none;
        animation: none;
    }
}

.hero__thumb-wrapper img.hero-circle {
    width: 90%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 40px 80px 0px rgba(7, 26, 90, 0.12);
    -moz-box-shadow: 0px 40px 80px 0px rgba(7, 26, 90, 0.12);
    box-shadow: 0px 40px 80px 0px rgba(7, 26, 90, 0.12);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-wrapper img.hero-circle {
        width: 100%;
    }
}

.hero__thumb-shape {
    position: absolute;
    -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
    -moz-animation: hero-thumb-animation 2s linear infinite alternate;
    -o-animation: hero-thumb-animation 2s linear infinite alternate;
    animation: hero-thumb-animation 2s linear infinite alternate;
}

.hero__thumb-shape.shape-1 {
    top: 150px;
    right: 90px;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-shape.shape-1 {
        top: 110px;
        right: 60px;
    }
}

.hero__thumb-shape.shape-2 {
    top: 35px;
    right: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-shape.shape-2 {
        top: 70px;
        right: -70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-shape.shape-2 {
        top: -2px;
        right: -15px;
    }
    .hero__thumb-shape.shape-1 {
        top: 110px;
        right: 65px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-shape.shape-2 {
        width: 200px;
        height: auto;
    }
    .hero__thumb-shape.shape-1 {
        top: 70px;
        right: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-shape.shape-2 {
        width: 200px;
        height: auto;
    }
    .hero__thumb-shape.shape-1 {
        top: 100px;
        right: 30px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-shape.shape-2 {
        width: 95px;
        height: auto;
    }
}

.hero__thumb-shape.shape-3 {
    top: 100px;
    left: -70px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-shape.shape-3 {
        top: 100px;
        left: -30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-shape.shape-3 {
        top: 0px;
        left: -70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-shape.shape-3 {
        top: -20px;
        left: -31px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-shape.shape-3 {
        width: 150px;
        height: auto;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-shape.shape-3 {
        width: 150px;
        height: auto;
    }
}

@media (max-width: 575px) {
    .hero__thumb-shape.shape-3 {
        width: 80px;
        height: auto;
        left: 0;
    }
}

.hero__thumb-shape.shape-4 {
    bottom: 0px;
    left: 0px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-shape.shape-4 {
        bottom: 30px;
        left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-shape.shape-4 {
        bottom: -35px;
        left: -23px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-shape.shape-4 {
        bottom: -29px;
        left: -23px;
    }
}

.hero__thumb-shape.shape-5 {
    bottom: 115px;
    left: -220px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .hero__thumb-shape.shape-5 {
        display: none;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-shape.shape-5 {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-shape.shape-5 {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-shape.shape-5 {
        left: -100px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-shape.shape-5 {
        left: -100px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-shape.shape-5 {
        left: auto;
        width: 100px;
        right: 0;
        bottom: -35px;
    }
}

.hero__thumb-inner {
    width: 550px;
    height: 400px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .hero__thumb-inner {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-inner {
        margin-left: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-inner {
        height: auto;
        width: auto;
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .hero__thumb-inner {
        height: auto;
        width: auto;
        margin-left: 0;
    }
}

.hero__thumb-inner img {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
    -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
    -moz-animation: hero-thumb-animation 2s linear infinite alternate;
    -o-animation: hero-thumb-animation 2s linear infinite alternate;
    animation: hero-thumb-animation 2s linear infinite alternate;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-inner img.hero-2-thumb {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-thumb {
        width: 100%;
    }
}

.hero__thumb-inner img.hero-2-girl {
    position: absolute;
    left: -100px;
    bottom: -23px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-girl {
        display: none;
    }
}

.hero__thumb-inner img.hero-2-thumb-sm {
    position: absolute;
    left: 67px;
    bottom: -40px;
    -webkit-animation: hero-thumb-sm-animation 4s linear infinite alternate;
    -moz-animation: hero-thumb-sm-animation 4s linear infinite alternate;
    -o-animation: hero-thumb-sm-animation 4s linear infinite alternate;
    animation: hero-thumb-sm-animation 4s linear infinite alternate;
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-thumb-sm {
        display: none;
    }
}

.hero__thumb-inner img.hero-2-thumb-sm-2 {
    position: absolute;
    right: -95px;
    bottom: 50px;
    -webkit-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
    -moz-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
    -o-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
    animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-inner img.hero-2-thumb-sm-2 {
        right: -30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-inner img.hero-2-thumb-sm-2 {
        right: -30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-inner img.hero-2-thumb-sm-2 {
        right: -30px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-thumb-sm-2 {
        display: none;
    }
}

.hero__thumb-inner img.hero-2-thumb-sm-3 {
    position: absolute;
    right: -35px;
    top: -70px;
    -webkit-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
    -moz-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
    -o-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
    animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-inner img.hero-2-thumb-sm-3 {
        right: 30px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-thumb-sm-3 {
        display: none;
    }
}

.hero__thumb-inner img.hero-2-circle {
    position: absolute;
    right: -200px;
    bottom: -135px;
    z-index: -1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .hero__thumb-inner img.hero-2-circle {
        right: -80px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-inner img.hero-2-circle {
        right: -30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-inner img.hero-2-circle {
        right: -30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-inner img.hero-2-circle {
        right: -30px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-circle {
        right: -10px;
    }
}

.hero__thumb-inner img.hero-2-circle-2 {
    position: absolute;
    right: 140px;
    top: -82px;
    z-index: -1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: hero-bounce;
}

.hero__thumb-inner img.hero-2-leaf {
    position: absolute;
    right: -115px;
    top: -140px;
    z-index: -1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-inner img.hero-2-leaf {
        right: -30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-inner img.hero-2-leaf {
        right: -30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-inner img.hero-2-leaf {
        right: -30px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-inner img.hero-2-leaf {
        right: 0px;
    }
}

.hero__thumb-3 {
    position: relative;
    z-index: 1;
}

.hero__thumb-3 img.hero-phone {
    margin-left: -50px;
}

@media (max-width: 575px) {
    .hero__thumb-3 img.hero-phone {
        width: 100%;
    }
}

.hero__thumb-3 img.hero-3-gradient {
    position: absolute;
    right: 0;
    top: 90px;
    z-index: -1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.hero__thumb-3 img.hero-3-dot-2 {
    position: absolute;
    top: 0;
    left: 65px;
    z-index: -1;
    -webkit-animation: hero-3-dot-2 2s linear infinite alternate;
    -moz-animation: hero-3-dot-2 2s linear infinite alternate;
    -o-animation: hero-3-dot-2 2s linear infinite alternate;
    animation: hero-3-dot-2 2s linear infinite alternate;
}

.hero__thumb-4-wrapper {
    margin-left: 77px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-4-wrapper {
        margin-left: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-4-wrapper {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-4-wrapper {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-4-wrapper {
        margin-top: 60px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-4-wrapper {
        margin-left: 30px;
        margin-top: 60px;
    }
}

.hero__thumb-4 img.girl {
    -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
    -moz-animation: hero-thumb-animation 2s linear infinite alternate;
    -o-animation: hero-thumb-animation 2s linear infinite alternate;
    animation: hero-thumb-animation 2s linear infinite alternate;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .hero__thumb-4 img.girl {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-4 img.girl {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-4 img.girl {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-4 img.girl {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-4 img.girl {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .hero__thumb-4 img.girl {
        width: 100%;
    }
}

.hero__thumb-4 img.flower {
    position: absolute;
    bottom: 0;
    right: -55%;
    -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
    -moz-animation: hero-thumb-animation 2s linear infinite alternate;
    -o-animation: hero-thumb-animation 2s linear infinite alternate;
    animation: hero-thumb-animation 2s linear infinite alternate;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .hero__thumb-4 img.flower {
        right: -25%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-4 img.flower {
        right: -5%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-4 img.flower {
        right: -5%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-4 img.flower {
        right: 2%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-4 img.flower {
        right: 2%;
    }
}

@media (max-width: 575px) {
    .hero__thumb-4 img.flower {
        display: none;
    }
}

.hero__thumb-5 {
    z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-5 {
        margin-top: 100px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-5 {
        margin-top: 100px;
    }
}

@media (max-width: 575px) {
    .hero__thumb-5 {
        margin-top: 50px;
    }
}

.hero__thumb-5 img.hero-5-thumb {
    -webkit-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    -moz-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    -webkit-animation: hero-border 5s linear infinite alternate;
    -moz-animation: hero-border 5s linear infinite alternate;
    -o-animation: hero-border 5s linear infinite alternate;
    animation: hero-border 5s linear infinite alternate;
    margin-right: -107px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-5 img.hero-5-thumb {
        margin-right: 0;
        width: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-5 img.hero-5-thumb {
        margin-right: 0;
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-5 img.hero-5-thumb {
        margin-right: 0;
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-5 img.hero-5-thumb {
        margin-right: 0;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .hero__thumb-5 img.hero-5-thumb {
        margin-right: 0;
        width: 100%;
    }
}

.hero__thumb-5 img.hero-5-shape {
    position: absolute;
    right: -130px;
    top: -30px;
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__thumb-5 img.hero-5-shape {
        right: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__thumb-5 img.hero-5-shape {
        right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__thumb-5 img.hero-5-shape {
        right: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero__thumb-5 img.hero-5-shape {
        right: 0;
    }
}

@media (max-width: 575px) {
    .hero__thumb-5 img.hero-5-shape {
        display: none;
    }
}

.hero__app ul li {
    display: inline-block;
    margin-right: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__app ul li {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .hero__app ul li {
        margin-bottom: 30px;
    }
}

.hero__app ul li a {
    height: 60px;
    text-align: center;
    padding: 0 24px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(127, 108, 193, 0.1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.hero__app ul li a:hover,
.hero__app ul li a.active {
    background: #0a0030;
    border-color: #0a0030;
    -webkit-box-shadow: 0px 20px 30px 0px rgba(10, 0, 48, 0.3);
    -moz-box-shadow: 0px 20px 30px 0px rgba(10, 0, 48, 0.3);
    box-shadow: 0px 20px 30px 0px rgba(10, 0, 48, 0.3);
}

.hero__app-icon {
    margin-right: 15px;
}

.hero__app-icon i {
    font-size: 24px;
    color: #ffffff;
}

.hero__app-content h5 {
    font-size: 12px;
    font-weight: var(--font-weight-600);
    color: #ffffff;
    margin-bottom: 0;
}

.hero__app-content span {
    font-size: 18px;
    font-weight: var(--font-weight-700);
    color: #ffffff;
}

.hero__features ul {
    margin-bottom: 18px;
}

.hero__features ul li {
    font-size: 15px;
    color: #0f1432;
    font-weight: var(--font-weight-600);
    position: relative;
    padding-left: 24px;
    margin-bottom: 15px;
}

.hero__features ul li:not(:last-child) {
    margin-right: 40px;
}

.hero__features ul li::after {
    position: absolute;
    content: "N";
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 15px;
    color: #0f1432;
    font-family: "ElegantIcons";
}

@media (max-width: 575px) {
    .hero__btn-4 a {
        margin-bottom: 20px;
    }
}

@keyframes hero-bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

@keyframes hero-border {
    0% {
        -webkit-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
        -moz-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
        border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    }
    100% {
        -webkit-border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
        -moz-border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
        border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
    }
}

@keyframes hero-thumb-animation {
    0% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes hero-3-dot-2 {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes hero-3-dot-4 {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes hero-thumb-sm-animation {
    0% {
        -webkit-transform: translateY(-20px) translateX(50px);
        -moz-transform: translateY(-20px) translateX(50px);
        -ms-transform: translateY(-20px) translateX(50px);
        transform: translateY(-20px) translateX(50px);
    }
    100% {
        -webkit-transform: translateY(-20px) translateX(0px);
        -moz-transform: translateY(-20px) translateX(0px);
        -ms-transform: translateY(-20px) translateX(0px);
        transform: translateY(-20px) translateX(0px);
    }
}

@keyframes hero-thumb-sm-2-animation {
    0% {
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes hero-thumb-sm-3-animation {
    0% {
        -webkit-transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes hero-3-dot {
    0% {
        -webkit-transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes heroImg {
    0% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes hero-heroImg {
    0% {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes hero-circle-2 {
    0% {
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes hero-triangle-2 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes hero-triangle-1 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*----------------------------------------*/


/*  03. SERVICES CSS START
/*----------------------------------------*/

.services__item {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    position: relative;
    padding: 40px 20px;
    padding-bottom: 35px;
    position: relative;
    z-index: 1;
    min-height: 354px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services__item {
        padding-left: 15px;
        padding-right: 15px;
    }
    .card-descrition{width:100%; height: 65px!important; overflow: hidden;}
}

.services__item.active,
.services__item:hover {
    box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.2), inset 0px 3px 0px 0px rgba(113, 39, 234, 0.004);
}

.services__item-2 {
    padding: 50px 47px;
    padding-right: 70px;
    -webkit-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -moz-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    min-height: 425px;
}

.services__item-list {
    padding: 50px 47px;
    /*padding-right: 70px;*/
    -webkit-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -moz-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    /*min-height: 425px;*/
}

.card-descrition{width:100%; height: 50px; overflow: hidden;}
.services__item-3 {
    padding: 40px 75px;
    -webkit-box-shadow: 0px 10px 60px 0px rgba(10, 0, 48, 0.08);
    -moz-box-shadow: 0px 10px 60px 0px rgba(10, 0, 48, 0.08);
    box-shadow: 0px 10px 60px 0px rgba(10, 0, 48, 0.08);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services__item-3 {
        padding-left: 45px;
        padding-right: 45px;
    }
}

@media (max-width: 575px) {
    .services__item-3 {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.services__item-3:hover {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}

.services__item-4 {
    padding: 40px 60px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services__item-4 {
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media (max-width: 575px) {
    .services__item-4 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.services__item-5 {
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.services__item-5:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.services__item-5:hover .services__content-5 i {
    color: #011224;
}

.services__item-5:hover .services__title-5 {
    color: #011224;
}

.services__item-5:hover .services__more-5 i {
    color: #011224;
}

.services__inner {
    position: relative;
    z-index: 1;
}

.services__inner::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 10px;
    border-radius: 20px;
    background: var(--service-top-bg);
    height: 50%;
    z-index: -1;
}

.services__inner:hover::before,
.services__inner.active::before {
    top: -3px;
}

.services__inner-2::before {
    /*background: #808080;*/
}

.services__inner-2:hover::before,
.services__inner-2.active::before {
    top: -3px;
}

.services__icon {
    min-height: 145px;
}

.services__icon-2 {
    /* margin-bottom: 22px; */
    position: relative;
    height: 120px;
}

.services__icon-2 img {
    margin: auto;
    height: auto;
    width: 120px;
}

.services__icon-3 {
    min-height: 157px;
    margin-bottom: 33px;
}

.services__thumb-4 {
    min-height: 160px;
}

.services__img-5 img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.services__title {
    font-size: 22px;
    color: var(--small-heading);
    font-size: var(  --small-heading-font-size);
    font-family: var( --small-heading-font-family);
    font-weight: var( --small-heading-font-weight);
}

.services__title a:hover {
    color: var(--small-heading-hover);
}

.services__title-2 {
    font-size: 22px;
    color: #021937;
    margin-bottom: 13px;
}

.services__title-2 a:hover {
    color: #2f80ed;
}

.services__title-3 {
    color: #0a0030;
    font-size: 22px;
    margin-bottom: 10px;
}

.services__title-3:hover {
    color: #5d41c2;
}

.services__title-4 {
    color: #0f1432;
    font-size: 22px;
    padding-right: 215px;
    margin-bottom: 12px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .services__title-4 {
        padding-right: 180px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services__title-4 {
        padding-right: 90px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services__title-4 {
        padding-right: 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .services__title-4 {
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .services__title-4 {
        padding-right: 0px;
    }
}

.services__title-4 a:hover {
    color: #6c63ff;
}

.services__title-5 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 0;
}

.services__title-6 {
    font-size: 26px;
    font-weight: var(--font-weight-700);
    color: #011224;
    margin-bottom: 15px;
}

.services__content p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 0;
}

.services__content-2 p {
    margin-bottom: 0;
}

.services__content-2 h6 {
    color:var(--text-light-dark)!important;
    font-family: var(--description-font-family);
    font-size: var(--description-font-size)!important;
    font-weight: var(--description-font-weight);
}

.services__content-list p {
    margin-bottom: 0;
}

.services__content-list h6 {
    color:var(--text-light-dark)!important;
    font-family: var(--description-font-family);
    font-size: var(--description-font-size)!important;
    font-weight: var(--description-font-weight);
}


.services__content-3 p {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: #625e6e;
}

.services__content-4 {
    padding-top: 32px;
}

.services__content-4 p {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: #808080;
    margin-bottom: 20px;
    padding-right: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services__content-4 p {
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services__content-4 p {
        padding-right: 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .services__content-4 p {
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .services__content-4 p {
        padding-right: 0px;
    }
}

.services__content-4 .link-btn:hover {
    color: #6c63ff;
}

.services__content-5 i {
    color: #ffffff;
    font-size: 18px;
    margin-right: 17px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services__content-6 {
        padding-right: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .services__content-6 {
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .services__content-6 {
        padding-right: 0px;
    }
}

.services__content-6 p {
    color: #6a727f;
    margin-bottom: 25px;
}

.services__shape img {
    position: absolute;
    z-index: -1;
}

.services__shape img.services-circle-1 {
    top: 8%;
    left: 0;
    opacity: 0.5;
}

@media (max-width: 575px) {
    .services__shape img.services-circle-1 {
        width: 100%;
    }
}

.services__shape img.services-circle-2 {
    top: 22%;
    right: 4%;
    -webkit-animation: services-circle-2 4s linear 0s infinite alternate;
    -moz-animation: services-circle-2 4s linear 0s infinite alternate;
    -o-animation: services-circle-2 4s linear 0s infinite alternate;
    animation: services-circle-2 4s linear 0s infinite alternate;
}

.services__shape img.services-dot {
    top: 5%;
    left: 0%;
    -webkit-animation: services-dot 4s linear infinite alternate;
    -moz-animation: services-dot 4s linear infinite alternate;
    -o-animation: services-dot 4s linear infinite alternate;
    animation: services-dot 4s linear infinite alternate;
}

.services__shape img.services-triangle {
    top: 14%;
    right: 6%;
    -webkit-animation: services-triangle 4s linear infinite alternate;
    -moz-animation: services-triangle 4s linear infinite alternate;
    -o-animation: services-triangle 4s linear infinite alternate;
    animation: services-triangle 4s linear infinite alternate;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .services__shape img.services-triangle {
        right: 7%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services__shape img.services-triangle {
        right: 8%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services__shape img.services-triangle {
        right: 10%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .services__shape img.services-triangle {
        right: 11%;
    }
}

@media (max-width: 575px) {
    .services__shape img.services-triangle {
        right: 28%;
    }
}

.services__shape-2 img {
    position: absolute;
}

.services__shape-2 img.services-2-circle {
    top: 12%;
    left: 0;
    opacity: 0.04;
}

.services__shape-2 img.services-2-circle-2 {
    top: 26%;
    left: 0;
    opacity: 0.06;
}

.services__more-5 a {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
}

.services__text h3 {
    font-size: 30px;
    margin-bottom: 15px;
}

.services__text p {
    margin-bottom: 45px;
}

.services__text p span {
    color: #808080;
    position: relative;
}

.services__text p span::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: #808080;
}

.services__text h4 {
    font-size: 18px;
    font-weight: var(--font-weight-600);
    margin-bottom: 20px;
    line-height: 1.5;
}

.services__list ul li {
    font-size: 16px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.services__list ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0px;
    font-family: "Font Awesome 5 Pro";
    font-size: 16px;
    color: #808080;
}

.services__widget {
    padding: 43px 30px;
    padding-bottom: 45px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services__widget {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 575px) {
    .services__widget {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.services__widget-title h4 {
    font-size: 24px;
    margin-bottom: 20px;
}

.services__link ul li {
    margin-bottom: 15px;
}

.services__link ul li:last-child {
    margin-bottom: 0;
}

.services__link ul li a {
    padding-left: 20px;
    position: relative;
}

.services__link ul li a::after {
    position: absolute;
    content: "";
    left: 0;
    top: -2px;
    font-family: "Font Awesome 5 Pro";
    font-size: 16px;
    color: #808080;
}

.services__link ul li a:hover {
    color: #808080;
}

.services__link ul li a:hover::after {
    left: 5px;
}

.services__form input {
    width: 100%;
    height: 50px;
    border: 2px solid var(--input-reverse-bdr);
    background: var(--input-reverse-bg);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 20px;
    margin-bottom: 0px;
}

.services__form select {
    width: 100%;
    height: 50px;
    border: 2px solid var(--input-reverse-bdr)!important;
    background: var(--input-reverse-bg);
    color: var(--input-text-reverse) !important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

.services__form select:focus {
    width: 100%;
    height: 50px;
    border: 2px solid var(--input-reverse-bdrfocus)!important;
    background: var(--input-reverse-bg);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.services__form input::placeholder {
    color: #9b9aa4;
}

.services__form .form-control {
    color: var(--input-text-reverse) !important;
    background: var(--input-reverse-bg);
}

.sign__input .form-control {
    width: 100%;
    height: 50px;
    border: 2px solid var(--input-reverse-bdr);
    background: var(--input-reverse-bg);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 14px;
}

.sign__input .form-control:focus {
    width: 100%;
    height: 50px;
    border: 2px solid var(--input-reverse-bdrfocus);
    background: var(--input-reverse-bg);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 20px;
}

.mb-5 {
    margin-bottom: 25px !important;
}

.services__form input:focus {
    border-color: #808080;
    outline: none;
}

.services__form input:focus::placeholder {
    opacity: 0;
}

.services__action {
    padding: 15px 30px;
    position: relative;
}

.services__action::after {
    position: absolute;
    content: "";
    top: auto;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 0;
    background: #808080;
}

.services__action:hover::after {
    top: 0;
    bottom: auto;
    height: 100%;
}

.services__action a {
    margin-bottom: 0;
    display: block;
}

.services__action a i {
    color: #808080;
    padding-right: 15px;
}

.services__action a:hover {
    color: #808080;
}

@media (max-width: 575px) {
    .services__sidebar {
        margin-right: 0;
    }
}

@keyframes services-triangle {
    0% {
        -webkit-transform: rotate(0deg) translateX(-50px);
        -moz-transform: rotate(0deg) translateX(-50px);
        -ms-transform: rotate(0deg) translateX(-50px);
        transform: rotate(0deg) translateX(-50px);
    }
    100% {
        -webkit-transform: rotate(360deg) translateY(100px);
        -moz-transform: rotate(360deg) translateY(100px);
        -ms-transform: rotate(360deg) translateY(100px);
        transform: rotate(360deg) translateY(100px);
    }
}

@keyframes services-circle-2 {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-100px);
    }
}

@keyframes services-dot {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(100px);
    }
}


/*----------------------------------------*/


/*  05. ABOUT CSS START
/*----------------------------------------*/
.about__wrapper p{text-align: justify;}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__wrapper {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__wrapper {
        margin-top: 50px;
    }
}

@media (max-width: 575px) {
    .about__wrapper {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__wrapper-2 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__wrapper-2 {
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .about__wrapper-2 {
        margin-left: 0;
    }
}

.about__wrapper ul {
    margin-bottom: 40px;
}

.about__wrapper ul li {
    padding-left: 24px;
    position: relative;
}

.about__wrapper ul li:not(:last-child) {
    margin-bottom: 15px;
}

.about__wrapper ul li::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 15px;
    color: #808080;
    left: 0;
    top: 1px;
}

.about__wrapper ul li:hover {
    padding-left: 20px;
    color: #808080;
}

.about__wrapper ul li:hover::after {
    color: #808080;
}

.about__thumb {
    bottom: 0;
    right: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb {
        right: 15px;
    }
}

@media (max-width: 575px) {
    .about__thumb {
        right: 15px;
    }
}

.about__thumb img {
    /* -webkit-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  -moz-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2); */
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
}

@media (max-width: 575px) {
    .about__thumb img.about-big {
        width: 100%;
    }
}

.about__thumb img.about-sm {
    position: absolute;
    bottom: 115px;
    left: -90px;
    -webkit-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
    -moz-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
    box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-animation: about-sm 1s linear infinite alternate;
    -moz-animation: about-sm 1s linear infinite alternate;
    -o-animation: about-sm 1s linear infinite alternate;
    animation: about-sm 1s linear infinite alternate;
}

@media (max-width: 575px) {
    .about__thumb img.about-sm {
        left: 15px;
    }
}

.about__thumb img.about-sm.about-sm-2 {
    right: -90px;
    left: auto;
    bottom: 133px;
}

@media (max-width: 575px) {
    .about__thumb img.about-sm.about-sm-2 {
        right: -15px;
    }
}

.about__thumb-2 {
    right: auto;
    left: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-2 {
        left: 25px;
    }
}

@media (max-width: 575px) {
    .about__thumb-2 {
        left: 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-3 img {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb-3 img {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-3 img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .about__thumb-3 img {
        width: 100%;
    }
}

.about__thumb-4 {
    z-index: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about__thumb-4 img.about-phone {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-4 img.about-phone {
        margin-right: 0px;
        margin-left: -50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb-4 img.about-phone {
        margin-right: 0px;
        margin-left: -50px;
    }
}

@media (max-width: 575px) {
    .about__thumb-4 img.about-phone {
        width: 100%;
        margin-right: 0px;
        margin-left: -50px;
    }
}

.about__thumb-4 img.about-4-circle {
    position: absolute;
    bottom: 12%;
    right: 0;
    z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-4 img.about-4-circle {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb-4 img.about-4-circle {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-4 img.about-4-circle {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .about__thumb-4 img.about-4-circle {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 575px) {
    .about__thumb-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about__thumb-wrapper>img {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-wrapper>img {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb-wrapper-2 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-wrapper-2 {
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .about__thumb-wrapper-2 {
        margin-left: 0;
    }
}

.about__thumb-wrapper-2 img {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.about__thumb-wrapper-5 img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    -moz-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-wrapper-5 img.about-thumb-5-big {
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-wrapper-5 img.about-thumb-5-big {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .about__thumb-wrapper-5 img.about-thumb-5-big {
        width: 100%;
        margin-left: 0;
    }
}

.about__thumb-wrapper-5 img.about-5-sm {
    margin-left: -30px;
    margin-top: -180px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb-wrapper-5 img.about-5-sm {
        margin-left: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__thumb-wrapper-5 img.about-5-sm {
        margin-left: 30px;
    }
}

@media (max-width: 575px) {
    .about__thumb-wrapper-5 img.about-5-sm {
        margin-top: -85px;
        width: 170px;
        height: 170px;
        margin-left: 30px;
    }
}

.about__shape img {
    position: absolute;
    z-index: -1;
}

.about__shape img.about-triangle {
    top: 7%;
    left: 3%;
    -webkit-animation: about-triangle 5s linear infinite alternate;
    -moz-animation: about-triangle 5s linear infinite alternate;
    -o-animation: about-triangle 5s linear infinite alternate;
    animation: about-triangle 5s linear infinite alternate;
}

.about__shape img.about-triangle-2 {
    top: 14%;
    right: 4%;
    -webkit-animation: about-triangle-2 5s linear infinite alternate;
    -moz-animation: about-triangle-2 5s linear infinite alternate;
    -o-animation: about-triangle-2 5s linear infinite alternate;
    animation: about-triangle-2 5s linear infinite alternate;
}

.about__shape img.about-circle {
    top: 3%;
    left: 4%;
    -webkit-animation: about-circle 5s linear infinite alternate;
    -moz-animation: about-circle 5s linear infinite alternate;
    -o-animation: about-circle 5s linear infinite alternate;
    animation: about-circle 5s linear infinite alternate;
}

.about__shape img.about-circle-2 {
    top: -31%;
    right: 0%;
    opacity: 0.1;
}

@media (max-width: 575px) {
    .about__shape img.about-circle-2 {
        max-width: 100%;
        top: -10%;
    }
}

.about__shape img.about-circle-3 {
    top: -18%;
    right: 0%;
}

@media (max-width: 575px) {
    .about__shape img.about-circle-3 {
        top: -7%;
        max-width: 100%;
    }
}

.about__shape img.about-circle-4 {
    top: -13%;
    left: 0%;
    opacity: 0.1;
}

@media (max-width: 575px) {
    .about__shape img.about-circle-4 {
        top: -7%;
        max-width: 100%;
    }
}

.about__shape img.about-circle-5 {
    top: -6%;
    left: 0%;
    opacity: 0.7;
}

@media (max-width: 575px) {
    .about__shape img.about-circle-5 {
        top: -7%;
        max-width: 100%;
    }
}

.about__shape img.about-plus {
    bottom: 37%;
    right: 8%;
    -webkit-animation: about-plus 5s linear infinite;
    -moz-animation: about-plus 5s linear infinite;
    -o-animation: about-plus 5s linear infinite;
    animation: about-plus 5s linear infinite;
}

.about__shape-2 img {
    position: absolute;
}

.about__shape-2 img.about-2-circle {
    right: 0;
    bottom: 34%;
    opacity: 0.04;
}

.about__shape-2 img.about-2-circle-2 {
    right: 0;
    bottom: 22%;
    opacity: 0.06;
}

.about__content-3 {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__content-3 {
        padding-top: 0;
    }
}

.about__content-4 ul {
    margin-bottom: 40px;
}

.about__content-4 ul li {
    padding-left: 24px;
    position: relative;
    color: #625e6e;
    font-weight: var(--font-weight-600);
    font-size: 15px;
}

.about__content-4 ul li:not(:last-child) {
    margin-bottom: 15px;
}

.about__content-4 ul li::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 15px;
    color: #625e6e;
    left: 0;
    top: 1px;
    font-weight: var(--font-weight-400);
}

.about__content-4 ul li:hover {
    padding-left: 20px;
    color: #5d41c2;
}

.about__content-4 ul li:hover::after {
    color: #5d41c2;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__content-5 {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__content-5 {
        margin-top: 50px;
    }
}

@media (max-width: 575px) {
    .about__content-5 {
        margin-top: 50px;
    }
}

.about__list ul {
    margin-bottom: 40px;
}

.about__list ul li {
    padding-left: 24px;
    position: relative;
    color: #011224;
    font-weight: var(--font-weight-700);
}

.about__list ul li:not(:last-child) {
    margin-bottom: 15px;
}

.about__list ul li::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 15px;
    color: #1c7df8;
    left: 0;
    top: 1px;
    font-weight: var(--font-weight-500);
}

.about__list ul li:hover {
    padding-left: 20px;
    color: #1c7df8;
}

.about__list ul li:hover::after {
    color: #1c7df8;
}

.about__counter ul li {
    display: inline-block;
}

.about__counter ul li:not(:last-child) {
    margin-right: 72px;
}

@media (max-width: 575px) {
    .about__counter ul li:not(:last-child) {
        margin-right: 30px;
    }
}

.about__counter-item h4 {
    font-size: 30px;
    font-weight: var(--font-weight-700);
    color: #011224;
    margin-bottom: 0px;
}

.about__counter-item p {
    color: #545b65;
    font-weight: var(--font-weight-600);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__call-features {
        margin-top: 100px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__call-features {
        margin-top: 100px;
    }
}

@media (max-width: 575px) {
    .about__call-features {
        margin-top: 100px;
    }
}

.about__call-features .nav-tabs {
    border: none;
}

.about__call-features .nav-tabs .nav-item {
    width: 100%;
}

.about__call-features .nav-tabs .nav-item .nav-link {
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.voice {
    background: #378bf5;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.voice h3,
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.voice span {
    color: #ffffff;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.audio {
    background: #fa8a19;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.audio h3,
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.audio span {
    color: #ffffff;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.media {
    background: #3ac81f;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.media h3,
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.media span {
    color: #ffffff;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item h3 {
    color: #ffffff;
}

.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item span {
    color: #ffffff;
}

.about__call-thumb {
    margin-left: -143px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about__call-thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__call-thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__call-thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__call-thumb {
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .about__call-thumb {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about__call-thumb img {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__call-thumb img {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__call-thumb img {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__call-thumb img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .about__call-thumb img {
        width: 100%;
    }
}

.about__call-thumb img.about-call-big {
    -webkit-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.2);
    -moz-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.2);
    box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.about__call-action {
    position: absolute;
    bottom: 45px;
    left: 115px;
    width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__call-action {
        left: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__call-action {
        left: 40px;
        width: 80%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .about__call-action {
        left: 40px;
        width: 80%;
    }
}

@media (max-width: 575px) {
    .about__call-action {
        left: 5px;
        width: 95%;
    }
}

.about__call-action ul li {
    display: inline-block;
    margin: 0 12px;
}

@media (max-width: 575px) {
    .about__call-action ul li {
        margin: 0 5px;
    }
}

.about__call-action ul li a {
    font-size: 17px;
    color: #ffffff;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    background: rgba(162, 150, 150, 0.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.about__call-action ul li a:hover {
    background: #0f1432;
}

.about__call-action ul li.hand-up a {
    width: 53px;
    height: 53px;
    line-height: 53px;
    background: #e51515;
    position: relative;
    z-index: 1;
}

.about__call-action ul li.hand-up a::after {
    position: absolute;
    content: "";
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    background: rgba(229, 21, 21, 0.4);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;
}

.about__call-sm {
    padding: 35px 30px;
    padding-bottom: 45px;
    position: absolute;
    right: 0;
    bottom: -70px;
    -webkit-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.1);
    -moz-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.1);
    box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about__call-sm {
        right: -180px;
        bottom: -100px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__call-sm {
        right: -170px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__call-sm {
        right: 30px;
    }
}

@media (max-width: 575px) {
    .about__call-sm {
        display: none;
    }
}

.about__call-sm-thumb {
    margin-bottom: 25px;
}

.about__call-sm-thumb img {
    width: 70px;
    height: 70px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.about__call-sm-action ul li {
    display: inline-block;
}

.about__call-sm-action ul li:not(:last-child) {
    margin-right: 20px;
}

.about__call-sm-action ul li.call-receive a {
    background-image: linear-gradient(to right bottom, #b3d250, #a7cb4b, #9bc547, #8fbe43, #83b73f);
    -webkit-box-shadow: 0px 15px 20px 0px rgba(155, 197, 71, 0.5);
    -moz-box-shadow: 0px 15px 20px 0px rgba(155, 197, 71, 0.5);
    box-shadow: 0px 15px 20px 0px rgba(155, 197, 71, 0.5);
    animation: callReceive 1s ease infinite;
}

.about__call-sm-action ul li.call-end a {
    background-image: linear-gradient(to bottom, #ef8486, #ee7c83, #ed7481, #ec6c7f, #eb637e);
    -webkit-box-shadow: 0px 15px 20px 0px rgba(236, 108, 127, 0.5);
    -moz-box-shadow: 0px 15px 20px 0px rgba(236, 108, 127, 0.5);
    box-shadow: 0px 15px 20px 0px rgba(236, 108, 127, 0.5);
}

.about__call-sm-action ul li.call-end a i {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.about__call-sm-action ul li.mail a {
    font-size: 14px;
    color: #c3ceda;
    background: #eaeff5;
    width: 45px;
    height: 45px;
    line-height: 45px;
}

.about__call-sm-action ul li a {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 25px;
    color: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.about__call-user {
    font-size: 16px;
    font-weight: var(--font-weight-700);
    color: #0f1432;
    margin-bottom: 0;
}

.about__call-status {
    display: inline-block;
    margin-bottom: 17px;
}

.about__call-item {
    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.about__call-item.voice {
    background: rgba(55, 139, 245, 0.1);
}

.about__call-item.voice:hover {
    background: #378bf5;
}

.about__call-item.voice:hover h3,
.about__call-item.voice:hover span {
    color: #ffffff;
}

.about__call-item.audio {
    background: rgba(250, 138, 25, 0.1);
}

.about__call-item.audio h3 {
    color: #fa8a19;
}

.about__call-item.audio:hover {
    background: #fa8a19;
}

.about__call-item.audio:hover h3,
.about__call-item.audio:hover span {
    color: #ffffff;
}

.about__call-item.media {
    background: rgba(58, 200, 31, 0.1);
}

.about__call-item.media h3 {
    color: #3ac81f;
}

.about__call-item.media:hover {
    background: #3ac81f;
}

.about__call-item.media:hover h3,
.about__call-item.media:hover span {
    color: #ffffff;
}

.about__call-item h3 {
    font-size: 16px;
    color: #378bf5;
    margin-bottom: 0;
}

.about__call-item span {
    font-size: 13px;
    font-weight: var(--font-weight-600);
    color: #57556a;
}

@keyframes about-plus {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes about-triangle-2 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes about-triangle {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes about-circle {
    0% {
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes callReceive {
    30% {
        transform: scale(1.2);
    }
    40%,
    60% {
        transform: rotate(-20deg) scale(1.2);
    }
    50% {
        transform: rotate(20deg) scale(1.2);
    }
    70% {
        transform: rotate(0deg) scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes about-sm {
    0% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}


/*----------------------------------------*/


/*  06. PRICE CSS START
/*----------------------------------------*/

.price__item {
    padding: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
    -moz-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
    box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
    border: 2px solid #ffffff;
    position: relative;
    z-index: 1;
}

.price__item::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: -moz-linear-gradient(0deg, #f2eafe 0%, white 100%);
    background-image: -webkit-linear-gradient(0deg, #f2eafe 0%, white 100%);
    background-image: -ms-linear-gradient(0deg, #f2eafe 0%, white 100%);
    background-image: linear-gradient(0deg, #f2eafe 0%, white 100%);
    opacity: 0;
    z-index: -1;
}

.price__item.active {
    border-color: #808080;
    -webkit-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
    -moz-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
    box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
}

.price__item.active::before {
    opacity: 1;
}

.price__item.active .price__btn {
    color: #ffffff;
}

.price__item.active .price__btn::after {
    background: #808080;
    -webkit-transform: skewX(45deg) scale(1, 1);
    -moz-transform: skewX(45deg) scale(1, 1);
    -ms-transform: skewX(45deg) scale(1, 1);
    transform: skewX(45deg) scale(1, 1);
}

.price__item-big {
    padding-bottom: 60px;
}

.price__item-3 {
    -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.price__offer span {
    font-size: 16px;
    color: #57556a;
    font-weight: var(--font-weight-600);
}

.price__tag h3 {
    font-size: 40px;
}

.price__tag h3 span {
    font-size: 14px;
    color: #808080;
    font-weight: var(--font-weight-500);
}

.price__tag-3 {
    margin-bottom: 32px;
}

.price__tag-3 h3 {
    color: #0a0030;
    font-size: 50px;
    padding-bottom: 17px;
    border-bottom: 1px solid #f2f0fa;
}

.price__tag-3 h3 span {
    font-size: 15px;
    color: #625e6e;
    margin-left: -12px;
    font-weight: var(--font-weight-600);
}

.price__text p {
    color: #57556a;
}

.price__features ul li {
    color: #474554;
    font-size: 14px;
    padding-left: 23px;
    position: relative;
    font-weight: var(--font-weight-600);
}

.price__features ul li:not(:last-child) {
    margin-bottom: 10px;
}

.price__features ul li::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 15px;
    color: #808080;
    left: 0;
    top: 1px;
    font-weight: var(--font-weight-400);
}

.price__features ul li:hover {
    padding-left: 20px;
    color: #808080;
}

.price__features ul li:hover::after {
    color: #808080;
}

.price__features-2 {
    margin-bottom: 43px;
}

.price__features-2 ul li {
    font-size: 15px;
    color: #0a0030;
    font-weight: var(--font-weight-600);
    margin-bottom: 10px;
}

.price__features-2 ul li:hover {
    color: #5d41c2;
}

.price__heading {
    padding: 10px 0;
    padding-bottom: 13px;
    background: #fbe0e9;
}

.price__heading h4 {
    font-size: 20px;
    font-weight: var(--font-weight-600);
    color: #0a0030;
    margin-bottom: 0;
}

.price__heading.free {
    background: #feeedf;
}

.price__heading.basic {
    background: #cfe9e2;
}

.price__heading.premium {
    background: #fbe0e9;
}

.price__body {
    padding: 40px 50px;
    padding-bottom: 50px;
}


/*----------------------------------------*/


/*  07. TESTIMONIAL CSS START
/*----------------------------------------*/

.testimonial__item {
    position: relative;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 50px 40px;
}

@media (max-width: 575px) {
    .testimonial__item {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.testimonial__item::before {
    position: absolute;
    content: "";
    left: 10px;
    right: 10px;
    width: calc( 100% - 20px);
    height: 100%;
    bottom: -20px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: -1;
    background: #ffffff;
}

.testimonial__item-3 {
    padding: 30px 30px;
    padding-bottom: 57px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}

.testimonial__item-5 {
    padding: 45px 68px;
    padding-bottom: 50px;
    background: #ffffff;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__item-5 {
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .testimonial__item-5 {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 575px) {
    .testimonial__item-5 {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.testimonial__item-5 p {
    font-size: 24px;
    line-height: 36px;
    color: #011224;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__item-5 p {
        font-size: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .testimonial__item-5 p {
        font-size: 18px;
        line-height: 1.5;
    }
}

@media (max-width: 575px) {
    .testimonial__item-5 p {
        font-size: 18px;
        line-height: 1.5;
    }
}

.testimonial__thumb img {
    width: 70px !important;
    height: 70px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.testimonial__text p {
    font-size: 18px;
    line-height: 28px;
    color: #000;
}

.testimonial__text-3 p {
    color: #0a0030;
    line-height: 26px;
    font-weight: var(--font-weight-600);
    margin-bottom: 20px;
}

.testimonial__text-4 p {
    color: #57556a;
    font-size: 15px;
    font-weight: var(--font-weight-600);
    margin-bottom: 32px;
}

.testimonial__author h3 {
    font-size: 20px;
    color: #222222;
    margin-bottom: 0;
}

.testimonial__author span {
    font-size: 14px;
    color: #57556a;
}

.testimonial__author-3 h4 {
    font-size: 18px;
    color: #0a0030;
    font-weight: var(--font-weight-600);
    margin-bottom: 0;
    line-height: 1;
}

.testimonial__author-3 span {
    font-size: 12px;
    color: #625e6e;
    line-height: 1;
}

.testimonial__slider .owl-dots {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 25px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.testimonial__slider .owl-dots .owl-dot {
    margin: 0 5px;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #dadada;
}

.testimonial__slider .owl-dots .owl-dot.active {
    background: #808080;
}

.testimonial__slider .owl-stage-outer {
    overflow: visible;
}

.testimonial__slider .owl-stage-outer .owl-item {
    opacity: 0;
    transition: opacity 0.5s;
}

.testimonial__slider .owl-stage-outer .owl-item.active {
    opacity: 1;
}

.testimonial__slider-3 .owl-stage-outer {
    overflow: visible;
}

.testimonial__slider-3 .owl-stage-outer .owl-item {
    opacity: 0;
    transition: opacity 0.5s;
}

.testimonial__slider-3 .owl-stage-outer .owl-item.active {
    opacity: 1;
}

.testimonial__slider-3 .owl-dots {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: -55px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.testimonial__slider-3 .owl-dots .owl-dot {
    margin: 0 5px;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #dadada;
}

.testimonial__slider-3 .owl-dots .owl-dot.active {
    background: #5d41c2;
}

.testimonial__slider-4 .owl-dots {
    bottom: -60px;
}

.testimonial__slider-4 .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    background: #dadada;
}

.testimonial__slider-4 .owl-dots .owl-dot.active {
    background: #6c63ff;
}

.testimonial__slider-5 .owl-stage-outer {
    overflow: visible;
}

.testimonial__slider-5 .owl-stage-outer .owl-item {
    opacity: 0;
    transition: opacity 0.5s;
}

.testimonial__slider-5 .owl-stage-outer .owl-item.active {
    opacity: 1;
}

.testimonial__slider-5 .owl-dots {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: -70px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.testimonial__slider-5 .owl-dots .owl-dot {
    margin: 0 20px;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #c8c8c8;
    position: relative;
}

.testimonial__slider-5 .owl-dots .owl-dot::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 30px;
    width: 30px;
    border: 1px solid #ffffff;
    background: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
}

.testimonial__slider-5 .owl-dots .owl-dot.active,
.testimonial__slider-5 .owl-dots .owl-dot:hover {
    background: #ffffff;
}

.testimonial__slider-5 .owl-dots .owl-dot.active::after,
.testimonial__slider-5 .owl-dots .owl-dot:hover::after {
    visibility: visible;
    opacity: 1;
}

.testimonial__shape img {
    position: absolute;
    z-index: -1;
}

.testimonial__shape img.testimonial-circle-1 {
    top: 11%;
    left: 4%;
    -webkit-animation: testimonial-circle-1 5s linear 0s infinite alternate;
    -moz-animation: testimonial-circle-1 5s linear 0s infinite alternate;
    -o-animation: testimonial-circle-1 5s linear 0s infinite alternate;
    animation: testimonial-circle-1 5s linear 0s infinite alternate;
}

.testimonial__shape img.testimonial-circle-2 {
    top: 17%;
    right: 5%;
    -webkit-animation: testimonial-circle-2 5s linear 0s infinite alternate;
    -moz-animation: testimonial-circle-2 5s linear 0s infinite alternate;
    -o-animation: testimonial-circle-2 5s linear 0s infinite alternate;
    animation: testimonial-circle-2 5s linear 0s infinite alternate;
}

.testimonial__shape-4 img {
    position: absolute;
    top: 21%;
    left: 36%;
    opacity: 0.1;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__shape-4 img {
        left: 15%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .testimonial__shape-4 img {
        left: 0%;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .testimonial__shape-4 img {
        left: 0%;
        width: 100%;
    }
}

.testimonial__avater img {
    width: 50px !important;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.testimonial__info h4 {
    font-size: 22px;
    color: #011224;
    margin-bottom: 2px;
}

.testimonial__info span {
    font-size: 14px;
    color: #57556a;
}

.testimonial__5-img img {
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #ffffff;
    -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 18, 36, 0.2);
    -moz-box-shadow: 0px 30px 40px 0px rgba(1, 18, 36, 0.2);
    box-shadow: 0px 30px 40px 0px rgba(1, 18, 36, 0.2);
}

.testimonial__5-img img.testi-big {
    width: 60px;
    height: 60px;
}

.testimonial__5-img img.testi-sm {
    width: 50px;
    height: 50px;
}

.testimonial__5-img img.testi-1 {
    left: 4%;
    top: 18%;
}

.testimonial__5-img img.testi-2 {
    left: 22%;
    bottom: 24%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .testimonial__5-img img.testi-2 {
        left: 15%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .testimonial__5-img img.testi-2 {
        left: 12%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial__5-img img.testi-2 {
        left: 15%;
        bottom: 14%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__5-img img.testi-2 {
        left: 16%;
        bottom: 10%;
    }
}

.testimonial__5-img img.testi-3 {
    right: 10%;
    bottom: 22%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial__5-img img.testi-3 {
        right: 3%;
        bottom: 18%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__5-img img.testi-3 {
        right: 9%;
        bottom: 16%;
    }
}

.testimonial__5-img img.testi-4 {
    right: 4%;
    top: 37%;
}

.testimonial__5-img img.testi-5 {
    right: 28%;
    top: 21%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .testimonial__5-img img.testi-5 {
        right: 20%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .testimonial__5-img img.testi-5 {
        right: 17%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial__5-img img.testi-5 {
        right: 9%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__5-img img.testi-5 {
        display: none;
    }
}

.testimonial__5-img img.testi-6 {
    left: 5%;
    top: 56%;
}

.testimonial__5-img img.testi-7 {
    right: 23%;
    top: 55%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__5-img img.testi-7 {
        display: none;
    }
}

.rating {
    margin-bottom: 15px;
}

.rating ul li {
    display: inline-block;
    font-size: 12px;
    color: #ffb543;
}


/*----------------------------------------*/


/*  08. FEATURES CSS START
/*----------------------------------------*/

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .features__item {
        padding-left: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .features__item {
        padding-left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__item {
        padding-left: 0px;
        margin-bottom: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .features__item {
        margin-bottom: 60px;
        padding-left: 0px;
    }
}

@media (max-width: 575px) {
    .features__item {
        margin-bottom: 60px;
        padding-left: 0px;
    }
}

.features__item:hover .features__icon span {
    -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.features__icon span {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 66px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.features__icon span i {
    color: #ffffff;
    font-size: 25px;
}

.features__title {
    font-size: 20px;
    margin-bottom: 32px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .features__title {
        font-size: 20px;
    }
}

.features__list ul li {
    padding-left: 35px;
    font-size: 15px;
    color: var(--para-color);
    font-weight: var(--font-weight-600);
    position: relative;
    margin-bottom: 15px;
}

.features__list ul li::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Pro";
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    text-align: center;
    color: #11b50d;
    background: rgba(17, 181, 13, 0.1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-weight: var(--font-weight-500);
}


/* .features__list ul li:hover {
  color: #11b50d;
} */


/* .features__list ul li:hover::after {
  background: #11b50d;
  color: #ffffff;
} */

.features__shape img {
    position: absolute;
    z-index: -1;
}

.features__shape img.features-circle-1 {
    left: 4%;
    top: 29%;
}

.features__shape-2 img {
    position: absolute;
    z-index: -1;
}

.features__shape-2 img.features-2-dot {
    left: 2%;
    top: 24%;
    -webkit-animation: features-dot-1 4s linear 0s infinite alternate;
    -moz-animation: features-dot-1 4s linear 0s infinite alternate;
    -o-animation: features-dot-1 4s linear 0s infinite alternate;
    animation: features-dot-1 4s linear 0s infinite alternate;
}

.features__shape-2 img.features-2-dot-2 {
    right: 5%;
    top: 23%;
    -webkit-animation: features-dot-2 4s linear 0s infinite alternate;
    -moz-animation: features-dot-2 4s linear 0s infinite alternate;
    -o-animation: features-dot-2 4s linear 0s infinite alternate;
    animation: features-dot-2 4s linear 0s infinite alternate;
}

.features__shape-2 img.features-2-dot-3 {
    bottom: 2%;
    right: 12%;
    -webkit-animation: features-dot-1 4s linear 0s infinite alternate;
    -moz-animation: features-dot-1 4s linear 0s infinite alternate;
    -o-animation: features-dot-1 4s linear 0s infinite alternate;
    animation: features-dot-1 4s linear 0s infinite alternate;
}

.features__shape-2 img.features-2-triangle-1 {
    top: 17%;
    left: 19%;
    -webkit-animation: features-triangle-1 5s linear infinite;
    -moz-animation: features-triangle-1 5s linear infinite;
    -o-animation: features-triangle-1 5s linear infinite;
    animation: features-triangle-1 5s linear infinite;
}

.features__shape-2 img.features-2-triangle-2 {
    left: 10%;
    top: 55%;
    -webkit-animation: features-triangle-1 5s linear infinite;
    -moz-animation: features-triangle-1 5s linear infinite;
    -o-animation: features-triangle-1 5s linear infinite;
    animation: features-triangle-1 5s linear infinite;
}

.features__shape-2 img.features-2-triangle-3 {
    right: 10%;
    bottom: 18%;
    -webkit-animation: features-triangle-1 5s linear infinite;
    -moz-animation: features-triangle-1 5s linear infinite;
    -o-animation: features-triangle-1 5s linear infinite;
    animation: features-triangle-1 5s linear infinite;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__more {
        margin-top: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .features__more {
        margin-top: 0;
    }
}

@media (max-width: 575px) {
    .features__more {
        margin-top: 0;
    }
}

.features__tab .nav-tabs {
    display: block;
    border-bottom: none;
}

.features__tab .nav-tabs .nav-item {
    margin-bottom: 30px;
}

.features__tab .nav-tabs .nav-item .nav-link {
    padding: 30px 25px;
    border: none;
    background: #ffffff;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: var(--font-weight-700);
    color: #222222;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__tab .nav-tabs .nav-item .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.features__tab .nav-tabs .nav-item .nav-link i {
    font-size: 20px;
    padding-right: 12px;
}

.features__tab .nav-tabs .nav-item .nav-link.pink-bg {
    background: #fff6fa;
}

.features__tab .nav-tabs .nav-item .nav-link.pink-bg i {
    color: #fe0c7d;
}

.features__tab .nav-tabs .nav-item .nav-link.blue-bg {
    background: #cdedff;
}

.features__tab .nav-tabs .nav-item .nav-link.blue-bg i {
    color: #03a6ff;
}

.features__tab .nav-tabs .nav-item .nav-link.yellow-bg {
    background: #fff9ed;
}

.features__tab .nav-tabs .nav-item .nav-link.yellow-bg i {
    color: #fbad26;
}

.features__tab .nav-tabs .nav-item .nav-link img {
    margin-right: 18px;
}

.features__tab .nav-tabs .nav-item .nav-link.active {
    color: #ffffff;
}

.features__tab .nav-tabs .nav-item .nav-link.active i {
    color: #ffffff;
}

.features__tab .nav-tabs .nav-item .nav-link.active.pink-bg {
    background: #fe0c7d;
}

.features__tab .nav-tabs .nav-item .nav-link.active.blue-bg {
    background: #03a6ff;
}

.features__tab .nav-tabs .nav-item .nav-link.active.yellow-bg {
    background: #fbad26;
}

.features__thumb-inner {
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__thumb-inner {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .features__thumb-inner {
        margin-top: 50px;
    }
}

@media (max-width: 575px) {
    .features__thumb-inner {
        margin-top: 50px;
    }
}

.features__thumb-inner img {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
    -webkit-animation: features-thumb-animation 2s linear infinite alternate;
    -moz-animation: features-thumb-animation 2s linear infinite alternate;
    -o-animation: features-thumb-animation 2s linear infinite alternate;
    animation: features-thumb-animation 2s linear infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .features__thumb-inner img.fea-thumb {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__thumb-inner img.fea-thumb {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .features__thumb-inner img.fea-thumb {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .features__thumb-inner img.fea-thumb {
        width: 100%;
    }
}

.features__thumb-inner img.fea-sm {
    position: absolute;
    left: 125px;
    bottom: -50px;
    -webkit-animation: features-thumb-sm-animation 4s linear infinite alternate;
    -moz-animation: features-thumb-sm-animation 4s linear infinite alternate;
    -o-animation: features-thumb-sm-animation 4s linear infinite alternate;
    animation: features-thumb-sm-animation 4s linear infinite alternate;
}

@media (max-width: 575px) {
    .features__thumb-inner img.fea-sm {
        left: -10px;
    }
}

.features__thumb-inner img.fea-sm-2 {
    position: absolute;
    right: -45px;
    top: 95px;
    -webkit-animation: features-thumb-sm-2-animation 2s linear infinite alternate;
    -moz-animation: features-thumb-sm-2-animation 2s linear infinite alternate;
    -o-animation: features-thumb-sm-2-animation 2s linear infinite alternate;
    animation: features-thumb-sm-2-animation 2s linear infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .features__thumb-inner img.fea-sm-2 {
        right: -20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__thumb-inner img.fea-sm-2 {
        right: -20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .features__thumb-inner img.fea-sm-2 {
        right: -20px;
    }
}

@media (max-width: 575px) {
    .features__thumb-inner img.fea-sm-2 {
        right: 20px;
    }
}

.features__thumb-inner img.fea-2-shape {
    position: absolute;
    right: -287px;
    top: -55px;
    opacity: 0.1;
    z-index: -1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .features__thumb-inner img.fea-2-shape {
        width: 100%;
        right: -85px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .features__thumb-inner img.fea-2-shape {
        width: 100%;
        right: -30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .features__thumb-inner img.fea-2-shape {
        width: 100%;
        right: -20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__thumb-inner img.fea-2-shape {
        width: 100%;
        right: -20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .features__thumb-inner img.fea-2-shape {
        width: 100%;
        right: -20px;
    }
}

@media (max-width: 575px) {
    .features__thumb-inner img.fea-2-shape {
        width: 100%;
        right: 0px;
    }
}

@keyframes shake {
    10%,
    90% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes features-triangle-1 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes features-thumb-animation {
    0% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes features-thumb-sm-animation {
    0% {
        -webkit-transform: translateY(-20px) translateX(100px);
        -moz-transform: translateY(-20px) translateX(100px);
        -ms-transform: translateY(-20px) translateX(100px);
        transform: translateY(-20px) translateX(100px);
    }
    100% {
        -webkit-transform: translateY(0px) translateX(0px);
        -moz-transform: translateY(0px) translateX(0px);
        -ms-transform: translateY(0px) translateX(0px);
        transform: translateY(0px) translateX(0px);
    }
}

@keyframes features-thumb-sm-2-animation {
    0% {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }
}

@keyframes features-dot-1 {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes features-dot-2 {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(0px);
    }
}


/*----------------------------------------*/


/*  09. CTA CSS START
/*----------------------------------------*/

.cta__inner {
    background-image: var(--contact-section-bg);
    background-image: var(--contact-section-bg);
    background-image: var(--contact-section-bg);
    background-image: var(--contact-section-bg);
    -webkit-box-shadow: 0px 30px 70px 0px rgba(15, 0, 40, 0.2);
    -moz-box-shadow: 0px 30px 70px 0px rgba(15, 0, 40, 0.2);
    box-shadow: 0px 30px 70px 0px rgba(15, 0, 40, 0.2);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 95px 70px;
    padding-bottom: 105px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta__inner {
        padding: 45px 55px;
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .cta__inner {
        padding: 45px 55px;
        padding-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .cta__inner {
        padding: 35px 30px;
    }
}

.cta__inner-2 {
    padding: 117px 80px;
    padding-bottom: 127px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta__inner-2 {
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .cta__inner-2 {
        padding: 40px 30px;
    }
}

@media (max-width: 575px) {
    .cta__inner-2 {
        padding: 40px 30px;
    }
}

.cta__inner-3 {
    padding: 87px 60px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 40px 70px 0px rgba(10, 0, 48, 0.2);
    -moz-box-shadow: 0px 40px 70px 0px rgba(10, 0, 48, 0.2);
    box-shadow: 0px 40px 70px 0px rgba(10, 0, 48, 0.2);
}

@media (max-width: 575px) {
    .cta__inner-3 {
        padding: 45px 25px;
    }
}

.cta__title {
    color: #ffffff;
    font-size: 40px;
    font-weight: var(--font-weight-700);
    line-height: 1.2;
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta__title {
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .cta__title {
        margin-bottom: 20px;
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .cta__title {
        font-size: 28px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta__title {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .cta__title-2 {
        font-size: 24px;
    }
}

.cta__title-3 {
    font-size: 30px;
    margin-bottom: 10px;
}

.cta__shape img {
    position: absolute;
}

.cta__shape img.circle {
    right: 9%;
    bottom: -77%;
    opacity: 0.1;
}

.cta__shape img.circle-2 {
    left: -2%;
    bottom: 10%;
    opacity: 0.4;
}

.cta__shape img.circle-3 {
    top: -18%;
    left: 6%;
    opacity: 0.08;
}

.cta__shape img.triangle-1 {
    top: 9%;
    left: 10%;
    opacity: 0.1;
}

.cta__shape img.triangle-2 {
    top: -9%;
    right: 10%;
    opacity: 0.1;
}

.cta__shape-2 img {
    position: absolute;
    z-index: -1;
}

.cta__shape-2 img.cta-2-shape {
    left: -105px;
    bottom: -80px;
}

.cta__shape-2 img.cta-2-circle {
    left: 50px;
    top: 50px;
    opacity: 0.3;
}

.cta__shape-2 img.cta-2-circle-2 {
    right: 0;
    bottom: 31%;
    opacity: 0.04;
}

.cta__shape-2 img.cta-2-circle-3 {
    right: 0;
    bottom: 44%;
    opacity: 0.06;
}

.cta__shape-2 img.cta-2-dot {
    left: 3%;
    bottom: 12%;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .cta__content-3 {
        margin-bottom: 25px;
    }
}

@media (max-width: 575px) {
    .cta__content-3 {
        margin-bottom: 25px;
    }
}

.cta__content-3 p {
    color: #ffffff;
    opacity: 0.7;
    margin-bottom: 0;
}

.cta__form input {
    width: 370px;
    height: 60px;
    padding: 0 30px;
    border: none;
    outline: none;
    background: #ffffff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    margin-right: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .cta__form input {
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .cta__form input {
        margin-bottom: 20px;
        width: 100%;
    }
}

.cta__form input::placeholder {
    font-size: 15px;
    color: #8c8c97;
}

.cta__form input:focus {
    -webkit-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
    -moz-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
    box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
}

.cta__form button {
    height: 60px;
    line-height: 60px;
    padding: 0 53px;
    background: #1c213e;
    color: #ffffff;
    font-weight: var(--font-weight-600);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.cta__form button:hover {
    -webkit-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
    -moz-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
    box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
}

.cta__features ul li {
    display: inline-block;
    font-size: 15px;
    color: #ffffff;
    font-weight: var(--font-weight-600);
    position: relative;
    padding-left: 24px;
    margin-bottom: 15px;
}

.cta__features ul li:not(:last-child) {
    margin-right: 50px;
}

@media (max-width: 575px) {
    .cta__features ul li:not(:last-child) {
        margin-right: 15px;
    }
}

.cta__features ul li::after {
    position: absolute;
    content: "N";
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 15px;
    color: #ffffff;
    font-family: "ElegantIcons";
}

.cta__shape img.cta-4-shape {
    position: absolute;
    bottom: -77%;
    right: 0;
    z-index: -1;
}


/*----------------------------------------*/


/*  10. TEAM CSS START
/*----------------------------------------*/

.team__slider {
    position: relative;
}

.team__slider::after {
    position: absolute;
    content: "";
    top: 0;
    left: -34%;
    width: 380px;
    height: 460px;
    background: #f4f9fd;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .team__slider::after {
        left: -36%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team__slider::after {
        opacity: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team__slider::after {
        left: -57%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .team__slider::after {
        opacity: 0;
    }
}

@media (max-width: 575px) {
    .team__slider::after {
        opacity: 0;
    }
}

.team__slider .owl-stage-outer {
    overflow: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team__slider .owl-stage-outer {
        overflow: hidden;
    }
}

.team__slider .owl-dots {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    bottom: -60px;
    left: 0;
}

.team__slider .owl-dots .owl-dot {
    margin: 0 5px;
    width: 10px;
    height: 10px;
    background: #dbdbdb;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.team__slider .owl-dots .owl-dot.active {
    background: #2f80ed;
}

.team__item:hover .team__thumb::after {
    visibility: visible;
    opacity: 1;
}

.team__item:hover .team__social ul li>a {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

.team__thumb::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 25, 55, 0.5);
    visibility: hidden;
    opacity: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.team__thumb img {
    height: 350px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team__thumb img {
        height: auto;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .team__thumb img {
        height: auto;
    }
}

@media (max-width: 575px) {
    .team__thumb img {
        height: auto;
    }
}

.team__title {
    font-size: 22px;
    color: #021937;
    margin-bottom: 0;
}

.team__title a:hover {
    color: #2f80ed;
}

.team__position {
    font-size: 14px;
    font-weight: var(--font-weight-600);
    color: #57556a;
}

.team__social {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 1;
}

.team__social ul li {
    display: inline-block;
}

.team__social ul li:not(:last-child) {
    margin-right: 30px;
}

.team__social ul li a {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    -webkit-transform: translateX(-60px);
    -moz-transform: translateX(-60px);
    -ms-transform: translateX(-60px);
    transform: translateX(-60px);
    opacity: 0;
}

.team__social ul li a:hover {
    color: #2f80ed;
}

.team__shape img {
    position: absolute;
    z-index: 11;
}

.team__shape img.team-dot {
    right: 5%;
    top: 20%;
    -webkit-animation: team-dot 4s linear 0s infinite alternate;
    -moz-animation: team-dot 4s linear 0s infinite alternate;
    -o-animation: team-dot 4s linear 0s infinite alternate;
    animation: team-dot 4s linear 0s infinite alternate;
}

.team__shape img.team-triangle {
    bottom: 21%;
    left: 2%;
    -webkit-animation: team-triangle 5s linear infinite;
    -moz-animation: team-triangle 5s linear infinite;
    -o-animation: team-triangle 5s linear infinite;
    animation: team-triangle 5s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .team__shape img.team-triangle {
        left: 1%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team__shape img.team-triangle {
        bottom: 9%;
        left: 8%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team__shape img.team-triangle {
        bottom: 9%;
        left: 8%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .team__shape img.team-triangle {
        bottom: 9%;
        left: 8%;
    }
}

@media (max-width: 575px) {
    .team__shape img.team-triangle {
        bottom: 9%;
        left: 8%;
    }
}

.team__details-inner {
    -webkit-box-shadow: 0px 50px 80px 0px rgba(3, 0, 53, 0.1);
    -moz-box-shadow: 0px 50px 80px 0px rgba(3, 0, 53, 0.1);
    box-shadow: 0px 50px 80px 0px rgba(3, 0, 53, 0.1);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.team__details-shape {
    right: -11%;
    bottom: -16%;
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .team__details-shape {
        right: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team__details-shape {
        right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team__details-shape {
        right: -3%;
        bottom: -7%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .team__details-shape {
        right: -3%;
        bottom: -7%;
    }
}

@media (max-width: 575px) {
    .team__details-shape {
        right: -3%;
        bottom: -5%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team__details-img {
        margin-right: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team__details-img {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .team__details-img {
        margin-right: 0px;
    }
}

@media (max-width: 575px) {
    .team__details-img {
        margin-right: 0px;
    }
}

.team__details-img img {
    -webkit-border-radius: 30px 0 0 30px;
    -moz-border-radius: 30px 0 0 30px;
    border-radius: 30px 0 0 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team__details-content {
        padding-top: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team__details-content {
        padding: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .team__details-content {
        padding: 40px;
    }
}

@media (max-width: 575px) {
    .team__details-content {
        padding: 40px;
    }
}

.team__details-content>span {
    font-size: 20px;
    display: inline-block;
    margin-bottom: 7px;
}

.team__details-content h3 {
    font-size: 30px;
    margin-bottom: 15px;
}

.team__details-content p {
    margin-bottom: 35px;
    padding-right: 80px;
}

.team__details-contact ul li {
    margin-bottom: 8px;
    display: flex;
}

.team__details-contact ul li .icon i {
    line-height: 27px;
    color: #808080;
    margin-right: 15px;
}

.team__details-contact ul li .text span {
    font-weight: var(--font-weight-500);
}

.team__details-social ul li {
    display: inline-block;
    margin-right: 7px;
}

.team__details-social ul li a {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f7f7fc;
    font-size: 14px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.team__details-social ul li a:hover {
    background: #808080;
    color: #ffffff;
}

.team__details-info h4 {
    font-size: 40px;
    font-weight: var(--font-weight-700);
    margin-bottom: 25px;
}

.team__details-info p {
    margin-bottom: 25px;
}

@keyframes team-triangle {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes team-dot {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0px);
    }
}


/*----------------------------------------*/


/*  11. FAQ CSS START
/*----------------------------------------*/

.faq__wrapper {
    padding: 0 40px;
    border-top: 3px solid var(--accorddion-top-bdrcolor);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08), inset 0px 3px 0px 0px rgba(47, 128, 237, 0.004);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

@media (max-width: 575px) {
    .faq__wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.faq__wrapper .accordion-item {
    padding-top: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #eaedff;
}

.faq__wrapper .accordion-item.border-none {
    border-bottom: none;
    padding-bottom: 35px;
}

.faq__wrapper .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
    font-weight: var(--font-weight-600);
    color: var( --accorddion-heading-color)!important;
    border: none;
    padding: 0;
    background: none;
    text-align: left;
}

@media (max-width: 575px) {
    .faq__wrapper .accordion-item .accordion-header .accordion-button {
        padding-right: 15px;
    }
}

.faq__wrapper .accordion-item .accordion-header .accordion-button::after {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
    color: var( --accorddion-heading-color)!important;
    background-image: none;
    font-weight: var(--font-weight-500);
    content: "-";
}

/*.faq__wrapper #collapseOne:not(.show) {
    display: block;
    height: 4.5rem;
    overflow: hidden;
}*/

/*.faq__wrapper #collapseTwo:not(.show) {
    display: block;
    height: 4.5rem;
    overflow: hidden;
}

.faq__wrapper #collapseThree:not(.show) {
    display: block;
    height: 4.5rem;
    overflow: hidden;
}*/

.faq__wrapper .accordion-item .accordion-header .accordion-button:focus {
    box-shadow: none;
}

.faq__wrapper .accordion-item .accordion-header .accordion-button.collapsed::after {
    content: "";
}

.faq__wrapper .accordion-item .accordion-header .accordion-button:hover {
    color: var( --accorddion-heading-hover-color)!important;
}

.faq__wrapper .accordion-item .accordion-header .accordion-button:hover::after {
    color: #2f80ed;
}

.faq__wrapper .accordion-item .accordion-body {
    padding: 0;
    padding-top: 20px;
    overflow-wrap: break-word;
}.faq__wrapper .accordion-item .accordion-header .accordion-button.collapsed::after {
    content: "+";
}

.faq__wrapper .accordion-item .accordion-body p {
    font-family: var(--para-font-family);
    font-size: var(--para-font-size)!important;
    font-weight: var(--para-font-weight);
    color: var(--accorddion-para-color)!important;


    margin-bottom: 0;
}

.faq__wrapper .accordion-item .accordion-collapse {
    border: none;
}

.faq__counter ul li {
    display: inline-block;
}

@media (max-width: 575px) {
    .faq__counter ul li {
        display: block;
        margin-bottom: 30px;
    }
}

.faq__counter ul li:not(:last-child) {
    margin-right: 40px;
}

@media (max-width: 575px) {
    .faq__counter ul li:not(:last-child) {
        margin-right: 20px;
    }
}

.faq__counter ul li h3 {
    color: #222222;
    font-size: 40px;
    margin-bottom: 3px;
}

.faq__counter ul li h3 span {
    font-weight: var(--font-weight-700);
}

.faq__counter ul li h3.pink {
    color: #fe1a86;
}

.faq__counter ul li h3.blue {
    color: #0242fd;
}

.faq__counter ul li h3.yellow {
    color: #f5a706;
}

.faq__counter ul li p {
    font-weight: var(--font-weight-600);
    color: #474554;
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq__content {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .faq__content {
        margin-top: 60px;
    }
}

@media (max-width: 575px) {
    .faq__content {
        margin-top: 60px;
    }
}


/*----------------------------------------*/


/*  12. Blog CSS START
/*----------------------------------------*/

.blog__item:hover .blog__thumb a::after {
    opacity: 1;
}

.blog__item-3:hover .blog__thumb-3 img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.blog__item-5:hover .blog__thumb-5 img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.blog__more a:hover {
    -webkit-box-shadow: 0px 20px 30px 0px rgba(1, 24, 55, 0.16);
    -moz-box-shadow: 0px 20px 30px 0px rgba(1, 24, 55, 0.16);
    box-shadow: 0px 20px 30px 0px rgba(1, 24, 55, 0.16);
}

.blog__thumb {
    position: relative;
}

.blog__thumb a {
    position: relative;
    display: block;
}

.blog__thumb a::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 3, 55, 0.3);
    opacity: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.blog__thumb img {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.blog__thumb-3 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.blog__thumb-5 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.blog__thumb-5 img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.blog__meta span {
    text-transform: capitalize;
    font-weight: var(--font-weight-600);
    margin-right: 25px;
}

.blog__meta span.tag {
    color: #2f80ed;
}

.blog__meta span.tag:hover {
    color: #222222;
}

.blog__meta-3 span {
    font-size: 14px;
    color: #625e6e;
    font-weight: var(--font-weight-600);
}

.blog__meta-3 span.tag-3 {
    position: absolute;
    top: 40px;
    left: 40px;
}

.blog__meta-3 span.tag-3 a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    color: #ffffff;
    background: #5d41c2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0 15px;
}

.blog__meta-3 span.tag-3 a:hover {
    background: #ffffff;
    color: #5d41c2;
}

.blog__meta-5 {
    margin-bottom: 8px;
}

.blog__meta-5 span {
    font-size: 14px;
    font-weight: var(--font-weight-600);
}

.blog__meta-5 span:not(:last-child) {
    margin-right: 17px;
}

.blog__meta-5 span.date {
    color: #545b65;
}

.blog__meta-5 span.tag {
    color: #1c7df8;
}

.blog__content {
    padding-right: 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .blog__content {
        padding-right: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__content {
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__content {
        padding-right: 0px;
    }
}

.blog__content-3 {
    padding-top: 25px;
    padding-right: 140px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .blog__content-3 {
        padding-right: 95px;
    }
}

@media (max-width: 575px) {
    .blog__content-3 {
        padding-right: 0px;
    }
}

.blog__content-5 {
    padding-top: 20px;
    padding-right: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__content-5 {
        padding-right: 0;
    }
}

@media (max-width: 575px) {
    .blog__content-5 {
        padding-right: 0;
    }
}

.blog__content-5 .link-btn:hover {
    color: #1c7df8;
}

.blog__title {
    font-size: 22px;
    color: #222222;
    line-height: 1.3;
}

.blog__title a:hover {
    color: #2f80ed;
}

.blog__title-3 {
    font-size: 24px;
    font-weight: var(--font-weight-800);
    color: #0a0030;
    line-height: 1.3;
    margin-bottom: 15px;
}

@media (max-width: 575px) {
    .blog__title-3 {
        font-size: 22px;
    }
}

.blog__title-3 a:hover {
    color: #5d41c2;
}

.blog__title-5 {
    font-size: 18px;
    color: #011224;
    line-height: 1.5;
    margin-bottom: 25px;
}

.blog__title-5 a:hover {
    color: #1c7df8;
}

.blog__shape img {
    position: absolute;
}

.blog__shape img.blog-dot {
    left: 2%;
    top: 50%;
    -webkit-animation: blog-dot 4s linear 0s infinite alternate;
    -moz-animation: blog-dot 4s linear 0s infinite alternate;
    -o-animation: blog-dot 4s linear 0s infinite alternate;
    animation: blog-dot 4s linear 0s infinite alternate;
}

.blog__shape img.blog-triangle {
    left: 10%;
    bottom: 25%;
    -webkit-animation: blog-triangle 5s linear infinite;
    -moz-animation: blog-triangle 5s linear infinite;
    -o-animation: blog-triangle 5s linear infinite;
    animation: blog-triangle 5s linear infinite;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__sidebar {
        margin-top: 50px;
        padding-left: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .blog__sidebar {
        margin-top: 50px;
        padding-left: 0;
    }
}

@media (max-width: 575px) {
    .blog__sidebar {
        margin-top: 50px;
        padding-left: 0;
    }
}

.postbox__item {
    position: relative;
}

.postbox__thumb {
    position: relative;
}

.postbox__thumb img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.postbox__video::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 18, 36, 0.3);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.postbox__title {
    font-size: 26px;
    color: #222222;
    margin-bottom: 15px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .postbox__title {
        font-size: 22px;
    }
}

@media (max-width: 575px) {
    .postbox__title {
        font-size: 16px;
    }
}

.postbox__title a:hover {
    color: #1c7df8;
}

.postbox__content {
    padding-top: 17px;
}

.postbox__content p {
    color: #6a727f;
    margin-bottom: 25px;
}

.postbox__content .link-btn:hover {
    color: #1c7df8;
}

.postbox__meta span {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: #6a727f;
    display: inline-block;
}

.postbox__meta span:not(:last-child) {
    margin-right: 33px;
}

.postbox__meta span i {
    color: #1c7df8;
    padding-right: 2px;
}

.postbox__meta span a:hover {
    color: #1c7df8;
}

.postbox__date {
    position: absolute;
    top: 30px;
    right: 30px;
    background: #ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 8px 16px;
    z-index: 1;
}

.postbox__date h5 {
    font-size: 30px;
    margin-bottom: 0;
    line-height: 1;
    color: #1c7df8;
    font-weight: var(--font-weight-800);
}

.postbox__date span {
    font-size: 15px;
    color: #1c7df8;
    font-weight: var(--font-weight-700);
}

.postbox__play {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.postbox__quote {
    padding: 45px 50px;
    padding-bottom: 18px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
}

@media (max-width: 575px) {
    .postbox__quote {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.postbox__quote h3 {
    font-size: 18px;
    font-weight: var(--font-weight-700);
    margin-bottom: 37px;
    line-height: 1.5;
}

.postbox__quote span {
    font-weight: var(--font-weight-600);
    color: #6a727f;
    position: relative;
    padding-left: 50px;
}

.postbox__quote span::after {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #1c7df8;
    height: 2px;
    width: 40px;
}

.postbox__quote img.quote {
    position: absolute;
    top: 40px;
    left: 30px;
    opacity: 0.2;
}

@media (max-width: 575px) {
    .postbox__quote img.quote {
        top: 20px;
        left: 20px;
    }
}

.postbox__tag h3 {
    font-size: 22px;
    color: #011224;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
}

.postbox__tag a {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #f2f7ff;
    color: #6a727f;
    margin-right: 8px;
    font-weight: var(--font-weight-600);
    font-size: 14px;
}

.postbox__tag a:hover {
    background: #1c7df8;
    color: #ffffff;
}

.postbox__share h3 {
    font-size: 22px;
    color: #011224;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
}

.postbox__share ul li {
    display: inline-block;
    margin-left: 10px;
}

.postbox__share ul li a {
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #f2f7ff;
    color: #9499ae;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.postbox__share ul li a:hover {
    color: #ffffff;
    background: #1c7df8;
}

.postbox__img img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.postbox__author {
    padding: 40px 65px;
    padding-right: 85px;
    padding-bottom: 45px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .postbox__author {
        padding-right: 40px;
    }
}

@media (max-width: 575px) {
    .postbox__author {
        padding: 40px;
    }
}

@media (max-width: 575px) {
    .postbox__author-thumb {
        margin-bottom: 15px;
    }
}

.postbox__author-thumb img {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.postbox__author-content h4 {
    font-size: 16px;
    margin-bottom: 0;
    margin-bottom: 3px;
}

.postbox__author-content span {
    display: inline-block;
    font-size: 14px;
    color: #6a727f;
    font-weight: var(--font-weight-600);
    margin-bottom: 10px;
}

.postbox__author-content p {
    font-weight: var(--font-weight-600);
    margin-bottom: 0;
}

.postbox__form h3 {
    font-size: 22px;
    color: #011224;
    margin-bottom: 35px;
}

.postbox__form input,
.postbox__form textarea {
    width: 100%;
    height: 70px;
    line-height: 66px;
    padding: 0 15px;
    background: #f2f7ff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    outline: none;
    border: 2px solid #f2f7ff;
    margin-bottom: 30px;
}

.postbox__form input::placeholder,
.postbox__form textarea::placeholder {
    color: #6a727f;
}

.postbox__form input:focus,
.postbox__form textarea:focus {
    border-color: #1c7df8;
}

.postbox__form textarea {
    height: 150px;
    padding: 30px 15px;
    line-height: 1;
    resize: none;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .postbox__agree {
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .postbox__agree {
        margin-bottom: 20px;
    }
}

.postbox__agree input {
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    display: block;
    width: 14px !important;
    padding: 0;
    height: 14px;
    background: transparent;
    border: 1px solid #132339;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 0;
}

.postbox__agree input:checked {
    position: relative;
    background-color: #1c7df8;
    border-color: transparent;
}

.postbox__agree input:checked::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-size: 10px;
    color: #ffffff;
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.postbox__agree input:hover {
    cursor: pointer;
}

.postbox__agree label {
    padding-left: 8px;
    color: #6a727f;
    font-weight: var(--font-weight-600);
}

.postbox__agree label:hover {
    cursor: pointer;
}

.sidebar__widget-title {
    font-size: 22px;
    margin-bottom: 28px;
}

.sidebar__category ul li {
    margin-bottom: 15px;
}

.sidebar__category ul li a {
    color: #6a727f;
}

.sidebar__category ul li a span {
    color: #132339;
    font-weight: var(--font-weight-600);
    padding-left: 3px;
}

.sidebar__category ul li a:hover {
    color: #1c7df8;
}

.sidebar__search {
    position: relative;
}

.sidebar__search input {
    width: 100%;
    height: 60px;
    line-height: 56px;
    font-size: 14px;
    padding: 0 25px;
    background: #f2f7ff;
    border: 2px solid #f2f7ff;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.sidebar__search input::placeholder {
    color: #7a8189;
}

.sidebar__search input:focus {
    border-color: #1c7df8;
}

.sidebar__search button {
    font-size: 16px;
    color: #011224;
    position: absolute;
    top: 50%;
    right: 25px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sidebar__tags a {
    font-size: 13px;
    color: #6a727f;
    font-weight: var(--font-weight-600);
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    background: rgba(28, 125, 248, 0.08);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 10px;
}

.sidebar__tags a:hover {
    color: #ffffff;
    background: #1c7df8;
}

.rc__thumb img {
    height: 90px;
    width: 90px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.rc__title {
    font-size: 16px;
    font-weight: var(--font-weight-700);
    color: #132339;
    line-height: 1.5;
}

.rc__title a:hover {
    color: #1c7df8;
}

.rc__meta span {
    font-size: 14px;
    color: #6a727f;
    font-weight: var(--font-weight-600);
}

.rc__comment-icon i {
    font-size: 18px;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #1c7df8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: rgba(28, 125, 248, 0.08);
}

.rc__comment-content h5 {
    font-size: 16px;
    color: #132339;
}

.rc__comment-content p {
    color: #6a727f;
    font-weight: var(--font-weight-600);
    margin-bottom: 0;
}

.rc__comment-content p a:hover {
    color: #1c7df8;
}

.post-comment-title h3 {
    font-size: 22px;
    color: #011224;
}

.latest-comments li:first-child .comments-box {
    border-top: 0;
    padding-top: 0;
}

.latest-comments li.children {
    margin-left: 105px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .latest-comments li.children {
        margin-left: 60px;
    }
}

@media (max-width: 575px) {
    .latest-comments li.children {
        margin-left: 15px;
    }
}

.comments-avatar {
    float: left;
    margin-right: 20px;
}

.comments-avatar img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.comments-box {
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 30px;
    margin-bottom: 45px;
}

.comments-text {
    overflow: hidden;
}

.comments-text p {
    margin-bottom: 17px;
    color: #6a727f;
    font-weight: var(--font-weight-600);
}

.avatar-name {
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.avatar-name h5 {
    font-size: 16px;
    margin-bottom: 0px;
    color: #011224;
}

.avatar-name span {
    font-size: 14px;
    font-weight: var(--font-weight-500);
}

.comment-meta {
    font-size: 13px;
    color: #6a727f;
    font-weight: var(--font-weight-600);
}

.comment-reply {
    font-weight: var(--font-weight-600);
    font-size: 14px;
    color: #222222;
}

.comment-reply i {
    padding-right: 4px;
}

.comment-reply:hover {
    color: #1c7df8;
}

.blog-play-btn {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 84px;
    text-align: center;
    font-size: 30px;
    background: #ffffff;
    color: #1c7df8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.blog-play-btn i {
    text-shadow: 0px 4px 6px rgba(1, 19, 44, 0.24);
}

@keyframes blog-triangle {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes blog-dot {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0px);
    }
}


/*----------------------------------------*/


/*  13. Promotion CSS START
/*----------------------------------------*/

.promotion__bg {
    position: relative;
    z-index: 1;
}

.promotion__bg::after,
.promotion__bg::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: var( --promotion-left-bg-color);
    z-index: -1;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promotion__bg::after,
    .promotion__bg::before {
        top: 0;
        width: 100%;
        height: 50%;
    }
}

@media (max-width: 575px) {
    .promotion__bg::after,
    .promotion__bg::before {
        top: 0;
        width: 100%;
        height: 50%;
    }
}

.promotion__bg::before {
    right: 0;
    left: auto;
    background: var( --promotion-right-bg-color);
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promotion__bg::before {
        top: auto;
        bottom: 0;
    }
}

@media (max-width: 575px) {
    .promotion__bg::before {
        top: auto;
        bottom: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promotion__bg {
        padding: 0;
    }
}

@media (max-width: 575px) {
    .promotion__bg {
        padding: 20px 0;
    }
}

.promotion__title {
    font-size: 34px;
    color: var(--text-white);
    margin-bottom: 15px;
}

@media (max-width: 575px) {
    .promotion__title {
        font-size: 25px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promotion__content {
        padding: 50px 0;
    }
}

.promotion__content p {
    color: var(--text-white)!important;
    font-weight: var(--font-weight-600);
    margin-bottom: 35px;
}

@media (max-width: 575px) {
    .promotion__content.promotion__right {
        padding-left: 0;
        margin-top: 40px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .promotion__content-2 {
        padding-right: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .promotion__content-2 {
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .promotion__content-2 {
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .promotion__content-2 {
        padding-right: 0px;
    }
}

.promotion__content-2 p {
    font-size: 15px;
    color: #545b65;
    margin-bottom: 45px;
}

.promotion__content-2 p.promotion__sub {
    font-size: 17px;
    color: #011224;
    font-weight: var(--font-weight-700);
    margin-bottom: 23px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .promotion__content-4 {
        margin-top: 50px;
    }
}

@media (max-width: 575px) {
    .promotion__content-4 {
        padding-right: 30px;
        margin-top: 50px;
    }
}

.promotion__shape img {
    position: absolute;
}

.promotion__shape img.promotion-plus {
    left: 3%;
    top: 35%;
    -webkit-animation: about-plus 5s linear infinite;
    -moz-animation: about-plus 5s linear infinite;
    -o-animation: about-plus 5s linear infinite;
    animation: about-plus 5s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .promotion__shape img.promotion-plus {
        top: 18%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .promotion__shape img.promotion-plus {
        top: 18%;
    }
}

@media (max-width: 575px) {
    .promotion__shape img.promotion-plus {
        bottom: 5%;
        right: 5%;
        top: auto;
        left: auto;
    }
}

.promotion__shape img.promotion-dot {
    right: 16%;
    top: 37%;
    -webkit-animation: promotion-dot 4s linear 0s infinite alternate;
    -moz-animation: promotion-dot 4s linear 0s infinite alternate;
    -o-animation: promotion-dot 4s linear 0s infinite alternate;
    animation: promotion-dot 4s linear 0s infinite alternate;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promotion__shape img.promotion-dot {
        right: 60%;
    }
}

@media (max-width: 575px) {
    .promotion__shape img.promotion-dot {
        right: 60%;
    }
}

.promotion__shape img.promotion-triangle {
    right: 5%;
    top: 15%;
    -webkit-animation: promotion-triangle 5s linear infinite;
    -moz-animation: promotion-triangle 5s linear infinite;
    -o-animation: promotion-triangle 5s linear infinite;
    animation: promotion-triangle 5s linear infinite;
}

.promotion__thumb {
    position: relative;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promotion__thumb {
        margin-bottom: 50px;
    }
}

@media (max-width: 575px) {
    .promotion__thumb {
        margin-bottom: 50px;
    }
}

.promotion__thumb img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.promotion__thumb::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 18, 36, 0.6);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.promotion__thumb-4 {
    z-index: 1;
}

.promotion__thumb-4 img.promotion-4-big {
    margin-left: -30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    -moz-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .promotion__thumb-4 img.promotion-4-big {
        margin-left: -60px;
    }
}

@media (max-width: 575px) {
    .promotion__thumb-4 img.promotion-4-big {
        margin-left: 0px;
        width: 100%;
    }
}

.promotion__thumb-4 img.promotion-4-sm {
    margin-left: 280px;
    margin-top: -240px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    -moz-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
    -webkit-animation: promotion-4-sm 2s linear infinite alternate;
    -moz-animation: promotion-4-sm 2s linear infinite alternate;
    -o-animation: promotion-4-sm 2s linear infinite alternate;
    animation: promotion-4-sm 2s linear infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .promotion__thumb-4 img.promotion-4-sm {
        margin-left: 105px;
        margin-bottom: -180px;
    }
}

@media (max-width: 575px) {
    .promotion__thumb-4 img.promotion-4-sm {
        margin-left: 50px;
        width: 80%;
        margin-top: -100px;
    }
}

.promotion__thumb-4 img.promotion-4-circle {
    position: absolute;
    top: -113px;
    right: -20px;
    opacity: 0.3;
    z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .promotion__thumb-4 img.promotion-4-circle {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .promotion__thumb-4 img.promotion-4-circle {
        width: 100%;
        right: 0;
    }
}

.promotion__play {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.promotion__play img {
    width: 17px;
    height: 20px;
}

@keyframes promotion-plus {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes promotion-triangle {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes promotion-dot {
    0% {
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes promotion-4-sm {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
    }
}


/*----------------------------------------*/


/*  14. PLATFORM CSS START
/*----------------------------------------*/

.platform__item {
    padding: 32px 60px;
    padding-bottom: 50px;
    -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .platform__item {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .platform__item {
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media (max-width: 575px) {
    .platform__item {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.platform__item p {
    margin-bottom: 33px;
}

.platform__title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #0a0030;
}

.platform__name a {
    height: 50px;
    text-align: center;
    padding: 0 15px;
    border: 2px solid #5d41c2;
    background: #5d41c2;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    padding-top: 4px;
}

.platform__name a.app-store:hover {
    background: #0a0030;
    border-color: #0a0030;
}

.platform__name a.apple-store {
    background: #0a0030;
    border-color: #0a0030;
}

.platform__name a.apple-store:hover {
    background: #5d41c2;
    border-color: #5d41c2;
}

.platform__name a.windows {
    border-color: rgba(0, 0, 0, 0.2);
    background: transparent;
}

.platform__name a.windows:hover {
    background: #0a0030;
    border-color: #0a0030;
}

.platform__name a.windows:hover i {
    color: #ffffff;
}

.platform__name a.windows:hover h5 {
    color: #ffffff;
}

.platform__name a.windows:hover span {
    color: #ffffff;
}

.platform__name a.windows i {
    color: #0a0030;
}

.platform__name a.windows h5 {
    color: #0a0030;
}

.platform__name a.windows span {
    color: #0a0030;
}

.platform__name-icon {
    margin-right: 15px;
}

.platform__name-icon i {
    font-size: 24px;
    color: #ffffff;
}

.platform__name-content h5 {
    font-size: 12px;
    font-weight: var(--font-weight-600);
    color: #ffffff;
    margin-bottom: 0;
}

.platform__name-content span {
    font-size: 16px;
    font-weight: var(--font-weight-700);
    color: #ffffff;
}


/*----------------------------------------*/


/*  15. WHY CSS START
/*----------------------------------------*/

.why__item {
    padding: 47px 25px;
    padding-bottom: 49px;
    -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.why__icon i {
    font-size: 30px;
    color: #5d41c2;
}

.why__content p {
    font-size: 12px;
    color: #625e6e;
    font-weight: var(--font-weight-600);
    margin-bottom: 0;
}

.why__title {
    font-size: 36px;
    color: #0a0030;
    margin-bottom: 2px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .why__title {
        font-size: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .why__title {
        font-size: 25px;
    }
}

.why__features {
    margin-top: 85px;
    padding: 42px 40px;
    padding-bottom: 53px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
    box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .why__features {
        margin-top: 87px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .why__features {
        margin-top: 80px;
        padding-left: 25px;
        padding-right: 25px;
    }
}

.why__features ul {
    margin-bottom: 45px;
}

.why__features ul li {
    font-size: 18px;
    color: #0a0030;
    padding-left: 28px;
    position: relative;
}

.why__features ul li:not(:last-child) {
    margin-bottom: 25px;
}

.why__features ul li::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 15px;
    color: #0a0030;
    left: 0;
    top: 1px;
    font-weight: var(--font-weight-400);
}


/*----------------------------------------*/


/*  16. Promotion CSS START
/*----------------------------------------*/

.portfolio__item:hover .portfolio__thumb::after {
    visibility: visible;
    opacity: 1;
}

.portfolio__item:hover .portfolio__content {
    bottom: 30px;
    visibility: visible;
    opacity: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio__item:hover .portfolio__content {
        bottom: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__item:hover .portfolio__content {
        bottom: 20px;
    }
}

@media (max-width: 575px) {
    .portfolio__item:hover .portfolio__content {
        bottom: 15px;
    }
}

.portfolio__title {
    font-size: 18px;
    font-weight: var(--font-weight-700);
    color: #011224;
    margin-bottom: 0;
}

.portfolio__title a:hover {
    color: #1c7df8;
}

.portfolio__thumb {
    position: relative;
}

.portfolio__thumb img {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.portfolio__thumb::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(56, 81, 108, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
}

.portfolio__content {
    position: absolute;
    bottom: 0px;
    left: 30px;
    background: #ffffff;
    padding: 23px 40px;
    padding-bottom: 26px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity: 0;
    visibility: hidden;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio__content {
        left: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__content {
        left: 20px;
    }
}

@media (max-width: 575px) {
    .portfolio__content {
        left: 15px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.portfolio__content span {
    display: inline-block;
    font-size: 15px;
    color: #011224;
    font-weight: var(--font-weight-600);
    margin-bottom: 2px;
}

.portfolio__menu .masonary-menu {
    padding-bottom: 2px;
    border-bottom: 2px solid #f3f3f3;
}

.portfolio__menu button {
    color: #011224;
    font-size: 14px;
    background: transparent;
    outline: none;
    font-weight: var(--font-weight-600);
    position: relative;
}

.portfolio__menu button:not(:last-child) {
    margin-right: 35px;
}

@media (max-width: 575px) {
    .portfolio__menu button:not(:last-child) {
        margin-right: 13px;
    }
}

.portfolio__menu button::after {
    position: absolute;
    content: "";
    bottom: -4px;
    left: auto;
    right: 0;
    width: 0%;
    height: 2px;
    background: #1c7df8;
}

.portfolio__menu button:hover,
.portfolio__menu button.active {
    color: #1c7df8;
}

.portfolio__menu button:hover::after,
.portfolio__menu button.active::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 575px) {
    .portfolio__description {
        margin-left: 0;
        margin-right: 0;
    }
}

.portfolio__description h3 {
    font-size: 24px;
    color: #011224;
    margin-bottom: 25px;
}

.portfolio__description p {
    color: #57556a;
}

@media (max-width: 575px) {
    .portfolio__category {
        margin-top: 50px;
    }
}

.portfolio__category h3 {
    font-size: 20px;
    color: #011224;
    margin-bottom: 25px;
}

.portfolio__category ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
}

.portfolio__category ul li::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #011224;
}

.portfolio__category ul li::after a {
    color: #57556a;
    font-weight: var(--font-weight-600);
}

.portfolio__details-thumb img {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.portfolio__more-btn {
    padding: 43px 0;
    border-top: 1px solid #e5e7e9;
    border-bottom: 1px solid #e5e7e9;
}

.portfolio__more-btn a {
    font-size: 20px;
    color: #57556a;
    font-weight: var(--font-weight-600);
}

.portfolio__more-btn a.prev i {
    padding-right: 10px;
}

.portfolio__more-btn a.next i {
    padding-left: 10px;
}

.portfolio__details-content h1 {
    font-size: 50px;
    margin-bottom: 30px;
}

@media (max-width: 575px) {
    .portfolio__details-content h1 {
        font-size: 40px;
    }
}

.portfolio__meta h4 {
    display: inline-block;
    font-weight: var(--font-weight-700);
    font-size: 16px;
}

.portfolio__info h3 {
    font-weight: var(--font-weight-700);
    font-size: 16px;
    margin-bottom: 7px;
}

.portfolio__overview h2 {
    font-size: 20px;
}


/*----------------------------------------*/


/*  17. SUBSCRIBE CSS START
/*----------------------------------------*/

.subscribe__content p {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: #545b65;
    margin-bottom: 0;
}

.subscribe__title {
    font-size: 40px;
    color: #011224;
    font-weight: var(--font-weight-800);
    margin-bottom: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .subscribe__form {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .subscribe__form {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .subscribe__form {
        margin-top: 50px;
    }
}

@media (max-width: 575px) {
    .subscribe__form {
        margin-top: 50px;
    }
}

.subscribe__form input {
    width: 270px;
    height: 60px;
    line-height: 56px;
    background: #ffffff;
    padding: 0 30px;
    margin-right: 30px;
    border: 2px solid #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .subscribe__form input {
        width: 240px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .subscribe__form input {
        width: 250px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .subscribe__form input {
        width: 100%;
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .subscribe__form input {
        width: 100%;
        margin-bottom: 30px;
    }
}

.subscribe__form input::placeholder {
    font-size: 14px;
    color: #86847d;
}

.subscribe__form input:focus {
    border-color: #1c7df8;
    outline: none;
}

.subscribe__form button {
    height: 60px;
    padding: 0 40px;
}

.subscribe__form button:hover::after {
    -webkit-transform: skewX(40deg) scale(1, 1);
    -moz-transform: skewX(40deg) scale(1, 1);
    -ms-transform: skewX(40deg) scale(1, 1);
    transform: skewX(40deg) scale(1, 1);
}


/*----------------------------------------*/


/*  18. SUPPORT CSS START
/*----------------------------------------*/

.support__item {
    -webkit-box-shadow: 0px 3px 1px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 3px 1px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 3px 1px 0px rgba(11, 6, 70, 0.08);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 35px 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .support__item {
        padding-left: 45px;
        padding-right: 45px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .support__item {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .support__item {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.support__item:hover {
    -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}

.support__title {
    font-size: 15px;
    color: #57556a;
    font-weight: var(--font-weight-600);
    margin-bottom: 0;
}

.support__title a:hover {
    color: #6c63ff;
}

.support__icon {
    min-height: 70px;
}


/*----------------------------------------*/


/*  19. PAGE TITLE CSS START
/*----------------------------------------*/

.page__title-height {
    min-height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
}

.page__title-wrapper {
    margin-bottom: 6px;
}

.page__title-wrapper h3 {
    font-size: 60px;
    color: var(--breadercum-heading);
    margin-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .page__title-wrapper h3 {
        font-size: 45px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .page__title-wrapper h3 {
        font-size: 35px;
    }
}

@media (max-width: 575px) {
    .page__title-wrapper h3 {
        font-size: 35px;
    }
}

.page__title-wrapper-2 h3 {
    font-size: 40px;
}

@media (max-width: 575px) {
    .page__title-wrapper-2 h3 {
        font-size: 30px;
    }
}

.page__title-wrapper .breadcrumb {
    margin-bottom: 0;
}

.page__title-wrapper .breadcrumb .breadcrumb-item.active {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: var(--breadercum-link);
}

.page__title-wrapper .breadcrumb .breadcrumb-item.active::before {
    content: ".";
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    color: var(--breadercum-link);
    line-height: 12px;
    padding-right: 14px;
}

.page__title-wrapper .breadcrumb .breadcrumb-item a {
    font-size: 15px;
    font-weight: var(--font-weight-600);
    color: var(--breadercum-link);
}

.page__title-wrapper .breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 14px;
}

.page__title-shape img {
    position: absolute;
    z-index: -1;
}

.page__title-shape img.page-title-dot {
    left: 32%;
    bottom: 10%;
}

.page__title-shape img.page-title-dot-2 {
    right: 19%;
    top: 20%;
}

.page__title-shape img.page-title-dot-3 {
    right: 9%;
    top: 6%;
}

.page__title-shape img.page-title-dot-4 {
    left: 0;
    top: 21%;
}

.page__title-shape img.page-title-plus {
    right: 0;
    bottom: -17%;
}

.page__title-shape img.page-title-triangle {
    left: 19%;
    top: 32%;
    -webkit-animation: page-triangle 5s linear infinite;
    -moz-animation: page-triangle 5s linear infinite;
    -o-animation: page-triangle 5s linear infinite;
    animation: page-triangle 5s linear infinite;
}

@keyframes page-triangle {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*----------------------------------------*/


/*  20. CONTACT CSS START
/*----------------------------------------*/
.contact__form input, .contact__form select, .contact__form textarea {
    /* width: 100%; */
    height: 44px;
    line-height: 46px;
    padding: 0 15px;
    background: #f2f7ff !important;
    border: 2px solid #f2f7ff;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
}
.contact__wrapper {
    padding: 70px 100px;
    padding-bottom: 70px !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(57, 32, 147, 0.1);
    -moz-box-shadow: 0px 30px 70px 0px rgba(57, 32, 147, 0.1);
    box-shadow: 0px 30px 70px 0px rgba(57, 32, 147, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contact__wrapper {
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__wrapper {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .contact__wrapper {
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media (max-width: 575px) {
    .contact__wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contact__info {
        padding-right: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__info {
        padding-right: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .contact__info {
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .contact__info {
        padding-right: 0px;
    }
}

.contact__title {
    font-size: 40px;
    font-weight: var(--font-weight-800);
    color: var(--small-heading);
    margin-bottom: 37px;
}

.contact__title-2 {
    font-size: 22px;
    color: var(--contactbox-heading);
    margin-bottom: 10px;
}

.contact__title-2 a:hover {
    color: #1c7df8;
}

.contact__details ul li {
    margin-bottom: 40px;
}

.contact__details ul li h4 {
    font-size: 17px;
    color: #011224;
}

.contact__details ul li p {
    font-weight: var(--font-weight-600);
    color: #7a8189;
    margin-bottom: 0;
}

.contact__details ul li p a:hover {
    color: #1c7df8;
}

.contact__form .form-group {
    width: 100%;
    float: left;
    height: 90px;
}

.contact__form .form-group-txtarea {
    width: 100%;
    float: left;
    height: 170px;
}

.contact__form input,
.contact__form select,
.contact__form textarea {
    width: 100%;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    background: #f2f7ff;
    border: 2px solid #f2f7ff;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
}

.contact__form input::placeholder,
.contact__form textarea::placeholder {
    color: #7a8189;
    font-size: 14px;
}

.contact__form input:focus,
.contact__form textarea:focus {
    border-color: #222222;
}

.contact__form textarea {
    height: 55px;
    padding: 15px;
    resize: none;
    line-height: 1.2;
}

.contact__item {
    padding: 50px 70px;
    -webkit-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -moz-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contact__item {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__item {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 575px) {
    .contact__item {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.contact__item:hover .contact__icon img {
    -webkit-transform: translate3d(0, -10px, 0);
    -moz-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    -o-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
}

.contact__item-inner {
    position: relative;
    z-index: 1;
}

.contact__item-inner::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 10px;
    border-radius: 20px;
    background: var(--contactbox-top-bdrcolor);
    height: 50%;
    z-index: -1;
}

.contact__item-inner:hover::before {
    top: -3px;
}

.contact__icon {
    min-height: 46px;
    margin-bottom: 18px;
}

.contact__icon img {
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
}

.contact__content p {
    font-weight: var(--font-weight-600);
}

.contact__content .link-btn:hover {
    color: #1c7df8;
}

.contact__shape img {
    position: absolute;
    top: -56%;
    left: 10%;
    opacity: 0.4;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__shape img {
        left: 0%;
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .contact__shape img {
        top: -10%;
        left: 0%;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .contact__shape img {
        top: -10%;
        left: 0%;
        width: 100%;
    }
}

.contact__map {
    height: 500px;
}

.contact__map iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/*----------------------------------------*/


/*  21. ERROR CSS START
/*----------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .error__thumb img {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .error__thumb img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .error__thumb img {
        width: 100%;
    }
}

.error__content {
    padding: 0 65px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .error__content {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .error__content {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (max-width: 575px) {
    .error__content {
        padding: 0;
    }
}

.error__content h3 {
    font-size: 36px;
    color: #011224;
    margin-bottom: 10px;
}

.error__content p {
    color: #57556a;
    font-weight: var(--font-weight-600);
    margin-bottom: 40px;
}

.error {
  color: #ff3d3d !important;
  width:100%;
  float:left;
  margin-top:0px;
  font-size:12px!important;
  margin-bottom: 5px !important;
  line-height: 12px;
  padding-left: 0;
}
label>.error{font-size: 12px !important;}
/*----------------------------------------*/


/*  22. SIGN CSS START
/*----------------------------------------*/

.sign__wrapper {
    padding: 50px 45px;
    padding-bottom: 45px;
    margin: 0 30px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
    -moz-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
    box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
    z-index: 11;
}

@media (max-width: 575px) {
    .sign__wrapper {
        margin: 0;
        padding: 30px 20px;
        padding-bottom: 25px;
    }
}

.sign__shape img {
    position: absolute;
    z-index: -1;
}

.sign__shape img.man-1 {
    left: 28%;
    top: 60%;
    z-index: 1;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.man-1 {
        left: 19%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.man-1 {
        left: 16%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.man-1 {
        left: 7%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.man-1 {
        left: 2%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.man-1 {
        left: 1%;
    }
}

@media (max-width: 575px) {
    .sign__shape img.man-1 {
        display: none;
    }
}

.sign__shape img.man-2 {
    right: 24%;
    top: 65%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.man-2 {
        top: 55%;
        right: 20%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.man-2 {
        top: 60%;
        right: 15%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.man-2 {
        top: 60%;
        right: 7%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.man-2 {
        top: 60%;
        right: 0%;
        z-index: 1;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.man-2 {
        top: 60%;
        right: 0%;
        z-index: 1;
    }
}

@media (max-width: 575px) {
    .sign__shape img.man-2 {
        display: none;
    }
}

.sign__shape img.man-2.man-22 {
    top: 50%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.man-2.man-22 {
        top: 55%;
        right: 20%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.man-2.man-22 {
        top: 60%;
        right: 15%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.man-2.man-22 {
        top: 60%;
        right: 7%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.man-2.man-22 {
        top: 60%;
        right: 0%;
        z-index: 1;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.man-2.man-22 {
        top: 60%;
        right: 0%;
        z-index: 1;
    }
}

.sign__shape img.circle {
    right: 32%;
    top: 38%;
    animation: signCircle 5s linear 0s infinite alternate;
    -webkit-animation: signCircle 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.circle {
        right: 25%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.circle {
        right: 22%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.circle {
        right: 11%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.circle {
        right: 4%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.circle {
        right: 2%;
    }
}

@media (max-width: 575px) {
    .sign__shape img.circle {
        display: none;
    }
}

.sign__shape img.dot {
    right: 34%;
    top: 43%;
    animation: signDot 5s linear 0s infinite alternate;
    -webkit-animation: signDot 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.dot {
        right: 29%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.dot {
        right: 26%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.dot {
        right: 18%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.dot {
        right: 5%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.dot {
        right: 3%;
    }
}

@media (max-width: 575px) {
    .sign__shape img.dot {
        display: none;
    }
}

.sign__shape img.bg {
    left: 33%;
    top: 26%;
    opacity: 0.06;
    max-width: 100%;
    animation: signBg 5s linear 0s infinite alternate;
    -webkit-animation: signBg 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.bg {
        left: 10%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.bg {
        left: 0%;
    }
}

@media (max-width: 575px) {
    .sign__shape img.bg {
        display: none;
    }
}

.sign__shape img.zigzag {
    left: 32%;
    top: 43%;
    animation: signZigzag 5s linear 0s infinite alternate;
    -webkit-animation: signZigzag 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.zigzag {
        left: 24%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.zigzag {
        left: 23%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.zigzag {
        left: 11%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.zigzag {
        left: 3%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.zigzag {
        left: 2%;
    }
}

@media (max-width: 575px) {
    .sign__shape img.zigzag {
        display: none;
    }
}

.sign__shape img.flower {
    bottom: 13%;
    right: 30%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .sign__shape img.flower {
        right: 24%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sign__shape img.flower {
        right: 24%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sign__shape img.flower {
        right: 12%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sign__shape img.flower {
        right: 3%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__shape img.flower {
        right: 1%;
    }
}

@media (max-width: 575px) {
    .sign__shape img.flower {
        right: 1%;
        bottom: 3%;
    }
}

.sign__header {
    padding: 0 35px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .sign__header {
        padding: 0 10px;
    }
}

@media (max-width: 575px) {
    .sign__header {
        padding: 0px;
    }
}

.sign__header p {
    margin-bottom: 0;
    color: #7a797f;
    position: relative;
    padding: 0 40px;
    display: inline-block;
}

.sign__header p span {
    position: absolute;
    top: 40%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sign__header p span:last-child {
    left: auto;
    right: 0;
}

.sign__header p a:hover {
    color: #1c7df8;
}

.sign__social {
    display: block;
    height: 50px;
    background: #eeedf2;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    line-height: 48px;
    padding-left: 23px;
    z-index: 1;
    overflow: hidden;
    font-size: 16px;
}

.sign__social::after {
    position: absolute;
    content: "";
    left: -55%;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 220px;
    width: 220px;
    background: #3360bd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;
}

@media (max-width: 575px) {
    .sign__social::after {
        left: -62%;
    }
}

.sign__social i {
    color: #ffffff;
    font-size: 16px;
    margin-right: 50px;
}

@media (max-width: 575px) {
    .sign__social i {
        margin-right: 35px;
    }
}

.sign__social:hover {
    color: #ffffff;
}

.sign__social:hover::after {
    width: 100%;
    height: 150%;
    left: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.sign__social.g-plus::after {
    background: #e93e30;
}

.sign__form h5 {
    font-size: 16px;
    font-weight: var(--font-weight-500);
    color: var(--input-label-color);
    margin-bottom: 11px;
}

.sign__wrapper .form-group {
    width: 100%;
    float: left;
    height: 110px;
}

.forgotpasword {
    color: var(--forgot-pswrd-text);
}

.sign__input {
    position: relative;
}

.sign__input input {
    width: 100%;
    height: 46px;
    line-height: 40px;
    padding: 0 10px 0px 35px;
    font-size: 14px;
    border: 2px solid var(--input-bdr);
    background: var(--input-bg);
    color: var(--input-text);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.sign__input textarea {
    width: 100%;
    height: 70px;
    line-height: 24px;
    padding: 0 10px 0px 10px;
    font-size: 14px;
    border: 2px solid var(--input-bdr);
    background: var(--input-bg);
    color: var(--input-text);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.sign__input input::placeholder {
    color: #8e8c94;
}

.sign__input input:focus {
    outline: none;
    background: var(--input-bg-focus);
    border-color: var(--input-text-bdrfocus);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
    -moz-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
}

.sign__input i {
    position: absolute;
    top: 51%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 15px;
    font-size: 14px;
    color: var( --input-iconcolor);
}

.sign__agree input {
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    display: block;
    width: 14px;
    height: 14px;
    background: transparent;
    border: 1px solid #7a797f;
    outline: none;
    margin-top: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.sign__agree input:checked {
    position: relative;
    background-color: #1c7df8;
    border-color: transparent;
}

.sign__agree input:checked::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-size: 10px;
    color: #ffffff;
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.sign__agree input:hover {
    cursor: pointer;
}

.sign__agree label {
    padding-left: 10px;
    font-size: 14px;
}

.sign__agree label:hover {
    cursor: pointer;
}

.sign__agree label a {
    color: #021937;
    font-weight: var(--font-weight-500);
}

.sign__agree label a:hover {
    color: #1c7df8;
}

.sign__forgot a {
    color: #7a797f;
}

.sign__forgot a:hover {
    color: #1c7df8;
}

.sign__new p {
    color: #7a797f;
    margin-bottom: 0;
}

.sign__new p a {
    color: var(--signin-a-textcolor);
    font-weight: var(--font-weight-700);
}

@keyframes signDot {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    100% {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
    }
}

@keyframes signZigzag {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    100% {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
    }
}

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


/*----------------------------------------*/


/*  23. FOOTER CSS START
/*----------------------------------------*/

.footer__area {
    background: var(--footer-bg-color);
}

.footer__widget-title h3 {
    font-size: 18px;
    margin-bottom: 0;
    padding-top: 10px;
    color: var(--small-heading);
}

.footer__widget-title-3 h3 {
    color: #ffffff;
}

.footer__widget-content p {
    color: #57556a;
    font-weight: var(--font-weight-600);
    padding-right: 70px;
}

.footer__widget-content-3 p {
    color: #9da4ac;
}

.footer__link {
    padding-top: 8px;
}

.footer__link ul li:not(:last-child) {
    margin-bottom: 15px;
}

.footer__link ul li a {
    color: var(--footer-link-color);
    font-weight: var(--font-weight-600);
    position: relative;
}

.footer__link ul li a::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    color: var(--footer-link-color);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.footer__link ul li a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}

.footer__link ul li a:hover::after {
    bottom: -2px;
    visibility: visible;
    opacity: 1;
}

.footer__link-2 ul li a::after {
    background: var(--footer-link-hover-color);
}

.footer__link-2 ul li a:hover {
    color: var(--footer-link-hover-color);
}

.footer__link-3 ul li a {
    color: var(--footer-link-hover-color);
}

.footer__link-3 ul li a::after {
    background: #ffffff;
}

.footer__link-3 ul li a:hover {
    color: #ffffff;
}

.footer__link-4 ul li a {
    color: #9da4ac;
}

.footer__link-4 ul li a::after {
    background: #6c63ff;
}

.footer__link-4 ul li a:hover {
    color: #6c63ff;
}

.footer__social {
    padding-top: 14px;
}

.footer__social ul li {
    display: inline-block;
}

.footer__social ul li:not(:last-child) {
    margin-right: 10px;
}

.footer__social ul li a {
    color: #868d94;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border: 1px solid #c7ced4;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.footer__social ul li a:hover {
    background: #808080;
    color: #ffffff;
    border-color: #808080;
    -webkit-box-shadow: 0px 20px 30px 0px rgba(7, 3, 55, 0.16);
    -moz-box-shadow: 0px 20px 30px 0px rgba(7, 3, 55, 0.16);
    box-shadow: 0px 20px 30px 0px rgba(7, 3, 55, 0.16);
}

.footer__social-2 ul li a:hover {
    background: #2f80ed;
    border-color: #2f80ed;
}

.footer__social-3 ul li a {
    color: #868d94;
    border-color: #868d94;
}

.footer__social-3 ul li a:hover {
    color: #5d41c2;
    background: #ffffff;
    border-color: #ffffff;
}

.footer__social-4 ul li a {
    color: #868d94;
    border-color: #868d94;
}

.footer__social-4 ul li a:hover {
    color: #6c63ff;
    background: #ffffff;
    border-color: #ffffff;
}

.footer__social-5 ul li a {
    color: #868d94;
    border-color: #868d94;
}

.footer__social-5 ul li a:hover {
    color: #1c7df8;
    background: #ffffff;
    border-color: #ffffff;
}

.footer__copyright {
    border-top: 1px solid #e7ecf1;
    padding: 25px 0;
}

.footer__copyright-2 {
    border-color: rgba(255, 255, 255, 0.1);
}

.footer__copyright-3 {
    border: none;
    padding: 35px 0;
}

.footer__copyright-wrapper p {
    font-size: 14px;
    font-weight: var(--font-weight-600);
    color: #474554;
    margin-bottom: 0;
}

.footer__copyright-wrapper p a {
    color: #808080;
}

.footer__copyright-wrapper-2 p a {
    color: #2f80ed;
}

.footer__copyright-wrapper-3 p {
    color: #888792;
}

.footer__copyright-wrapper-3 p a {
    color: #ffffff;
}

.footer__copyright-wrapper-4 p a {
    color: #1c7df8;
}

.footer__shape img {
    position: absolute;
    opacity: 0.04;
}

.footer__shape img.footer-circle-1 {
    top: 7%;
    right: 0;
}

.footer__shape img.footer-circle-2 {
    top: 12%;
    right: 0;
}

.footer__shape img.footer-2-circle-1 {
    top: -19%;
    right: 0;
}

.footer__shape img.footer-2-circle-2 {
    top: -7%;
    right: 0;
}

.footer__pl-70 {
    padding-left: 70px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .footer__pl-70 {
        padding-left: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer__pl-70 {
        padding-left: 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .footer__pl-70 {
        padding-left: 0px;
    }
}

@media (max-width: 575px) {
    .footer__pl-70 {
        padding-left: 0px;
    }
}

/* .footer__pl-90 {
    padding-left: 90px;
} */

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .footer__pl-90 {
        padding-left: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer__pl-90 {
        padding-left: 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .footer__pl-90 {
        padding-left: 0px;
    }
}

@media (max-width: 575px) {
    .footer__pl-90 {
        padding-left: 0px;
    }
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}


/*# sourceMappingURL=style.css.map */

.coupon {
    border: 1px solid #005ad3 !important;
}

.filter {
    margin-top: 15px !important;
    transition: 0.5s ease;
}

.filter:hover {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 10px 0 0 #808080;
    transition: 1s ease;
}

.filter.active {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 10px 0 0 #808080;
    transition: 1s ease;
}

.filter img {
    width: 100%;
    height: 80px;
    object-fit: contain;
}

@media (max-width:574px) {
    .filter img {
        width: 100%;
        height: 80px;
        object-fit: contain;
    }
}

.filter h5 {
    color:var(--text-light-dark)!important;
    font-family: var(--small-font-family);
    font-size: var(--small-font-size)!important;
    font-weight: var(--small-font-weight);
}

.features__icon img {
    width: 60px;
    height: 60px;
}

.hero__thumb-shape.shape-2 img {
    width: 35% !important;
}

.hero__thumb-shape.shape-4 img {
    width: 35% !important;
}

.hero__thumb-shape.shape-3 img {
    width: 35% !important;
}

.accordion-body ul {
    padding-left: 20px;
}

.accordion-body ul li {
    list-style-type: disc !important;
    color: var(--accorddion-text-color) !important;
}


/*Added by Ajay*/

.list-menu {
    width: 250px;
    float: right;
    margin: 100px 0px 100px 0px;
}

.list-menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

.list-menu ul li {
    width: 100%;
    float: left;
    height: 70px;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    font-weight: var(--font-weight-400);
    position: relative;
}

.list-menu ul li a {
    width: 100%;
    height: 70px;
    padding-left: 20px;
    line-height: 70px;
    float: left;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    font-weight: var(--font-weight-400);
    text-transform: uppercase;
    color: var(--leftpanel-text-color);
    position: relative;
    border-bottom: 1px solid var(--leftpanel-tabborder-color);
}

.list-menu ul li a.active-list {
    width: 100%;
    height: 70px;
    padding-left: 30px;
    line-height: 70px;
    float: left;
    background-color: var(--leftpanel-active-tab);
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    font-weight: var(--font-weight-400);
    text-transform: uppercase;
    color: var( --leftpanel-text-active-color);
    border-radius: 60px 0 0 60px;
    position: relative;
    border-bottom: 0px solid #e1e1e1!important;
}

.list-menu ul li a .line {
    width: 4px;
    height: 35px;
    background: var(--leftpanel-tabline-color);
    position: absolute;
    top: 18px;
    left: 15px;
}

.list-menu ul li a.active-list:before {
    top: -80px;
    right: -1px;
    height: 80px;
    width: 40px;
    border-bottom-right-radius: 80px;
    -moz-border-bottom-right-radius: 80px;
    -webkit-border-bottom-right-radius: 80px;
    -webkit-box-shadow: 0 40px 0 0 #FFE2AC;
    -moz-box-shadow: 0 40px 0 0 #FFE2AC;
}

.list-menu ul li a.active-list:after {
    top: 50px;
    right: -1px;
    height: 80px;
    width: 40px;
    border-top-right-radius: 80px;
    -moz-border-top-right-radius: 80px;
    -webkit-border-top-right-radius: 80px;
    -webkit-box-shadow: 0 -40px 0 0 #FFE2AC;
    -moz-box-shadow: 0 -40px 0 0 #FFE2AC;
    box-shadow: 0 -40px 0 0 #FFE2AC;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .pmt-month {
        padding: 0px;
    }
    .pmt-yer {
        padding: 0px;
    }
    .list-menu {
        width: 100%!important;
        float: left!important;
        margin: 20px 0px 20px 0px;
    }
    .list-menu ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        text-decoration: none;
    }
    .list-menu ul li {
        width: auto;
        float: left;
        height: 50px;
        font-size: 16px;
        font-family: "Open Sans", sans-serif;
        text-transform: uppercase;
        font-weight: var(--font-weight-400);
        position: relative;
    }
    .list-menu ul li a {
        width: 100%;
        height: 50px;
        padding: 0px 10px;
        line-height: 50px;
        float: left;
        text-align: center;
        font-size: 16px;
        font-family: "Open Sans", sans-serif;
        font-weight: var(--font-weight-400);
        text-transform: uppercase;
        color: #fff;
        position: relative;
        border-bottom: 0px solid #0f4b6e!important;
    }
    .list-menu ul li a .line {
        width: 4px;
        height: 35px;
        background: #0073b6;
        position: absolute;
        top: 18px;
        left: 15px;
        display: none !important;
    }
    .list-menu ul li a.active-list {
        width: 100%;
        height: 50px;
        padding: 0px 20px;
        line-height: 50px;
        text-align: center;
        float: left;
        background-color: #fff;
        font-size: 16px;
        font-family: "Open Sans", sans-serif;
        font-weight: var(--font-weight-400);
        text-transform: uppercase;
        color: #222!important;
        border-radius: 60px!important;
        position: relative;
        border-bottom: 0px solid #e1e1e1!important;
    }
    .m-center {
        text-align: center;
    }
    .profile-tb {
        padding: 10px!important;
    }
    .history-tb {
        padding: 10px!important;
    }

.history__wrapper .accordion-item .accordion-header .accordion-button::after {
    position: absolute;
    right: 0;
    top: 20px!important;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    color: var( --history-text-btn-color);
    background-image: none;
    font-weight: var(--font-weight-500);
    content: "Info";
    width: 100px;
    border: 2px solid var( --history-info-btn-border);
    border-radius: 5px;
    text-align: center;
    height: 45px;
    line-height: 40px;
}
}

.form-group {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.form-group label {
    width: 100%;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-weight: var(--font-weight-400);
    color: var(--label-error);
}

.promotion__bg1 {
    right: 0;
    left: auto;
    background: var(--leftpanel-bg);
}

.profile-tb {
    padding: 50px 0px;
}

.history-tb {
    padding: 40px 0px;
}


/*----------------------------------------*/


/*  HIStory CSS START
/*----------------------------------------*/

.history__wrapper {
    padding: 0 20px;
    border-top: 3px solid var(--accorddion-top-bdrcolor);
    box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08), inset 0px 3px 0px 0px rgba(47, 128, 237, 0.004);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

@media (max-width: 575px) {
    .history__wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.history__wrapper .accordion-item {
    padding-top: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaedff;
}

.history__wrapper .accordion-item.border-none {
    border-bottom: none;
    padding-bottom: 35px;
}

.history__wrapper .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
    font-weight: var(--font-weight-600);
    color: #021937;
    border: none;
    padding: 0;
    background: none;
    text-align: left;
}

@media (max-width: 575px) {
    .history__wrapper .accordion-item .accordion-header .accordion-button {
        padding-right: 15px;
    }
}

.history__wrapper .accordion-item .accordion-header .accordion-button::after {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    color: var( --history-text-btn-color);
    background-image: none;
    font-weight: var(--font-weight-500);
    content: "Info";
    width: 100px;
    border: 2px solid var( --history-info-btn-border);
    border-radius: 5px;
    text-align: center;
    height: 45px;
    line-height: 40px;
}

.history__wrapper .accordion-item .accordion-header .accordion-button:focus {
    box-shadow: none;
}

.history__wrapper .accordion-item .accordion-header .accordion-button.collapsed::after {
    content: "Info";
}

.history__wrapper .accordion-item .accordion-header .accordion-button:hover {
    color: var( --history-info-btn-hover);
}

.history__wrapper .accordion-item .accordion-header .accordion-button:hover::after {
    color: var( --history-info-btn-hover);
}

.history__wrapper .accordion-item .accordion-body {
    padding: 0;
    padding-top: 20px;
}

.history__wrapper .accordion-item .accordion-body p {
    font-size: 15px;
    color: #474554;
    font-weight: var(--font-weight-600);
    margin-bottom: 0;
}

.history__wrapper .accordion-item .accordion-collapse {
    border: none;
}

.faq__counter ul li {
    display: inline-block;
}

@media (max-width: 575px) {
    .faq__counter ul li {
        display: block;
        margin-bottom: 30px;
    }
}

.faq__counter ul li:not(:last-child) {
    margin-right: 40px;
}

@media (max-width: 575px) {
    .faq__counter ul li:not(:last-child) {
        margin-right: 20px;
    }
}

.faq__counter ul li h3 {
    color: #222222;
    font-size: 40px;
    margin-bottom: 3px;
}

.faq__counter ul li h3 span {
    font-weight: var(--font-weight-700);
}

.faq__counter ul li h3.pink {
    color: #fe1a86;
}

.faq__counter ul li h3.blue {
    color: #0242fd;
}

.faq__counter ul li h3.yellow {
    color: #f5a706;
}

.faq__counter ul li p {
    font-weight: var(--font-weight-600);
    color: #474554;
    margin-bottom: 0;
}


/*********Calendar Css***********/

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
    z-index: 10051!important;
}

.ui-widget-header {
    background: #0077b9 !important;
    color: #fff;
}

.ui-datepicker-calendar thead tr th {
    color: #0077b9;
    border: 1px solid #0077b9;
}

.ui-state-default {
    background: #c5d1d8!important;
    border: 1px solid #c5d1d8;
    text-align: center;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    color: #fff!important;
    background: #0077b9 !important;
    border: 1px solid #0077b9 !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    color: #fff!important;
    background: #0077b9!important;
    border: 1px solid #0077b9!important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq__content {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .faq__content {
        margin-top: 60px;
    }
}

@media (max-width: 575px) {
    .faq__content {
        margin-top: 60px;
    }
}

.partner-logo {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.partner-logo img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.progressbar {
    counter-reset: step;
}

.progressbar li {
    list-style: none;
    display: inline-block;
    width: 30.33%;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid var( --history-setps-border);
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    background-color: var( --history-setps);
    color: var( --history-setps-color);
}

.progressbar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--history-setpsactive-bgcolor);
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressbar li span {
    color: var(--history-setps-color);
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active {
    color: var(--text-white)!important;
}

.progressbar li.active:before {
    border-color: #014268;
    background: #014268;
    color: #fff;
}

.progressbar li.active+li:after {
    background-color: var(--history-setpsactive-bgcolor);
}

.category-type {
    float: left;
    margin: 0px 0px;
}

.category-type ul {
    list-style: none;
    margin: 0px auto;
    padding: 0px;
}

.category-type ul li {
    font-size: 14px;
    font-weight: var(--font-weight-400);
    color: var(--accorddion-text-color) !important;
    margin: 5px 15px 5px 5px;
}

.category-type ul li i {
    font-size: 14px;
    color: var(--accorddion-text-color) !important;
}

.category-type ul li strong {
    font-size: 14px;
    font-weight: var(--font-weight-600);
    color: var(--accorddion-text-color) !important;
}

.qr {
    border: 1px solid var( --border-color);
    cursor: pointer
}

.qr-text {
    color: var( --history-qrtext-color)
}

.carousel-control-prev {
    background: transparent!important;
}

.carousel-control-next {
    background: transparent!important;
}

.sign__input-wrapper {
    min-height: 110px;
}

.pmt-month {
    padding-left: 0px;
    height: 90px;
}

.pmt-yer {
    padding-right: 0px;
    height: 90px;
}

.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}


/* Basic Rules */

.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 80px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(42px);
    -ms-transform: translateX(42px);
    transform: translateX(42px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.blue-bg {
    background: rgba(0, 120, 189, 0.2)
}

.check-box {
    display: block;
    position: relative;
    padding: 0px 0px 0px 26px !important;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 16px !important;
    font-weight: var(--font-weight-500)!important;
    line-height: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'LG Smart Regular', sans-serif, Arial, Helvetica, sans-serif;
    color: var(--text-light-dark);
}

.check-box a {
    color: #888;
}


/* Hide the browser's default checkbox */

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


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    border: 1px solid #007f88;
    background-color: #fff;
}


/* On mouse-over, add a grey background color */

.check-box :hover input~.checkmark {
    background-color: #fbfbfb;
}


/* When the checkbox is checked, add a blue background */

.check-box input:checked~.checkmark {
    background-color: #808080;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.check-box input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.check-box .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* akif */


/* akif */


/* akif */
.sign__input select.error {
    width: 100%;
    height: 46px;
    line-height: 40px;
    padding: 0 10px;
    background: var(--input-bg)!important;
    border: 2px solid var(--input-bdr) !important;
    color:#333!important;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px!important;
}
.sign__input select {
    width: 100%;
    height: 46px;
    line-height: 40px;
    padding: 0 10px;
    background: var(--input-bg)!important;
    border: 2px solid var(--input-bdr) !important;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
}

.sign__input select:focus {
    width: 100%;
    height: 46px;
    line-height: 40px;
    padding: 0 10px;
    background: var(--input-bg-focus)!important;
    border: 2px solid var(--input-bdrfocus) !important;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
}

.divide-line {
    position: relative;
    text-align: center;
}

.divide-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 2px;
    width: 100%;
    height: 1px;
    background: #e4e4e4;
}

.divide-line span {
    position: relative;
    padding: 0 30px;
    background-color: #ffffff;
    font-size: 20px;
    color: #000;
    font-weight: var(--font-weight-600);
}

.banner-registration {
    background-size: cover;
    height: 200px;
}

.contact__area__left__image .left__image img {
    object-fit: cover;
    min-height: 500px;
    /*height: 1200px;*/
    flex: 1;
}

.left__image img {
    object-fit: cover;
    min-height: 500px;
    /*height: 1200px;*/
    flex: 1;
}

.form__wrapper ul {
    margin-bottom: 40px;
}

.form__wrapper ul li {
    padding-left: 24px;
    position: relative;
}

.form__wrapper ul li:not(:last-child) {
    margin-bottom: 15px;
}

.form__wrapper ul li::after {
    position: absolute;
    content: "\2022";
    font-family: "Font Awesome 5 Pro";
    font-size: 15px;
    color: #808080;
    left: 0;
    top: 1px;
}

.form__section__title {
    font-size: 20px;
    font-weight: var(--font-weight-800);
    color: var(--text-dark);
    margin-bottom: 15px;
}

.card-box .card {
    padding: 0rem 3rem;
    border-radius: 10px;
    background-color: var(--bg-color);
    width: 400px;
    box-shadow: 0px 20px 60px 0px rgba(var(--btn-shadow), 0.2);
    margin: 1rem;
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
    /*cursor: pointer !important;*/
}

.ribbion-av {
    position: absolute;
    top: -20px;
    width: 108px !important;
    height: 30px !important;
    left: -55px;
}

.services__item-list .ribbion-av {
    position: absolute;
    top: -20px;
    width: 108px !important;
    height: 30px !important;
    left: -44px;
}

.rb-name {
    font-size: 14px;
    color: #ffffff !important;
    font-weight: var(--font-weight-500);
    padding: 3px 14px 5px 10px;
    text-align: center;
    font-family: 'Lato', sans-serif, Arial, Helvetica, sans-serif !important;
}



.ribbion-cl {
    position: absolute;
    top: -20px;
    width: 108px !important;
    height: 30px !important;
    left: -55px;
}

.services__item-list .ribbion-cl {
    position: absolute;
    top: -20px;
    width: 108px !important;
    height: 30px !important;
    left: -44px;
}

.ribbion-ex {
    position: absolute;
    top: -20px;
    width: 108px !important;
    height: 30px !important;
    left: -55px;
}

.services__item-list .ribbion-ex {
    position: absolute;
    top: -20px;
    width: 108px !important;
    height: 30px !important;
    left: -44px;
}

.services__benefit .section__pre-title {
    display: inline;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    font-size: 14px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-bottom: 19px;
    text-transform: capitalize;
}

@media (max-width: 768px){
    .services__benefit{
        text-align: center;
    }
    .services__content-list{
        text-align: center;
    }
}

.section__pre-title.orange {
    background: rgba(250, 142, 0, 0.14);
    color: rgb(250, 142, 0);
}

.benefit-details-list {
    color: var(--benfit-list-text-color)
}

.card-box .card {
    padding: 1rem 2rem;
    border-radius: 10px;
    background-color:var(  --card-bg);
    width: 400px;
    box-shadow: 0 0 30px rgba(var(--btn-shadow), .15);
    border:1px solid var(--card-border);
    margin: 1rem;
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
    /*cursor: pointer !important;*/
  }
  .card-box .card::before, .card-box .card::after {
    content: '';
    position: absolute;
    z-index: -1;
  }
  .card-box .card::before {
    width: 100%;
    height: 100%;
  /*  border: 1px solid #FFF;*/
    border-radius: 10px;
    top: -.7rem;
    left: -.7rem;
  }

  
  .infos-tab p {
    font-size: 12px!important;
    line-height: 12px!important;
    margin-bottom: 0px;
}
/* .infos {
    margin-left: 1.5rem;
} */
  .name {
    margin-bottom: 1rem;
  }
  .name h2 {
    font-size: 1.3rem;
    color:var(--text-white);
    text-align: center;
    margin-bottom: 10px;
  }
  .name h4 {
    font-size: 16px;
    color:var(--text-white);
    font-weight: var(--font-weight-400);
    text-align: center;
  }
  .text {
    font-size: .9rem;
    margin-bottom: 1rem;
  }
  .stats {
    margin-bottom: 1rem;
  }
  .stats li {
    min-width: 5rem;
  }
  .stats li h3 {
    font-size: .99rem;
  }
  .stats li h4 {
    font-size: .75rem;
  }
  .links button {
    font-family: Lato, sans-serif, Arial, Helvetica, sans-serif;
    min-width: 120px;
    padding: .5rem;
    border: 1px solid #222;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all .25s linear;
  }
  .links .follow, .links .view:hover {
    background-color: #222;
    color: #FFF;
  }
  .links .view, .links .follow:hover {
    background-color: transparent;
    color: #222;
  }
  @media screen and (max-width: 450px) {
    .infos {
      margin-left: 0;
      margin-top: 1.5rem;
    }
    .links button {
      min-width: 100px;
    }
    .card-box .card{width:94%; margin: 0px auto;}
  }

.sign__input input.error{

    float: none !important;
}

.profileError{
    color: #ff3d3d !important;
    width: 100%;
    float: left;
    margin-top: 0 px;
    font-size: 12px!important;
    line-height: 12px;
}
.services__content-2{
    min-height: 118px;
}
.footer__link a{
padding: 15px;
    color: var(--footer-link);
}
.footer__link{
padding: 15px;

    color:  var(--footer-link) !important;
}
.footer__copyright-wrapper p{
    color: var(--copyright-link) !important;
}

#loader-center-absolute img{
    top: -75px;
    left: -10px;
    position: absolute;
}


.faq__wrapper #collapseTwo:not(.show) {
    display: block;
    height: 4.5rem;
    overflow: hidden;
}


.faq__wrapper #collapseThree:not(.show) {
    display: block;
    height: 4.5rem;
    overflow: hidden;
}

#bin_validation_smg{
    display: none;
}
.small-slider .carousel-inner .carousel-item.active, .small-slider .carousel-inner .carousel-item-next, .small-slider .carousel-inner .carousel-item-prev {
    display: flex;
}
.carousel-control-next-icon {
    background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-color: black;
}

.carousel-control-prev-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e);
    background-color: black;
}
#carouselexampleindicators .carousel-item img{

  min-height:300px;
  max-height:300px;
  object-fit:cover;
  }

  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
@media (max-width: 767px) {
    .small-slider .carousel-inner .carousel-item > div {
        display: none;
        width:100%;
    }
    .small-slider .carousel-inner .carousel-item > div:first-child {
        display: block;

    }
}

.small-slider .carousel-inner .carousel-item.active,
.small-slider .carousel-inner .carousel-item-next,
.small-slider .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

    .small-slider .carousel-inner .carousel-item-end.active,
    .small-slider .carousel-inner .carousel-item-next {
      transform: translateX(25%);

    }

    .small-slider .carousel-inner .carousel-item-start.active,
    .small-slider .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.small-slider .carousel-inner .carousel-item-end,
.small-slider .carousel-inner .carousel-item-start {
  transform: translateX(0);
}

@media (max-width:768px){

  .d-slider{
    display: none !important;
  }
}
.price-box {
    border: 1px solid #ddd;
    padding: 10px 0px;
    margin: 0px auto;
    width: 60%!important;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size: var(--small-heading-font-size);
    font-weight: var(--font-weight-500);
}

.half-circle-right {
    width: 50px;
    height: 100px;
    background: #f4f9fd;
    -moz-border-radius-topleft: 90px;
    -webkit-border-top-left-radius: 90px;
    border-top-left-radius: 90px;
    -moz-border-radius-bottomleft: 90px;
    -webkit-border-bottom-left-radius: 90px;
    border-bottom-left-radius: 90px;
    position: absolute;
    right: 0px;
    bottom: 50px;
    z-index: 2;
}
.half-circle-left {
    width: 50px;
    height: 100px;
    background: #f4f9fd;
    -moz-border-radius-topright: 90px;
    -webkit-border-top-right-radius: 90px;
    border-top-right-radius: 90px;
    -moz-border-radius-bottomright: 90px;
    -webkit-border-bottom-right-radius: 90px;
    border-bottom-right-radius: 90px;
    position: absolute;
    left: 0px;
    bottom: 50px;
    z-index: 2;
}

.alert-success label{
    color: #0f5132 !important;
}

.w-btn-visited{
    color: white;
    background: grey !important;
    border-color: grey !important;
    cursor: not-allowed !important;
}
.w-btn-visited:hover{
    color: white;
    background: grey !important;
    border-color: grey !important;
    cursor: not-allowed !important;
}
.w-btn-visited:hover::after{
    color: white;
    background: grey !important;
    border-color: grey !important;
    cursor: not-allowed !important;
}


.w-btn-green{
    color: white;
    background: #3CB371 !important;
    border-color: #3CB371 !important;
    cursor: not-allowed !important;
}
.w-btn-green:hover{
    color: white;
    background: #3CB371 !important;
    border-color: #3CB371 !important;
    cursor: not-allowed !important;
}
.w-btn-green:hover::after{
    color: white;
    background: #3CB371 !important;
    border-color: #3CB371 !important;
    cursor: not-allowed !important;
}

.read-more {
    display: inline-block;
    /* margin-bottom: -20px; */
    /* display: none; */
    position: absolute;
    bottom: 15px;
    width: 100%;
    left: 0px;
}


.read-more a{
    font-size: 10px !important;
    /* text-decoration: underline; */
    /* display: flex; */
    color: var(--read-more-hover);
}

.read-more a span {
    color: var(--read-more) !important;
    font-size: 10px !important;
    text-decoration: none !important;
    /* pointer-events: none !important; */
    cursor: default !important;
}

.label-green {
    font-family: var(--para-font-family);
    font-size: var(--para-font-size)!important;
    font-weight: var(--para-font-weight);

    color: var(--label-text-green) !important;


}
.label-gray {
    font-family: var(--para-font-family);
    font-size: var(--para-font-size)!important;
    font-weight: var(--para-font-weight);

    color: var(--label-text-gray) !important;

}


.member-card-slide {padding:10px;}
.member-card-slide h4 {
    font-weight: 400;
    margin-bottom: 2px;
    line-height: 19px;
    font-size: 15px;
    color: #333;
}

.member-card {
    padding: 20px 0 0px;
    width: 100%;
    z-index: 4;
}

.member-card ul {
    /* display: inline-block; */
    list-style: none;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    display: -webkit-inline-box;
    overflow: auto;
    overflow-y: hidden;
    max-width: 100%;
    margin: 0 0 1em;
    white-space: nowrap;
    /* background: #AAA; */
}
.member-card ul li:first-child{
    margin-left:0px!important;
}
.member-card ul li {
    text-align: center;
    background: transparent;
    border: 2px solid transparent;
    margin: 0.5%;
    margin-bottom: 0px;
    float: left;
    width: 13%;
    height: auto !important;
    padding: 10px 0px 10px 0px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
     border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 5;
}

.member-card ul li .text-ac {
    color: #66b42d;
    margin-bottom: -40px;
    font-weight: 400;
    line-height: 19px;
    font-size: 15px;
}

.member-card ul li.active {
    border: 2px solid var( --card-box-border);
    border-bottom: 2px solid var(--card-box-bottom)!important;
    z-index: 5;
}
.member-card ul li.active h4 {
    font-weight: 400;
    margin-bottom: 2px;
    line-height: 19px;
    font-size: 15px;
    color: #333;
}

.member-card ul li:hover {
    text-align: center;
    background: transparent;
    margin: 0.5%;
    margin-bottom: 0px;
    float: left;
    width: 13%;
    padding: 2px 0px 0px 0px;
    border: 2px solid var( --card-box-border);
    border-bottom: 2px solid var(--card-box-bottom)!important;
    border-bottom: 0px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
     border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}
.member-card ul li:hover h4 {
    font-weight: 400;
    margin-bottom: 2px;
    line-height: 19px;
    font-size: 15px;
    color: #333;
}
.member-card ul li:hover img {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
}

.member-card ul li .icon {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    position: relative;
    z-index: 2;
}

.member-card ul li h4 {
    font-weight:var(--font-weight-400);
    margin-bottom: 2px;
    line-height: 19px;
    font-size: 15px;
    color:var(--text-light-dark);
}



.tab-box {
    border: 2px solid var(--card-panel-border);
    margin-top: -9px;
    z-index: 2;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tab-box {
        border: 2px solid var(--card-panel-border);
        margin-top: 0px;
        z-index: 2;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .member-card ul li.active {
        border: 2px solid var(--card-box-border)!important;
        z-index: 5;
    }
    .member-card ul li {
        text-align: center;
        background: transparent;
        border: 2px solid transparent;
        margin: 0.5%;
        float: left;
        width: 19%;
        height: 110px;
        padding: 2px 0px 0px 0px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .member-card ul li:hover {
        text-align: center;
        background: transparent;
        margin: 0.5%;
        float: left;
        width: 19%;
        padding: 2px 0px 0px 0px;
        border: 2px solid var(--card-box-border)!important;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tab-box {
        border: 2px solid var(--card-panel-border)!important;
        margin-top: 0px;
        z-index: 2;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .member-card ul li.active {
        border: 2px solid var(--card-box-border)!important;
        z-index: 5;
    }
    .member-card ul li {
        text-align: center;
        background: transparent;
        border: 2px solid transparent;
        margin: 2%;
        float: left;
        width: 26%;
        height: 110px;
        padding: 2px 0px 0px 0px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .member-card ul li:hover {
        text-align: center;
        background: transparent;
        margin: 2%;
        float: left;
        width: 26%;
        padding: 2px 0px 0px 0px;
        border: 2px solid var(--card-box-border)!important;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
}

@media only screen and (min-width: 320px) and (max-width: 575px) {
    .tab-box {
        border: 2px solid var(--card-paenl-border)!important;
        margin-top: 0px;
        z-index: 2;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .member-card ul li.active {
        border: 2px solid var(--card-box-border)!important;
        z-index: 5;
    }
    .member-card ul li {
        text-align: center;
        background: transparent;
        border: 2px solid transparent;
        margin: 2%;
        float: left;
        width: 46%;
        height: 110px;
        padding: 2px 0px 0px 0px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .member-card ul li:hover {
        text-align: center;
        background: transparent;
        margin: 2%;
        float: left;
        width: 46%;
        padding: 2px 0px 0px 0px;
        border: 2px solid var(--card-box-border)!important;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
}

.services__item-02 {
    padding: 30px 45px;
    /* padding-right: 70px; */
    -webkit-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -moz-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    min-height: 250px;
}