/* latin-ext */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/webfonts/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/webfonts/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media screen and (max-width: 769px) {
    body.body, html {
        overflow-x: hidden !important;
    }
}
.img100 img {
    width: 100%;
}

@media screen and (min-width: 769px) {
    body.body.body5 {
        overflow-x: initial !important;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

p {
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

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

.sp {
    padding: 100px 0px;
}

.sp2 {
    padding: 120px 0px;
}

.sp3 {
    padding: 80px 0px;
}

@media (max-width: 768px) {
    .sp {
        padding: 50px 0px;
    }
    .sp2 {
        padding: 60px 0px;
    }
    .sp3 {
        padding: 40px 0px;
    }
}
@media (max-width: 768px) {
    .sp {
        padding: 50px 0px;
    }
    .sp2 {
        padding: 60px 0px;
    }
    .sp3 {
        padding: 40px 0px;
    }
}
.space4 {
    height: 4px;
}

.space6 {
    height: 6px;
}

.space28 {
    height: 28px;
}

.space8 {
    height: 8px;
}

.space12 {
    height: 12px;
}

.space14 {
    height: 14px;
}

.space16 {
    height: 16px;
}

.space24 {
    height: 24px;
}

.space32 {
    height: 32px;
}

.space10 {
    height: 10px;
}

.space5 {
    height: 5px;
}

.space5 {
    height: 5px;
}

@media (max-width: 767px) {
    .space10 {
        height: 5px;
    }
    .sp5 {
        padding-bottom: 50px;
    }
}
.space20 {
    height: 20px;
}

@media (max-width: 767px) {
    .space20 {
        height: 10px;
    }
}
.space30 {
    height: 30px;
}

@media (max-width: 767px) {
    .space30 {
        height: 15px;
    }
}
.space40 {
    height: 40px;
}

@media (max-width: 767px) {
    .space40 {
        height: 20px;
    }
}
.space50 {
    height: 50px;
}

.space45 {
    height: 45px;
}

@media (max-width: 768px) {
    .space50 {
        height: 25px;
    }
    .space60 {
        height: 30px !important;
    }
}
.space60 {
    height: 60px;
}

.space55 {
    height: 55px;
}

.space70 {
    height: 70px;
}

.space80 {
    height: 80px;
}

.space90 {
    height: 90px;
}

.space100 {
    height: 100px;
}

.space120 {
    height: 120px;
}

.text-right {
    text-align: right;
}

.section-padding {
    padding: 120px 0;
}

@media (max-width: 991px) {
    .mobile-hidden{
        display:none;
    }
    .section-padding {
        padding: 60px 0;
    }
}
.section-padding2 {
    padding: 120px 0 90px;
}

@media (max-width: 991px) {
    .section-padding2 {
        padding: 60px 0 30px;
    }
}
.padding-bottom {
    padding-bottom: 120px;
}

@media (max-width: 991px) {
    .padding-bottom {
        padding-bottom: 60px;
    }
}
.padding-bottom2 {
    padding-bottom: 90px;
}

@media (max-width: 991px) {
    .padding-bottom2 {
        padding-bottom: 30px;
    }
}
.padding-top {
    padding-top: 120px;
}

@media (max-width: 991px) {
    .padding-top {
        padding-top: 60px;
    }
}
.padding-top2 {
    padding-top: 90px;
}

@media (max-width: 991px) {
    .padding-top2 {
        padding-top: 30px;
    }
}
.padding-90 {
    padding: 90px 0;
}

@media (max-width: 991px) {
    .padding-90 {
        padding: 50px 0;
    }
}
.w-full {
    width: 100%;
}

@media (min-width: 992px) {
    .w-lg-full {
        width: 100%;
    }
}
.text-center {
    text-align: center;
}

@media (min-width: 992px) {
    .text-lg-center {
        text-align: center;
    }
}
.text-left {
    text-align: left !important;
}

.weight-400 {
    font-weight: 400 !important;
}

.weight-500 {
    font-weight: 500 !important;
}

.weight-600 {
    font-weight: 600 !important;
}

.weight-700 {
    font-weight: 700 !important;
}

.weight-800 {
    font-weight: 800 !important;
}

.weight-900 {
    font-weight: 900 !important;
}

.font-f-1 {
    font-family: "Hind", sans-serif !important;
}

.font-f-2 {
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

.font-f-3 {
    font-family: "Spline Sans", sans-serif !important;
}

.font-f-4 {
    font-family: "Catamaran", sans-serif !important;
}

.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px;
}

.font-26 {
    font-size: 26px;
}

.font-28 {
    font-size: 28px;
}

.font-30 {
    font-size: 30px;
}

.font-32 {
    font-size: 32px;
}

.font-34 {
    font-size: 34px;
}

.font-36 {
    font-size: 36px;
}

.font-40 {
    font-size: 40px;
}

.font-42 {
    font-size: 42px;
}

.font-44 {
    font-size: 44px;
}

.font-46 {
    font-size: 48px;
}

.font-48 {
    font-size: 48px;
}

.font-50 {
    font-size: 60px;
}

.font-52 {
    font-size: 52px;
}

.font-54 {
    font-size: 54px;
}

.font-56 {
    font-size: 56px;
}

.font-58 {
    font-size: 58px;
}

.font-60 {
    font-size: 60px;
}

.font-62 {
    font-size: 62px;
}

.font-70 {
    font-size: 70px;
}

.font-72 {
    font-size: 72px;
}

.font-74 {
    font-size: 74px;
}

.font-76 {
    font-size: 76px;
}

.font-78 {
    font-size: 78px;
}

.font-80 {
    font-size: 80px;
}

.font-82 {
    font-size: 82px;
}

.font-84 {
    font-size: 84px;
}

.font-86 {
    font-size: 86px;
}

.font-88 {
    font-size: 88px;
}

.font-90 {
    font-size: 90px;
}

.font-92 {
    font-size: 92px;
}

.font-94 {
    font-size: 94px;
}

.font-96 {
    font-size: 96px;
}

.font-98 {
    font-size: 98px;
}

.font-100 {
    font-size: 100px;
}

@media screen and (min-width: 1024px) {
    .text-md-right {
        text-align: right;
    }
    .text-md-center {
        text-align: center;
    }
    .text-md-left {
        text-align: left;
    }
    .font-lg-12 {
        font-size: 12px;
    }
    .font-lg-14 {
        font-size: 14px;
    }
    .font-lg-16 {
        font-size: 16px;
    }
    .font-lg-18 {
        font-size: 18px;
    }
    .font-lg-20 {
        font-size: 20px;
    }
    .font-lg-22 {
        font-size: 22px;
    }
    .font-lg-24 {
        font-size: 24px;
    }
    .font-lg-26 {
        font-size: 26px;
    }
    .font-lg-28 {
        font-size: 28px;
    }
    .font-lg-30 {
        font-size: 30px;
    }
    .font-lg-32 {
        font-size: 32px;
    }
    .font-lg-34 {
        font-size: 34px;
    }
    .font-lg-36 {
        font-size: 36px;
    }
    .font-lg-40 {
        font-size: 40px;
    }
    .font-lg-42 {
        font-size: 42px;
    }
    .font-lg-44 {
        font-size: 44px;
    }
    .font-lg-45 {
        font-size: 45px;
    }
    .font-lg-46 {
        font-size: 48px;
    }
    .font-lg-48 {
        font-size: 48px;
    }
    .font-lg-50 {
        font-size: 60px;
    }
    .font-lg-52 {
        font-size: 52px;
    }
    .font-lg-54 {
        font-size: 54px;
    }
    .font-lg-56 {
        font-size: 56px;
    }
    .font-lg-58 {
        font-size: 58px;
    }
    .font-lg-60 {
        font-size: 60px;
    }
    .font-lg-62 {
        font-size: 62px;
    }
    .font-lg-66 {
        font-size: 66px;
    }
    .font-lg-70 {
        font-size: 70px;
    }
    .font-lg-72 {
        font-size: 72px;
    }
    .font-lg-74 {
        font-size: 74px;
    }
    .font-lg-76 {
        font-size: 76px;
    }
    .font-lg-78 {
        font-size: 78px;
    }
    .font-lg-80 {
        font-size: 80px;
    }
    .font-lg-82 {
        font-size: 82px;
    }
    .font-lg-84 {
        font-size: 84px;
    }
    .font-lg-86 {
        font-size: 86px;
    }
    .font-lg-88 {
        font-size: 88px;
    }
    .font-lg-90 {
        font-size: 90px;
    }
    .font-lg-92 {
        font-size: 92px;
    }
    .font-lg-94 {
        font-size: 94px;
    }
    .font-lg-96 {
        font-size: 96px;
    }
    .font-lg-98 {
        font-size: 98px;
    }
    .font-lg-100 {
        font-size: 100px;
    }
    .line-height-lg-14 {
        line-height: 14px;
    }
    .line-height-lg-16 {
        line-height: 16px;
    }
    .line-height-lg-18 {
        line-height: 18px;
    }
    .line-height-lg-20 {
        line-height: 20px;
    }
    .line-height-lg-22 {
        line-height: 22px;
    }
    .line-height-lg-24 {
        line-height: 24px;
    }
    .line-height-lg-26 {
        line-height: 26px;
    }
    .line-height-lg-28 {
        line-height: 28px;
    }
    .line-height-lg-30 {
        line-height: 30px;
    }
    .line-height-lg-32 {
        line-height: 32px;
    }
    .line-height-lg-34 {
        line-height: 34px;
    }
    .line-height-lg-36 {
        line-height: 36px;
    }
    .line-height-lg-38 {
        line-height: 38px;
    }
    .line-height-lg-40 {
        line-height: 40px;
    }
    .line-height-lg-42 {
        line-height: 42px;
    }
    .line-height-lg-44 {
        line-height: 44px;
    }
    .line-height-lg-48 {
        line-height: 48px;
    }
    .line-height-lg-50 {
        line-height: 50px;
    }
    .line-height-lg-52 {
        line-height: 52px;
    }
    .line-height-lg-54 {
        line-height: 54px;
    }
    .line-height-lg-56 {
        line-height: 56px;
    }
    .line-height-lg-58 {
        line-height: 58px;
    }
    .line-height-lg-60 {
        line-height: 60px;
    }
    .line-height-lg-62 {
        line-height: 62px;
    }
    .line-height-lg-64 {
        line-height: 64px;
    }
    .line-height-lg-66 {
        line-height: 66px;
    }
    .line-height-lg-68 {
        line-height: 68px;
    }
    .line-height-lg-70 {
        line-height: 70px;
    }
    .line-height-lg-72 {
        line-height: 72px;
    }
    .line-height-lg-74 {
        line-height: 74px;
    }
    .line-height-lg-76 {
        line-height: 76px;
    }
    .line-height-lg-78 {
        line-height: 78px;
    }
    .line-height-lg-80 {
        line-height: 80px;
    }
    .line-height-lg-82 {
        line-height: 82px;
    }
    .line-height-lg-84 {
        line-height: 84px;
    }
    .line-height-lg-86 {
        line-height: 86px;
    }
    .line-height-lg-88 {
        line-height: 88px;
    }
    .line-height-lg-90 {
        line-height: 90px;
    }
    .line-height-lg-92 {
        line-height: 92px;
    }
    .line-height-lg-94 {
        line-height: 94px;
    }
    .line-height-lg-96 {
        line-height: 96px;
    }
    .line-height-lg-98 {
        line-height: 98px;
    }
    .line-height-lg-100 {
        line-height: 100px;
    }
}
@media screen and (min-width: 768px) {
    .font-md-12 {
        font-size: 12px;
    }
    .font-md-14 {
        font-size: 14px;
    }
    .font-md-16 {
        font-size: 16px;
    }
    .font-md-18 {
        font-size: 18px;
    }
    .font-md-20 {
        font-size: 20px;
    }
    .font-md-22 {
        font-size: 22px;
    }
    .font-md-24 {
        font-size: 24px;
    }
    .font-md-26 {
        font-size: 26px;
    }
    .font-md-28 {
        font-size: 28px;
    }
    .font-md-30 {
        font-size: 30px;
    }
    .font-md-32 {
        font-size: 32px;
    }
    .font-md-34 {
        font-size: 34px;
    }
    .font-md-36 {
        font-size: 36px;
    }
    .font-md-40 {
        font-size: 40px;
    }
    .font-md-42 {
        font-size: 42px;
    }
    .font-md-44 {
        font-size: 44px;
    }
    .font-md-46 {
        font-size: 48px;
    }
    .font-md-48 {
        font-size: 48px;
    }
    .font-md-50 {
        font-size: 60px;
    }
    .font-md-52 {
        font-size: 52px;
    }
    .font-md-54 {
        font-size: 54px;
    }
    .font-md-56 {
        font-size: 56px;
    }
    .font-md-58 {
        font-size: 58px;
    }
    .font-md-60 {
        font-size: 60px;
    }
    .font-md-62 {
        font-size: 62px;
    }
    .font-md-74 {
        font-size: 74px;
    }
    .font-md-76 {
        font-size: 76px;
    }
    .font-md-78 {
        font-size: 78px;
    }
    .font-md-80 {
        font-size: 80px;
    }
    .font-md-82 {
        font-size: 82px;
    }
    .font-md-84 {
        font-size: 84px;
    }
    .font-md-86 {
        font-size: 86px;
    }
    .font-md-88 {
        font-size: 88px;
    }
    .font-md-90 {
        font-size: 90px;
    }
    .font-md-92 {
        font-size: 92px;
    }
    .font-md-94 {
        font-size: 94px;
    }
    .font-md-96 {
        font-size: 96px;
    }
    .font-md-98 {
        font-size: 98px;
    }
    .font-md-100 {
        font-size: 100px;
    }
    .line-height-md-12 {
        line-height: 12px;
    }
    .line-height-md-14 {
        line-height: 14px;
    }
    .line-height-md-16 {
        line-height: 16px;
    }
    .line-height-md-18 {
        line-height: 18px;
    }
    .line-height-md-20 {
        line-height: 20px;
    }
    .line-height-md-22 {
        line-height: 22px;
    }
    .line-height-md-24 {
        line-height: 24px;
    }
    .line-height-md-26 {
        line-height: 26px;
    }
    .line-height-md-28 {
        line-height: 28px;
    }
    .line-height-md-30 {
        line-height: 30px;
    }
    .line-height-md-32 {
        line-height: 32px;
    }
    .line-height-md-34 {
        line-height: 34px;
    }
    .line-height-md-36 {
        line-height: 36px;
    }
    .line-height-md-38 {
        line-height: 38px;
    }
    .line-height-md-40 {
        line-height: 40px;
    }
    .line-height-md-42 {
        line-height: 42px;
    }
    .line-height-md-44 {
        line-height: 44px;
    }
    .line-height-md-48 {
        line-height: 48px;
    }
    .line-height-md-50 {
        line-height: 50px;
    }
    .line-height-md-52 {
        line-height: 52px;
    }
    .line-height-md-54 {
        line-height: 54px;
    }
    .line-height-md-56 {
        line-height: 56px;
    }
    .line-height-md-58 {
        line-height: 58px;
    }
    .line-height-md-60 {
        line-height: 60px;
    }
    .line-height-md-62 {
        line-height: 62px;
    }
    .line-height-md-64 {
        line-height: 64px;
    }
    .line-height-md-66 {
        line-height: 66px;
    }
    .line-height-md-68 {
        line-height: 68px;
    }
    .line-height-md-70 {
        line-height: 70px;
    }
    .line-height-md-72 {
        line-height: 72px;
    }
    .line-height-md-74 {
        line-height: 74px;
    }
    .line-height-md-76 {
        line-height: 76px;
    }
    .line-height-md-78 {
        line-height: 78px;
    }
    .line-height-md-80 {
        line-height: 80px;
    }
    .line-height-md-82 {
        line-height: 82px;
    }
    .line-height-md-84 {
        line-height: 84px;
    }
    .line-height-md-86 {
        line-height: 86px;
    }
    .line-height-md-88 {
        line-height: 88px;
    }
    .line-height-md-90 {
        line-height: 90px;
    }
    .line-height-md-92 {
        line-height: 92px;
    }
    .line-height-md-94 {
        line-height: 94px;
    }
    .line-height-md-96 {
        line-height: 96px;
    }
    .line-height-md-98 {
        line-height: 98px;
    }
    .line-height-md-100 {
        line-height: 100px;
    }
}
@media screen and (min-width: 576px) {
    .font-sm-12 {
        font-size: 12px;
    }
    .font-sm-14 {
        font-size: 14px;
    }
    .font-sm-16 {
        font-size: 16px;
    }
    .font-sm-18 {
        font-size: 18px;
    }
    .font-sm-20 {
        font-size: 20px;
    }
    .font-sm-22 {
        font-size: 22px;
    }
    .font-sm-24 {
        font-size: 24px;
    }
    .font-sm-26 {
        font-size: 26px;
    }
    .font-sm-28 {
        font-size: 28px;
    }
    .font-sm-30 {
        font-size: 30px;
    }
    .font-sm-32 {
        font-size: 32px;
    }
    .font-sm-34 {
        font-size: 34px;
    }
    .font-sm-36 {
        font-size: 36px;
    }
    .font-sm-40 {
        font-size: 40px;
    }
    .font-sm-42 {
        font-size: 42px;
    }
    .font-sm-44 {
        font-size: 44px;
    }
    .font-sm-46 {
        font-size: 48px;
    }
    .font-sm-48 {
        font-size: 48px;
    }
    .font-sm-50 {
        font-size: 60px;
    }
    .font-sm-52 {
        font-size: 52px;
    }
    .font-sm-54 {
        font-size: 54px;
    }
    .font-sm-56 {
        font-size: 56px;
    }
    .font-sm-58 {
        font-size: 58px;
    }
    .font-sm-60 {
        font-size: 60px;
    }
    .font-sm-62 {
        font-size: 62px;
    }
    .font-sm-74 {
        font-size: 74px;
    }
    .font-sm-76 {
        font-size: 76px;
    }
    .font-sm-78 {
        font-size: 78px;
    }
    .font-sm-80 {
        font-size: 80px;
    }
    .font-sm-82 {
        font-size: 82px;
    }
    .font-sm-84 {
        font-size: 84px;
    }
    .font-sm-86 {
        font-size: 86px;
    }
    .font-sm-88 {
        font-size: 88px;
    }
    .font-sm-90 {
        font-size: 90px;
    }
    .font-sm-92 {
        font-size: 92px;
    }
    .font-sm-94 {
        font-size: 94px;
    }
    .font-sm-96 {
        font-size: 96px;
    }
    .font-sm-98 {
        font-size: 98px;
    }
    .font-sm-100 {
        font-size: 100px;
    }
    .line-height-sm-12 {
        line-height: 12px;
    }
    .line-height-sm-14 {
        line-height: 14px;
    }
    .line-height-sm-16 {
        line-height: 16px;
    }
    .line-height-sm-18 {
        line-height: 18px;
    }
    .line-height-sm-20 {
        line-height: 20px;
    }
    .line-height-sm-22 {
        line-height: 22px;
    }
    .line-height-sm-24 {
        line-height: 24px;
    }
    .line-height-sm-26 {
        line-height: 26px;
    }
    .line-height-sm-28 {
        line-height: 28px;
    }
    .line-height-sm-30 {
        line-height: 30px;
    }
    .line-height-sm-32 {
        line-height: 32px;
    }
    .line-height-sm-34 {
        line-height: 34px;
    }
    .line-height-sm-36 {
        line-height: 36px;
    }
    .line-height-sm-38 {
        line-height: 38px;
    }
    .line-height-sm-40 {
        line-height: 40px;
    }
    .line-height-sm-42 {
        line-height: 42px;
    }
    .line-height-sm-44 {
        line-height: 44px;
    }
    .line-height-sm-48 {
        line-height: 48px;
    }
    .line-height-sm-50 {
        line-height: 50px;
    }
    .line-height-sm-52 {
        line-height: 52px;
    }
    .line-height-sm-54 {
        line-height: 54px;
    }
    .line-height-sm-56 {
        line-height: 56px;
    }
    .line-height-sm-58 {
        line-height: 58px;
    }
    .line-height-sm-60 {
        line-height: 60px;
    }
    .line-height-sm-62 {
        line-height: 62px;
    }
    .line-height-sm-64 {
        line-height: 64px;
    }
    .line-height-sm-66 {
        line-height: 66px;
    }
    .line-height-sm-68 {
        line-height: 68px;
    }
    .line-height-sm-70 {
        line-height: 70px;
    }
    .line-height-sm-72 {
        line-height: 72px;
    }
    .line-height-sm-74 {
        line-height: 74px;
    }
    .line-height-sm-76 {
        line-height: 76px;
    }
    .line-height-sm-78 {
        line-height: 78px;
    }
    .line-height-sm-80 {
        line-height: 80px;
    }
    .line-height-sm-82 {
        line-height: 82px;
    }
    .line-height-sm-84 {
        line-height: 84px;
    }
    .line-height-sm-86 {
        line-height: 86px;
    }
    .line-height-sm-88 {
        line-height: 88px;
    }
    .line-height-sm-90 {
        line-height: 90px;
    }
    .line-height-sm-92 {
        line-height: 92px;
    }
    .line-height-sm-94 {
        line-height: 94px;
    }
    .line-height-sm-96 {
        line-height: 96px;
    }
    .line-height-sm-98 {
        line-height: 98px;
    }
    .line-height-sm-100 {
        line-height: 100px;
    }
}
.mr-2 {
    margin-right: 8px;
}

@media (max-width: 767px) {
    .mobile-hidden {
        display: none;
    }
}
.mb-30 {
    margin-bottom: 30px;
}

.mobile-sidebar .single-footer h3 {
    color: #ffffff;
}

.mobile-sidebar .single-contact a {
    color: #ffffff;
}

.lg-ml-15 {
    margin-left: 15px;
}

@media (max-width: 767px) {
    .lg-ml-15 {
        margin-left: 0;
    }
}
.lg-mr-15 {
    margin-right: 15px;
}

@media (max-width: 767px) {
    .lg-mr-15 {
        margin-right: 0;
    }
}
._relative {
    position: relative;
}

._absolute {
    position: absolute;
}

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

.bg-contain {
    background-size: contain;
    background-position: center center;
}

.img-cover img,
.img-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.width100 img {
    width: 100%;
}

:root {
    --vtc-text-title1: #090B0E;
    --vtc-text-title2: #0B0314;
    --vtc-text-pera1: #3D4C5E;
    --vtc-text-white: #fff;
    --vtc-text-white80per: rgba(255, 255, 255, 0.8274509804);
    --vtc-text-white70per: rgba(255, 255, 255, 0.6901960784);
    --vtc-bg-main1: #ADFF1C;
    --vtc-bg-main2: #c6ff63;
    --vtc-bg-main3: #BD3F3D;
    --vtc-bg-main4: #155FFF;
    --vtc-bg-main5: #11819B;
    --vtc-bg-main6: #FD6543;
    --vtc-bg-main7: #093037;
    --vtc-bg-main8: #F8CE69;
    --vtc-bg-main9: #0D2B5E;
    --vtc-bg-main10: #fa635c;
    --vtc-bg-main11: #0587FF;
    --vtc-bg-main12: #6729F9;
    --vtc-bg-main13: #3546A3;
    --vtc-bg-common-1: #F4F4F4;
    --vtc-bg-common-2: #232323;
    --vtc-bg-common-3: #F6F8FA;
    --vtc-bg-common-4: #DFE9FB;
    --vtc-bg-common-5: #F4F4F4;
    --vtc-bg-common-6: #D0DFFF;
    --vtc-bg-common-7: #E8EFFF;
    --vtc-bg-common-8: #F1F8FF;
    --vtc-bg-common-9: #E7F2F5;
    --vtc-bg-common-10: #C8E0E7;
    --vtc-bg-common-11: #FFF0EC;
    --vtc-bg-common-12: #F6F7EE;
    --vtc-bg-common-13: #F2F2F2;
    --vtc-bg-common-14: rgba(9, 11, 14, 0.0941176471);
    --vtc-bg-common-15: #EAF8F6;
    --vtc-bg-common-16: #BDC3C9;
    --vtc-bg-common-17: #F3FAFA;
    --vtc-bg-common-18: #EDF2FB;
    --vtc-bg-common-19: #F1F1F1;
    --vtc-bg-common-20: rgba(103, 41, 249, 0.0352941176);
    --vtc-bg-common-21: #F2F4FF;
    --vtc-bg-common-22: rgba(53, 69, 163, 0.0823529412);
    --vtc-bg-white: #ffffff;
    --vtc-bg-white10per: rgba(255, 255, 255, 0.1);
    --vtc-bg-white20per: rgba(255, 255, 255, 0.199);
    --vtc-bg-white30per: rgba(255, 255, 255, 0.308);
    --vtc-border-1: #DDE1E9;
    --vtc-border-2: #DDE0E5;
    --vtc-border-3: #CFCFD0;
    --vtc-border-4: #D0D1D1;
    --vtc-border-5: #C5C9CF;
    --vtc-border-6: rgba(61, 76, 94, 0.2);
    --vtc-border-7: #D0D7D7;
    --vtc-border-8: #E6E8E8;
    --f-fw-normal: 400;
    --f-fw-medium: 500;
    --f-fw-semibold: 600;
    --f-fw-bold: 700;
    --f-fw-ex-bold: 800;
    --f-ff-font-1: 'Outfit', sans-serif;
    --f-fs-font-16: 16px;
    --f-fs-font-18: 18px;
    --f-fs-font-20: 20px;
    --f-fs-font-22: 22px;
    --f-fs-font-24: 24px;
    --f-fs-font-26: 26px;
    --f-fs-font-28: 28px;
    --f-fs-font-30: 30px;
    --f-fs-font-32: 32px;
    --f-fs-font-34: 34px;
    --f-fs-font-36: 36px;
    --f-fs-font-38: 38px;
    --f-fs-font-40: 40px;
    --f-fs-font-42: 42px;
    --f-fs-font-44: 44px;
    --f-fs-font-48: 48px;
    --f-fs-font-50: 50px;
    --f-fs-font-52: 52px;
    --f-fs-font-54: 54px;
    --f-fs-font-56: 56px;
    --f-fs-font-58: 58px;
    --f-fs-font-60: 60px;
    --f-fs-font-62: 62px;
    --f-fs-font-64: 64px;
    --f-fs-font-66: 66px;
    --f-fs-font-68: 68px;
    --f-fs-font-70: 70px;
    --f-fs-font-72: 72px;
    --f-fs-font-74: 74px;
    --f-fs-font-76: 76px;
    --f-fs-font-78: 78px;
    --f-fs-font-80: 80px;
    --f-fs-font-82: 82px;
    --f-fs-font-84: 84px;
    --f-fs-font-86: 86px;
    --f-fs-font-88: 88px;
}

.btn-outline-primary {
    --bs-btn-hover-color: #808080;
}

/* Custom Styles */
html { scroll-behavior: smooth; }

/* Adjust sticky offset for fixed navbar */
.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}
.nav-link-toc {
    color: #6c757d;
    border-left: 2px solid #dee2e6;
    padding-left: 1rem;
    font-size: 0.9rem;
}
.nav-link-toc:hover, .nav-link-toc.active {
    color: #0d6efd;
    border-left-color: #0d6efd;
    background-color: transparent;
}

body {
    font-size: var(--f-fs-font-16);
    font-family: var(--f-ff-font-1);
    font-weight: var(--f-fw-normal);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden; /* FIX: Prevents horizontal scrollbar */
}

/* Navbar Blur */
.navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(to right, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Blobs */
.blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1;
    opacity: 0.4;
}
.blob-1 { background-color: #d63384; top: -100px; left: -100px; }
.blob-2 { background-color: #0d6efd; bottom: 0; right: -100px; }

/* Hover Lift Effect */
.hover-lift { transition: transform 0.2s; }
.hover-lift:hover { transform: translateY(-5px); }

/* Custom Toggle Switch for Pricing */
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Card Styling overrides */
.card-business {
    border: 2px solid #0d6efd;
}
.navbar-brand img{
    max-width:200px;
}
.foot-logo img{
    max-width:150px;
}

/* Sidebar Styles */
.sidebar {
    height: 100vh; /* Full viewport height */
    background-color: #0f172a; /* Slate 900 */
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow-y: auto; /* Allow scrolling if content is too tall */
    transition: all 0.3s ease;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    position: fixed;
    left: 16.666%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 48px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: none;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1050;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
    padding: 0;
}
.sidebar-toggle:hover {
    background: #f1f5f9;
    color: #334155;
}

@media (min-width: 992px) {
    .sidebar-toggle {
        left: 16.666%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sidebar-toggle {
        left: 25%;
    }
}

@media (max-width: 767.98px) {
    .sidebar-toggle {
        display: none;
    }
}

/* Sidebar Collapsed State */
.sidebar-collapsed .sidebar,
.sidebar-collapsed #sidebar {
    display: none !important;
}

.sidebar-collapsed .sidebar-toggle {
    left: 12px;
    transform: translateY(-50%);
}

.sidebar-collapsed main.col-md-9,
.sidebar-collapsed main.col-lg-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
}

.nav-link {
    color: #94a3b8;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    border-right: 3px solid transparent;
}
.nav-link:hover {
    color: white;
    background-color: rgba(255,255,255,0.05);
}
.nav-link.active {
    color: white;
    background-color: rgba(255,255,255,0.1);
    border-right-color: #22c55e; /* Green Accent */
}

.nav-tabs .nav-link:hover {
    color: black;
    background-color: rgba(255,255,255,0.05);
}

/* Stat Cards */
.stat-card {
    transition: transform 0.2s;
}
.stat-card:hover {
    transform: translateY(-5px);
}
.icon-box {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
}

/* Live Feed Pulse Animation */
.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* Make placeholder text lighter */
::placeholder {
    color: #d1d5db !important; /* Lighter gray */
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #d1d5db !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #d1d5db !important;
}
/* Force lighter placeholder for both inputs and textareas */
::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #d1d5db !important; /* Lighter gray */
    opacity: 1; /* Firefox */
}
.btn-outline-primary:hover {
    color:#FFF;
}
.dttop .nav-link:hover{
    color:#000;
}

/* ===== Demo Window Styles ===== */
.demo-window {
    animation: demo-float 6s ease-in-out infinite;
}

@keyframes demo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Smaller pulse dot for Live indicator */
.pulse-dot-sm {
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-animation 2s infinite;
}

.page_content .nav-link:hover {
    color:#000;
}
/* AI Tone Badges */
.ai-tone-btn {
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-tone-btn:hover {
    transform: scale(1.05);
}

.ai-tone-btn.active {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
}

/* Mobile Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1050;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.65rem;
    padding: 6px 0;
    flex: 1;
    transition: color 0.2s;
}

.bottom-nav-item i {
    font-size: 1.15rem;
}

.bottom-nav-item:hover {
    color: #cbd5e1;
    text-decoration: none;
}

.bottom-nav-item.active {
    color: #22c55e;
}

.bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 99px;
    padding: 0 4px;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: 60px;
    }
}

/* Demo Content Responsive */
@media (max-width: 767.98px) {
    .demo-window {
        animation: none;
    }
}

/* ===== Auth Join Bar - Bottom Bar Style ===== */
.auth-join-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    padding: 20px 20px 24px;
}

.auth-join-bar.show {
    transform: translateY(0);
}

.auth-join-bar-content {
    max-width: 800px;
    margin: 0 auto;
}

.auth-join-bar-header {
    text-align: center;
    margin-bottom: 16px;
}

.auth-join-bar-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.auth-join-bar-header p {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.auth-join-bar-options {
    font-size: 0.85rem;
    color: #475569;
    margin: 14px 0;
    text-align: center;
}

.auth-join-bar-options a {
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
}

.auth-join-bar-options a:hover {
    text-decoration: underline;
}

.auth-join-bar-buttons {
    display: flex;
    gap: 10px;
}

.auth-btn-join {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid;
}

.auth-btn-join-google {
    background: white;
    color: #374151;
    border-color: #e5e7eb;
}

.auth-btn-join-google:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.auth-btn-join-facebook {
    background: #1877F2;
    color: white;
    border-color: #1877F2;
}

.auth-btn-join-facebook:hover {
    background: #166fe5;
    color: white;
}

.auth-btn-join-apsense {
    background: linear-gradient(135deg, #FF9900 0%, #FF6600 100%);
    color: white;
    border-color: #FF6600;
}

.auth-btn-join-apsense:hover {
    opacity: 0.9;
    color: white;
}

.auth-btn-join-email {
    background: #0f172a;
    color: white;
    border-color: #0f172a;
}

.auth-btn-join-email:hover {
    background: #1e293b;
    color: white;
}

.auth-btn-join img {
    width: 18px;
    height: 18px;
}

@media (max-width: 575px) {
    .auth-join-bar-buttons {
        flex-direction: column;
    }
}

/* Auth Form Overlay for non-logged-in users */
.auth-form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.4s ease;
}

.auth-form-overlay.show {
    opacity: 1;
    visibility: visible;
}