/*
============================
Name: Hostc- Web Hosting Template
Version: 1.0.0
Description: Hostc- Web Hosting Template
Author: Unifato
Author URI: https://themeforest.net/user/Unifato/portfolio
Location:
============================
*/
/*
CSS LIST
=<::::::::::::::::::::::::::=>
HEADER AREA CSS
=<::::::::::::::::::::::::::=>
NAV MENU AREA CSS
=<::::::::::::::::::::::::::=>
WELCOME AREA CSS
=<::::::::::::::::::::::::::=>
ABOUT AREA CSS
=<::::::::::::::::::::::::::=>
SERVICE AREA CSS
=<::::::::::::::::::::::::::=>
ACCOUNT AREA CSS
=<::::::::::::::::::::::::::=>
FEATURES AREA CSS
=<::::::::::::::::::::::::::=>
BRAND AREA CSS
=<::::::::::::::::::::::::::=>
CHOOSE AREA CSS
=<::::::::::::::::::::::::::=>
PRRELOADER AREA CSS
=<::::::::::::::::::::::::::=>
PRICING AREA CSS
=<::::::::::::::::::::::::::=>
TEAM AREA CSS
=<::::::::::::::::::::::::::=>
TESTIMONIAL AREA CSS
=<::::::::::::::::::::::::::=>
WORK AREA CSS
=<::::::::::::::::::::::::::=>
OTHERS AREA CSS
=<::::::::::::::::::::::::::=>
CONMMON AREA CSS
=<::::::::::::::::::::::::::=>
BLOG AREA CSS
=<::::::::::::::::::::::::::=>
CTA AREA CSS
=<::::::::::::::::::::::::::=>
ANIMATION AREA CSS
=<::::::::::::::::::::::::::=>
BUTTONS AREA CSS
=<::::::::::::::::::::::::::=>
TYPOGRAPHY AREA CSS
=<::::::::::::::::::::::::::=>
FOOTER AREA CSS
=<::::::::::::::::::::::::::=>
*/
/*
::::::::::::::::::::::::::
TYPOGRAPHY AREA CSS
::::::::::::::::::::::::::
*/
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
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;
}
.body1 {
background-color: var(--vtc-bg-white3);
overflow-x: hidden;
}
.body2 {
background-color: var(--vtc-bg-white4);
overflow-x: hidden;
}
.body7 {
background-color: var(--vtc-text-title6);
overflow-x: hidden;
}
.body9 {
background-color: var(--vtc-text-title5);
overflow-x: hidden;
}
.body5 {
background-color: var(--vtc-bg-white8);
overflow-x: hidden;
}
@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;
}
input,
textarea,
select,
option {
max-width: 100%;
}
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) {
.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%;
}
/*
::::::::::::::::::::::::::
fonts area css
::::::::::::::::::::::::::
*/
:root {
--vtc-text-title1: #111111;
--vtc-text-title2: #0061FF;
--vtc-text-title3: #0B1A33;
--vtc-text-title4: #030619;
--vtc-text-title5: #0A0A0A;
--vtc-text-title6: #10161D;
--vtc-text-pera1: #415069;
--vtc-text-pera2: #5D6369;
--vtc-text-white: #fff;
--vtc-text-white80per: rgba(255, 255, 255, 0.8274509804);
--vtc-bg-main1: #FFC106;
--vtc-bg-main2: #0061FF;
--vtc-bg-main3: var(--Home-Page-4-Linner-Color, linear-gradient(90deg, #202CD3 1.1%, #0778F9 100%));
--vtc-bg-main4: var(--Home-Page-4-Linner-Color, linear-gradient(90deg, #0778F9 1.1%, #202CD3 100%));
--vtc-bg-main5: #3A0CA3;
--vtc-bg-main6: #4F26AC;
--vtc-bg-main7: #408BFF;
--vtc-bg-main8: #0011B7;
--vtc-bg-main9: linear-gradient(268deg, rgba(64, 139, 255, 0.1) 0.24%, rgba(10, 24, 161, 0.1) 98.24%);
--vtc-bg-main10: var(--Home-Page-1-Main-Color, linear-gradient(90deg, #F7390D 0%, #FC7327 100%));
--vtc-bg-main11: var(--Home-Page-1-Main-Color, linear-gradient(90deg, #FC7327 0%, #F7390D 100%));
--vtc-bg-main12: #FC7327;
--vtc-bg-main13: linear-gradient(180deg, #558AFF 0%, #3B63FB 100%);
--vtc-bg-main14: #3064FF;
--vtc-bg-main15: #03C343;
--vtc-bg-main16: #1A9CBA;
--vtc-bg-main17: #9D4EDD;
--vtc-bg-main18: #FA450D;
--vtc-bg-common-1: rgba(0, 97, 255, 0.1);
--vtc-bg-common-2: #F4F7FD;
--vtc-bg-common-3: #EDF2FB;
--vtc-bg-common-4: #E5EFFF;
--vtc-bg-common-5: rgba(58, 12, 163, 0.1);
--vtc-bg-common-6: #F5F3FA;
--vtc-bg-common-7: #061164;
--vtc-bg-common-8: #F8FFF5;
--vtc-bg-common-9: #E6F9EC;
--vtc-bg-common-10: #F6F8FA;
--vtc-bg-common-11: #272E34;
--vtc-bg-common-12: #EBDCF8;
--vtc-bg-common-13: #FFE4DC;
--vtc-bg-common-14: #FFECE7;
--vtc-bg-common-15: #F5EDFC;
--vtc-bg-common-16: #EDE7F7;
--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.322);
--vtc-border-1: #DDE1E9;
--vtc-border-2: #DDE0E5;
--vtc-border-3: #E7E7E7;
--vtc-border-4: #CFF4DB;
--vtc-border-5: #FFDBD1;
--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-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;
}
/*
::::::::::::::::::::::::::
COMMON AREA CSS
::::::::::::::::::::::::::
*/
.heading1 span.sub-title {
display: inline-block;
color: var(--vtc-text-title2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px;
background-color: var(--vtc-bg-common-1);
border-radius: 111px;
margin-bottom: 16px;
}
.heading1 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading1 h2 {
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading1 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading1 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading1 h4 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading1 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main1);
}
.heading1 h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-40); /* 122.222% */
}
.heading1 h3 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-36);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 122.222% */
}
.heading1 h3 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading1 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main1);
}
.heading1-w span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px;
background-color: var(--vtc-bg-white10per);
border-radius: 111px;
margin-bottom: 16px;
}
.heading1-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading1-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading1-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading1-w p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading2 span.sub-title {
display: inline-block;
color: var(--vtc-text-title2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 6px 16px;
background-color: var(--vtc-bg-common-1);
border-radius: 8px;
margin-bottom: 16px;
}
.heading2 span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
}
.heading2 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading2 h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading2 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading2 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading2 h4 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading2 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.heading2 h3 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading2 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.heading2-w span.sub-title {
display: inline-block;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-white10per);
padding: 10px 12px 6px 12px;
border-radius: 4px;
margin-bottom: 16px;
}
.heading2-w span.sub-title img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.heading2-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading2-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading2-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading2-w p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading3 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main5);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 6px 16px;
background-color: var(--vtc-bg-common-5);
border-radius: 8px;
margin-bottom: 16px;
}
.heading3 span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
}
.heading3 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading3 h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading3 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading3 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading3 h4 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading3 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main5);
}
.heading3 h3 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading3 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main5);
}
.heading3-w span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 6px 16px;
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
margin-bottom: 16px;
}
.heading3-w span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.heading3-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading3-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading3-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading3-w p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading4 span.sub-title {
display: inline-block;
color: var(--vtc-text-title2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 6px 16px;
background-color: var(--vtc-bg-common-1);
border-radius: 111px;
margin-bottom: 16px;
}
.heading4 span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
}
.heading4 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading4 h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading4 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading4 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading4 h4 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading4 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.heading4 h3 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading4 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.heading4-w span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 6px 16px;
background-color: var(--vtc-bg-white10per);
border-radius: 111px;
margin-bottom: 16px;
}
.heading4-w span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.heading4-w p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading4-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading4-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading4-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading4-w h4 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading4-w h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.heading4-w h3 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading4-w h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.heading5-w span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 10px 16px;
background-color: var(--vtc-bg-white10per);
border-radius: 111px;
margin-bottom: 16px;
}
.heading5-w span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.heading5-w p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading5-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading5-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading5-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading5-w h4 a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading5-w h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main12);
}
.heading5-w h3 a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-30); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading5-w h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main12);
}
.heading6 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main15);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 10px 14px 4px 14px;
background-color: var(--vtc-bg-common-9);
border-radius: 8px;
margin-bottom: 16px;
border: 1px solid var(--vtc-border-4);
}
.heading6 span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
}
.heading6 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading6 h2 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading6 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading6 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading6 h4 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading6 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main15);
}
.heading6 h3 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading6 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main15);
}
.heading7-w span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: capitalize;
padding: 10px 14px 6px 10px;
border-radius: 4px;
margin-bottom: 16px;
}
.heading7-w span.sub-title img {
margin-right: 2px;
transform: translateY(-2px);
filter: brightness(0) invert(1);
}
.heading7-w p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading7-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading7-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading7-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading7-w h4 a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading7-w h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main16);
}
.heading7-w h3 a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading7-w h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main16);
}
.heading8 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main17);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 11px 14px 6px 14px;
background-color: var(--vtc-bg-common-12);
border-radius: 111px;
margin-bottom: 16px;
}
.heading8 span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
}
.heading8 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading8 h2 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading8 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading8 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading8 h4 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading8 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main17);
}
.heading8 h3 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading8 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main17);
}
.heading10 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main18);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding: 9px 16px 7px 14px;
border-radius: 111px;
margin-bottom: 16px;
background-color: var(--vtc-bg-common-14);
border: 1px solid var(--vtc-border-5);
}
.heading10 span.sub-title img {
margin-right: 2px;
transform: translateY(-1px);
}
.heading10 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading10 h2 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading10 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading10 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading10 h4 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading10 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18);
}
.heading10 h3 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading10 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18);
}
.heading9-w span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
padding: 11px 14px 7px 16px;
background-color: var(--vtc-bg-white10per);
border-radius: 111px;
margin-bottom: 16px;
}
.heading9-w span.sub-title img {
transform: translateY(-3px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.heading9-w p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading9-w h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading9-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading9-w h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading9-w h4 a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading9-w h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main12);
}
.heading9-w h3 a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-30); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading9-w h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main12);
}
.heading9 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main18);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding: 9px 16px 7px 14px;
border-radius: 111px;
margin-bottom: 16px;
background-color: var(--vtc-bg-common-14);
border: 1px solid var(--vtc-border-5);
}
.heading9 span.sub-title img {
margin-right: 2px;
transform: translateY(-1px);
}
.heading9 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
}
.heading9 h2 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-52); /* 118.182% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.heading9 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
@media (max-width: 767px) {
.heading9 h2 {
font-size: var(--f-fs-font-32);
line-height: var(--f-fs-font-40);
}
}
.heading9 h4 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading9 h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18);
}
.heading9 h3 a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-28); /* 140% */
transition: all 0.4s;
display: inline-block;
}
.heading9 h3 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18);
}
/*============================
++++PAGE-PROGRESS-SATRT+++++
=============================*/
/*============================
++++PAGE-PROGRESS-END+++++
=============================*/
.progress-wrap.progress-wrap2 {
position: fixed;
right: 30px;
bottom: 30px;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.267);
z-index: 1;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 200ms linear;
}
.progress-wrap.progress-wrap2.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 99;
color: rgb(255, 255, 255);
}
.progress-wrap.progress-wrap2::after {
position: absolute;
font-family: "FontAwesome";
content: "\f062";
text-align: center;
line-height: 56px;
font-size: 18px;
color: #f7f7f7;
left: 0;
top: 0;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
z-index: 1;
transition: all 200ms linear;
}
.progress-wrap.progress-wrap2:hover::after {
opacity: 0;
}
.progress-wrap.progress-wrap2::before {
position: absolute;
font-family: "FontAwesome";
content: "\f062";
text-align: center;
line-height: 56px;
font-size: 18px;
opacity: 0;
left: 0;
top: 0;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
z-index: 2;
transition: all 200ms linear;
}
.progress-wrap.progress-wrap2:hover::before {
opacity: 1;
}
.progress-wrap.progress-wrap2 svg path {
fill: none;
}
.progress-wrap.progress-wrap2 svg.progress-circle path {
stroke: #ffffff; /* --- Lijn progres kleur --- */
stroke-width: 4;
box-sizing: border-box;
transition: all 200ms linear;
}
/* video button */
.video-buttton4 {
padding-left: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
@media (max-width: 767px) {
.video-buttton4 {
padding-left: 0;
padding-top: 20px;
}
}
.video-buttton4 p {
color: var(--vtc-text-white) !important;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 100% */
margin-right: 0 !important;
margin-top: -14px;
}
.video-buttton4 .video-play-button {
position: relative;
z-index: 10;
margin: 0px 10px;
box-sizing: content-box;
display: flex;
align-items: center;
width: 32px;
height: 44px;
border-radius: 50%;
padding: 18px 20px 18px 28px;
}
@media (max-width: 767px) {
.video-buttton4 .video-play-button {
margin: 0px 30px 0px 0px;
}
}
.video-buttton4 .video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 50px;
height: 50px;
background: var(--vtc-bg-white20per);
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0.4;
}
.video-buttton4 .video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 45px;
height: 45px;
background: var(--vtc-bg-white20per);
border-radius: 50%;
transition: all 200ms;
}
.video-buttton4 .video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-buttton4 .video-play-button span {
display: block;
position: relative;
z-index: 3;
margin-top: 0;
margin-left: 7px;
width: 0;
height: 0;
border-left: 13px solid var(--vtc-text-white);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
.details-video {
padding-left: 30px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -80px;
}
@media (max-width: 767px) {
.details-video {
padding-left: 0;
padding-top: 20px;
}
}
.details-video .video-play-button {
position: relative;
z-index: 10;
margin: 0px 10px;
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
border-radius: 50%;
padding: 18px 20px 18px 28px;
}
@media (max-width: 767px) {
.details-video .video-play-button {
margin: 0px 30px 0px 0px;
}
}
.details-video .video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 70px;
height: 70px;
background: var(--vtc-bg-main1);
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0.4;
}
.details-video .video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 55px;
height: 55px;
background: var(--vtc-bg-main1);
border-radius: 50%;
transition: all 200ms;
}
.details-video .video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.details-video .video-play-button span {
display: block;
position: relative;
z-index: 3;
margin-top: 14px;
margin-left: 7px;
width: 0;
height: 0;
border-left: 13px solid var(--vtc-text-sub-title-1);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
.video-buttton5 {
padding-left: 10px;
cursor: pointer;
}
@media (max-width: 767px) {
.video-buttton5 {
padding-left: 0;
padding-top: 20px;
}
}
.video-buttton5 p {
color: var(--vtc-bg-white1) !important;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 100% */
margin-right: 0 !important;
}
.video-buttton5 .video-play-button {
position: relative;
z-index: 10;
margin: 0px 10px;
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
border-radius: 50%;
padding: 18px 20px 18px 28px;
}
@media (max-width: 767px) {
.video-buttton5 .video-play-button {
margin: 0px 30px 0px 0px;
}
}
.video-buttton5 .video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 50px;
height: 50px;
background: var(--vtc-bg-white1);
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0.4;
}
.video-buttton5 .video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 45px;
height: 45px;
background: var(--vtc-bg-white1);
border-radius: 50%;
transition: all 200ms;
}
.video-buttton5 .video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-buttton5 .video-play-button span {
display: block;
position: relative;
z-index: 3;
margin-top: 14px;
margin-left: 7px;
width: 0;
height: 0;
border-left: 13px solid var(--vtc-text-title-8);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
.video-area1 .video-button {
position: absolute;
top: 50%;
left: 50%;
cursor: pointer;
margin-top: -45px;
margin-left: -60px;
}
.video-area1 .video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.4117647059);
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
}
.video-area1 .video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
transition: all 200ms;
}
.video-area1 .video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
margin-top: 5px;
}
.video-area1 .video-play-button span {
display: block;
position: relative;
z-index: 3;
margin-top: 13px;
margin-left: 7px;
width: 0;
height: 0;
border-radius: 4px;
border-left: 15px solid #4A43DD;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
/*Pagination*/
.theme-pagination ul {
margin: 0;
padding: 0;
list-style: none;
}
.theme-pagination li {
display: inline-block;
background: none;
}
.theme-pagination li a {
width: 55px;
height: 55px;
text-align: center;
line-height: 55px;
background-color: var(--vtc-bg-common-2);
margin: 0 4px;
transition: all 0.3s;
display: block;
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-semibold);
border-radius: 8px;
position: relative;
}
.recent-post-content {
padding-right: 20px;
}
.theme-pagination li a:hover, .theme-pagination li a.active {
background: var(--vtc-bg-main1);
transition: all 0.3s;
color: var(--vtc-text-title1);
}
/*
::::::::::::::::::::::::::
COMMON AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BUTTONS AREA CSS
::::::::::::::::::::::::::
*/
.theme-btn1 {
color: var(--vtc-text-title1);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 18px 22px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.theme-btn1 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.theme-btn1:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.theme-btn1:hover span, .theme-btn1:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active1 {
color: var(--vtc-text-title1);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
text-transform: uppercase;
}
.btn_theme_active1 span {
background: var(--vtc-text-title1);
}
.btn_theme_active1::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main1);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active1:hover, .btn_theme_active1:focus {
color: #fff;
}
.btn_theme_active1:hover, .btn_theme_active1:focus {
color: #fff;
}
.theme-btn2 {
color: var(--vtc-text-title1);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
margin-left: 10px;
}
@media (max-width: 767px) {
.theme-btn2 {
margin-left: 0;
margin-top: 16px;
margin-right: 30px;
}
}
.theme-btn2 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.theme-btn2:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.theme-btn2:hover span, .theme-btn2:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active2 {
color: var(--vtc-text-title1);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
text-transform: uppercase;
}
.btn_theme_active2 span {
background: var(--vtc-text-title1);
}
.btn_theme_active2::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-white);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active2:hover, .btn_theme_active2:focus {
color: #fff;
}
.btn_theme_active2:hover, .btn_theme_active2:focus {
color: #fff;
}
.learn_btn1 {
color: var(--vtc-text-title1);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 14px 20px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.learn_btn1 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.learn_btn1:hover {
transition: all 0.6s;
}
.learn_btn1:hover span, .learn_btn1:focus span {
width: 225%;
height: 220px;
}
.learn1_active1 {
color: var(--vtc-text-title1);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
text-transform: uppercase;
}
.learn1_active1 span {
background: var(--vtc-text-title1);
}
.learn1_active1::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main1);
z-index: -3;
border-radius: 9px;
}
.learn1_active1:hover, .btn_theme_active1:focus {
color: #fff;
}
.learn1_active1:hover, .btn_theme_active1:focus {
color: #fff;
}
.learn_btn2 {
color: var(--vtc-text-title1);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 15px 20px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.learn_btn2 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.learn_btn2:hover {
transition: all 0.6s;
}
.learn_btn2:hover span, .learn_btn2:focus span {
width: 225%;
height: 220px;
}
.learn2_active2 {
color: var(--vtc-text-title1);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
text-transform: uppercase;
}
.learn2_active2 span {
background: var(--vtc-bg-main1);
}
.learn2_active2::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-common-4);
z-index: -3;
border-radius: 9px;
}
.learn2_active2:hover {
color: var(--vtc-text-title1);
}
.btn_theme3 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 8px;
border: none;
}
.btn_theme3 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme3:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.btn_theme3:hover span, .btn_theme3:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active3 {
color: var(--vtc-bg-main2);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active3 span {
background-color: #fff;
background: var(--vtc-bg-main3);
}
.btn_theme_active3::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-white);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active3:hover, .btn_theme_active3:focus {
color: #fff;
}
.btn_theme_active3:hover, .btn_theme_active3:focus {
color: #fff;
}
.btn_theme4 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 16px 24px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme4 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme4:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.btn_theme4:hover span, .btn_theme4:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active4 {
color: var(--vtc-text-white);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active4 span {
background-color: #fff;
background: var(--vtc-bg-white);
}
.btn_theme_active4::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main3);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active4:hover, .btn_theme_active4:focus {
color: var(--vtc-text-title2);
}
.btn_theme_active4:hover, .btn_theme_active4:focus {
color: var(--vtc-text-title2);
}
.btn_theme5 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: capitalize;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 8px;
border: none;
}
.btn_theme5 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme5:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.btn_theme5:hover span, .btn_theme5:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active5 {
color: var(--vtc-text-white);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active5 span {
background-color: #fff;
background: var(--vtc-bg-main4);
}
.btn_theme_active5::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main3);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active5:hover, .btn_theme_active5:focus {
color: var(--vtc-text-white);
}
.btn_theme_active5:hover, .btn_theme_active5:focus {
color: var(--vtc-bg-white);
}
.theme-btn4 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-title1);
font-size: 16px;
font-style: normal;
border-radius: 8px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn4::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-common-5);
border-radius: 50%;
transition: all 0.4s;
}
.theme-btn4 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn4 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn4 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn4:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn4:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn4:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main6);
color: #fff;
transform: translateY(-5px);
}
.theme-btn4:hover span {
transition: all 0.4s;
}
.theme-btn4:hover::after {
background-color: var(--vtc-bg-white20per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn5 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 8px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main5);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn5::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white10per);
border-radius: 50%;
transition: all 0.4s;
}
.theme-btn5 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn5 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn5 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn5:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn5:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn5:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main6);
color: #fff;
transform: translateY(-5px);
}
.theme-btn5:hover span {
transition: all 0.4s;
}
.theme-btn5:hover::after {
background-color: var(--vtc-bg-white20per);
opacity: 0.3;
transition: all 0.4s;
}
.btn_theme6 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 16px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme6 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme6:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.btn_theme6:hover span, .btn_theme6:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active6 {
color: var(--vtc-text-title3);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active6 span {
background-color: #fff;
background: var(--vtc-bg-main3);
}
.btn_theme_active6::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-white);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active6:hover, .btn_theme_active6:focus {
color: #fff;
}
.btn_theme_active6:hover, .btn_theme_active6:focus {
color: #fff;
}
.btn_theme7 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme7 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme7:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.btn_theme7:hover span, .btn_theme7:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active7 {
color: var(--vtc-text-title3);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active7 span {
background-color: #fff;
background: var(--vtc-bg-main3);
}
.btn_theme_active7::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-white);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active7:hover, .btn_theme_active7:focus {
color: #fff;
}
.btn_theme_active7:hover, .btn_theme_active7:focus {
color: #fff;
}
.btn_theme8 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme8 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme8:hover {
transform: translateY(-5px);
transition: all 0.6s;
}
.btn_theme8:hover span, .btn_theme8:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active8 {
color: var(--vtc-text-white);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active8 span {
background-color: var(--vtc-text-white);
background: var(--vtc-bg-main3);
}
.btn_theme_active8::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main4);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active8:hover, .btn_theme_active8:focus {
color: var(--vtc-text-white);
}
.btn_theme_active8:hover, .btn_theme_active8:focus {
color: var(--vtc-text-white);
}
.btn_theme9 {
color: var(--vtc-text-title4);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 16px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme9 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme9:hover {
transition: all 0.6s;
}
.btn_theme9:hover span, .btn_theme9:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active9 {
color: var(--vtc-text-title4);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active9 span {
background-color: var(--vtc-text-white);
background: var(--vtc-bg-main3);
}
.btn_theme_active9::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main9);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active9:hover, .btn_theme_active9:focus {
color: var(--vtc-text-white);
}
.btn_theme_active9:hover, .btn_theme_active9:focus {
color: var(--vtc-text-white);
}
.btn_theme10 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme10:hover {
transition: all 0.4s;
transform: translateY(-5px);
}
.btn_theme10 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme10:hover {
transition: all 0.6s;
}
.btn_theme10:hover span, .btn_theme10:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active10 {
color: var(--vtc-text-white);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active10 span {
background-color: var(--vtc-text-white);
background: var(--vtc-bg-main11);
}
.btn_theme_active10::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main10);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active10:hover, .btn_theme_active10:focus {
color: var(--vtc-text-white);
}
.btn_theme_active10:hover, .btn_theme_active10:focus {
color: var(--vtc-text-white);
}
.btn_theme11 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 19px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme11:hover {
transition: all 0.4s;
transform: translateY(-5px);
}
.btn_theme11 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme11:hover {
transition: all 0.6s;
}
.btn_theme11:hover span, .btn_theme11:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active11 {
color: var(--vtc-text-title4);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active11 span {
background-color: var(--vtc-text-white);
background: var(--vtc-bg-main11);
}
.btn_theme_active11::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-white);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active11:hover, .btn_theme_active11:focus {
color: var(--vtc-text-white);
}
.btn_theme_active11:hover, .btn_theme_active11:focus {
color: var(--vtc-text-white);
}
.btn_theme12 {
color: var(--vtc-text-white);
background: transparent;
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 16px 24px;
text-transform: uppercase;
min-width: -moz-max-content;
min-width: max-content;
transition: all 0.65s ease-in-out;
position: relative;
z-index: 4;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border-radius: 111px;
border: none;
}
.btn_theme12:hover {
transition: all 0.4s;
transform: translateY(-5px);
}
.btn_theme12 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
transition: width 0.6s ease-in-out, height 0.6s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn_theme12:hover {
transition: all 0.6s;
}
.btn_theme12:hover span, .btn_theme12:focus span {
width: 225%;
height: 220px;
}
.btn_theme_active12 {
color: var(--vtc-text-white);
position: relative;
z-index: 0;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
}
.btn_theme_active12 span {
background-color: var(--vtc-text-white);
background: var(--vtc-bg-main11);
}
.btn_theme_active12::after {
content: "";
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: var(--vtc-bg-main10);
z-index: -3;
border-radius: 9px;
}
.btn_theme_active12:hover, .btn_theme_active12:focus {
color: var(--vtc-text-white);
}
.btn_theme_active12:hover, .btn_theme_active12:focus {
color: var(--vtc-text-white);
}
.theme-btn13 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 8px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main15);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn13::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white10per);
border-radius: 50%;
transition: all 0.4s;
}
.theme-btn13::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title5);
border-radius: 8px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn13 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn13 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn13 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn13:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn13:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn13:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn13:hover span {
transition: all 0.4s;
}
.theme-btn13:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn13:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn14 {
display: inline-block;
padding: 18px 10px 18px 22px;
color: var(--vtc-bg-main15);
font-size: 16px;
font-style: normal;
border-radius: 8px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: transparent;
border: 1px solid var(--vtc-bg-main15);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn14::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white10per);
border-radius: 50%;
transition: all 0.4s;
}
.theme-btn14::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title5);
border-radius: 8px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn14 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn14 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn14 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn14:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn14:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn14:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
border: 1px solid var(--vtc-text-title5);
}
.theme-btn14:hover span {
transition: all 0.4s;
}
.theme-btn14:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn14:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn15 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-title1);
font-size: 16px;
font-style: normal;
border-radius: 8px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn15::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-main15);
border-radius: 50%;
transition: all 0.4s;
opacity: 0.2;
}
.theme-btn15::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title5);
border-radius: 8px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn15 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn15 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn15 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn15:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn15:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn15:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn15:hover span {
transition: all 0.4s;
}
.theme-btn15:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn15:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn16 {
display: inline-block;
padding: 16px 20px 16px 20px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 8px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main15);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
}
.theme-btn16::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white10per);
border-radius: 50%;
transition: all 0.4s;
}
.theme-btn16::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title5);
border-radius: 8px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn16 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn16 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn16 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn16:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn16:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn16:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn16:hover span {
transition: all 0.4s;
}
.theme-btn16:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn16:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn17 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main16);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn17::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-common-11);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn17 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn17 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn17 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn17:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn17:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn17:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn17:hover span {
transition: all 0.4s;
}
.theme-btn17:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn17:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn18 {
display: inline-block;
padding: 18px 10px 18px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: transparent;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border: 1px solid var(--vtc-bg-white);
}
.theme-btn18::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-main16);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn18 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn18 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn18 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn18:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn18:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn18:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
border: 1px solid var(--vtc-bg-main16);
}
.theme-btn18:hover span {
transition: all 0.4s;
}
.theme-btn18:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn18:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn19 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-bg-main16);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn19::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn19 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn19 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn19 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn19:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn19:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn19:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn19:hover span {
transition: all 0.4s;
}
.theme-btn19:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn19:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn20 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main17);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn20::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn20 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn20 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn20 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn20:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn20:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn20:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn20:hover span {
transition: all 0.4s;
}
.theme-btn20:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn20:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn21 {
display: inline-block;
padding: 18px 10px 18px 22px;
color: var(--vtc-text-title6);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: transparent;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border: 1px solid var(--vtc-text-title6);
}
.theme-btn21::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn21 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn21 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn21 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn21:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn21:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn21:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn21:hover span {
transition: all 0.4s;
}
.theme-btn21:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn21:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn22 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-bg-main17);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: var(--vtc-bg-white);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn22::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn22 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn22 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn22 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn22:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn22:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn22:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn22:hover span {
transition: all 0.4s;
}
.theme-btn22:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn22:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn23 {
display: inline-block;
padding: 16px 22px 16px 22px;
color: var(--vtc-bg-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: var(--vtc-bg-main17);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn23::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn23 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn23 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn23 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn23:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn23:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn23:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn23:hover span {
transition: all 0.4s;
}
.theme-btn23:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn23:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn24 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main18);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn24::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn24 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn24 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn24 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn24:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn24:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn24:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn24:hover span {
transition: all 0.4s;
}
.theme-btn24:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn24:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn25 {
display: inline-block;
padding: 18px 10px 18px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: transparent;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border: 1px solid var(--vtc-text-white);
}
.theme-btn25::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-main18);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn25 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn25 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn25 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn25:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn25:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn25:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
border: 1px solid var(--vtc-bg-main18);
}
.theme-btn25:hover span {
transition: all 0.4s;
}
.theme-btn25:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn25:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn26 {
display: inline-block;
padding: 16px 22px 16px 22px;
color: var(--vtc-bg-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: var(--vtc-bg-main18);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn26::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn26 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn26 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn26 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn26:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn26:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn26:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn26:hover span {
transition: all 0.4s;
}
.theme-btn26:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn26:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn27 {
display: inline-block;
padding: 18px 10px 18px 22px;
color: var(--vtc-bg-main18);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: transparent;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border: 1px solid var(--vtc-bg-main18);
}
.theme-btn27::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-main18);
border-radius: 50%;
transition: all 0.4s;
opacity: 0.2;
}
.theme-btn27::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-main18);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn27 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn27 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn27 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn27:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn27:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn27:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
border: 1px solid var(--vtc-bg-main18);
}
.theme-btn27:hover span {
transition: all 0.4s;
}
.theme-btn27:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn27:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn28 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main18);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn28::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white);
border-radius: 50%;
transition: all 0.4s;
opacity: 0.2;
}
.theme-btn28::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn28 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn28 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn28 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn28:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn28:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn28:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn28:hover span {
transition: all 0.4s;
}
.theme-btn28:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn28:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn29 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-bg-main18);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn29::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-main18);
border-radius: 50%;
transition: all 0.4s;
opacity: 0.1;
}
.theme-btn29::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn29 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn29 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn29 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn29:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn29:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn29:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn29:hover::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white);
border-radius: 50%;
transition: all 0.4s;
opacity: 0.1;
}
.theme-btn29:hover span {
transition: all 0.4s;
}
.theme-btn29:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn29:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn30 {
display: inline-block;
padding: 17px 10px 17px 21px;
color: var(--vtc-text-title6);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: transparent;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border: 1px solid var(--vtc-text-title6);
}
.theme-btn30::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-main18);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn30 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn30 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn30 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn30:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn30:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn30:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
border: 1px solid var(--vtc-bg-main18);
}
.theme-btn30:hover span {
transition: all 0.4s;
}
.theme-btn30:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn30:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn31 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main16);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
width: 100%;
}
.theme-btn31::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-white);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn31 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn31 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn31 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn31:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn31:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn31:hover {
transition: all 0.4s;
color: var(--vtc-bg-main16);
transform: translateY(-5px);
}
.theme-btn31:hover span {
transition: all 0.4s;
}
.theme-btn31:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn31:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn32 {
display: inline-block;
padding: 17px 10px 17px 21px;
color: var(--vtc-text-title6);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background: transparent;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
border: 1px solid var(--vtc-text-title6);
}
.theme-btn32::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-bg-main17);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn32 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn32 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn32 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn32:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn32:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn32:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
border: 1px solid var(--vtc-bg-main17);
}
.theme-btn32:hover span {
transition: all 0.4s;
}
.theme-btn32:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn32:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn33 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main2);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn33::after {
content: "";
position: absolute;
left: 10px;
top: 8px;
height: 40px;
width: 40px;
background-color: var(--vtc-bg-white);
border-radius: 50%;
transition: all 0.4s;
opacity: 0.2;
}
.theme-btn33::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn33 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn33 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn33 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn33:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn33:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn33:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn33:hover span {
transition: all 0.4s;
}
.theme-btn33:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn33:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.theme-btn34 {
display: inline-block;
padding: 19px 10px 19px 22px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
border-radius: 111px;
position: relative;
z-index: 2;
border: none;
overflow: hidden;
background-color: var(--vtc-bg-main2);
transition: all 0.4s;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.theme-btn34::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vtc-text-title6);
border-radius: 111px;
transform: scaleX(0);
transform-origin: 50% 100%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.theme-btn34 span {
display: inline-block;
transform: rotate(-45deg) translateX(0px) translateY(1px);
font-size: 17px;
transition: all 0.4s;
}
.theme-btn34 .arrow2 {
transform: translateY(-8px) rotate(-45deg) translateX(-52px);
transition: all 0.4s;
opacity: 0;
}
.theme-btn34 .arrow1 {
transition: all 0.4s;
opacity: 1;
}
.theme-btn34:hover .arrow2 {
transform: translateY(-12px) rotate(-45deg) translateX(-18px);
transition: all 0.4s;
opacity: 1;
}
.theme-btn34:hover .arrow1 {
transition: all 0.4s;
transform: translateY(-7px) rotate(-45deg) translateX(45px);
opacity: 0;
}
.theme-btn34:hover {
transition: all 0.4s;
color: var(--vtc-text-white);
transform: translateY(-5px);
}
.theme-btn34:hover span {
transition: all 0.4s;
}
.theme-btn34:hover::after {
background-color: var(--vtc-bg-white30per);
opacity: 0.3;
transition: all 0.4s;
}
.theme-btn34:hover::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
/*
::::::::::::::::::::::::::
BUTOTNS AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
CTA AREA CSS
::::::::::::::::::::::::::
*/
.cta1 .cta1-form-area form {
margin-top: 30px;
}
.cta1 .cta1-form-area form input {
padding: 20px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.cta1 .cta1-form-area form input:focus {
outline: none;
}
.cta1 .cta1-form-area form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.cta1 .cta1-form-area form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.cta1 .cta1-form-area form .button {
position: absolute;
top: 5px;
right: 5px;
}
.cta1 .bg-area {
border-radius: 16px;
position: relative;
}
.cta1 .bg-area .heading1-w {
padding: 60px 0px 60px 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cta1 .bg-area .heading1-w {
padding: 30px;
}
}
@media (max-width: 767px) {
.cta1 .bg-area .heading1-w {
padding: 30px;
}
}
.cta1 .cta1-boxs-area {
height: 350px;
}
@media (max-width: 767px) {
.cta1 .cta1-boxs-area {
height: 550px;
}
}
.cta1 .cta1-boxs-area .cta1-box {
height: 270px;
width: 270px;
border-radius: 50%;
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.cta1 .cta1-boxs-area .cta1-box p {
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 6px 10px;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
}
.cta1 .cta1-boxs-area .cta1-box h3 {
color: var(--Home-Page-2-Main-Color, #FFC106);
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 107.143% */
padding: 16px 0px;
}
.cta1 .cta1-boxs-area .cta1-box.box1 {
position: absolute;
left: 120px;
top: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cta1 .cta1-boxs-area .cta1-box.box1 {
left: 60px;
}
}
@media (max-width: 767px) {
.cta1 .cta1-boxs-area .cta1-box.box1 {
left: 60px;
}
}
.cta1 .cta1-boxs-area .cta1-box.box2 {
position: absolute;
right: 60px;
bottom: -15px;
}
@media (max-width: 767px) {
.cta1 .cta1-boxs-area .cta1-box.box2 {
bottom: 15px;
}
}
.cta2 {
margin-bottom: -160px;
position: relative;
z-index: 2;
}
.cta2 .bg-area {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
overflow: hidden;
}
.cta2 .bg-area .cta2-form-area {
position: relative;
margin-top: 32px;
margin-right: 80px;
}
.cta2 .bg-area .cta2-form-area input {
padding: 21px;
border-radius: 8px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.cta2 .bg-area .cta2-form-area input:focus {
outline: none;
}
.cta2 .bg-area .cta2-form-area input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.cta2 .bg-area .cta2-form-area input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.cta2 .bg-area .cta2-form-area .button {
position: absolute;
top: 5px;
right: 5px;
}
.cta2 .bg-area .heading1-w {
padding: 60px;
}
.cta2 .cta2-images {
text-align: end;
margin-right: 120px;
position: relative;
}
.cta2 .cta2-images .image {
margin-top: 20px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.cta2 .cta2-images .shape {
position: absolute;
top: 0;
right: -30px;
}
.cta3-form-area {
position: relative;
margin-top: 30px;
margin-right: 30px;
}
.cta3-form-area input {
width: 100%;
border-radius: 8px;
border: none;
padding: 21px;
}
.cta3-form-area input:focus {
outline: none;
}
.cta3-form-area input::-moz-placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.cta3-form-area input::placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.cta3-form-area .button {
position: absolute;
top: 5px;
right: 5px;
}
.cta4 {
margin-bottom: -160px;
position: relative;
z-index: 2;
}
.cta4 .bg-area {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
overflow: hidden;
}
.cta4 .bg-area .cta4-form-area {
position: relative;
margin-top: 32px;
margin-right: 80px;
}
@media (max-width: 767px) {
.cta4 .bg-area .cta4-form-area {
margin-right: 0;
}
}
.cta4 .bg-area .cta4-form-area input {
padding: 21px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.cta4 .bg-area .cta4-form-area input:focus {
outline: none;
}
.cta4 .bg-area .cta4-form-area input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.cta4 .bg-area .cta4-form-area input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.cta4 .bg-area .cta4-form-area .button {
position: absolute;
top: 5px;
right: 5px;
}
.cta4 .bg-area .heading1-w {
padding: 60px;
}
@media (max-width: 767px) {
.cta4 .bg-area .heading1-w {
padding: 30px;
}
}
.cta4 .cta4-images {
text-align: end;
margin-right: 120px;
position: relative;
}
@media (max-width: 767px) {
.cta4 .cta4-images {
margin-right: 30px;
margin-left: 10px;
}
}
.cta4 .cta4-images .image {
margin-top: 20px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.cta4 .cta4-images .shape {
position: absolute;
top: 0;
right: -30px;
}
.cta5 .bg-area {
background: var(--vtc-bg-main13);
padding: 60px;
border-radius: 16px;
position: relative;
}
@media (max-width: 767px) {
.cta5 .bg-area {
padding: 24px;
}
}
.cta5 .cta5-images {
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cta5 .cta5-images {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.cta5 .cta5-images {
margin-top: 40px;
}
}
.cta5 .cta5-images .shape {
position: absolute;
bottom: 0;
right: 100px;
}
.cta5 .cta5-images .image {
margin-right: 100px;
position: relative;
z-index: 3;
}
.cta6 {
background-color: var(--vtc-bg-main15);
}
.cta6-iamges {
height: 390px;
position: relative;
text-align: end;
z-index: 2;
}
.cta6-iamges .bg-shape {
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.cta6-iamges .image {
position: absolute;
bottom: 0;
right: 0;
}
.cta7 {
padding: 60px 0px;
background-color: var(--vtc-bg-main16);
position: relative;
overflow: hidden;
z-index: 2;
}
.cta7 .shape {
position: absolute;
top: 0;
left: 50%;
margin-left: -235px;
z-index: -1;
}
.cta8 {
background-color: var(--vtc-bg-main17);
position: relative;
}
.cta8-iamges {
height: 350px;
position: relative;
text-align: end;
z-index: 2;
padding-bottom: 20px;
}
.cta8-iamges .bg-shape {
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.cta8-iamges .image {
position: absolute;
bottom: 0;
right: 0;
}
.cta10 {
padding: 60px 0px;
background-color: var(--vtc-bg-main18);
position: relative;
overflow: hidden;
z-index: 2;
}
.cta10 .shape {
position: absolute;
top: 0;
left: 50%;
margin-left: -235px;
z-index: -1;
}
/*
::::::::::::::::::::::::::
CTA AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HERO AREA CSS
::::::::::::::::::::::::::
*/
.hero1 {
min-height: 890px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.hero1 .images {
position: relative;
height: 570px;
margin-left: 50px;
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero1 .images {
margin-left: 0;
margin-top: 40px;
}
}
@media (max-width: 767px) {
.hero1 .images {
margin-left: 0;
margin-top: 40px;
}
}
.hero1 .shape1 {
position: absolute;
top: 0;
left: 0;
}
.hero1 .shape2 {
position: absolute;
top: 0;
right: 0;
}
.hero1 .shape3 {
position: absolute;
bottom: 0;
left: 300px;
}
.hero1 .shape4 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero1 .shape4 {
display: none;
}
}
@media (max-width: 767px) {
.hero1 .shape4 {
display: none;
}
}
.hero1 .shape5 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero1 .shape5 {
display: none;
}
}
@media (max-width: 767px) {
.hero1 .shape5 {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading1 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading1 {
padding-top: 100px;
}
}
.main-heading1 span.sub-title {
display: inline-block;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-white10per);
padding: 10px 16px;
border-radius: 111px;
margin-bottom: 16px;
}
.main-heading1 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-56);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-60); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading1 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading1 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading1 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.hero2 {
min-height: 950px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.hero2 .images {
position: relative;
height: 570px;
margin-left: 120px;
text-align: end;
margin-right: -90px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero2 .images {
margin-left: 0;
margin-top: 40px;
text-align: start;
}
}
@media (max-width: 767px) {
.hero2 .images {
margin-left: 0;
margin-top: 40px;
text-align: start;
margin-right: 0;
margin-top: 80px;
}
}
.hero2 .shape1 {
position: absolute;
top: 0;
left: 0;
}
.hero2 .shape2 {
position: absolute;
top: 0;
right: 0;
}
.hero2 .shape3 {
position: absolute;
bottom: 0;
left: 300px;
}
.hero2 .shape4 {
position: absolute;
bottom: 100px;
right: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero2 .shape4 {
display: none;
}
}
@media (max-width: 767px) {
.hero2 .shape4 {
display: none;
}
}
.hero2 .shape5 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero2 .shape5 {
display: none;
}
}
@media (max-width: 767px) {
.hero2 .shape5 {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading2 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading2 {
padding-top: 100px;
}
}
.main-heading2 span.sub-title {
display: inline-block;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-white10per);
padding: 10px 12px 6px 12px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading2 span.sub-title img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.main-heading2 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-56);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-60); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading2 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading2 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading2 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.main-heading2 .hero2-form-area {
margin-top: 30px;
position: relative;
}
.main-heading2 .hero2-form-area input {
padding: 18px;
border-radius: 8px;
width: 100%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
}
.main-heading2 .hero2-form-area input::-moz-placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.main-heading2 .hero2-form-area input::placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.main-heading2 .hero2-form-area input:focus {
outline: none;
}
.main-heading2 .hero2-form-area .button {
position: absolute;
top: 5px;
right: 4px;
}
.main-heading2 .hero2-form-area .select-form {
position: absolute;
top: 12px;
right: 120px;
}
.main-heading2 .hero2-form-area .select-form .nice-select {
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 8px;
color: var(--vtc-text-white);
}
.main-heading2 .hero2-form-area .select-form .nice-select .list {
background: var(--vtc-bg-main2);
}
.main-heading2 .hero2-form-area .select-form .nice-select .option {
background: var(--vtc-bg-main2);
}
.main-heading2 .hero2-form-area .select-form .nice-select:after {
border-bottom: 2px solid var(--vtc-text-white);
border-right: 2px solid var(--vtc-text-white);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.hero3 {
min-height: 780px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
padding-top: 120px;
}
.hero3 .buttons {
display: flex;
align-items: center;
}
.hero3 .images {
position: relative;
height: 500px;
margin-left: 120px;
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero3 .images {
margin-left: 0;
margin-top: 40px;
}
}
@media (max-width: 767px) {
.hero3 .images {
margin-left: 0;
margin-top: 40px;
}
}
.hero3 .bg-shape {
position: absolute;
top: -30px;
right: 0;
z-index: -1;
}
.hero3 .shape1 {
position: absolute;
top: 0;
left: 0;
}
.hero3 .shape2 {
position: absolute;
top: 0;
right: 0;
}
.hero3 .shape3 {
position: absolute;
bottom: 0;
left: 300px;
}
.hero3 .shape4 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero3 .shape4 {
display: none;
}
}
@media (max-width: 767px) {
.hero3 .shape4 {
display: none;
}
}
.hero3 .shape5 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero3 .shape5 {
display: none;
}
}
@media (max-width: 767px) {
.hero3 .shape5 {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading3 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading3 {
padding-top: 100px;
}
}
.main-heading3 span.sub-title {
display: inline-block;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-white10per);
padding: 10px 12px 6px 12px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading3 span.sub-title img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.main-heading3 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-56);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-60); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading3 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading3 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading3 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.hero4 {
min-height: 780px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
padding-top: 120px;
}
.hero4 .buttons {
display: flex;
align-items: center;
}
.hero4 .images {
position: relative;
height: 500px;
margin-left: 120px;
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero4 .images {
margin-left: 0;
margin-top: 40px;
}
}
@media (max-width: 767px) {
.hero4 .images {
margin-left: 0;
margin-top: 40px;
}
}
.hero4 .hero4-select-list {
margin-top: 20px;
}
.hero4 .hero4-select-list ul li {
display: inline-block;
padding: 10px 14px;
border-radius: 111px;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hero4 .hero4-select-list ul li {
margin-bottom: 16px;
}
}
.hero4 .hero4-select-list ul li.active {
background-color: var(--vtc-bg-main8);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.hero4 .hero4-select-list ul li:hover {
background-color: var(--vtc-bg-main8);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.hero4 .hero4-iamge1 {
margin-left: -50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero4 .hero4-iamge1 {
margin-left: 0;
}
}
@media (max-width: 767px) {
.hero4 .hero4-iamge1 {
margin-left: 0;
}
}
.hero4 .hero4-iamge2 {
margin-right: -50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero4 .hero4-iamge2 {
margin-right: 0;
margin-bottom: 100px;
}
}
@media (max-width: 767px) {
.hero4 .hero4-iamge2 {
margin-right: 0;
margin-bottom: 100px;
}
}
.main-heading4 {
margin-top: -60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading4 {
padding: 50px 0px;
margin-top: 0;
}
}
@media (max-width: 767px) {
.main-heading4 {
padding: 50px 0px;
margin-top: 0;
}
}
.main-heading4 span.sub-title {
display: inline-block;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-white10per);
padding: 10px 12px 6px 12px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading4 span.sub-title img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.main-heading4 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-56);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-60); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading4 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading4 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading4 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.main-heading4 .hero4-form-area {
margin-top: 30px;
position: relative;
margin-left: 60px;
margin-right: 60px;
}
@media (max-width: 767px) {
.main-heading4 .hero4-form-area {
margin-left: 0;
margin-right: 0;
}
}
.main-heading4 .hero4-form-area input {
padding: 18px;
border-radius: 111px;
width: 100%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
}
.main-heading4 .hero4-form-area input::-moz-placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.main-heading4 .hero4-form-area input::placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.main-heading4 .hero4-form-area input:focus {
outline: none;
}
.main-heading4 .hero4-form-area .button {
position: absolute;
top: 8px;
right: 8px;
}
.main-heading4 .hero4-form-area .select-form {
position: absolute;
top: 12px;
right: 140px;
}
.main-heading4 .hero4-form-area .select-form .nice-select {
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 111px;
color: var(--vtc-text-white);
}
.main-heading4 .hero4-form-area .select-form .nice-select .list {
background: var(--vtc-bg-main2);
}
.main-heading4 .hero4-form-area .select-form .nice-select .option {
background: var(--vtc-bg-main2);
}
.main-heading4 .hero4-form-area .select-form .nice-select:after {
border-bottom: 2px solid var(--vtc-text-white);
border-right: 2px solid var(--vtc-text-white);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.hero5 {
min-height: 1000px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
padding-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero5 {
min-height: 1300px;
}
}
@media (max-width: 767px) {
.hero5 {
min-height: 1300px;
}
}
.hero5 .buttons {
display: flex;
align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero5 .hero5-image {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.hero5 .hero5-image {
margin-top: 40px;
}
}
.hero5 .hero4-select-list {
margin-top: 20px;
}
.hero5 .hero4-select-list ul li {
display: inline-block;
padding: 10px 14px;
border-radius: 111px;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hero5 .hero4-select-list ul li {
margin-bottom: 16px;
}
}
.hero5 .hero4-select-list ul li.active {
background-color: var(--vtc-bg-main8);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.hero5 .hero4-select-list ul li:hover {
background-color: var(--vtc-bg-main8);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.hero5 .shape1 {
position: absolute;
left: 70px;
top: 30px;
z-index: -1;
}
.hero5 .shape2 {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.hero5 .shape3 {
position: absolute;
z-index: -1;
bottom: 120px;
right: 0;
}
.main-heading5 span.sub-title {
display: inline-block;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-white10per);
padding: 10px 14px 10px 14px;
border-radius: 111px;
margin-bottom: 16px;
}
.main-heading5 span.sub-title img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.main-heading5 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-56);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-60); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading5 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading5 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading5 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.main-heading5 .hero4-form-area {
margin-top: 30px;
position: relative;
margin-left: 60px;
margin-right: 60px;
}
.main-heading5 .hero4-form-area input {
padding: 18px;
border-radius: 111px;
width: 100%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
}
.main-heading5 .hero4-form-area input::-moz-placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.main-heading5 .hero4-form-area input::placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.main-heading5 .hero4-form-area input:focus {
outline: none;
}
.main-heading5 .hero4-form-area .button {
position: absolute;
top: 8px;
right: 8px;
}
.main-heading5 .hero4-form-area .select-form {
position: absolute;
top: 12px;
right: 140px;
}
.main-heading5 .hero4-form-area .select-form .nice-select {
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 111px;
color: var(--vtc-text-white);
}
.main-heading5 .hero4-form-area .select-form .nice-select .list {
background: var(--vtc-bg-main2);
}
.main-heading5 .hero4-form-area .select-form .nice-select .option {
background: var(--vtc-bg-main2);
}
.main-heading5 .hero4-form-area .select-form .nice-select:after {
border-bottom: 2px solid var(--vtc-text-white);
border-right: 2px solid var(--vtc-text-white);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.inner-hero1 {
min-height: 560px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.inner-hero1 .sec-shape {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.inner-hero1 .images {
text-align: end;
margin-top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero1 .images {
margin-top: 0;
}
}
@media (max-width: 767px) {
.inner-hero1 .images {
margin-bottom: 50px;
text-align: start;
}
}
.inner-hero1 .main-heading1 {
margin-top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero1 .main-heading1 {
margin-top: 0;
}
}
@media (max-width: 767px) {
.inner-hero1 .main-heading1 {
margin-top: 0;
}
}
.breadcrumbs-pages {
margin-top: 16px;
}
.breadcrumbs-pages ul li {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
display: inline-block;
}
.breadcrumbs-pages ul li.angle {
margin: 0px 5px;
}
.breadcrumbs-pages ul li a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
}
.inner-hero2 {
min-height: 750px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero2 {
min-height: 1000px;
}
}
@media (max-width: 767px) {
.inner-hero2 {
min-height: 1200px;
}
}
.inner-hero2 .sec-shape {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.inner-hero2 .main-heading {
padding-right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero2 .main-heading {
padding-right: 0;
}
}
@media (max-width: 767px) {
.inner-hero2 .main-heading {
padding-right: 0;
}
}
.inner-hero2 .image {
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero2 .image {
margin-top: 60px;
text-align: start;
}
}
@media (max-width: 767px) {
.inner-hero2 .image {
margin-top: 60px;
text-align: start;
}
}
.inner-hero3 {
min-height: 750px;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero3 {
min-height: 1000px;
}
}
@media (max-width: 767px) {
.inner-hero3 {
min-height: 1200px;
}
}
.inner-hero3 .sec-shape {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.inner-hero3 .main-heading {
padding-right: 60px;
}
.inner-hero3 .main-heading .sub-title {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 100% */
display: inline-block;
padding-bottom: 16px;
}
.inner-hero3 .main-heading .sub-title span {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-20); /* 100% */
}
.inner-hero3 .main-heading h1 {
font-size: var(--f-fs-font-56);
line-height: var(--f-fs-font-56);
color: var(--vtc-text-white);
}
@media (max-width: 767px) {
.inner-hero3 .main-heading h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-40);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero3 .main-heading {
padding-right: 0;
}
}
@media (max-width: 767px) {
.inner-hero3 .main-heading {
padding-right: 0;
}
}
.inner-hero3 .image {
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.inner-hero3 .image {
margin-top: 60px;
text-align: start;
}
}
@media (max-width: 767px) {
.inner-hero3 .image {
margin-top: 60px;
text-align: start;
}
}
.hero6 {
background-color: var(--vtc-bg-common-8);
min-height: 1020px;
display: flex;
align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading6 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading6 {
padding-top: 160px;
}
}
.main-heading6 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main15);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
text-transform: uppercase;
background-color: var(--vtc-bg-common-9);
border: 1px solid var(--vtc-bg-common-9);
padding: 10px 14px 6px 10px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading6 span.sub-title img {
margin-right: 2px;
transform: translateY(-2px);
}
.main-heading6 h1 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-64);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-74); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading6 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading6 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading6 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.hero6-images {
height: 620px;
position: relative;
text-align: end;
}
@media (max-width: 767px) {
.hero6-images {
margin-top: 70px;
}
}
.hero6-images .bg-shape {
position: absolute;
right: 0;
}
.hero6-images .image {
position: absolute;
top: 0;
right: 0;
}
.hero7 {
background-color: var(--vtc-bg-common-8);
min-height: 900px;
display: flex;
align-items: center;
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.hero7-images {
text-align: end;
margin-top: 50px;
}
.main-heading7 {
padding-right: 40px;
padding-top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading7 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading7 {
padding-top: 100px;
}
}
.main-heading7 span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding: 10px 14px 6px 10px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading7 span.sub-title img {
margin-right: 2px;
transform: translateY(-2px);
filter: brightness(0) invert(1);
}
.main-heading7 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-72);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-80); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading7 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading7 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading7 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.hero7-bottom-box {
padding: 28px 24px;
border-radius: 8px;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
transition: all 0.4s;
}
.hero7-bottom-box:hover {
transition: all 0.4s;
border: 1px solid var(--vtc-bg-main16);
transform: translateY(-10px);
}
.hero8 {
min-height: 1020px;
display: flex;
align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading8 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading8 {
padding-top: 160px;
}
}
.main-heading8 span.sub-title {
display: inline-block;
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding: 10px 14px 6px 10px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading8 span.sub-title img {
margin-right: 2px;
transform: translateY(-2px);
filter: brightness(0);
}
.main-heading8 h1 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-64);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-74); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading8 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading8 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading8 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.hero8-images {
position: relative;
text-align: end;
margin-right: -60px;
}
@media (max-width: 767px) {
.hero8-images {
margin-top: 70px;
}
}
.hero8-images .bg-shape {
position: absolute;
right: 0;
}
.hero8-images .image {
position: absolute;
top: 0;
right: 0;
}
.hero9 {
min-height: 1020px;
display: flex;
align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading9 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading9 {
padding-top: 160px;
}
}
.main-heading9 span.sub-title {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding: 10px 14px 6px 10px;
border-radius: 4px;
margin-bottom: 16px;
}
.main-heading9 span.sub-title img {
margin-right: 2px;
transform: translateY(-2px);
filter: brightness(0) invert(1);
}
.main-heading9 h1 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-64);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-74); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading9 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading9 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading9 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
.hero10 {
min-height: 880px;
display: flex;
align-items: center;
}
.hero10-images {
position: relative;
height: 640px;
margin-top: 60px;
}
@media (max-width: 767px) {
.hero10-images {
height: 500px;
}
}
.hero10-images .element {
position: absolute;
left: 0;
top: 10px;
}
.hero10-images .shape-bg {
position: absolute;
right: 0;
top: 50px;
}
.hero10-images .image {
position: absolute;
top: 0;
right: 60px;
}
.main-heading10 {
padding-top: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading10 {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.main-heading10 {
padding-top: 160px;
}
}
.main-heading10 span.sub-title {
display: inline-block;
color: var(--vtc-bg-main18);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding: 10px 16px 8px 14px;
border-radius: 111px;
margin-bottom: 16px;
background-color: var(--vtc-bg-common-14);
border: 1px solid var(--vtc-border-5);
}
.main-heading10 span.sub-title img {
margin-right: 2px;
transform: translateY(-1px);
}
.main-heading10 h1 {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-64);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-74); /* 107.143% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-heading10 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
@media (max-width: 767px) {
.main-heading10 h1 {
font-size: var(--f-fs-font-40);
line-height: var(--f-fs-font-48);
}
}
.main-heading10 p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 144.444% */
padding-top: 16px;
}
/*
::::::::::::::::::::::::::
HERO AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
PRELOADER AREA CSS
::::::::::::::::::::::::::
*/
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: var(--vtc-bg-white);
display: flex;
align-items: center;
justify-content: center;
}
.loading-container,
.loading {
height: 140px;
position: relative;
width: 140px;
border-radius: 100%;
}
.loading-container {
margin: 40px auto;
}
.loading {
border: 1px solid transparent;
border-color: transparent var(--vtc-text-title1) transparent var(--vtc-text-title1);
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading.loading2 {
border: 1px solid transparent;
border-color: transparent #4D32A5 transparent #4D32A5 !important;
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading.loading5 {
border: 1px solid transparent;
border-color: transparent #FC7327 transparent #FC7327;
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading.loading6 {
border: 1px solid transparent;
border-color: transparent var(--vtc-bg-main15) transparent var(--vtc-bg-main15);
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading.loading7 {
border: 1px solid transparent;
border-color: transparent var(--vtc-bg-main16) transparent var(--vtc-bg-main16);
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading.loading8 {
border: 1px solid transparent;
border-color: transparent var(--vtc-bg-main17) transparent var(--vtc-bg-main17);
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading-container:hover .loading,
.loading-container .loading {
transition: all 0.5s ease-in-out;
}
#loading-icon {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
transform: translate(-50%, -50%);
}
@keyframes rotate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
::::::::::::::::::::::::::
PRELOADER AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BACKGROUNDS AREA CSS
::::::::::::::::::::::::::
*/
.sec-bg6 {
background-color: var(--vtc-bg-common-10);
}
/*
::::::::::::::::::::::::::
BACKGROUNDS AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
ANIMATIONS AREA CSS
::::::::::::::::::::::::::
*/
@keyframes round-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1000deg);
}
}
@keyframes round-circle2 {
0% {
transform: rotate(-20deg);
}
100% {
transform: rotate(20deg);
}
}
@keyframes animate1 {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-20px);
}
}
@keyframes animate2 {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(20px);
}
}
@keyframes animate3 {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(15px);
}
}
@keyframes animate4 {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-25px);
}
}
@keyframes animate5 {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes animate6 {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
.round-circle {
position: relative;
animation-name: round-circle;
animation-duration: 72s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.animate1 {
position: relative;
animation-name: animate1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.animate2 {
position: relative;
animation-name: animate2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.animate3 {
position: relative;
animation-name: animate3;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.animate4 {
position: relative;
animation-name: animate4;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.animate5 {
position: relative;
animation-name: animate5;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.animate6 {
position: relative;
animation-name: animate6;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.round-circle2 {
position: relative;
animation-name: round-circle2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.image-anime {
overflow: hidden;
}
.image-anime:after {
content: "";
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 1;
}
.image-anime:hover:after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
}
/*
::::::::::::::::::::::::::
ANIMATION AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
PAGINATION AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
PAGINATION AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
SEARCH AREA CSS
::::::::::::::::::::::::::
*/
.search__popup {
padding: 70px;
padding-top: 70px;
padding-bottom: 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 360px;
background-color: rgba(0, 0, 0, 0.9);
z-index: 99999;
transform: translateY(calc(-100% - 80px));
transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
transition-delay: 0.7s;
}
.search__popup.search-opened {
transform: translateY(0%);
transition-delay: 0s;
}
.search__popup.search-opened .search__input {
transform: translateY(0px);
opacity: 1;
transition-delay: 0.3s;
}
.search__popup.search-opened .search__input::after {
width: 100%;
transition-delay: 0.5s;
}
.search__popup-2 {
background-color: var(--tp-common-black-13);
}
.search__popup-2 .search__input .search-input-field ~ .search-focus-border {
background-color: var(--tp-theme-8);
}
.search__popup-3 .search__input .search-input-field ~ .search-focus-border {
background-color: var(--tp-theme-10);
}
.search__top {
margin-bottom: 80px;
}
.search__input {
position: relative;
height: 80px;
transition: all 0.3s ease-out 0s;
transition-delay: 0.5s;
opacity: 0;
}
.search__input::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0%;
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.3s ease-out 0s;
transition-delay: 0.3s;
}
.search__input input {
width: 100%;
height: 100%;
background-color: transparent;
border: 0;
outline: 0;
font-size: 24px;
color: var(--tp-common-white);
border-bottom: 1px solid transparent;
padding: 0;
padding-right: 30px;
color: var(--vtc-text-white);
}
.search__input input::-moz-placeholder { /* Firefox 19+ */
color: rgba(255, 255, 255, 0.5);
font-size: 24px;
}
.search__input input::placeholder { /* MODERN BROWSER */
color: rgba(255, 255, 255, 0.5);
font-size: 24px;
}
.search__input button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 18px;
color: var(--vtc-bg-white1);
background: none;
border: none;
}
.search__input .search-input-field ~ .search-focus-border {
position: absolute;
bottom: 0;
left: auto;
right: 0;
width: 0;
height: 1px;
background-color: var(--tp-common-orange);
transition: 0.5s 0.3s 0s ease-out;
}
.search__input .search-input-field:focus ~ .search-focus-border {
width: 100%;
left: 0;
right: auto;
transition: 0.5s 0.3s 0s ease-out;
}
.search__close-btn {
font-size: 25px;
color: rgba(255, 255, 255, 0.3);
border: none;
background: none;
}
.search__close-btn:hover {
color: var(--vtc-bg-white1);
transition: all 0.4s;
}
/*
::::::::::::::::::::::::::
SEARCH AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
THEME SETTINGS
::::::::::::::::::::::::::
*/
.blok:nth-of-type(odd) {
background-color: white;
}
.blok:nth-of-type(even) {
background-color: black;
}
/* #Progress
================================================== */
.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
z-index: 1;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 200ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 999;
}
.progress-wrap::after {
position: absolute;
font-family: "FontAwesome";
content: "\f062";
text-align: center;
line-height: 56px;
font-size: 18px;
color: var(--vtc-text-title1);
left: 0;
top: 0;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
z-index: 1;
transition: all 200ms linear;
}
.progress-wrap:hover::after {
opacity: 0;
}
.progress-wrap::before {
position: absolute;
font-family: "FontAwesome";
content: "\f062";
text-align: center;
line-height: 56px;
font-size: 18px;
opacity: 0;
left: 0;
top: 0;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
z-index: 2;
transition: all 200ms linear;
}
.progress-wrap:hover::before {
opacity: 1;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: var(--vtc-text-title1); /* --- Lijn progres kleur --- */
stroke-width: 4;
box-sizing: border-box;
transition: all 200ms linear;
}
/*
::::::::::::::::::::::::::
THEME SETTINGS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BLOG AREA CSS
::::::::::::::::::::::::::
*/
.details-single-posts .image img {
width: 100%;
}
.details-single-posts .content-details-area {
padding-top: 24px;
}
.details-single-posts .content-details-area ul li {
display: inline-block;
}
.details-single-posts .content-details-area ul .tag a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
background-color: var(--vtc-bg-main2);
border-radius: 9px;
display: inline-block;
padding: 10px 14px;
}
.details-single-posts .content-details-area ul .date {
margin-left: 30px;
}
.details-single-posts .content-details-area ul .date a {
display: inline-block;
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
position: relative;
}
.details-single-posts .content-details-area ul .date a img {
transform: translateY(-3px);
}
.details-single-posts .content-details-area ul .date a::after {
content: "";
position: absolute;
left: -15px;
top: 0;
height: 18px;
width: 1px;
background-color: var(--vtc-text-pera1);
opacity: 0.6;
}
.details-single-posts .details-check-list li {
margin-top: 16px;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
align-items: center;
}
.details-single-posts .details-check-list li .check {
display: inline-block;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
border-radius: 50%;
background-color: var(--vtc-bg-main2);
color: var(--vtc-bg-white);
font-size: 14px;
margin-right: 6px;
}
.details-border {
height: 1px;
width: 100%;
background-color: var(--vtc-bg-common-2);
margin: 40px 0px;
}
.details-social-tags .tags-area ul li {
display: inline-block;
}
.details-social-tags .tags-area ul li.text {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.details-social-tags .tags-area ul li a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
background-color: var(--vtc-bg-main2);
border-radius: 9px;
display: inline-block;
padding: 10px 14px;
margin-left: 20px;
}
.details-social-tags .social-icons {
text-align: end;
}
.details-social-tags .social-icons ul li {
display: inline-block;
}
.details-social-tags .social-icons ul li.text {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
margin-right: 10px;
}
.details-social-tags .social-icons ul li a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-common-2);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
}
.details-social-tags .social-icons ul li a:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main1);
transform: translateY(-5px);
}
.details-single-comment {
border-radius: 8px;
background: var(--vtc-bg-white);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.09);
padding: 28px;
margin-top: 32px;
}
.details-single-comment p {
color: var(--Text-Color, rgba(11, 26, 51, 0.8235294118));
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 144.444% */
padding-top: 20px;
}
.details-single-comment .top-area {
display: flex;
align-items: center;
justify-content: space-between;
}
.details-single-comment .top-area .reply {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.details-single-comment .top-area .reply:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.details-single-comment .top-area .author-area {
display: flex;
align-items: center;
}
.details-single-comment .top-area .author-area .heading {
padding-left: 16px;
}
.details-single-comment .top-area .author-area .heading .date {
display: inline-block;
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
}
.details-single-comment .top-area .author-area .heading .date img {
transform: translateY(-3px);
margin-right: 2px;
}
.details-single-comment .top-area .author-area .heading h4 a {
display: inline-block;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: 500;
line-height: var(--f-fs-font-20); /* 100% */
padding-top: 8px;
}
.details-contact-form .form-area {
background-color: var(--vtc-bg-common-2);
padding: 32px;
border-radius: 8px;
margin-top: 20px;
}
.details-contact-form .form-area .button {
margin-top: 24px;
}
.details-contact-form .form-area .button button {
width: 100%;
}
.details-contact-form .form-area .single-input {
margin-top: 20px;
}
.details-contact-form .form-area .single-input input, .details-contact-form .form-area .single-input textarea {
border: none;
padding: 16px;
width: 100%;
border-radius: 8px;
}
.details-contact-form .form-area .single-input input:focus, .details-contact-form .form-area .single-input textarea:focus {
outline: none;
}
/*
::::::::::::::::::::::::::
BLOG AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BLOG SIDEBAR AREA CSS
::::::::::::::::::::::::::
*/
.details-sidebar {
position: sticky;
top: 120px;
left: 0;
}
.details-sidebar ._sidebar-widget {
background-color: var(--vtc-bg-common-2);
border-radius: 8px;
padding: 28px 24px;
}
.details-sidebar ._sidebar-widget h3 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.details-sidebar ._sidebar-widget ._search-form {
position: relative;
}
.details-sidebar ._sidebar-widget ._search-form input {
padding: 18px;
border-radius: 8px;
border: none;
width: 100%;
}
.details-sidebar ._sidebar-widget ._search-form input:focus {
outline: none;
}
.details-sidebar ._sidebar-widget ._search-form input::-moz-placeholder {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.details-sidebar ._sidebar-widget ._search-form input::placeholder {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.details-sidebar ._sidebar-widget ._search-form button {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
background: none;
border: none;
position: absolute;
right: 16px;
top: 17px;
}
.details-sidebar ._sidebar-widget ._category-list {
padding-top: 8px;
}
.details-sidebar ._sidebar-widget ._category-list ul li {
margin-bottom: 18px;
}
.details-sidebar ._sidebar-widget ._category-list ul li a {
display: inline-flex;
justify-content: space-between;
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 20px;
width: 100%;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
transition: all 0.4s;
}
.details-sidebar ._sidebar-widget ._category-list ul li a:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main2);
color: var(--vtc-bg-white);
}
.details-sidebar ._sidebar-widget ._category-list ul li:nth-last-child(1) {
margin-bottom: 0;
}
.details-sidebar ._sidebar-widget ._tags-area ul li {
display: inline-block;
}
.details-sidebar ._sidebar-widget ._tags-area ul li a {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
padding: 12px 16px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
display: inline-block;
margin: 7px 7px 7px 0;
transition: all 0.4s;
}
.details-sidebar ._sidebar-widget ._tags-area ul li a:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main2);
color: var(--vtc-bg-white);
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single:nth-last-child(1) {
margin-bottom: 0px;
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .image {
width: 120px;
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .image img {
width: 100%;
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .content {
padding-left: 16px;
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .content h5 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-22); /* 137.5% */
display: inline-block;
padding-top: 10px;
transition: all 0.4s;
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .content h5 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .content .date {
display: inline-block;
color: var(--vtc-text-pera1);
font-size: 14px;
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: 14px; /* 100% */
}
.details-sidebar ._sidebar-widget ._recent-post-box .recent-post-single .content .date img {
transform: translateY(-3px);
margin-right: 5px;
}
/*
::::::::::::::::::::::::::
BLOG SIDEBAR AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BLOG POST BOX AREA CSS
::::::::::::::::::::::::::
*/
.vl-blog-1-item {
background-color: var(--vtc-bg-common-2);
border-radius: 8px;
transition: all 0.4s;
}
.vl-blog-1-item .vl-blog-3-thumb {
border-radius: 8px 8px 0px 0px;
overflow: hidden;
position: relative;
}
.vl-blog-1-item .vl-blog-3-thumb img {
transition: all 0.4s;
}
.vl-blog-1-item .vl-blog-1-content {
padding: 28px;
}
.vl-blog-1-item .vl-blog-1-content .vl-blog1-meta a {
color: var(--vtc-text-pera2);
font-size: var(-f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(-f-fs-font-16); /* 100% */
text-transform: uppercase;
display: inline-block;
}
.vl-blog-1-item .vl-blog-1-content .vl-blog1-meta a img {
transform: translateY(-3px);
margin-right: 3px;
}
.vl-blog-1-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-1-item:hover .vl-blog-3-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-2-item {
position: relative;
}
.vl-blog-2-item .vl-blog-2-thumb {
border-radius: 8px;
overflow: hidden;
}
.vl-blog-2-item .vl-blog-2-thumb img {
transition: all 0.4s;
}
.vl-blog-2-item .vl-blog-2-content {
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 24px;
margin: -90px 24px 0px 24px;
position: relative;
z-index: 2;
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
transition: all 0.4s;
}
.vl-blog-2-item .vl-blog-2-content .vl-blog2-meta a {
background: var(--vtc-bg-main3);
border-radius: 4px;
padding: 8px 10px 6px 10px;
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-blog-2-item .vl-blog-2-content .vl-blog2-meta a img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.vl-blog-2-item .vl-blog-2-content .learn_btn {
display: inline-block;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.vl-blog-2-item .vl-blog-2-content .learn_btn:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.vl-blog-2-item:hover {
transition: all 0.4s;
}
.vl-blog-2-item:hover .vl-blog-2-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-2-item:hover .vl-blog-2-content {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-3-item {
position: relative;
}
.vl-blog-3-item .vl-blog-3-thumb {
border-radius: 8px;
overflow: hidden;
}
.vl-blog-3-item .vl-blog-3-thumb img {
transition: all 0.4s;
}
.vl-blog-3-item .vl-blog-3-content {
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 24px;
margin: -90px 24px 0px 24px;
position: relative;
z-index: 2;
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
transition: all 0.4s;
}
.vl-blog-3-item .vl-blog-3-content .vl-blog3-meta a {
background: var(--vtc-bg-main5);
border-radius: 4px;
padding: 8px 10px 6px 10px;
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-blog-3-item .vl-blog-3-content .vl-blog3-meta a img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.vl-blog-3-item .vl-blog-3-content .learn_btn {
display: inline-block;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.vl-blog-3-item .vl-blog-3-content .learn_btn:hover {
transition: all 0.4s;
color: var(--vtc-bg-main5);
}
.vl-blog-3-item:hover {
transition: all 0.4s;
}
.vl-blog-3-item:hover .vl-blog-3-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-3-item:hover .vl-blog-3-content {
transition: all 0.4s;
transform: translateY(-10px);
}
.blog4-box {
display: flex;
align-items: center;
background-color: var(--vtc-bg-common-2);
padding: 24px;
border-radius: 8px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.blog4-box {
display: block;
}
}
.blog4-box .vl-blog-3-thumb {
width: 240px;
border-radius: 8px;
overflow: hidden;
}
.blog4-box .vl-blog-3-thumb img {
width: 100%;
transition: all 0.4s;
-o-object-fit: cover;
object-fit: cover;
}
.blog4-box .vl-blog-1-content {
padding-left: 24px;
}
@media (max-width: 767px) {
.blog4-box .vl-blog-1-content {
padding-left: 0;
padding-top: 20px;
}
}
.blog4-box .vl-blog-1-content .vl-blog1-meta a {
display: inline-block;
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: uppercase;
}
.blog4-box .vl-blog-1-content .vl-blog1-meta a img {
transform: translateY(-2px);
margin-right: 2px;
}
.blog4-box .vl-blog-1-content .learn {
color: var(--vtc-text-title4);
display: inline-block;
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: uppercase;
transition: all 0.4s;
}
.blog4-box .vl-blog-1-content .learn:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.blog4-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.blog4-box:hover .vl-blog-3-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-5-item {
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
overflow: hidden;
transition: all 0.4s;
}
.vl-blog-5-item .vl-blog-5-thumb {
border-radius: 8px 8px 0px 0px;
overflow: hidden;
}
.vl-blog-5-item .vl-blog-5-thumb img {
width: 100%;
transition: all 0.4s;
}
.vl-blog-5-item .btn_theme12 {
margin-top: 24px;
}
.vl-blog-5-item .vl-blog-5-content {
padding: 28px;
}
.vl-blog-5-item .vl-blog-5-content .vl-blog5-meta a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: uppercase;
transition: all 0.4s;
}
.vl-blog-5-item .vl-blog-5-content .vl-blog5-meta a img {
transform: translateY(-3px);
margin-right: 3px;
}
.vl-blog-5-item .vl-blog-5-content h3, .vl-blog-5-item .vl-blog-5-content h4 {
padding: 16px 0px 0px 0px;
}
.vl-blog-5-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-5-item:hover .vl-blog-5-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.blog5 .sec-shape {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.vl-blog-6-item {
position: relative;
}
.vl-blog-6-item .vl-blog-6-thumb {
border-radius: 8px;
overflow: hidden;
}
.vl-blog-6-item .vl-blog-6-thumb img {
transition: all 0.4s;
}
.vl-blog-6-item .vl-blog-6-content {
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 24px;
margin: -90px 24px 0px 24px;
position: relative;
z-index: 2;
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
transition: all 0.4s;
}
.vl-blog-6-item .vl-blog-6-content .vl-blog6-meta a {
background: var(--vtc-bg-main15);
border-radius: 4px;
padding: 8px 10px 6px 10px;
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-blog-6-item .vl-blog-6-content .vl-blog6-meta a img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.vl-blog-6-item .vl-blog-6-content .learn_btn {
display: inline-block;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.vl-blog-6-item .vl-blog-6-content .learn_btn:hover {
transition: all 0.4s;
color: var(--vtc-bg-main15);
}
.vl-blog-6-item:hover {
transition: all 0.4s;
}
.vl-blog-6-item:hover .vl-blog-6-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-6-item:hover .vl-blog-6-content {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-8-item {
background-color: var(--vtc-text-white);
border-radius: 8px;
transition: all 0.4s;
}
.vl-blog-8-item .vl-blog-8-thumb {
border-radius: 8px 8px 0px 0px;
overflow: hidden;
position: relative;
}
.vl-blog-8-item .vl-blog-8-thumb img {
transition: all 0.4s;
}
.vl-blog-8-item .vl-blog-8-content {
padding: 28px;
}
.vl-blog-8-item .vl-blog-8-content .vl-blog8-meta a {
color: var(--vtc-text-pera2);
font-size: var(-f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(-f-fs-font-16); /* 100% */
text-transform: uppercase;
display: inline-block;
}
.vl-blog-8-item .vl-blog-8-content .vl-blog8-meta a img {
transform: translateY(-3px);
margin-right: 3px;
}
.vl-blog-8-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-8-item:hover .vl-blog-8-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-9-item {
background-color: var(--vtc-bg-common-2);
border-radius: 8px;
transition: all 0.4s;
}
.vl-blog-9-item .vl-blog-9-thumb {
border-radius: 8px 8px 0px 0px;
overflow: hidden;
position: relative;
}
.vl-blog-9-item .vl-blog-9-thumb img {
transition: all 0.4s;
}
.vl-blog-9-item .vl-blog-9-content {
padding: 28px;
}
.vl-blog-9-item .vl-blog-9-content .vl-blog9-meta a {
color: var(--vtc-text-pera2);
font-size: var(-f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(-f-fs-font-16); /* 100% */
text-transform: uppercase;
display: inline-block;
}
.vl-blog-9-item .vl-blog-9-content .vl-blog9-meta a img {
transform: translateY(-3px);
margin-right: 3px;
}
.vl-blog-9-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-9-item:hover .vl-blog-9-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.vl-blog-10-item {
background-color: var(--vtc-bg-white);
border-radius: 8px;
overflow: hidden;
transition: all 0.4s;
}
.vl-blog-10-item .vl-blog-10-thumb {
border-radius: 8px 8px 0px 0px;
overflow: hidden;
}
.vl-blog-10-item .vl-blog-10-thumb img {
width: 100%;
transition: all 0.4s;
}
.vl-blog-10-item .btn_theme12 {
margin-top: 24px;
}
.vl-blog-10-item .vl-blog-10-content {
padding: 28px;
}
.vl-blog-10-item .vl-blog-10-content .vl-blog10-meta a {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: uppercase;
transition: all 0.4s;
}
.vl-blog-10-item .vl-blog-10-content .vl-blog10-meta a img {
transform: translateY(-3px);
margin-right: 3px;
filter: brightness(0);
}
.vl-blog-10-item .vl-blog-10-content h3, .vl-blog-10-item .vl-blog-10-content h4 {
padding: 16px 0px 0px 0px;
}
.vl-blog-10-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.vl-blog-10-item:hover .vl-blog-10-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
.blog7-box {
display: flex;
align-items: center;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
padding: 24px;
border-radius: 8px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.blog7-box {
display: block;
}
}
.blog7-box .vl-blog-7-thumb {
width: 280px;
border-radius: 8px;
overflow: hidden;
}
.blog7-box .vl-blog-7-thumb img {
width: 100%;
transition: all 0.4s;
-o-object-fit: cover;
object-fit: cover;
}
.blog7-box .vl-blog-7-content {
padding-left: 24px;
}
@media (max-width: 767px) {
.blog7-box .vl-blog-7-content {
padding-left: 0;
padding-top: 20px;
}
}
.blog7-box .vl-blog-7-content .vl-blog7-meta a {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: uppercase;
}
.blog7-box .vl-blog-7-content .vl-blog7-meta a img {
transform: translateY(-2px);
margin-right: 2px;
filter: brightness(0) invert(1);
}
.blog7-box .vl-blog-7-content .learn {
color: var(--vtc-text-white);
display: inline-block;
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: uppercase;
transition: all 0.4s;
}
.blog7-box .vl-blog-7-content .learn span {
display: inline-block;
transform: rotate(-45deg);
}
.blog7-box .vl-blog-7-content .learn:hover {
transition: all 0.4s;
color: var(--vtc-bg-main16);
}
.blog7-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
border: 1px solid var(--vtc-bg-main16);
}
.blog7-box:hover .vl-blog-7-thumb img {
transition: all 0.4s;
transform: scale(1.1) rotate(2deg);
}
/*
::::::::::::::::::::::::::
BLOG POST BOX AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BLOG RECENT POST AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
BLOG RECENT POST AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area1 {
padding-top: 80px;
position: relative;
z-index: 2;
}
.vl-footer-area1 .sec-shape1 {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.vl-footer-area1 .sec-shape2 {
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.vl-copyright1 {
padding: 16px 0px;
}
.vl-copyright1._dv-top {
border-top: 1px solid var(--vtc-border-1);
}
.vl-copyright1 .payment-options {
text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-copyright1 .payment-options {
text-align: start;
margin-top: 16px;
}
}
@media (max-width: 767px) {
.vl-copyright1 .payment-options {
text-align: start;
margin-top: 16px;
}
}
.vl-copyright1 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright1 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright1 p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
}
.vl-footer-social a:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main1);
transform: translateY(-5px);
}
.vl-footer-widget h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main1);
}
.vl-footer-subscribe form {
margin-top: 30px;
}
.vl-footer-subscribe form input {
padding: 20px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.vl-footer-subscribe form input:focus {
outline: none;
}
.vl-footer-subscribe form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area2 {
padding-top: 220px;
}
.vl-copyright2 {
padding: 16px 0px;
}
.vl-copyright2._dv-top {
border-top: 1px solid var(--vtc-border-1);
}
.vl-copyright2 .payment-options {
text-align: end;
}
.vl-copyright2 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright2 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright2 p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social2 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social2 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main3);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social2 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social2 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget2 h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget2 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget2 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main2);
}
.vl-footer-subscribe2 form {
margin-top: 30px;
}
.vl-footer-subscribe2 form input {
padding: 21px;
border-radius: 8px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.vl-footer-subscribe2 form input:focus {
outline: none;
}
.vl-footer-subscribe2 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe2 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe2 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area3 {
padding-top: 80px;
}
.vl-copyright3 {
padding: 16px 0px;
}
.vl-copyright3._dv-top {
border-top: 1px solid var(--vtc-border-1);
}
.vl-copyright3 .payment-options {
text-align: end;
}
.vl-copyright3 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright3 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright3 p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social3 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social3 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main5);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social3 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social3 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget3 h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget3 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget3 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main5);
}
.vl-footer-subscribe3 form {
margin-top: 30px;
}
.vl-footer-subscribe3 form input {
padding: 21px;
border-radius: 8px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.vl-footer-subscribe3 form input:focus {
outline: none;
}
.vl-footer-subscribe3 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe3 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe3 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 4 CSS
::::::::::::::::::::::::::
*/
.vl-footer-subscribe4 form {
margin-top: 30px;
}
.vl-footer-subscribe4 form input {
padding: 21px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.vl-footer-subscribe4 form input:focus {
outline: none;
}
.vl-footer-subscribe4 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe4 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe4 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 4 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 5 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area5 {
padding-top: 80px;
margin-top: 100px;
}
.vl-copyright5 {
padding: 16px 0px;
}
.vl-copyright5._dv-top {
border-top: 1px solid var(--vtc-bg-white10per);
}
.vl-copyright5 .payment-options {
text-align: end;
}
.vl-copyright5 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright5 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright5 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social5 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-white10per);
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social5 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main10);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social5 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social5 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget5 h4 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget5 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget5 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main12);
}
.vl-footer-subscribe3 form {
margin-top: 30px;
}
.vl-footer-subscribe3 form input {
padding: 21px;
border-radius: 8px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.vl-footer-subscribe3 form input:focus {
outline: none;
}
.vl-footer-subscribe3 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe3 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe3 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 5 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area6 {
padding-top: 80px;
}
.vl-copyright6 {
padding: 16px 0px;
}
.vl-copyright6._dv-top {
border-top: 1px solid var(--vtc-border-1);
}
.vl-copyright6 .payment-options {
text-align: end;
}
.vl-copyright6 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright6 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright6 p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social6 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-common-9);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social6 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main15);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social6 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social6 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget6 h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget6 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget6 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main15);
}
.vl-footer-subscribe6 form {
margin-top: 30px;
}
.vl-footer-subscribe6 form input {
padding: 21px;
border-radius: 8px;
border: none;
background-color: var(--vtc-bg-common-9);
width: 100%;
}
.vl-footer-subscribe6 form input:focus {
outline: none;
}
.vl-footer-subscribe6 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe6 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe6 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area7 {
padding-top: 80px;
}
.vl-copyright7 {
padding: 16px 0px;
}
.vl-copyright7._dv-top {
border-top: 1px solid var(--vtc-bg-white10per);
}
.vl-copyright7 .payment-options {
text-align: end;
}
.vl-copyright7 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright7 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright7 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social7 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-white10per);
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social7 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main16);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social7 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social7 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget7 h4 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget7 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget7 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main16);
}
.vl-footer-subscribe7 h4 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
}
.vl-footer-subscribe7 form {
margin-top: 30px;
}
.vl-footer-subscribe7 form input {
padding: 21px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white10per);
width: 100%;
color: var(--vtc-text-white);
}
.vl-footer-subscribe7 form input:focus {
outline: none;
}
.vl-footer-subscribe7 form input::-moz-placeholder {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe7 form input::placeholder {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe7 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area8 {
padding-top: 80px;
}
.vl-copyright8 {
padding: 16px 0px;
}
.vl-copyright8._dv-top {
border-top: 1px solid var(--vtc-border-1);
}
.vl-copyright8 .payment-options {
text-align: end;
}
.vl-copyright8 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright8 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright8 p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social8 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-common-12);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social8 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main17);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social8 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social8 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget8 h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget8 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget8 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main17);
}
.vl-footer-subscribe8 form {
margin-top: 30px;
}
.vl-footer-subscribe8 form input {
padding: 21px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-common-12);
width: 100%;
}
.vl-footer-subscribe8 form input:focus {
outline: none;
}
.vl-footer-subscribe8 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe8 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe8 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 9 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area9 {
padding-top: 220px;
background-color: var(--vtc-bg-white10per);
}
.vl-copyright9 {
padding: 16px 0px;
}
.vl-copyright9._dv-top {
border-top: 1px solid var(--vtc-bg-white20per);
}
.vl-copyright9 .payment-options {
text-align: end;
}
.vl-copyright9 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright9 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright9 p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social9 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-white20per);
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social9 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main18);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social9 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social9 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget9 h4 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget9 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget9 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main18);
}
.vl-footer-subscribe9 form {
margin-top: 30px;
}
.vl-footer-subscribe9 form input {
padding: 21px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white20per);
width: 100%;
color: var(--vtc-text-white);
}
.vl-footer-subscribe9 form input:focus {
outline: none;
}
.vl-footer-subscribe9 form input::-moz-placeholder {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe9 form input::placeholder {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe9 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 9 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
.vl-footer-area10 {
padding-top: 80px;
}
.vl-copyright10 {
padding: 16px 0px;
}
.vl-copyright10._dv-top {
border-top: 1px solid var(--vtc-border-1);
}
.vl-copyright10 .payment-options {
text-align: end;
}
.vl-copyright10 .payment-options a {
display: inline-block;
margin-left: 3px;
transition: all 0.4s;
}
.vl-copyright10 .payment-options a:hover {
transition: all 0.4s;
transform: scale(0.9);
}
.vl-copyright10 p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-social10 a {
display: inline-block;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
background-color: var(--vtc-bg-common-14);
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
margin-right: 4px;
transition: all 0.4s;
position: relative;
z-index: 2;
}
.vl-footer-social10 a::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
background: var(--vtc-bg-main18);
opacity: 0;
transition: all 0.4s;
}
.vl-footer-social10 a:hover {
transition: all 0.4s;
transform: translateY(-5px);
color: var(--vtc-bg-white);
}
.vl-footer-social10 a:hover::after {
transition: all 0.4s;
opacity: 1;
}
.vl-footer-widget10 h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
margin-bottom: 24px;
}
.vl-footer-widget10 .vl-footer-list ul li a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-bottom: 20px;
transition: all 0.4s;
}
.vl-footer-widget10 .vl-footer-list ul li a:hover {
transition: all 0.4s;
transform: translateX(5px);
color: var(--vtc-bg-main18);
}
.vl-footer-subscribe10 form {
margin-top: 30px;
}
.vl-footer-subscribe10 form input {
padding: 21px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-common-14);
width: 100%;
}
.vl-footer-subscribe10 form input:focus {
outline: none;
}
.vl-footer-subscribe10 form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe10 form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.vl-footer-subscribe10 form .button {
position: absolute;
top: 5px;
right: 5px;
}
/*
::::::::::::::::::::::::::
FOOTER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 1 CSS
::::::::::::::::::::::::::
*/
.header1-top {
background-color: var(--vtc-bg-white10per);
padding: 16px 0px;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
.header1-top .header-top-contact {
display: flex;
align-items: center;
}
.header1-top .header-top-contact .text a, .header1-top .header-top-contact .text p {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.header1-top .header-top-contact .icon img {
margin-top: -2px;
margin-right: 4px;
}
.header1-top .header-top2-contacts {
display: flex;
align-items: center;
justify-content: end;
}
.header-contact-wedget a {
position: relative;
}
.header-contact-wedget a img {
transform: translateY(-2px);
}
.header-contact-wedget a:nth-last-child(1)::after {
content: "";
position: absolute;
top: 0;
left: -19px;
height: 20px;
width: 2px;
background-color: var(--vtc-border-1);
}
.header-tranperent {
position: absolute;
top: 0;
z-index: 999;
width: 100%;
}
.header-contact-wedget {
text-align: end;
}
@media screen and (min-width: 769px) {
.header1-bg {
padding: 10px 0px;
border-radius: 0px 0px 8px 8px;
position: relative;
z-index: 999;
margin-top: 16px;
}
}
.vl-header1-right {
text-align: end;
display: flex;
align-items: center;
justify-content: end;
}
.vl-header1-right .search-open-btn {
background: none;
border: none;
font-size: var(--f-fs-font-20);
margin-right: 36px;
position: relative;
}
.vl-header1-right .search-open-btn::after {
content: "";
position: absolute;
top: 5px;
right: -16px;
height: 20px;
width: 2px;
background-color: var(--vtc-border-1);
}
.header1-logo-white {
display: none;
display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.dark-mode .header1-logo-white {
display: inline-block;
}
}
@media (max-width: 767px) {
.dark-mode .header1-logo-white {
display: inline-block;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.dark-mode .header1-logo-block {
display: none;
}
}
@media (max-width: 767px) {
.dark-mode .header1-logo-block {
display: none;
}
}
/*
::::::::::::::::::::::::::
HEADER AREA 1 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 2 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 2 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 3 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 3 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 4 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 4 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 5 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
HEADER AREA 5 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
.vl-header-area1 {
top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area1 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area1 {
top: 16px;
}
}
.vl-header-area1 .vl-main-menu {
background-color: var(--vtc-bg-white10per);
border-radius: 30px;
border: 1px solid var(--vtc-bg-white10per);
padding: 16px 24px;
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area1 .vl-main-menu ul {
text-align: center;
}
.vl-header-area1 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area1 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area1 .vl-main-menu ul > li > a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area1 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main1);
}
.vl-header-area1 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area1 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main1);
}
.vl-header-area1 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main1);
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main1);
top: 0;
left: 0;
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main1);
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main1);
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area1 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area1 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main1);
}
.vl-header-area1 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area1 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area1 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area1 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area1 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area1 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area1 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area1 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main1);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area1 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area1 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area1 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area1 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area1 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area1 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area1 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area1 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area1 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area1 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area1 .vl-home-thumb .btn-area1 .theme-btn1 {
margin-top: 12px;
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area1 .vl-home-thumb .btn-area1 .theme-btn1 {
padding: 17px;
}
}
@media (max-width: 767px) {
.vl-header-area1 .vl-home-thumb .btn-area1 .theme-btn1 {
padding: 17px;
}
}
.vl-header-area1 .vl-home-thumb .btn-area1 .theme-btn1:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area1 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area1 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main1) !important;
}
.vl-header-area1 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -25px;
}
.vl-header-area1 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area1.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-bg-main2);
}
.vl-header-area1.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area1.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area1.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area1.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area1.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area1.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area1 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area1 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main2);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
/*
::::::::::::::::::::::::::
NAV MENU 2 CSS
::::::::::::::::::::::::::
*/
.vl-header-area2 {
top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area2 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area2 {
top: 16px;
}
}
.vl-header-area2 .vl-main-menu {
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
border: 1px solid var(--vtc-bg-white10per);
padding: 16px 24px;
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area2 .vl-main-menu ul {
text-align: center;
}
.vl-header-area2 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area2 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area2 .vl-main-menu ul > li > a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area2 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main2);
}
.vl-header-area2 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area2 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main2);
}
.vl-header-area2 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main2);
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main2);
top: 0;
left: 0;
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main2);
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main2);
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area2 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area2 .vl-main-menu ul > li:hover a {
color: var(--vtc-text-white80per);
}
.vl-header-area2 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area2 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area2 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area2 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area2 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area2 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area2 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area2 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main2);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area2 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area2 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area2 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area2 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area2 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area2 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area2 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area2 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area2 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area2 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area2 .vl-home-thumb .btn-area1 .btn_theme5 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area2 .vl-home-thumb .btn-area1 .btn_theme5:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area2 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area2 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2) !important;
}
.vl-header-area2 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area2 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area2.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-bg-main2);
}
.vl-header-area2.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area2.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area2.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area2.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area2.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area2.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area2 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area2 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main2);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
/*
::::::::::::::::::::::::::
NAV MENU 2 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 3 CSS
::::::::::::::::::::::::::
*/
.vl-header-area3 {
top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area3 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area3 {
top: 16px;
}
}
.vl-header-area3 .vl-main-menu {
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
border: 1px solid var(--vtc-bg-white10per);
padding: 16px 24px;
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area3 .vl-main-menu ul {
text-align: center;
}
.vl-header-area3 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area3 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area3 .vl-main-menu ul > li > a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area3 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main6);
}
.vl-header-area3 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area3 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main6);
}
.vl-header-area3 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main6);
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main6);
top: 0;
left: 0;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main6);
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main6);
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area3 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area3 .vl-main-menu ul > li:hover a {
color: var(--vtc-text-white80per);
}
.vl-header-area3 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area3 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area3 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area3 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area3 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area3 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area3 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area3 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main6);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area3 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area3 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area3 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area3 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area3 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area3 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area3 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area3 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area3 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area3 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area3 .vl-home-thumb .btn-area1 .theme-btn5 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
padding: 18px 18px;
}
.vl-header-area3 .vl-home-thumb .btn-area1 .theme-btn5:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area3 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area3 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main6) !important;
}
.vl-header-area3 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area3 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area3.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-bg-main6);
}
.vl-header-area3.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area3.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area3.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area3.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area3.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area3.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area3 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area3 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main6);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
/*
::::::::::::::::::::::::::
NAV MENU 3 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 4 CSS
::::::::::::::::::::::::::
*/
.vl-header-area4 {
top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area4 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area4 {
top: 16px;
}
}
.vl-header-area4 .vl-main-menu {
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
border: 1px solid var(--vtc-bg-white10per);
padding: 16px 24px;
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area4 .vl-main-menu ul {
text-align: center;
}
.vl-header-area4 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area4 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area4 .vl-main-menu ul > li > a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area4 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main8);
}
.vl-header-area4 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area4 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main8);
}
.vl-header-area4 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main8);
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main8);
top: 0;
left: 0;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main8);
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main8);
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area4 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area4 .vl-main-menu ul > li:hover a {
color: var(--vtc-text-white80per);
}
.vl-header-area4 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area4 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area4 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area4 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area4 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area4 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area4 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area4 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main8);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area4 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area4 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area4 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area4 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area4 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area4 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area4 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area4 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area4 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area4 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area4 .vl-home-thumb .btn-area1 .btn_theme5 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area4 .vl-home-thumb .btn-area1 .btn_theme5:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area4 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area4 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main8) !important;
}
.vl-header-area4 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area4 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area4.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-bg-main8);
}
.vl-header-area4.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area4.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area4.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area4.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area4.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area4.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area4 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area4 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main8);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
/*
::::::::::::::::::::::::::
NAV MENU 4 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 4 CSS
::::::::::::::::::::::::::
*/
.vl-header-area5 {
top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area5 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area5 {
top: 16px;
}
}
.vl-header-area5 .vl-main-menu {
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
border: 1px solid var(--vtc-bg-white10per);
padding: 16px 24px;
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area5 .vl-main-menu ul {
text-align: center;
}
.vl-header-area5 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area5 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area5 .vl-main-menu ul > li > a {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area5 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main12);
}
.vl-header-area5 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area5 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main12);
}
.vl-header-area5 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main12);
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main12);
top: 0;
left: 0;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main12);
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main12);
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area5 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area5 .vl-main-menu ul > li:hover a {
color: var(--vtc-text-white80per);
}
.vl-header-area5 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area5 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area5 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area5 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area5 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area5 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area5 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area5 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main12);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area5 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area5 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area5 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area5 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area5 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area5 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area5 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area5 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area5 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area5 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area5 .vl-home-thumb .btn-area1 .btn_theme5 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area5 .vl-home-thumb .btn-area1 .btn_theme5:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area5 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area5 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main12) !important;
}
.vl-header-area5 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area5 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area5.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-bg-main8);
}
.vl-header-area5.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area5.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area5.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area5.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area5.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area5.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area4 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area4 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main2);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
/*
::::::::::::::::::::::::::
NAV MENU 4 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 6 CSS
::::::::::::::::::::::::::
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area6 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area6 {
top: 16px;
}
}
.vl-header-area6 .vl-main-menu {
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area6 .vl-main-menu ul {
text-align: center;
}
.vl-header-area6 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area6 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area6 .vl-main-menu ul > li > a {
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area6 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main15);
}
.vl-header-area6 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area6 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main15);
}
.vl-header-area6 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main15);
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main15);
top: 0;
left: 0;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main15);
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main15);
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area6 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area6 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main15);
}
.vl-header-area6 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area6 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area6 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area6 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area6 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area6 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area6 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area6 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main15);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area6 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area6 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area6 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area6 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area6 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area6 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area6 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area6 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area6 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area6 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area6 .vl-home-thumb .btn-area1 .theme-btn13 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area6 .vl-home-thumb .btn-area1 .theme-btn13:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area6 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area6 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main15) !important;
}
.vl-header-area6 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -23px;
}
.vl-header-area6 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area6.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-bg-white);
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
.vl-header-area6.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area6.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area6.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area6.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area6.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area6.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area4 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area4 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main2);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
.vl-header-area6 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area6 .vl-header-action-item button {
border: 1px solid var(--vtc-text-title6);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
/*
::::::::::::::::::::::::::
NAV MENU 6 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 6 CSS
::::::::::::::::::::::::::
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area7 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area7 {
top: 16px;
}
}
.vl-header-area7 .vl-main-menu {
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area7 .vl-main-menu ul {
text-align: center;
}
.vl-header-area7 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area7 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area7 .vl-main-menu ul > li > a {
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area7 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area7 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main16);
top: 0;
left: 0;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area7 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area7 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area7 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area7 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area7 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area7 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area7 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area7 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area7 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main16);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area7 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area7 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area7 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area7 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area7 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area7 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area7 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area7 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area7 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area7 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area7 .vl-home-thumb .btn-area1 .theme-btn17 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area7 .vl-home-thumb .btn-area1 .theme-btn17:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area7 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area7 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main16);
}
.vl-header-area7 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -24px;
}
.vl-header-area7 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area7.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-text-title6);
box-shadow: 0px 4px 30px 0px rgba(139, 139, 139, 0.09);
}
.vl-header-area7.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area7.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area7.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area7.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area7.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area7.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area7 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area7 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
.vl-offcanvas {
position: fixed;
background: var(--vtc-bg-main2);
width: 450px;
z-index: 9999;
right: 0;
top: 0;
padding: 50px 40px;
height: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: 0.3s;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
@media only screen and (max-width: 450px) {
.vl-offcanvas {
width: 100%;
}
}
.vl-offcanvas-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vl-offcanvas-close-toggle {
font-size: var(--f-fs-font-24);
color: var(--vtc-text-title-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-offcanvas-header {
margin-bottom: 40px;
}
}
.vl-offcanvas-title {
font-size: 35px;
color: var(--ztc-text-text-1);
}
.vl-offcanvas-info span a {
display: block;
color: var(--ztc-text-text-1);
margin-bottom: 10px;
}
.vl-offcanvas-info span a i {
margin: 0 4px 0 0;
}
.vl-offcanvas-sm-title {
font-size: var(--ztc-font-size-font-s24);
color: var(--ztc-text-text-1);
}
.vl-offcanvas-social a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: var(--vtc-text-title-1);
border: 1px solid var(--vtc-text-white);
font-size: 14px;
}
.vl-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.45 easc-in-out;
background: rgba(24, 24, 24, 0.4);
}
.vl-offcanvas-overlay-open {
opacity: 0.7;
visibility: visible;
}
.vl-offcanvas .vl-offcanvas-logo {
height: 50px;
width: 122px;
-o-object-fit: contain;
object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button {
border: none;
background: none;
outline: none;
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-info a {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social h4 {
color: var(--vtc-text-white);
}
.vl-offcanvas .vl-offcanvas-social a {
color: var(--vtc-text-white);
margin-right: 4px;
}
.vl-offcanvas-menu ul {
list-style: none;
}
.vl-offcanvas-menu ul li {
position: relative;
}
.vl-offcanvas-menu ul li a {
padding: 8px 0;
display: block;
font-size: var(--f-fs-font-18);
font-weight: var(--f-fw-medium);
color: var(--vtc-text-white);
transition: all 0.4s;
}
.vl-offcanvas-menu ul li a span {
display: none;
}
.vl-offcanvas-menu ul li > a {
border-bottom: none;
}
.vl-offcanvas-menu ul li.active > a {
color: var(--vtc-text-white);
}
.vl-offcanvas-menu ul li.active > .vl-menu-close i {
transform: rotate(90deg);
}
.vl-offcanvas-menu ul li .sub-menu {
display: none;
padding-left: 20px;
}
.vl-menu-close {
position: absolute;
right: 0;
top: 7px;
border: 1px solid var(--vtc-text-white);
height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
line-height: 25px;
background: transparent;
color: var(--vtc-text-white);
border-radius: 4px;
}
.vl-menu-close i {
transition: 0.3s;
}
/*
::::::::::::::::::::::::::
NAV MENU 6 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 8 CSS
::::::::::::::::::::::::::
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area8 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area8 {
top: 16px;
}
}
.vl-header-area8 .vl-main-menu {
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area8 .vl-main-menu ul {
text-align: center;
}
.vl-header-area8 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area8 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area8 .vl-main-menu ul > li > a {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area8 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main17);
}
.vl-header-area8 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area8 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main17);
}
.vl-header-area8 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main17);
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main17);
top: 0;
left: 0;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main17);
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main17);
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area8 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area8 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main17);
}
.vl-header-area8 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area8 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area8 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area8 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area8 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area8 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area8 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area8 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main17);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area8 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area8 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area8 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area8 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area8 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area8 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area8 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area8 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area8 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area8 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area8 .vl-home-thumb .btn-area1 .theme-btn20 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area8 .vl-home-thumb .btn-area1 .theme-btn20:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area8 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area8 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main17) !important;
}
.vl-header-area8 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area8 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area8.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-text-white);
box-shadow: 0px 4px 30px 0px rgba(20, 20, 20, 0.09);
}
.vl-header-area8.header-sticky .header1-bg {
margin-top: 0px;
}
.vl-header-area8.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area8.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area8.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area8.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area8.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area8 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area8 .vl-header-action-item button {
border: 1px solid var(--vtc-text-title6);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
/*
::::::::::::::::::::::::::
NAV MENU 8 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
NAV MENU 9 CSS
::::::::::::::::::::::::::
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area9 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area9 {
top: 16px;
}
}
.vl-header-area9 .header1-bg {
padding: 16px;
background-color: var(--vtc-bg-white);
border-radius: 111px;
}
.vl-header-area9 .vl-main-menu {
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area9 .vl-main-menu ul {
text-align: center;
}
.vl-header-area9 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area9 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area9 .vl-main-menu ul > li > a {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area9 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main18);
}
.vl-header-area9 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area9 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main18);
}
.vl-header-area9 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main18);
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main18);
top: 0;
left: 0;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main18);
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main18);
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area9 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area9 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main18);
}
.vl-header-area9 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area9 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area9 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area9 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area9 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area9 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area9 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area9 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main18);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area9 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area9 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area9 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area9 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area9 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area9 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area9 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area9 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area9 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area9 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area9 .vl-home-thumb .btn-area1 .theme-btn24 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area9 .vl-home-thumb .btn-area1 .theme-btn24:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area9 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area9 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18) !important;
}
.vl-header-area9 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area9 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area9.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-text-white);
box-shadow: 0px 4px 30px 0px rgba(20, 20, 20, 0.09);
}
.vl-header-area9.header-sticky .header1-bg {
margin-top: 0px;
padding: 10px 0px;
}
.vl-header-area9.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area9.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area9.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area9.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area9.header-sticky {
padding: 10px 0px 10px 0px;
}
}
.vl-header-area9 .vl-header-btn {
transform: translateY(3px);
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area9 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area9 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
/*
::::::::::::::::::::::::::
NAV MENU 9 CSS
::::::::::::::::::::::::::
*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area10 {
top: 16px;
}
}
@media (max-width: 767px) {
.vl-header-area10 {
top: 16px;
}
}
.vl-header-area10 .vl-main-menu {
display: inline-block;
margin: auto;
text-align: end;
}
.vl-header-area10 .vl-main-menu ul {
text-align: center;
}
.vl-header-area10 .vl-main-menu ul > li {
display: inline-block;
position: relative;
}
.vl-header-area10 .vl-main-menu ul > li .span-arrow {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.vl-header-area10 .vl-main-menu ul > li > a {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
display: inline-block;
position: relative;
transition: 0.4s;
padding: 0 16px;
}
.vl-header-area10 .vl-main-menu ul > li > a.active {
color: var(--vtc-bg-main18);
}
.vl-header-area10 .vl-main-menu ul > li > a span {
transform: translateY(3px);
display: inline-block;
}
.vl-header-area10 .vl-main-menu ul > li > a:hover {
color: var(--vtc-bg-main18);
}
.vl-header-area10 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main18);
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu {
position: absolute;
top: 201%;
width: 220px;
left: 0;
background: #fff;
padding: 12px 20px 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
transition: 0.4s;
border-radius: 4px;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main18);
top: 0;
left: 0;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu.menu1 {
top: 20% !important;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li {
margin-right: 0;
display: block;
text-align: start;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li a {
color: var(--vtc-text-title1);
display: inline-block;
font-size: var(--f-fs-font-18);
line-height: var(--f-fs-font-18);
position: relative;
z-index: 1;
padding: 12px 0;
font-weight: var(--f-fw-normal);
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li a::after {
position: absolute;
content: "";
height: 45px;
width: 0px;
transition: all 0.4s;
left: -20px;
top: 2px;
right: auto;
z-index: 1;
background-color: var(--vtc-bg-main18);
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li a:hover {
color: red;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li a:hover::after {
width: 2px;
transition: all 0.4s;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li a:before {
display: none;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li .sub-menu {
left: 100%;
top: 201%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform-origin: top;
transform: scale(1, 0);
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li:hover > a {
color: var(--vtc-bg-main18);
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li:hover > a::after {
width: 3px;
}
.vl-header-area10 .vl-main-menu ul > li .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
}
.vl-header-area10 .vl-main-menu ul > li:hover a {
color: var(--vtc-bg-main18);
}
.vl-header-area10 .vl-main-menu ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 201%;
transform: scale(1);
transition: all 0.4s;
}
.vl-header-area10 .vl-main-menu-black ul li a {
color: var(--ztc-text-text-1);
opacity: 80%;
padding: 0 20px;
}
.vl-header-area10 .vl-main-menu-black ul li:hover a {
color: var(--vl-theme-orange);
}
.vl-header-area10 .vl-main-menu-black ul li .sub-menu li:hover > a {
color: var(--vl-theme-orange);
}
.vl-header-area10 .vl-main-menu ul > li:hover .vl-mega-menu {
opacity: 1;
visibility: visible;
transition: 0.3s;
top: 201%;
transform: scale(1);
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.vl-header-area10 .vl-mega-menu {
position: absolute;
left: -450px;
top: 100px;
width: 1298px;
background: #fff;
padding: 25px;
box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
opacity: 0;
visibility: hidden;
transition: 0.3s;
top: 201.3%;
transform: scale(1, 0);
transform-origin: top;
border-radius: 0px 0px 5px 5px;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area10 .vl-mega-menu {
width: 1140px;
left: -300px;
}
}
.vl-header-area10 .vl-mega-menu::after {
content: "";
position: absolute;
top: 0;
height: 2px;
width: 100%;
background-color: var(--vtc-bg-main18);
top: 0;
left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.vl-header-area10 .vl-mega-menu {
left: -162px;
width: 929px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.vl-header-area10 .vl-mega-menu {
width: auto;
opacity: 1;
visibility: visible;
transition: none;
position: static;
display: none;
transform: scale(1);
}
}
.vl-header-area10 .vl-home-thumb {
position: relative;
z-index: 1;
}
.vl-header-area10 .vl-home-thumb img {
height: 320px;
width: 100%;
border-radius: 4px;
border: 1px solid #E5E7EB;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.vl-header-area10 .vl-home-thumb img {
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area10 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
@media (max-width: 767px) {
.vl-header-area10 .vl-home-thumb img {
-o-object-fit: contain;
object-fit: contain;
}
}
.vl-header-area10 .vl-home-thumb .img1 {
position: relative;
z-index: 1;
}
.vl-header-area10 .vl-home-thumb .img1::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
transition: all 0.4s;
top: 0;
background: var(--vtc-text-title1);
border-radius: 4px;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
.vl-header-area10 .vl-home-thumb .btn-area1 {
position: absolute;
top: 0;
left: 0px;
right: 0%;
transition: all 0.6s;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.vl-header-area10 .vl-home-thumb .btn-area1 .theme-btn28 {
margin-top: 12px;
color: var(--vtc-text-white) !important;
}
.vl-header-area10 .vl-home-thumb .btn-area1 .theme-btn28:hover {
color: var(--vtc-text-white) !important;
}
.vl-header-area10 .vl-home-thumb a.text {
font-size: var(--f-fs-font-18);
line-height: 18px;
font-weight: var(--f-fw-medium);
color: var(--vtc-text-title-2) !important;
transition: all 0.4s;
display: inline-flex;
padding-top: 16px;
text-align: center;
transition: all 0.4s;
}
.vl-header-area10 .vl-home-thumb a.text:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18) !important;
}
.vl-header-area10 .vl-home-thumb:hover .btn-area1 {
visibility: visible;
opacity: 1;
transition: all 0.6s;
top: 40%;
margin-top: -22px;
}
.vl-header-area10 .vl-home-thumb:hover .img1::after {
transform: scale(1);
transition: all 0.4s;
visibility: visible;
opacity: 0.5;
}
.vl-header-area10.header-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
background-color: var(--vtc-text-white);
box-shadow: 0px 4px 30px 0px rgba(20, 20, 20, 0.09);
}
.vl-header-area10.header-sticky .header1-bg {
margin-top: 0px;
padding: 10px 0px;
}
.vl-header-area10.header-sticky .header1-bg::after {
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area10.header-sticky .header1-bg {
box-shadow: none;
}
}
@media (max-width: 767px) {
.vl-header-area10.header-sticky .header1-bg {
box-shadow: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.vl-header-area10.header-sticky {
padding: 10px 0px 10px 0px;
}
}
@media (max-width: 767px) {
.vl-header-area10.header-sticky {
padding: 10px 0px 10px 0px;
}
}
.vl-header-area10 .vl-header-btn {
transform: translateY(3px);
}
@keyframes vlfadeInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.vlfadeInDown {
animation: vlfadeInDown 1s ease-out forwards;
}
/*
::::::::::::::::::::::::::
NAV MENU 1 CSS
::::::::::::::::::::::::::
*/
/*============= HEADER CSS AREA ENDS ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.vl-header-area9 .vl-header-action-item {
float: right;
padding: 6px;
border-radius: 4px;
}
.vl-header-area9 .vl-header-action-item button {
border: 1px solid var(--vtc-text-white);
outline: none;
background: none;
transition: all 0.4s;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
font-size: var(--f-fs-font-22);
}
/*
::::::::::::::::::::::::::
NAV MENU 9 CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
ABOUT AREA CSS
::::::::::::::::::::::::::
*/
.about2-images {
position: relative;
height: 640px;
}
@media (max-width: 767px) {
.about2-images {
height: 440px;
}
}
.about2-images .shape-bg1 {
position: absolute;
top: 0;
left: 0;
transform: scale(1.1);
}
.about2-images .shape-bg2 {
position: relative;
top: 0;
right: 0;
left: 0;
transform: scale(1.3);
z-index: -2;
}
.about2-images .shape-bg2 .stop-color1 {
stop-color: #F5F5FD;
}
.about2-images .shape-bg2 .stop-color2 {
stop-color: #F5F5FD;
}
@media (max-width: 767px) {
.about2-images .shape-bg2 {
position: relative;
top: 0;
right: 0;
z-index: -2;
}
}
.about2-images .main-image {
position: absolute;
top: 0;
}
.circle-progress-area1 .progresbar {
position: relative;
text-align: center;
height: 150px;
margin-top: 40px;
}
.circle-progress-area1 .progresbar .progressbar {
position: relative;
height: 100px;
}
.circle-progress-area1 .progresbar .progressbar .progress-number {
position: absolute;
top: 33px;
left: 50%;
margin-left: -18px;
color: var(--vtc-text-title4);
text-align: center;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.circle-progress-area1 .progresbar p {
color: var(--vtc-text-title4);
text-align: center;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.about3-iamges {
position: relative;
height: 570px;
z-index: 2;
}
@media (max-width: 767px) {
.about3-iamges {
height: 400px;
}
}
.about3-iamges .shape1 {
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.about3-iamges .shape2 {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.about3-iamges .image1 {
margin-left: 40px;
}
.about2-list li {
margin-top: 16px;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-flex;
align-items: center;
}
.about2-list li .check {
display: inline-block;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
border-radius: 50%;
background-color: var(--vtc-bg-main5);
color: var(--vtc-bg-white);
font-size: 14px;
margin-right: 6px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about3 .heading3 {
margin-top: 50px;
}
}
@media (max-width: 767px) {
.about3 .heading3 {
margin-top: 50px;
}
}
.about4 {
position: relative;
z-index: 3;
}
.about4 .shape1 {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.about6-images {
position: relative;
height: 560px;
}
.about6-images .shape-bg {
position: absolute;
left: 0;
top: 50px;
}
.about6-images .image {
position: absolute;
left: 0;
top: 0;
}
.aobut8-images {
position: relative;
height: 520px;
}
.aobut8-images .shape {
position: absolute;
top: 0;
left: 0;
}
.aobut8-images .image {
position: absolute;
top: 40px;
left: 0;
}
/*
::::::::::::::::::::::::::
ABOUT AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
SERVICE AREA CSS
::::::::::::::::::::::::::
*/
.service1 {
z-index: 2;
overflow: hidden;
}
.service1 .shape1 {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.service1 .shape2 {
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.service1-box {
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 32px;
transition: all 0.4s;
}
.service1-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
background-color: var(--vtc-bg-common-3);
}
.service1-box .icon img {
transition: all 0.4s;
}
.service1-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service1-box:hover .icon {
transition: all 0.4s;
}
.service1-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service1-box.add-shadow {
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.09);
}
.service2-box {
padding: 40px 32px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.09);
text-align: center;
transition: all 0.4s;
}
.service2-box .icon img {
transition: all 0.4s;
}
.service2-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service2-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service3-box {
display: flex;
align-items: start;
background-color: var(--vtc-bg-common-6);
border-radius: 8px;
padding: 28px 32px;
transition: all 0.4s;
}
.service3-box .icon {
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
}
.service3-box .icon img {
transition: all 0.4s;
}
.service3-box .heading3 {
padding-left: 20px;
}
.service3-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service3-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service3 .center-shape {
margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service3 .center-shape {
display: none;
}
}
@media (max-width: 767px) {
.service3 .center-shape {
display: none;
}
}
.service4 {
z-index: 1;
}
.service4 .sec-shape {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.service4-box {
background-color: var(--vtc-bg-white);
padding: 0px 32px 32px 32px;
border-radius: 8px;
transition: all 0.4s;
}
.service4-box .icon {
background-color: var(--vtc-bg-common-3);
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
transform: translateY(-45px);
}
.service4-box .icon img {
transition: all 0.4s;
}
.service4-box .heading4 {
margin-top: -20px;
}
.service4-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service4-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service5-tab-buttons {
margin-top: 30px;
}
.service5-tab-buttons .nav {
display: flex;
align-items: center;
justify-content: center;
}
.service5-tab-buttons .nav-link {
background: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 55px 20px 24px 20px;
position: relative;
margin: 60px 15px 0px;
width: 220px;
}
.service5-tab-buttons .nav-link .icon {
display: block;
height: 80px;
width: 80px;
text-align: center;
line-height: 70px;
border-radius: 50%;
background-color: var(--vtc-bg-main14);
position: absolute;
border: 5px solid var(--vtc-bg-common-7);
top: -40px;
left: 50%;
margin-left: -40px;
}
.service5-tab-buttons .nav-link .text {
display: block;
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 100% */
}
.service5-tab-buttons .nav-link.active {
background-color: var(--vtc-bg-main14);
}
.service5-tab-content-area {
margin-top: 60px;
margin-left: 40px;
}
.service5-tab-content-area span.title {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
text-transform: uppercase;
margin-bottom: 16px;
display: inline-block;
}
.service5-tab-content-area h3 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-36);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 122.222% */
}
.service5-tab-content-area P {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-26); /* 162.5% */
}
.service5-tab-content-area .list ul li {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
margin-top: 18px;
display: inline-flex;
align-items: center;
}
.service5-tab-content-area .list ul li .check {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
background-color: var(--vtc-bg-main14);
font-size: 12px;
margin-right: 8px;
}
.service5-tab-images {
height: 500px;
position: relative;
text-align: end;
z-index: 2;
margin-top: 60px;
}
@media (max-width: 767px) {
.service5-tab-images {
height: 380px;
}
}
.service5-tab-images .bg-shape {
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.service5 {
position: relative;
}
.service5 .sec-shape {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.service-page-faq .faq-page-image {
position: relative;
z-index: 1;
}
.service-page-faq .faq-page-image .shape {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.service-details2-single-box {
border-radius: 8px;
background: var(--vtc-bg-white);
box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 0.09);
padding: 30px 24px;
text-align: center;
transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service-details2-single-box {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.service-details2-single-box {
margin-top: 30px;
}
}
.service-details2-single-box .icon img {
transition: all 0.4s;
}
.service-details2-single-box .content h4 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
padding-top: 22px;
}
.service-details2-single-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service-details2-single-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service-detials2-boxs {
margin-top: -100px;
position: relative;
z-index: 2;
}
.service-details2-box {
display: flex;
align-items: start;
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 28px 32px;
transition: all 0.4s;
}
.service-details2-box .icon {
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: var(--vtc-bg-common-2);
}
.service-details2-box .icon img {
transition: all 0.4s;
}
.service-details2-box .heading3 {
padding-left: 20px;
}
.service-details2-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service-details2-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service-details4-bottom-boxs {
border-radius: 10px;
background: var(--vtc-bg-white);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.09);
border-radius: 16px;
padding: 0px 0px 50px 0px;
position: relative;
z-index: 2;
margin-top: -140px;
}
.service-details3-bottom-box {
margin: 0px 40px;
transition: all 0.4s;
position: relative;
}
.service-details3-bottom-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
background-color: var(--vtc-bg-common-2);
margin: auto;
}
.service-details3-bottom-box .icon img {
transition: all 0.4s;
}
.service-details3-bottom-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service-details3-bottom-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service-details3-bottom-box .arrow-shape1 {
position: absolute;
top: 30px;
right: -130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service-details3-bottom-box .arrow-shape1 {
display: none;
}
}
@media (max-width: 767px) {
.service-details3-bottom-box .arrow-shape1 {
display: none;
}
}
.service-details5-bottom-sec {
margin-top: -150px;
position: relative;
}
.service6-box {
padding: 32px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
text-align: center;
transition: all 0.4s;
}
.service6-box .icon img {
transition: all 0.4s;
}
.service6-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service6-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service9 {
background-color: var(--vtc-bg-white10per);
}
.service9-box {
display: flex;
align-items: start;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 8px;
padding: 28px 32px;
transition: all 0.4s;
}
.service9-box .icon {
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
}
.service9-box .icon img {
transition: all 0.4s;
}
.service9-box .heading9-w {
padding-left: 20px;
}
.service9-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
border: 1px solid var(--vtc-bg-main18);
}
.service9-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service10-box {
display: flex;
align-items: start;
background-color: var(--vtc-bg-common-10);
border-radius: 8px;
padding: 28px 32px;
transition: all 0.4s;
}
.service10-box .icon {
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
}
.service10-box .icon img {
transition: all 0.4s;
}
.service10-box .heading10 {
padding-left: 20px;
}
.service10-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service10-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service7-box {
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 32px;
transition: all 0.4s;
border: 1px solid var(--vtc-bg-white10per);
}
.service7-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
}
.service7-box .icon img {
transition: all 0.4s;
}
.service7-box .learn {
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 100% */
display: inline-block;
transition: all 0.4s;
margin-top: 24px;
}
.service7-box .learn span {
display: inline-block;
transform: rotate(-45deg);
}
.service7-box .learn:hover {
color: var(--vtc-bg-main16);
}
.service7-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
border: 1px solid var(--vtc-bg-main16);
}
.service7-box:hover .icon {
transition: all 0.4s;
}
.service7-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.service7-box.add-shadow {
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.09);
}
.service8-box {
display: flex;
align-items: start;
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 28px 32px;
transition: all 0.4s;
}
.service8-box .icon {
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: var(--vtc-bg-common-15);
}
.service8-box .icon img {
transition: all 0.4s;
}
.service8-box .heading8 {
padding-left: 20px;
}
.service8-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.service8-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
/*
::::::::::::::::::::::::::
SERVICE AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FAQ AREA CSS
::::::::::::::::::::::::::
*/
.faq-page-sec .faq-page-image {
position: relative;
z-index: 2;
}
.faq-page-sec .faq-page-image .shape {
position: absolute;
right: 50px;
top: 0;
transform: scale(1.3);
z-index: -1;
}
.faq-page-sec .faq-tab-buttons {
background-color: var(--vtc-bg-common-2);
border-radius: 111px;
padding: 16px 24px;
}
.faq-page-sec .faq-tab-buttons .nav {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 0 !important;
}
.faq-page-sec .faq-tab-buttons .nav li button {
color: var(--Text-Color, #0B1A33);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 18px; /* 100% */
text-transform: uppercase;
padding: 16px 20px;
border-radius: 111px;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
}
.faq-page-sec .faq-tab-buttons .nav li button:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main1);
}
.faq-page-sec .faq-tab-buttons .nav li button.active {
transition: all 0.4s;
background-color: var(--vtc-bg-main1);
}
.faq-content {
position: relative;
}
.faq-content .accordion .accordion-item {
border: none;
border-radius: 14px;
background: none;
margin-top: 20px;
transition: all 0.4s;
background-color: var(--vtc-bg-common-2);
}
.faq-content .accordion .accordion-item button {
border: none;
background: none;
padding: 24px;
color: var(--vtc-text-title-1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: 600;
line-height: var(--f-fs-font-18); /* 100% */
text-transform: capitalize;
position: relative;
}
@media (max-width: 767px) {
.faq-content .accordion .accordion-item button {
font-size: 20px;
line-height: 26px;
padding: 20px;
}
}
.faq-content .accordion .accordion-item button:focus {
outline: none;
box-shadow: none;
}
.faq-content .accordion .accordion-item button::before {
content: "";
position: absolute;
right: 18px;
top: 15px;
height: 28px;
width: 28px;
border-radius: 50%;
z-index: 1;
background: var(--vtc-bg-main2);
}
@media (max-width: 767px) {
.faq-content .accordion .accordion-item button::before {
display: none;
}
}
.faq-content .accordion .accordion-item button::after {
filter: brightness(0) invert(1);
z-index: 3;
height: 14px;
width: 22px;
left: 4px;
bottom: 6px;
position: relative;
}
.faq-content .accordion .accordion-item .accordion-body {
color: rgba(255, 255, 255, 0.9098039216);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 155.556% */
padding-left: 28px;
margin-top: -20px;
padding-bottom: 28px;
padding-right: 80px;
text-align: start;
}
@media (max-width: 767px) {
.faq-content .accordion .accordion-item .accordion-body {
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
}
.faq-content .accordion .accordion-item.active {
transition: all 0.4s;
border-radius: 14px;
background: var(--vtc-bg-main2);
}
.faq-content .accordion .accordion-item.active button {
color: #fff;
}
.faq-content .accordion .accordion-item.active button::before {
content: "";
position: absolute;
right: 18px;
top: 19px;
height: 28px;
width: 28px;
border-radius: 50%;
z-index: 1;
background: #fff;
}
.faq-content .accordion .accordion-item.active button::after {
filter: brightness(0);
height: 14px;
width: 22px;
left: 2px;
bottom: 0px;
position: relative;
}
.faq-content .accordion-button:not(.collapsed) {
color: var(--bs-accordion-active-color);
background-color: var(--bs-accordion-active-bg);
box-shadow: none;
}
/*
::::::::::::::::::::::::::
FAQ AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
CASE STUDY AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
CASE STUDY AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
CHOOSE AREA CSS
::::::::::::::::::::::::::
*/
.choose5-box {
margin: 0px 40px;
transition: all 0.4s;
position: relative;
}
.choose5-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
margin: auto;
position: relative;
z-index: 2;
}
.choose5-box .icon::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-main14);
border-radius: 50%;
z-index: -1;
transition: all 0.4s;
}
.choose5-box .icon img {
transition: all 0.4s;
}
.choose5-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.choose5-box:hover .icon::after {
background: var(--vtc-bg-main10);
transition: all 0.4s;
}
.choose5-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.choose5-box .arrow-shape1 {
position: absolute;
top: 30px;
right: -130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.choose5-box .arrow-shape1 {
display: none;
}
}
@media (max-width: 767px) {
.choose5-box .arrow-shape1 {
display: none;
}
}
.choose5 {
z-index: 2;
}
.choose5 .sec-shape {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.choose6-box {
margin: 0px 40px;
transition: all 0.4s;
position: relative;
}
.choose6-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
margin: auto;
position: relative;
z-index: 2;
}
.choose6-box .icon::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-white10per);
border-radius: 50%;
border: 1px solid var(--vtc-bg-white10per);
z-index: -1;
transition: all 0.4s;
}
.choose6-box .icon img {
transition: all 0.4s;
}
.choose6-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.choose6-box:hover .icon::after {
background: var(--vtc-bg-main18);
transition: all 0.4s;
}
.choose6-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.choose6-box .arrow-shape1 {
position: absolute;
top: 30px;
right: -130px;
}
.choose6-box .arrow-shape1 img {
filter: brightness(0) invert(1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.choose6-box .arrow-shape1 {
display: none;
}
}
@media (max-width: 767px) {
.choose6-box .arrow-shape1 {
display: none;
}
}
.choose6-icon-list {
padding-top: 10px;
}
.choose6-icon-list ul li {
color: var(--6th-Text, #0A0A0A);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 100% */
text-transform: capitalize;
display: flex;
align-items: center;
margin-top: 16px;
}
.choose6-icon-list ul li .check {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
font-size: 12px;
background-color: var(--vtc-bg-main15);
border-radius: 50%;
line-height: 20px;
color: var(--vtc-text-white);
margin-right: 6px;
}
.choose6-images {
height: 540px;
position: relative;
text-align: end;
z-index: 2;
}
.choose6-images .shape-bg {
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.choose7-box {
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
padding: 24px 16px;
border-radius: 8px;
display: flex;
align-items: start;
transition: all 0.4s;
}
.choose7-box .icon {
height: 88px;
width: 88px;
text-align: center;
line-height: 88px;
border: 1px solid var(--vtc-bg-white10per);
border-radius: 50%;
background-color: var(--vtc-bg-white10per);
}
.choose7-box .content {
padding-left: 20px;
}
.choose7-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
border: 1px solid var(--vtc-bg-main16);
}
.choose7-images {
text-align: end;
height: 630px;
position: relative;
}
.choose7-images .image {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.choose7-images .bg-shape {
transform: translateY(50px);
}
/*
::::::::::::::::::::::::::
CHOOSE AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
TEAM AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
TEAM AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
TESTIMONIAL AREA CSS
::::::::::::::::::::::::::
*/
.tes1-shape-bg {
position: relative;
}
.tes1-shape-bg::after {
content: "";
position: absolute;
top: 0;
right: -58px;
height: 100%;
width: 100%;
background-image: url(../img/shapes/tes1-shape.png);
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
transform: scale(1.5);
}
.tes1 {
position: relative;
z-index: 1;
overflow: hidden;
}
.tes1 .shape1 {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .slider-area {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.tes1 .slider-area {
margin-top: 40px;
}
}
.tes1 .testimonial-horizental-slider2 {
margin-top: 0px;
}
.tes1 .testimonial-vertical {
background-color: var(--vtc-bg-white);
padding: 32px;
border-radius: 8px;
}
.tes1 .testimonial-vertical .stars {
padding-bottom: 16px;
}
.tes1 .testimonial-vertical .stars ul li {
color: #FB8500;
display: inline-block;
padding: 0px 2px;
border-radius: 2px;
background: rgba(17, 17, 17, 0.06);
padding: 2px 4px 2px 4px;
margin: 0px 2px;
}
.tes1 .testimonial-vertical p {
color: rgba(17, 17, 17, 0.8);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
}
.tes1 .testimonial-vertical .bottom-area-all {
justify-content: space-between;
display: flex;
align-items: center;
padding-top: 24px;
}
@media (max-width: 767px) {
.tes1 .testimonial-vertical .bottom-area-all .brand-logo {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-vertical .bottom-area-all {
display: block;
}
}
.tes1 .testimonial-vertical .bottom-area-all .author-area {
display: flex;
align-items: center;
}
.tes1 .testimonial-vertical .bottom-area-all .text {
padding-left: 20px;
}
.tes1 .testimonial-vertical .bottom-area-all .text h4 a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
}
.tes1 .testimonial-vertical .bottom-area-all .text p {
font-size: 16px;
}
.tes1 .slider-boxarea2 .slider-box {
display: flex;
align-items: center;
border-radius: 8px;
background: var(--vtc-bg-white);
padding: 20px;
margin-bottom: 20px;
margin-right: 30px;
}
.tes1 .slider-boxarea2 .slider-box .img1 img {
height: 50px;
width: 50px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.tes1 .slider-boxarea2 .slider-box .content a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
display: inline-block;
transition: all 0.4s;
}
.tes1 .slider-boxarea2 .slider-box .content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .slider-boxarea2 .slider-box {
margin-right: 200px;
}
}
@media (max-width: 767px) {
.tes1 .slider-boxarea2 .slider-box {
margin-right: 0;
}
}
.tes1 .slider-boxarea2 .slider-box .content {
padding-left: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .testimonial-horizental-slider2 {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-horizental-slider2 {
margin-top: 30px;
}
}
.tes1 .testimonial-horizental-slider2 .testimonial-vertical .verical-boxarea {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 767px) {
.tes1 .testimonial-horizental-slider2 .testimonial-vertical .verical-boxarea {
display: inline-block;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-horizental-slider2 .testimonial-vertical .verical-boxarea .quito {
margin-top: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .tes1-arrows {
position: absolute;
right: 50px;
top: 50%;
margin-top: -75px;
left: inherit;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-arrows {
position: relative;
right: 0;
left: 0;
top: 0;
text-align: center;
display: flex;
justify-content: center;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-arrows .prev-arrow {
margin-bottom: 0;
margin: 0 16px 0 0;
}
}
.tes1-arrows {
margin-top: 40px;
margin-right: 10px;
position: absolute;
left: -90px;
top: 50%;
margin-top: -65px;
}
.tes1-arrows button {
display: inline-block;
border: none;
border-radius: 50%;
height: 56px;
width: 56px;
text-align: center;
line-height: 56px;
background-color: var(--vtc-bg-main1);
font-size: var(--f-fs-font-20);
color: var(--vtc-text-title1);
transition: all 0.4s;
margin-right: 5px;
}
.tes1-arrows button:hover {
background-color: var(--vtc-bg-main2);
color: var(--vtc-bg-white);
}
.tes1-arrows .next-arrow {
margin-top: 16px;
}
@media (max-width: 767px) {
.tes2 {
padding-bottom: 150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes2 .main-image {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tes2 .main-image {
margin-bottom: 40px;
}
}
.tes2 .tes2-all {
margin-right: 100px;
background-color: #fff;
border-radius: 8px;
padding: 32px;
position: relative;
}
@media (max-width: 767px) {
.tes2 .tes2-all {
margin-right: 0;
}
}
.tes2 .tes2-all p.text {
color: var(--Home-Page-7-Main-Color, #0B101F);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 144.444% */
padding: 16px 0;
}
.tes2 .tes2-all .star ul li {
display: inline-block;
color: #FFA800;
margin: 0px 3px;
}
.tes2 .tes2-all .bottom {
padding-top: 5px;
}
.tes2 .tes2-all .bottom .info {
display: flex;
align-items: center;
}
.tes2 .tes2-all .bottom .content {
padding-left: 12px;
}
.tes2 .tes2-all .bottom h6 a {
display: inline-block;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
}
.tes2 .tes2-all .bottom .position {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-top: 10px;
}
.tes2 .tes2-all .pagination-buttons {
position: absolute;
right: -90px;
top: 50%;
margin-top: -61px;
}
@media (max-width: 767px) {
.tes2 .tes2-all .pagination-buttons {
margin-top: 30px;
top: 100%;
display: flex;
align-items: center;
left: 0;
}
}
.tes2 .tes2-all .pagination-buttons button {
font-size: 20px;
height: 56px;
width: 56px;
line-height: 56px;
text-align: center;
border-radius: 50%;
margin: 5px 0px;
border: none;
background: var(--vtc-bg-white);
color: var(--vtc-bg-main14);
transition: all 0.4s;
position: relative;
z-index: 2;
}
.tes2 .tes2-all .pagination-buttons button::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-main3);
z-index: -1;
border-radius: 50%;
opacity: 0;
transition: all 0.4s;
}
@media (max-width: 767px) {
.tes2 .tes2-all .pagination-buttons button {
margin-right: 20px;
}
}
.tes2 .tes2-all .pagination-buttons button:nth-child(1) {
transform: rotate(-90deg);
}
.tes2 .tes2-all .pagination-buttons button:hover {
transition: all 0.4s;
color: var(--vtc-bg-white);
}
.tes2 .tes2-all .pagination-buttons button:hover::after {
opacity: 1;
transition: all 0.4s;
}
.tes3 .tes3-buttons {
text-align: end;
}
.tes3 .tes3-buttons button {
height: 56px;
width: 56px;
text-align: center;
line-height: 56px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
border: none;
font-size: var(--f-fs-font-20);
margin-right: 5px;
color: var(--vtc-bg-main5);
transition: all 0.4s;
}
.tes3 .tes3-buttons button:hover {
transition: all 0.4s;
color: var(--vtc-bg-white);
background-color: var(--vtc-bg-main5);
}
.tes3-single-slider {
background-color: var(--vtc-bg-white);
padding: 32px 28px;
border-radius: 8px;
margin: 0px 15px;
}
.tes3-single-slider .author-area {
display: flex;
align-items: center;
}
.tes3-single-slider .author-area .author-text {
padding-left: 16px;
}
.tes3-single-slider .author-area .author-text h4 a {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
transition: all 0.4s;
}
.tes3-single-slider .author-area .author-text h4 a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main5);
}
.tes3-single-slider .author-area .author-text p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-top: 10px;
}
.tes3-single-slider p {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-26); /* 144.444% */
padding: 24px 0px;
}
.tes3-single-slider .review-area {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--vtc-border-1);
padding-top: 24px;
}
.tes3-single-slider .review-area .stars ul li {
display: inline-block;
color: #FFA800;
}
.tes4-shape-bg {
position: relative;
}
.tes4-shape-bg::after {
content: "";
position: absolute;
top: 0;
right: -58px;
height: 100%;
width: 100%;
background-image: url(../img/shapes/tes1-shape.png);
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
transform: scale(1.5);
}
.tes4 {
position: relative;
z-index: 1;
overflow: hidden;
}
.tes4 .shape1 {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes4 .slider-area {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.tes4 .slider-area {
margin-top: 40px;
}
}
.tes4 .testimonial-horizental-slider2 {
margin-top: 0px;
}
.tes4 .testimonial-vertical {
background-color: var(--vtc-bg-white);
padding: 32px;
border-radius: 8px;
}
.tes4 .testimonial-vertical .stars {
padding-bottom: 16px;
}
.tes4 .testimonial-vertical .stars ul li {
color: #FB8500;
display: inline-block;
padding: 0px 2px;
border-radius: 2px;
background: rgba(17, 17, 17, 0.06);
padding: 2px 4px 2px 4px;
margin: 0px 2px;
}
.tes4 .testimonial-vertical p {
color: rgba(17, 17, 17, 0.8);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
}
.tes4 .testimonial-vertical .bottom-area-all {
justify-content: space-between;
display: flex;
align-items: center;
padding-top: 24px;
}
@media (max-width: 767px) {
.tes4 .testimonial-vertical .bottom-area-all .brand-logo {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.tes4 .testimonial-vertical .bottom-area-all {
display: block;
}
}
.tes4 .testimonial-vertical .bottom-area-all .author-area {
display: flex;
align-items: center;
}
.tes4 .testimonial-vertical .bottom-area-all .text {
padding-left: 20px;
}
.tes4 .testimonial-vertical .bottom-area-all .text h4 a {
display: inline-block;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
}
.tes4 .testimonial-vertical .bottom-area-all .text p {
font-size: 16px;
}
.tes4 .slider-boxarea2 .slider-box {
display: flex;
align-items: center;
border-radius: 8px;
background: var(--vtc-bg-white);
padding: 20px;
margin-bottom: 20px;
margin-right: 30px;
}
.tes4 .slider-boxarea2 .slider-box .img1 img {
height: 50px;
width: 50px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.tes4 .slider-boxarea2 .slider-box .content a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
display: inline-block;
transition: all 0.4s;
}
.tes4 .slider-boxarea2 .slider-box .content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .slider-boxarea2 .slider-box {
margin-right: 200px;
}
}
@media (max-width: 767px) {
.tes1 .slider-boxarea2 .slider-box {
margin-right: 0;
}
}
.tes1 .slider-boxarea2 .slider-box .content {
padding-left: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .testimonial-horizental-slider2 {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-horizental-slider2 {
margin-top: 30px;
}
}
.tes1 .testimonial-horizental-slider2 .testimonial-vertical .verical-boxarea {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 767px) {
.tes1 .testimonial-horizental-slider2 .testimonial-vertical .verical-boxarea {
display: inline-block;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-horizental-slider2 .testimonial-vertical .verical-boxarea .quito {
margin-top: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes1 .tes1-arrows {
position: absolute;
right: 50px;
top: 50%;
margin-top: -75px;
left: inherit;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-arrows {
position: relative;
right: 0;
left: 0;
top: 0;
text-align: center;
display: flex;
justify-content: center;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tes1 .testimonial-arrows .prev-arrow {
margin-bottom: 0;
margin: 0 16px 0 0;
}
}
.tes4-arrows {
margin-top: 40px;
margin-right: 10px;
position: absolute;
left: -90px;
top: 50%;
margin-top: -65px;
}
.tes4-arrows button {
display: inline-block;
border: none;
border-radius: 50%;
height: 56px;
width: 56px;
text-align: center;
background: var(--vtc-bg-main9);
line-height: 56px;
font-size: var(--f-fs-font-20);
color: var(--vtc-text-title1);
transition: all 0.4s;
margin-right: 5px;
position: relative;
z-index: 2;
overflow: hidden;
}
.tes4-arrows button::after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: var(--vtc-bg-main4);
z-index: -1;
transition: all 0.4s;
opacity: 0;
}
.tes4-arrows button:hover {
color: var(--vtc-bg-white);
}
.tes4-arrows button:hover::after {
opacity: 1;
transition: all 0.4s;
}
.tes4-arrows .next-arrow {
margin-top: 16px;
}
.testimonials-2 .sec-shape {
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.testimonials-2 .left {
position: relative;
}
.testimonials-2 .left .swiper-button-next,
.testimonials-2 .left .swiper-button-prev {
width: 60px;
height: 60px;
border-radius: 50%;
top: 50%;
z-index: 99;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-2 .left .swiper-button-next,
.testimonials-2 .left .swiper-button-prev {
top: 110%;
}
}
@media (max-width: 767px) {
.testimonials-2 .left .swiper-button-next,
.testimonials-2 .left .swiper-button-prev {
top: 110%;
}
}
.testimonials-2 .left .swiper-button-next::after,
.testimonials-2 .left .swiper-button-prev::after {
display: none;
}
.testimonials-2 .left .swiper-pagination span {
font-size: 16px;
font-weight: 400;
}
.testimonials-2 .left .swiper-pagination .swiper-pagination-current {
margin-right: -4px;
}
.testimonials-2 .left .swiper-pagination .swiper-pagination-total {
margin-left: -4px;
}
.testimonials-2 .block-text .heading {
text-transform: capitalize;
margin-bottom: 15px;
}
.testimonials-2 .block-text .desc {
font-size: 20px;
padding: 0 100px;
}
@media only screen and (max-width: 1200px) {
.testimonials-2 .block-text .desc {
padding: 0;
}
}
.testimonials-2 .swiper-testimonial-2 {
margin-top: 47px;
border-radius: 4px;
background-color: var(--vtc-bg-common-bg1);
}
.testimonials-2 .testimonials-box-2 {
border-radius: 12px;
background: var(--vtc-bg-white10per);
padding: 32px 50px 32px 32px;
}
@media (max-width: 767px) {
.testimonials-2 .testimonials-box-2 {
padding: 20px;
}
}
.testimonials-2 .testimonials-box-2 h6 {
margin-bottom: 10px;
}
.testimonials-2 .testimonials-box-2 .text {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-32); /* 145.455% */
}
@media (max-width: 767px) {
.testimonials-2 .testimonials-box-2 .text {
font-size: 18px;
line-height: 28px;
}
}
.testimonials-2 .testimonials-box-2 .icon {
margin-bottom: 10px;
}
.testimonials-2 .testimonials-box-2 .bottom {
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonials-2 .testimonials-box-2 .bottom .content h6 a {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-24); /* 100% */
}
.testimonials-2 .testimonials-box-2 .bottom .content p {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.testimonials-2 .testimonials-box-2 .bottom .info {
display: flex;
}
.testimonials-2 .testimonials-box-2 .bottom .info img {
min-width: 60px;
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
}
.testimonials-2 .testimonials-box-2 .bottom .info .content {
padding-top: 6px;
}
.testimonials-2 .testimonials-box-2 .bottom img {
width: 35.28px;
height: 40.1px;
}
.testimonials-2 .map-testimonial {
position: relative;
width: 666px;
height: 433.01px;
}
@media only screen and (max-width: 1200px) {
.testimonials-2 .map-testimonial {
margin-top: 80px;
}
}
@media only screen and (max-width: 1024px) {
.testimonials-2 .map-testimonial {
width: 100%;
}
.testimonials-2 .map-testimonial img {
width: 100%;
}
}
.testimonials-2 .map-testimonial img.map {
position: absolute;
top: 69px;
left: 24px;
}
.testimonials-2 .map-testimonial .swiper-thumb2 {
width: 100%;
height: 100%;
}
.testimonials-2 .map-testimonial .swiper-slide {
position: absolute;
z-index: 9;
width: 56px;
height: 56px;
cursor: pointer;
}
.testimonials-2 .map-testimonial .swiper-slide div {
width: 56px;
height: 56px;
border: 4px solid rgba(90, 100, 245, 0.2745098039);
border-radius: 50%;
position: relative;
box-shadow: 0px 10px 25px rgba(71, 92, 133, 0.1);
}
.testimonials-2 .map-testimonial .swiper-slide div::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 58px;
height: 58px;
border-radius: 50%;
border: 2px solid var(--vtc-bg-main12);
opacity: 0;
}
.testimonials-2 .map-testimonial .swiper-slide div img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.testimonials-2 .map-testimonial .swiper-slide div::after {
content: "";
position: absolute;
top: 0;
left: 0;
top: auto;
border-color: var(--vtc-bg-white10per) transparent transparent transparent;
border-style: solid;
border-width: 12px 6px 0px 6px;
height: 0px;
width: 0px;
left: 50%;
transform: translateX(-50%);
bottom: -14px;
}
.testimonials-2 .map-testimonial .swiper-slide.swiper-slide-thumb-active div::after {
content: "";
position: absolute;
top: 0;
left: 0;
top: auto;
border-color: var(--vtc-bg-main12) transparent transparent transparent;
border-style: solid;
border-width: 12px 6px 0px 6px;
height: 0px;
width: 0px;
left: 50%;
transform: translateX(-50%);
bottom: -14px;
}
.testimonials-2 .map-testimonial .swiper-slide.swiper-slide-thumb-active div::before {
opacity: 1;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(1) {
bottom: 5%;
left: 30%;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(2) {
bottom: 26%;
left: 50%;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(3) {
bottom: 23%;
right: 51px;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(4) {
top: 36%;
right: 18px;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(5) {
top: 22%;
left: 35%;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(6) {
top: 49%;
left: 16%;
}
.testimonials-2 .pagination-buttons button {
border-radius: 50%;
border: none;
background-color: var(--vtc-text-white);
height: 60px;
width: 60px;
border-radius: 50%;
color: var(--vtc-bg-main12);
font-size: 20px;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
}
.testimonials-2 .pagination-buttons button:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main12);
color: var(--vtc-text-white);
}
.testimonials-7 .pagination-buttons button {
border-radius: 50%;
border: none;
background-color: var(--vtc-text-white);
height: 60px;
width: 60px;
border-radius: 50%;
color: var(--vtc-bg-main16);
font-size: 20px;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
}
.testimonials-7 .pagination-buttons button:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main16);
color: var(--vtc-text-white);
}
.testimonials-2 .pagination-buttons .swiper-button-prev {
position: absolute;
right: -13px;
left: auto;
transform: translateY(-21px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-2 .pagination-buttons .swiper-button-prev {
right: 50%;
transform: translateX(-35px);
}
}
@media (max-width: 767px) {
.testimonials-2 .pagination-buttons .swiper-button-prev {
right: 50%;
transform: translateX(-21px);
}
}
.testimonials-2 .pagination-buttons .swiper-button-next {
position: absolute;
right: -15px;
left: auto;
transform: translateY(53px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-2 .pagination-buttons .swiper-button-next {
right: 50%;
transform: translateX(35px);
}
}
@media (max-width: 767px) {
.testimonials-2 .pagination-buttons .swiper-button-next {
right: 50%;
transform: translateX(35px);
}
}
.tes-page-box {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.09);
transition: all 0.4s;
}
.tes-page-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.tes-page-box .stars ul li {
color: #FFA800;
display: inline-block;
margin: 0px 2px;
}
.tes-page-box p {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 150% */
padding-top: 16px;
}
.tes-page-box .author-area {
display: flex;
align-items: center;
margin-top: 20px;
}
.tes-page-box .author-area .author-content {
padding-left: 16px;
}
.tes-page-box .author-area .author-content a {
display: inline-block;
color: var(--Home-Page-4-Text-Color, #030619);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 18px; /* 100% */
}
.tes-page-box .author-area .author-content p {
color: var(--Home-Page-7-Paragraph-Color, #4D4B5F);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
padding-top: 8px;
}
.tes9-slider-all {
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
padding: 32px;
border-radius: 8px;
}
.tes9-single-slider-items p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-30); /* 150% */
text-transform: capitalize;
}
.tes9-single-slider-items .tes9-dv-top {
width: 100%;
height: 2px;
background-color: var(--vtc-bg-white10per);
position: relative;
z-index: 3;
margin: 60px 0px 42px 0px;
}
.tes9-single-slider-items .author-area {
display: flex;
align-items: center;
}
.tes9-single-slider-items .author-area .author-text {
padding-left: 16px;
}
.tes9-single-slider-items .author-area .author-text a {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.tes9-single-slider-items .author-area .author-text a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18);
}
.tes9-single-slider-items .author-area .author-text p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
padding-top: 8px;
}
.tes9-left-side-images {
position: relative;
margin-right: 30px;
height: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes9-left-side-images {
margin-right: 0px;
margin-bottom: 40px;
height: auto;
}
}
@media (max-width: 767px) {
.tes9-left-side-images {
margin-right: 0px;
margin-bottom: 40px;
height: auto;
}
}
.tes9-left-side-images .image img {
width: 100%;
}
.tes9-left-side-images .review-box {
height: 150px;
background-color: var(--vtc-bg-main18);
padding: 0px 24px 24px 24px;
border-radius: 0px 0px 8px 8px;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes9-left-side-images .review-box {
bottom: 0;
}
}
@media (max-width: 767px) {
.tes9-left-side-images .review-box {
bottom: 0;
}
}
.tes9-left-side-images .review-box .review-image {
position: relative;
margin-top: -30px;
}
.tes9-left-side-images .review-box .review-starts {
padding-top: 20px;
}
.tes9-left-side-images .review-box .review-starts p {
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-32); /* 100% */
}
.tes9-left-side-images .review-box .review-starts .stars {
padding-top: 8px;
}
.tes9-left-side-images .review-box .review-starts .stars ul li {
color: var(--vtc-bg-white);
display: inline-block;
}
.tes9 {
background-color: var(--vtc-bg-white10per);
}
.tes9 .slick-dots {
display: flex;
justify-content: center;
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 1rem 0;
list-style-type: none;
}
.tes9 .slick-dots li {
margin: 0 0.25rem;
}
.tes9 .slick-dots button {
display: block;
width: 12px;
height: 12px;
padding: 0;
border: none;
border-radius: 100%;
background-color: var(--vtc-bg-white20per);
text-indent: -9999px;
}
.tes9 .slick-dots li.slick-active button {
width: 12px;
height: 12px;
background-color: var(--vtc-bg-main18);
}
.tes10-slider-all {
background-color: var(--vtc-bg-common-10);
padding: 32px;
border-radius: 8px;
}
.tes10-single-slider-items p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-30); /* 150% */
text-transform: capitalize;
}
.tes10-single-slider-items .tes10-dv-top {
width: 100%;
height: 2px;
background-color: var(--vtc-bg-white);
position: relative;
z-index: 3;
margin: 60px 0px 42px 0px;
}
.tes10-single-slider-items .author-area {
display: flex;
align-items: center;
}
.tes10-single-slider-items .author-area .author-text {
padding-left: 16px;
}
.tes10-single-slider-items .author-area .author-text a {
display: inline-block;
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.tes10-single-slider-items .author-area .author-text a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main18);
}
.tes10-single-slider-items .author-area .author-text p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
padding-top: 8px;
}
.tes10-left-side-images {
position: relative;
margin-right: 30px;
height: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes10-left-side-images {
margin-right: 0px;
margin-bottom: 40px;
height: auto;
}
}
@media (max-width: 767px) {
.tes10-left-side-images {
margin-right: 0px;
margin-bottom: 40px;
height: auto;
}
}
.tes10-left-side-images .image img {
width: 100%;
}
.tes10-left-side-images .review-box {
height: 150px;
background-color: var(--vtc-bg-main18);
padding: 0px 24px 24px 24px;
border-radius: 0px 0px 8px 8px;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes10-left-side-images .review-box {
bottom: 0;
}
}
@media (max-width: 767px) {
.tes10-left-side-images .review-box {
bottom: 0;
}
}
.tes10-left-side-images .review-box .review-image {
position: relative;
margin-top: -30px;
}
.tes10-left-side-images .review-box .review-starts {
padding-top: 20px;
}
.tes10-left-side-images .review-box .review-starts p {
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-32); /* 100% */
}
.tes10-left-side-images .review-box .review-starts .stars {
padding-top: 8px;
}
.tes10-left-side-images .review-box .review-starts .stars ul li {
color: var(--vtc-bg-white);
display: inline-block;
}
.tes10 {
background-color: var(--vtc-bg-white10per);
}
.tes10 .slick-dots {
display: flex;
justify-content: center;
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 1rem 0;
list-style-type: none;
}
.tes10 .slick-dots li {
margin: 0 0.25rem;
}
.tes10 .slick-dots button {
display: block;
width: 12px;
height: 12px;
padding: 0;
border: none;
border-radius: 100%;
background-color: var(--vtc-bg-common-14);
text-indent: -9999px;
}
.tes10 .slick-dots li.slick-active button {
width: 12px;
height: 12px;
background-color: var(--vtc-bg-main18);
}
@media (max-width: 767px) {
.tes6 {
padding-bottom: 150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tes6 .main-image {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tes6 .main-image {
margin-bottom: 40px;
}
}
.tes6 .tes6-all {
margin-right: 100px;
background-color: var(--vtc-bg-common-10);
border-radius: 8px;
padding: 32px;
position: relative;
}
@media (max-width: 767px) {
.tes6 .tes6-all {
margin-right: 0;
}
}
.tes6 .tes6-all p.text {
color: var(--Home-Page-7-Main-Color, #0B101F);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 144.444% */
padding: 16px 0;
}
.tes6 .tes6-all .star ul li {
display: inline-block;
color: #FFA800;
margin: 0px 3px;
}
.tes6 .tes6-all .bottom {
padding-top: 5px;
}
.tes6 .tes6-all .bottom .info {
display: flex;
align-items: center;
}
.tes6 .tes6-all .bottom .content {
padding-left: 12px;
}
.tes6 .tes6-all .bottom h6 a {
display: inline-block;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
}
.tes6 .tes6-all .bottom .position {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
padding-top: 10px;
}
.tes6 .tes6-all .pagination-buttons {
position: absolute;
right: -90px;
top: 50%;
margin-top: -61px;
}
@media (max-width: 767px) {
.tes6 .tes6-all .pagination-buttons {
margin-top: 30px;
top: 100%;
display: flex;
align-items: center;
left: 0;
}
}
.tes6 .tes6-all .pagination-buttons button {
font-size: 20px;
height: 56px;
width: 56px;
line-height: 56px;
text-align: center;
border-radius: 50%;
margin: 5px 0px;
border: none;
background: var(--vtc-bg-common-10);
color: var(--vtc-bg-main15);
transition: all 0.4s;
position: relative;
z-index: 2;
}
.tes6 .tes6-all .pagination-buttons button::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-main15);
z-index: -1;
border-radius: 50%;
opacity: 0;
transition: all 0.4s;
}
@media (max-width: 767px) {
.tes6 .tes6-all .pagination-buttons button {
margin-right: 20px;
}
}
.tes6 .tes6-all .pagination-buttons button:nth-child(1) {
transform: rotate(-90deg);
}
.tes6 .tes6-all .pagination-buttons button:hover {
transition: all 0.4s;
color: var(--vtc-bg-white);
}
.tes6 .tes6-all .pagination-buttons button:hover::after {
opacity: 1;
transition: all 0.4s;
}
.testimonials-7 .sec-shape {
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.testimonials-7 .left {
position: relative;
}
.testimonials-7 .left .swiper-button-next,
.testimonials-7 .left .swiper-button-prev {
width: 60px;
height: 60px;
border-radius: 50%;
top: 50%;
z-index: 99;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-7 .left .swiper-button-next,
.testimonials-7 .left .swiper-button-prev {
top: 110%;
}
}
@media (max-width: 767px) {
.testimonials-7 .left .swiper-button-next,
.testimonials-7 .left .swiper-button-prev {
top: 110%;
}
}
.testimonials-7 .left .swiper-button-next::after,
.testimonials-7 .left .swiper-button-prev::after {
display: none;
}
.testimonials-7 .left .swiper-pagination span {
font-size: 16px;
font-weight: 400;
}
.testimonials-7 .left .swiper-pagination .swiper-pagination-current {
margin-right: -4px;
}
.testimonials-7 .left .swiper-pagination .swiper-pagination-total {
margin-left: -4px;
}
.testimonials-7 .block-text .heading {
text-transform: capitalize;
margin-bottom: 15px;
}
.testimonials-7 .block-text .desc {
font-size: 20px;
padding: 0 100px;
}
@media only screen and (max-width: 1200px) {
.testimonials-7 .block-text .desc {
padding: 0;
}
}
.testimonials-7 .swiper-testimonial-7 {
margin-top: 47px;
border-radius: 4px;
background-color: var(--vtc-bg-common-bg1);
}
.testimonials-7 .testimonials-box-2 {
border-radius: 12px;
background: var(--vtc-bg-white10per);
padding: 32px 50px 32px 32px;
}
@media (max-width: 767px) {
.testimonials-7 .testimonials-box-2 {
padding: 20px;
}
}
.testimonials-7 .testimonials-box-2 h6 {
margin-bottom: 10px;
}
.testimonials-7 .testimonials-box-2 .text {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-22);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-32); /* 145.455% */
}
@media (max-width: 767px) {
.testimonials-7 .testimonials-box-2 .text {
font-size: 18px;
line-height: 28px;
}
}
.testimonials-7 .testimonials-box-2 .icon {
margin-bottom: 10px;
}
.testimonials-7 .testimonials-box-2 .bottom {
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonials-7 .testimonials-box-2 .bottom .content h6 a {
display: inline-block;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-24); /* 100% */
}
.testimonials-7 .testimonials-box-2 .bottom .content p {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.testimonials-7 .testimonials-box-2 .bottom .info {
display: flex;
}
.testimonials-7 .testimonials-box-2 .bottom .info img {
min-width: 60px;
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
}
.testimonials-7 .testimonials-box-2 .bottom .info .content {
padding-top: 6px;
}
.testimonials-7 .testimonials-box-2 .bottom img {
width: 35.28px;
height: 40.1px;
}
.testimonials-7 .map-testimonial {
position: relative;
width: 666px;
height: 433.01px;
}
@media only screen and (max-width: 1200px) {
.testimonials-7 .map-testimonial {
margin-top: 80px;
}
}
@media only screen and (max-width: 1024px) {
.testimonials-7 .map-testimonial {
width: 100%;
}
.testimonials-7 .map-testimonial img {
width: 100%;
}
}
.testimonials-7 .map-testimonial img.map {
position: absolute;
top: 69px;
left: 24px;
}
.testimonials-7 .map-testimonial .swiper-thumb2 {
width: 100%;
height: 100%;
}
.testimonials-7 .map-testimonial .swiper-slide {
position: absolute;
z-index: 9;
width: 56px;
height: 56px;
cursor: pointer;
}
.testimonials-7 .map-testimonial .swiper-slide div {
width: 56px;
height: 56px;
border: 4px solid rgba(90, 100, 245, 0.2745098039);
border-radius: 50%;
position: relative;
box-shadow: 0px 10px 25px rgba(71, 92, 133, 0.1);
}
.testimonials-7 .map-testimonial .swiper-slide div::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 58px;
height: 58px;
border-radius: 50%;
border: 2px solid var(--vtc-bg-main16);
opacity: 0;
}
.testimonials-7 .map-testimonial .swiper-slide div img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.testimonials-7 .map-testimonial .swiper-slide div::after {
content: "";
position: absolute;
top: 0;
left: 0;
top: auto;
border-color: var(--vtc-bg-white10per) transparent transparent transparent;
border-style: solid;
border-width: 12px 6px 0px 6px;
height: 0px;
width: 0px;
left: 50%;
transform: translateX(-50%);
bottom: -14px;
}
.testimonials-7 .map-testimonial .swiper-slide.swiper-slide-thumb-active div::after {
content: "";
position: absolute;
top: 0;
left: 0;
top: auto;
border-color: var(--vtc-bg-main16) transparent transparent transparent;
border-style: solid;
border-width: 12px 6px 0px 6px;
height: 0px;
width: 0px;
left: 50%;
transform: translateX(-50%);
bottom: -14px;
}
.testimonials-7 .map-testimonial .swiper-slide.swiper-slide-thumb-active div::before {
opacity: 1;
}
.testimonials-7 .map-testimonial .swiper-slide:nth-child(1) {
bottom: 5%;
left: 30%;
}
.testimonials-7 .map-testimonial .swiper-slide:nth-child(2) {
bottom: 26%;
left: 50%;
}
.testimonials-7 .map-testimonial .swiper-slide:nth-child(3) {
bottom: 23%;
right: 51px;
}
.testimonials-7 .map-testimonial .swiper-slide:nth-child(4) {
top: 36%;
right: 18px;
}
.testimonials-7 .map-testimonial .swiper-slide:nth-child(5) {
top: 22%;
left: 35%;
}
.testimonials-7 .map-testimonial .swiper-slide:nth-child(6) {
top: 49%;
left: 16%;
}
.pagination-buttons button {
border-radius: 50%;
border: none;
background-color: var(--vtc-text-white);
height: 60px;
width: 60px;
border-radius: 50%;
color: var(--vtc-bg-main16);
font-size: 20px;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
}
.pagination-buttons button:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main16);
color: var(--vtc-text-white);
}
.testimonials-7 .pagination-buttons .swiper-button-prev {
position: absolute;
right: -13px;
left: auto;
transform: translateY(-21px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-7 .pagination-buttons .swiper-button-prev {
right: 50%;
transform: translateX(-35px);
}
}
@media (max-width: 767px) {
.testimonials-7 .pagination-buttons .swiper-button-prev {
right: 50%;
transform: translateX(-21px);
}
}
.testimonials-7 .pagination-buttons .swiper-button-next {
position: absolute;
right: -15px;
left: auto;
transform: translateY(53px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-7 .pagination-buttons .swiper-button-next {
right: 50%;
transform: translateX(35px);
}
}
@media (max-width: 767px) {
.testimonials-7 .pagination-buttons .swiper-button-next {
right: 50%;
transform: translateX(35px);
}
}
.testimonials-9 .sec-shape {
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.testimonials-9 .left {
position: relative;
}
.testimonials-9 .left .swiper-button-next,
.testimonials-9 .left .swiper-button-prev {
width: 60px;
height: 60px;
border-radius: 50%;
top: 50%;
z-index: 99;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-9 .left .swiper-button-next,
.testimonials-9 .left .swiper-button-prev {
top: 110%;
}
}
@media (max-width: 767px) {
.testimonials-9 .left .swiper-button-next,
.testimonials-9 .left .swiper-button-prev {
top: 110%;
}
}
.testimonials-9 .left .swiper-button-next::after,
.testimonials-9 .left .swiper-button-prev::after {
display: none;
}
.testimonials-9 .left .swiper-pagination span {
font-size: 16px;
font-weight: 400;
}
.testimonials-9 .left .swiper-pagination .swiper-pagination-current {
margin-right: -4px;
}
.testimonials-9 .left .swiper-pagination .swiper-pagination-total {
margin-left: -4px;
}
.testimonials-9 .block-text .heading {
text-transform: capitalize;
margin-bottom: 15px;
}
.testimonials-9 .block-text .desc {
font-size: 20px;
padding: 0 100px;
}
@media only screen and (max-width: 1200px) {
.testimonials-9 .block-text .desc {
padding: 0;
}
}
.testimonials-9 .swiper-testimonial-7 {
margin-top: 47px;
border-radius: 4px;
background-color: var(--vtc-bg-common-bg1);
}
.testimonials-9 .testimonials-box-2 {
border-radius: 12px;
background: var(--vtc-bg-common-10);
padding: 32px 50px 32px 32px;
}
@media (max-width: 767px) {
.testimonials-9 .testimonials-box-2 {
padding: 20px;
}
}
.testimonials-9 .testimonials-box-2 h6 {
margin-bottom: 10px;
}
.testimonials-9 .testimonials-box-2 .text {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-22);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-32); /* 145.455% */
}
@media (max-width: 767px) {
.testimonials-9 .testimonials-box-2 .text {
font-size: 18px;
line-height: 28px;
}
}
.testimonials-9 .testimonials-box-2 .icon {
margin-bottom: 10px;
}
.testimonials-9 .testimonials-box-2 .bottom {
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonials-9 .testimonials-box-2 .bottom .content h6 a {
display: inline-block;
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-24); /* 100% */
}
.testimonials-9 .testimonials-box-2 .bottom .content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.testimonials-9 .testimonials-box-2 .bottom .info {
display: flex;
}
.testimonials-9 .testimonials-box-2 .bottom .info img {
min-width: 60px;
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
}
.testimonials-9 .testimonials-box-2 .bottom .info .content {
padding-top: 6px;
}
.testimonials-9 .testimonials-box-2 .bottom img {
width: 35.28px;
height: 40.1px;
}
.testimonials-9 .map-testimonial {
position: relative;
width: 666px;
height: 433.01px;
}
@media only screen and (max-width: 1200px) {
.testimonials-9 .map-testimonial {
margin-top: 80px;
}
}
@media only screen and (max-width: 1024px) {
.testimonials-9 .map-testimonial {
width: 100%;
}
.testimonials-9 .map-testimonial img {
width: 100%;
}
}
.testimonials-9 .map-testimonial img.map {
position: absolute;
top: 69px;
left: 24px;
}
.testimonials-9 .map-testimonial .swiper-thumb2 {
width: 100%;
height: 100%;
}
.testimonials-9 .map-testimonial .swiper-slide {
position: absolute;
z-index: 9;
width: 56px;
height: 56px;
cursor: pointer;
}
.testimonials-9 .map-testimonial .swiper-slide div {
width: 56px;
height: 56px;
border: 4px solid rgba(90, 100, 245, 0.2745098039);
border-radius: 50%;
position: relative;
box-shadow: 0px 10px 25px rgba(71, 92, 133, 0.1);
}
.testimonials-9 .map-testimonial .swiper-slide div::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 58px;
height: 58px;
border-radius: 50%;
border: 2px solid var(--vtc-bg-main17);
opacity: 0;
}
.testimonials-9 .map-testimonial .swiper-slide div img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.testimonials-9 .map-testimonial .swiper-slide div::after {
content: "";
position: absolute;
top: 0;
left: 0;
top: auto;
border-color: var(--vtc-text-pera1) transparent transparent transparent;
border-style: solid;
border-width: 12px 6px 0px 6px;
height: 0px;
width: 0px;
left: 50%;
transform: translateX(-50%);
bottom: -14px;
}
.testimonials-9 .map-testimonial .swiper-slide.swiper-slide-thumb-active div::after {
content: "";
position: absolute;
top: 0;
left: 0;
top: auto;
border-color: var(--vtc-bg-main17) transparent transparent transparent;
border-style: solid;
border-width: 12px 6px 0px 6px;
height: 0px;
width: 0px;
left: 50%;
transform: translateX(-50%);
bottom: -14px;
}
.testimonials-9 .map-testimonial .swiper-slide.swiper-slide-thumb-active div::before {
opacity: 1;
}
.testimonials-9 .map-testimonial .swiper-slide:nth-child(1) {
bottom: 5%;
left: 30%;
}
.testimonials-9 .map-testimonial .swiper-slide:nth-child(2) {
bottom: 26%;
left: 50%;
}
.testimonials-9 .map-testimonial .swiper-slide:nth-child(3) {
bottom: 23%;
right: 51px;
}
.testimonials-9 .map-testimonial .swiper-slide:nth-child(4) {
top: 36%;
right: 18px;
}
.testimonials-9 .map-testimonial .swiper-slide:nth-child(5) {
top: 22%;
left: 35%;
}
.testimonials-9 .map-testimonial .swiper-slide:nth-child(6) {
top: 49%;
left: 16%;
}
.pagination-buttons9 button {
border-radius: 50%;
border: none;
background-color: var(--vtc-bg-common-16);
height: 60px;
width: 60px;
border-radius: 50%;
color: var(--vtc-bg-main17);
font-size: 20px;
transition: all 0.4s;
font-size: var(--f-fs-font-18);
}
.pagination-buttons9 button:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main17);
color: var(--vtc-text-white);
}
.testimonials-9 .pagination-buttons9 .swiper-button-prev {
position: absolute;
right: -13px;
left: auto;
transform: translateY(-21px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-9 .pagination-buttons9 .swiper-button-prev {
right: 50%;
transform: translateX(-35px);
}
}
@media (max-width: 767px) {
.testimonials-9 .pagination-buttons9 .swiper-button-prev {
right: 50%;
transform: translateX(-21px);
}
}
.testimonials-9 .pagination-buttons9 .swiper-button-next {
position: absolute;
right: -15px;
left: auto;
transform: translateY(53px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials-9 .pagination-buttons9 .swiper-button-next {
right: 50%;
transform: translateX(35px);
}
}
@media (max-width: 767px) {
.testimonials-9 .pagination-buttons9 .swiper-button-next {
right: 50%;
transform: translateX(35px);
}
}
/*
::::::::::::::::::::::::::
TESTIMONIAL AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
WORK AREA CSS
::::::::::::::::::::::::::
*/
.work1-box {
margin: 0px 40px;
transition: all 0.4s;
position: relative;
}
.work1-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
background-color: var(--vtc-bg-common-3);
margin: auto;
}
.work1-box .icon img {
transition: all 0.4s;
}
.work1-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.work1-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.work1-box .arrow-shape1 {
position: absolute;
top: 30px;
right: -130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.work1-box .arrow-shape1 {
display: none;
}
}
@media (max-width: 767px) {
.work1-box .arrow-shape1 {
display: none;
}
}
.work4-box {
margin: 0px 40px;
transition: all 0.4s;
position: relative;
}
.work4-box .icon {
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
border-radius: 50%;
background-color: var(--vtc-bg-white);
margin: auto;
}
.work4-box .icon img {
transition: all 0.4s;
}
.work4-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.work4-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.work4-box .arrow-shape1 {
position: absolute;
top: 30px;
right: -130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.work4-box .arrow-shape1 {
display: none;
}
}
@media (max-width: 767px) {
.work4-box .arrow-shape1 {
display: none;
}
}
/*
::::::::::::::::::::::::::
WORK AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
others AREA CSS
::::::::::::::::::::::::::
*/
.brands-heading h5 {
color: #111;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 100% */
text-transform: capitalize;
}
.brands-heading .stars-area {
padding-top: 20px;
}
.brands-heading .stars-area ul li {
display: inline-block;
}
.brands-heading .stars-area ul li.text {
color: #111;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 100% */
text-transform: capitalize;
}
.brands-heading .stars-area ul li.text img {
margin: 0px 6px;
}
.brands-heading .stars-area ul li.review-text1 {
margin-right: 10px;
position: relative;
}
.brands-heading .stars-area ul li.review-text1::after {
content: "";
position: absolute;
right: -6px;
top: 5px;
height: 12px;
width: 2px;
background-color: var(--vtc-text-pera2);
opacity: 0.5;
}
.brands1-single-slider {
text-align: center;
display: inline-flex !important;
justify-content: center;
}
.data-center1 {
padding-bottom: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.data-center1 {
padding-bottom: 120px;
}
}
.data-center-map-area {
position: relative;
z-index: 2;
}
.data-center-map-area .map-image {
position: relative;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center-map-area .map-image {
height: 400px;
}
}
@media (max-width: 767px) {
.data-center-map-area .map-image {
height: 300px;
}
}
.data-center-map-area .map-border {
position: absolute;
top: 0;
z-index: 0;
}
.data-center-map-area .flags-details-all {
position: absolute;
height: 450px;
top: 0;
width: 100%;
}
.data-center-map-area .flags-details-all .flags-single {
position: absolute;
height: 0px;
}
.data-center-map-area .flags-details-all .flags-single .image {
cursor: pointer;
}
.data-center-map-area .flags-details-all .flags-single .content {
background-color: var(--vtc-bg-white);
padding: 12px;
border-radius: 4px;
width: 220px;
text-align: center;
margin-bottom: 17px;
margin-left: -88px;
transition: all 0.4s;
transform: scale(0.4) translateY(120px) rotateX(80deg);
opacity: 0;
visibility: hidden;
position: relative;
z-index: 8;
}
.data-center-map-area .flags-details-all .flags-single .content h4 a {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
}
.data-center-map-area .flags-details-all .flags-single .content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 100% */
margin-top: 8px;
}
.data-center-map-area .flags-details-all .flags-single .content::after {
content: "";
position: absolute;
left: 50%;
height: 20px;
width: 20px;
background-color: var(--vtc-bg-white);
border-radius: 2px;
bottom: -9px;
transform: rotate(45deg);
margin-left: -10px;
}
.data-center-map-area .flags-details-all .flags-single:hover {
transition: all 0.4s;
}
.data-center-map-area .flags-details-all .flags-single:hover .content {
transition: all 0.4s;
transform: scale(1) translateY(0px) rotateX(0deg);
opacity: 1;
visibility: visible;
}
.data-center-map-area .flags-details-all .flags-single.single1 {
top: -16px;
left: 0;
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single1 {
top: -51px;
left: 26px;
}
}
.data-center-map-area .flags-details-all .flags-single.single2 {
top: -30px;
left: 189px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center-map-area .flags-details-all .flags-single.single2 {
display: none;
}
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single2 {
display: none;
}
}
.data-center-map-area .flags-details-all .flags-single.single3 {
top: 120px;
left: 170px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center-map-area .flags-details-all .flags-single.single3 {
display: none;
}
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single3 {
display: none;
}
}
.data-center-map-area .flags-details-all .flags-single.single4 {
top: -173px;
left: 267px;
}
.data-center-map-area .flags-details-all .flags-single.single5 {
top: 236px;
left: 323px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center-map-area .flags-details-all .flags-single.single5 {
display: none;
}
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single5 {
display: none;
}
}
.data-center-map-area .flags-details-all .flags-single.single6 {
top: -108px;
left: 442px;
}
.data-center-map-area .flags-details-all .flags-single.single7 {
top: -73px;
left: 630px;
}
.data-center-map-area .flags-details-all .flags-single.single8 {
top: 108px;
left: 526px;
}
.data-center-map-area .flags-details-all .flags-single.single9 {
top: 45px;
right: 407px;
}
.data-center-map-area .flags-details-all .flags-single.single10 {
top: 269px;
right: 526px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center-map-area .flags-details-all .flags-single.single10 {
display: none;
}
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single10 {
display: none;
}
}
.data-center-map-area .flags-details-all .flags-single.single11 {
top: -83px;
right: 274px;
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single11 {
top: -122px;
right: 124px;
}
}
.data-center-map-area .flags-details-all .flags-single.single12 {
top: 162px;
right: 398px;
}
.data-center-map-area .flags-details-all .flags-single.single13 {
top: 205px;
right: 208px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center-map-area .flags-details-all .flags-single.single13 {
display: none;
}
}
@media (max-width: 767px) {
.data-center-map-area .flags-details-all .flags-single.single13 {
display: none;
}
}
.data-center-map-area .flags-details-all .flags-single.single14 {
top: 21px;
right: 140px;
}
.data-center-map-area .flags-details-all .flags-single.single15 {
top: -29px;
right: 10px;
}
.brands2-bg {
background-color: var(--vtc-bg-white);
box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.09);
border-radius: 20px;
padding: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales .heading1-w {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.hosting-sales .heading1-w {
padding-top: 50px;
}
}
.hosting-sales .hosting-sales-boxs-area {
height: 350px;
}
@media (max-width: 767px) {
.hosting-sales .hosting-sales-boxs-area {
height: 550px;
}
}
.hosting-sales .hosting-sales-boxs-area .cta1-box {
height: 270px;
width: 270px;
border-radius: 50%;
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.hosting-sales .hosting-sales-boxs-area .cta1-box p {
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 6px 10px;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
}
.hosting-sales .hosting-sales-boxs-area .cta1-box h3 {
color: var(--vtc-bg-white);
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 107.143% */
padding: 16px 0px;
}
.hosting-sales .hosting-sales-boxs-area .cta1-box.box1 {
position: absolute;
left: 120px;
top: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales .hosting-sales-boxs-area .cta1-box.box1 {
left: 60px;
}
}
@media (max-width: 767px) {
.hosting-sales .hosting-sales-boxs-area .cta1-box.box1 {
left: 60px;
}
}
.hosting-sales .hosting-sales-boxs-area .cta1-box.box2 {
position: absolute;
right: 60px;
bottom: -15px;
}
@media (max-width: 767px) {
.hosting-sales .hosting-sales-boxs-area .cta1-box.box2 {
bottom: 15px;
}
}
.hosting-sales .hosting-sales-form-area {
position: relative;
margin-right: 80px;
margin-top: 30px;
}
.hosting-sales .hosting-sales-form-area input {
padding: 18px;
border: none;
width: 100%;
background-color: var(--vtc-bg-white);
border-radius: 111px;
}
.hosting-sales .hosting-sales-form-area input:focus {
outline: none;
}
.hosting-sales .hosting-sales-form-area input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales .hosting-sales-form-area input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales .hosting-sales-form-area .button {
position: absolute;
top: 5px;
right: 5px;
}
.apps2 {
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
.apps2 .apps-item {
padding: 12px 20px 12px 12px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
display: flex;
align-items: center;
transition: all 0.4s;
}
.apps2 .apps-item .image img {
border-radius: 50%;
transition: all 0.4s;
}
.apps2 .apps-item .text a {
transition: all 0.4s;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
padding-left: 10px;
display: inline-block;
transition: all 0.4s;
}
.apps2 .apps-item .text a:hover {
transition: all 0.4s;
color: var(--vtc-text-title2);
}
.apps2 .apps-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.apps2 .apps-item:hover .image img {
transition: all 0.4s;
transform: rotate(360deg);
}
.apps3 {
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
z-index: 1;
}
.apps3 .apps-item {
padding: 12px 20px 12px 12px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
display: flex;
align-items: center;
transition: all 0.4s;
}
.apps3 .apps-item .image img {
border-radius: 50%;
transition: all 0.4s;
}
.apps3 .apps-item .text a {
transition: all 0.4s;
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
padding-left: 10px;
display: inline-block;
transition: all 0.4s;
}
.apps3 .apps-item .text a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main5);
}
.apps3 .apps-item:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.apps3 .apps-item:hover .image img {
transition: all 0.4s;
transform: rotate(360deg);
}
.apps3 .sec-shape {
position: absolute;
bottom: 0;
right: 0;
z-index: -2;
}
.brands4-bg {
background-color: var(--vtc-bg-white);
box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.09);
border-radius: 20px;
padding: 60px;
margin-top: -70px;
position: relative;
z-index: 2;
}
.hosting-sales4 .cta1-form-area form {
margin-top: 30px;
}
.hosting-sales4 .cta1-form-area form input {
padding: 20px;
border-radius: 111px;
border: none;
background-color: var(--vtc-bg-white);
width: 100%;
}
.hosting-sales4 .cta1-form-area form input:focus {
outline: none;
}
.hosting-sales4 .cta1-form-area form input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales4 .cta1-form-area form input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales4 .cta1-form-area form .button {
position: absolute;
top: 5px;
right: 5px;
}
.hosting-sales4 .bg-area {
border-radius: 16px;
position: relative;
}
.hosting-sales4 .bg-area .heading1-w {
padding: 60px 0px 60px 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales4 .bg-area .heading1-w {
padding: 30px;
}
}
@media (max-width: 767px) {
.hosting-sales4 .bg-area .heading1-w {
padding: 30px;
}
}
.hosting-sales4 .cta1-boxs-area {
height: 350px;
}
@media (max-width: 767px) {
.hosting-sales4 .cta1-boxs-area {
height: 550px;
}
}
.hosting-sales4 .cta1-boxs-area .cta1-box {
height: 270px;
width: 270px;
border-radius: 50%;
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.hosting-sales4 .cta1-boxs-area .cta1-box p {
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 6px 10px;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
}
.hosting-sales4 .cta1-boxs-area .cta1-box h3 {
color: var(--vtc-bg-white);
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 107.143% */
padding: 16px 0px;
}
.hosting-sales4 .cta1-boxs-area .cta1-box.box1 {
position: absolute;
left: 120px;
top: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales4 .cta1-boxs-area .cta1-box.box1 {
left: 60px;
}
}
@media (max-width: 767px) {
.hosting-sales4 .cta1-boxs-area .cta1-box.box1 {
left: 60px;
}
}
.hosting-sales4 .cta1-boxs-area .cta1-box.box2 {
position: absolute;
right: 60px;
bottom: -15px;
}
@media (max-width: 767px) {
.hosting-sales4 .cta1-boxs-area .cta1-box.box2 {
bottom: 15px;
}
}
.data-center9-map-area {
position: relative;
}
.data-center9-map-area .data-center-map-contents {
position: absolute;
height: 400px;
top: 60px;
width: 100%;
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents {
top: 0;
}
}
.data-center9-map-area .data-center-map-contents .countries {
padding: 0;
text-align: center;
height: 36px;
width: 70px;
border-radius: 2px;
position: relative;
transition: all 0.4s;
border-radius: 4px;
background: var(--vtc-bg-main17);
cursor: pointer;
}
.data-center9-map-area .data-center-map-contents .countries .content {
overflow: hidden;
height: 36px;
transition: all 0.6s;
border-radius: 4px;
background: var(--vtc-bg-main17);
}
.data-center9-map-area .data-center-map-contents .countries h4 a {
transition: all 0.4s;
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.data-center9-map-area .data-center-map-contents .countries p {
color: var(--vtc-text-white80per);
font-size: 14px;
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: 18px; /* 128.571% */
padding-top: 6px;
transition: all 0.4s;
visibility: hidden;
opacity: 0;
}
.data-center9-map-area .data-center-map-contents .countries::after {
content: "";
position: absolute;
bottom: -7px;
height: 20px;
width: 15px;
background: var(--vtc-bg-main17);
border-radius: 4px;
transform: rotate(45deg);
left: 50%;
z-index: -1;
margin-left: -8px;
transition: all 0.4s;
}
.data-center9-map-area .data-center-map-contents .countries:hover {
transition: all 0.4s;
width: 180px;
height: 110px;
transform: translateY(-70px) translateX(-50px);
}
.data-center9-map-area .data-center-map-contents .countries:hover .content {
overflow: hidden;
height: 110px;
transition: all 0.6s;
}
.data-center9-map-area .data-center-map-contents .countries:hover p {
transition: all 0.4s;
opacity: 1;
visibility: visible;
}
.data-center9-map-area .data-center-map-contents .countries1 {
position: absolute;
left: 160px;
top: 60px;
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries1 {
top: 0;
left: 0;
}
}
.data-center9-map-area .data-center-map-contents .countries2 {
position: absolute;
top: 150px;
left: 208px;
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries2 {
top: 99px;
left: 71px;
}
}
.data-center9-map-area .data-center-map-contents .countries3 {
position: absolute;
top: 350px;
left: 362px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries3 {
top: 200px;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries3 {
top: 100px;
left: 200px;
}
}
.data-center9-map-area .data-center-map-contents .countries4 {
position: absolute;
left: 500px;
top: 100px;
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries4 {
left: 252px;
top: 0;
}
}
.data-center9-map-area .data-center-map-contents .countries5 {
position: absolute;
left: 600px;
top: 300px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries5 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries5 {
display: none;
}
}
.data-center9-map-area .data-center-map-contents .countries6 {
position: absolute;
top: 400px;
left: 653px;
}
.data-center9-map-area .data-center-map-contents .countries6 {
position: absolute;
top: 400px;
left: 653px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries6 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries6 {
display: none;
}
}
.data-center9-map-area .data-center-map-contents .countries6 {
position: absolute;
top: 400px;
left: 653px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries6 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries6 {
display: none;
}
}
.data-center9-map-area .data-center-map-contents .countries7 {
position: absolute;
left: 751px;
top: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries7 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries7 {
display: none;
}
}
.data-center9-map-area .data-center-map-contents .countries8 {
position: absolute;
left: 950px;
top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries8 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries8 {
display: none;
}
}
.data-center9-map-area .data-center-map-contents .countries9 {
position: absolute;
left: 1000px;
top: 400px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries9 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries9 {
display: none;
}
}
.data-center9-map-area .data-center-map-contents .countries10 {
position: absolute;
left: 1016px;
top: 200px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center9-map-area .data-center-map-contents .countries10 {
display: none;
}
}
@media (max-width: 767px) {
.data-center9-map-area .data-center-map-contents .countries10 {
display: none;
}
}
.data-center6-map-area {
position: relative;
}
.data-center6-map-area .data-center-map-contents {
position: absolute;
height: 400px;
top: 60px;
width: 100%;
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents {
top: 0;
}
}
.data-center6-map-area .data-center-map-contents .countries {
padding: 0;
text-align: center;
height: 36px;
width: 70px;
border-radius: 2px;
position: relative;
transition: all 0.4s;
border-radius: 4px;
background: var(--vtc-bg-main10);
cursor: pointer;
}
.data-center6-map-area .data-center-map-contents .countries .content {
overflow: hidden;
height: 36px;
transition: all 0.6s;
border-radius: 4px;
background: var(--vtc-bg-main10);
}
.data-center6-map-area .data-center-map-contents .countries h4 a {
transition: all 0.4s;
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.data-center6-map-area .data-center-map-contents .countries p {
color: var(--vtc-text-white80per);
font-size: 14px;
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: 18px; /* 128.571% */
padding-top: 6px;
transition: all 0.4s;
visibility: hidden;
opacity: 0;
}
.data-center6-map-area .data-center-map-contents .countries::after {
content: "";
position: absolute;
bottom: -7px;
height: 20px;
width: 15px;
background: var(--vtc-bg-main10);
border-radius: 4px;
transform: rotate(45deg);
left: 50%;
z-index: -1;
margin-left: -8px;
transition: all 0.4s;
}
.data-center6-map-area .data-center-map-contents .countries:hover {
transition: all 0.4s;
width: 180px;
height: 110px;
transform: translateY(-70px) translateX(-50px);
}
.data-center6-map-area .data-center-map-contents .countries:hover .content {
overflow: hidden;
height: 110px;
transition: all 0.6s;
}
.data-center6-map-area .data-center-map-contents .countries:hover p {
transition: all 0.4s;
opacity: 1;
visibility: visible;
}
.data-center6-map-area .data-center-map-contents .countries1 {
position: absolute;
left: 160px;
top: 60px;
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries1 {
top: 0;
left: 0;
}
}
.data-center6-map-area .data-center-map-contents .countries2 {
position: absolute;
top: 150px;
left: 208px;
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries2 {
top: 99px;
left: 71px;
}
}
.data-center6-map-area .data-center-map-contents .countries3 {
position: absolute;
top: 350px;
left: 362px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries3 {
top: 200px;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries3 {
top: 100px;
left: 200px;
}
}
.data-center6-map-area .data-center-map-contents .countries4 {
position: absolute;
left: 500px;
top: 100px;
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries4 {
left: 252px;
top: 0;
}
}
.data-center6-map-area .data-center-map-contents .countries5 {
position: absolute;
left: 600px;
top: 300px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries5 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries5 {
display: none;
}
}
.data-center6-map-area .data-center-map-contents .countries6 {
position: absolute;
top: 400px;
left: 653px;
}
.data-center6-map-area .data-center-map-contents .countries6 {
position: absolute;
top: 400px;
left: 653px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries6 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries6 {
display: none;
}
}
.data-center6-map-area .data-center-map-contents .countries6 {
position: absolute;
top: 400px;
left: 653px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries6 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries6 {
display: none;
}
}
.data-center6-map-area .data-center-map-contents .countries7 {
position: absolute;
left: 751px;
top: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries7 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries7 {
display: none;
}
}
.data-center6-map-area .data-center-map-contents .countries8 {
position: absolute;
left: 950px;
top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries8 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries8 {
display: none;
}
}
.data-center6-map-area .data-center-map-contents .countries9 {
position: absolute;
left: 1000px;
top: 400px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries9 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries9 {
display: none;
}
}
.data-center6-map-area .data-center-map-contents .countries10 {
position: absolute;
left: 1016px;
top: 200px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.data-center6-map-area .data-center-map-contents .countries10 {
display: none;
}
}
@media (max-width: 767px) {
.data-center6-map-area .data-center-map-contents .countries10 {
display: none;
}
}
.hosting-sales8 {
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales8 .heading1-w {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.hosting-sales8 .heading1-w {
padding-top: 50px;
}
}
.hosting-sales8 .hosting-sales-boxs-area {
height: 350px;
}
@media (max-width: 767px) {
.hosting-sales8 .hosting-sales-boxs-area {
height: 550px;
}
}
.hosting-sales8 .hosting-sales-boxs-area .cta1-box {
height: 270px;
width: 270px;
border-radius: 50%;
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.hosting-sales8 .hosting-sales-boxs-area .cta1-box p {
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 6px 10px;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
}
.hosting-sales8 .hosting-sales-boxs-area .cta1-box h3 {
color: var(--vtc-bg-white);
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 107.143% */
padding: 16px 0px;
}
.hosting-sales8 .hosting-sales-boxs-area .cta1-box.box1 {
position: absolute;
left: 120px;
top: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales8 .hosting-sales-boxs-area .cta1-box.box1 {
left: 60px;
}
}
@media (max-width: 767px) {
.hosting-sales8 .hosting-sales-boxs-area .cta1-box.box1 {
left: 60px;
}
}
.hosting-sales8 .hosting-sales-boxs-area .cta1-box.box2 {
position: absolute;
right: 60px;
bottom: -15px;
}
@media (max-width: 767px) {
.hosting-sales8 .hosting-sales-boxs-area .cta1-box.box2 {
bottom: 15px;
}
}
.hosting-sales8 .hosting-sales-form-area {
position: relative;
margin-right: 80px;
margin-top: 30px;
}
.hosting-sales8 .hosting-sales-form-area input {
padding: 20px;
border: none;
width: 100%;
background-color: var(--vtc-bg-white);
border-radius: 111px;
}
.hosting-sales8 .hosting-sales-form-area input:focus {
outline: none;
}
.hosting-sales8 .hosting-sales-form-area input::-moz-placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales8 .hosting-sales-form-area input::placeholder {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales8 .hosting-sales-form-area .button {
position: absolute;
top: 5px;
right: 5px;
}
.hosting-sales7 {
overflow: hidden;
background-color: var(--vtc-bg-white10per);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales7 .heading1-w {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.hosting-sales7 .heading1-w {
padding-top: 50px;
}
}
.hosting-sales7 .hosting-sales-boxs-area {
height: 350px;
}
@media (max-width: 767px) {
.hosting-sales7 .hosting-sales-boxs-area {
height: 550px;
}
}
.hosting-sales7 .hosting-sales-boxs-area .cta1-box {
height: 270px;
width: 270px;
border-radius: 50%;
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.hosting-sales7 .hosting-sales-boxs-area .cta1-box p {
border: 1px solid var(--vtc-bg-white10per);
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
padding: 6px 10px;
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
}
.hosting-sales7 .hosting-sales-boxs-area .cta1-box h3 {
color: var(--vtc-bg-white);
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 107.143% */
padding: 16px 0px;
}
.hosting-sales7 .hosting-sales-boxs-area .cta1-box.box1 {
position: absolute;
left: 120px;
top: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting-sales7 .hosting-sales-boxs-area .cta1-box.box1 {
left: 60px;
}
}
@media (max-width: 767px) {
.hosting-sales7 .hosting-sales-boxs-area .cta1-box.box1 {
left: 60px;
}
}
.hosting-sales7 .hosting-sales-boxs-area .cta1-box.box2 {
position: absolute;
right: 60px;
bottom: -15px;
}
@media (max-width: 767px) {
.hosting-sales7 .hosting-sales-boxs-area .cta1-box.box2 {
bottom: 15px;
}
}
.hosting-sales7 .hosting-sales-form-area {
position: relative;
margin-right: 80px;
margin-top: 30px;
}
@media (max-width: 767px) {
.hosting-sales7 .hosting-sales-form-area {
margin-right: 0px;
}
}
.hosting-sales7 .hosting-sales-form-area input {
padding: 20px;
border: none;
width: 100%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 111px;
color: var(--vtc-bg-white);
}
.hosting-sales7 .hosting-sales-form-area input:focus {
outline-color: var(--vtc-bg-main16);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.hosting-sales7 .hosting-sales-form-area input:focus::-moz-placeholder {
opacity: 0;
}
.hosting-sales7 .hosting-sales-form-area input:focus::placeholder {
opacity: 0;
}
.hosting-sales7 .hosting-sales-form-area input::-moz-placeholder {
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales7 .hosting-sales-form-area input::placeholder {
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-16); /* 100% */
}
.hosting-sales7 .hosting-sales-form-area .button {
position: absolute;
top: 5px;
right: 5px;
}
.about8-progress-circle {
position: relative;
width: 100px;
height: 100px;
}
.about8-progress-circle circle {
fill: none;
stroke-width: 6;
stroke-linecap: round;
}
.about8-progress-circle .progress-background {
stroke: #e0e0e0;
}
.about8-progress-circle .progress-bar {
stroke: var(--vtc-bg-main17);
stroke-dasharray: 251;
stroke-dashoffset: 251;
transition: stroke-dashoffset 1.5s ease-in-out;
}
.about8-progress-circle .progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--vtc-text-title5);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.about8-progress-circlesvg {
transform: rotate(-90deg);
}
.prg-text2 {
color: var(--vtc-bg-white) !important;
font-size: var(--f-fs-font-18) !important;
font-style: normal;
font-weight: var(--f-fw-semibold) !important;
line-height: var(--f-fs-font-18) !important; /* 100% */
padding-top: 16px;
}
.about9-progress-circle {
position: relative;
width: 100px;
height: 100px;
}
.about9-progress-circle circle {
fill: none;
stroke-width: 6;
stroke-linecap: round;
}
.about9-progress-circle .progress-background {
stroke: var(--vtc-bg-white10per);
}
.about9-progress-circle .progress-bar {
stroke: var(--vtc-bg-main16);
stroke-dasharray: 251;
stroke-dashoffset: 251;
transition: stroke-dashoffset 1.5s ease-in-out;
}
.about9-progress-circle .progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--vtc-bg-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.about9-progress-circlesvg {
transform: rotate(-90deg);
}
.prg-text {
color: var(--vtc-text-title5) !important;
font-size: var(--f-fs-font-18) !important;
font-style: normal;
font-weight: var(--f-fw-semibold) !important;
line-height: var(--f-fs-font-18) !important; /* 100% */
padding-top: 12px;
}
/*
::::::::::::::::::::::::::
others AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
CONTACT AREA CSS
::::::::::::::::::::::::::
*/
.contact-sec-single-bx {
background-color: var(--vtc-bg-common-2);
padding: 24px;
border-radius: 8px;
display: flex;
align-items: center;
margin-top: 30px;
transition: all 0.4s;
}
.contact-sec-single-bx:hover {
transform: translateY(-10px);
transition: all 0.4s;
}
.contact-sec-single-bx .icon {
background-color: var(--vtc-bg-main2);
height: 60px;
width: 60px;
text-align: center;
line-height: 60px;
border-radius: 50%;
}
.contact-sec-single-bx .heading {
padding-left: 16px;
}
.contact-sec-single-bx .heading h4 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.contact-sec-single-bx .heading a {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
display: inline-block;
padding-top: 10px;
transition: all 0.4s;
}
.contact-sec-single-bx .heading a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main2);
}
.contact-page-sec .images {
margin-right: 50px;
margin-top: 60px;
position: relative;
z-index: 2;
}
.contact-page-sec .images .shape {
position: absolute;
top: 60px;
right: 50px;
z-index: -1;
transform: scale(1.5);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-page-sec .images .shape {
display: none;
}
}
@media (max-width: 767px) {
.contact-page-sec .images .shape {
display: none;
}
}
/*
::::::::::::::::::::::::::
CONTACT AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
PRICING AREA CSS
::::::::::::::::::::::::::
*/
@media (max-width: 767px) {
.compear-pricing-section-area {
padding: 50px 0 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area {
padding: 50px 0 50px;
}
}
.compear-pricing-section-area .compear-header {
margin-bottom: 60px;
}
.compear-pricing-section-area .compear-header h2 {
text-align: center;
font-style: normal;
line-height: 54px;
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-header h2 {
font-size: 24px;
}
}
.compear-pricing-section-area .compear-table {
position: relative;
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-table {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area .compear-table {
overflow-y: scroll;
}
}
.compear-pricing-section-area .compear-table ul {
position: absolute;
top: 30px;
left: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area .compear-table ul {
top: 65px;
}
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-table ul {
top: 3px;
}
}
.compear-pricing-section-area .compear-table ul li {
cursor: pointer;
}
.compear-pricing-section-area .compear-table ul li button {
font-style: normal;
line-height: 16px;
text-transform: capitalize;
padding: 10px;
border-radius: 2px;
margin: 0 0 0 12px;
cursor: pointer;
}
.compear-pricing-section-area .compear-table ul li button.nav-link.active {
cursor: pointer;
}
.compear-pricing-section-area .compear-table .comparison {
max-width: 1300px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
background: blue;
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-table .comparison {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area .compear-table .comparison {
overflow-y: scroll;
}
}
.compear-pricing-section-area .compear-table .comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-table .comparison table {
width: 800px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area .compear-table .comparison table {
width: 1200px;
}
}
.compear-pricing-section-area .compear-table .comparison td p.infor {
font-weight: var(--f-fw-normal);
font-size: var(--f-fs-font-16);
}
.compear-pricing-section-area .compear-table .comparison td.highlight {
background-color: var(--vtc-bg-main2);
}
.compear-pricing-section-area .compear-table .comparison td.highlight p {
color: var(--vtc-text-white);
}
.compear-pricing-section-area .compear-table .comparison td,
.compear-pricing-section-area .compear-table .comparison th {
border-right: 1px solid var(--vtc-border-2);
empty-cells: show;
padding: 20px 20px;
border-top: 1px solid var(--vtc-border-2);
border-bottom: 1px solid var(--vtc-border-2);
border: 1px solid var(--vtc-border-2);
background: var(--vtc-bg-common-2);
color: var(--vtc-text-title3);
font-style: normal;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.compear-pricing-section-area .compear-table .comparison tbody tr:nth-child(odd) {
display: none;
}
.compear-pricing-section-area .compear-table .comparison .compare-row {
background: #F7F7F7;
}
.compear-pricing-section-area .compear-table .comparison th {
font-weight: normal;
padding: 0;
}
.compear-pricing-section-area .compear-table .comparison tr td:first-child {
text-align: left;
}
.compear-pricing-section-area .compear-table .comparison .product,
.compear-pricing-section-area .compear-table .comparison .tl {
padding: 10px;
}
.compear-pricing-section-area .compear-table .comparison .tl2 {
border-right: 0;
}
.compear-pricing-section-area .compear-table .comparison .product {
background: blueviolet;
height: 40px;
font-size: 1.6em;
}
.compear-pricing-section-area .compear-table .comparison .price-now {
padding: 24px 30px;
text-align: center;
position: relative;
}
.compear-pricing-section-area .compear-table .comparison .price-now.highlight {
background: var(--vtc-bg-main2);
}
.compear-pricing-section-area .compear-table .comparison .price-now.highlight .price-now-area span {
color: var(--vtc-text-white);
}
.compear-pricing-section-area .compear-table .comparison .price-now.highlight .price-now-area p {
color: var(--vtc-text-white80per);
}
.compear-pricing-section-area .compear-table .comparison .price-now.highlight .price-now-area h2 {
color: var(--vtc-text-white);
}
.compear-pricing-section-area .compear-table .comparison .price-now.highlight .price-now-area h2 span {
color: var(--vtc-text-white);
}
.compear-pricing-section-area .compear-table .comparison .price-now .consulting2 {
position: absolute;
top: -10%;
left: 25%;
right: 25%;
}
.compear-pricing-section-area .compear-table .comparison .price-now img {
top: 18px;
left: -45px;
}
.compear-pricing-section-area .compear-table .comparison .price-now p {
color: gray;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
position: absolute;
top: 65%;
left: 160px;
}
.compear-pricing-section-area .compear-table .comparison .price-now .creat-button {
border-radius: 4px;
padding: 10px;
font-size: 20px;
margin: 0;
}
.compear-pricing-section-area .compear-table .comparison .price-now .creat-button:after {
border-radius: 4px;
}
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area span {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
display: inline-block;
margin-bottom: 16px;
}
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area h2 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-54); /* 122.727% */
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area h2 {
line-height: 32px;
}
}
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area h2 span {
line-height: 20px;
}
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
position: relative !important;
left: 0;
top: 0;
margin-top: 0;
}
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area .creat-button {
padding: 18px 24px;
margin-top: 24px;
}
.compear-pricing-section-area .compear-table .comparison .price-now .price-now-area .creat-button::after {
background: red;
}
.compear-pricing-section-area .compear-table td.compare-header {
font-size: 32px !important;
padding: 24px 20px !important;
}
@media (max-width: 767px) {
.compear-pricing-section-area .compear-table td.compare-header {
line-height: 16px;
}
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
.compear-pricing-section-area .compear-table .table_ul li {
letter-spacing: 0px;
}
.compear-pricing-section-area .compear-table .comparison .price-now p {
display: block;
}
}
@media screen and (max-width: 720px) {
.compear-pricing-section-area .compear-table .table_ul {
padding: 0px;
}
.compear-pricing-section-area .compear-table .table_ul li {
line-height: 16px;
padding: 3px 0;
}
.compear-pricing-section-area .compear-table .comparison {
max-width: 100%;
}
.compear-pricing-section-area .compear-table .comparison td:first-child,
.compear-pricing-section-area .compear-table .comparison th:first-child {
display: none;
}
.compear-pricing-section-area .compear-table .comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.compear-pricing-section-area .compear-table .comparison .row {
background: tan;
}
.compear-pricing-section-area .compear-table .comparison td,
.compear-pricing-section-area .compear-table .comparison th {
border-top: none;
padding: 10px;
}
.compear-pricing-section-area .compear-table .price-info {
border-top: 0 !important;
padding: 10px 0 !important;
}
.compear-pricing-section-area .compear-table .comparison .price-now p {
display: block;
}
.compear-pricing-section-area .compear-table .comparison .price-now span {
font-size: 24px;
}
.compear-pricing-section-area .compear-table .comparison .qbse {
font-size: 1.2em;
}
.compear-pricing-section-area .compear-table .comparison td {
font-size: 16px;
}
.compear-pricing-section-area .compear-table .comparison th {
font-size: 44px;
}
}
.pricing1-box {
background-color: var(--vtc-bg-common-2);
padding: 32px 24px;
border-radius: 8px;
position: relative;
z-index: 2;
margin-top: 110px;
transition: all 0.4s;
}
.pricing1-box::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg/pricing1-box-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: -1;
border-radius: 8px;
transition: all 0.4s;
opacity: 0;
}
.pricing1-box .price-area {
position: relative;
height: 160px;
width: 160px;
margin-top: -100px;
transition: all 0.4s;
}
.pricing1-box .price-area .bg-shape {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 160px;
}
.pricing1-box .price-area .text {
width: 80px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-left: -40px;
height: 70px;
margin-top: -35px;
}
.pricing1-box .price-area .text h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-44); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.pricing1-box .price-area .text p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.pricing1-box .pricing-content {
margin-top: 20px;
}
.pricing1-box .pricing-content h3 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 100% */
text-transform: capitalize;
padding-top: 12px;
transition: all 0.4s;
}
.pricing1-box .pricing-content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.pricing1-box .pricing-list {
border-top: 1px solid var(--vtc-border-1);
margin-top: 22px;
padding-top: 22px;
}
.pricing1-box .pricing-list ul li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-bottom: 18px;
display: flex;
align-items: center;
}
.pricing1-box .pricing-list ul li .check {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: var(--vtc-text-white);
background: var(--vtc-bg-main3);
border-radius: 50%;
margin-right: 7px;
}
.pricing1-box .button {
text-align: center;
margin-top: 16px;
}
.pricing1-box .button a {
display: inline-block;
position: relative;
padding: 20px;
width: 100%;
z-index: 2;
border-radius: 8px;
overflow: hidden;
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.pricing1-box .button a::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-main3);
z-index: -1;
}
.pricing1-box:hover .price-area {
transform: translateY(-10px);
transition: all 0.4s;
}
.pricing1-box:hover .pricing-content h3 {
transition: all 0.4s;
color: var(--vtc-text-white);
}
.pricing1-box:hover .pricing-content p {
transition: all 0.4s;
color: var(--vtc-text-white80per);
}
.pricing1-box:hover .pricing-list ul li {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing1-box:hover::after {
transition: all 0.4s;
opacity: 1;
}
.pricing1-box:hover .button a {
color: var(--vtc-bg-main2);
transition: all 0.4s;
}
.pricing1-box:hover .button a::after {
transition: all 0.4s;
background: var(--vtc-text-white);
}
@media (max-width: 767px) {
.compear-pricing3 {
padding: 50px 0 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing3 {
padding: 50px 0 50px;
}
}
.compear-pricing3 .compear-header {
margin-bottom: 60px;
}
.compear-pricing3 .compear-header h2 {
text-align: center;
font-style: normal;
line-height: 54px;
}
@media (max-width: 767px) {
.compear-pricing3 .compear-header h2 {
font-size: 24px;
}
}
.compear-pricing3 .compear-table {
position: relative;
}
@media (max-width: 767px) {
.compear-pricing3 .compear-table {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing3 .compear-table {
overflow-y: scroll;
}
}
.compear-pricing3 .compear-table ul {
position: absolute;
top: 30px;
left: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing3 .compear-table ul {
top: 65px;
}
}
@media (max-width: 767px) {
.compear-pricing3 .compear-table ul {
top: 3px;
}
}
.compear-pricing3 .compear-table ul li {
cursor: pointer;
}
.compear-pricing3 .compear-table ul li button {
font-style: normal;
line-height: 16px;
text-transform: capitalize;
padding: 10px;
border-radius: 2px;
margin: 0 0 0 12px;
cursor: pointer;
}
.compear-pricing3 .compear-table ul li button.nav-link.active {
cursor: pointer;
}
.compear-pricing3 .compear-table .comparison {
max-width: 1300px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
}
@media (max-width: 767px) {
.compear-pricing3 .compear-table .comparison {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing3 .compear-table .comparison {
overflow-y: scroll;
}
}
.compear-pricing3 .compear-table .comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
@media (max-width: 767px) {
.compear-pricing3 .compear-table .comparison table {
width: 800px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing3 .compear-table .comparison table {
width: 1200px;
}
}
.compear-pricing3 .compear-table .comparison td p.infor {
font-weight: var(--f-fw-normal);
font-size: var(--f-fs-font-16);
}
.compear-pricing3 .compear-table .comparison td.highlight {
background-color: var(--vtc-bg-main5);
}
.compear-pricing3 .compear-table .comparison td.highlight p {
color: var(--vtc-text-white);
}
.compear-pricing3 .compear-table .comparison td,
.compear-pricing3 .compear-table .comparison th {
border-right: 1px solid var(--vtc-border-2);
empty-cells: show;
padding: 20px 20px;
border-top: 1px solid var(--vtc-border-2);
border-bottom: 1px solid var(--vtc-border-2);
border: 1px solid var(--vtc-border-2);
background: var(--vtc-bg-common-2);
color: var(--vtc-text-title3);
font-style: normal;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.compear-pricing3 .compear-table .comparison tbody tr:nth-child(odd) {
display: none;
}
.compear-pricing3 .compear-table .comparison .compare-row {
background: #F7F7F7;
}
.compear-pricing3 .compear-table .comparison th {
font-weight: normal;
padding: 0;
}
.compear-pricing3 .compear-table .comparison tr td:first-child {
text-align: left;
}
.compear-pricing3 .compear-table .comparison .product,
.compear-pricing3 .compear-table .comparison .tl {
padding: 10px;
}
.compear-pricing3 .compear-table .comparison .tl2 {
border-right: 0;
}
.compear-pricing3 .compear-table .comparison .product {
background: blueviolet;
height: 40px;
font-size: 1.6em;
}
.compear-pricing3 .compear-table .comparison .price-now {
padding: 24px 30px;
text-align: center;
position: relative;
}
.compear-pricing3 .compear-table .comparison .price-now.highlight {
background: var(--vtc-bg-main5);
}
.compear-pricing3 .compear-table .comparison .price-now.highlight .price-now-area span {
color: var(--vtc-text-white);
}
.compear-pricing3 .compear-table .comparison .price-now.highlight .price-now-area p {
color: var(--vtc-text-white80per);
}
.compear-pricing3 .compear-table .comparison .price-now.highlight .price-now-area h2 {
color: var(--vtc-text-white);
}
.compear-pricing3 .compear-table .comparison .price-now.highlight .price-now-area h2 span {
color: var(--vtc-text-white);
}
.compear-pricing3 .compear-table .comparison .price-now .consulting2 {
position: absolute;
top: -10%;
left: 25%;
right: 25%;
}
.compear-pricing3 .compear-table .comparison .price-now img {
top: 18px;
left: -45px;
}
.compear-pricing3 .compear-table .comparison .price-now p {
color: gray;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
position: absolute;
top: 65%;
left: 160px;
}
.compear-pricing3 .compear-table .comparison .price-now .creat-button {
border-radius: 4px;
padding: 10px;
font-size: 20px;
margin: 0;
}
.compear-pricing3 .compear-table .comparison .price-now .creat-button:after {
border-radius: 4px;
}
.compear-pricing3 .compear-table .comparison .price-now .price-now-area span {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
display: inline-block;
margin-bottom: 16px;
}
.compear-pricing3 .compear-table .comparison .price-now .price-now-area h2 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-54); /* 122.727% */
}
@media (max-width: 767px) {
.compear-pricing3 .compear-table .comparison .price-now .price-now-area h2 {
line-height: 32px;
}
}
.compear-pricing3 .compear-table .comparison .price-now .price-now-area h2 span {
line-height: 20px;
}
.compear-pricing3 .compear-table .comparison .price-now .price-now-area p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
position: relative !important;
left: 0;
top: 0;
margin-top: 0;
}
.compear-pricing3 .compear-table .comparison .price-now .price-now-area .creat-button {
padding: 18px 24px;
margin-top: 24px;
}
.compear-pricing3 .compear-table .comparison .price-now .price-now-area .creat-button::after {
background: red;
}
.compear-pricing3 .compear-table td.compare-header {
font-size: 32px !important;
padding: 24px 20px !important;
}
@media (max-width: 767px) {
.compear-pricing3 .compear-table td.compare-header {
line-height: 16px;
}
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
.compear-pricing3 .compear-table .table_ul li {
letter-spacing: 0px;
}
.compear-pricing3 .compear-table .comparison .price-now p {
display: block;
}
}
@media screen and (max-width: 720px) {
.compear-pricing3 .compear-table .table_ul {
padding: 0px;
}
.compear-pricing3 .compear-table .table_ul li {
line-height: 16px;
padding: 3px 0;
}
.compear-pricing3 .compear-table .comparison {
max-width: 100%;
}
.compear-pricing3 .compear-table .comparison td:first-child,
.compear-pricing3 .compear-table .comparison th:first-child {
display: none;
}
.compear-pricing3 .compear-table .comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.compear-pricing3 .compear-table .comparison .row {
background: tan;
}
.compear-pricing3 .compear-table .comparison td,
.compear-pricing3 .compear-table .comparison th {
border-top: none;
padding: 10px;
}
.compear-pricing3 .compear-table .price-info {
border-top: 0 !important;
padding: 10px 0 !important;
}
.compear-pricing3 .compear-table .comparison .price-now p {
display: block;
}
.compear-pricing3 .compear-table .comparison .price-now span {
font-size: 24px;
}
.compear-pricing3 .compear-table .comparison .qbse {
font-size: 1.2em;
}
.compear-pricing3 .compear-table .comparison td {
font-size: 16px;
}
.compear-pricing3 .compear-table .comparison th {
font-size: 44px;
}
}
.compear-pricing3 .theme-btn5 {
height: 58px;
}
.compear-pricing3 .theme-btn5 span {
color: var(--vtc-text-white) !important;
}
.compear-pricing3 .theme-btn4 {
height: 58px;
}
.compear-pricing3 .theme-btn4 span {
color: var(--vtc-text-title4) !important;
}
.compear-pricing3 .theme-btn4:hover span {
color: var(--vtc-text-white) !important;
}
.pricing4-box {
padding: 28px 32px;
border-radius: 9px;
position: relative;
z-index: 2;
overflow: hidden;
transition: all 0.4s;
}
.pricing4-box::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/pricing4-box-bg1.jpg);
z-index: -2;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
}
.pricing4-box::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/pricing4-box-bg2.jpg);
z-index: -1;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
opacity: 0;
}
.pricing4-box .title-area h5 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.pricing4-box .title-area h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 100% */
transition: all 0.4s;
padding: 16px 0px;
}
.pricing4-box .title-area h2 span {
font-size: var(--f-fs-font-16);
line-height: var(--f-fs-font-16);
}
.pricing4-box .title-area p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
transition: all 0.4s;
}
.pricing4-box .list-area {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pricing4-box .list-area {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.pricing4-box .list-area {
margin-top: 30px;
}
}
.pricing4-box .list-area h4 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
text-transform: uppercase;
padding-bottom: 5px;
transition: all 0.4s;
}
.pricing4-box .list-area li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 20px;
transition: all 0.4s;
}
.pricing4-box .list-area li .check {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background: var(--vtc-bg-main3);
color: var(--vtc-text-white);
margin-right: 5px;
border-radius: 50%;
font-size: 12px;
transition: all 0.4s;
}
.pricing4-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.pricing4-box:hover::before {
opacity: 1;
transition: all 0.4s;
}
.pricing4-box:hover .list-area {
background-color: var(--vtc-bg-white20per);
transition: all 0.4s;
}
.pricing4-box:hover .list-area h4 {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box:hover .list-area li {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box:hover .title-area h5 {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box:hover .title-area h2 {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box:hover .title-area p {
color: var(--vtc-text-white80per);
transition: all 0.4s;
}
@media (max-width: 767px) {
.compear-pricing5 {
padding: 50px 0 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing5 {
padding: 50px 0 50px;
}
}
.compear-pricing5 .compear-header {
margin-bottom: 60px;
}
.compear-pricing5 .compear-header h2 {
text-align: center;
font-style: normal;
line-height: 54px;
}
@media (max-width: 767px) {
.compear-pricing5 .compear-header h2 {
font-size: 24px;
}
}
.compear-pricing5 .compear-table {
position: relative;
}
@media (max-width: 767px) {
.compear-pricing5 .compear-table {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing5 .compear-table {
overflow-y: scroll;
}
}
.compear-pricing5 .compear-table ul {
position: absolute;
top: 30px;
left: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing5 .compear-table ul {
top: 65px;
}
}
@media (max-width: 767px) {
.compear-pricing5 .compear-table ul {
top: 3px;
}
}
.compear-pricing5 .compear-table ul li {
cursor: pointer;
}
.compear-pricing5 .compear-table ul li button {
font-style: normal;
line-height: 16px;
text-transform: capitalize;
padding: 10px;
border-radius: 2px;
margin: 0 0 0 12px;
cursor: pointer;
}
.compear-pricing5 .compear-table ul li button.nav-link.active {
cursor: pointer;
}
.compear-pricing5 .compear-table .comparison {
max-width: 1300px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
background: var(--vtc-bg-white10per);
}
@media (max-width: 767px) {
.compear-pricing5 .compear-table .comparison {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing5 .compear-table .comparison {
overflow-y: scroll;
}
}
.compear-pricing5 .compear-table .comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
@media (max-width: 767px) {
.compear-pricing5 .compear-table .comparison table {
width: 800px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing5 .compear-table .comparison table {
width: 1200px;
}
}
.compear-pricing5 .compear-table .comparison td p.infor {
font-weight: var(--f-fw-normal);
font-size: var(--f-fs-font-16);
}
.compear-pricing5 .compear-table .comparison td.highlight {
background-color: var(--vtc-bg-white20per);
}
.compear-pricing5 .compear-table .comparison td.highlight p {
color: var(--vtc-text-white);
}
.compear-pricing5 .compear-table .comparison td,
.compear-pricing5 .compear-table .comparison th {
border-right: 1px solid var(--vtc-bg-white10per);
empty-cells: show;
padding: 20px 20px;
border-top: 1px solid var(--vtc-bg-white10per);
border-bottom: 1px solid var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
background: var(--vtc-bg-white10per);
color: var(--vtc-text-white80per);
font-style: normal;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.compear-pricing5 .compear-table .comparison tbody tr:nth-child(odd) {
display: none;
}
.compear-pricing5 .compear-table .comparison .compare-row {
background: transparent;
}
.compear-pricing5 .compear-table .comparison th {
font-weight: normal;
padding: 0;
}
.compear-pricing5 .compear-table .comparison tr td:first-child {
text-align: left;
}
.compear-pricing5 .compear-table .comparison .product,
.compear-pricing5 .compear-table .comparison .tl {
padding: 10px;
}
.compear-pricing5 .compear-table .comparison .tl2 {
border-right: 0;
}
.compear-pricing5 .compear-table .comparison .product {
background: blueviolet;
height: 40px;
font-size: 1.6em;
}
.compear-pricing5 .compear-table .comparison .price-now {
padding: 24px 30px;
text-align: center;
position: relative;
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area .btn_theme10 {
margin-top: 16px;
}
.compear-pricing5 .compear-table .comparison .price-now.highlight {
background: var(--vtc-bg-white20per);
}
.compear-pricing5 .compear-table .comparison .price-now.highlight .price-now-area span {
color: var(--vtc-text-white);
}
.compear-pricing5 .compear-table .comparison .price-now.highlight .price-now-area p {
color: var(--vtc-text-white80per);
}
.compear-pricing5 .compear-table .comparison .price-now.highlight .price-now-area h2 {
color: var(--vtc-text-white);
}
.compear-pricing5 .compear-table .comparison .price-now.highlight .price-now-area h2 span {
color: var(--vtc-text-white);
}
.compear-pricing5 .compear-table .comparison .price-now .consulting2 {
position: absolute;
top: -10%;
left: 25%;
right: 25%;
}
.compear-pricing5 .compear-table .comparison .price-now img {
top: 18px;
left: -45px;
}
.compear-pricing5 .compear-table .comparison .price-now p {
color: var(--vtc-text-white80per);
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
position: absolute;
top: 65%;
left: 160px;
}
.compear-pricing5 .compear-table .comparison .price-now .creat-button {
border-radius: 4px;
padding: 10px;
font-size: 20px;
margin: 0;
}
.compear-pricing5 .compear-table .comparison .price-now .creat-button:after {
border-radius: 4px;
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area span {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
display: inline-block;
margin-bottom: 16px;
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-54); /* 122.727% */
}
@media (max-width: 767px) {
.compear-pricing5 .compear-table .comparison .price-now .price-now-area h2 {
line-height: 32px;
}
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area h2 span {
line-height: 20px;
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
position: relative !important;
left: 0;
top: 0;
margin-top: 0;
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area .creat-button {
padding: 18px 24px;
margin-top: 24px;
}
.compear-pricing5 .compear-table .comparison .price-now .price-now-area .creat-button::after {
background: red;
}
.compear-pricing5 .compear-table td.compare-header {
font-size: 32px !important;
padding: 24px 20px !important;
}
@media (max-width: 767px) {
.compear-pricing5 .compear-table td.compare-header {
line-height: 16px;
}
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
.compear-pricing5 .compear-table .table_ul li {
letter-spacing: 0px;
}
.compear-pricing5 .compear-table .comparison .price-now p {
display: block;
}
}
@media screen and (max-width: 720px) {
.compear-pricing5 .compear-table .table_ul {
padding: 0px;
}
.compear-pricing5 .compear-table .table_ul li {
line-height: 16px;
padding: 3px 0;
}
.compear-pricing5 .compear-table .comparison {
max-width: 100%;
}
.compear-pricing5 .compear-table .comparison td:first-child,
.compear-pricing5 .compear-table .comparison th:first-child {
display: none;
}
.compear-pricing5 .compear-table .comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.compear-pricing5 .compear-table .comparison .row {
background: tan;
}
.compear-pricing5 .compear-table .comparison td,
.compear-pricing5 .compear-table .comparison th {
border-top: none;
padding: 10px;
}
.compear-pricing5 .compear-table .price-info {
border-top: 0 !important;
padding: 10px 0 !important;
}
.compear-pricing5 .compear-table .comparison .price-now p {
display: block;
}
.compear-pricing5 .compear-table .comparison .price-now span {
font-size: 24px;
}
.compear-pricing5 .compear-table .comparison .qbse {
font-size: 1.2em;
}
.compear-pricing5 .compear-table .comparison td {
font-size: 16px;
}
.compear-pricing5 .compear-table .comparison th {
font-size: 44px;
}
}
.page-pricing-box {
background-color: var(--vtc-bg-common-2);
padding: 32px 24px;
border-radius: 8px;
position: relative;
z-index: 2;
margin-top: 110px;
transition: all 0.4s;
}
.page-pricing-box::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg/pricing1-box-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: -1;
border-radius: 8px;
transition: all 0.4s;
opacity: 0;
}
.page-pricing-box .price-area {
position: relative;
height: 160px;
width: 160px;
margin-top: -100px;
transition: all 0.4s;
}
.page-pricing-box .price-area .bg-shape {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 160px;
}
.page-pricing-box .price-area .text {
width: 80px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-left: -40px;
height: 70px;
margin-top: -35px;
text-align: center;
}
.page-pricing-box .price-area .text h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-44); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.page-pricing-box .price-area .text p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.page-pricing-box .pricing-content {
margin-top: 20px;
}
.page-pricing-box .pricing-content h3 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 100% */
text-transform: capitalize;
padding-top: 12px;
transition: all 0.4s;
}
.page-pricing-box .pricing-content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.page-pricing-box .pricing-list {
border-top: 1px solid var(--vtc-border-1);
margin-top: 22px;
padding-top: 22px;
}
.page-pricing-box .pricing-list ul li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-bottom: 18px;
display: flex;
align-items: center;
}
.page-pricing-box .pricing-list ul li .check {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: var(--vtc-text-white);
background: var(--vtc-bg-main3);
border-radius: 50%;
margin-right: 7px;
}
.page-pricing-box .button {
text-align: center;
margin-top: 16px;
}
.page-pricing-box .button a {
display: inline-block;
position: relative;
padding: 20px;
width: 100%;
z-index: 2;
border-radius: 111px;
overflow: hidden;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.page-pricing-box .button a::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-main1);
z-index: -1;
}
.page-pricing-box:hover .price-area {
transform: translateY(-10px);
transition: all 0.4s;
}
.page-pricing-box:hover .pricing-content h3 {
transition: all 0.4s;
color: var(--vtc-text-white);
}
.page-pricing-box:hover .pricing-content p {
transition: all 0.4s;
color: var(--vtc-text-white80per);
}
.page-pricing-box:hover .pricing-list ul li {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.page-pricing-box:hover::after {
transition: all 0.4s;
opacity: 1;
}
.page-pricing-box:hover .button a {
color: var(--vtc-bg-main2);
transition: all 0.4s;
}
.page-pricing-box:hover .button a::after {
transition: all 0.4s;
background: var(--vtc-text-white);
}
.pricing1 .toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.pricing1 .custom-toggle {
position: absolute;
height: 20px;
width: 20px;
background-color: var(--vtc-text-white);
top: 5px;
left: 35px;
border-radius: 50%;
transition: 300ms all;
}
.pricing1 .toggle-inner .t-month,
.pricing1 .toggle-inner .t-year {
position: absolute;
left: -75px;
top: 2px;
transition: 300ms all;
}
.pricing1 .toggle-inner .t-year {
left: unset;
left: 73px;
opacity: 0.5;
}
.pricing1 .active > .toggle-inner .t-month {
opacity: 0.5;
}
.pricing1 .active > .toggle-inner .t-year {
opacity: 1;
}
.pricing1 .toggle-inner input:checked + span {
left: 5px;
}
.pricing1 .toggle-inner {
width: 60px;
margin: 0 auto;
height: 30px;
border-radius: 25px;
position: relative;
background: var(--vtc-bg-main2);
left: -20px;
}
.pricing1 .t-year h4 {
min-width: 200px;
}
.pricing1 .t-year {
text-align: left;
}
.pricing1 .plan-toggle-wrap {
margin-top: 50px;
margin-bottom: 32px;
}
.pricing1 .plan-toggle-wrap h4 {
font-size: var(--ztc-font-size-font-s16);
font-weight: var(--ztc-weight-medium);
color: var(--ztc-text-text-1);
font-family: var(--ztc-family-font1);
margin-bottom: 0;
}
.pricing-section-area {
position: relative;
z-index: 1;
overflow: hidden;
}
.pricing-section-area .heading3 h5 {
color: var(--ztc-text-text-9);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
}
.pricing-section-area .heading3 h2 {
color: var(--ztc-text-text-1);
}
.pricing-section-area .toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.pricing-section-area .custom-toggle {
position: absolute;
height: 20px;
width: 20px;
background-color: var(--ztc-text-text-9);
top: 5px;
left: 35px;
border-radius: 50%;
transition: 300ms all;
}
.pricing-section-area .toggle-inner .t-month,
.pricing-section-area .toggle-inner .t-year {
position: absolute;
left: -75px;
top: 2px;
transition: 300ms all;
}
.pricing-section-area .toggle-inner .t-year {
left: unset;
left: 73px;
opacity: 0.5;
}
.pricing-section-area .active > .toggle-inner .t-month {
opacity: 0.5;
}
.pricing-section-area .active > .toggle-inner .t-year {
opacity: 1;
}
.pricing-section-area .toggle-inner input:checked + span {
left: 5px;
}
.pricing-section-area .toggle-inner {
width: 60px;
margin: 0 auto;
height: 30px;
border-radius: 25px;
position: relative;
background: #334834;
left: -20px;
}
.pricing-section-area .t-year h4 {
min-width: 200px;
}
.pricing-section-area .t-year {
text-align: left;
}
.pricing-section-area .plan-toggle-wrap {
margin-top: 50px;
margin-bottom: 32px;
}
.pricing-section-area .plan-toggle-wrap h4 {
font-size: var(--ztc-font-size-font-s16);
font-weight: var(--ztc-weight-medium);
color: var(--ztc-text-text-1);
font-family: var(--ztc-family-font1);
margin-bottom: 0;
}
.pricing-section-area .single-pricing-area {
margin-bottom: 30px;
background: #1C3B45;
border-radius: 4px;
padding: 30px;
transition: all 0.4s;
}
.pricing-section-area .single-pricing-area:hover {
transform: translateY(-5px);
transition: all 0.4s;
}
.pricing-section-area .single-pricing-area .pricing-box h3 {
font-family: var(--ztc-family-font1);
font-size: var(--ztc-font-size-font-s24);
font-weight: var(--ztc-weight-semibold);
color: var(--ztc-text-text-1);
line-height: var(--ztc-font-size-font-s24);
}
.pricing-section-area .single-pricing-area .pricing-box p {
font-family: var(--ztc-family-font1);
font-size: var(--ztc-text-text-1);
line-height: var(--ztc-font-size-font-s26);
font-size: var(--ztc-font-size-font-s16);
color: var(--ztc-text-text-1);
font-weight: var(--ztc-weight-regular);
opacity: 80%;
}
.pricing-section-area .single-pricing-area .pricing-box h2 {
color: var(--ztc-text-text-8);
-webkit-text-stroke-width: 1;
-webkit-text-stroke-color: var(--02-home-page-textcolors, #032530);
font-family: var(--ztc-family-font1);
font-size: var(--ztc-font-size-font-s48);
font-style: normal;
font-weight: var(--ztc-weight-medium);
line-height: 120px;
height: 120px;
width: 120px;
display: inline-block;
border-radius: 50%;
background: var(--ztc-text-text-9);
transition: all 0.4s;
text-align: center;
position: relative;
}
.pricing-section-area .single-pricing-area .pricing-box h2 span {
color: rgba(255, 255, 255, 0.8);
font-family: var(--ztc-family-font1);
font-size: var(--ztc-font-size-font-s20);
font-style: normal;
font-weight: var(--ztc-weight-medium);
line-height: 20px;
display: inline-block;
position: absolute;
left: 140px;
top: 55px;
width: 110px;
}
.pricing-section-area .single-pricing-area .pricing-box h2 .elements19 {
position: absolute;
height: 140px;
width: 140px;
max-height: 140px;
max-width: 140px;
left: -10px;
top: -10px;
}
.pricing-section-area .single-pricing-area .pricing-box .btn-area1 .vl-btn3 {
width: 100%;
text-align: center;
}
.pricing-section-area .single-pricing-area .pricing-box ul li {
color: rgba(255, 255, 255, 0.8);
font-family: var(--ztc-family-font1);
font-size: var(--ztc-font-size-font-s16);
font-style: normal;
font-weight: var(--ztc-weight-regular);
line-height: 16px;
margin-top: 16px;
}
.pricing-section-area .single-pricing-area .pricing-box ul li img {
margin: 0 8px 0 0;
}
.pricing-section-area .single-pricing-area.active {
background: var(--ztc-text-text-9);
transition: all 0.4s;
}
.pricing-section-area .single-pricing-area.active h3 {
color: var(--ztc-text-text-8);
}
.pricing-section-area .single-pricing-area.active p {
color: var(--ztc-text-text-10);
}
.pricing-section-area .single-pricing-area.active h2 {
background: var(--ztc-bg-bg-6);
color: var(--ztc-text-text-1);
}
.pricing-section-area .single-pricing-area.active h2 img {
filter: brightness(0);
}
.pricing-section-area .single-pricing-area.active h2 span {
color: var(--ztc-text-text-8);
}
.pricing-section-area .single-pricing-area.active ul li {
color: var(--ztc-text-text-8);
}
.pricing-section-area .single-pricing-area.active .btn-area1 .vl-btn3 {
background: var(--ztc-bg-bg-6);
color: var(--ztc-text-text-1);
transition: all 0.4s;
}
.pricing4-box-page {
padding: 28px 32px;
border-radius: 9px;
position: relative;
z-index: 2;
overflow: hidden;
transition: all 0.4s;
}
.pricing4-box-page::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/pricing4-box-bg1.jpg);
z-index: -2;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
}
.pricing4-box-page::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/service-box-pricing-active.png);
z-index: -1;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
opacity: 0;
}
.pricing4-box-page .title-area h5 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.pricing4-box-page .title-area h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 100% */
transition: all 0.4s;
padding: 16px 0px;
}
.pricing4-box-page .title-area h2 span {
font-size: var(--f-fs-font-16);
line-height: var(--f-fs-font-16);
}
.pricing4-box-page .title-area p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
transition: all 0.4s;
}
.pricing4-box-page .list-area {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pricing4-box-page .list-area {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.pricing4-box-page .list-area {
margin-top: 30px;
}
}
.pricing4-box-page .list-area h4 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
text-transform: uppercase;
padding-bottom: 5px;
transition: all 0.4s;
}
.pricing4-box-page .list-area li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 20px;
transition: all 0.4s;
}
.pricing4-box-page .list-area li .check {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background: var(--vtc-bg-main3);
color: var(--vtc-text-white);
margin-right: 5px;
border-radius: 50%;
font-size: 12px;
transition: all 0.4s;
}
.pricing4-box-page:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.pricing4-box-page:hover::before {
opacity: 1;
transition: all 0.4s;
}
.pricing4-box-page:hover .list-area {
background-color: var(--vtc-bg-white20per);
transition: all 0.4s;
}
.pricing4-box-page:hover .list-area h4 {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box-page:hover .list-area li {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box-page:hover .title-area h5 {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box-page:hover .title-area h2 {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing4-box-page:hover .title-area p {
color: var(--vtc-text-white80per);
transition: all 0.4s;
}
.page-pricing-box2 {
background-color: var(--vtc-bg-white);
padding: 32px 24px;
border-radius: 8px;
position: relative;
z-index: 2;
margin-top: 110px;
transition: all 0.4s;
}
.page-pricing-box2::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg/pricing1-box-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: -1;
border-radius: 8px;
transition: all 0.4s;
opacity: 0;
}
.page-pricing-box2 .price-area {
position: relative;
height: 160px;
width: 160px;
margin-top: -100px;
transition: all 0.4s;
}
.page-pricing-box2 .price-area .bg-shape {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 160px;
}
.page-pricing-box2 .price-area .text {
width: 80px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-left: -40px;
height: 70px;
margin-top: -35px;
text-align: center;
}
.page-pricing-box2 .price-area .text h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-44); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.page-pricing-box2 .price-area .text p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.page-pricing-box2 .pricing-content {
margin-top: 20px;
}
.page-pricing-box2 .pricing-content h3 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 100% */
text-transform: capitalize;
padding-top: 12px;
transition: all 0.4s;
}
.page-pricing-box2 .pricing-content p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.page-pricing-box2 .pricing-list {
border-top: 1px solid var(--vtc-border-1);
margin-top: 22px;
padding-top: 22px;
}
.page-pricing-box2 .pricing-list ul li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-bottom: 18px;
display: flex;
align-items: center;
}
.page-pricing-box2 .pricing-list ul li .check {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: var(--vtc-text-white);
background: var(--vtc-bg-main3);
border-radius: 50%;
margin-right: 7px;
}
.page-pricing-box2 .button {
text-align: center;
margin-top: 16px;
}
.page-pricing-box2 .button a {
display: inline-block;
position: relative;
padding: 20px;
width: 100%;
z-index: 2;
border-radius: 111px;
overflow: hidden;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-18); /* 100% */
}
.page-pricing-box2 .button a::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--vtc-bg-main1);
z-index: -1;
}
.page-pricing-box2:hover .price-area {
transform: translateY(-10px);
transition: all 0.4s;
}
.page-pricing-box2:hover .pricing-content h3 {
transition: all 0.4s;
color: var(--vtc-text-white);
}
.page-pricing-box2:hover .pricing-content p {
transition: all 0.4s;
color: var(--vtc-text-white80per);
}
.page-pricing-box2:hover .pricing-list ul li {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.page-pricing-box2:hover::after {
transition: all 0.4s;
opacity: 1;
}
.page-pricing-box2:hover .button a {
color: var(--vtc-bg-main2);
transition: all 0.4s;
}
.page-pricing-box2:hover .button a::after {
transition: all 0.4s;
background: var(--vtc-text-white);
}
@media (max-width: 767px) {
.compear-pricing10 {
padding: 50px 0 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing10 {
padding: 50px 0 50px;
}
}
.compear-pricing10 .compear-header {
margin-bottom: 60px;
}
.compear-pricing10 .compear-header h2 {
text-align: center;
font-style: normal;
line-height: 54px;
}
@media (max-width: 767px) {
.compear-pricing10 .compear-header h2 {
font-size: 24px;
}
}
.compear-pricing10 .compear-table {
position: relative;
}
@media (max-width: 767px) {
.compear-pricing10 .compear-table {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing10 .compear-table {
overflow-y: scroll;
}
}
.compear-pricing10 .compear-table ul {
position: absolute;
top: 30px;
left: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing10 .compear-table ul {
top: 65px;
}
}
@media (max-width: 767px) {
.compear-pricing10 .compear-table ul {
top: 3px;
}
}
.compear-pricing10 .compear-table ul li {
cursor: pointer;
}
.compear-pricing10 .compear-table ul li button {
font-style: normal;
line-height: 16px;
text-transform: capitalize;
padding: 10px;
border-radius: 2px;
margin: 0 0 0 12px;
cursor: pointer;
}
.compear-pricing10 .compear-table ul li button.nav-link.active {
cursor: pointer;
}
.compear-pricing10 .compear-table .comparison {
max-width: 1300px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
background: var(--vtc-bg-white);
}
@media (max-width: 767px) {
.compear-pricing10 .compear-table .comparison {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing10 .compear-table .comparison {
overflow-y: scroll;
}
}
.compear-pricing10 .compear-table .comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
@media (max-width: 767px) {
.compear-pricing10 .compear-table .comparison table {
width: 800px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing10 .compear-table .comparison table {
width: 1200px;
}
}
.compear-pricing10 .compear-table .comparison td p.infor {
font-weight: var(--f-fw-normal);
font-size: var(--f-fs-font-16);
}
.compear-pricing10 .compear-table .comparison td.highlight {
background-color: var(--vtc-bg-main18);
}
.compear-pricing10 .compear-table .comparison td.highlight p {
color: var(--vtc-text-white);
}
.compear-pricing10 .compear-table .comparison td,
.compear-pricing10 .compear-table .comparison th {
border-right: 1px solid var(--vtc-border-3);
empty-cells: show;
padding: 20px 20px;
border-top: 1px solid var(--vtc-border-3);
border-bottom: 1px solid var(--vtc-border-3);
border: 1px solid var(--vtc-border-3);
background: var(--vtc-bg-white);
color: var(--vtc-text-title6);
font-style: normal;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.compear-pricing10 .compear-table .comparison tbody tr:nth-child(odd) {
display: none;
}
.compear-pricing10 .compear-table .comparison .compare-row {
background: transparent;
}
.compear-pricing10 .compear-table .comparison th {
font-weight: normal;
padding: 0;
}
.compear-pricing10 .compear-table .comparison tr td:first-child {
text-align: left;
}
.compear-pricing10 .compear-table .comparison .product,
.compear-pricing10 .compear-table .comparison .tl {
padding: 10px;
}
.compear-pricing10 .compear-table .comparison .tl2 {
border-right: 0;
}
.compear-pricing10 .compear-table .comparison .product {
background: blueviolet;
height: 40px;
font-size: 1.6em;
}
.compear-pricing10 .compear-table .comparison .price-now {
padding: 24px 30px;
text-align: center;
position: relative;
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area .btn_theme10 {
margin-top: 16px;
}
.compear-pricing10 .compear-table .comparison .price-now.highlight {
background: var(--vtc-bg-main18);
}
.compear-pricing10 .compear-table .comparison .price-now.highlight .price-now-area span.sub {
color: var(--vtc-text-white);
}
.compear-pricing10 .compear-table .comparison .price-now.highlight .price-now-area p {
color: var(--vtc-text-white80per);
}
.compear-pricing10 .compear-table .comparison .price-now.highlight .price-now-area h2 {
color: var(--vtc-text-white);
}
.compear-pricing10 .compear-table .comparison .price-now.highlight .price-now-area h2 span {
color: var(--vtc-text-white);
}
.compear-pricing10 .compear-table .comparison .price-now .consulting2 {
position: absolute;
top: -10%;
left: 25%;
right: 25%;
}
.compear-pricing10 .compear-table .comparison .price-now img {
top: 18px;
left: -45px;
}
.compear-pricing10 .compear-table .comparison .price-now p {
color: var(--vtc-text-pera2);
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
position: absolute;
top: 65%;
left: 160px;
}
.compear-pricing10 .compear-table .comparison .price-now .creat-button {
border-radius: 4px;
padding: 10px;
font-size: 20px;
margin: 0;
}
.compear-pricing10 .compear-table .comparison .price-now .creat-button:after {
border-radius: 4px;
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area span.sub {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
display: inline-block;
margin-bottom: 16px;
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area h2 {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-54); /* 122.727% */
}
@media (max-width: 767px) {
.compear-pricing10 .compear-table .comparison .price-now .price-now-area h2 {
line-height: 32px;
}
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area h2 span {
line-height: 20px;
font-size: var(--f-fs-font-16);
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
position: relative !important;
left: 0;
top: 0;
margin-top: 0;
padding-top: 10px;
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area .creat-button {
padding: 18px 24px;
margin-top: 24px;
}
.compear-pricing10 .compear-table .comparison .price-now .price-now-area .creat-button::after {
background: red;
}
.compear-pricing10 .compear-table td.compare-header {
font-size: 32px !important;
padding: 24px 20px !important;
}
@media (max-width: 767px) {
.compear-pricing10 .compear-table td.compare-header {
line-height: 16px;
}
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
.compear-pricing10 .compear-table .table_ul li {
letter-spacing: 0px;
}
.compear-pricing10 .compear-table .comparison .price-now p {
display: block;
}
}
@media screen and (max-width: 720px) {
.compear-pricing10 .compear-table .table_ul {
padding: 0px;
}
.compear-pricing10 .compear-table .table_ul li {
line-height: 16px;
padding: 3px 0;
}
.compear-pricing10 .compear-table .comparison {
max-width: 100%;
}
.compear-pricing10 .compear-table .comparison td:first-child,
.compear-pricing10 .compear-table .comparison th:first-child {
display: none;
}
.compear-pricing10 .compear-table .comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.compear-pricing10 .compear-table .comparison .row {
background: tan;
}
.compear-pricing10 .compear-table .comparison td,
.compear-pricing10 .compear-table .comparison th {
border-top: none;
padding: 10px;
}
.compear-pricing10 .compear-table .price-info {
border-top: 0 !important;
padding: 10px 0 !important;
}
.compear-pricing10 .compear-table .comparison .price-now p {
display: block;
}
.compear-pricing10 .compear-table .comparison .price-now span {
font-size: 24px;
}
.compear-pricing10 .compear-table .comparison .qbse {
font-size: 1.2em;
}
.compear-pricing10 .compear-table .comparison td {
font-size: 16px;
}
.compear-pricing10 .compear-table .comparison th {
font-size: 44px;
}
}
@media (max-width: 767px) {
.compear-pricing9 {
padding: 50px 0 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing9 {
padding: 50px 0 50px;
}
}
.compear-pricing9 .compear-header {
margin-bottom: 60px;
}
.compear-pricing9 .compear-header h2 {
text-align: center;
font-style: normal;
line-height: 54px;
}
@media (max-width: 767px) {
.compear-pricing9 .compear-header h2 {
font-size: 24px;
}
}
.compear-pricing9 .compear-table {
position: relative;
}
@media (max-width: 767px) {
.compear-pricing9 .compear-table {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing9 .compear-table {
overflow-y: scroll;
}
}
.compear-pricing9 .compear-table ul {
position: absolute;
top: 30px;
left: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing9 .compear-table ul {
top: 65px;
}
}
@media (max-width: 767px) {
.compear-pricing9 .compear-table ul {
top: 3px;
}
}
.compear-pricing9 .compear-table ul li {
cursor: pointer;
}
.compear-pricing9 .compear-table ul li button {
font-style: normal;
line-height: 16px;
text-transform: capitalize;
padding: 10px;
border-radius: 2px;
margin: 0 0 0 12px;
cursor: pointer;
}
.compear-pricing9 .compear-table ul li button.nav-link.active {
cursor: pointer;
}
.compear-pricing9 .compear-table .comparison {
max-width: 1300px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
background: var(--vtc-bg-white10per);
}
@media (max-width: 767px) {
.compear-pricing9 .compear-table .comparison {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing9 .compear-table .comparison {
overflow-y: scroll;
}
}
.compear-pricing9 .compear-table .comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
@media (max-width: 767px) {
.compear-pricing9 .compear-table .comparison table {
width: 800px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing9 .compear-table .comparison table {
width: 1200px;
}
}
.compear-pricing9 .compear-table .comparison td p.infor {
font-weight: var(--f-fw-normal);
font-size: var(--f-fs-font-16);
}
.compear-pricing9 .compear-table .comparison td.highlight {
background-color: var(--vtc-bg-white20per);
}
.compear-pricing9 .compear-table .comparison td.highlight p {
color: var(--vtc-text-white);
}
.compear-pricing9 .compear-table .comparison td,
.compear-pricing9 .compear-table .comparison th {
border-right: 1px solid var(--vtc-bg-white10per);
empty-cells: show;
padding: 20px 20px;
border-top: 1px solid var(--vtc-bg-white10per);
border-bottom: 1px solid var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
background: var(--vtc-bg-white10per);
color: var(--vtc-text-white80per);
font-style: normal;
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.compear-pricing9 .compear-table .comparison tbody tr:nth-child(odd) {
display: none;
}
.compear-pricing9 .compear-table .comparison .compare-row {
background: transparent;
}
.compear-pricing9 .compear-table .comparison th {
font-weight: normal;
padding: 0;
}
.compear-pricing9 .compear-table .comparison tr td:first-child {
text-align: left;
}
.compear-pricing9 .compear-table .comparison .product,
.compear-pricing9 .compear-table .comparison .tl {
padding: 10px;
}
.compear-pricing9 .compear-table .comparison .tl2 {
border-right: 0;
}
.compear-pricing9 .compear-table .comparison .product {
background: blueviolet;
height: 40px;
font-size: 1.6em;
}
.compear-pricing9 .compear-table .comparison .price-now {
padding: 24px 30px;
text-align: center;
position: relative;
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area .btn_theme10 {
margin-top: 16px;
}
.compear-pricing9 .compear-table .comparison .price-now.highlight {
background: var(--vtc-bg-white20per);
}
.compear-pricing9 .compear-table .comparison .price-now.highlight .price-now-area span {
color: var(--vtc-text-white);
}
.compear-pricing9 .compear-table .comparison .price-now.highlight .price-now-area p {
color: var(--vtc-text-white80per);
}
.compear-pricing9 .compear-table .comparison .price-now.highlight .price-now-area h2 {
color: var(--vtc-text-white);
}
.compear-pricing9 .compear-table .comparison .price-now.highlight .price-now-area h2 span {
color: var(--vtc-text-white);
}
.compear-pricing9 .compear-table .comparison .price-now .consulting2 {
position: absolute;
top: -10%;
left: 25%;
right: 25%;
}
.compear-pricing9 .compear-table .comparison .price-now img {
top: 18px;
left: -45px;
}
.compear-pricing9 .compear-table .comparison .price-now p {
color: var(--vtc-text-white80per);
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
position: absolute;
top: 65%;
left: 160px;
}
.compear-pricing9 .compear-table .comparison .price-now .creat-button {
border-radius: 4px;
padding: 10px;
font-size: 20px;
margin: 0;
}
.compear-pricing9 .compear-table .comparison .price-now .creat-button:after {
border-radius: 4px;
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area span.sub {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
display: inline-block;
margin-bottom: 16px;
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-54); /* 122.727% */
}
@media (max-width: 767px) {
.compear-pricing9 .compear-table .comparison .price-now .price-now-area h2 {
line-height: 32px;
}
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area h2 span {
line-height: 20px;
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
position: relative !important;
left: 0;
top: 0;
margin-top: 0;
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area .creat-button {
padding: 18px 24px;
margin-top: 24px;
}
.compear-pricing9 .compear-table .comparison .price-now .price-now-area .creat-button::after {
background: red;
}
.compear-pricing9 .compear-table td.compare-header {
font-size: 32px !important;
padding: 24px 20px !important;
}
@media (max-width: 767px) {
.compear-pricing9 .compear-table td.compare-header {
line-height: 16px;
}
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
.compear-pricing9 .compear-table .table_ul li {
letter-spacing: 0px;
}
.compear-pricing9 .compear-table .comparison .price-now p {
display: block;
}
}
@media screen and (max-width: 720px) {
.compear-pricing9 .compear-table .table_ul {
padding: 0px;
}
.compear-pricing9 .compear-table .table_ul li {
line-height: 16px;
padding: 3px 0;
}
.compear-pricing9 .compear-table .comparison {
max-width: 100%;
}
.compear-pricing9 .compear-table .comparison td:first-child,
.compear-pricing9 .compear-table .comparison th:first-child {
display: none;
}
.compear-pricing9 .compear-table .comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.compear-pricing9 .compear-table .comparison .row {
background: tan;
}
.compear-pricing9 .compear-table .comparison td,
.compear-pricing9 .compear-table .comparison th {
border-top: none;
padding: 10px;
}
.compear-pricing9 .compear-table .price-info {
border-top: 0 !important;
padding: 10px 0 !important;
}
.compear-pricing9 .compear-table .comparison .price-now p {
display: block;
}
.compear-pricing9 .compear-table .comparison .price-now span {
font-size: 24px;
}
.compear-pricing9 .compear-table .comparison .qbse {
font-size: 1.2em;
}
.compear-pricing9 .compear-table .comparison td {
font-size: 16px;
}
.compear-pricing9 .compear-table .comparison th {
font-size: 44px;
}
}
.pricing6-box {
padding: 28px 32px;
border-radius: 9px;
position: relative;
z-index: 2;
transition: all 0.4s;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}
.pricing6-box::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/pricing6-box-bg1.jpg);
z-index: -2;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
}
.pricing6-box .button a {
width: 100%;
text-align: center;
}
.pricing6-box .button a::after {
left: 70px;
}
.pricing6-box .button .nice-select {
-webkit-tap-highlight-color: transparent;
background: #ffffff;
border-radius: 9px;
border: solid 1px #03C343;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 18px;
font-weight: normal;
height: 55px;
line-height: 55px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
color: #03C343;
font-weight: 600;
margin-bottom: 20px;
}
.pricing6-box .button .nice-select::after {
height: 7px;
width: 7px;
right: 16px;
border-bottom: 2px solid #03C343;
border-right: 2px solid #03C343;
}
.pricing6-box .title-area h5 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.pricing6-box .title-area h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 100% */
transition: all 0.4s;
padding: 16px 0px;
}
.pricing6-box .title-area h2 span {
font-size: var(--f-fs-font-16);
line-height: var(--f-fs-font-16);
}
.pricing6-box .title-area p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
transition: all 0.4s;
}
.pricing6-box .list-area {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-common-10);
transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pricing6-box .list-area {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.pricing6-box .list-area {
margin-top: 30px;
}
}
.pricing6-box .list-area h4 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
text-transform: uppercase;
padding-bottom: 5px;
transition: all 0.4s;
}
.pricing6-box .list-area li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 20px;
transition: all 0.4s;
}
.pricing6-box .list-area li .check {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background: var(--vtc-bg-main15);
color: var(--vtc-text-white);
margin-right: 5px;
border-radius: 50%;
font-size: 12px;
transition: all 0.4s;
}
.pricing6-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.pricing7-box {
background-color: var(--vtc-bg-white10per);
padding: 32px 24px;
border-radius: 8px;
position: relative;
z-index: 2;
margin-top: 110px;
transition: all 0.4s;
}
.pricing7-box::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg/pricing8-box-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: -1;
border-radius: 8px;
transition: all 0.4s;
opacity: 0;
}
.pricing7-box .price-area {
position: relative;
height: 160px;
width: 160px;
margin-top: -100px;
transition: all 0.4s;
}
.pricing7-box .price-area .bg-shape {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 160px;
}
.pricing7-box .price-area .text {
width: 80px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-left: -40px;
height: 70px;
margin-top: -35px;
}
.pricing7-box .price-area .text h2 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-44); /* 100% */
text-transform: capitalize;
transition: all 0.4s;
}
.pricing7-box .price-area .text p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.pricing7-box .pricing-content {
margin-top: 20px;
}
.pricing7-box .pricing-content h3 {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-32);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-32); /* 100% */
text-transform: capitalize;
padding-top: 12px;
transition: all 0.4s;
}
.pricing7-box .pricing-content p {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 10px;
transition: all 0.4s;
}
.pricing7-box .pricing-list {
border-top: 1px solid var(--vtc-border-1);
margin-top: 22px;
padding-top: 22px;
}
.pricing7-box .pricing-list ul li {
color: var(--vtc-text-white80per);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-bottom: 18px;
display: flex;
align-items: center;
transition: all 0.4s;
}
.pricing7-box .pricing-list ul li .check {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: var(--vtc-text-white);
background: var(--vtc-bg-main16);
border-radius: 50%;
margin-right: 7px;
transition: all 0.4s;
}
.pricing7-box .button {
text-align: center;
margin-top: 16px;
}
.pricing7-box:hover .price-area {
transform: translateY(-10px);
transition: all 0.4s;
}
.pricing7-box:hover .pricing-content h3 {
transition: all 0.4s;
color: var(--vtc-text-white);
}
.pricing7-box:hover .pricing-content p {
transition: all 0.4s;
color: var(--vtc-text-white80per);
}
.pricing7-box:hover .pricing-list ul li {
color: var(--vtc-text-white);
transition: all 0.4s;
}
.pricing7-box:hover .pricing-list ul li .check {
background-color: var(--vtc-bg-white);
transition: all 0.4s;
color: var(--vtc-bg-main16);
}
.pricing7-box:hover::after {
transition: all 0.4s;
opacity: 1;
}
.pricing7-box:hover .button a {
transition: all 0.4s;
color: var(--vtc-bg-main16);
}
.pricing7-box:hover .button a::before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
opacity: 1;
}
.pricing9-box {
padding: 28px 32px;
border-radius: 9px;
position: relative;
z-index: 2;
transition: all 0.4s;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}
.pricing9-box::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/pricing6-box-bg1.jpg);
z-index: -2;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
}
.pricing9-box .button a {
width: 100%;
text-align: center;
}
.pricing9-box .button a::after {
left: 70px;
}
.pricing9-box .button .nice-select {
-webkit-tap-highlight-color: transparent;
background: #ffffff;
border-radius: 111px;
border: solid 1px var(--vtc-bg-main17);
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 18px;
font-weight: normal;
height: 55px;
line-height: 55px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
color: var(--vtc-bg-main17);
font-weight: 600;
margin-bottom: 20px;
}
.pricing9-box .button .nice-select::after {
height: 7px;
width: 7px;
}
.pricing9-box .title-area h5 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.pricing9-box .title-area h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 100% */
transition: all 0.4s;
padding: 16px 0px;
}
.pricing9-box .title-area h2 span {
font-size: var(--f-fs-font-16);
line-height: var(--f-fs-font-16);
}
.pricing9-box .title-area p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
transition: all 0.4s;
}
.pricing9-box .list-area {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-common-10);
transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pricing9-box .list-area {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.pricing9-box .list-area {
margin-top: 30px;
}
}
.pricing9-box .list-area h4 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
text-transform: uppercase;
padding-bottom: 5px;
transition: all 0.4s;
}
.pricing9-box .list-area li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 20px;
transition: all 0.4s;
}
.pricing9-box .list-area li .check {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background: var(--vtc-bg-main17);
color: var(--vtc-text-white);
margin-right: 5px;
border-radius: 50%;
font-size: 12px;
transition: all 0.4s;
}
.pricing9-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.pricing-page-box {
padding: 28px 32px;
border-radius: 9px;
position: relative;
z-index: 2;
overflow: hidden;
transition: all 0.4s;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}
.pricing-page-box::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg/pricing6-box-bg1.jpg);
z-index: -2;
transition: all 0.4s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 9px;
}
.pricing-page-box .button a {
width: 100%;
text-align: center;
}
.pricing-page-box .button a::after {
left: 70px;
}
.pricing-page-box .button .nice-select {
-webkit-tap-highlight-color: transparent;
background: #ffffff;
border-radius: 111px;
border: solid 1px var(--vtc-bg-main2);
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 18px;
font-weight: normal;
height: 55px;
line-height: 55px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
color: var(--vtc-bg-main2);
font-weight: 600;
margin-bottom: 20px;
}
.pricing-page-box .button .nice-select::after {
height: 7px;
width: 7px;
right: 21px;
border-bottom: 2px solid var(--vtc-bg-main2);
border-right: 2px solid var(--vtc-bg-main2);
}
.pricing-page-box .title-area h5 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
transition: all 0.4s;
}
.pricing-page-box .title-area h2 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 100% */
transition: all 0.4s;
padding: 16px 0px;
}
.pricing-page-box .title-area h2 span {
font-size: var(--f-fs-font-16);
line-height: var(--f-fs-font-16);
}
.pricing-page-box .title-area p {
color: var(--vtc-text-pera1);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
transition: all 0.4s;
}
.pricing-page-box .list-area {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-common-10);
transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pricing-page-box .list-area {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.pricing-page-box .list-area {
margin-top: 30px;
}
}
.pricing-page-box .list-area h4 {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-20);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-20); /* 100% */
text-transform: uppercase;
padding-bottom: 5px;
transition: all 0.4s;
}
.pricing-page-box .list-area li {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-16); /* 100% */
text-transform: capitalize;
padding-top: 20px;
transition: all 0.4s;
}
.pricing-page-box .list-area li .check {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background: var(--vtc-bg-main2);
color: var(--vtc-text-white);
margin-right: 5px;
border-radius: 50%;
font-size: 12px;
transition: all 0.4s;
}
.pricing-page-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.compear-pricing-section-area-page .main-heading h5 {
color: var(--Text-Color, #0D0E10);
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */
padding-bottom: 80px;
}
.compear-pricing-section-area-page .pricing-plans {
position: absolute;
top: 23%;
left: 200px;
z-index: 3;
}
.compear-pricing-section-area-page .pricing-plans .toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid red;
border-radius: 25px;
position: relative;
background: red;
}
.compear-pricing-section-area-page .pricing-plans .toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.compear-pricing-section-area-page .pricing-plans .custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.compear-pricing-section-area-page .pricing-plans .toggle-inner .t-month,
.compear-pricing-section-area-page .pricing-plans .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
line-height: 16px;
margin: 0 -8px;
}
.compear-pricing-section-area-page .pricing-plans .toggle-inner .t-year {
left: unset;
right: -60px;
opacity: 0.5;
}
.compear-pricing-section-area-page .pricing-plans .active > .toggle-inner .t-month {
opacity: 0.5;
}
.compear-pricing-section-area-page .pricing-plans .active > .toggle-inner .t-year {
opacity: 1;
}
.compear-pricing-section-area-page .pricing-plans .toggle-inner input:checked + span {
left: 43px;
}
@media (max-width: 767px) {
.compear-pricing-section-area-page {
padding: 50px 0 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area-page {
padding: 50px 0 50px;
}
}
.compear-pricing-section-area-page .compear-header {
margin-bottom: 60px;
}
.compear-pricing-section-area-page .compear-header h2 {
text-align: center;
font-style: normal;
line-height: 54px;
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-header h2 {
font-size: 24px;
}
}
.compear-pricing-section-area-page .compear-table {
position: relative;
background: var(--vtc-bg-white);
box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.08);
padding: 50px 40px;
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-table {
overflow-y: scroll;
padding: 0px 0px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area-page .compear-table {
overflow-y: scroll;
padding: 0px 0px;
}
}
.compear-pricing-section-area-page .compear-table ul {
position: absolute;
top: 30px;
left: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area-page .compear-table ul {
top: 65px;
}
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-table ul {
top: 3px;
}
}
.compear-pricing-section-area-page .compear-table ul li {
cursor: pointer;
}
.compear-pricing-section-area-page .compear-table ul li button {
font-style: normal;
line-height: 16px;
text-transform: capitalize;
padding: 10px;
border-radius: 2px;
margin: 0 0 0 12px;
cursor: pointer;
}
.compear-pricing-section-area-page .compear-table ul li button.nav-link.active {
cursor: pointer;
}
.compear-pricing-section-area-page .compear-table .comparison {
max-width: 1300px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
background: blue;
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-table .comparison {
overflow-y: scroll;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area-page .compear-table .comparison {
overflow-y: scroll;
}
}
.compear-pricing-section-area-page .compear-table .comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-table .comparison table {
width: 800px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.compear-pricing-section-area-page .compear-table .comparison table {
width: 1200px;
}
}
.compear-pricing-section-area-page .compear-table .comparison td p.infor {
font-weight: var(--f-fw-normal);
font-size: var(--f-fs-font-16);
}
.compear-pricing-section-area-page .compear-table .comparison td.highlight {
position: relative;
z-index: 1;
}
.compear-pricing-section-area-page .compear-table .comparison td.highlight::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #FFF6F5;
transform: scaleX(0.9);
z-index: -1;
}
.compear-pricing-section-area-page .compear-table .comparison td.highlight2 {
position: relative;
z-index: 1;
}
.compear-pricing-section-area-page .compear-table .comparison td.highlight2::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #F2F7FF;
transform: scaleX(0.9);
z-index: -1;
}
.compear-pricing-section-area-page .compear-table .comparison td,
.compear-pricing-section-area-page .compear-table .comparison th {
empty-cells: show;
padding: 20px 20px;
border-bottom: 1px solid var(--vtc-border-2);
background: var(--vtc-bg-white);
color: var(--vtc-text-title3);
font-style: normal;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.compear-pricing-section-area-page .compear-table .comparison tbody tr:nth-child(odd) {
display: none;
}
.compear-pricing-section-area-page .compear-table .comparison .compare-row {
background: #F7F7F7;
}
.compear-pricing-section-area-page .compear-table .comparison th {
font-weight: normal;
padding: 0;
}
.compear-pricing-section-area-page .compear-table .comparison tr td:first-child {
text-align: left;
}
.compear-pricing-section-area-page .compear-table .comparison .product,
.compear-pricing-section-area-page .compear-table .comparison .tl {
padding: 10px;
}
.compear-pricing-section-area-page .compear-table .comparison .tl2 {
border-right: 0;
}
.compear-pricing-section-area-page .compear-table .comparison .product {
background: blueviolet;
height: 40px;
font-size: 1.6em;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now {
padding: 24px 30px;
text-align: center;
position: relative;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now.highlight {
position: relative;
z-index: 1;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now.highlight::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #FFF6F5;
transform: scaleX(0.9);
z-index: -1;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now.highlight2 {
position: relative;
z-index: 1;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now.highlight2::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #F2F7FF;
transform: scaleX(0.9);
z-index: -1;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .consulting2 {
position: absolute;
top: -10%;
left: 25%;
right: 25%;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now img {
top: 18px;
left: -45px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now p {
color: gray;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
position: absolute;
top: 65%;
left: 160px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .creat-button {
border-radius: 4px;
padding: 10px;
font-size: 20px;
margin: 0;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .creat-button:after {
border-radius: 4px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area span {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
display: inline-block;
margin-bottom: 16px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area h2 {
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-54); /* 122.727% */
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area h2 {
line-height: 32px;
}
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area h2 span {
line-height: 20px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 150% */
position: relative !important;
left: 0;
top: 0;
margin-top: 0;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area .creat-button {
padding: 18px 24px;
margin-top: 24px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now .price-now-area .creat-button::after {
background: red;
}
.compear-pricing-section-area-page .compear-table td.compare-header {
font-size: 32px !important;
padding: 24px 20px !important;
}
@media (max-width: 767px) {
.compear-pricing-section-area-page .compear-table td.compare-header {
line-height: 16px;
}
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
.compear-pricing-section-area-page .compear-table .table_ul li {
letter-spacing: 0px;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now p {
display: block;
}
}
@media screen and (max-width: 720px) {
.compear-pricing-section-area-page .compear-table .table_ul {
padding: 0px;
}
.compear-pricing-section-area-page .compear-table .table_ul li {
line-height: 16px;
padding: 3px 0;
}
.compear-pricing-section-area-page .compear-table .comparison {
max-width: 100%;
}
.compear-pricing-section-area-page .compear-table .comparison td:first-child,
.compear-pricing-section-area-page .compear-table .comparison th:first-child {
display: none;
}
.compear-pricing-section-area-page .compear-table .comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.compear-pricing-section-area-page .compear-table .comparison .row {
background: tan;
}
.compear-pricing-section-area-page .compear-table .comparison td,
.compear-pricing-section-area-page .compear-table .comparison th {
border-top: none;
padding: 10px;
}
.compear-pricing-section-area-page .compear-table .price-info {
border-top: 0 !important;
padding: 10px 0 !important;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now p {
display: block;
}
.compear-pricing-section-area-page .compear-table .comparison .price-now span {
font-size: 24px;
}
.compear-pricing-section-area-page .compear-table .comparison .qbse {
font-size: 1.2em;
}
.compear-pricing-section-area-page .compear-table .comparison td {
font-size: 16px;
}
.compear-pricing-section-area-page .compear-table .comparison th {
font-size: 44px;
}
}
/*
::::::::::::::::::::::::::
PRICING AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
domain AREA CSS
::::::::::::::::::::::::::
*/
.domain1-form {
position: relative;
z-index: 2;
}
.domain1-form .input-form {
position: relative;
}
.domain1-form .input-form input {
background: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 111px;
padding: 19px;
color: var(--vtc-text-white);
width: 100%;
font-size: var(--f-fs-font-18);
}
.domain1-form .input-form input:focus {
outline: none;
}
.domain1-form .input-form input::-moz-placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain1-form .input-form input::placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain1-form .input-form .button {
position: absolute;
right: 7px;
top: 7px;
}
.domain1-form .domain-select-list {
margin-top: 20px;
}
.domain1-form .domain-select-list ul li {
display: inline-block;
padding: 10px 14px;
border-radius: 111px;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.domain1-form .domain-select-list ul li {
margin-bottom: 16px;
}
}
.domain1-form .domain-select-list ul li.active {
background-color: var(--vtc-bg-main1);
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.domain1-form .domain-select-list ul li:hover {
background-color: var(--vtc-bg-main1);
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.domain1 {
position: relative;
overflow: hidden;
}
.domain-images {
position: relative;
top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.domain-images {
height: 400px;
margin-top: 90px;
text-align: start;
}
}
@media (max-width: 767px) {
.domain-images {
height: 340px;
margin-top: 90px;
text-align: start;
}
}
.domain-images .shape {
position: absolute;
top: -50px;
right: 0;
transform: scale(1.3);
z-index: 0;
}
.domain-images .image1 {
position: absolute;
top: -40px;
height: 400px;
right: 50px;
z-index: 2;
}
.domain-area3 {
padding: 80px 0px;
}
.domain-area3 .domain3-form {
padding: 32px;
border-radius: 8px;
background-color: var(--vtc-bg-main6);
border: 1px solid var(--vtc-bg-white10per);
margin-left: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.domain-area3 .domain3-form {
margin-left: 0;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.domain-area3 .domain3-form {
margin-left: 0;
margin-top: 30px;
}
}
.domain-area3 .domain3-form p {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-24); /* 100% */
}
.domain-area3 .domain3-form .input-form {
margin-top: 24px;
}
.domain-area3 .domain3-form .input-form input {
width: 100%;
border-radius: 8px;
border: none;
padding: 21px;
}
.domain-area3 .domain3-form .input-form input:focus {
outline: none;
}
.domain-area3 .domain3-form .input-form input::-moz-placeholder {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain-area3 .domain3-form .input-form input::placeholder {
color: var(--vtc-text-title4);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain-area3 .domain3-form .input-form .button {
position: absolute;
top: 5px;
right: 5px;
}
.domain-area3 .domain-select-list ul li {
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
background-color: var(--vtc-bg-main6);
padding: 16px 24px;
border-radius: 8px;
border: 1px solid var(--vtc-bg-white10per);
display: inline-block;
text-align: center;
margin-right: 10px;
cursor: pointer;
margin-top: 20px;
transition: all 0.4s;
}
.domain-area3 .domain-select-list ul li:hover {
transition: all 0.4s;
background-color: var(--vtc-text-white);
color: var(--vtc-text-pera1);
}
.domain-area3 .domain-select-list ul li:hover span {
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.domain-area3 .domain-select-list ul li.active {
transition: all 0.4s;
background-color: var(--vtc-text-white);
color: var(--vtc-text-pera1);
}
.domain-area3 .domain-select-list ul li.active span {
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.domain-area3 .domain-select-list ul li span {
display: block;
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 100% */
padding-bottom: 8px;
}
.domain5 {
margin-top: -190px;
position: relative;
z-index: 2;
}
.domain5 .bg-area {
background: var(--vtc-bg-main13);
padding: 60px 0px;
border-radius: 16px;
}
.domain5-form .hero5-form-area {
margin-top: 30px;
position: relative;
margin-left: 60px;
margin-right: 60px;
}
@media (max-width: 767px) {
.domain5-form .hero5-form-area {
margin-left: 0px;
margin-right: 0;
}
}
.domain5-form .hero5-form-area input {
padding: 18px;
border-radius: 111px;
width: 100%;
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
}
.domain5-form .hero5-form-area input::-moz-placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain5-form .hero5-form-area input::placeholder {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain5-form .hero5-form-area input:focus {
outline: none;
}
.domain5-form .hero5-form-area .button {
position: absolute;
top: 8px;
right: 8px;
}
.domain5-form .hero5-form-area .select-form {
position: absolute;
top: 12px;
right: 140px;
}
.domain5-form .hero5-form-area .select-form .nice-select {
background-color: var(--vtc-bg-white10per);
border: 1px solid var(--vtc-bg-white10per);
border-radius: 111px;
color: var(--vtc-text-white);
}
.domain5-form .hero5-form-area .select-form .nice-select .list {
background: var(--vtc-bg-main2);
}
.domain5-form .hero5-form-area .select-form .nice-select .option {
background: var(--vtc-bg-main2);
}
.domain5-form .hero5-form-area .select-form .nice-select:after {
border-bottom: 2px solid var(--vtc-text-white);
border-right: 2px solid var(--vtc-text-white);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.hero5-select-list {
margin-top: 20px;
}
.hero5-select-list ul li {
display: inline-block;
}
.hero5-select-list ul li.text {
color: var(--vtc-text-white);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-18); /* 100% */
margin-right: 5px;
}
.hero5-select-list ul li.select1 {
background-color: var(--vtc-bg-white10per);
padding: 10px 14px;
border: 1px solid var(--vtc-bg-white10per);
border-radius: 30px;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
cursor: pointer;
transition: all 0.4s;
margin-left: 4px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hero5-select-list ul li.select1 {
margin-top: 5px;
}
}
.hero5-select-list ul li.select1:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-white);
color: var(--vtc-text-title1);
}
.hero5-select-list ul li.select1.active {
transition: all 0.4s;
background-color: var(--vtc-bg-white);
color: var(--vtc-text-title1);
}
.domain-choose-box {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
display: flex;
align-items: start;
margin-top: 30px;
transition: all 0.4s;
}
.domain-choose-box .icon {
background-color: var(--vtc-bg-common-2);
height: 70px;
width: 70px;
text-align: center;
line-height: 70px;
border-radius: 50%;
}
.domain-choose-box .icon img {
transition: all 0.4s;
}
.domain-choose-box .heading1 {
margin-left: 16px;
}
.domain-choose-box .heading1 h4 {
line-height: 24px;
}
.domain-choose-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.domain-choose-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.choose-domain .images {
position: relative;
z-index: 1;
}
.choose-domain .images .shape {
position: absolute;
top: 0;
right: 50px;
z-index: -1;
transform: scale(1.4);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.choose-domain .images .shape {
display: none;
}
}
@media (max-width: 767px) {
.choose-domain .images .shape {
display: none;
}
}
.vps-plan-container {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
padding: 40px 100px;
text-align: center;
}
@media (max-width: 767px) {
.vps-plan-container {
padding: 30px;
}
}
.vps-plan-container .slider {
margin: 20px 0;
}
.vps-plan-container .slider-input {
width: 100%;
background: #d9e5f1;
height: 8px;
border-radius: 4px;
outline: none;
}
.vps-plan-container .slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: #4a90e2;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
}
.vps-plan-container .plan-features {
margin: 20px 0;
}
.vps-plan-container h2 {
color: var(--Text-Color, #0B1A33);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 100% */
padding-bottom: 16px;
}
.plan-features .feature {
background-color: var(--vtc-bg-common-2);
padding: 24px;
border-radius: 8px;
display: flex;
align-items: center;
margin-top: 15px;
transition: all 0.4s;
}
.plan-features .feature:hover {
transition: all 0.4s;
transform: translateY(-8px);
}
.plan-features .feature:hover .icon-container img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.plan-features .feature .icon-container {
display: inline-block;
height: 48px;
width: 48px;
text-align: center;
line-height: 48px;
background-color: var(--vtc-text-white);
border-radius: 50%;
}
.plan-features .feature .icon-container img {
transition: all 0.4s;
}
.plan-features .feature .content {
text-align: start;
padding-left: 12px;
}
.plan-features .feature .content p {
color: var(--Paragraph-Color, #415069);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 14px; /* 100% */
}
.plan-features .feature .content span {
display: inline-block;
color: var(--Text-Color, #0B1A33);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 100% */
padding-top: 10px;
}
.price-plan-sec {
margin-top: -100px;
position: relative;
z-index: 2;
}
.price-plan-sec .bottom-pricing {
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
}
.price-plan-sec .bottom-pricing p {
color: var(--Text-Color, #0B1A33);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 100% */
position: relative;
padding-right: 30px;
}
.price-plan-sec .bottom-pricing p::after {
content: "";
position: absolute;
top: 0;
right: 15px;
height: 30px;
width: 1px;
background-color: var(--vtc-bg-common-2);
}
.domain6 {
margin-top: -190px;
position: relative;
z-index: 2;
}
.domain6 .bg-area {
background: var(--vtc-bg-white);
padding: 60px 0px;
border-radius: 16px;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
}
.domain6-form .hero6-form-area {
margin-top: 30px;
position: relative;
}
@media (max-width: 767px) {
.domain6-form .hero6-form-area {
margin-left: 0px;
margin-right: 0;
}
}
.domain6-form .hero6-form-area input {
padding: 19px;
border-radius: 8px;
width: 100%;
background-color: var(--vtc-bg-white);
border: 1px solid var(--vtc-border-3);
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
}
.domain6-form .hero6-form-area input::-moz-placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain6-form .hero6-form-area input::placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain6-form .hero6-form-area input:focus {
outline-color: var(--vtc-bg-main15);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.domain6-form .hero6-form-area input:focus::-moz-placeholder {
opacity: 0;
}
.domain6-form .hero6-form-area input:focus::placeholder {
opacity: 0;
}
.domain6-form .hero6-form-area .button {
position: absolute;
top: 8px;
right: 8px;
}
@media (max-width: 767px) {
.domain6-form .hero6-form-area .button {
top: 85px;
}
}
.domain6-form .hero6-form-area .button .transfer {
padding: 16px 20px 12px 20px;
}
.domain6-form .hero6-form-area .button .transfer img {
transform: translateY(-2px);
}
.domain6-form .hero6-form-area .select-form {
position: absolute;
top: 12px;
right: 310px;
}
@media (max-width: 767px) {
.domain6-form .hero6-form-area .select-form {
right: 11px;
}
}
.domain6-form .hero6-form-area .select-form .nice-select {
background-color: var(--vtc-bg-common-9);
border: 1px solid var(--vtc-bg-common-9);
border-radius: 8px;
color: var(--vtc-text-title1);
}
.domain6-form .hero6-form-area .select-form .nice-select .list {
background: var(--vtc-bg-common-9);
}
.domain6-form .hero6-form-area .select-form .nice-select .option {
background: var(--vtc-bg-white);
}
.domain6-form .hero6-form-area .select-form .nice-select .option:hover {
background: var(--vtc-bg-main15);
color: var(--vtc-bg-white);
}
.domain6-form .hero6-form-area .select-form .nice-select:after {
border-bottom: 1px solid var(--vtc-text-title1);
border-right: 1px solid var(--vtc-text-title1);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.hero6-select-list {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero6-select-list {
display: block;
}
}
@media (max-width: 767px) {
.hero6-select-list {
display: block;
margin-top: 100px;
}
}
.hero6-select-list .pricing-btn {
color: var(--8th-Main, #03C343);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 100% */
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
transition: all 0.4s;
display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero6-select-list .pricing-btn {
margin-top: 16px;
}
}
@media (max-width: 767px) {
.hero6-select-list .pricing-btn {
margin-top: 16px;
}
}
.hero6-select-list .pricing-btn:hover {
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.hero6-select-list ul li {
display: inline-block;
}
.hero6-select-list ul li.text {
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-18); /* 100% */
margin-right: 5px;
}
.hero6-select-list ul li.select1 {
background-color: var(--vtc-bg-common-9);
padding: 10px 14px;
border: 1px solid var(--vtc-bg-white10per);
border-radius: 8px;
color: var(--vtc-text-title5);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
cursor: pointer;
transition: all 0.4s;
margin-left: 6px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hero6-select-list ul li.select1 {
margin-top: 5px;
}
}
.hero6-select-list ul li.select1:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main15);
color: var(--vtc-text-white);
}
.hero6-select-list ul li.select1.active {
transition: all 0.4s;
background-color: var(--vtc-bg-main15);
color: var(--vtc-text-white);
}
.domain8 {
margin-top: -190px;
position: relative;
z-index: 2;
}
.domain8 .bg-area {
background: var(--vtc-bg-white);
padding: 60px 0px;
border-radius: 16px;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
}
.domain8-form .hero8-form-area {
margin-top: 30px;
position: relative;
}
@media (max-width: 767px) {
.domain8-form .hero8-form-area {
margin-left: 0px;
margin-right: 0;
}
}
.domain8-form .hero8-form-area input {
padding: 19px;
border-radius: 111px;
width: 100%;
background-color: var(--vtc-bg-white);
border: 1px solid var(--vtc-border-3);
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
}
.domain8-form .hero8-form-area input::-moz-placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain8-form .hero8-form-area input::placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain8-form .hero8-form-area input:focus {
outline-color: var(--vtc-bg-main17);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.domain8-form .hero8-form-area input:focus::-moz-placeholder {
opacity: 0;
}
.domain8-form .hero8-form-area input:focus::placeholder {
opacity: 0;
}
.domain8-form .hero8-form-area .button {
position: absolute;
top: 8px;
right: 8px;
}
@media (max-width: 767px) {
.domain8-form .hero8-form-area .button {
top: 85px;
}
}
.domain8-form .hero8-form-area .button .transfer {
padding: 16px 20px 12px 20px;
}
.domain8-form .hero8-form-area .button .transfer img {
transform: translateY(-2px);
}
.domain8-form .hero8-form-area .select-form {
position: absolute;
top: 13px;
right: 280px;
}
@media (max-width: 767px) {
.domain8-form .hero8-form-area .select-form {
right: 11px;
}
}
.domain8-form .hero8-form-area .select-form .nice-select {
background-color: var(--vtc-bg-common-12);
border: 1px solid var(--vtc-bg-common-12);
border-radius: 111px;
color: var(--vtc-text-title1);
}
.domain8-form .hero8-form-area .select-form .nice-select .list {
background: var(--vtc-bg-white);
}
.domain8-form .hero8-form-area .select-form .nice-select .option {
background: var(--vtc-bg-white);
}
.domain8-form .hero8-form-area .select-form .nice-select .option:hover {
background-color: var(--vtc-bg-main17);
color: var(--vtc-text-white);
}
.domain8-form .hero8-form-area .select-form .nice-select:after {
border-bottom: 1px solid var(--vtc-text-title1);
border-right: 1px solid var(--vtc-text-title1);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.hero8-select-list {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero8-select-list {
display: block;
}
}
@media (max-width: 767px) {
.hero8-select-list {
display: block;
margin-top: 100px;
}
}
.hero8-select-list .pricing-btn {
color: var(--vtc-bg-main17);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 100% */
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
transition: all 0.4s;
display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero8-select-list .pricing-btn {
margin-top: 16px;
}
}
@media (max-width: 767px) {
.hero8-select-list .pricing-btn {
margin-top: 16px;
}
}
.hero8-select-list .pricing-btn:hover {
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.hero8-select-list ul li {
display: inline-block;
}
.hero8-select-list ul li.text {
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-18); /* 100% */
margin-right: 5px;
}
.hero8-select-list ul li.select1 {
background-color: var(--vtc-bg-common-12);
padding: 10px 14px;
border: 1px solid var(--vtc-bg-white10per);
border-radius: 111px;
color: var(--vtc-text-title6);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
cursor: pointer;
transition: all 0.4s;
margin-left: 6px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hero8-select-list ul li.select1 {
margin-top: 5px;
}
}
.hero8-select-list ul li.select1:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main17);
color: var(--vtc-text-white);
}
.hero8-select-list ul li.select1.active {
transition: all 0.4s;
background-color: var(--vtc-bg-main17);
color: var(--vtc-text-white);
}
.domain9 {
margin-top: -190px;
position: relative;
z-index: 2;
}
.domain9 .bg-area {
background: var(--vtc-bg-white);
padding: 60px 0px;
border-radius: 16px;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
}
.domain9-form .hero9-form-area {
margin-top: 30px;
position: relative;
}
@media (max-width: 767px) {
.domain9-form .hero9-form-area {
margin-left: 0px;
margin-right: 0;
}
}
.domain9-form .hero9-form-area input {
padding: 19px;
border-radius: 111px;
width: 100%;
background-color: var(--vtc-bg-white);
border: 1px solid var(--vtc-border-3);
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
}
.domain9-form .hero9-form-area input::-moz-placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain9-form .hero9-form-area input::placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain9-form .hero9-form-area input:focus {
outline-color: var(--vtc-bg-main18);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.domain9-form .hero9-form-area input:focus::-moz-placeholder {
opacity: 0;
}
.domain9-form .hero9-form-area input:focus::placeholder {
opacity: 0;
}
.domain9-form .hero9-form-area .button {
position: absolute;
top: 8px;
right: 8px;
}
@media (max-width: 767px) {
.domain9-form .hero9-form-area .button {
top: 85px;
}
}
.domain9-form .hero9-form-area .button .transfer {
padding: 16px 20px 12px 20px;
}
.domain9-form .hero9-form-area .button .transfer img {
transform: translateY(-2px);
}
.domain9-form .hero9-form-area .select-form {
position: absolute;
top: 13px;
right: 280px;
}
@media (max-width: 767px) {
.domain9-form .hero9-form-area .select-form {
right: 11px;
}
}
.domain9-form .hero9-form-area .select-form .nice-select {
background-color: var(--vtc-bg-common-13);
border: 1px solid var(--vtc-bg-common-13);
border-radius: 111px;
color: var(--vtc-text-title1);
font-weight: var(--f-fw-semibold);
}
.domain9-form .hero9-form-area .select-form .nice-select .list {
background: var(--vtc-bg-white);
}
.domain9-form .hero9-form-area .select-form .nice-select .option {
background: var(--vtc-bg-white);
}
.domain9-form .hero9-form-area .select-form .nice-select .option:hover {
background-color: var(--vtc-bg-main18);
color: var(--vtc-bg-white);
}
.domain9-form .hero9-form-area .select-form .nice-select:after {
border-bottom: 1px solid var(--vtc-text-title1);
border-right: 1px solid var(--vtc-text-title1);
content: "";
display: block;
height: 8px;
margin-top: -5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform-origin: 66% 66%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 8px;
}
.hero9-select-list {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero9-select-list {
display: block;
}
}
@media (max-width: 767px) {
.hero9-select-list {
display: block;
margin-top: 100px;
}
}
.hero9-select-list .pricing-btn {
color: var(--vtc-bg-main18);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 100% */
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
transition: all 0.4s;
display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero9-select-list .pricing-btn {
margin-top: 16px;
}
}
@media (max-width: 767px) {
.hero9-select-list .pricing-btn {
margin-top: 16px;
}
}
.hero9-select-list .pricing-btn:hover {
color: var(--vtc-text-title1);
transition: all 0.4s;
}
.hero9-select-list ul li {
display: inline-block;
}
.hero9-select-list ul li.text {
color: var(--vtc-text-title1);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-bold);
line-height: var(--f-fs-font-18); /* 100% */
margin-right: 5px;
}
.hero9-select-list ul li.select1 {
background-color: var(--vtc-bg-common-13);
padding: 10px 14px;
border: 1px solid var(--vtc-bg-white10per);
border-radius: 8px;
color: var(--vtc-text-title6);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
cursor: pointer;
transition: all 0.4s;
margin-left: 6px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hero9-select-list ul li.select1 {
margin-top: 5px;
}
}
.hero9-select-list ul li.select1:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main18);
color: var(--vtc-text-white);
}
.hero9-select-list ul li.select1.active {
transition: all 0.4s;
background-color: var(--vtc-bg-main18);
color: var(--vtc-text-white);
}
.domain10-form .hero10-form-area {
margin-top: 30px;
position: relative;
padding-right: 300px;
}
@media (max-width: 767px) {
.domain10-form .hero10-form-area {
margin-left: 0px;
margin-right: 0;
}
}
.domain10-form .hero10-form-area input {
padding: 19px;
border-radius: 111px;
width: 100%;
background: transparent;
border: 1px solid var(--vtc-border-3);
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
}
.domain10-form .hero10-form-area input::-moz-placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain10-form .hero10-form-area input::placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.domain10-form .hero10-form-area input:focus {
outline-color: var(--vtc-bg-main18);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.domain10-form .hero10-form-area input:focus::-moz-placeholder {
opacity: 0;
}
.domain10-form .hero10-form-area input:focus::placeholder {
opacity: 0;
}
.domain10-form .hero10-form-area .button {
position: absolute;
top: 4px;
right: 8px;
}
@media (max-width: 767px) {
.domain10-form .hero10-form-area .button {
top: 85px;
}
}
.domain10-form .hero10-form-area .button .transfer {
padding: 18px 20px 14px 20px;
}
.domain10-form .hero10-form-area .button .transfer img {
transform: translateY(-2px);
}
.domain10-box {
padding: 24px;
border-radius: 8px;
background-color: var(--vtc-bg-white);
text-align: center;
margin-top: 30px;
transition: all 0.4s;
}
.domain10-box h3 {
font-size: var(--f-fs-font-44);
font-style: normal;
font-weight: var(--f-fw-semibold);
line-height: var(--f-fs-font-44); /* 100% */
}
.domain10-box h3.com {
color: #2D8CFF;
}
.domain10-box h3.net {
color: #FA450D;
}
.domain10-box h3.org {
color: #03C343;
}
.domain10-box h3.co {
color: #FFC106;
}
.domain10-box h3.online {
color: #2403C3;
}
.domain10-box h3.tv {
color: #FF1BDF;
}
.domain10-box h3.site {
color: #7203C3;
}
.domain10-box h3.info {
color: #E058FF;
}
.domain10-box h5 {
color: var(--vtc-text-title6);
font-size: var(--f-fs-font-24);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 100% */
padding-top: 16px;
padding-bottom: 16px;
}
.domain10-box p {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-normal);
line-height: var(--f-fs-font-24); /* 133.333% */
text-decoration-line: strikethrough;
}
.domain10-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}
.hosting7-select-list {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hosting7-select-list {
display: block;
}
}
@media (max-width: 767px) {
.hosting7-select-list {
display: block;
margin-top: 100px;
}
}
.hosting7-select-list ul li {
display: inline-block;
}
.hosting7-select-list ul li.select1 {
background-color: var(--vtc-bg-white10per);
padding: 10px 14px;
border: 1px solid var(--vtc-bg-white10per);
border-radius: 30px;
color: var(--vtc-text-white);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
cursor: pointer;
transition: all 0.4s;
margin-left: 6px;
transition: all 0.4s;
}
@media (max-width: 767px) {
.hosting7-select-list ul li.select1 {
margin-top: 5px;
}
}
.hosting7-select-list ul li.select1:hover {
transition: all 0.4s;
background-color: var(--vtc-bg-main16);
color: var(--vtc-text-white);
}
.hosting7-select-list ul li.select1.active {
transition: all 0.4s;
background-color: var(--vtc-bg-main16);
color: var(--vtc-text-white);
}
.pricing-page-domain-form .hero10-form-area {
margin-top: 30px;
position: relative;
padding-right: 300px;
}
@media (max-width: 767px) {
.pricing-page-domain-form .hero10-form-area {
margin-left: 0px;
margin-right: 0;
}
}
.pricing-page-domain-form .hero10-form-area input {
padding: 19px;
border-radius: 111px;
width: 100%;
background: transparent;
border: 1px solid var(--vtc-border-3);
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
}
.pricing-page-domain-form .hero10-form-area input::-moz-placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.pricing-page-domain-form .hero10-form-area input::placeholder {
color: var(--vtc-text-pera2);
font-size: var(--f-fs-font-18);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-18); /* 100% */
}
.pricing-page-domain-form .hero10-form-area input:focus {
outline-color: var(--vtc-bg-main2);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.pricing-page-domain-form .hero10-form-area input:focus::-moz-placeholder {
opacity: 0;
}
.pricing-page-domain-form .hero10-form-area input:focus::placeholder {
opacity: 0;
}
.pricing-page-domain-form .hero10-form-area .button {
position: absolute;
top: 4px;
right: 8px;
}
@media (max-width: 767px) {
.pricing-page-domain-form .hero10-form-area .button {
top: 85px;
}
}
.pricing-page-domain-form .hero10-form-area .button .transfer {
padding: 18px 20px 14px 20px;
}
.pricing-page-domain-form .hero10-form-area .button .transfer img {
transform: translateY(-2px);
}
/*
::::::::::::::::::::::::::
domain AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
FEATURES AREA CSS
::::::::::::::::::::::::::
*/
.features1-list li {
margin-top: 16px;
color: var(--vtc-text-title3);
font-size: var(--f-fs-font-16);
font-style: normal;
font-weight: var(--f-fw-medium);
line-height: var(--f-fs-font-22); /* 100% */
display: inline-flex;
align-items: center;
}
.features1-list li .check {
display: inline-block;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
border-radius: 50%;
background-color: var(--vtc-bg-main2);
color: var(--vtc-bg-white);
font-size: 14px;
margin-right: 6px;
}
.features {
position: relative;
z-index: 2;
}
.features .sec-shape {
position: absolute;
top: -200px;
right: 0;
z-index: -1;
}
.features .sec-shape2 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.features-images {
position: relative;
height: 500px;
text-align: end;
}
@media (max-width: 767px) {
.features-images {
height: 400px;
text-align: end;
margin-top: 30px;
}
}
.features-images .shape-bg2 {
position: relative;
top: -140px;
right: -60px;
z-index: -2;
}
.features-images .shape-bg2 .stop-color1 {
stop-color: #F5F5FD;
}
.features-images .shape-bg2 .stop-color2 {
stop-color: #F5F5FD;
}
@media (max-width: 767px) {
.features-images .shape-bg2 {
position: relative;
top: 0;
right: 0;
z-index: -2;
}
}
.features-images .image1 {
position: absolute;
right: 40px;
top: 0;
}
.features4 .bg-border {
position: relative;
}
.features4 .bg-border::after {
content: "";
position: absolute;
top: 72px;
left: 0;
height: 1px;
width: 100%;
background: var(--vtc-border-2);
transform: rotateY(42deg);
z-index: -1;
}
.features4-box {
position: relative;
text-align: center;
}
.features4-box .icon-area {
position: relative;
}
.features4-box .icon-area .icon {
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: var(--vtc-bg-common-3);
margin: auto;
}
.features4-box .icon-area .icon img {
transition: all 0.4s;
}
.features4-box .icon-area .shape {
filter: brightness(0);
opacity: 0.3;
transition: all 0.4s;
}
.features4-box .content-box {
background-color: var(--vtc-bg-white);
border-radius: 8px;
padding: 24px;
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
margin-top: 28px;
position: relative;
overflow: hidden;
z-index: 2;
transition: all 0.4s;
}
.features4-box .content-box::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--vtc-bg-main4);
transition: all 0.4s;
opacity: 0;
}
.features4-box .content-box p {
transition: all 0.4s;
}
.features4-box:hover {
transition: all 0.4s;
}
.features4-box:hover .icon-area .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
.features4-box:hover .icon-area .shape {
transition: all 0.4s;
filter: none;
opacity: 1;
}
.features4-box:hover .content-box {
transition: all 0.4s;
transform: translateY(-10px);
}
.features4-box:hover .content-box h4 a {
color: var(--vtc-bg-white);
transition: all 0.4s;
}
.features4-box:hover .content-box p {
color: var(--vtc-text-white80per);
transition: all 0.4s;
}
.features4-box:hover .content-box::after {
opacity: 1;
transition: all 0.4s;
}
.features5-box {
position: relative;
padding: 20px 24px 20px 65px;
margin: 30px 15px 0px 15px;
background-color: var(--vtc-bg-white10per);
border-radius: 8px;
transition: all 0.4s;
}
.features5-box .icon {
height: 70px;
width: 70px;
text-align: center;
line-height: 60px;
background-color: var(--vtc-bg-main14);
border-radius: 50%;
border: 5px solid var(--vtc-bg-common-7);
position: absolute;
left: -18px;
top: -10px;
}
.features5-box .icon img {
transition: all 0.4s;
}
.features5-box:hover {
transition: all 0.4s;
transform: translateY(-10px);
}
.features5-box:hover .icon img {
transition: all 0.4s;
transform: rotateY(180deg);
}
/*
::::::::::::::::::::::::::
FEATURES AREA CSS
::::::::::::::::::::::::::
*/
/*
::::::::::::::::::::::::::
LOGIN AREA CSS
::::::::::::::::::::::::::
*/
.login-page-sec {
min-height: 100vh;
width: 100%;
display: flex;
}
.login-form {
background-color: var(--vtc-bg-white);
padding: 50px;
border-radius: 8px;
}
.login-form h2 {
color: var(--Home-Page-3-Text-Color, #030619);
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */
margin-bottom: 12px;
}
.login-form p {
color: var(--Paragraph-Color, #676879);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
}
.login-form .theme-btn1 {
width: 100%;
}
.login-form .checkbox-container {
padding: 22px 0px;
}
.login-form .checkbox-container input {
height: 20px;
width: 20px;
accent-color: var(--vtc-bg-main1);
border-radius: 8px;
margin-right: 5px;
}
.login-form .checkbox-container label {
color: var(--Paragraph-Color, #676879);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
transform: translateY(-4px);
}
.login-form .checkbox-container label a {
text-decoration: underline;
font-weight: var(--f-fw-bold);
color: var(--vtc-text-title5);
}
.login-form .checkbox-container a {
color: var(--Home-Page-3-Text-Color, #030619);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 175% */
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
transition: all 0.4s;
}
.login-form .checkbox-container a:hover {
transition: all 0.4s;
color: var(--vtc-bg-main1);
}
.login-form .single-input {
margin-top: 24px;
}
.login-form .single-input label {
color: var(--Home-Page-3-Text-Color, #030619);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 100% */
margin-bottom: 16px;
}
.login-form .single-input input {
background-color: var(--vtc-bg-common-10);
border-radius: 111px;
padding: 17px;
width: 100%;
border: none;
}
.login-form .single-input input::-moz-placeholder {
color: var(--Home-Page-3-Paragraph-Color, #415069);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
}
.login-form .single-input input::placeholder {
color: var(--Home-Page-3-Paragraph-Color, #415069);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
}
.login-form .single-input input:focus {
outline-color: var(--vtc-bg-main1);
outline-width: 1px;
outline-style: solid;
box-shadow: none;
}
.login-form .single-input input:focus::-moz-placeholder {
opacity: 0;
}
.login-form .single-input input:focus::placeholder {
opacity: 0;
}
.login-form .or-text {
text-align: center;
padding: 28px 0px;
position: relative;
}
.login-form .or-text p {
background-color: var(--vtc-bg-white);
padding: 0px 10px;
position: relative;
z-index: 3;
display: inline-block;
}
.login-form .or-text::after {
content: "";
position: absolute;
top: 42px;
left: 0;
height: 1px;
width: 100%;
background-color: #D9D9D9;
z-index: 1;
}
.login-form .social-btn {
width: 100%;
padding: 18px;
border-radius: 111px;
border: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
}
.login-form .social-btn img {
margin-right: 5px;
}
.login-form .social-btn:hover {
transition: all 0.4s;
transform: translateY(-5px);
}
/*
::::::::::::::::::::::::::
LOGIN AREA CSS
::::::::::::::::::::::::::
*//*# sourceMappingURL=main.css.map */