/*
Template Name: Raj Nursing Home
Author: Jitendra
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Responsive
    1.5. Color Plate
    1.6. reset
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Sticky
    3.10. Social
    3.11. icons
    3.12. Animation
    3.13. Error Page
    3.14. Pagination
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. About
    4.6. Hero Area
    4.7. Popup search
    4.8. Blog
    4.9. Case    
    4.10. Contact
    4.11. Doctors
    4.12. Instagram
    4.13. Service
    4.14. testimonial
    4.15. videoCount
05. Spacing
06. Components

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/*------------------- 1.2. Function -------------------*/
/*------------------- 1.3. Variable-------------------*/
:root {
    --vs-theme-color1: #159AAF;
    --vs-theme-color1-rgb: 21, 154, 175;
    --vs-theme-color2: #5959EB;
    --vs-theme-color2-rgb: 89, 89, 235;
    --vs-theme-color3: #D8698A;
    --vs-theme-color3-rgb: 216, 105, 138;
    --vs-theme-color4: #19A8A3;
    --vs-theme-color4-rgb: 25, 168, 163;
    --vs-theme-color5: #136282;
    --vs-theme-color5-rgb: 19, 98, 130;
    --vs-title-color: #0E1D4C;
    --vs-title-color-rgb: 14, 29, 76;
    --vs-body-color: #7C7C7C;
    --vs-body-color-rgb: 124, 124, 124;
    --vs-smoke-color: #eff1f5;
    --vs-black-color: #000000;
    --vs-white-color: #ffffff;
    --vs-white-color-rgb: 255, 255, 255;
    --vs-yellow-color: #fec624;
    --vs-success-color: #28a745;
    --vs-error-color: #dc3545;
    --vs-img-bg-color: #F1F7F3;
    --vs-title-font: "Quicksand", sans-serif;
    --vs-body-font: "Fira Sans", sans-serif;
    --vs-special-font: "Poppins", sans-serif;
    --vs-icon-font: 'Font Awesome 6 Pro';
    --vs-main-container: 1320px;
    --vs-container-gutters: 30px;
    --vs-section-space: 110px;
    --vs-section-space-mobile: 80px;
    --vs-section-title-space: 48px;
    --ripple-ani-duration: 5s;
}

/*------------------- 1.4. Reset -------------------*/
/* IMPORTANT */
html,
body {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--vs-body-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--vs-body-color);
    line-height: 26px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* Small devices */
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 26px;
    }
}

iframe {
    border: none;
    width: 100%;
}

.slick-slide:focus,
button:focus,
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
    outline: none;
}

select:focus,
input:focus {
    outline: none;
    box-shadow: none;
}

img:not([draggable]),
embed,
object,
video {
    max-width: 100%;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

table {
    width: 100%;
}

a {
    color: var(--vs-theme-color1);
    text-decoration: none;
    outline: 0;
    transition: all ease 0.4s;
}

a:hover {
    color: var(--vs-title-color);
}

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

button {
    transition: all ease 0.4s;
}

img {
    border: none;
    max-width: 100%;
}

span.ajax-loader:empty,
p:empty {
    display: none;
}

p {
    color: var(--vs-body-color);
    line-height: 26px;
    font-weight: 400;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
p a,
span a {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
    font-family: var(--vs-title-font);
    color: var(--vs-title-color);
    text-transform: capitalize;
    font-weight: 700;
    line-height: 1.4;
}

h1,
.h1 {
    font-size: clamp(2.5rem, 4vw + 1rem, 4.15rem);
    /* 40px - 64px */
    line-height: 1.2;
}

h2,
.h2 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 3rem);
    /* 24px - 48px */
    line-height: 1.25;
}

h3,
.h3 {
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.875rem);
    /* 20px - 24px */
    line-height: 1.3;
}

h4,
.h4 {
    font-size: clamp(1.125rem, 1.2vw + 0.5rem, 1.375rem);
    /* 18px - 22px */
    line-height: 1.4;
}

h5,
.h5 {
    font-size: clamp(1rem, 1.1vw + 0.3rem, 1.125rem);
    /* 16px - 18px */
    line-height: 1.5;
}

h6,
.h6 {
    font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem);
    /* 14px - 16px */
    line-height: 1.6;
}

/*------------------- 1.5. Responsive -------------------*/
/*-----------------
    3.2 Responsive Media Queries
-----------------*/
/*------------------- 1.6. Responsive -------------------*/
body {
    transition: background-color 0.3s, color 0.3s;
}

body.light-mode {
    background-color: #ffffff;
    color: #222;
}

body.dark-mode {
    background-color: var(--vs-title-color);
    color: var(--vs-white-color);
}

body.dark-mode .main-menu a {
    color: var(--vs-white-color);
}

body.dark-mode .main-menu ul.sub-menu,
body.dark-mode .main-menu ul.mega-menu {
    background-color: var(--vs-title-color);
}

body.color-mode {
    color: #2a2a2a;
}

.theme-toggle-icon {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: var(--vs-title-color);
    color: var(--vs-white-color);
    padding: 12px 14px;
    cursor: pointer;
    z-index: 999;
    font-size: 20px;
    transition: all 0.3s ease;
    border-radius: 50%;
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-icon:hover {
    background: var(--vs-theme-color1);
}

.theme-panel {
    position: fixed;
    top: 50%;
    right: -250px;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 10px 0 0 10px;
    padding: 20px;
    width: 220px;
    box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: right 0.35s ease;
    z-index: 999;
}

.theme-panel.open {
    right: 0;
}

.theme-panel .close-btn {
    align-self: flex-end;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 8px;
    padding: 2px;
}

.theme-panel .mode-btn,
.theme-panel .reset-btn {
    background: #f3f3f3;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s;
}

.theme-panel .mode-btn:hover,
.theme-panel .reset-btn:hover {
    background: #e1e1e1;
}

.theme-panel .color-mode-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.theme-panel .color-mode-label input[type=color] {
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
}

/*------------------- 1.7. Wordpress Default -------------------*/
p.has-drop-cap {
    margin-bottom: 20px;
}

.page--item p:last-child .alignright {
    clear: right;
}

.blog-title,
.pagi-title,
.breadcumb-title {
    word-break: break-word;
}

.blocks-gallery-caption,
.wp-block-embed figcaption,
.wp-block-image figcaption {
    color: var(--vs-body-color);
}

.bypostauthor,
.gallery-caption {
    display: block;
}

.page-links,
.clearfix {
    clear: both;
}

.page--item {
    margin-bottom: 30px;
}

.page--item p {
    line-height: 1.8;
}

.content-none-search {
    margin-top: 30px;
}

.wp-block-button.aligncenter {
    text-align: center;
}

.alignleft {
    display: inline;
    float: left;
    margin-bottom: 10px;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-bottom: 10px;
    margin-left: 1.5em;
    margin-right: 1em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.gallery {
    margin-bottom: 1.5em;
    width: 100%;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding: 0 5px;
}

.wp-block-columns {
    margin-bottom: 1em;
}

figure.gallery-item {
    margin-bottom: 10px;
    display: inline-block;
}

figure.wp-block-gallery {
    margin-bottom: 14px;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
    font-size: 12px;
    color: var(--vs-body-color);
    line-height: 1.5;
    padding: 0.5em 0;
}

.wp-block-cover p:not(.has-text-color),
.wp-block-cover-image-text,
.wp-block-cover-text {
    color: var(--vs-white-color);
}

.wp-block-cover {
    margin-bottom: 15px;
}

.wp-caption-text {
    text-align: center;
}

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption .wp-caption-text {
    margin: 0.5em 0;
    font-size: 14px;
}

.wp-block-media-text,
.wp-block-media-text.alignwide,
figure.wp-block-gallery {
    margin-bottom: 30px;
}

.wp-block-media-text.alignwide {
    background-color: var(--vs-smoke-color);
}

.editor-styles-wrapper .has-large-font-size,
.has-large-font-size {
    line-height: 1.4;
}

.wp-block-latest-comments a {
    color: inherit;
}

.wp-block-button {
    margin-bottom: 10px;
}

.wp-block-button:last-child {
    margin-bottom: 0;
}

.wp-block-button .wp-block-button__link {
    color: #fff;
}

.wp-block-button .wp-block-button__link:hover {
    color: #fff;
    background-color: var(--vs-theme-color1);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border-color: var(--vs-title-color);
    color: var(--vs-title-color);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: #fff;
    background-color: var(--vs-theme-color1);
    border-color: var(--vs-theme-color1);
}

.wp-block-button.is-style-squared .wp-block-button__link {
    border-radius: 0;
}

ol.wp-block-latest-comments li {
    margin: 15px 0;
}

ul.wp-block-latest-posts {
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

ul.wp-block-latest-posts a {
    color: inherit;
}

ul.wp-block-latest-posts a:hover {
    color: var(--vs-theme-color1);
}

ul.wp-block-latest-posts li {
    margin: 15px 0;
}

.wp-block-search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.wp-block-search .wp-block-search__input {
    border: 1.5px solid rgba(var(--vs-title-color-rgb), 0.1);
    height: 65px;
    padding-left: 24px;
    flex: 1;
    min-width: 0;
    border-radius: 12px 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--vs-body-font), serif;
    color: var(--vs-title-color);
}

.wp-block-search .wp-block-search__input::placeholder {
    color: var(--vs-title-color);
}

.wp-block-search .wp-block-search__button {
    margin: 0;
    border: none;
    height: 65px;
    width: 59px;
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 0 12px 12px 0;
}

.wp-block-search .wp-block-search__button:hover {
    background-color: var(--vs-theme-color1);
    opacity: 0.8;
}

ul.wp-block-rss a {
    color: inherit;
}

.wp-block-group.has-background {
    padding: 15px 15px 1px;
    margin-bottom: 30px;
}

.wp-block-table td,
.wp-block-table th {
    border-color: rgba(0, 0, 0, 0.1);
}

.wp-block-table.is-style-stripes {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.logged-in .will-sticky .sticky-active.active,
.logged-in .preloader .vs-btn {
    top: 32px;
}

@media (max-width: 782px) {

    .logged-in .will-sticky .sticky-active.active,
    .logged-in .preloader .vs-btn {
        top: 46px;
    }
}

@media (max-width: 600px) {

    .logged-in .will-sticky .sticky-active.active,
    .logged-in .preloader .vs-btn {
        top: 0;
    }
}

.post-password-form .theme-input-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    margin-top: 20px;
}

.post-password-form .theme-input-group .theme-input-style {
    width: 100%;
    max-width: calc(100% - 120px);
    border: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
    height: 50px;
    padding-left: 20px;
}

.post-password-form .theme-input-group .submit-btn {
    margin: 0;
    width: 120px;
    border: none;
    height: 50px;
    color: #fff;
    background-color: var(--vs-theme-color1);
}

.post-password-form .theme-input-group .submit-btn:hover {
    background-color: var(--vs-title-color);
    opacity: 0.8;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
    padding-top: 1em;
}

.page-links>.page-links-title {
    margin-right: 10px;
}

.page-links>span:not(.page-links-title):not(.screen-reader-text),
.page-links>a {
    display: inline-block;
    padding: 5px 13px;
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
    border: 1px solid rgba(var(--vs-title-color-rgb), 0.08);
    margin-right: 10px;
}

.page-links>span:not(.page-links-title):not(.screen-reader-text):hover,
.page-links>a:hover {
    opacity: 0.8;
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
    border-color: transparent;
}

.page-links>span:not(.page-links-title):not(.screen-reader-text).current,
.page-links>a.current {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    border-color: transparent;
}

.page-links span.screen-reader-text {
    display: none;
}

.blog-single .wp-block-archives-dropdown {
    margin-bottom: 30px;
}

.blog-single.format-quote,
.blog-single.format-link,
.blog-single.tag-sticky-2,
.blog-single.sticky {
    border-color: transparent;
    position: relative;
}

.blog-single.format-quote .blog-content,
.blog-single.format-link .blog-content,
.blog-single.tag-sticky-2 .blog-content,
.blog-single.sticky .blog-content {
    background-color: var(--vs-smoke-color);
    padding: 40px;
    border: none;
}

.blog-single.format-quote .blog-content:before,
.blog-single.format-link .blog-content:before,
.blog-single.tag-sticky-2 .blog-content:before,
.blog-single.sticky .blog-content:before {
    display: none;
}

.blog-single.format-quote:before,
.blog-single.format-link:before,
.blog-single.tag-sticky-2:before,
.blog-single.sticky:before {
    content: "\f0c1";
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-size: 5rem;
    opacity: 0.3;
    right: 15px;
    line-height: 1;
    top: 15px;
    color: var(--vs-theme-color1);
    z-index: 1;
}

.blog-single.tag-sticky-2::before,
.blog-single.sticky::before {
    content: "Featured";
    right: 0;
    top: 0;
    font-size: 18px;
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
    font-family: var(--vs-title-font);
    opacity: 1;
    text-transform: capitalize;
    padding: 10px 23px;
    font-weight: 400;
}

.blog-single.format-quote:before {
    content: "\f10e";
}

.blog-single .blog-content .wp-block-categories-dropdown.wp-block-categories,
.blog-single .blog-content .wp-block-archives-dropdown {
    display: block;
    margin-bottom: 30px;
}

.blog-details .blog-single:before {
    display: none;
}

.blog-details .blog-single .blog-content {
    background-color: transparent;
    overflow: hidden;
}

.blog-details .blog-single.format-chat .blog-meta {
    margin-bottom: 20px;
}

.blog-details .blog-single.format-chat .blog-content>p:nth-child(2n) {
    background: var(--vs-smoke-color);
    padding: 5px 20px;
}

.blog-details .blog-single.tag-sticky-2,
.blog-details .blog-single.sticky,
.blog-details .blog-single.format-quote,
.blog-details .blog-single.format-link {
    box-shadow: none;
    border: none;
    background-color: transparent;
}

.blog-details .blog-single.tag-sticky-2:before,
.blog-details .blog-single.sticky:before,
.blog-details .blog-single.format-quote:before,
.blog-details .blog-single.format-link:before {
    display: none;
}

.vs-search {
    background-color: #f3f3f3;
    margin-bottom: 30px;
    border: 1px solid #f3f3f3;
}

.vs-search .search-grid-content {
    padding: 30px;
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-search .search-grid-content {
        padding: 20px;
    }
}

.vs-search .search-grid-title {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: -0.2em;
}

.vs-search .search-grid-title a {
    color: inherit;
}

.vs-search .search-grid-title a:hover {
    color: var(--vs-theme-color1);
}

.vs-search .search-grid-meta>* {
    display: inline-block;
    margin-right: 15px;
    font-size: 14px;
}

.vs-search .search-grid-meta>*:last-child {
    margin-right: 0;
}

.vs-search .search-grid-meta a,
.vs-search .search-grid-meta span {
    color: var(--vs-body-color);
}

/* Large devices */
@media (max-width: 1199px) {

    .blog-single.format-quote:before,
    .blog-single.format-link:before,
    .blog-single.tag-sticky-2:before,
    .blog-single.sticky:before {
        font-size: 14px;
        padding: 8px 16px;
    }

    .blog-single.format-quote .blog-content,
    .blog-single.format-link .blog-content,
    .blog-single.tag-sticky-2 .blog-content,
    .blog-single.sticky .blog-content {
        padding: 30px;
    }
}

/* Small devices */
@media (max-width: 767px) {

    .blog-single.format-quote:before,
    .blog-single.format-link:before,
    .blog-single.tag-sticky-2:before,
    .blog-single.sticky:before {
        font-size: 14px;
        padding: 8px 16px;
    }

    .blog-single.format-quote .blog-content,
    .blog-single.format-link .blog-content,
    .blog-single.tag-sticky-2 .blog-content,
    .blog-single.sticky .blog-content {
        padding: 30px 15px;
    }
}

@media (max-width: 768px) {
    .wp-block-search .wp-block-search__input {
        max-width: 100%;
        margin-bottom: 0px;
    }

    .wp-block-latest-comments {
        padding-left: 10px;
    }

    .page--content.clearfix+.vs-comment-form {
        margin-top: 24px;
    }

    h1 {
        font-size: 40px;
    }
}

/*=================================
    02. Reset
==================================*/
/*------------------- 2.1. Container -------------------*/
@media only screen and (min-width: 1300px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: calc(var(--vs-main-container) + var(--vs-container-gutters));
        padding-left: calc(var(--vs-container-gutters) / 2);
        padding-right: calc(var(--vs-container-gutters) / 2);
    }
}

@media only screen and (max-width: 1600px) {
    .container-fluid.px-0 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .container-fluid.px-0 .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/*------------------- 2.2. Grid -------------------*/
.slick-track>[class*=col] {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

@media (min-width: 767px) {
    .row:not([class*=gx-]) {
        --bs-gutter-x: 30px;
    }
}

.gy-gx {
    --bs-gutter-y: var(--bs-gutter-x);
}

.gy-30 {
    --bs-gutter-y: 30px;
}

.gy-20 {
    --bs-gutter-y: 20px;
}

.gx-15 {
    --bs-gutter-x: 15px;
}

@media (min-width: 1199px) {
    .gx-45 {
        --bs-gutter-x: 45px;
    }

    .gx-60 {
        --bs-gutter-x: 60px;
    }

    .gx-50 {
        --bs-gutter-x: 50px;
    }

    .gx-70 {
        --bs-gutter-x: 70px;
    }

    .gx-80 {
        --bs-gutter-x: 80px;
    }
}

@media (min-width: 1399px) {
    .gx-20 {
        --bs-gutter-x: 20px;
    }

    .gx-30 {
        --bs-gutter-x: 30px;
    }

    .gx-40 {
        --bs-gutter-x: 40px;
    }
}

/*------------------- 2.3. Input -------------------*/
input[type=email] {
    text-transform: lowercase;
}

input[type=email]::placeholder {
    text-transform: capitalize;
}

/*------------------- 2.4. Slick Slider -------------------*/
.slick-track>[class*=col] {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

.slick-track {
    min-width: 100%;
}

.slick-slide img {
    display: inline-block;
}

.slick-dots {
    list-style-type: none;
    padding: 2px 0;
    margin: 38px 0 38px 0;
    line-height: 0;
    text-align: center;
    height: max-content;
}

.slick-dots li {
    display: inline-block;
    margin-right: 25px;
}

.slick-dots li:last-child {
    margin-right: 0;
}

.slick-dots button {
    font-size: 0;
    padding: 0;
    background-color: transparent;
    width: 8px;
    height: 8px;
    line-height: 0;
    border-radius: 9999px;
    border: none;
    background-color: var(--dots-bg, #d8d8d8);
    transition: all ease 0.4s;
    position: relative;
}

.slick-dots button:hover {
    border-color: var(--vs-theme-color1);
}

.slick-dots button:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2px solid var(--vs-theme-color1);
    border-radius: 50%;
    transition: all ease 0.4s;
    opacity: 0;
    visibility: hidden;
}

.slick-dots .slick-active button {
    background-color: var(--vs-theme-color1);
}

.slick-dots .slick-active button::before {
    opacity: 1;
    visibility: visible;
}

.slick-arrow {
    display: inline-block;
    padding: 0;
    background-color: var(--vs-white-color);
    position: absolute;
    top: 50%;
    border: 1px solid var(--vs-smoke-color);
    left: var(--pos-x, -100px);
    width: var(--icon-size, 50px);
    height: var(--icon-size, 50px);
    font-size: var(--vs-icon-font-size, 18px);
    margin-top: calc(var(--icon-size, 50px) / -2);
    z-index: 2;
    border-radius: 50%;
}

.slick-arrow.default {
    position: relative;
    --pos-x: 0;
    margin-top: 0;
}

.slick-arrow.slick-next {
    right: var(--pos-x, -100px);
    left: auto;
}

.slick-arrow:hover {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    border-color: transparent;
}

.arrow-margin .slick-arrow {
    top: calc(50% - 30px);
}

.arrow-wrap .slick-arrow {
    opacity: 0;
    visibility: hidden;
}

.arrow-wrap:hover .slick-arrow {
    opacity: 1;
    visibility: visible;
}

/* Extra large devices */
@media (max-width: 1500px) {
    .slick-arrow {
        --arrow-horizontal: -20px;
    }
}

/* Medium Large devices */
@media (max-width: 1399px) {
    .slick-arrow {
        --arrow-horizontal: 40px;
    }
}

/* Medium devices */
@media (max-width: 991px) {
    .slick-arrow {
        --icon-size: 40px;
        margin-right: 40px;
    }

    .slick-arrow.slick-next {
        margin-right: 0;
        margin-left: 40px;
    }

    .slick-dots {
        margin: 8px 0 38px 0;
    }
}

.vs-navigation {
    position: absolute;
    width: 120px;
    height: 60px;
    border-radius: 50px;
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.5);
    background-color: var(--vs-white-color);
    bottom: 0;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.vs-navigation .swiper-prevBtn,
.vs-navigation .swiper-nextBtn {
    --circle-size: 50px;
    background-color: #F1F7F3;
    width: var(--circle-size);
    height: var(--circle-size);
    min-width: var(--circle-size);
    min-height: var(--circle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: var(--vs-title-color);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.vs-navigation .swiper-prevBtn:hover,
.vs-navigation .swiper-nextBtn:hover {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.vs-navigation.style2 {
    position: relative;
    left: auto;
    transform: none;
    bottom: -20px;
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-navigation.style2 {
        display: none;
    }
}

.vs-navigation.style3 {
    position: relative;
    left: auto;
    transform: none;
    bottom: -20px;
    border-color: rgba(var(--vs-theme-color3-rgb), 0.3);
}

.vs-navigation.style3 .swiper-prevBtn,
.vs-navigation.style3 .swiper-nextBtn {
    background: rgba(var(--vs-theme-color3-rgb), 0.2);
}

.vs-navigation.style3 .swiper-prevBtn:hover,
.vs-navigation.style3 .swiper-nextBtn:hover {
    background-color: var(--vs-theme-color3);
}

.vs-navigation.style3 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-navigation.style3 {
        display: none;
    }
}

.vs-navigation.style4 {
    position: relative;
    left: auto;
    transform: none;
    bottom: -20px;
    border-color: rgba(var(--vs-theme-color4-rgb), 0.18);
}

.vs-navigation.style4 .swiper-prevBtn,
.vs-navigation.style4 .swiper-nextBtn {
    background: rgba(var(--vs-theme-color4-rgb), 0.1);
}

.vs-navigation.style4 .swiper-prevBtn:hover,
.vs-navigation.style4 .swiper-nextBtn:hover {
    background-color: var(--vs-theme-color4);
}

.vs-navigation.style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-navigation.style4 {
        display: none;
    }
}

/*------------------- 2.5. Mobile Menu -------------------*/
.vs-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    width: 0;
    width: 100%;
    height: 100%;
    transition: all ease 0.8s;
    opacity: 0;
    visibility: hidden;
}

.vs-menu-wrapper .vs-header__right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--vs-title-color);
}

.vs-menu-wrapper .mobile-logo {
    display: block;
    width: 160px;
}

.vs-menu-wrapper .vs-menu-toggle {
    border: none;
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 22px;
    width: 40px;
    height: 40px;
    z-index: 1;
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
    border-radius: 50%;
}

.vs-menu-wrapper .vs-menu-toggle:hover {
    background-color: var(--vs-theme-color2);
    transform: rotate(90deg);
}

.vs-menu-wrapper .searchBoxTggler {
    position: relative;
    border: 0;
    background-color: var(--vs-title-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.vs-menu-wrapper .searchBoxTggler:hover {
    color: var(--vs-theme-color2);
}

.vs-menu-wrapper .vs-menu-area {
    width: 100%;
    max-width: 310px;
    background-color: #fff;
    border-right: 3px solid var(--vs-theme-color1);
    height: 100%;
    position: relative;
    left: -110%;
    opacity: 0;
    visibility: hidden;
    transition: all ease 1s;
    z-index: 1;
}

.vs-menu-wrapper.vs-body-visible {
    opacity: 1;
    visibility: visible;
}

.vs-menu-wrapper.vs-body-visible .vs-menu-area {
    left: 0;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
}

.vs-mobile-menu {
    overflow-y: scroll;
    max-height: calc(100vh - 70px);
    padding-bottom: 0;
    margin-top: 33px;
    text-align: left;
}

.vs-mobile-menu .new-label {
    margin-left: 5px;
    text-transform: capitalize;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.vs-mobile-menu ul {
    margin: 0;
    padding: 0 0;
}

.vs-mobile-menu ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    list-style-type: none;
}

.vs-mobile-menu ul li li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.vs-mobile-menu ul li a {
    display: block;
    position: relative;
    padding: 12px 0;
    line-height: 1;
    font-size: 17px;
    text-transform: capitalize;
    color: var(--vs-title-color);
    font-weight: 600;
    transition: all 0.5s ease-in-out;
}

/* .vs-mobile-menu ul li a:before {
    content: "\f105";
    font-family: var(--vs-icon-font);
    position: relative;
    left: 0;
    top: 0;
    margin-right: 10px;
    display: inline-block;
    transition: all 0.5s ease-in-out;
} */

.vs-mobile-menu ul li.vs-active>a {
    color: var(--vs-theme-color2);
}

/* .vs-mobile-menu ul li.vs-active>a:before {
    transform: rotate(90deg);
} */

.vs-mobile-menu ul li ul li {
    padding-left: 10px;
}

.vs-mobile-menu ul li ul li:last-child {
    border-bottom: none;
}

.vs-mobile-menu ul .vs-item-has-children>a .vs-mean-expand {
    position: absolute;
    right: 0;
    top: 50%;
    font-weight: 400;
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-top: -12.5px;
    display: inline-block;
    text-align: center;
    color: var(--vs-title-color);
    box-shadow: 0 0 20px -8px rgba(112, 22, 126, 0.5);
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.vs-mobile-menu ul .vs-item-has-children>a .vs-mean-expand:before {
    content: "\f067";
    font-family: var(--vs-icon-font);
}

.vs-mobile-menu ul .vs-item-has-children.vs-active>a {
    color: var(--vs-theme-color1);
}

.vs-mobile-menu ul .vs-item-has-children.vs-active>a .vs-mean-expand:before {
    content: "\f068";
    color: var(--vs-theme-color1);
}

.vs-mobile-menu>ul {
    padding: 0 20px;
}

.vs-mobile-menu>ul>li:last-child {
    border-bottom: none;
}

.vs-menu-toggle {
    padding: 0;
    font-size: 40px;
    border: none;
    background-color: transparent;
    color: var(--vs-white-color);
    border-radius: 0;
}

.home-five .vs-menu-toggle {
    color: var(--vs-title-color);
}

/* Extra small devices */
@media (max-width: 575px) {
    .vs-menu-toggle {
        position: absolute;
        right: -45px;
    }
}

@media (max-width: 400px) {
    .vs-menu-wrapper .vs-menu-area {
        width: 100%;
        max-width: 270px;
    }

    .vs-mobile-menu>ul {
        padding: 0 20px;
    }
}

/*=================================
    03. Utilities
==================================*/
/*------------------- 3.1. Preloader -------------------*/
.preloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: var(--vs-black-color);
}

.preloader .vsBtn {
    margin: 15px;
}

.preloader .vsBtn:hover {
    background-color: var(--vs-theme-color2);
}

.preloader-inner {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.preloader-inner img {
    display: block;
    margin: 0 auto 20px auto;
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .pill {
    width: 55px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: rotate(180deg);
    animation: spin 4s linear 0s infinite;
}

.content .pill .medicine {
    position: absolute;
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.content .pill .medicine i {
    width: 9px;
    height: 9px;
    background: #5959EB;
    border-radius: 100%;
    position: absolute;
    animation: medicine-dust 1.75s ease 0s infinite alternate;
}

.content .pill .medicine i:nth-child(2n+2) {
    width: 10px;
    height: 10px;
    margin-top: 40px;
    margin-right: -14px;
    animation-delay: -0.2s;
}

.content .pill .medicine i:nth-child(3n+3) {
    width: 15px;
    height: 15px;
    margin-top: 35px;
    margin-right: 20px;
    animation-delay: -0.33s;
}

.content .pill .medicine i:nth-child(4) {
    margin-top: -45px;
    margin-right: 20px;
    animation-delay: -0.4s;
}

.content .pill .medicine i:nth-child(5) {
    margin-top: 45px;
    margin-right: -35px;
    animation-delay: -0.5s;
}

.content .pill .medicine i:nth-child(6) {
    margin-top: 0px;
    margin-right: -30px;
    animation-delay: -0.66s;
}

.content .pill .medicine i:nth-child(7) {
    margin-top: -10px;
    margin-right: 20px;
    animation-delay: -0.7s;
}

.content .pill .medicine i:nth-child(8) {
    margin-top: 54px;
    margin-right: -10px;
    animation-delay: -0.8s;
}

.content .pill .medicine i:nth-child(9) {
    margin-top: 36px;
    margin-right: -20px;
    animation-delay: -0.99s;
}

.content .pill .medicine i:nth-child(10) {
    margin-top: -54px;
    margin-right: 0px;
    animation-delay: -1.11s;
}

.content .pill .medicine i:nth-child(1n+10) {
    width: 5px;
    height: 5px;
}

.content .pill .medicine i:nth-child(11) {
    margin-top: 50px;
    margin-right: 20px;
    animation-delay: -1.125s;
}

.content .pill .medicine i:nth-child(12) {
    margin-top: -50px;
    margin-right: -20px;
    animation-delay: -1.275s;
}

.content .pill .side {
    background: #19A8A3;
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 60px;
    border-radius: 40px 40px 0 0;
}

.content .pill .side:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 90px;
    bottom: 0;
    right: 1.5vmin;
    background: rgba(255, 255, 255, 0.1333333333);
    border-radius: 10px 10px 0 0;
    animation: shine 1s ease-out -1s infinite alternate-reverse;
}

.content .pill .side:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    border-radius: 6vmin 6vmin 0 0;
    border: 10px solid rgba(0, 0, 0, 0.13);
    border-bottom-color: rgba(255, 255, 255, 0);
    border-bottom-width: 0vmin;
    border-top-width: 10px;
    animation: shadow 1s ease -1s infinite alternate-reverse;
}

.content .pill .side+.side {
    background: #136282;
    border-radius: 0 0 40px 40px;
    border-top: 5px solid #D8698A;
    animation: open 2s ease-in-out 0s infinite;
}

.content .pill .side+.side:before {
    bottom: inherit;
    top: 0;
    border-radius: 0 0 10px 10px;
}

.content .pill .side+.side:after {
    bottom: inherit;
    top: 0;
    border-radius: 0 0 40px 40px;
    border-top-color: rgba(255, 255, 255, 0);
    border-top-width: 0px;
    border-bottom-width: 9px;
}

@keyframes spin {
    100% {
        transform: rotate(-540deg);
    }
}

@keyframes open {

    0%,
    20%,
    80%,
    100% {
        margin-top: 0;
    }

    30%,
    70% {
        margin-top: 40px;
    }
}

@keyframes shine {

    0%,
    46% {
        right: 1.5vmin;
    }

    54%,
    100% {
        right: 7.5vmin;
    }
}

@keyframes shadow {

    0%,
    49.999% {
        transform: rotateY(0deg);
        left: 0;
    }

    50%,
    100% {
        transform: rotateY(180deg);
        left: -3vmin;
    }
}

@keyframes medicine-dust {

    0%,
    100% {
        transform: translate3d(0vmin, 0vmin, -0.1vmin);
    }

    25% {
        transform: translate3d(0.25vmin, 5vmin, 0vmin);
    }

    75% {
        transform: translate3d(-0.1vmin, -4vmin, 0.25vmin);
    }
}

/*------------------- 3.2. Buttons -------------------*/
.vsBtn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    text-transform: capitalize;
    text-decoration: none;
    border: none;
    border-radius: 50px;
    font-family: var(--vs-title-font);
    font-size: 16px;
    font-weight: 600;
    transition: 0.5s;
    z-index: 1;
}

.vsBtn span {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: inherit;
    background-color: var(--vs-title-color);
    transition: width 0.8s, height 0.8s;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.vsBtn:hover {
    color: var(--vs-white-color);
    background-color: transparent;
}

.vsBtn:hover span {
    width: 225%;
    height: 500px;
}

.home-two .vsBtn span {
    background-color: var(--vs-theme-color2);
}

.vsBtn.style2 {
    background-color: var(--vs-title-color);
}

.vsBtn.style2 span {
    background-color: var(--vs-theme-color1);
}

.vsBtn.style2:hover {
    color: var(--vs-white-color);
    background-color: transparent;
}

.vsBtn.style2:hover span {
    width: 225%;
    height: 500px;
}

.vsBtn.style3 {
    background-color: var(--vs-theme-color3);
}

.vsBtn.style4 {
    background-color: var(--vs-theme-color4);
}

.home4 .vsBtn {
    background-color: var(--vs-title-color);
    color: var(--vs-white-color);
}

.home4 .vsBtn span {
    background-color: rgba(var(--vs-white-color-rgb), 0.3);
}

.home4 .vsBtn:hover {
    color: var(--vs-title-color);
    background-color: transparent;
}

.home5 .vsBtn {
    background-color: var(--vs-theme-color4);
    color: var(--vs-white-color);
}

.home5 .vsBtn:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-title-color);
}

.vs-btn {
    display: inline-flex;
    padding: 15px 25px;
    background-color: var(--vs-theme-color1);
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--vs-title-font);
    font-size: 16px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vs-btn a {
    color: var(--vs-white-color);
    text-decoration: none;
}

.icon-btn {
    display: inline-block;
    width: var(--btn-size, 67px);
    height: var(--btn-size, 67px);
    line-height: var(--btn-size, 67px);
    font-size: var(--btn-font-size, 20px);
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    border: none;
    text-align: center;
    border-radius: 50%;
    padding: 0;
}

.icon-btn.style2 {
    border: 2px solid var(--vs-white-color);
    color: var(--vs-white-color);
    background-color: transparent;
}

.icon-btn.style2:hover {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.icon-btn.style4,
.icon-btn.style3 {
    --btn-size: 55px;
    background-color: #f2f6ff;
    color: var(--vs-theme-color1);
    border-radius: 5px;
}

.icon-btn.style4 {
    background-color: var(--vs-white-color);
}

.icon-btn.style5 {
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
    box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.08);
}

.icon-btn.style5:hover {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    box-shadow: none;
}

.icon-btn.style6 {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    --btn-size: 55px;
    --btn-font-size: 17px;
}

.icon-btn:hover {
    background-color: var(--vs-title-color);
    color: var(--vs-white-color);
    border-color: transparent;
}

.vs-hero__btn {
    display: flex;
    align-items: center;
    gap: 25px;
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-hero__btn {
        justify-content: center;
    }
}

.vs-video {
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
}

.vs-video .video_btn {
    display: flex;
    justify-content: center;
}

.vs-video .play-btn {
    --icon-size: 120px;
}

.vs-video .play-btn i {
    --icon-size: 120px;
    font-size: 32px;
    background: rgba(var(--vs-white-color-rgb), 0.2);
    border: 2px solid var(--vs-white-color);
}

.vs-video .play-btn:hover:after,
.vs-video .play-btn:hover::before,
.vs-video .play-btn:hover i {
    background-color: var(--vs-theme-color2);
}

.play-btn {
    --icon-size: 70px;
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background-color: transparent;
    border-radius: 50%;
}

.play-btn i {
    --icon-size: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    font-size: 16px;
    text-align: center;
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 70%);
    color: var(--vs-white-color);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: all ease 0.4s;
}

.play-btn:after,
.play-btn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--vs-white-color-rgb), 0.3);
    z-index: -1;
    border-radius: 50%;
    transition: all ease 0.4s;
}

.play-btn:after {
    animation-delay: 2s;
}

.play-btn:hover:after,
.play-btn:hover::before,
.play-btn:hover i {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.link-btn {
    font-weight: 500;
    font-size: 16px;
    display: inline-block;
    line-height: 0.8;
    position: relative;
    padding-bottom: 2px;
    margin-bottom: -2px;
    text-transform: uppercase;
}

.link-btn i {
    margin-left: 7px;
    font-size: 0.9rem;
}

.link-btn:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--vs-theme-color1);
    transition: all ease 0.4s;
}

.link-btn:hover {
    color: var(--vs-theme-color1);
}

.link-btn:hover::before {
    width: 100%;
}

.scroll-btn {
    position: fixed;
    bottom: 300px;
    right: 30px;
    z-index: 94;
    opacity: 0;
    visibility: hidden;
    display: inline-block;
    border-radius: 50%;
}

.scroll-btn i {
    display: inline-block;
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    text-align: center;
    font-size: 16px;
    width: var(--btn-size, 50px);
    height: var(--btn-size, 50px);
    line-height: var(--btn-size, 50px);
    z-index: 2;
    border-radius: inherit;
    position: relative;
    transition: all ease 0.8s;
}

.scroll-btn:before {
    content: "";
    position: absolute;
    left: var(--extra-shape, -6px);
    top: var(--extra-shape, -6px);
    right: var(--extra-shape, -6px);
    bottom: var(--extra-shape, -6px);
    background-color: transparent;
    border-radius: inherit;
    z-index: 1;
    border: 2px dashed var(--vs-theme-color1);
    animation: spin 13s infinite linear;
}

.scroll-btn:focus i,
.scroll-btn:hover i {
    background-color: var(--vs-title-color);
    color: var(--vs-white-color);
}

.scroll-btn.show {
    bottom: 120px;
    opacity: 1;
    visibility: visible;
}

.scroll-btn {
    /* Small devices */
}

@media (max-width: 767px) {
    .scroll-btn {
        --btn-size: 40px;
        --extra-shape: -4px;
        right: 15px;
        bottom: 50px;
    }

    .scroll-btn.show {
        bottom: 15px;
    }
}

.scrollToTop {
    position: fixed;
    right: 60px;
    bottom: 500px;
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.4s;
    z-index: 96;
}

.scrollToTop.show {
    bottom: 60px;
    opacity: 1;
    visibility: visible;
}

/* Small devices */
@media (max-width: 767px) {
    .scrollToTop {
        right: 20px;
    }

    .scrollToTop.show {
        bottom: 20px;
    }
}

/*------------------- 3.3. Titles -------------------*/
.vs-title {
    margin-bottom: var(--vs-section-title-space);
}

@media (max-width: 350px) {
    .vs-title {
        margin-bottom: 15px;
    }
}

.vs-title__main {
    margin: 0;
}

.vs-title__main span {
    color: var(--vs-theme-color2);
}

.vs-title__sub {
    color: var(--vs-title-color);
    text-transform: capitalize;
    font-size: 20px;
    font-family: var(--vs-title-font);
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}

.vs-title__sub img {
    padding-right: 10px;
}

.vs-title {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-title {
        margin-bottom: 38px;
    }

    .vs-title__sub {
        margin-bottom: 15px;
    }
}

.vs-title {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-title__main {
        font-size: 30px !important;
        max-width: 270px;
    }
}

/*------------------- 3.4. Common -------------------*/
.alert-dismissible .bvs-close {
    font-size: 18px;
    line-height: 1;
}

.z-index-step1 {
    position: relative;
    z-index: 4 !important;
}

.z-index-common {
    position: relative;
    z-index: 3;
}

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

.z-index-n2 {
    z-index: 2;
}

.media-body {
    flex: 1;
}

/*------------------- 3.6. Font -------------------*/
.font-icon {
    font-family: var(--vs-icon-font);
}

.font-title {
    font-family: var(--vs-title-font);
}

.font-body {
    font-family: var(--vs-body-font);
}

.fw-light {
    font-weight: 300;
}

.fw-normal {
    font-weight: 400;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.fw-extrabold {
    font-weight: 800;
}

.lh-xl {
    line-height: 60px;
}

/*------------------- 3.7. Background -------------------*/
.bg-theme {
    background-color: var(--vs-theme-color1) !important;
}

.bg-smoke {
    background-color: var(--vs-smoke-color) !important;
}

.bg-white {
    background-color: var(--vs-white-color) !important;
}

.bg-black {
    background-color: var(--vs-black-color) !important;
}

.bg-title {
    background-color: var(--vs-title-color) !important;
}

.bg-gray {
    background-color: var(--vs-body-color);
}

.bg-smoke {
    background-color: #ECF0F4;
}

.bg-ash {
    background-color: #EDF9F9;
}

.bg-title {
    background-color: var(--vs-title-color);
}

.background-image,
[data-bg-src] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bg-fluid {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.bg-fixed {
    background-attachment: fixed;
}

.bg-color1 {
    background-color: var(--vs-theme-color1) !important;
}

.bg-color2 {
    background-color: var(--vs-theme-color2);
}

.bg-color3 {
    background-color: var(--vs-theme-color3);
}

.bg-color4 {
    background-color: var(--vs-theme-color4);
}

.bg-color5 {
    background-color: var(--vs-theme-color5);
}

.bg-img-color {
    background-color: var(--vs-img-bg-color);
}

/*------------------- 3.8. Text Color -------------------*/
.text-theme {
    color: var(--vs-theme-color1) !important;
}

.text-title {
    color: var(--vs-title-color) !important;
}

.text-body {
    color: var(--vs-body-color) !important;
}

.text-white {
    color: var(--vs-white-color) !important;
}

.text-yellow {
    color: var(--vs-yellow-color) !important;
}

.text-success {
    color: var(--vs-success-color) !important;
}

.text-error {
    color: var(--vs-error-color) !important;
}

.text-inherit {
    color: inherit;
}

.text-inherit:hover {
    color: var(--vs-theme-color1);
}

a.text-theme:hover,
.text-reset:hover {
    text-decoration: underline;
}

.text-theme-color1 {
    color: var(--vs-theme-color1) !important;
}

.text-theme-color2 {
    color: var(--vs-theme-color2) !important;
}

.text-theme-color3 {
    color: var(--vs-theme-color3) !important;
}

.text-theme-color4 {
    color: var(--vs-theme-color4) !important;
}

/*------------------- 3.9. Animation -------------------*/
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.wow-animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadein {
    --animation-name: fadein-custom;
}

.slideinup {
    --animation-name: slideinup;
}

.slideindown {
    --animation-name: slideindown;
}

.slideinleft {
    --animation-name: slideinleft;
}

.slideinright {
    --animation-name: slideinright;
}

.spin {
    --animation-name: spin;
}

.animated {
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-name: var(--animation-name);
}

.ripple-animation,
.play-btn:after,
.play-btn:before {
    animation-duration: var(--ripple-ani-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: ripple;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    30% {
        opacity: 0.4;
    }

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

@keyframes slideinup {
    0% {
        opacity: 0;
        transform: translateY(70px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slideindown {
    0% {
        opacity: 0;
        transform: translateY(-70px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slideinleft {
    0% {
        opacity: 0;
        transform: translateX(-70px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideinright {
    0% {
        opacity: 0;
        transform: translateX(70px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes fadein-custom {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

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

    50% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.vs-fade-animation {
    opacity: 0;
    transform: translateY(30px);
}

.vs-x-anim {
    animation-name: vs-x-anim;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes vs-x-anim {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes toTopFromBottom {
    49% {
        transform: translateY(-100%);
    }

    50% {
        opacity: 0;
        transform: translateY(100%);
    }

    51% {
        opacity: 1;
    }
}

/*------------------- 3.10. icons -------------------*/
.searchBoxTggler {
    width: 60px;
    height: 60px;
    background-color: var(--vs-title-color);
    color: var(--vs-theme-color1);
    font-size: 20px;
    border: 0;
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.5s;
}

.searchBoxTggler:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
}

.searchBoxTggler.style2 {
    background-color: var(--vs-theme-color2);
    color: var(--vs-white-color);
}

.searchBoxTggler.style2:hover {
    background-color: var(--vs-theme-color1);
}

.home4 .searchBoxTggler {
    background-color: var(--vs-title-color);
    color: var(--vs-white-color);
}

.home4 .searchBoxTggler:hover {
    color: var(--vs-title-color);
    background-color: rgba(var(--vs-white-color-rgb), 0.3);
}

.home5 .searchBoxTggler {
    background-color: var(--vs-theme-color5);
    color: var(--vs-white-color);
}

.home5 .searchBoxTggler:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-title-color);
}

.rating-select {
    display: flex;
    align-items: center;
    margin-top: -0.4em;
}

.rating-select label {
    font-weight: 500;
    color: var(--vs-title-color);
    margin: 0 10px 0 0;
    display: inline-block;
}

.rating-select p.stars {
    padding: 0;
    margin-bottom: 0;
    line-height: 1;
    display: inline-block;
}

.rating-select p.stars a {
    position: relative;
    height: 14px;
    width: 18px;
    text-indent: -999em;
    display: inline-block;
    text-decoration: none;
    /* Medium devices */
}

@media (max-width: 991px) {
    .rating-select p.stars a {
        width: 14px;
    }
}

.rating-select p.stars a::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 14px;
    line-height: 1;
    font-family: var(--vs-icon-font);
    content: "\f005";
    font-weight: 400;
    text-indent: 0;
    color: var(--vs-theme-color2);
}

.rating-select p.stars a:hover~a::before {
    content: "\f005";
    font-weight: 400;
}

.rating-select p.stars:hover a::before {
    content: "\f005";
    font-weight: 700;
}

.rating-select p.stars.selected a.active::before {
    content: "\f005";
    font-weight: 700;
}

.rating-select p.stars.selected a.active~a::before {
    content: "\f005";
    font-weight: 400;
}

.rating-select p.stars.selected a:not(.active)::before {
    content: "\f005";
    font-weight: 700;
}

/*------------------- 3.11. social -------------------*/
.social-style {
    display: inline-flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-style span.home4 {
    font-family: var(--vs-title-font);
    color: var(--vs-white-color);
    font-size: 16px;
    line-height: 20px;
    text-transform: capitalize;
    margin-right: 20px;
    padding-right: 15px;
    border-right: 2px solid rgba(var(--vs-white-color-rgb), 0.3);
    position: relative;
}

.social-style span.home4::after {
    content: "";
    width: 1px;
    height: 14px;
    background-color: rgba(var(--vs-white-color-rgb), 0.3);
    position: absolute;
    right: -6px;
    top: 3px;
}

.social-style a {
    --icon-size: 40px;
    background-color: var(--vs-white-color);
    min-width: var(--icon-size);
    min-height: var(--icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vs-title-color);
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
    font-size: 14px;
    margin-right: 5px;
    transition: all ease 0.4s;
}

.social-style a:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
}

.social-style.style2 a {
    font-size: 13px;
    color: var(--vs-white-color);
    background-color: rgba(var(--vs-white-color-rgb), 0.15);
    border: 2px solid var(--vs-white-color);
}

.social-style.style2 a:hover {
    color: var(--vs-theme-color3);
}

.social-style.mobileMenu {
    margin-top: 100px;
}

.social-style.mobileMenu a {
    color: var(--vs-white-color);
    background-color: var(--vs-title-color);
}

.social-style.mobileMenu a:last-child {
    margin-right: 0;
}

.social-style.mobileMenu a:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color2);
}

.social-style.mobileMenu.style2 {
    margin-top: 100px;
}

.social-style.mobileMenu.style2 a {
    background-color: var(--vs-title-color);
}

.social-style.mobileMenu.style2 a:last-child {
    margin-right: 0;
}

.social-style.mobileMenu.style2 a:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color3);
}

/*------------------- 3.12. sticky -------------------*/
.will-sticky .sticky-active {
    position: fixed;
    top: -100%;
    right: 0;
    left: 0;
    background: linear-gradient(90deg, var(--vs-title-color) 0%, var(--vs-theme-color1) 50%, var(--vs-theme-color2) 100%);
    transition: all ease 0.8s;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
}

.will-sticky .sticky-active.active {
    top: 0;
}

.will-sticky .sticky-active {
    /* Large devices */
}

@media (max-width: 1199px) {
    .will-sticky .sticky-active {
        background: linear-gradient(90deg, var(--vs-title-color) 0%, var(--vs-theme-color2) 100%);
    }
}

/*------------------- 3.13. backtoptop -------------------*/
.back-to-top {
    --back-to-top-size: 57px;
    position: fixed;
    right: 16px;
    width: var(--back-to-top-size);
    height: var(--back-to-top-size);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
    bottom: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s ease;
}

.back-to-top .progress-circle {
    display: inline-block;
    width: var(--back-to-top-size);
    height: var(--back-to-top-size);
    transform: rotate(-90deg);
    background: rgba(var(--vs-theme-color1-rgb), 0.9);
    border-radius: 50%;
}

.back-to-top .progress-circle svg {
    width: 100%;
    height: 100%;
}

.back-to-top .progress-circle circle {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}

.back-to-top .progress-circle .progress {
    stroke: var(--vs-white-color);
    stroke-dasharray: 251.2;
    /* Circumference = 2 * PI * R (R=40) */
    stroke-dashoffset: 251.2;
    transition: stroke-dashoffset 0.2s linear;
}

.back-to-top .progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    color: var(--vs-title-color);
    pointer-events: none;
    font-size: 16px;
    font-weight: bold;
    font-family: var(--vs-title-font);
    transition: color 0.2s linear;
}

.back-to-top:hover .progress-percentage {
    color: var(--vs-white-color);
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    bottom: 20px;
    visibility: visible;
    transition: all 0.4s ease;
}

@media (max-width: 1400px) {
    .back-to-top.visible {
        bottom: 65px;
    }
}

/*------------------- 3.14. error page -------------------*/
.error-area__content h2 {
    max-width: 700px;
    margin: 0 auto 20px;
}

.error-area__content p.animate__fadeInUp {
    max-width: 600px;
    margin: 0 auto 30px;
}

.error-area .vsBtn {
    padding: 15px 50px;
}

/*------------------- 3.15. pagination page -------------------*/
.vs-pagination {
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vs-pagination ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vs-pagination li {
    display: inline-block;
    margin: 0 0px;
    list-style-type: none;
}

.vs-pagination a {
    display: inline-block;
    font-family: var(--vs-title-font);
    color: var(--vs-title-color);
    min-width: 60px;
    height: 60px;
    font-size: 17px;
    font-weight: bold;
    background-color: var(--vs-img-bg-color);
    z-index: 1;
    border-radius: 10px;
    position: relative;
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-pagination a.active,
.vs-pagination a:hover {
    box-shadow: none;
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
}

.vs-pagination a {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-pagination a {
        min-width: 40px;
        height: 40px;
        font-size: 15px;
    }
}

/*=================================
    04. Template Style
==================================*/
/*------------------- 4.1. Widget  -------------------*/
.widget {
    position: relative;
    margin-bottom: 30px;
    background-color: var(--vs-img-bg-color);
    border-radius: 20px;
    overflow: hidden;
}

.widget h3,
.widget .wp-block-heading {
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
    padding: 20px 30px;
    margin: 0;
}

.widget .services-nav {
    padding: 30px;
}

.widget .services-nav button,
.widget .services-nav a {
    position: relative;
    font-size: 16px;
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
    border: none;
    height: 50px;
    line-height: 50px;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 15px;
    border-radius: 8px;
    font-family: var(--vs-title-font);
    font-weight: bold;
    margin-bottom: 10px;
    transition: 0.5s;
}

.widget .services-nav button::after,
.widget .services-nav a::after {
    content: "";
    position: absolute;
    left: 37px;
    top: 13px;
    width: 1px;
    height: 25px;
    background-color: var(--vs-theme-color1);
    opacity: 0.2;
}

.widget .services-nav button i,
.widget .services-nav a i {
    font-size: 14px;
    margin-right: 15px;
    color: var(--vs-theme-color1);
}

.widget .services-nav button.active,
.widget .services-nav button:hover,
.widget .services-nav a.active,
.widget .services-nav a:hover {
    background-color: var(--vs-title-color);
    color: var(--vs-white-color);
}

.widget .services-nav button.active i,
.widget .services-nav button:hover i,
.widget .services-nav a.active i,
.widget .services-nav a:hover i {
    color: var(--vs-white-color);
}

.widget.search-widget form {
    padding: 0px 30px;
    color: var(--vs-white-color);
}

.widget.search-widget form input {
    width: 100%;
    padding: 20px;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: var(--vs-white-color);
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.2);
    color: var(--vs-title-color);
    text-transform: capitalize;
    border-radius: 10px;
    margin-top: 30px;
}

.widget.search-widget form button {
    width: 135px;
    padding: 15px;
    font-family: var(--vs-title-font);
    background-color: var(--vs-title-color);
    border: none;
    color: var(--vs-white-color);
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    text-transform: capitalize;
    font-size: 16px;
    margin: 20px 0 30px;
    transition: 0.5s;
}

.widget.search-widget form button:hover {
    background-color: var(--vs-theme-color1);
}

.widget.newsletter-widget {
    background-color: var(--vs-theme-color1);
}

.widget.newsletter-widget h3 {
    background-color: var(--vs-title-color);
}

.widget.newsletter-widget p {
    padding: 15px 30px;
    color: var(--vs-white-color);
    margin: 0;
}

.widget.newsletter-widget form {
    padding: 0px 30px;
    color: var(--vs-white-color);
}

.widget.newsletter-widget form input {
    width: 100%;
    padding: 18px 20px;
    border: none;
    outline: none;
    font-size: 14px;
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
    text-transform: capitalize;
    border-radius: 10px;
}

.widget.newsletter-widget form button {
    width: 155px;
    padding: 18px 20px;
    font-family: var(--vs-title-font);
    background-color: var(--vs-title-color);
    border: none;
    color: var(--vs-white-color);
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    text-transform: capitalize;
    font-size: 16px;
    margin: 20px 0 30px;
    transition: 0.5s;
}

.widget.newsletter-widget form button:hover {
    color: var(--vs-title-color);
    background-color: var(--vs-white-color);
}

.widget.latestNews-widget .latestNews-wrap {
    padding: 30px;
}

.widget.latestNews-widget .latestNews-wrap .latestNews {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.widget.latestNews-widget .latestNews-wrap .latestNews:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .media-img {
    margin-right: 15px;
    width: 100px;
    overflow: hidden;
    border-radius: 10px;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .media-img img {
    width: 100%;
    transition: all ease 0.4s;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .latestNews-meta {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .latestNews-meta i {
    color: var(--vs-theme-color1);
    margin-right: 10px;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .post-title {
    font-family: var(--vs-title-font);
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 0 0 0px 0;
    text-transform: capitalize;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .post-title a {
    color: var(--vs-title-color);
    display: inline-block;
}

.widget.latestNews-widget .latestNews-wrap .latestNews .post-title a:hover {
    color: var(--vs-theme-color1);
}

.widget.latestNews-widget .latestNews-wrap .latestNews:hover .media-img img {
    transform: scale(1.08);
}

@media (max-width: 1300px) {
    .widget.latestNews-widget .latestNews-wrap .latestNews .post-title {
        font-size: 18px;
    }
}

/* Large devices */
@media (max-width: 1199px) {
    .widget {
        --widget-padding-y: 30px;
        --widget-padding-x: 30px;
    }

    .widget.search-widget form {
        padding: 0px 20px;
    }

    .widget .services-nav {
        padding: 20px;
    }

    .widget .services-nav button,
    .widget .services-nav a {
        padding: 0 10px;
    }

    .widget.latestNews-widget .latestNews-wrap {
        padding: 20px;
    }

    .widget.latestNews-widget .latestNews-wrap .latestNews .media-img {
        width: 75px;
    }

    .widget.latestNews-widget .latestNews-wrap .latestNews .latestNews-meta {
        margin: 0 0 5px;
        font-size: 14px;
    }

    .widget.latestNews-widget .latestNews-wrap .latestNews .post-title {
        font-size: 16px;
        line-height: 24px;
    }

    .widget_title {
        font-size: 20px;
        margin-bottom: 25px;
    }
}

.vs-side-form__group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 10px;
    background-color: #fff;
}

.vs-side-form__group--inline {
    display: flex;
    gap: 10px;
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-side-form__group--inline {
        flex-wrap: wrap;
    }
}

.vs-side-form__group--checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    padding: 0;
    background: none;
}

.vs-side-form__plan {
    width: 100%;
    border: 0;
    min-height: 56px;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--vs-title-color);
    padding: 0 20px;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 26px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.vs-side-form__plan option {
    padding: 10px;
}

.vs-side-form__pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 24px 0;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(var(--vs-title-color-rgb), 0.2);
}

.vs-side-form__pricing--amount {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--vs-title-font);
    color: var(--vs-title-color);
}

.vs-side-form__pricing--name {
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.48px;
    color: var(--vs-body-color);
}

.vs-side-form__total {
    margin-bottom: 25px;
    display: grid;
    gap: 10px;
}

.vs-side-form__total--text,
.vs-side-form__total--amount {
    display: block;
    font-weight: 700;
    color: var(--vs-title-color);
}

.vs-side-form__total--text span,
.vs-side-form__total--amount span {
    color: #25283E;
}

.vs-side-form__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding-right: 10px;
    border-right: 1px solid rgba(var(--vs-title-color-rgb), 0.2);
    color: rgba(var(--vs-body-color-rgb), 0.8);
    font-size: 16px;
}

.vs-side-form__input {
    flex: 1;
    padding: 16px 10px;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: transparent;
    letter-spacing: 0.48px;
    font-weight: 500;
    text-transform: capitalize;
}

.vs-side-form__input::placeholder {
    color: var(--vs-body-color);
}

.vs-side-form__input--half {
    width: 100%;
}

.vs-side-form__group--checkbox {
    border: none;
    background: none;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

.vs-side-form__checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 0.48px;
    position: relative;
    gap: 10px;
    user-select: none;
    font-weight: 500;
    text-transform: capitalize;
    flex-wrap: wrap;
}

.vs-side-form__checkbox {
    display: none;
}

.vs-side-form__checkbox:checked+.vs-side-form__custom-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid var(--vs-white-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.vs-side-form__checkbox:checked+.vs-side-form__custom-box {
    background-color: var(--vs-theme-color2);
}

.vs-side-form__custom-box {
    min-width: 20px;
    width: 20px;
    height: 20px;
    background-color: var(--vs-white-color);
    border: 2px solid var(--vs-theme-color2);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s;
    margin-top: -3px;
}

.vs-side-form__submit {
    width: 100%;
    padding: 14px 15px;
    font-family: var(--vs-title-font);
    background-color: var(--vs-theme-color2);
    border: none;
    color: var(--vs-white-color);
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-transform: capitalize;
    font-size: 20px;
}

.vs-side-form__submit:hover {
    background-color: var(--vs-theme-color1);
}

.author-sidebar__content {
    padding: 30px 30px 40px 30px;
}

.author-sidebar__title {
    font-size: 24px;
    text-transform: capitalize;
    text-align: left;
}

.author-sidebar__schedule {
    margin-bottom: 20px;
}

.author-sidebar__schedule--list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.author-sidebar__schedule--list li {
    padding: 5px 0;
    font-weight: 700;
}

.author-sidebar__schedule--list li:last-child {
    border-bottom: none;
}

.author-sidebar__timing {
    color: var(--vs-title-color);
}

.author-sidebar .icon-call {
    margin-bottom: 14px;
}

.author-sidebar .icon-call:last-child {
    margin-bottom: 0;
}

.author-sidebar .icon-call__number {
    color: var(--vs-body-color);
    font-size: 18px;
}

.author-sidebar .icon-call__icon {
    --icon-size: 45px;
    font-size: 14px;
}

/*------------------- 4.2. Header  -------------------*/
.vs-header {
    position: relative;
    z-index: 41;
}

.vs-header.bg-fixed {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.vs-header .sticky-wrapper {
    background-color: rgba(var(--vs-theme-color1-rgb), 0.3);
}

.vs-header .menu-container {
    margin-left: -180px;
    margin-right: -180px;
}

@media (max-width: 1800px) {
    .vs-header .menu-container {
        margin-left: -80px;
        margin-right: -80px;
    }
}

@media (max-width: 1600px) {
    .vs-header .menu-container {
        margin-left: auto;
        margin-right: auto;
    }
}

.vs-header__action {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 100px;
    align-items: center;
}

@media (max-width: 1600px) {
    .vs-header__action {
        gap: 10px;
        margin-left: 0px;
    }
}

.vs-header__action p {
    font-family: var(--vs-title-font);
    color: var(--vs-white-color);
    font-size: 20px;
    text-transform: capitalize;
    font-weight: bold;
    margin: 0 10px 0 0;
    line-height: 0px;
    padding-left: 20px;
    position: relative;
    transition: 0.5s;
}

.vs-header__action p:hover {
    color: var(--vs-title-color);
}

.vs-header__action p:hover span {
    color: var(--vs-white-color);
}

.vs-header__action p span {
    font-size: 16px;
    color: var(--vs-white-color);
    display: block;
    margin-bottom: 30px;
}

.vs-header__action .call-icon {
    width: 60px;
    height: 60px;
    background-color: var(--vs-title-color);
    color: var(--vs-theme-color1);
    font-size: 26px;
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.5s;
}

.vs-header__action .H-call:hover .call-icon {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.vs-header__logo {
    padding: 20px 0;
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-header__logo {
        margin: 0 30px;
    }
}

@media (max-width: 500px) {
    .vs-header__logo {
        max-width: 180px;
        margin: 0;
    }
}

.vs-header.home-two .sticky-wrapper {
    background-color: rgba(var(--vs-title-color-rgb), 0.9);
    border-bottom: 2px solid rgba(var(--vs-white-color-rgb), 0.6);
}

.vs-header.home-two .sticky-wrapper .sticky-active.active {
    background: rgba(var(--vs-title-color-rgb), 0.95);
}

.vs-header.home-three .sticky-wrapper {
    background-color: rgba(var(--vs-theme-color1-rgb), 0.4);
    border-bottom: 2px solid rgba(var(--vs-white-color-rgb), 0.6);
}

.vs-header.home-three .sticky-wrapper .sticky-active.active {
    background: var(--vs-title-color);
}

.vs-header.home-four .sticky-wrapper {
    background-color: rgba(var(--vs-theme-color3-rgb), 0.9);
    border-bottom: 3px solid rgba(var(--vs-white-color-rgb), 0.2);
}

.vs-header.home-four .sticky-wrapper .sticky-active.active {
    background: var(--vs-theme-color3);
    border-bottom: 3px solid rgba(var(--vs-white-color-rgb), 0.2);
}

.vs-header.home-five .sticky-wrapper {
    background-color: rgba(var(--vs-theme-color4-rgb), 0.1);
    border-bottom: 3px solid rgba(var(--vs-theme-color4-rgb), 0.2);
}

.vs-header.home-five .sticky-wrapper .sticky-active.active {
    background: linear-gradient(90deg, var(--vs-theme-color5) 0%, var(--vs-white-color) 40%, var(--vs-theme-color4) 100%);
    border-bottom: 3px solid rgba(var(--vs-theme-color4-rgb), 0.2);
}

.main-menu {
    margin-right: 100px;
}

@media (max-width: 1800px) {
    .main-menu {
        margin-right: 0px;
    }
}

@media (max-width: 1400px) {
    .main-menu {
        margin-right: 80px;
    }
}

.main-menu a {
    display: block;
    position: relative;
    font-weight: bold;
    font-size: 16px;
    color: var(--vs-white-color);
    font-family: var(--vs-title-font);
    text-transform: capitalize;
}

.main-menu ul {
    margin: 0;
    padding: 0;
}

.main-menu ul li {
    list-style-type: none;
    display: inline-block;
    position: relative;
    margin: 0;
}

.main-menu ul li a {
    position: relative;
    padding: 37px 20px;
}

@media (max-width: 1600px) {
    .main-menu ul li a {
        padding: 35px 15px;
    }
}

.main-menu ul li a::after {
    content: "";
    position: absolute;
    width: 0%;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--vs-white-color);
    transition: 0.3s;
    border-radius: 2px;
    opacity: 0;
}

.main-menu ul li a:hover::after {
    width: 100%;
    opacity: 1;
}

.main-menu ul li.active a {
    background-color: rgba(var(--vs-title-color-rgb), 0.8);
}

.main-menu ul li.active a::after {
    width: 100%;
    opacity: 1;
}

.main-menu ul li.menu-item-has-children.mega-menu-wrap.active a {
    background-color: transparent;
}

.main-menu ul li.menu-item-has-children.mega-menu-wrap.active a::after {
    content: "";
    width: 0%;
    opacity: 0;
}

.main-menu ul li.menu-item-has-children.mega-menu-wrap.active a:hover::after {
    width: 100%;
    opacity: 1;
}

.main-menu ul li:last-child {
    margin-right: 0;
}

.main-menu ul li:first-child {
    margin-left: 0;
}

.main-menu ul.sub-menu,
.main-menu ul.mega-menu {
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background-color: var(--vs-white-color);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    visibility: hidden;
    min-width: 210px;
    width: max-content;
    padding: 7px;
    left: -14px;
    margin-top: 50px;
    opacity: 0;
    z-index: -1;
    border-bottom: 4px solid var(--vs-title-color);
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09), 0px 3px 0px 0px rgba(231, 13, 60, 0.004);
    transform-origin: top center;
    transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, z-index 0s;
}

.main-menu ul.sub-menu li,
.main-menu ul.mega-menu li {
    margin: 0 0 5px;
}

.main-menu ul.sub-menu a,
.main-menu ul.mega-menu a {
    color: var(--vs-title-color);
    font-size: 16px;
    line-height: 25px;
    text-transform: capitalize;
    background-color: transparent;
}

.main-menu ul.sub-menu {
    padding: 25px 20px;
    left: -20px;
    display: grid;
    gap: 3px;
}

.main-menu ul.sub-menu li {
    display: block;
    margin: 0 0 5px;
}

.main-menu ul.sub-menu li.menu-item-has-children>a:after {
    content: "\f105";
    float: right;
    top: 3px;
}

.main-menu ul.sub-menu li a {
    position: relative;
    padding: 5px 0;
    display: inline-block;
    background-color: transparent;
    font-weight: 700;
}

.main-menu ul.sub-menu li a::before {
    content: "\f101";
    font-family: var(--vs-icon-font);
    font-weight: 400;
    margin: 0 10px 0 0;
    color: var(--vs-theme-color1);
    font-size: 14px;
}

.main-menu ul.sub-menu li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    border-bottom: 2px solid var(--vs-title-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    z-index: -1;
    pointer-events: none;
}

.main-menu ul.sub-menu li a.active,
.main-menu ul.sub-menu li a:hover {
    transform: translateX(10px);
}

.main-menu ul.sub-menu li a.active::after,
.main-menu ul.sub-menu li a:hover::after {
    width: 100%;
    left: 10px;
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease;
    transform: translateX(-10px);
}

.main-menu ul.sub-menu li ul.sub-menu {
    left: 100%;
    right: auto;
    top: 0;
    margin: 0 0;
    margin-left: 20px;
}

.main-menu ul.sub-menu li ul.sub-menu li ul {
    left: 100%;
    right: auto;
}

.main-menu .mega-menu-wrap {
    position: static;
}

.main-menu ul.mega-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
    width: 100%;
    padding: 25px;
    left: 50%;
    max-width: var(--vs-main-container);
    transform: translateX(-50%);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

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

.main-menu ul.mega-menu li {
    display: block;
    width: 100%;
    padding: 0 15px;
}

.main-menu ul.mega-menu li ul {
    margin-top: 20px;
}

.main-menu ul.mega-menu li ul li {
    padding: 0px 20px 0 0;
}

.main-menu ul.mega-menu li ul li.active a.active,
.main-menu ul.mega-menu li ul li.active a:hover {
    transform: translateX(10px);
}

.main-menu ul.mega-menu li ul li.active a.active::after,
.main-menu ul.mega-menu li ul li.active a:hover::after {
    width: 100%;
    left: 10px;
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease;
    transform: translateX(-10px);
}

.main-menu ul.mega-menu li a {
    display: block;
    padding: 5px 0px;
    position: relative;
    z-index: 1;
}

.main-menu ul.mega-menu>li span {
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--vs-theme-color1);
    border-bottom: 2px solid var(--vs-theme-color1);
    font-family: var(--vs-title-font);
}

.main-menu ul.mega-menu>li>ul {
    display: grid;
    gap: 3px;
}

.main-menu ul.mega-menu>li>ul>li>a {
    z-index: 1;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.main-menu ul.mega-menu>li>ul>li>a:before {
    content: "\f101";
    font-family: var(--vs-icon-font);
    font-weight: 400;
    margin: 0 10px 0 0;
    font-size: 14px;
    color: var(--vs-theme-color1);
}

.main-menu ul.mega-menu>li>ul>li>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0%;
    background: transparent;
    border-bottom: 2px solid var(--vs-title-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    z-index: -1;
    pointer-events: none;
}

.main-menu ul.mega-menu>li>ul>li>a:hover {
    transform: translateX(15px);
}

.main-menu ul.mega-menu>li>ul>li>a:hover::after {
    width: 100%;
    left: 10px;
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease;
    transform: translateX(-15px);
}

.main-menu>ul>li:hover>ul.sub-menu,
.main-menu>ul>li:hover>ul.mega-menu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    z-index: 9;
}

@media (max-width: 1800px) {
    .home-two .main-menu {
        margin-right: 80px;
    }
}

.home-two .main-menu ul li a::after {
    height: 2px;
}

.home-two .main-menu ul li.active a {
    background-color: rgba(var(--vs-theme-color1-rgb), 0.3);
}

.home-two .main-menu ul.sub-menu li a {
    background: transparent;
}

.home-two .main-menu ul.sub-menu li a::after {
    height: 2px;
    border-color: var(--vs-title-color);
}

@media (max-width: 1800px) {
    .home-three .main-menu {
        margin-right: 80px;
    }
}

.home-three .main-menu ul li a::after {
    height: 3px;
    border-color: var(--vs-theme-color1);
}

.home-three .main-menu ul li.active a {
    background-color: rgba(var(--vs-white-color-rgb), 0.1);
}

.home-three .main-menu ul.sub-menu li a {
    background: transparent;
}

.home-three .main-menu ul.sub-menu li a::after {
    height: 2px;
    border-color: var(--vs-title-color);
}

@media (max-width: 1800px) {
    .home-four .main-menu {
        margin-right: 80px;
    }
}

.home-four .main-menu ul li a::after {
    height: 3px;
    bottom: -3px;
    background: var(--vs-title-color);
}

.home-four .main-menu ul li.active a {
    background-color: rgba(var(--vs-white-color-rgb), 0.1);
}

.home-four .main-menu ul.sub-menu li a {
    background: transparent;
}

.home-four .main-menu ul.sub-menu li a::after {
    height: 2px;
    bottom: 0;
    background: none;
    border-color: var(--vs-title-color);
}

.home-four .main-menu ul.sub-menu li a::before {
    color: var(--vs-theme-color3);
}

.home-four .main-menu ul.mega-menu span {
    color: var(--vs-theme-color3);
    border-color: var(--vs-theme-color3);
}

.home-four .main-menu ul.mega-menu li>ul>li>a::before {
    color: var(--vs-theme-color3);
}

@media (max-width: 1800px) {
    .home-five .main-menu {
        margin-right: 80px;
    }
}

.home-five .main-menu ul li a {
    color: var(--vs-title-color);
}

.home-five .main-menu ul li a::after {
    height: 3px;
    bottom: -3px;
    background: var(--vs-theme-color5);
}

.home-five .main-menu ul li.active a {
    background-color: transparent;
}

.home-five .main-menu ul.sub-menu li a {
    background: transparent;
}

.home-five .main-menu ul.sub-menu li a::after {
    height: 2px;
    bottom: 0;
    background: none;
    border-color: var(--vs-title-color);
}

.home-five .main-menu ul.sub-menu li a::before {
    color: var(--vs-theme-color5);
}

.home-five .main-menu ul.mega-menu span {
    color: var(--vs-theme-color4);
    border-color: var(--vs-theme-color5);
}

.home-five .main-menu ul.mega-menu li>ul>li>a::before {
    color: var(--vs-theme-color5);
}

/*------------------- 4.3. Footer  -------------------*/
.vs-footer {
    overflow: hidden;
    background-color: #212354;
}

.vs-footer__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    padding: 40px;
}

.vs-footer__contact .contact_box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vs-footer__contact .contact_box .con-icon {
    width: 90px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vs-title-color);
    color: var(--vs-white-color);
    font-size: 44px;
    border-radius: 10px;
    transition: 0.5s;
}

.vs-footer__contact .contact_box .con-txt p {
    font-family: var(--vs-title-font);
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-weight: bold;
    margin: 0;
    transition: 0.5s;
}

.vs-footer__contact .contact_box .con-txt h3,
.vs-footer__contact .contact_box .con-txt h2 {
    max-width: 225px;
    font-size: 24px;
    color: var(--vs-white-color);
    margin: 0;
    transition: 0.5s;
}

.vs-footer__contact .contact_box .con-txt h3:hover,
.vs-footer__contact .contact_box .con-txt h2:hover {
    color: var(--vs-title-color);
}

.vs-footer__wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: start;
    margin-top: 80px;
}

.vs-footer__wrapper-title {
    color: var(--vs-white-color);
    margin: 0;
    position: relative;
    padding-bottom: 15px;
}

.vs-footer__wrapper-title:after {
    content: "";
    width: 92px;
    height: 3px;
    background-color: var(--vs-theme-color1);
    position: absolute;
    bottom: 0;
    left: 0;
}

.vs-footer__wrapper-content {
    margin-top: 25px;
}

.vs-footer__wrapper-content p {
    color: var(--vs-white-color);
    max-width: 360px;
}

@media (max-width: 1300px) {
    .vs-footer__wrapper-content p {
        max-width: 260px;
    }
}

.vs-footer__wrapper-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vs-footer__wrapper-content ul li {
    font-family: var(--vs-body-font);
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 8px;
}

.vs-footer__wrapper-content ul li a {
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    display: block;
    position: relative;
}

.vs-footer__wrapper-content ul li a:after {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--vs-theme-color1);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.vs-footer__wrapper-content ul li a:hover {
    padding-left: 20px;
}

.vs-footer__wrapper-content ul li a:hover:after {
    opacity: 1;
    visibility: visible;
}

.vs-footer__wrapper-content .subscribe input {
    width: 100%;
    padding: 10px 25px;
    border: 2px solid var(--vs-theme-color1);
    outline: none;
    border-radius: 10px;
    margin-bottom: 15px;
    background-color: rgba(var(--vs-white-color-rgb), 0.1);
    color: var(--vs-white-color);
}

.vs-footer__wrapper-content .subscribe input::placeholder {
    color: var(--vs-white-color);
}

.vs-footer__wrapper-content .subscribe button {
    padding: 10px 25px;
    border: none;
    outline: none;
    border-radius: 10px;
    background: var(--vs-theme-color1);
    color: var(--vs-white-color);
    font-weight: 500;
    transition: all 0.5s ease-in-out;
    text-transform: capitalize;
}

.vs-footer__wrapper-content .subscribe button:hover {
    color: var(--vs-theme-color1);
    background: var(--vs-white-color);
}

.vs-footer__bottom {
    background-color: rgba(var(--vs-white-color-rgb), 0.1);
    padding: 20px 0;
}

.vs-footer__bottom--menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    list-style: none;
    column-gap: 37px;
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-footer__bottom--menu {
        justify-content: center;
    }
}

.vs-footer__bottom--menu>li>a {
    color: var(--vs-white-color);
    font-weight: 400;
    letter-spacing: 0.48px;
    position: relative;
}

.vs-footer__bottom--menu>li>a::before {
    position: absolute;
    content: "";
    width: 0%;
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    visibility: hidden;
    height: 2px;
    background-color: var(--vs-theme-color1);
    transition: all 0.5s ease-in-out;
}

.vs-footer__bottom--menu>li>a:hover {
    color: var(--vs-theme-color1);
}

.vs-footer__bottom--menu>li>a:hover::before {
    left: 0;
    right: auto;
    opacity: 1;
    visibility: visible;
    width: 100%;
    transition: all 0.5s ease-in-out;
}

.vs-footer__copyright {
    color: var(--vs-white-color);
    font-weight: 400;
    letter-spacing: 0.48px;
    text-transform: capitalize;
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-footer__copyright {
        text-align: center;
    }
}

.vs-footer__copyright a {
    color: var(--vs-theme-color1);
    position: relative;
    font-weight: bold;
}

.vs-footer__copyright a::before {
    position: absolute;
    content: "";
    width: 0%;
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    visibility: hidden;
    height: 2px;
    background-color: var(--vs-theme-color1);
    transition: all 0.5s ease-in-out;
}

.vs-footer__copyright a:hover {
    color: var(--vs-theme-color1);
}

.vs-footer__copyright a:hover::before {
    left: 0;
    right: auto;
    opacity: 1;
    visibility: visible;
    width: 100%;
    transition: all 0.5s ease-in-out;
}

.vs-footer {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-footer__logo {
        width: 150px;
    }

    .vs-footer__contact .contact_box {
        gap: 10px;
    }

    .vs-footer__contact .contact_box .con-icon {
        width: 70px;
        height: 65px;
        font-size: 36px;
    }

    .vs-footer__contact .contact_box .con-txt h3,
    .vs-footer__contact .contact_box .con-txt h2 {
        max-width: 180px;
        font-size: 20px;
    }

    .vs-footer__wrapper {
        gap: 30px;
    }

    .vs-footer__wrapper-title {
        font-size: 20px;
    }

    .vs-footer__wrapper-content p {
        max-width: 300px;
        font-size: 14px;
    }

    .vs-footer__wrapper-content ul {
        width: 160px;
    }
}

.vs-footer {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-footer .contact_box {
        flex-direction: column;
        gap: 15px;
        align-items: baseline;
    }

    .vs-footer .contact_box .con-icon {
        width: 90px;
        height: 85px;
        font-size: 44px;
    }

    .vs-footer__wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.vs-footer {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-footer__contact {
        flex-direction: column;
        gap: 20px;
        align-items: baseline;
    }

    .vs-footer__contact .contact_box {
        flex-direction: row;
        align-items: center;
    }

    .vs-footer__contact .contact_box .con-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }

    .vs-footer__wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.vs-footer {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-footer__wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .vs-footer__contact {
        padding: 20px;
    }

    .vs-footer__contact .contact_box {
        gap: 10px;
    }

    .vs-footer__contact .contact_box .con-icon {
        width: 70px;
        height: 65px;
        font-size: 36px;
    }

    .vs-footer__contact .contact_box .con-txt h3 {
        max-width: 180px;
        font-size: 20px;
    }
}

.vs-footer.style2 .vs-footer__logo {
    margin-right: 115px;
}

.vs-footer.style2 .vs-footer__contact {
    border-bottom: 2px dotted rgba(var(--vs-white-color-rgb), 0.2);
    border-radius: 0;
    padding: 0 0 50px;
}

.vs-footer.style2 .vs-footer__contact .contact_box .con-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    border: 2px solid var(--vs-white-color);
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.vs-footer.style2 .vs-footer__contact .contact_box .con-txt h3 {
    max-width: 180px;
    font-size: 20px;
    transition: all 0.5s ease-in-out;
}

.vs-footer.style2 .vs-footer__contact .contact_box:hover .con-icon {
    color: var(--vs-theme-color3);
    border-color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__contact .contact_box:hover .con-txt h3 {
    color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__wrapper {
    margin-top: 30px;
}

.vs-footer.style2 .vs-footer__wrapper-title:after {
    background-color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__wrapper-content p {
    max-width: 340px;
}

.vs-footer.style2 .vs-footer__wrapper-content ul li a:after {
    background-color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__wrapper-content .subscribe input {
    border: 2px solid var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__wrapper-content .subscribe button {
    background: var(--vs-theme-color3);
    color: var(--vs-white-color);
}

.vs-footer.style2 .vs-footer__wrapper-content .subscribe button:hover {
    color: var(--vs-theme-color3);
    background: var(--vs-white-color);
}

.vs-footer.style2 .vs-footer__bottom {
    background-color: rgba(var(--vs-theme-color3-rgb), 0.2);
}

.vs-footer.style2 .vs-footer__bottom--menu>li>a::before {
    background-color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__bottom--menu>li>a:hover {
    color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__copyright a {
    color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__copyright a::before {
    background-color: var(--vs-theme-color3);
}

.vs-footer.style2 .vs-footer__copyright a:hover {
    color: var(--vs-theme-color3);
}

@media (max-width: 1300px) {
    .vs-footer.style2 .vs-footer__logo {
        margin-right: 35px;
    }

    .vs-footer.style2 .vs-footer__wrapper-title {
        font-size: 22px;
    }
}

.vs-footer.style2 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-footer.style2 .vs-footer__logo {
        width: 180px;
    }

    .vs-footer.style2 .vs-footer__contact .contact_box .con-txt h3 {
        font-size: 16px;
    }

    .vs-footer.style2 .vs-footer__contact .contact_box .con-txt p {
        font-size: 14px;
    }
}

.vs-footer.style2 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-footer.style2 .vs-footer__contact {
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
    }

    .vs-footer.style2 .vs-footer__contact .contact_box {
        flex-direction: row;
        align-items: center;
    }
}

.vs-footer.style2 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-footer.style2 .social-style span.home4 {
        margin-right: 15px;
        padding-right: 10px;
    }
}

.vs-footer.style3 {
    background-color: var(--vs-theme-color5);
}

.vs-footer.style3 .vs-footer__logo {
    margin-right: 115px;
}

.vs-footer.style3 .vs-footer__contact {
    border-bottom: 2px dotted rgba(var(--vs-white-color-rgb), 0.2);
    border-radius: 0;
    padding: 0 0 50px;
}

.vs-footer.style3 .vs-footer__contact .contact_box .con-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    border: 2px solid var(--vs-white-color);
    background: transparent;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.vs-footer.style3 .vs-footer__contact .contact_box .con-txt h3 {
    max-width: 180px;
    font-size: 20px;
    transition: all 0.5s ease-in-out;
}

.vs-footer.style3 .vs-footer__contact .contact_box:hover .con-icon {
    color: var(--vs-theme-color4);
    border-color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__contact .contact_box:hover .con-txt h3 {
    color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__wrapper {
    margin-top: 30px;
}

.vs-footer.style3 .vs-footer__wrapper-title:after {
    background-color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__wrapper .style2 a:hover {
    color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__wrapper-content p {
    max-width: 340px;
}

.vs-footer.style3 .vs-footer__wrapper-content ul li a:after {
    background-color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__wrapper-content .subscribe input {
    border: 2px solid var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__wrapper-content .subscribe button {
    background: var(--vs-theme-color4);
    color: var(--vs-white-color);
}

.vs-footer.style3 .vs-footer__wrapper-content .subscribe button:hover {
    color: var(--vs-theme-color4);
    background: var(--vs-white-color);
}

.vs-footer.style3 .vs-footer__bottom {
    background-color: rgba(var(--vs-theme-color4-rgb), 0.15);
    backdrop-filter: blur(5px);
}

.vs-footer.style3 .vs-footer__bottom--menu>li>a::before {
    background-color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__bottom--menu>li>a:hover {
    color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__copyright a {
    color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__copyright a::before {
    background-color: var(--vs-theme-color4);
}

.vs-footer.style3 .vs-footer__copyright a:hover {
    color: var(--vs-theme-color4);
}

@media (max-width: 1300px) {
    .vs-footer.style3 .vs-footer__logo {
        margin-right: 35px;
    }

    .vs-footer.style3 .vs-footer__wrapper-title {
        font-size: 22px;
    }
}

.vs-footer.style3 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-footer.style3 .vs-footer__logo {
        width: 180px;
    }

    .vs-footer.style3 .vs-footer__contact .contact_box .con-txt h3 {
        font-size: 16px;
    }

    .vs-footer.style3 .vs-footer__contact .contact_box .con-txt p {
        font-size: 14px;
    }
}

.vs-footer.style3 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-footer.style3 .vs-footer__contact {
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
    }

    .vs-footer.style3 .vs-footer__contact .contact_box {
        flex-direction: row;
        align-items: center;
    }
}

.vs-footer.style3 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-footer.style3 .social-style span.home4 {
        margin-right: 15px;
        padding-right: 10px;
    }
}

/*------------------- 4.4. Breadcumb  -------------------*/
.vs-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 130px 0;
}

.vs-breadcrumb__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
}

.vs-breadcrumb__bg>img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.vs-breadcrumb__content {
    text-align: left;
}

.vs-breadcrumb h1 {
    font-size: 64px;
    text-transform: capitalize;
    color: var(--vs-white-color);
    margin-bottom: 15px;
}

.vs-breadcrumb__menu {
    max-width: 100%;
    margin: -0.35em 0 -0.35em 0;
    padding: 0;
    list-style-type: none;
}

.vs-breadcrumb__menu ul {
    list-style: none;
    position: relative;
    padding: 5px 0 0;
}

.vs-breadcrumb__menu ul li {
    display: inline-block;
    color: var(--vs-theme-color1);
    padding: 5px 5px 0 0;
    font-family: var(--vs-title-font);
    text-transform: capitalize;
    font-weight: bold;
    font-size: 30px;
}

.vs-breadcrumb__menu ul li::after {
    content: "//";
    display: inline-block;
    font-family: var(--vs-title-font);
    color: var(--vs-white-color);
    margin-left: 10px;
}

.vs-breadcrumb__menu ul li:last-child::after {
    content: "";
}

.vs-breadcrumb__menu ul li a {
    color: var(--vs-white-color);
}

.vs-breadcrumb__menu ul li a:hover {
    color: var(--vs-theme-color1);
}

.vs-breadcrumb {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-breadcrumb h1 {
        font-size: 35px !important;
    }

    .vs-breadcrumb__menu ul li {
        font-size: 20px;
    }
}

/*------------------- 4.5. Hero Area  -------------------*/
.vs-hero {
    position: relative;
    z-index: 9;
}

.vs-hero__wrap {
    position: relative;
}

.vs-hero .star {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    color: rgba(var(--vs-white-color-rgb), 0.1);
}

.vs-hero .star img {
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.vs-hero .star.icon_one {
    right: -18%;
    left: auto;
    top: 150px;
    width: 180px;
    transform: translate(-18%, 0px);
}

.vs-hero .star.icon_two {
    top: auto;
    right: -15%;
    left: auto;
    bottom: 70px;
    width: 80px;
    transform: translate(-15%, 0px);
}

.vs-hero .star.icon_three {
    left: -18%;
    top: 150px;
    width: 95px;
    transform: translate(-18%, 0px);
}

.vs-hero .star.icon_four {
    left: -15%;
    bottom: 70px;
    width: 80px;
    transform: translate(-15%, 0px);
}

.vs-hero .star.icon_five {
    left: 29%;
    top: 200px;
    width: 25px;
    transform: translate(29%, 0px);
}

.vs-hero .star.icon_six {
    left: 48%;
    right: auto;
    top: 50%;
    width: 80px;
    transform: translate(48%, 50%);
}

.vs-hero__bg {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.vs-hero__bg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0e1d4c91;
}

.vs-hero__content {
    padding: 320px 0 210px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


@media (max-width: 1199px) {
    .vs-hero__content {
        padding: 250px 0 160px;
    }
}

.vs-hero__content {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-hero__content {
        padding: 200px 0 50px;
        text-align: center;
    }
}

.vs-hero__title--main {
    font-size: 64px;
    line-height: 75px;
    text-transform: capitalize;
    color: var(--vs-white-color);
    font-family: var(--vs-title-font);
    font-weight: bold;
}

.vs-hero__title--main span {
    color: var(--vs-theme-color1);
}

@media (max-width: 1300px) {
    .vs-hero__title--main {
        font-size: 50px;
        line-height: 55px;
    }
}

.vs-hero__title--main {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-hero__title--main {
        font-size: 46px;
    }
}

.vs-hero__title--sub {
    font-size: 20px;
    font-weight: 400;
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-family: var(--vs-body-font);
    line-height: 1.1;
    margin: 0 0 20px 0;
    display: block;
}

.vs-hero__title--para {
    font-size: 18px;
    font-weight: 400;
    font-family: var(--vs-body-font);
    color: var(--vs-white-color);
    text-transform: capitalize;
    max-width: 570px;
    margin: 20px 0 40px 0;
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-hero__title--para {
        margin: 20px auto 40px;
    }
}

.vs-hero__title--para {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-hero__title--para {
        font-size: 16px;
    }
}

.vs-hero__shape-bgImg {
    position: absolute;
    right: 0;
    left: auto;
    top: 12%;
    animation: slideinup 2s ease-in-out;
}

.vs-hero__shape-bgImg img {
    width: 100%;
    height: 800px;
    object-fit: cover;
}

.vs-hero__shape-bgImg {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-hero__shape-bgImg {
        right: -22%;
        top: 20%;
    }

    .vs-hero__shape-bgImg img {
        width: 75%;
        height: auto;
    }
}

.vs-hero__shape-bgImg {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-hero__shape-bgImg {
        position: relative;
        max-width: 500px;
        margin: 0 auto;
        top: 0;
        right: 0;
        left: 0;
    }

    .vs-hero__shape-bgImg img {
        width: 100%;
    }
}

.vs-hero__anim1 {
    animation-name: slideinright;
    animation-duration: 3s;
}

.vs-hero.style2 .vs-hero__content {
    padding: 250px 0 160px;
}

.vs-hero.style2 .vs-hero__shape-bgImg {
    right: -130px;
    top: 17%;
}

.vs-hero.style2 .hero-box {
    padding: 65px 0 65px 65px;
    border-radius: 30px;
    background-size: auto;
    background-position: left;
    animation: slideinleft 2s ease-in-out;
}

.vs-hero.style2 .hero-box .eCall {
    font-family: var(--vs-title-font);
    color: var(--vs-white-color);
    font-size: 20px;
    text-transform: capitalize;
    font-weight: bold;
    margin: 0 10px 0 0;
    line-height: 0px;
    padding-left: 20px;
    position: relative;
    transition: 0.5s;
}

.vs-hero.style2 .hero-box .eCall:hover {
    color: var(--vs-theme-color1);
}

.vs-hero.style2 .hero-box .eCall:hover span {
    color: var(--vs-white-color);
}

.vs-hero.style2 .hero-box .eCall span {
    font-size: 16px;
    display: block;
    margin-bottom: 30px;
    color: var(--vs-white-color);
}

.vs-hero.style2 .hero-box .call-icon {
    width: 60px;
    height: 60px;
    background-color: var(--vs-white-color);
    color: var(--vs-theme-color1);
    font-size: 26px;
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.5s;
}

@media (max-width: 1600px) {
    .vs-hero.style2 .vs-hero__shape-bgImg {
        right: -70px;
    }
}

@media (max-width: 1500px) {
    .vs-hero.style2 .vs-hero__shape-bgImg img {
        width: 90%;
        object-fit: contain;
    }
}

.vs-hero.style2 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-hero.style2 .vs-hero__shape-bgImg {
        position: relative;
        max-width: 500px;
        margin: 0 auto;
        top: 0;
        right: 0;
        left: 0;
    }

    .vs-hero.style2 .vs-hero__shape-bgImg img {
        width: 100%;
    }

    .vs-hero.style2 .vs-hero__content {
        padding: 200px 0 50px;
    }

    .vs-hero.style2 .hero-box {
        background-size: contain;
    }
}

.vs-hero.style2 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-hero.style2 .hero-box {
        padding: 40px;
    }
}

.vs-hero.style2 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-hero.style2 .hero-box {
        background-size: cover;
        padding: 20px;
    }

    .vs-hero.style2 .vs-hero__title--main {
        font-size: 40px;
    }
}

.vs-hero.style2 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-hero.style2 .vs-hero__title--main {
        font-size: 36px;
    }

    .vs-hero.style2 .hero-box {
        background-image: none !important;
    }
}

.vs-hero.style4 .vs-hero__content {
    padding: 240px 0 150px;
}

.vs-hero.style4 .vs-hero__title--main {
    color: var(--vs-title-color);
}

.vs-hero.style4 .vs-hero__title--sub {
    font-weight: bold;
    font-family: var(--vs-title-font);
}

.vs-hero.style4 .vs-hero__title--para {
    text-transform: capitalize;
    color: var(--vs-body-color);
    max-width: 655px;
    margin: 25px 0 40px 0;
}

.vs-hero.style4 .vs-hero__btn .vsBtn {
    background-color: var(--vs-theme-color3);
}

.vs-hero.style4 .vs-hero__btn .play-btn {
    --icon-size: 70px;
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background-color: transparent;
    border-radius: 50%;
}

.vs-hero.style4 .vs-hero__btn .play-btn i {
    background: linear-gradient(90deg, var(--vs-theme-color3) 0%, rgba(216, 105, 138, 0.5) 70%);
}

.vs-hero.style4 .vs-hero__btn .play-btn:after,
.vs-hero.style4 .vs-hero__btn .play-btn:before {
    background-color: rgba(var(--vs-theme-color3-rgb), 0.5);
}

.vs-hero.style4 .vs-hero__btn .play-btn:hover:after,
.vs-hero.style4 .vs-hero__btn .play-btn:hover::before,
.vs-hero.style4 .vs-hero__btn .play-btn:hover i {
    color: var(--vs-title-color);
}

.vs-hero.style4 .vs-hero__shape-bgImg {
    right: 0px;
    top: 30%;
}

.vs-hero.style4 .vs-hero__shape-bgImg .main-img {
    width: 455px;
    height: 780px;
    position: absolute;
    right: 40px;
    bottom: 0;
}

.vs-hero.style4 .vs-hero__shape-bgImg .shape-img {
    width: auto;
    height: auto;
}

.vs-hero.style4 .hero-box {
    padding: 55px 0 55px 60px;
    border-radius: 30px;
    background-size: auto;
    background-position: left;
    margin-left: -60px;
    animation: slideinright 2s ease-in-out;
}

@media (max-width: 1500px) {
    .vs-hero.style4 .hero-box {
        padding: 50px 0 50px 40px;
        margin-left: -15px;
    }
}

@media (max-width: 1400px) {
    .vs-hero.style4 .vs-hero__title--main {
        font-size: 60px;
    }

    .vs-hero.style4 .hero-box {
        margin-left: 0;
    }
}

@media (max-width: 1300px) {
    .vs-hero.style4 .vs-hero__title--main {
        font-size: 50px;
    }

    .vs-hero.style4 .vs-hero__title--para {
        max-width: 550px;
    }

    .vs-hero.style4 .vs-hero__shape-bgImg {
        max-width: 480px;
    }

    .vs-hero.style4 .vs-hero__shape-bgImg .main-img {
        width: auto;
        height: 700px;
    }
}

.vs-hero.style4 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-hero.style4 .vs-hero__content {
        padding: 180px 0 150px;
    }

    .vs-hero.style4 .vs-hero__shape-bgImg {
        margin: 0 auto;
        position: relative;
    }
}

.vs-hero.style4 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-hero.style4 .vs-hero__title--para {
        margin: 25px auto 40px;
    }
}

.vs-hero.style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-hero.style4 .vs-hero__content {
        padding: 200px 0 150px;
    }

    .vs-hero.style4 .vs-hero__title--main {
        font-size: 40px;
    }

    .vs-hero.style4 .hero-box {
        padding: 30px;
    }
}

.vs-hero.style4 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-hero.style4 .vs-hero__content {
        padding: 150px 0 80px;
    }

    .vs-hero.style4 .vs-hero__title--main {
        font-size: 36px;
    }

    .vs-hero.style4 .hero-box {
        background-image: none !important;
    }

    .vs-hero.style4 .vs-hero__shape-bgImg {
        max-width: 300px;
    }

    .vs-hero.style4 .vs-hero__shape-bgImg .main-img {
        height: 430px;
        right: 25px;
    }
}

.vs-hero.style5 .bg-right {
    position: absolute;
    right: 0;
    width: 43.5%;
    top: 0;
    bottom: 0;
    background-color: rgba(var(--vs-theme-color4-rgb), 0.08);
}

.vs-hero.style5 .vs-hero__content {
    padding: 190px 0 200px;
    position: relative;
}

.vs-hero.style5 .vs-hero__content .ele1 {
    position: absolute;
    top: 70px;
    left: -30%;
}

.vs-hero.style5 .vs-hero__content .ele2 {
    position: absolute;
    top: 15%;
    left: 35%;
}

.vs-hero.style5 .vs-hero__content .ele3 {
    position: absolute;
    top: 5%;
    right: 10%;
}

.vs-hero.style5 .vs-hero__content .ele4 {
    position: absolute;
    bottom: 6%;
    right: 60px;
}

.vs-hero.style5 .vs-hero__content .ele5 {
    position: absolute;
    bottom: 10%;
    left: -30%;
}

.vs-hero.style5 .vs-hero__content .ele6 {
    position: absolute;
    bottom: 15%;
    right: 40%;
}

.vs-hero.style5 .vs-hero__content .ele7 {
    position: absolute;
    bottom: 31%;
    right: 60px;
}

.vs-hero.style5 .vs-hero__content .ele8 {
    position: absolute;
    top: 50%;
    left: -15%;
}

.vs-hero.style5 .vs-hero__title--main {
    color: var(--vs-title-color);
    margin-bottom: 20px;
}

.vs-hero.style5 .vs-hero__title--sub {
    font-weight: 500;
}

.vs-hero.style5 .vs-hero__title--para {
    color: var(--vs-body-color);
    text-transform: none;
    max-width: 625px;
}

.vs-hero.style5 .play-btn:after,
.vs-hero.style5 .play-btn:before {
    background-color: rgba(var(--vs-theme-color1-rgb), 0.3);
}

.vs-hero.style5 .play-btn:hover:after,
.vs-hero.style5 .play-btn:hover::before,
.vs-hero.style5 .play-btn:hover i {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.vs-hero.style5 .vs-hero__rightImg {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 30px;
}

.vs-hero.style5 .vs-hero__rightImg .rightImg {
    overflow: hidden;
    border-radius: 20px;
    display: flex;
}

.vs-hero.style5 .vs-hero__rightImg .rightImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vs-hero.style5 .vs-hero__rightImg .rightImg.main-img {
    grid-column: 1/span 2;
    height: 400px;
}

.vs-hero.style5 .vs-hero__rightImg .rightImg.sub-img {
    grid-column: 1/2;
    height: 310px;
}

.vs-hero.style5 .vs-hero__rightImg .rightImg.sub-img2 {
    grid-column: 2/3;
    height: 310px;
}

.vs-hero.style5 .vs-hero__rightImg .circle {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 38%;
    top: 41%;
    border-radius: 50%;
    background-color: var(--vs-theme-color4);
}

.vs-hero.style5 .vs-hero__rightImg .circle .circle-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--vs-white-color);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-hero.style5 .vs-hero__rightImg .circle .circle-logo img {
    width: 50px;
}

.vs-hero.style5 .vs-hero__rightImg .circle .rotating-svg {
    width: 100%;
    height: 100%;
    padding: 8px;
    animation: spin 25s linear infinite;
}

.vs-hero.style5 .vs-hero__rightImg .circle text {
    font-size: 11px;
    font-family: var(--vs-title-font);
    font-weight: bold;
    text-transform: capitalize;
    fill: var(--vs-white-color);
    letter-spacing: 1px;
    word-spacing: 2px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1400px) {
    .vs-hero.style5 .vs-hero__title--main {
        font-size: 60px;
        max-width: 675px;
    }
}

@media (max-width: 1300px) {
    .vs-hero.style5 .vs-hero__title--main {
        font-size: 50px;
        max-width: 570px;
    }

    .vs-hero.style5 .vs-hero__title--para {
        max-width: 570px;
    }
}

.vs-hero.style5 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-hero.style5 .bg-right {
        width: 0%;
    }

    .vs-hero.style5 .vs-hero__content {
        padding: 100px 0 20px;
    }

    .vs-hero.style5 .vs-hero__rightImg {
        position: relative;
        margin-bottom: 80px;
    }
}

.vs-hero.style5 {
    /* Medium devices */
}

@media (max-width: 991px) {

    .vs-hero.style5 .vs-hero__content .ele1,
    .vs-hero.style5 .vs-hero__content .ele2,
    .vs-hero.style5 .vs-hero__content .ele3,
    .vs-hero.style5 .vs-hero__content .ele4,
    .vs-hero.style5 .vs-hero__content .ele5,
    .vs-hero.style5 .vs-hero__content .ele6,
    .vs-hero.style5 .vs-hero__content .ele7 {
        display: none;
    }

    .vs-hero.style5 .vs-hero__title--main {
        max-width: none;
    }
}

.vs-hero.style5 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-hero.style5 .vs-hero__title--main {
        font-size: 40px;
    }

    .vs-hero.style5 .vs-hero__rightImg {
        display: block;
    }

    .vs-hero.style5 .vs-hero__rightImg .rightImg.main-img,
    .vs-hero.style5 .vs-hero__rightImg .rightImg.sub-img,
    .vs-hero.style5 .vs-hero__rightImg .rightImg.sub-img2 {
        margin-bottom: 20px;
        height: auto;
    }

    .vs-hero.style5 .vs-hero__rightImg .circle {
        display: none;
    }
}

/*------------------- 4.6. PopUpSearch  -------------------*/
.popup-search-box {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(var(--vs-title-color-rgb), 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 100%;
    width: 0%;
    overflow: hidden;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.4s;
    padding: 0 20px;
    transition-delay: 0.9s;
}

.popup-search-box button.searchClose {
    width: 60px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    top: 50px;
    right: 50px;
    left: auto;
    transform: translateX(-50%);
    border: none;
    background-color: var(--vs-theme-color2);
    color: var(--vs-white-color);
    font-size: 30px;
    border-radius: 50%;
    transition: all ease 0.4s;
    transition-delay: 0.5s;
}

.popup-search-box button.searchClose i {
    line-height: inherit;
    transition: all ease 1s;
    rotate: 360deg;
}

.popup-search-box button.searchClose:hover {
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color1);
}

.popup-search-box button.searchClose:hover i {
    transition: all ease 1s;
    rotate: 0deg;
}

.popup-search-box form {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: inline-block;
    padding-bottom: 40px;
    cursor: auto;
    width: 100%;
    max-width: 700px;
    transform: translateY(-50%);
    transition: transform ease 0.4s;
    padding: 0 20px;
    margin: 0 auto;
    /* Large devices */
}

@media (max-width: 1199px) {
    .popup-search-box form {
        max-width: 600px;
    }
}

.popup-search-box form input {
    font-size: 14px;
    height: 70px;
    width: 100%;
    border: 2px solid var(--vs-theme-color1);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding-left: 30px;
    color: var(--vs-white-color);
    border-radius: 50px;
    box-shadow: none;
    transition: all 0.5s ease-in-out;
}

.popup-search-box form input::placeholder {
    color: var(--vs-white-color);
}

.popup-search-box form input:focus {
    outline: none;
    border-color: var(--vs-theme-color1);
}

.popup-search-box form button {
    position: absolute;
    top: 50%;
    background-color: transparent;
    border: none;
    font-size: 20px;
    right: 45px;
    color: var(--vs-white-color);
    cursor: pointer;
    width: auto;
    height: auto;
    transition: all ease 0.4s;
    transform: scale(1.001) translateY(-50%);
}

.popup-search-box form button:hover {
    transform: scale(1.1) translateY(-50%);
    color: var(--vs-theme-color1);
}

.popup-search-box.show {
    opacity: 1;
    visibility: visible;
    width: 100%;
    transition: all ease 0.4s;
}

.popup-search-box.show button.searchClose {
    top: 40px;
    transition-delay: 0.2s;
}

.popup-search-box.show form {
    transition-delay: 0.2s;
    transform: translateY(50%);
}

/*------------------- 4.7. About Part -------------------*/
.vs-about .vs-title__main {
    max-width: 630px;
}

@media (max-width: 1300px) {
    .vs-about .vs-title__main {
        max-width: 600px;
    }
}

.vs-about .vs-title__main {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-about .vs-title__main {
        font-size: 40px;
    }
}

.vs-about__wrap {
    position: relative;
}

.vs-about__wrap .vsBtn {
    padding: 15px 55px;
}

.vs-about__wrap .ab-experience {
    width: 195px;
    height: 202px;
    background-color: var(--vs-title-color);
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    margin-top: 33px;
}

.vs-about__wrap .ab-experience h2,
.vs-about__wrap .ab-experience h1 {
    font-size: 70px;
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.vs-about__wrap .ab-experience p {
    font-size: 20px;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--vs-white-color);
    font-family: var(--vs-title-font);
}

.vs-about__wrap .ab-img {
    position: absolute;
    right: 30px;
    bottom: 0;
}

.vs-about__wrap .ab-img img {
    border-radius: 20px;
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-about__wrap .ab-img img {
        height: 280px;
        object-fit: cover;
    }
}

@media (max-width: 1300px) {
    .vs-about__wrap .ab-img {
        width: 390px;
    }
}

.vs-about__wrap .ab-img {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-about__wrap .ab-img {
        width: 290px;
    }
}

.vs-about .abImg img {
    border-radius: 20px;
}

@media (max-width: 1300px) {
    .vs-about .abImg img {
        height: 400px;
        object-fit: cover;
    }
}

.vs-about .abImg img {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-about .abImg img {
        height: 373px;
    }
}

.vs-about .abImg p {
    margin: 30px 0 0;
    text-transform: capitalize;
    font-weight: 400;
}

.vs-about {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-about .vs-title__main {
        font-size: 44px;
    }

    .vs-about__wrap .ab-img {
        right: 0;
        width: auto;
    }

    .vs-about__wrap .ab-img img {
        height: auto;
    }

    .vs-about .abImg {
        margin-top: 30px;
    }

    .vs-about .abImg img {
        width: 100%;
        height: auto;
    }
}

.vs-about {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-about .vs-title__main {
        font-size: 38px;
    }

    .vs-about__wrap .ab-img {
        width: 290px;
    }

    .vs-about__wrap .ab-img img {
        width: 100%;
        height: 280px;
    }

    .vs-about .abImg img {
        width: 100%;
        height: auto;
    }
}

.vs-about {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-about .ab-img {
        display: none;
    }
}

.vs-about.style2 .abImg {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    overflow: hidden;
}

.vs-about.style2 .abImg .para-img {
    width: 420px;
    height: 540px;
    overflow: hidden;
    border-radius: 20px;
}

.vs-about.style2 .abImg .para-img img {
    transition: none !important;
    will-change: transform;
}

.vs-about.style2 .abImg img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.vs-about.style2 .abImg.style2 {
    display: block;
    position: relative;
}

.vs-about.style2 .abImg.style2 img {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQ1IiBoZWlnaHQ9IjYzMiIgdmlld0JveD0iMCAwIDY0NSA2MzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zOTAgMjM5QzM5MCAyNTAuMDQ2IDM5OC45NTQgMjU5IDQxMCAyNTlINjI1QzYzNi4wNDYgMjU5IDY0NSAyNjcuOTU0IDY0NSAyNzlWNjEyQzY0NSA2MjMuMDQ2IDYzNi4wNDYgNjMyIDYyNSA2MzJIMjEwQzE5OC45NTQgNjMyIDE5MCA2MjMuMDQ2IDE5MCA2MTJWNTI3QzE5MCA0ODAuMDU2IDE1MS45NDQgNDQyIDEwNSA0NDJIMjBDOC45NTQzIDQ0MiAwIDQzMy4wNDYgMCA0MjJWMjBDMCA4Ljk1NDMgOC45NTQzMSAwIDIwIDBIMzcwQzM4MS4wNDYgMCAzOTAgOC45NTQzIDM5MCAyMFYyMzlaIiBmaWxsPSIjRDlEOUQ5Ii8+CjxtYXNrIGlkPSJtYXNrMF8yNzczNV8xNDMiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSI2NDUiIGhlaWdodD0iNjMyIj4KPHBhdGggZD0iTTM5MCAyMzlDMzkwIDI1MC4wNDYgMzk4Ljk1NCAyNTkgNDEwIDI1OUg2MjVDNjM2LjA0NiAyNTkgNjQ1IDI2Ny45NTQgNjQ1IDI3OVY2MTJDNjQ1IDYyMy4wNDYgNjM2LjA0NiA2MzIgNjI1IDYzMkgyMTBDMTk4Ljk1NCA2MzIgMTkwIDYyMy4wNDYgMTkwIDYxMlY1MjdDMTkwIDQ4MC4wNTYgMTUxLjk0NCA0NDIgMTA1IDQ0MkgyMEM4Ljk1NDMgNDQyIDAgNDMzLjA0NiAwIDQyMlYyMEMwIDguOTU0MyA4Ljk1NDMxIDAgMjAgMEgzNzBDMzgxLjA0NiAwIDM5MCA4Ljk1NDMgMzkwIDIwVjIzOVoiIGZpbGw9IiNEOUQ5RDkiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzI3NzM1XzE0MykiPgo8cmVjdCBvcGFjaXR5PSIwLjIiIHdpZHRoPSI2NDUiIGhlaWdodD0iNjMyIiBmaWxsPSIjMEUxRDRDIi8+CjwvZz4KPC9zdmc+Cg==);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    z-index: 1;
    position: relative;
}

.vs-about.style2 .abImg.style2 .vs-about__wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience {
    width: 225px;
    height: 230px;
    padding: 30px;
}

.vs-about.style2 .abImg.style2 .circle {
    position: absolute;
    width: 160px;
    height: 160px;
    left: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--vs-theme-color1);
}

.vs-about.style2 .abImg.style2 .circle .circle-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--vs-white-color);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-about.style2 .abImg.style2 .circle .circle-logo img {
    width: 45px;
    mask-image: none;
}

.vs-about.style2 .abImg.style2 .circle .rotating-svg {
    width: 100%;
    height: 100%;
    padding: 8px;
    animation: spin 25s linear infinite;
}

.vs-about.style2 .abImg.style2 .circle text {
    font-size: 11px;
    font-family: var(--vs-title-font);
    font-weight: bold;
    text-transform: uppercase;
    fill: var(--vs-white-color);
    letter-spacing: 0.9px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.vs-about.style2 .vs-about__wrap .ab-experience {
    margin: 0 0 27px;
}

.vs-about.style2 .vs-about__wrap .ab-experience p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.vs-about.style2 .vs-about__right .ab-Box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.vs-about.style2 .vs-about__right .ab-Box .question {
    background-color: var(--vs-img-bg-color);
    padding: 22px 10px 25px 25px;
    border-radius: 15px;
}

.vs-about.style2 .vs-about__right .ab-Box .question h3 {
    font-size: 24px;
    margin: 0 0 10px;
}

.vs-about.style2 .vs-about__right .ab-Box .question p {
    font-size: 14px;
    margin: 0;
}

.vs-about.style2 .vs-about__right .ab-Box .call-icon {
    position: relative;
    margin-right: 15px;
    margin-top: 15px;
}

.vs-about.style2 .vs-about__right .ab-Box .call-icon i {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 26px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--vs-white-color);
}

.vs-about.style2 .vs-about__right .ab-Box p.e-call {
    color: var(--vs-title-color);
    font-family: var(--vs-title-font);
    font-weight: bold;
    font-size: 20px !important;
    margin-top: 15px !important;
    transition: 0.5s;
}

.vs-about.style2 .vs-about__right .ab-Box p.e-call:hover {
    color: var(--vs-theme-color1);
}

.vs-about.style2 .vs-about__right .ab-Box p.e-call:hover span {
    color: var(--vs-body-color);
}

.vs-about.style2 .vs-about__right .ab-Box p.e-call span {
    display: block;
    color: var(--vs-body-color);
    font-size: 16px !important;
}

.vs-about.style2 .vs-about__right .ab-Box ul {
    margin: 0 0 25px;
    padding: 0 0 0 10px;
    list-style: none;
}

.vs-about.style2 .vs-about__right .ab-Box ul li {
    font-weight: 400;
    margin-bottom: 8px;
}

.vs-about.style2 .vs-about__right .ab-Box ul li i {
    color: var(--vs-theme-color1);
    margin-right: 10px;
}

.vs-about.style2 .vs-about__right .ab-Box .vsBtn {
    padding: 15px 50px;
    margin-left: 10px;
}

@media (max-width: 1400px) {
    .vs-about.style2 .vs-title__main {
        max-width: 570px;
        font-size: 45px;
    }

    .vs-about.style2 .abImg .para-img img {
        width: 100%;
        height: 540px;
        object-fit: cover;
    }

    .vs-about.style2 .vs-about__right .ab-Box p.e-call {
        font-size: 18px !important;
    }
}

@media (max-width: 1300px) {
    .vs-about.style2 .vs-title.home3 {
        margin: 0 0 30px !important;
    }

    .vs-about.style2 .vs-title__main {
        max-width: 510px;
        font-size: 40px;
    }

    .vs-about.style2 .abImg .para-img img {
        width: 100%;
        height: 540px;
        object-fit: cover;
    }

    .vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience {
        width: 200px;
        height: 200px;
        padding: 20px;
    }

    .vs-about.style2 .abImg.style2 .circle {
        width: 140px;
        height: 140px;
    }

    .vs-about.style2 .abImg.style2 .circle .circle-logo {
        width: 80px;
        height: 80px;
    }

    .vs-about.style2 .vs-about__right .ab-Box {
        gap: 10px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .question {
        padding: 22px 10px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .question h3 {
        font-size: 20px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .question p {
        font-size: 13px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .call-icon {
        margin-right: 10px;
        margin-top: 10px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .call-icon svg {
        width: 50px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .call-icon i {
        font-size: 20px;
    }

    .vs-about.style2 .vs-about__right .ab-Box p.e-call {
        font-size: 16px !important;
    }

    .vs-about.style2 .vs-about__right .ab-Box ul li {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .vs-about.style2 .vs-about__right .ab-Box ul li i {
        margin-right: 3px;
    }
}

.vs-about.style2 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-about.style2 .vs-title.home3 {
        margin: 50px 0 30px !important;
    }

    .vs-about.style2 .abImg {
        margin-bottom: 30px;
    }

    .vs-about.style2 .abImg .para-img {
        width: 100%;
    }

    .vs-about.style2 .abImg .para-img img {
        transform: none !important;
    }

    .vs-about.style2 .abImg.style2 {
        max-width: 625px;
    }

    .vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience {
        width: 220px;
        height: 220px;
        padding: 40px;
    }

    .vs-about.style2 .abImg.style2 .circle {
        width: 160px;
        height: 160px;
    }

    .vs-about.style2 .abImg.style2 .circle .circle-logo {
        width: 90px;
        height: 90px;
    }

    .vs-about.style2 .vs-about__right .ab-Box {
        gap: 20px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .question {
        padding: 30px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .question h3 {
        font-size: 24px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .question p {
        font-size: 15px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .call-icon {
        margin-right: 15px;
        margin-top: 15px;
    }

    .vs-about.style2 .vs-about__right .ab-Box .call-icon svg {
        width: auto;
    }

    .vs-about.style2 .vs-about__right .ab-Box .call-icon i {
        font-size: 22px;
    }

    .vs-about.style2 .vs-about__right .ab-Box p.e-call {
        font-size: 20px !important;
    }

    .vs-about.style2 .vs-about__right .ab-Box ul li {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .vs-about.style2 .vs-about__right .ab-Box ul li i {
        margin-right: 10px;
    }
}

.vs-about.style2 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience {
        width: 190px;
        height: 190px;
        padding: 20px;
    }

    .vs-about.style2 .abImg.style2 .circle {
        width: 140px;
        height: 140px;
    }

    .vs-about.style2 .abImg.style2 .circle .circle-logo {
        width: 80px;
        height: 80px;
    }

    .vs-about.style2 .vs-about__right .ab-Box {
        grid-template-columns: 1fr;
    }
}

.vs-about.style2 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-about.style2 .abImg {
        display: block;
    }

    .vs-about.style2 .abImg.style2 {
        max-width: 425px;
    }

    .vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience {
        width: 146px;
        height: 145px;
        padding: 10px;
        margin: 0;
    }

    .vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience h1 {
        font-size: 50px;
    }

    .vs-about.style2 .abImg.style2 .vs-about__wrap .ab-experience p {
        font-size: 16px;
        line-height: 20px;
    }

    .vs-about.style2 .abImg.style2 .circle {
        width: 110px;
        height: 110px;
    }

    .vs-about.style2 .abImg.style2 .circle .circle-logo {
        width: 55px;
        height: 55px;
    }

    .vs-about.style2 .abImg.style2 .circle .circle-logo img {
        width: 30px;
    }

    .vs-about.style2 .vs-about__wrap .ab-experience {
        margin: 20px 0 27px;
        width: 100%;
    }

    .vs-about.style2 .vs-about__wrap img {
        display: none;
    }
}

@media (max-width: 420px) {
    .vs-about.style2 .abImg.style2 {
        max-width: none;
    }

    .vs-about.style2 .abImg.style2 img {
        mask-image: none;
    }

    .vs-about.style2 .abImg.style2 .vs-about__wrap,
    .vs-about.style2 .abImg.style2 .circle {
        display: none;
    }
}

.vs-about.style4 .vs-about__wrap {
    position: initial;
}

.vs-about.style4 .vs-about__wrap .vsBtn {
    padding: 15px 55px;
}

.vs-about.style4 .vs-about__wrap .ab-experience {
    position: absolute;
    top: 50px;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: var(--vs-white-color);
    border: 10px solid var(--vs-theme-color3);
}

.vs-about.style4 .vs-about__wrap .ab-experience::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 60px;
    background-color: var(--vs-theme-color3);
    left: -1px;
    bottom: -55px;
    z-index: -1;
    transform: rotate(45deg);
}

.vs-about.style4 .vs-about__wrap .ab-experience h1,
.vs-about.style4 .vs-about__wrap .ab-experience h2 {
    font-size: 64px;
    line-height: 70px;
    color: var(--vs-theme-color3);
    background: none;
    -webkit-text-fill-color: var(--vs-theme-color3);
}

.vs-about.style4 .vs-about__wrap .ab-experience p {
    margin: 0;
    font-weight: bold;
    color: var(--vs-title-color);
}

.vs-about.style4 .vs-about__wrap img {
    position: absolute;
    right: 0;
    bottom: -50px;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE3IiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDMxNyAzODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDIwMEMwIDg5LjU0MzEgODkuNTQzIDAgMjAwIDBIMjk3QzMwOC4wNDYgMCAzMTcgOC45NTQzMSAzMTcgMjBWMzYwQzMxNyAzNzEuMDQ2IDMwOC4wNDYgMzgwIDI5NyAzODBIMjBDOC45NTQzIDM4MCAwIDM3MS4wNDYgMCAzNjBWMjAwWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L3N2Zz4K);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    z-index: 1;
}

.vs-about.style4 .vs-about__wrap:after {
    content: "";
    width: 337px;
    height: 390px;
    background: linear-gradient(145deg, var(--vs-theme-color3) 0%, rgba(255, 255, 255, 0.6) 60%);
    position: absolute;
    right: -9px;
    bottom: -50px;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM3IiBoZWlnaHQ9IjM5MCIgdmlld0JveD0iMCAwIDMzNyAzOTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDIwMEMwIDg5LjU0MzEgODkuNTQzMSAwIDIwMCAwSDMxN0MzMjguMDQ2IDAgMzM3IDguOTU0MzEgMzM3IDIwVjM5MEgwVjIwMFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yNzkwOV8xMSkiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8yNzkwOV8xMSIgeDE9IjMzNyIgeTE9IjM5OS43NSIgeDI9IjU3LjY0MTkiIHkyPSIyNS44MzI1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIG9mZnNldD0iMC41MzM1NjYiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0Q4Njk4QSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    z-index: 0;
}

.vs-about.style4 .abImg {
    position: relative;
}

.vs-about.style4 .abImg img {
    margin-left: 80px;
}

.vs-about.style4 .abImg::after {
    content: "";
    position: absolute;
    top: -30px;
    right: 80px;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background-color: rgba(var(--vs-theme-color3-rgb), 0.2);
    z-index: -1;
}

.vs-about.style4 .vs-about__right .ab-qoute {
    background-color: rgba(var(--vs-theme-color3-rgb), 0.1);
    height: 100px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    margin: 25px 0;
}

.vs-about.style4 .vs-about__right .ab-qoute p {
    color: var(--vs-title-color);
    font-family: var(--vs-title-font);
    font-weight: bold;
    border-left: 5px solid var(--vs-theme-color3);
    padding: 5px 30px;
    margin: 0;
}

.vs-about.style4 .vs-about__right .ab-Box .abTxt {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 60px;
}

.vs-about.style4 .vs-about__right .ab-Box .abTxt li {
    font-weight: 400;
    margin-bottom: 8px;
}

.vs-about.style4 .vs-about__right .ab-Box .abTxt li i {
    color: var(--vs-theme-color3);
    margin-right: 10px;
}

.vs-about.style4 .vs-about__right .ab-Box .vsBtn {
    padding: 15px 50px;
    margin-left: 10px;
}

.vs-about.style4.style5 .ele1 {
    position: absolute;
    bottom: -40px;
    right: -15%;
}

.vs-about.style4.style5 .ele2 {
    position: absolute;
    top: 42%;
    right: -60px;
}

.vs-about.style4.style5 .ele4 {
    position: absolute;
    top: -70px;
    right: -10%;
}

.vs-about.style4.style5 .ele5 {
    position: absolute;
    bottom: -30px;
    left: -12%;
}

.vs-about.style4.style5 .ele6 {
    position: absolute;
    top: -25px;
    left: -15%;
}

.vs-about.style4.style5 .vs-about__wrap img {
    margin: 0 !important;
    position: absolute;
    right: 5px;
    bottom: 35px;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUzIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI1MyAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDIzNi4xMzNDMCAxMDUuNzIgMTA1LjcyIDAgMjM2LjEzMyAwQzI0NS40NDkgMCAyNTMgNy41NTE0NiAyNTMgMTYuODY2N1YyNjBDMjUzIDI3MS4wNDYgMjQ0LjA0NiAyODAgMjMzIDI4MEgxOC42NjY3QzguMzU3MzYgMjgwIDAgMjcxLjY0MyAwIDI2MS4zMzNWMjM2LjEzM1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yODA5OF82NikiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8yODA5OF82NiIgeDE9IjI1MyIgeTE9IjE0MCIgeDI9IjAiIHkyPSIxNDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0VERjlGOSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
}

.vs-about.style4.style5 .vs-about__wrap:after {
    width: 253px;
    height: 280px;
    background: linear-gradient(90deg, #EDF9F9 100%, rgba(255, 255, 255, 0.5) 100%);
    bottom: 20px;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUzIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI1MyAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDIzNi4xMzNDMCAxMDUuNzIgMTA1LjcyIDAgMjM2LjEzMyAwQzI0NS40NDkgMCAyNTMgNy41NTE0NiAyNTMgMTYuODY2N1YyNjBDMjUzIDI3MS4wNDYgMjQ0LjA0NiAyODAgMjMzIDI4MEgxOC42NjY3QzguMzU3MzYgMjgwIDAgMjcxLjY0MyAwIDI2MS4zMzNWMjM2LjEzM1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yODA5OF82NikiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8yODA5OF82NiIgeDE9IjI1MyIgeTE9IjE0MCIgeDI9IjAiIHkyPSIxNDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0VERjlGOSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
}

.vs-about.style4.style5 .abImg .para-img3 {
    width: 530px;
    height: 650px;
    overflow: hidden;
    border-radius: 20px;
}

.vs-about.style4.style5 .abImg img {
    margin-left: auto;
    margin-right: 100px;
    transition: none !important;
    will-change: transform;
}

.vs-about.style4.style5 .abImg::after {
    content: "";
    position: absolute;
    top: 40px;
    right: 0px;
    width: 20px;
    height: 180px;
    border-radius: 20px;
    background-color: rgba(var(--vs-theme-color4-rgb), 0.9);
    z-index: 0;
}

.vs-about.style4.style5 .abImg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    width: 20px;
    height: 30px;
    border-radius: 20px;
    background-color: rgba(var(--vs-theme-color4-rgb), 0.9);
    z-index: 0;
}

.vs-about.style4.style5 .vs-about__right .ab-qoute {
    background-color: rgba(var(--vs-theme-color4-rgb), 0.1);
}

.vs-about.style4.style5 .vs-about__right .ab-qoute p {
    border-left: 5px solid var(--vs-theme-color4);
}

.vs-about.style4.style5 .vs-about__right .ab-Box .abTxt li i {
    color: var(--vs-theme-color5);
    margin-right: 10px;
}

@media (max-width: 1400px) {
    .vs-about.style4 .vs-title__main {
        max-width: 561px;
        font-size: 44px;
    }
}

@media (max-width: 1300px) {
    .vs-about.style4 .vs-title__main {
        max-width: 510px;
        font-size: 40px;
    }

    .vs-about.style4 .vs-about__wrap img {
        width: auto !important;
        height: auto !important;
    }

    .vs-about.style4 .vs-about__right .ab-Box .abTxt li {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .vs-about.style4 .vs-about__right .ab-Box .vsBtn {
        padding: 13px 45px;
    }

    .vs-about.style4 .abImg img {
        height: 575px;
        width: 420px;
    }

    .vs-about.style4 .abImg::after {
        top: -25px;
        right: 25px;
    }

    .vs-about.style4.style5 .abImg .para-img3 {
        width: 480px;
        height: 630px;
    }

    .vs-about.style4.style5 .abImg img {
        width: 100%;
        height: 630px;
        margin-right: 0;
    }
}

.vs-about.style4 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-about.style4 .vs-about__right .ab-Box .abTxt li {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .vs-about.style4 .vs-about__right .ab-Box .vsBtn {
        padding: 15px 50px;
    }

    .vs-about.style4 .abImg {
        max-width: 680px;
        margin-bottom: 100px;
        margin-top: 0;
    }

    .vs-about.style4 .abImg img {
        height: 680px;
        width: 80%;
    }

    .vs-about.style4 .abImg::after {
        top: -25px;
        right: 30px;
    }

    .vs-about.style4.style5 .abImg {
        max-width: 570px;
    }
}

.vs-about.style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-about.style4 .vs-about__wrap .ab-experience {
        width: 160px;
        height: 160px;
    }

    .vs-about.style4 .vs-about__wrap .ab-experience h1,
    .vs-about.style4 .vs-about__wrap .ab-experience h2 {
        font-size: 40px !important;
        line-height: 50px;
    }

    .vs-about.style4 .vs-about__wrap .ab-experience p {
        font-size: 14px;
        line-height: 20px;
    }

    .vs-about.style4 .vs-about__right .ab-Box .abTxt li {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .vs-about.style4 .abImg img {
        max-height: 600px;
    }

    .vs-about.style4 .abImg::after {
        top: -25px;
        right: 0px;
    }

    h1 {
        font-size: 40px !important;
    }
}

.vs-about.style4 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-about.style4 .vs-about__wrap {
        display: none;
    }

    .vs-about.style4 .vs-about__right .ab-Box .abTxt {
        grid-template-columns: 1fr;
    }

    .vs-about.style4 .vs-about__right .ab-Box .abTxt li {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .vs-about.style4 .vs-about__right .ab-qoute p {
        font-size: 14px;
        line-height: 24px;
    }

    .vs-about.style4 .abImg {
        margin-bottom: 30px;
    }

    .vs-about.style4 .abImg img {
        width: 100%;
        height: 100%;
        margin-left: 0;
    }

    .vs-about.style4 .abImg::after {
        display: none;
    }

    .vs-about.style4.style5 .abImg .para-img3,
    .vs-about.style4.style5 .abImg img {
        width: 100%;
        height: auto;
    }

    .vs-about.style4.style5 .abImg::before {
        display: none;
    }
}

.vs-choose {
    background-position: left center;
    position: relative;
    padding-bottom: 110px;
}

.vs-choose .vs-title__main {
    max-width: 715px;
}

@media (max-width: 1300px) {
    .vs-choose .vs-title__main {
        max-width: 625px;
    }
}

.vs-choose .vs-title__main {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-choose .vs-title__main {
        font-size: 40px;
    }
}

.vs-choose .vs-title__main {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-choose .vs-title__main {
        font-size: 38px;
        max-width: 510px;
    }
}

/*.vs-choose .chooseImg {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    z-index: 0;*/
/*}*/

@media (max-width: 1700px) {
    .vs-choose .chooseImg {
        width: 620px;
    }

    .vs-choose .chooseImg img {
        width: 100%;
        height: 1100px;
        object-fit: cover;
    }
}

@media (max-width: 1500px) {
    .vs-choose .chooseImg {
        width: 520px;
    }
}

@media (max-width: 1300px) {
    .vs-choose .chooseImg {
        width: 470px;
    }
}

.vs-choose .chooseImg {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-choose .chooseImg {
        width: 400px;
    }
}

.vs-choose__wrap {
    position: relative;
    z-index: 1;
}

.vs-choose__wrap .choose-content {
    display: flex;
    align-items: center;
    background: rgba(var(--vs-theme-color1-rgb), 0.2);
    border-radius: 15px;
    border-right: 2px solid var(--vs-theme-color1);
    border-left: 2px solid var(--vs-theme-color1);
    padding: 20px;
    gap: 20px;
    max-width: 665px;
    margin-bottom: 20px;
    transition: all 0.5s ease-in-out;
}

.vs-choose__wrap .choose-content:last-child {
    margin: 0;
}

.vs-choose__wrap .choose-content .choose-icon {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-choose__wrap .choose-content .choose-icon {
        width: 80px;
        height: 70px;
    }
}

.vs-choose__wrap .choose-content .choose-txt h3 {
    font-size: 24px;
    color: var(--vs-white-color);
    font-weight: bold;
}

.vs-choose__wrap .choose-content .choose-txt p {
    color: var(--vs-white-color);
    max-width: 500px;
    margin: 0;
}

.vs-choose__wrap .choose-content .choose-txt {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-choose__wrap .choose-content .choose-txt h3 {
        font-size: 20px;
    }

    .vs-choose__wrap .choose-content .choose-txt p {
        font-size: 13px;
        line-height: 20px;
    }
}

.vs-choose__wrap .choose-content:hover {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    border-color: var(--vs-white-color);
}

.vs-choose__wrap .choose-content:hover .choose-icon {
    background-color: var(--vs-title-color);
}

.vs-choose .vs-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1480px;
    height: 245px;
    gap: 30px;
    margin: 0 auto;
    border-radius: 20px;
    z-index: 1;
    position: relative;
    bottom: -120px;
}

@media (max-width: 1600px) {
    .vs-choose .vs-counter {
        width: auto;
        margin: 0 20px;
    }
}

.vs-choose .vs-counter .counter-body {
    position: relative;
}

.vs-choose .vs-counter .counter-body::before,
.vs-choose .vs-counter .counter-body::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.vs-choose .vs-counter .counter-body::before {
    top: 10px;
    right: 10px;
    border-top: 2px solid var(--vs-white-color);
    border-right: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-choose .vs-counter .counter-body::after {
    right: 10px;
    bottom: 10px;
    border-right: 2px solid var(--vs-white-color);
    border-bottom: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-choose .vs-counter .counter-body:hover::before,
.vs-choose .vs-counter .counter-body:hover::after {
    opacity: 1;
    visibility: visible;
}

.vs-choose .vs-counter .counter-body:hover::before {
    top: 0;
    right: 0;
}

.vs-choose .vs-counter .counter-body:hover::after {
    right: 0;
    bottom: 0;
}

.vs-choose .vs-counter .counter-txt {
    background-color: rgba(var(--vs-title-color-rgb), 0.2);
    text-align: center;
    width: 308px;
    padding: 20px;
    position: relative;
}

.vs-choose .vs-counter .counter-txt h2 {
    color: var(--vs-white-color);
}

.vs-choose .vs-counter .counter-txt h3 {
    font-size: 24px;
    color: var(--vs-white-color);
}

@media (max-width: 1400px) {
    .vs-choose .vs-counter .counter-txt {
        width: 250px;
        padding: 10px;
    }

    .vs-choose .vs-counter .counter-txt h3 {
        font-size: 20px;
    }
}

.vs-choose .vs-counter .counter-txt {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-choose .vs-counter .counter-txt {
        width: 200px;
    }

    .vs-choose .vs-counter .counter-txt h3 {
        font-size: 16px;
    }
}

.vs-choose .vs-counter .counter-txt::before,
.vs-choose .vs-counter .counter-txt::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.vs-choose .vs-counter .counter-txt::before {
    top: 10px;
    left: 10px;
    border-top: 2px solid var(--vs-white-color);
    border-left: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-choose .vs-counter .counter-txt::after {
    left: 10px;
    bottom: 10px;
    border-left: 2px solid var(--vs-white-color);
    border-bottom: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-choose .vs-counter .counter-txt:hover::before,
.vs-choose .vs-counter .counter-txt:hover::after {
    opacity: 1;
    visibility: visible;
}

.vs-choose .vs-counter .counter-txt:hover::before {
    top: 0;
    left: 0;
}

.vs-choose .vs-counter .counter-txt:hover::after {
    left: 0;
    bottom: 0;
}

.vs-choose {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-choose__wrap .choose-content {
        max-width: none;
    }

    .vs-choose .chooseImg {
        position: relative;
        width: 100%;
        margin-top: 40px;
    }

    .vs-choose .chooseImg img {
        width: 100%;
        height: auto;
    }

    .vs-choose .vs-counter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        position: absolute;
        height: auto;
        left: 0;
        right: 0;
        padding: 30px;
    }

    .vs-choose .vs-counter .counter-txt {
        width: auto;
        padding: 20px;
    }

    .vs-choose .vs-counter .counter-txt h3 {
        font-size: 20px;
    }
}

.vs-choose {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-choose .vs-title__main {
        font-size: 34px;
    }

    .vs-choose__wrap .choose-content .choose-txt p {
        max-width: 345px;
        height: 40px;
        overflow: hidden;
    }

    .vs-choose .vs-counter .counter-txt {
        padding: 20px 10px;
    }

    .vs-choose .vs-counter .counter-txt h3 {
        font-size: 20px;
    }
}

.vs-choose {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-choose__wrap .choose-content {
        display: block;
    }

    .vs-choose__wrap .choose-content .choose-txt {
        margin-top: 20px;
    }

    .vs-choose__wrap .choose-content .choose-txt p {
        max-width: none;
        height: auto;
    }

    .vs-choose .chooseImg {
        display: none;
    }

    .vs-choose .vs-counter {
        position: relative;
        grid-template-columns: 1fr;
        padding: 25px;
    }
}

.vs-choose.style2 .chooseImg {
    position: relative;
    top: 0;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    height: 744px;
}

.vs-choose.style2 .chooseImg img {
    border-radius: 20px;
    width: 100%;
    height: 744px;
    object-fit: cover;
    transition: none !important;
    will-change: transform;
}

.vs-choose.style2 .patient {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(var(--vs-title-color-rgb), 0.2);
    padding-top: 40px;
    position: relative;
}

.vs-choose.style2 .patient::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 250px;
    border-top: 2px solid var(--vs-theme-color1);
}

.vs-choose.style2 .vsBtn {
    padding: 15px 50px;
}

.vs-choose.style2 .patient-box {
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.vs-choose.style2 .patient-box .patient-txt {
    margin-left: 20px;
}

.vs-choose.style2 .patient-box .patient-txt h3 {
    font-size: 20px;
    margin: 0;
}

.vs-choose.style2 .patient-box .patient-txt p {
    text-transform: capitalize;
}

.vs-choose.style2 .chose-bottom {
    display: flex;
    align-items: center;
    margin-top: 35px;
    max-width: 1100px;
    margin-left: -345px;
    border-radius: 20px;
    border: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
    overflow: hidden;
}

.vs-choose.style2 .chose-bottom .choose-box {
    background-color: var(--vs-img-bg-color);
    padding: 37px 40px;
    transition: all 0.5s ease-in-out;
}

.vs-choose.style2 .chose-bottom .choose-box:nth-child(2) {
    border-left: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
    border-right: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
}

.vs-choose.style2 .chose-bottom .choose-box .choose-icon span {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: var(--vs-white-color);
    color: var(--vs-theme-color1);
    border: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
    border-radius: 10px;
    font-family: var(--vs-title-font);
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
}

.vs-choose.style2 .chose-bottom .choose-box .choose-txt {
    margin-top: 25px;
}

.vs-choose.style2 .chose-bottom .choose-box .choose-txt h3 {
    font-size: 20px;
    margin: 0 0 15px;
    transition: all 0.5s ease-in-out;
}

.vs-choose.style2 .chose-bottom .choose-box .choose-txt h3:hover {
    color: var(--vs-theme-color1);
}

.vs-choose.style2 .chose-bottom .choose-box .choose-txt p {
    margin: 0;
}

.vs-choose.style2 .chose-bottom .choose-box:hover {
    background-color: var(--vs-white-color);
}

.vs-choose.style2 .chose-bottom .choose-box:hover .choose-icon span {
    background: var(--vs-img-bg-color);
}

@media (max-width: 1300px) {
    .vs-choose.style2 .vs-title__main {
        max-width: 625px;
        font-size: 42px;
    }

    .vs-choose.style2 .chose-bottom .choose-box {
        padding: 33px 35px;
    }

    .vs-choose.style2 .chose-bottom .choose-box .choose-txt h3 {
        font-size: 19px;
    }
}

.vs-choose.style2 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-choose.style2 .vs-title__main {
        max-width: 535px;
        font-size: 40px;
    }

    .vs-choose.style2 .chooseImg {
        height: auto;
    }

    .vs-choose.style2 .chooseImg img {
        height: auto;
        transform: none !important;
    }

    .vs-choose.style2 .chose-bottom {
        margin-left: -404px;
    }

    .vs-choose.style2 .chose-bottom .choose-box {
        padding: 20px;
    }

    .vs-choose.style2 .chose-bottom .choose-box .choose-txt {
        margin-top: 20px;
    }

    .vs-choose.style2 .chose-bottom .choose-box .choose-txt h3 {
        font-size: 20px;
    }
}

.vs-choose.style2 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-choose.style2 .chooseImg {
        margin-bottom: 30px;
    }

    .vs-choose.style2 .chose-bottom {
        margin-left: 0;
    }
}

.vs-choose.style2 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-choose.style2 .vs-title__main {
        font-size: 34px;
    }

    .vs-choose.style2 .chose-bottom {
        display: block;
    }

    .vs-choose.style2 .chose-bottom .choose-box:nth-child(2) {
        border-top: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
        border-bottom: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
        border-left: none;
        border-right: none;
    }
}

.vs-choose.style2 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-choose.style2 .patient-box {
        display: none;
    }
}

/*------------------- 4.8. Service Part -------------------*/
.vs-service .vs-title__main {
    max-width: 630px;
    margin: 0 auto;
}

@media (max-width: 1300px) {
    .vs-service .vs-title__main {
        max-width: 603px;
        font-size: 45px;
    }
}

.vs-service .swiper-wrapper {
    padding-bottom: 120px;
}

.vs-service__wrap {
    position: relative;
    background-color: var(--vs-white-color);
    padding: 30px;
    border-radius: 20px;
    transition: 0.5s;
}

.vs-service__wrap:hover {
    background-color: var(--vs-title-color);
}

.vs-service__wrap:hover .vs-service__icon {
    margin-bottom: 33px;
}

.vs-service__wrap:hover .vs-service__icon .ser_icon {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 70%);
}

.vs-service__wrap:hover .vs-service__txt h3,
.vs-service__wrap:hover .vs-service__txt h2 {
    color: var(--vs-white-color);
}

.vs-service__wrap:hover .vs-service__txt p {
    color: var(--vs-white-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.vs-service__icon {
    margin-bottom: 33px;
}

.vs-service__icon .ser_icon {
    width: 120px;
    height: 120px;
    background: var(--vs-theme-color1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: 0.5s;
}

.vs-service__icon .ser_number {
    font-family: var(--vs-title-font);
    font-size: 40px;
    color: rgba(var(--vs-theme-color1-rgb), 0.2);
    position: absolute;
    top: 30px;
    right: 30px;
    font-weight: bold;
}

.vs-service__txt h3,
.vs-service__txt h2 {
    display: inline;
    font-size: 30px;
    transition: 0.5s;
    position: relative;
    display: inline;
    background-image: linear-gradient(var(--vs-white-color), var(--vs-white-color));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
}

.vs-service__txt h3:hover,
.vs-service__txt h2:hover {
    background-size: 100% 2px;
}

.vs-service__txt p {
    margin: 20px 0 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(var(--vs-title-color-rgb), 0.07);
    transition: 0.5s;
}

.vs-service__txt .ser_btn {
    display: flex;
    width: 145px;
    height: 40px;
    justify-content: center;
    align-items: center;
    background: var(--vs-theme-color1);
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-family: var(--vs-title-font);
    font-weight: bold;
    border-radius: 50px;
    transition: 0.5s;
}

.vs-service__txt .ser_btn:hover {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-service.services-page .vs-service__wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vs-service.services-page .vs-service__txt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vs-service.services-page .vs-service__txt p {
    flex-grow: 1;
}

.vs-service {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service__wrap {
        padding: 30px 20px;
    }

    .vs-service__icon .ser_icon {
        width: 90px;
        height: 90px;
    }

    .vs-service__icon .ser_icon img {
        width: 50px;
    }

    .vs-service__txt h3 {
        font-size: 24px;
    }

    .vs-service__txt p {
        font-size: 14px;
    }
}

.vs-service {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-service .vs-title__main {
        font-size: 38px;
    }

    .vs-service__wrap {
        padding: 30px;
    }

    .vs-service__txt h3 {
        font-size: 30px;
    }

    .vs-service__txt p {
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    .vs-service__icon .ser_icon {
        width: 70px;
        height: 70px;
    }

    .vs-service__icon .ser_icon img {
        width: 40px;
    }

    .vs-service__txt h3 {
        font-size: 24px;
    }

    .vs-service__txt p {
        font-size: 16px;
    }
}

.vs-service.style2 .services-tab {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

.vs-service.style2 .services-tab .services-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vs-service.style2 .services-tab .services-nav .nav-item {
    background: var(--vs-white-color);
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.2);
    border-radius: 20px;
    padding: 25px 35px;
    height: 80px;
    font-size: 24px;
    font-family: var(--vs-title-font);
    font-weight: bold;
    text-align: left;
    color: var(--vs-title-color);
    cursor: pointer;
    transition: all 0.7s ease;
}

.vs-service.style2 .services-tab .services-nav .nav-item .num {
    margin-right: 8px;
}

.vs-service.style2 .services-tab .services-nav .nav-item:hover,
.vs-service.style2 .services-tab .services-nav .nav-item.active {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    color: var(--vs-white-color);
}

.vs-service.style2 .services-tab .services-content {
    flex-grow: 1;
}

.vs-service.style2 .services-tab .services-content .vs-service__wrap {
    background-color: var(--vs-title-color);
}

.vs-service.style2 .services-tab .services-content .vs-service__icon .ser_icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-service.style2 .services-tab .services-content .vs-service__icon .ser_icon img {
    width: 40px;
}

.vs-service.style2 .services-tab .services-content .vs-service__txt p {
    margin-bottom: 40px;
    padding-bottom: 30px;
    max-width: 335px;
    color: var(--vs-white-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.vs-service.style2 .services-tab .services-content .vs-service__txt .ser_btn {
    height: 60px;
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    transition: 0.7s;
}

.vs-service.style2 .services-tab .services-content .vs-service__txt .ser_btn:hover {
    background: var(--vs-theme-color1);
}

.vs-service.style2 .services-tab .services-content .content-panel {
    display: none;
    gap: 30px;
    height: 100%;
}

.vs-service.style2 .services-tab .services-content .content-panel.active {
    display: flex;
}

.vs-service.style2 .services-tab .services-content .image-box img {
    width: 420px;
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
}

@media (max-width: 1300px) {
    .vs-service.style2 .services-tab {
        gap: 20px;
    }

    .vs-service.style2 .services-tab .services-nav .nav-item {
        padding: 25px;
        font-size: 22px;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__icon {
        margin-bottom: 25px;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__txt p {
        font-size: 15px;
        margin-bottom: 30px;
        padding-bottom: 25px;
    }

    .vs-service.style2 .services-tab .services-content .image-box {
        border-radius: 20px;
        overflow: hidden;
    }
}

.vs-service.style2 .services-tab {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service.style2 .services-tab .services-nav .nav-item {
        padding: 22px 25px;
        font-size: 18px;
        height: 70px;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__icon .ser_icon {
        width: 70px;
        height: 70px;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__txt p {
        font-size: 14px;
        margin-bottom: 28px;
        padding-bottom: 22px;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__txt p span {
        display: none;
    }

    .vs-service.style2 .services-tab .services-content .image-box img {
        height: 430px;
    }
}

.vs-service.style2 .services-tab {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-service.style2 .services-tab {
        grid-template-columns: 1fr;
    }

    .vs-service.style2 .services-tab .services-nav .nav-item {
        font-size: 22px;
        height: 80px;
    }
}

.vs-service.style2 .services-tab {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-service.style2 .services-tab {
        grid-template-columns: 1fr;
    }

    .vs-service.style2 .services-tab .services-nav .nav-item {
        font-size: 20px;
        height: 70px;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__txt p {
        max-width: none;
    }

    .vs-service.style2 .services-tab .services-content .vs-service__txt p span {
        display: inline;
    }

    .vs-service.style2 .services-tab .services-content .image-box {
        margin-top: 30px;
    }

    .vs-service.style2 .services-tab .services-content .image-box img {
        width: 100%;
        height: auto;
    }

    .vs-service.style2 .services-tab .services-content .content-panel.active {
        display: block;
    }
}

@media (max-width: 400px) {
    .vs-service.style2 .services-tab .services-nav .nav-item {
        font-size: 17px;
        height: 50px;
        padding: 10px 20px;
    }
}

.vs-service.style3 .vs-service__wrap {
    padding: 0;
}

.vs-service.style3 .vs-service__wrap:hover .vs-service__img .serImg {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.vs-service.style3 .vs-service__wrap:hover .ser_icon {
    background: var(--vs-theme-color2);
}

.vs-service.style3 .vs-service__img {
    position: relative;
    background-color: var(--vs-img-bg-color);
    margin-bottom: 33px;
}

.vs-service.style3 .vs-service__img .serImg {
    border-radius: 20px;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDQyMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zMDAgMEMzMTEuMDQ2IDAgMzIwIDguOTU0MzEgMzIwIDIwVjgwQzMyMCA5MS4wNDU3IDMyOC45NTQgMTAwIDM0MCAxMDBINDAwQzQxMS4wNDYgMTAwIDQyMCAxMDguOTU0IDQyMCAxMjBWMzAwSDBWMjBDMCA4Ljk1NDMgOC45NTQzMSAwIDIwIDBIMzAwWiIgZmlsbD0id2hpdGUiLz4KPG1hc2sgaWQ9Im1hc2swXzI3Nzc0XzIxMiIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjQyMCIgaGVpZ2h0PSIzMDAiPgo8cGF0aCBkPSJNMzAwIDBDMzExLjA0NiAwIDMyMCA4Ljk1NDMxIDMyMCAyMFY4MEMzMjAgOTEuMDQ1NyAzMjguOTU0IDEwMCAzNDAgMTAwSDQwMEM0MTEuMDQ2IDEwMCA0MjAgMTA4Ljk1NCA0MjAgMTIwVjMwMEgwVjIwQzAgOC45NTQzIDguOTU0MzEgMCAyMCAwSDMwMFoiIGZpbGw9IndoaXRlIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yNzc3NF8yMTIpIj4KPHJlY3Qgd2lkdGg9IjQyMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMwRTFENEMiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CjwvZz4KPC9zdmc+);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    z-index: 1;
    position: relative;
}

.vs-service.style3 .vs-service__img .ser_icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: var(--vs-theme-color1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: 0.5s;
}

.vs-service.style3 .vs-service__txt {
    padding: 0 30px 40px;
}

.vs-service.style3 .vs-service__txt h3 {
    display: inline;
}

.vs-service.style3 .vs-service__txt .ser_btn {
    margin-top: 20px;
}

@media (max-width: 1300px) {
    .vs-service.style3 .vs-service__img .ser_icon {
        width: 75px;
        height: 75px;
    }
}

.vs-service.style3 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service.style3 .vs-service__img .serImg {
        width: 100%;
    }

    .vs-service.style3 .vs-service__img .ser_icon {
        width: 90px;
        height: 90px;
    }
}

.vs-service.style3 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-service.style3 .vs-title__main {
        max-width: 520px;
        font-size: 40px;
    }

    .vs-service.style3 .vs-service__img .ser_icon {
        width: 70px;
        height: 70px;
    }
}

.vs-service.style3 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-service.style3 .vs-service__img .ser_icon {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 500px) {
    .vs-service.style3 .vs-service__img .ser_icon {
        width: 85px;
        height: 85px;
    }
}

@media (max-width: 420px) {
    .vs-service.style3 .vs-service__img .ser_icon {
        width: 65px;
        height: 65px;
    }
}

.vs-service--style4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-bottom: 100px;
}

.vs-service--style4 .vs-service__wrap {
    position: relative;
    background-color: var(--vs-white-color);
    padding: 30px;
    border-radius: 20px;
    transition: 0.7s;
}

.vs-service--style4 .vs-service__wrap:hover {
    background-color: rgba(var(--vs-theme-color3-rgb), 0.1);
}

.vs-service--style4 .vs-service__wrap:hover .vs-service__icon {
    margin-bottom: 25px;
}

.vs-service--style4 .vs-service__wrap:hover .vs-service__icon .ser_icon {
    background: var(--vs-white-color);
}

.vs-service--style4 .vs-service__wrap:hover .vs-service__txt p {
    color: var(--vs-title-color);
    border-color: rgba(var(--vs-title-color-rgb), 0.07);
}

.vs-service--style4 .vs-service__wrap:hover .vs-service__txt .ser_btn {
    background: var(--vs-white-color);
    color: var(--vs-title-color);
}

.vs-service--style4 .vs-service__icon {
    margin-bottom: 25px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
}

.vs-service--style4 .vs-service__icon .ser_icon {
    width: 80px;
    height: 80px;
    background: rgba(var(--vs-theme-color3-rgb), 0.1);
}

.vs-service--style4 .vs-service__icon h3 {
    margin: 0;
}

.vs-service--style4 .vs-service__txt p {
    border-bottom: 1px dashed rgba(var(--vs-title-color-rgb), 0.07);
}

.vs-service--style4 .vs-service__txt .ser_btn {
    align-items: center;
    background: var(--vs-theme-color3);
}

.vs-service--style4 .vs-service__btn {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    right: 0;
    width: 540px;
    height: 60px;
    margin: 0 auto 110px;
    background: var(--vs-white-color);
    border: 1px dashed rgba(var(--vs-title-color-rgb), 0.1);
    padding-left: 40px;
    border-radius: 50px;
}

.vs-service--style4 .vs-service__btn p {
    color: var(--vs-title-color);
    margin: 0;
}

.vs-service--style4 .vs-service__btn .vsBtn {
    padding: 15px 40px;
    background-color: var(--vs-theme-color3);
    text-transform: capitalize;
    text-decoration: none;
    border: none;
    border-radius: 50px;
}

@media (max-width: 1400px) {
    .vs-service--style4 .vs-service__wrap {
        padding: 30px 25px;
    }

    .vs-service--style4 .vs-service__icon h3 {
        font-size: 26px;
    }
}

@media (max-width: 1300px) {
    .vs-service--style4 .vs-service__txt p span {
        display: none;
    }
}

.vs-service--style4 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service--style4 .vs-service__icon {
        grid-template-columns: 1fr;
    }
}

.vs-service--style4 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-service--style4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vs-service--style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-service--style4 {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .vs-service--style4 .vs-service__btn {
        display: none;
    }

    .vs-service--style4 .vs-service__txt p span {
        display: inline;
    }
}

.vs-service--style5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-bottom: 100px;
}

.vs-service--style5 .vs-service__wrap {
    position: relative;
    background-color: rgba(var(--vs-theme-color4-rgb), 0.1);
    padding: 20px;
    border-radius: 20px;
    transition: 0.7s;
}

.vs-service--style5 .vs-service__wrap:hover {
    background-color: var(--vs-theme-color5);
}

.vs-service--style5 .vs-service__wrap:hover .vs-service__img .ser_icon {
    background: var(--vs-theme-color4);
}

.vs-service--style5 .vs-service__wrap:hover .vs-service__txt p,
.vs-service--style5 .vs-service__wrap:hover .vs-service__txt h3 {
    color: var(--vs-white-color);
    text-decoration: none;
    border: none;
}

.vs-service--style5 .vs-service__wrap:hover .vs-service__txt .ser_btn {
    background: var(--vs-theme-color4);
}

.vs-service--style5 .vs-service__wrap:hover .vs-service__txt .ser_btn::before {
    background: var(--vs-white-color);
}

.vs-service--style5 .vs-service__wrap:hover .vs-service__txt .ser_btn i {
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
}

.vs-service--style5 .vs-service__img {
    position: relative;
}

.vs-service--style5 .vs-service__img img {
    border-radius: 20px;
}

.vs-service--style5 .vs-service__img .ser_icon {
    width: 70px;
    height: 70px;
    background: var(--vs-theme-color5);
    border: 3px solid var(--vs-white-color);
    border-radius: 10px;
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.vs-service--style5 .vs-service__txt {
    padding: 20px;
}

.vs-service--style5 .vs-service__txt p {
    margin: 0 0 5px;
    border: none;
    transition: all 0.5s ease-in-out;
}

.vs-service--style5 .vs-service__txt h3 {
    font-size: 24px;
    border: none;
    margin-bottom: 15px;
    transition: all 0.5s ease-in-out;
}

.vs-service--style5 .vs-service__txt .ser_btn {
    font-size: 18px;
    width: auto;
    height: 55px;
    background: var(--vs-theme-color5);
    justify-content: initial;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.vs-service--style5 .vs-service__txt .ser_btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 30px;
    width: 60px;
    height: 100%;
    background: var(--vs-theme-color4);
    transform: skewX(-30deg);
    transform-origin: right;
    transition: all 0.5s ease-in-out;
}

.vs-service--style5 .vs-service__txt .ser_btn i {
    width: 75px;
    background-color: var(--vs-theme-color4);
    color: var(--vs-white-color);
    text-align: center;
    height: 55px;
    line-height: 55px;
    font-size: 20px;
    position: absolute;
    right: 0;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    transition: all 0.5s ease-in-out;
}

.vs-service--style5 .vs-service__btn {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    right: 0;
    width: 540px;
    height: 60px;
    margin: 0 auto 110px;
    background: rgba(var(--vs-theme-color4-rgb), 0.1);
    border: 1px dashed rgba(var(--vs-theme-color4-rgb), 0.2);
    padding-left: 40px;
    border-radius: 50px;
}

.vs-service--style5 .vs-service__btn p {
    color: var(--vs-title-color);
    margin: 0;
}

.vs-service--style5 .vs-service__btn .vsBtn {
    padding: 15px 40px;
    background-color: var(--vs-theme-color5);
    text-transform: capitalize;
    text-decoration: none;
    border: none;
    border-radius: 50px;
}

.vs-service--style5 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service--style5 .vs-service__txt h3 {
        font-size: 22px;
    }
}

.vs-service--style5 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-service--style5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vs-service--style5 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-service--style5 {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .vs-service--style5 .vs-service__btn {
        display: none;
    }

    .vs-service--style5 .vs-service__img img {
        width: 100%;
    }

    .vs-service--style5 .vs-service__img .ser_icon img {
        width: auto;
    }
}

.vs-service.service-page .vs-service__wrap {
    background-color: var(--vs-img-bg-color);
    margin-bottom: 30px;
    padding: 40px;
}

.vs-service.service-page .vs-service__wrap:hover {
    background-color: var(--vs-title-color);
}

.vs-service.service-page .vs-service__icon .ser_number {
    top: 40px;
}

.vs-service.service-page {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service.service-page .vs-service__wrap {
        padding: 30px;
    }

    .vs-service.service-page h2 {
        font-size: 24px;
    }
}

.vs-service.service-Dpage .content-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.vs-service.service-Dpage .content-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeUp 0.5s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vs-service.service-Dpage .vs-service__wrap {
    background-color: var(--vs-img-bg-color);
    padding: 0;
    border-bottom: 4px solid var(--vs-theme-color2);
}

.vs-service.service-Dpage .vs-service__wrap:hover {
    background-color: var(--vs-img-bg-color);
}

.vs-service.service-Dpage .vs-service__Dtxt {
    padding: 40px;
}

.vs-service.service-Dpage .vs-service__Dtxt h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.vs-service.service-Dpage .vs-service__Dtxt svg {
    margin-bottom: 35px;
}

.vs-service.service-Dpage .vs-service__Dtxt h3 {
    margin: 30px 0 20px;
}

.vs-service.service-Dpage .vs-service__Dtxt ul {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.vs-service.service-Dpage .vs-service__Dtxt ul li {
    margin-bottom: 10px;
}

.vs-service.service-Dpage .vs-service__Dtxt ul li i {
    color: var(--vs-theme-color1);
    margin-right: 6px;
    font-size: 18px;
}

.vs-service.service-Dpage .vs-service__Dtxt .image-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.vs-service.service-Dpage .vs-service__Dtxt .image-box img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 20px;
}

@media (max-width: 1300px) {
    .vs-service.service-Dpage .vs-service__Dtxt ul li {
        font-size: 14px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt ul li i {
        font-size: 16px;
    }
}

.vs-service.service-Dpage {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-service.service-Dpage .vs-service__Dtxt {
        padding: 30px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt ul {
        grid-template-columns: 1fr;
    }

    .vs-service.service-Dpage .vs-service__Dtxt ul li {
        font-size: 16px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt ul li i {
        font-size: 18px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt h2 {
        font-size: 36px;
    }
}

.vs-service.service-Dpage {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-service.service-Dpage .vs-service__Dtxt {
        padding: 20px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt ul li {
        font-size: 14px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt ul li i {
        font-size: 16px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt h2 {
        font-size: 30px;
    }

    .vs-service.service-Dpage .vs-service__Dtxt .image-box {
        grid-template-columns: 1fr;
    }
}

.vs-process .vs-title__main {
    max-width: 525px;
}

.vs-process p {
    max-width: 410px;
}

.vs-process_navigation {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 50px;
    background: var(--vs-white-color);
    border-radius: 50px;
}

.vs-process_navigation .processNav {
    margin-left: 0;
}

.vs-process_navigation .processNav .swiper-slide {
    position: relative;
    border-radius: 60px;
    overflow: hidden;
    background: transparent;
    width: 210px !important;
    height: 80px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vs-title-font);
    color: var(--vs-title-color);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

.vs-process_navigation .processNav .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--vs-theme-color1-rgb), 0.2);
    border-radius: inherit;
    transform: translateX(-102%);
    transition: transform 0.6s;
    z-index: -1;
}

.vs-process_navigation .processNav .swiper-slide-thumb-active::after {
    transform: translateX(0);
}

.vs-process_navigation .vs-navigation {
    height: 80px;
    border: none;
    background-color: var(--vs-white-color);
    top: 0;
    right: 15px;
}

.vs-process_navigation .vs-navigation .swiper-prevBtn,
.vs-process_navigation .vs-navigation .swiper-nextBtn {
    --circle-size: 60px;
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.vs-process_navigation .vs-navigation .swiper-prevBtn:hover,
.vs-process_navigation .vs-navigation .swiper-nextBtn:hover {
    background-color: var(--vs-title-color);
}

.vs-process__wrap .swiper-slide.swiper-slide-active .process-box .vs-service__wrap .vs-service__icon .ser_icon {
    background: var(--vs-theme-color1);
}

.vs-process__wrap .process-box {
    display: flex;
    gap: 40px;
}

.vs-process__wrap .process-box .process-img {
    width: 310px;
    height: 310px;
    object-fit: cover;
    border-radius: 22px;
    overflow: hidden;
}

.vs-process__wrap .process-box .process-img img {
    width: 100%;
    border-radius: 22px;
}

.vs-process__wrap .process-box .vs-service__wrap {
    padding: 0;
    border-radius: none;
    background-color: transparent;
}

.vs-process__wrap .process-box .vs-service__wrap .vs-service__icon .ser_icon {
    background: var(--vs-title-color);
}

.vs-process__wrap .process-box .vs-service__wrap .vs-service__txt h3:hover {
    color: var(--vs-theme-color1) !important;
}

.vs-process__wrap .process-box .vs-service__wrap:hover {
    background-color: transparent;
}

.vs-process__wrap .process-box .vs-service__wrap:hover .vs-service__icon .ser_icon {
    background: var(--vs-theme-color1);
}

.vs-process__wrap .process-box .vs-service__wrap:hover .vs-service__txt h3 {
    background-size: 0;
    color: var(--vs-title-color);
}

.vs-process__wrap .process-box .vs-service__wrap:hover .vs-service__txt p {
    color: var(--vs-title-color);
    border-bottom: none;
}

.vs-process__wrap .process-box .vs-service__icon .ser_icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
}

.vs-process__wrap .process-box .vs-service__icon .ser_number {
    top: 20px;
}

.vs-process__wrap .process-box .vs-service__txt h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.vs-process__wrap .process-box .vs-service__txt p {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    max-width: 290px;
}

@media (max-width: 1300px) {
    .vs-process__wrap .process-box {
        gap: 20px;
    }

    .vs-process__wrap .process-box .process-img img {
        width: 100%;
        height: 275px;
        object-fit: cover;
    }

    .vs-process__wrap .process-box .vs-service__icon {
        margin-bottom: 20px;
    }

    .vs-process__wrap .process-box .vs-service__txt p {
        font-size: 14px;
    }
}

.vs-process {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-process .vs-title__main {
        max-width: 475px;
        font-size: 44px;
    }

    .vs-process .vs-process_navigation .processNav .swiper-slide {
        width: 140px !important;
    }

    .vs-process .vs-process__wrap .process-box .process-img {
        height: auto;
    }

    .vs-process .vs-process__wrap .process-box .process-img img {
        width: 100%;
        height: 235px;
        border-radius: 22px;
    }

    .vs-process .vs-process__wrap .process-box .vs-service__txt h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .vs-process .vs-process__wrap .process-box .vs-service__txt p {
        font-size: 15px;
        height: 100px;
        overflow: hidden;
    }
}

.vs-process {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-process p {
        display: none;
    }

    .vs-process .vs-process_navigation .processNav .swiper-slide {
        width: 100px !important;
        height: 60px;
    }

    .vs-process .vs-process_navigation .vs-navigation {
        height: 60px;
        right: 0px;
    }

    .vs-process .vs-process_navigation .vs-navigation .swiper-prevBtn,
    .vs-process .vs-process_navigation .vs-navigation .swiper-nextBtn {
        --circle-size: 50px;
    }

    .vs-process .vs-process__wrap .process-box .process-img img {
        height: 240px;
    }

    .vs-process .vs-process__wrap .process-box .vs-service__txt h3 {
        font-size: 22px;
    }

    .vs-process .vs-process__wrap .process-box .vs-service__txt p {
        display: block;
        max-width: 320px;
    }
}

.vs-process {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-process .vs-title__main {
        max-width: 525px;
    }
}

.vs-process {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-process .vs-process_navigation {
        border-radius: 30px;
    }

    .vs-process .vs-process_navigation .processNav {
        margin-left: auto;
    }

    .vs-process .vs-process_navigation .processNav .swiper-wrapper {
        flex-wrap: wrap;
    }

    .vs-process .vs-process_navigation .processNav .swiper-slide {
        width: 140px !important;
        margin: 0 auto;
    }

    .vs-process .vs-process__wrap .vs-service__wrap {
        padding: 30px 20px 0;
    }

    .vs-process .vs-process__wrap .process-box {
        display: block;
    }

    .vs-process .vs-process__wrap .process-box .process-img {
        width: 100%;
    }

    .vs-process .vs-process__wrap .process-box .process-img img {
        width: 100%;
        height: auto;
    }

    .vs-process .vs-process__wrap .process-box .ser_number {
        top: 30px;
    }

    .vs-process .vs-process__wrap .process-box .vs-service__txt p {
        max-width: none;
    }
}

/*------------------- 4.9. Doctors Part -------------------*/
.vs-doctors {
    padding-top: 110px;
}

.vs-doctors .vs-title__main {
    max-width: 660px;
    margin: 0 auto;
}

@media (max-width: 1300px) {
    .vs-doctors .vs-title__main {
        max-width: 630px;
        font-size: 45px;
    }
}

.vs-doctors__wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.vs-doctors .swiper-slide {
    height: auto;
}

.vs-doctors__wrap-content {
    position: relative;
    background-color: var(--vs-img-bg-color);
    padding: 10px;
    border-radius: 20px;
    transition: 0.7s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vs-doctors__wrap-content .doctor_img {
    position: relative;
    margin-bottom: 24px;
    border-radius: 25px;
    width: 100%;
    height: 350px;
    overflow: hidden;
    background-color: #85A3AD;
}

.vs-doctors__wrap-content .doctor_img a {
    display: block;
    width: 100%;
    height: 100%;
}

.vs-doctors__wrap-content .doctor_img img {
    border-radius: 25px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.vs-doctors__wrap-content .doctor_txt {
    padding: 0 12px 10px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 1199px) {
    .vs-doctors__wrap-content .doctor_img {
        height: 280px;
    }
}

@media (max-width: 575px) {
    .vs-doctors__wrap-content .doctor_img {
        height: 320px;
    }
}

@media (max-width: 1300px) {
    .vs-doctors__wrap-content .doctor_txt {
        padding: 0 5px 10px;
    }
}

.vs-doctors__wrap-content .doctor_txt .dr-txt {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vs-doctors__wrap-content .doctor_txt h3,
.vs-doctors__wrap-content .doctor_txt h2 {
    font-size: 24px;
    transition: all 0.5s ease-in-out;
}

.vs-doctors__wrap-content .doctor_txt p {
    transition: all 0.5s ease-in-out;
    margin: 0;
}

.vs-doctors__wrap-content .doctor_txt .social button {
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    display: block;
    background: var(--vs-theme-color2);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: 0.5s;
}

.vs-doctors__wrap-content .doctor_txt .social button:hover {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-doctors__wrap-content .doctor_txt .social ul {
    position: absolute;
    right: 20px;
    padding: 0;
    top: 20px;
    list-style: none;
    z-index: 1;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s;
    visibility: hidden;
}

.vs-doctors__wrap-content .doctor_txt .social ul li {
    padding-bottom: 8px;
}

.vs-doctors__wrap-content .doctor_txt .social ul li a {
    color: var(--vs-title-color);
    transition: all 0.5s ease-in-out;
    display: block;
    background-color: var(--vs-white-color);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    font-size: 14px;
}

.vs-doctors__wrap-content .doctor_txt .social ul li a:hover {
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
}

.vs-doctors__wrap-content .doctor_txt .social.active ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.vs-doctors__wrap-content:hover {
    background-color: var(--vs-title-color);
}

.vs-doctors__wrap-content:hover .doctor_txt p,
.vs-doctors__wrap-content:hover .doctor_txt h3,
.vs-doctors__wrap-content:hover .doctor_txt h2 {
    color: var(--vs-white-color);
}

.vs-doctors__wrap {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-doctors__wrap {
        gap: 20px;
    }

    .vs-doctors__wrap .doctor_txt {
        padding: 0 0 10px;
    }

    .vs-doctors__wrap .doctor_txt h3 {
        font-size: 20px;
        line-height: 20px;
    }

    .vs-doctors__wrap .doctor_txt p {
        font-size: 14px;
        line-height: 20px;
    }
}

.vs-doctors__wrap {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-doctors__wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .vs-doctors__wrap .doctor_img img {
        width: 100%;
    }

    .vs-doctors__wrap .doctor_txt {
        padding: 0 20px 20px;
    }

    .vs-doctors__wrap .doctor_txt h3 {
        font-size: 24px;
        line-height: 26px;
    }

    .vs-doctors__wrap .doctor_txt p {
        font-size: 16px;
        line-height: 26px;
    }
}

.vs-doctors {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-doctors .vs-title__main {
        font-size: 36px;
        max-width: 510px;
    }

    .vs-doctors .doctor_txt {
        padding: 0 5px 10px;
    }

    .vs-doctors .doctor_txt h3 {
        font-size: 20px;
        line-height: 24px;
    }

    .vs-doctors .doctor_txt p {
        font-size: 14px;
        line-height: 20px;
    }
}

.vs-doctors {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-doctors .vs-title__main {
        font-size: 29px !important;
    }

    .vs-doctors__wrap {
        grid-template-columns: auto;
    }

    .vs-doctors .doctor_txt {
        padding: 0 15px 15px;
    }

    .vs-doctors .doctor_txt h3 {
        font-size: 24px;
        line-height: 26px;
    }

    .vs-doctors .doctor_txt p {
        font-size: 16px;
        line-height: 20px;
    }
}

.vs-doctors.style3 .vs-doctors__wrap-content {
    position: relative;
    background-color: transparent;
    padding: 30px 0 0;
    border-radius: 0;
    transition: 0.7s;
    text-align: center;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox {
    position: relative;
    max-width: 240px;
    margin: 0 auto;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox img {
    border-radius: 50%;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .shape-circle {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 155px;
    background: var(--vs-theme-color1);
    border-radius: 170px 170px 0 0;
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social {
    position: absolute;
    bottom: -35px;
    left: 50%;
    cursor: default;
    transform: translate(-50%, -50%);
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social .share {
    background: var(--vs-theme-color1);
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    border: none;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social ul {
    position: absolute;
    list-style: none;
    padding: 0;
    right: 0;
    top: auto;
    bottom: 40px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social ul li {
    padding-bottom: 8px;
    opacity: 0;
    transition: 0.5s;
    transform: translateY(20px);
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social ul li a {
    color: var(--vs-title-color);
    transition: all 0.5s ease-in-out;
    display: block;
    background-color: var(--vs-white-color);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    font-size: 14px;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social ul li a:hover {
    background: var(--vs-title-color);
    color: var(--vs-white-color);
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social:hover {
    transform: translate(-50%, -25%);
    padding-top: 40px;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social:hover .share {
    background: var(--vs-theme-color2);
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social:hover ul {
    visibility: visible;
    transform: translateY(0) !important;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .social:hover ul li {
    visibility: visible;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_txt {
    position: relative;
    padding: 10px 15px 0;
}

.vs-doctors.style3 .vs-doctors__wrap-content .doctor_txt .dr-txt {
    display: block;
}

.vs-doctors.style3 .vs-doctors__wrap-content:hover {
    background-color: transparent;
}

.vs-doctors.style3 .vs-doctors__wrap-content:hover .doctor_img .shape-circle {
    background: var(--vs-title-color);
}

.vs-doctors.style3 .vs-doctors__wrap-content:hover .doctor_img .imgBox::after {
    opacity: 0.5;
    visibility: visible;
}

.vs-doctors.style3 .vs-doctors__wrap-content:hover .doctor_img ul li {
    opacity: 0 !important;
    transform: none !important;
}

.vs-doctors.style3 .vs-doctors__wrap-content:hover .doctor_txt p,
.vs-doctors.style3 .vs-doctors__wrap-content:hover .doctor_txt h3 {
    color: var(--vs-title-color);
}

@media (max-width: 1300px) {
    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox {
        max-width: 210px;
    }

    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .shape-circle {
        top: -24px;
        height: 140px;
    }
}

.vs-doctors.style3 .vs-doctors__wrap-content {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox {
        max-width: 180px;
    }

    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .shape-circle {
        top: -20px;
        height: 120px;
    }
}

.vs-doctors.style3 .vs-doctors__wrap-content {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox {
        max-width: 240px;
    }

    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .shape-circle {
        top: -30px;
        height: 155px;
        right: 0;
        width: 90%;
        margin: 0 auto;
    }
}

.vs-doctors.style3 .vs-doctors__wrap-content {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-doctors.style3 .vs-doctors__wrap-content .vs-title__main {
        font-size: 37px;
    }

    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .imgBox {
        max-width: 190px;
    }

    .vs-doctors.style3 .vs-doctors__wrap-content .doctor_img .shape-circle {
        top: -25px;
        height: 135px;
        width: 100%;
    }
}

.vs-doctors.style3 .vs-doctors__wrap-content {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-doctors.style3 .vs-doctors__wrap-content {
        max-width: 300px;
        margin: 0 auto;
    }
}

.vs-doctors.style4 .vs-doctors__wrap-content {
    position: relative;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    transition: 0.7s;
    text-align: center;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img {
    margin-bottom: 10px;
    position: relative;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img img {
    width: 100%;
    height: 290px;
    object-fit: cover;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social {
    position: absolute;
    bottom: 20px;
    right: 20px;
    cursor: default;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social .share {
    background: var(--vs-theme-color3);
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social .share:hover {
    background: var(--vs-title-color);
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social ul {
    list-style: none;
    position: absolute;
    right: 0;
    padding: 0;
    top: auto;
    bottom: 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social ul li {
    padding-bottom: 8px;
    transition: 0.5s;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social ul li a {
    width: 40px;
    height: 40px;
    line-height: 43px;
    color: var(--vs-title-color);
    transition: all 0.5s ease-in-out;
    display: block;
    background-color: var(--vs-white-color);
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social ul li a:hover {
    background: var(--vs-theme-color3);
    color: var(--vs-white-color);
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social.active ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_txt {
    position: relative;
    padding: 20px;
    background-color: rgba(var(--vs-theme-color3-rgb), 0.2);
    border-radius: 10px;
    text-align: left;
    transition: all 0.5s ease-in-out;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_txt .dr-txt {
    display: block;
}

.vs-doctors.style4 .vs-doctors__wrap-content .doctor_txt .dr-txt p {
    margin: 0;
}

.vs-doctors.style4 .vs-doctors__wrap-content:hover {
    background-color: transparent;
}

.vs-doctors.style4 .vs-doctors__wrap-content:hover .doctor_img .shape-circle {
    background: var(--vs-title-color);
}

.vs-doctors.style4 .vs-doctors__wrap-content:hover .doctor_img .imgBox::after {
    opacity: 0.5;
    visibility: visible;
}

.vs-doctors.style4 .vs-doctors__wrap-content:hover .doctor_txt {
    background-color: var(--vs-theme-color3);
}

.vs-doctors.style4 .vs-doctors__wrap-content:hover .doctor_txt p,
.vs-doctors.style4 .vs-doctors__wrap-content:hover .doctor_txt h3 {
    color: var(--vs-white-color);
}

.vs-doctors.style4.style5 .vs-doctors__wrap-content .doctor_img .social .share {
    background: var(--vs-theme-color5);
}

.vs-doctors.style4.style5 .vs-doctors__wrap-content .doctor_img .social ul li a:hover {
    background: var(--vs-theme-color4);
}

.vs-doctors.style4.style5 .vs-doctors__wrap-content .doctor_txt {
    background-color: #EDF9F9;
}

.vs-doctors.style4.style5 .vs-doctors__wrap-content:hover {
    background-color: transparent;
}

.vs-doctors.style4.style5 .vs-doctors__wrap-content:hover .doctor_txt {
    background-color: var(--vs-theme-color4);
}

@media (max-width: 1300px) {
    .vs-doctors.style4 .vs-doctors__wrap-content .doctor_txt h3 {
        font-size: 22px;
    }
}

.vs-doctors.style4 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-doctors.style4 .vs-title__main {
        max-width: 545px;
        font-size: 40px;
        margin-right: 30px;
    }

    .vs-doctors.style4 .vs-doctors__wrap-content .doctor_img img {
        height: 100%;
    }

    .vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social ul li a {
        width: 35px;
        height: 35px;
        line-height: 38px;
    }

    .vs-doctors.style4 .vs-doctors__wrap-content .doctor_txt h3 {
        font-size: 20px;
    }
}

.vs-doctors.style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-doctors.style4 .vs-title__main {
        max-width: none;
        font-size: 38px;
        margin-right: 0;
    }
}

.vs-doctors.style4 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-doctors.style4 .vs-title__main {
        font-size: 28px !important;
    }

    .vs-doctors.style4 .vs-doctors__wrap-content .doctor_img .social ul li a {
        width: 40px;
        height: 40px;
        line-height: 43px;
    }

    .vs-doctors.style4 .vs-doctors__wrap-content .doctor_txt h3 {
        font-size: 24px;
    }
}

.vs-doctors {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-doctors.doctors-page .vs-doctors__wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vs-doctors {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-doctors.doctors-page .vs-doctors__wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.vs-doctors {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-doctors.doctors-page .vs-doctors__wrap {
        gap: 20px;
    }

    .vs-doctors.doctors-page .vs-doctors__wrap-content .doctor_txt h2 {
        font-size: 18px;
    }
}

.vs-doctors {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-doctors.doctors-page .vs-doctors__wrap {
        grid-template-columns: 1fr;
    }

    .vs-doctors.doctors-page .vs-doctors__wrap-content .doctor_txt h2 {
        font-size: 24px;
    }
}

.doctor-Dpage {
    position: relative;
}

.doctor-Dpage__widget {
    background-color: var(--vs-img-bg-color);
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
    padding: 20px;
    border-radius: 25px;
    position: sticky;
    top: 0;
}


.doctor-Dpage__widget .Dpage_txt {
    padding: 20px;
}

.doctor-Dpage__widget .doctor_img img {
    width: 100%;
    border-radius: 25px;
}

.doctor-Dpage__widget .specialist {
    font-size: 14px;
    ;
    height: 40px;
    line-height: 40px;
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    text-align: center;
    font-family: var(--vs-title-font);
    font-weight: bold;
    text-transform: capitalize;
    border-radius: 30px;
    margin-top: 30px;
}

.doctor-Dpage__widget h2 {
    font-size: 36px;
    margin: 20px 0;
}

.doctor-Dpage__widget svg {
    margin-bottom: 15px;
}

.doctor-Dpage__widget .vs-appoint__box {
    display: block;
    margin-bottom: 30px;
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content {
    justify-content: left;
    margin-top: 20px;
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content .appoint-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content .appoint-icon::after {
    width: 50px;
    height: 50px;
    border: 2px dashed var(--vs-theme-color1);
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content .appoint-txt p {
    font-size: 20px;
    color: var(--vs-title-color);
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content .appoint-txt p span {
    font-size: 16px;
    color: var(--vs-body-color);
    margin-bottom: 0;
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content:hover .appoint-icon::after {
    border: 2px dashed var(--vs-theme-color1);
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content:hover .appoint-txt p {
    color: var(--vs-theme-color1);
}

.doctor-Dpage__widget .vs-appoint__box .appoint-content:hover .appoint-txt p span {
    color: var(--vs-body-color);
}

.doctor-Dpage__widget h3 {
    margin: 20px 0;
}

.doctor-Dpage__widget .doctor-shedule {
    list-style: none;
    padding: 0;
    margin: 15px 0 30px;
}

.doctor-Dpage__widget .doctor-shedule li {
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: capitalize;
    border-bottom: 1px solid rgba(var(--vs-title-color-rgb), 0.1);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.doctor-Dpage__widget .doctor-shedule li:last-child {
    border-bottom: 0;
    padding: 0;
    margin: 0;
}

.doctor-Dpage__content h2 {
    line-height: 38px;
    margin-bottom: 40px;
}

.doctor-Dpage__content ul {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}

.doctor-Dpage__content ul li {
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    font-size: 14px !important;
}

.doctor-Dpage__content ul li i {
    color: var(--vs-theme-color2);
    margin-right: 8px;
    font-size: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

.doctor-Dpage__content ul li:not(:has(i))::before {
    content: "\f336";
    font-family: var(--vs-icon-font), 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--vs-theme-color2);
    margin-right: 8px;
    font-size: 18px;
    line-height: 1;
    margin-top: 3px;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .doctor-Dpage__content ul {
        grid-template-columns: 1fr;
    }
}


.doctor-Dpage__content .vs-appoint__form {
    padding: 40px;
    background-color: var(--vs-img-bg-color);
    border-radius: 20px;
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
}

.doctor-Dpage__content .vs-appoint__form h2 {
    font-size: 40px;
}

.doctor-Dpage__content .vs-appoint__form .appoint_form select,
.doctor-Dpage__content .vs-appoint__form .appoint_form input {
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
    font-size: 15px;
    font-weight: 400;
}

.doctor-Dpage__content .vs-appoint__form .appoint_form select::placeholder,
.doctor-Dpage__content .vs-appoint__form .appoint_form input::placeholder {
    color: var(--vs-title-color);
}

.doctor-Dpage__content .vs-appoint__form .appoint_form select:hover,
.doctor-Dpage__content .vs-appoint__form .appoint_form input:hover {
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
}

.doctor-Dpage__content .vs-appoint__form .appoint_form select:hover::placeholder,
.doctor-Dpage__content .vs-appoint__form .appoint_form input:hover::placeholder {
    color: var(--vs-title-color);
}

.doctor-Dpage__content .vs-appoint__form .appoint_form input[type=date]::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z'/></svg>") no-repeat center;
    transition: 0.5s;
}

.doctor-Dpage__content .vs-appoint__form .appoint_form select {
    color: var(--vs-title-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.doctor-Dpage__content .vs-appoint__form textarea {
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
}

.doctor-Dpage__content .vs-appoint__form textarea::placeholder {
    color: var(--vs-title-color);
}

.doctor-Dpage__content .vs-appoint__form .appoint_btn {
    background: var(--vs-title-color);
}

.doctor-Dpage__content .skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 30px 0 50px;
}

@media (max-width: 767px) {
    .doctor-Dpage__content .skills-grid {
        grid-template-columns: 1fr;
    }
}

.doctor-Dpage__content .skills-grid .skill-item .skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.doctor-Dpage__content .skills-grid .skill-item .skill-header span {
    font-size: 16px;
    font-family: var(--vs-title-font);
}

.doctor-Dpage__content .skills-grid .skill-item .skill-header span:first-child {
    font-weight: bold;
    color: var(--vs-title-color);
}

.doctor-Dpage__content .skills-grid .skill-item .skill-header span:last-child {
    color: var(--vs-body-color);
}

.doctor-Dpage__content .skills-grid .progress-bar {
    width: 100%;
    height: 20px;
    background: var(--vs-img-bg-color);
    border-radius: 3px;
    overflow: hidden;
}

.doctor-Dpage__content .skills-grid .progress-fill {
    height: 10px;
    width: 0;
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    transition: width 1.5s ease;
}

@media (max-width: 1300px) {
    .doctor-Dpage__widget .Dpage_txt {
        padding: 0px;
    }

    .doctor-Dpage__widget h2 {
        font-size: 32px;
    }
}

.doctor-Dpage {
    /* Large devices */
}

@media (max-width: 1199px) {
    .doctor-Dpage__widget h2 {
        font-size: 28px;
    }

    .doctor-Dpage__widget .vs-appoint__box .appoint-content .appoint-txt p {
        font-size: 17px;
    }

    .doctor-Dpage__content ul li {
        font-size: 15px;
    }
}

.doctor-Dpage {
    /* Small devices */
}

@media (max-width: 767px) {
    .doctor-Dpage__content ul {
        grid-template-columns: 1fr;
    }

    .doctor-Dpage__content .vs-appoint__form {
        padding: 30px;
    }

    .doctor-Dpage__content .vs-appoint__form .appoint_form {
        grid-template-columns: 1fr;
    }
}

.doctor-Dpage {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .doctor-Dpage__content .vs-appoint__form {
        padding: 20px;
    }
}

.vs-appoint {
    position: relative;
}

.vs-appoint .vs-title__main {
    max-width: 610px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1300px) {
    .vs-appoint .vs-title__main {
        font-size: 44px;
    }
}

.vs-appoint .appointImg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 45%;
    overflow: hidden;
    z-index: 1;
}

.vs-appoint .appointImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 1300px) {
    .vs-appoint .appointImg {
        width: 42%;
    }
}

.vs-appoint__button.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --icon-size: 120px;
    z-index: 2;
}

.vs-appoint__button.play-btn i {
    --icon-size: 120px;
    font-size: 32px;
    background: rgba(var(--vs-white-color-rgb), 0.2);
    border: 2px solid var(--vs-white-color);
}

.vs-appoint__button.play-btn:hover:after,
.vs-appoint__button.play-btn:hover::before,
.vs-appoint__button.play-btn:hover i {
    background-color: var(--vs-theme-color2);
}

.vs-appoint__wrap {
    padding-left: 80px;
}

.vs-appoint__box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.vs-appoint__box .appoint-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.vs-appoint__box .appoint-content .appoint-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vs-theme-color1);
    color: var(--vs-white-color);
    font-size: 26px;
    margin: 5px;
    border-radius: 10px;
    position: relative;
    transition: 0.5s;
}

.vs-appoint__box .appoint-content .appoint-icon::after {
    content: "";
    position: absolute;
    border: 2px dashed var(--vs-theme-color1);
    border-radius: 10px;
    width: 70px;
    height: 70px;
    transition: 0.5s;
}

.vs-appoint__box .appoint-content .appoint-txt p {
    font-family: var(--vs-title-font);
    font-size: 24px;
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-weight: bold;
    margin: 0;
    transition: 0.5s;
}

.vs-appoint__box .appoint-content .appoint-txt p span {
    font-size: 20px;
    color: var(--vs-white-color);
    display: block;
    margin-bottom: 10px;
}

@media (max-width: 1300px) {
    .vs-appoint__box .appoint-content .appoint-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .vs-appoint__box .appoint-content .appoint-icon::after {
        width: 60px;
        height: 60px;
    }

    .vs-appoint__box .appoint-content .appoint-txt p {
        font-size: 20px;
    }

    .vs-appoint__box .appoint-content .appoint-txt p span {
        font-size: 18px;
        margin-bottom: 5px;
    }
}

.vs-appoint__box .appoint-content:hover .appoint-icon {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-appoint__box .appoint-content:hover .appoint-icon::after {
    border-color: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-appoint__box .appoint-content:hover .appoint-txt p {
    color: var(--vs-theme-color1);
}

.vs-appoint__box .appoint-content:hover .appoint-txt p span {
    color: var(--vs-white-color);
}

.vs-appoint__form {
    position: relative;
    z-index: 2;
    padding: 50px 0 0;
}

.vs-appoint__form .appoint_form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.vs-appoint__form .appoint_form select,
.vs-appoint__form .appoint_form input {
    border: 2px solid var(--vs-theme-color1);
    padding: 15px;
    border-radius: 10px;
    text-transform: capitalize;
    background-color: rgba(var(--vs-white-color), 0.06);
    color: var(--vs-white-color);
    transition: 0.5s;
}

.vs-appoint__form .appoint_form select::placeholder,
.vs-appoint__form .appoint_form input::placeholder {
    color: var(--vs-white-color);
    transition: 0.5s;
}

.vs-appoint__form .appoint_form select:hover,
.vs-appoint__form .appoint_form input:hover {
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
}

.vs-appoint__form .appoint_form select:hover::placeholder,
.vs-appoint__form .appoint_form input:hover::placeholder {
    color: var(--vs-title-color);
}

.vs-appoint__form .appoint_form input[type=date]::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z'/></svg>") no-repeat center;
    transition: 0.5s;
}

.vs-appoint__form .appoint_form input[type=date]:hover::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z'/></svg>") no-repeat center;
}

.vs-appoint__form .appoint_form select {
    color: var(--vs-white-color);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 16px 13px;
    transition: 0.5s;
}

.vs-appoint__form .appoint_form select:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.vs-appoint__form textarea {
    border: 2px solid var(--vs-theme-color1);
    padding: 20px;
    border-radius: 10px;
    text-transform: capitalize;
    background-color: rgba(var(--vs-white-color), 0.06);
    width: 100%;
    height: 100px;
    margin-top: 20px;
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-appoint__form textarea::placeholder {
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-appoint__form textarea:hover {
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
}

.vs-appoint__form textarea:hover::placeholder {
    color: var(--vs-title-color);
}

.vs-appoint__form .appoint_btn {
    border: 0;
    width: 100%;
    font-family: var(--vs-title-font);
    text-transform: capitalize;
    color: var(--vs-white-color);
    background: var(--vs-theme-color1);
    border-radius: 50px;
    font-weight: bold;
    padding: 18px;
    font-size: 16px;
    transition: all 0.5s ease-in-out;
}

.vs-appoint__form .appoint_btn:hover {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    transition: all 0.5s ease-in-out;
}

.vs-appoint {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-appoint__wrap {
        padding-left: 40px;
    }

    .vs-appoint__box {
        display: none;
    }

    .vs-appoint__form {
        padding: 0;
    }
}

.vs-appoint {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-appoint .vs-title__main {
        font-size: 48px;
    }

    .vs-appoint__wrap {
        padding-left: 0px;
        margin-top: 0;
    }

    .vs-appoint .appointImg {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 400px;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .vs-appoint .appointImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .vs-appoint__button.play-btn {
        --icon-size: 90px;
    }

    .vs-appoint__button.play-btn i {
        --icon-size: 90px;
        font-size: 26px;
    }

    .vs-appoint__box {
        display: grid;
    }

    .vs-appoint__box .appoint-content .appoint-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .vs-appoint__box .appoint-content .appoint-icon::after {
        width: 70px;
        height: 70px;
    }

    .vs-appoint__box .appoint-content .appoint-txt p {
        font-size: 24px;
    }

    .vs-appoint__box .appoint-content .appoint-txt p span {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .vs-appoint__form {
        padding: 50px 0 0;
    }
}

.vs-appoint {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-appoint__box {
        display: none;
    }

    .vs-appoint__form {
        padding: 0;
    }
}

.vs-appoint {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-appoint .appointImg {
        height: 280px;
        border-radius: 12px;
    }

    .vs-appoint__button.play-btn {
        --icon-size: 70px;
    }

    .vs-appoint__button.play-btn i {
        --icon-size: 70px;
        font-size: 20px;
    }

    .vs-appoint__form .appoint_form {
        grid-template-columns: auto;
    }
}

.vs-appoint--style2 {
    padding: 100px 80px;
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: -85px;
    border-radius: 20px;
    position: relative;
    top: -190px;
    z-index: 4;
}

.vs-appoint--style2 .vs-appoint__wrap {
    padding: 0 125px 0 0px;
}

.vs-appoint--style2 .vs-appoint__form {
    padding: 0;
}

.vs-appoint--style2 .vs-appoint__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 1600px) {
    .vs-appoint--style2 {
        margin-left: auto;
        margin-right: auto;
    }

    .vs-appoint--style2 .vs-appoint__wrap {
        padding: 0 50px 0 0px;
    }
}

@media (max-width: 1400px) {
    .vs-appoint--style2 .vs-title__main {
        max-width: 515px;
    }

    .vs-appoint--style2 .vs-appoint__wrap {
        padding: 0;
    }
}

@media (max-width: 1300px) {
    .vs-appoint--style2 {
        padding: 80px 70px;
    }
}

.vs-appoint--style2 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-appoint--style2 .vs-title__main {
        font-size: 40px;
    }

    .vs-appoint--style2 .vs-appoint__wrap {
        margin: 0;
    }

    .vs-appoint--style2 .vs-appoint__form {
        margin-top: 30px;
    }
}

.vs-appoint--style2 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-appoint--style2 {
        padding: 40px;
    }

    .vs-appoint--style2 .vs-appoint__form .appoint_form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .vs-appoint--style2 {
        padding: 25px;
    }

    .vs-appoint--style2 .vs-appoint__box .appoint-content {
        display: block;
    }

    .vs-appoint--style2 .vs-appoint__box .appoint-content .appoint-icon {
        margin-bottom: 20px;
    }
}

.vs-appoint.style3 .vs-title__main {
    max-width: 515px;
}

.vs-appoint.style3 .vs-appoint__box {
    display: block;
}

.vs-appoint.style3 .vs-appoint__box .appoint-icon {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-appoint.style3 .vs-appoint__box .appoint-icon::after {
    border-color: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-appoint.style3 .vs-appoint__box .appoint-txt p {
    color: var(--vs-theme-color1);
    transition: 0.5s;
}

.vs-appoint.style3 .vs-appoint__box .appoint-txt p:hover {
    color: var(--vs-white-color);
}

.vs-appoint.style3 .vs-appoint__box .appoint-txt p:hover span {
    color: var(--vs-white-color);
}

.vs-appoint.style3 .vs-appoint__box .appoint-txt p span {
    color: var(--vs-white-color);
}

.vs-appoint.style3 .appoint_form {
    grid-template-columns: repeat(3, 1fr);
}

.vs-appoint.style3 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-appoint.style3 {
        background-position: left center;
    }

    .vs-appoint.style3 .vs-title__main {
        max-width: 475px;
    }

    .vs-appoint.style3 .vs-appoint__box {
        display: none;
    }

    .vs-appoint.style3 .vs-appoint__form {
        padding-top: 50px;
    }
}

.vs-appoint.style3 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-appoint.style3 .vs-title__main {
        max-width: 515px;
    }

    .vs-appoint.style3 .appoint_form {
        grid-template-columns: 1fr 1fr;
    }
}

.vs-appoint.style3 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-appoint.style3 .appoint_form {
        grid-template-columns: 1fr;
    }
}

.vs-appoint--style4 p {
    color: var(--vs-white-color);
    max-width: 500px;
    font-weight: 600;
}

.vs-appoint--style4 .app_content {
    background-color: var(--vs-white-color);
    padding: 50px;
    border-radius: 20px;
    position: relative;
    bottom: -380px;
    margin-top: -370px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.vs-appoint--style4 .vs-appoint__form {
    padding: 50px;
    background-color: rgba(var(--vs-theme-color3-rgb), 0.2);
    border: 1px solid rgba(var(--vs-theme-color3-rgb), 0.3);
    border-radius: 20px;
}

.vs-appoint--style4 .vs-appoint__form h2 {
    font-size: 40px;
    margin-bottom: 40px;
}

.vs-appoint--style4 .vs-appoint__form .appoint_form select,
.vs-appoint--style4 .vs-appoint__form .appoint_form input {
    background-color: var(--vs-white-color);
    border: 1px solid rgba(var(--vs-theme-color3-rgb), 0.4);
    color: var(--vs-body-color);
}

.vs-appoint--style4 .vs-appoint__form .appoint_form select::placeholder,
.vs-appoint--style4 .vs-appoint__form .appoint_form input::placeholder {
    color: var(--vs-body-color);
}

.vs-appoint--style4 .vs-appoint__form .appoint_form select {
    color: var(--vs-body-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237C7C7C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.vs-appoint--style4 .vs-appoint__form textarea {
    background-color: var(--vs-white-color);
    border: 1px solid rgba(var(--vs-theme-color3-rgb), 0.4);
    color: var(--vs-body-color);
}

.vs-appoint--style4 .vs-appoint__form textarea::placeholder {
    color: var(--vs-body-color);
    transition: all 0.5s ease-in-out;
}

.vs-appoint--style4 .vs-appoint__form .appoint_btn {
    background: var(--vs-theme-color3);
}

.vs-appoint--style4 .vs-appoint__form .appoint_btn:hover {
    background: var(--vs-title-color);
}

.vs-appoint--style4 .vs-appoint__wrap {
    padding-left: 0px;
    position: relative;
}

.vs-appoint--style4 .vs-appoint__wrap img {
    width: 100%;
    height: 625px;
    object-fit: cover;
    border-radius: 20px;
}

.vs-appoint--style4 .vs-appoint__wrap .appoint-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.vs-appoint--style4 .vs-appoint__wrap .appoint-play-btn .play-btn {
    --icon-size: 120px;
}

.vs-appoint--style4 .vs-appoint__wrap .appoint-play-btn .play-btn i {
    --icon-size: 120px;
    font-size: 32px;
    background: rgba(var(--vs-white-color-rgb), 0.2);
    border: 2px solid var(--vs-white-color);
}

.vs-appoint--style4 .vs-appoint__wrap .appoint-play-btn .play-btn:hover:after,
.vs-appoint--style4 .vs-appoint__wrap .appoint-play-btn .play-btn:hover::before,
.vs-appoint--style4 .vs-appoint__wrap .appoint-play-btn .play-btn:hover i {
    background-color: var(--vs-theme-color3);
}

.vs-appoint--style4 .vs-appoint__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.vs-appoint--style4 .vs-appoint__box .appoint-content {
    gap: 25px;
}

.vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-icon {
    background: var(--vs-title-color);
}

.vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-icon::after {
    border: 2px dashed var(--vs-title-color);
}

.vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-txt p {
    color: var(--vs-title-color);
    max-width: 220px !important;
}

.vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-txt p span {
    color: var(--vs-title-color);
}

.vs-appoint--style4 .vs-appoint__box .appoint-content:hover .appoint-icon {
    background: var(--vs-theme-color3);
}

.vs-appoint--style4 .vs-appoint__box .appoint-content:hover .appoint-icon::after {
    border-color: var(--vs-theme-color3);
}

.vs-appoint--style4 .vs-appoint__box .appoint-content:hover .appoint-txt p {
    color: var(--vs-theme-color3);
}

.vs-appoint--style4 .vs-appoint__box .appoint-content:hover .appoint-txt p span {
    color: var(--vs-title-color);
}

.vs-appoint--style4.style5 .app_content {
    bottom: -530px;
    margin-top: -450px;
}

.vs-appoint--style4.style5 .vs-appoint__form {
    background-color: rgba(var(--vs-theme-color4-rgb), 0.1);
    border: 1px solid rgba(var(--vs-theme-color4-rgb), 0.3);
}

.vs-appoint--style4.style5 .vs-appoint__form .appoint_form {
    grid-template-columns: repeat(3, 1fr);
}

.vs-appoint--style4.style5 .vs-appoint__form .appoint_form select,
.vs-appoint--style4.style5 .vs-appoint__form .appoint_form input {
    border: 1px solid rgba(var(--vs-theme-color4-rgb), 0.4);
}

.vs-appoint--style4.style5 .vs-appoint__form textarea {
    border: 1px solid rgba(var(--vs-theme-color4-rgb), 0.4);
}

.vs-appoint--style4.style5 .vs-appoint__form .appoint_btn {
    background: var(--vs-theme-color5);
}

.vs-appoint--style4.style5 .vs-appoint__form .appoint_btn:hover {
    background: var(--vs-title-color);
}

.vs-appoint--style4.style5 .vs-appoint__box .appoint-content .appoint-icon {
    background: var(--vs-theme-color5);
}

.vs-appoint--style4.style5 .vs-appoint__box .appoint-content .appoint-icon::after {
    border-color: var(--vs-theme-color5);
}

.vs-appoint--style4.style5 .vs-appoint__box .appoint-content:hover .appoint-icon {
    background: var(--vs-theme-color4);
}

.vs-appoint--style4.style5 .vs-appoint__box .appoint-content:hover .appoint-icon::after {
    border-color: var(--vs-theme-color4);
}

.vs-appoint--style4.style5 .vs-appoint__box .appoint-content:hover .appoint-txt p {
    color: var(--vs-theme-color4);
}

.vs-appoint--style4.style5 .vs-appoint__box .appoint-content:hover .appoint-txt p span {
    color: var(--vs-title-color);
}

@media (max-width: 1300px) {
    .vs-appoint--style4 .vs-title__main {
        max-width: 510px;
        font-size: 40px;
    }

    .vs-appoint--style4 .vs-appoint__form {
        padding: 30px 20px;
    }

    .vs-appoint--style4 .vs-appoint__wrap img {
        height: 585px;
    }
}

.vs-appoint--style4 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-appoint--style4 .vs-appoint__form {
        margin-bottom: 30px;
        padding: 50px;
    }

    .vs-appoint--style4 .vs-appoint__box .appoint-content {
        gap: 15px;
    }

    .vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-txt p {
        max-width: 180px !important;
    }
}

.vs-appoint--style4 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-appoint--style4 .vs-appoint__wrap {
        margin: 0;
    }

    .vs-appoint--style4 .vs-appoint__box {
        flex-wrap: wrap;
    }

    .vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-txt p {
        max-width: none !important;
        font-size: 21px;
    }

    .vs-appoint--style4 .vs-appoint__box .appoint-content .appoint-txt p span {
        font-size: 16px;
    }

    .vs-appoint--style4.style5 .vs-appoint__form .appoint_form {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vs-appoint--style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-appoint--style4 .app_content {
        padding: 30px;
    }

    .vs-appoint--style4 .vs-appoint__form {
        padding: 30px;
    }

    .vs-appoint--style4 .vs-appoint__form h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .vs-appoint--style4 .vs-appoint__form .appoint_form {
        grid-template-columns: 1fr;
    }

    .vs-appoint--style4 .vs-appoint__wrap img {
        height: 100%;
    }

    .vs-appoint--style4.style5 .vs-appoint__form .appoint_form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .vs-appoint--style4 .vs-appoint__box .appoint-content {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {

    .vs-appoint--style4 .app_content,
    .vs-appoint--style4 .vs-appoint__form {
        padding: 25px 15px;
    }
}

/*------------------- 4.10. Case Part -------------------*/
.vs-case .vs-title__main {
    max-width: 570px;
    margin: 0 auto;
}

@media (max-width: 1300px) {
    .vs-case .vs-title__main {
        font-size: 47px;
    }
}

.vs-case__wrap {
    position: relative;
}

.vs-case__wrap .case_txt form {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: inline-block;
    cursor: auto;
    width: 100%;
    padding: 0 30px;
}

.vs-case__wrap .case_txt form input {
    font-size: 24px;
    font-family: var(--vs-title-font);
    text-transform: capitalize;
    font-weight: bold;
    height: 80px;
    width: 100%;
    border: none;
    background-color: var(--vs-white-color);
    padding-left: 30px;
    color: var(--vs-title-color);
    border-radius: 20px;
    box-shadow: none;
    transition: 0.7s;
}

.vs-case__wrap .case_txt form input:focus {
    outline: none;
    border-color: transparent;
}

.vs-case__wrap .case_txt form input::-moz-placeholder {
    color: var(--vs-title-color);
}

.vs-case__wrap .case_txt form input::-webkit-input-placeholder {
    color: var(--vs-title-color);
}

.vs-case__wrap .case_txt form input:-ms-input-placeholder {
    color: var(--vs-title-color);
}

.vs-case__wrap .case_txt form input::placeholder {
    color: var(--vs-title-color);
}

.vs-case__wrap .case_txt form input {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-case__wrap .case_txt form input {
        font-size: 20px;
        height: 60px;
        border-radius: 10px;
    }
}

.vs-case__wrap .case_txt form button {
    position: absolute;
    top: 50%;
    background: var(--vs-title-color);
    border: none;
    font-size: 20px;
    right: 40px;
    color: var(--vs-white-color);
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    transition: all ease 0.5s;
    transform: translateY(-50%);
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-case__wrap .case_txt form button {
        right: 35px;
        width: 50px;
        height: 50px;
    }
}

.vs-case__wrap:hover .case_txt form input {
    background-color: var(--vs-title-color);
}

.vs-case__wrap:hover .case_txt form input::-moz-placeholder {
    color: var(--vs-white-color);
}

.vs-case__wrap:hover .case_txt form input::-webkit-input-placeholder {
    color: var(--vs-white-color);
}

.vs-case__wrap:hover .case_txt form input:-ms-input-placeholder {
    color: var(--vs-white-color);
}

.vs-case__wrap:hover .case_txt form input::placeholder {
    color: var(--vs-white-color);
}

.vs-case__wrap:hover .case_txt form button {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-case__img {
    position: relative;
}

.vs-case__img .case_img img {
    border-radius: 20px;
}

.vs-case__img span.label {
    position: absolute;
    top: 30px;
    left: 30px;
    display: inline-block;
    padding: 2px 20px;
    font-weight: bold;
    font-family: var(--vs-title-font);
    background-color: rgba(var(--vs-theme-color2-rgb), 0.8);
    color: var(--vs-white-color);
    text-transform: capitalize;
    border-radius: 30px;
}

.vs-case {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-case .case_img img {
        width: 100%;
    }
}

.vs-case {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-case .vs-title__main {
        font-size: 42px;
    }
}

.vs-case {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-case .case_txt form {
        bottom: 10px;
        padding: 0 10px;
    }

    .vs-case .case_txt form input {
        font-size: 14px;
        padding-left: 15px;
    }

    .vs-case .case_txt form button {
        right: 15px;
        font-size: 16px;
    }

    .vs-case .case_img img {
        height: 250px;
        object-fit: cover;
    }
}

.vs-case.style2 {
    padding-bottom: 300px;
}

.vs-case.style2 .vs-case__img {
    position: relative;
}

.vs-case.style2 .vs-case__img .case_img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.vs-case.style2 .vs-case__wrap {
    position: relative;
}

.vs-case.style2 .vs-case__wrap .case_txt {
    padding: 30px 0 0;
}

.vs-case.style2 .vs-case__wrap .case_txt form {
    position: relative;
    bottom: 0;
    padding: 0;
}

.vs-case.style2 .vs-case__wrap .case_txt form input {
    font-size: 22px;
    padding-left: 20px;
}

.vs-case.style2 .vs-case__wrap .case_txt form button {
    right: 10px;
}

@media (max-width: 1300px) {
    .vs-case.style2 .vs-case__wrap .case_txt form input {
        font-size: 18px;
    }
}

.vs-case.style2 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-case.style2 {
        padding-bottom: 250px;
    }

    .vs-case.style2 .vs-case__wrap {
        margin-bottom: 50px;
    }
}

.vs-case.style3 .scroll-case {
    width: 100%;
    position: relative;
}

.vs-case.style3 .scroll-case .slide {
    position: sticky;
    top: 120px;
    height: 800px;
    width: 100%;
}

.vs-case.style3 .scroll-case .slide.layer-1 {
    z-index: 4;
}

.vs-case.style3 .scroll-case .slide.layer-2 {
    z-index: 5;
}

.vs-case.style3 .scroll-case .slide.layer-3 {
    z-index: 6;
}

@media (max-width: 1300px) {
    .vs-case.style3 .scroll-case .slide {
        height: 700px;
    }
}

.vs-case.style3 .scroll-case .slide {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-case.style3 .scroll-case .slide {
        height: 600px;
    }
}

.vs-case.style3 .vs-case__wrap {
    position: relative;
}

.vs-case.style3 .vs-case__wrap .case_txt {
    position: absolute;
    bottom: 30px;
    right: 30px;
    max-width: 585px;
    background-color: rgba(var(--vs-theme-color1-rgb), 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(var(--vs-white-color-rgb), 0.3);
    border-radius: 20px;
    padding: 20px;
    transition: all 0.5s ease-in-out;
}

.vs-case.style3 .vs-case__wrap .case_txt span.label {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-block;
    padding: 2px 20px;
    font-weight: bold;
    font-family: var(--vs-title-font);
    background-color: rgba(var(--vs-theme-color2-rgb), 0.95);
    color: var(--vs-white-color);
    text-transform: capitalize;
    border-radius: 30px;
}

.vs-case.style3 .vs-case__wrap .case_txt h3 {
    color: var(--vs-white-color);
    margin: 45px 0 10px;
    transition: all 0.5s ease-in-out;
}

.vs-case.style3 .vs-case__wrap .case_txt p {
    color: var(--vs-white-color);
}

.vs-case.style3 .vs-case__wrap .case_txt .readMore {
    text-align: end;
    position: relative;
}

.vs-case.style3 .vs-case__wrap .case_txt .readMore::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 65%;
    opacity: 0.2;
    border-top: 2px solid var(--vs-white-color);
}

.vs-case.style3 .vs-case__wrap .case_txt .readMore a {
    display: inline-block;
    background: var(--vs-title-color);
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-family: var(--vs-title-font);
    font-weight: bold;
    border-radius: 50px;
    line-height: 16px;
    padding: 13px 32px;
    transition: all 0.5s ease-in-out;
}

.vs-case.style3 .vs-case__wrap .case_txt:hover {
    background-color: var(--vs-title-color);
    border-color: var(--vs-theme-color1);
}

.vs-case.style3 .vs-case__wrap .case_txt:hover h3 {
    color: var(--vs-theme-color1);
}

.vs-case.style3 .vs-case__wrap .case_txt:hover .readMore a {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-case.style3 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-case.style3 .scroll-case .slide {
        height: 670px;
    }

    .vs-case.style3 .vs-case__wrap .case_img img {
        height: 550px;
        object-fit: cover;
    }

    .vs-case.style3 .vs-case__wrap .case_txt {
        max-width: 390px;
    }

    .vs-case.style3 .vs-case__wrap .case_txt .readMore::after {
        width: 45%;
    }

    .vs-case.style3 .vsBtn {
        display: none;
    }
}

.vs-case.style3 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-case.style3 .vs-case__wrap .case_txt {
        max-width: none;
        bottom: 15px;
        right: 15px;
        left: 15px;
    }

    .vs-case.style3 .vs-case__wrap .case_txt p {
        font-size: 13px;
        line-height: 18px;
    }

    .vs-case.style3 .vs-case__wrap .case_txt .readMore::after {
        width: 0;
    }
}

.vs-case.style4 .vs-case__wrap span.label {
    background-color: var(--vs-title-color);
}

.vs-case.style4 .vs-case__wrap .case_txt {
    width: 390px;
    height: 140px;
    padding: 20px 25px;
    text-align: left;
    position: absolute;
    bottom: 0;
    background-color: rgba(var(--vs-white-color-rgb), 0.1);
    border: 1px solid rgba(var(--vs-white-color-rgb), 0.3);
    backdrop-filter: blur(5px);
    left: 0;
    right: 0;
    margin: 0 auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.vs-case.style4 .vs-case__wrap .case_txt h3 {
    font-size: 24px;
    color: var(--vs-white-color);
    margin-bottom: 20px;
}

.vs-case.style4 .vs-case__wrap .case_txt .vsBtn {
    padding: 7px 30px;
}

.vs-case.style4 .vs-case__wrap .case_txt:hover {
    background-color: var(--vs-theme-color3);
}

.vs-case.style4 .vs-case__wrap .case_txt:hover .vsBtn {
    background-color: var(--vs-title-color);
}

.vs-case.style4 .vs-case__wrap {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-case.style4 .vs-case__wrap span.label {
        top: 15px;
        left: 15px;
    }

    .vs-case.style4 .vs-case__wrap .case_txt {
        width: 260px;
        height: 130px;
        padding: 10px 25px 0;
    }

    .vs-case.style4 .vs-case__wrap .case_txt h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
}

.vs-case--style5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.vs-case--style5 .vs-case__wrap {
    position: relative;
}

.vs-case--style5 .vs-case__wrap::after {
    content: "";
    background-color: rgba(var(--vs-title-color-rgb), 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 20px;
    transition: all 0.5s ease-in-out;
    z-index: 0;
}

.vs-case--style5 .vs-case__wrap .case_txt form {
    z-index: 1;
}

.vs-case--style5 .vs-case__wrap .case_txt form input::-moz-placeholder {
    color: var(--vs-theme-color5);
}

.vs-case--style5 .vs-case__wrap .case_txt form input::-webkit-input-placeholder {
    color: var(--vs-theme-color5);
}

.vs-case--style5 .vs-case__wrap .case_txt form input:-ms-input-placeholder {
    color: var(--vs-theme-color5);
}

.vs-case--style5 .vs-case__wrap .case_txt form input::placeholder {
    color: var(--vs-theme-color5);
}

.vs-case--style5 .vs-case__wrap .case_txt form button {
    background: var(--vs-theme-color5);
}

.vs-case--style5 .vs-case__wrap:hover::after {
    opacity: 0;
}

.vs-case--style5 .vs-case__wrap:hover .case_txt form input {
    background-color: var(--vs-theme-color5);
}

.vs-case--style5 .vs-case__wrap:hover .case_txt form input::-moz-placeholder {
    color: var(--vs-white-color);
}

.vs-case--style5 .vs-case__wrap:hover .case_txt form input::-webkit-input-placeholder {
    color: var(--vs-white-color);
}

.vs-case--style5 .vs-case__wrap:hover .case_txt form input:-ms-input-placeholder {
    color: var(--vs-white-color);
}

.vs-case--style5 .vs-case__wrap:hover .case_txt form input::placeholder {
    color: var(--vs-white-color);
}

.vs-case--style5 .vs-case__wrap:hover .case_txt form button {
    background: var(--vs-theme-color4);
}

.vs-case--style5 .vs-case__img span.label {
    z-index: 1;
    background-color: rgba(var(--vs-theme-color4-rgb), 0.9);
}

.vs-case--style5 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-case--style5 .vs-case__wrap .case_txt form input {
        font-size: 15px;
        padding-left: 20px;
    }
}

.vs-case--style5 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-case--style5 {
        grid-template-columns: 1fr;
    }
}

.vs-case__casePage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-case__casePage .vs-case__wrap .case_txt form input {
        font-size: 15px;
        padding-left: 20px;
    }
}

.vs-case__casePage {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-case__casePage {
        grid-template-columns: 1fr;
    }
}

/*------------------- 4.11. Testimonial Part -------------------*/
.vs-testimoni {
    position: relative;
}

.vs-testimoni .vs-title__main {
    max-width: 600px;
}

@media (max-width: 1300px) {
    .vs-testimoni .vs-title__main {
        font-size: 46px;
    }
}

.vs-testimoni__wrap {
    background-color: var(--vs-white-color);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni__wrap .gradient-border-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    z-index: -1;
    border-top: 2px solid var(--vs-theme-color1);
    border-right: 2px solid var(--vs-theme-color1);
    border-top-right-radius: 20px;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
    -webkit-mask-image: radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
    mask-image: radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
}

.vs-testimoni__wrap .gradient-border-corner.style2 {
    top: auto;
    left: 0;
    bottom: 0;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--vs-theme-color1);
    border-left: 2px solid var(--vs-theme-color1);
    border-bottom-left-radius: 20px;
    -webkit-mask-image: radial-gradient(circle at bottom left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
    mask-image: radial-gradient(circle at bottom left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
}

.vs-testimoni__wrap .test_txt .star {
    color: #DB9E30;
    padding: 15px 0;
    display: block;
}

.vs-testimoni__wrap .test_txt p {
    transition: all 0.5s ease-in-out;
}

.vs-testimoni__wrap .test_txt .test-admin h3 {
    font-size: 24px;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni__wrap .test_txt .test-admin p {
    margin: 0;
}

.vs-testimoni__wrap:hover {
    background-color: var(--vs-title-color);
}

.vs-testimoni__wrap:hover .test-icon .comma1 {
    opacity: 0;
    visibility: hidden;
}

.vs-testimoni__wrap:hover .test-icon .comma2 {
    opacity: 1;
    visibility: visible;
}

.vs-testimoni__wrap:hover .test_txt p,
.vs-testimoni__wrap:hover .test_txt h3 {
    color: var(--vs-white-color);
}

.vs-testimoni__img {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.vs-testimoni__img .test_img {
    width: 70px;
    height: 70px;
    background-color: var(--vs-theme-color1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vs-testimoni__img .test_img img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.vs-testimoni__img .test-icon {
    position: relative;
}

.vs-testimoni__img .test-icon .comma1 {
    width: 64px;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni__img .test-icon .comma2 {
    position: absolute;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-testimoni .vs-title__main {
        font-size: 42px;
    }
}

.vs-testimoni.style2 .vs-testimoni__wrap {
    background-color: var(--vs-img-bg-color);
}

.vs-testimoni.style2 .vs-testimoni__wrap:hover {
    background-color: var(--vs-title-color);
}

.vs-testimoni--style3 {
    display: flex;
    gap: 30px;
    align-items: center;
}

.vs-testimoni--style3 .vs-testimoni__wrap {
    display: flex;
    gap: 30px;
    padding: 0;
    align-items: center;
    background-color: var(--vs-img-bg-color);
    margin-bottom: 30px;
}

.vs-testimoni--style3 .vs-testimoni__wrap .test_txt {
    position: relative;
    padding-right: 55px;
}

.vs-testimoni--style3 .vs-testimoni__wrap .test_txt .star {
    padding: 0 0 15px;
}

.vs-testimoni--style3 .vs-testimoni__wrap .test_txt p {
    max-width: 340px;
}

.vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon {
    position: absolute;
    bottom: 0;
    right: 30px;
}

.vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon .comma1 {
    width: 64px;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon .comma2 {
    position: absolute;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni--style3 .vs-testimoni__wrap:hover {
    background-color: var(--vs-title-color);
}

.vs-testimoni--style3 .vs-testimoni__wrap:hover .test-icon .comma1 {
    opacity: 0;
    visibility: hidden;
}

.vs-testimoni--style3 .vs-testimoni__wrap:hover .test-icon .comma2 {
    opacity: 1;
    visibility: visible;
}

.vs-testimoni--style3 .vs-testimoni__img {
    display: block;
}

.vs-testimoni--style3 .vs-testimoni__img .test_img {
    width: auto;
    height: auto;
    background-color: transparent;
    border-radius: 0;
    display: block;
}

.vs-testimoni--style3 .vs-testimoni__img .test_img img {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 220px;
    height: 255px;
    object-fit: cover;
}

.vs-testimoni--style3 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-testimoni--style3 .vs-testimoni__wrap {
        gap: 20px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt {
        padding-right: 15px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .star {
        padding: 0 0 10px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt p {
        max-width: 290px;
        font-size: 14px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon {
        width: 40px;
    }
}

.vs-testimoni--style3 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-testimoni--style3 {
        display: block;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap {
        gap: 30px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .star {
        padding: 0 0 15px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt p {
        max-width: 390px;
        font-size: 16px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon {
        width: 50px;
    }
}

.vs-testimoni--style3 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt p {
        max-width: 245px;
        font-size: 14px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon {
        width: 40px;
    }
}

.vs-testimoni--style3 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-testimoni--style3 .vs-testimoni__wrap {
        gap: 20px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt {
        padding-right: 5px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt p {
        max-width: 210px;
        font-size: 13px;
        line-height: 20px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt h3 {
        margin-bottom: 5px;
        font-size: 20px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon {
        width: 30px;
        bottom: -5px;
    }
}

@media (max-width: 420px) {
    .vs-testimoni--style3 .vs-testimoni__wrap {
        display: block;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_img img {
        width: 100%;
        height: auto;
        border-radius: 22px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt {
        padding: 20px 30px;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt p {
        max-width: none;
    }

    .vs-testimoni--style3 .vs-testimoni__wrap .test_txt .test-icon {
        width: 40px;
        bottom: 20px;
    }
}

.vs-testimoni.style4 {
    padding-top: 485px;
}

.vs-testimoni.style4 .testimonialSlider {
    overflow: hidden;
    padding-bottom: 30px;
}

.vs-testimoni.style4 .testimonialSlider .vs-navigation.style3 {
    margin: 0 auto;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide {
    transition: all 0.5s ease;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide:last-child {
    margin: 0 !important;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide-active {
    width: 655px !important;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide-active .vs-testimoni__wrap {
    width: 100%;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide-active .vs-testimoni__wrap .test_txt {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide-active .vs-testimoni__wrap .test_img img {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.vs-testimoni.style4 .testimonialSlider .swiper-slide-prev,
.vs-testimoni.style4 .testimonialSlider .swiper-slide-next {
    width: 300px !important;
}

.vs-testimoni.style4 .vs-testimoni__wrap {
    padding: 0;
    background-color: var(--vs-title-color);
    margin-bottom: 30px;
    height: 330px;
    width: 300px;
    overflow: hidden;
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
    position: absolute;
    top: 30px;
    padding-right: 20px;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    right: 0;
    max-width: 325px;
    transition: 0.5s;
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_txt .star {
    color: var(--vs-theme-color3);
    padding: 0 0 15px;
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_txt h3 {
    color: var(--vs-white-color);
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_txt p {
    color: var(--vs-white-color);
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_txt .test-icon {
    position: absolute;
    bottom: 0;
    right: 30px;
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_txt .test-icon .img {
    width: 64px;
    transition: all 0.5s ease-in-out;
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_img {
    width: 300px;
    height: 330px;
    background-color: transparent;
    border-radius: 0;
    display: block;
    position: relative;
    z-index: 2;
}

.vs-testimoni.style4 .vs-testimoni__wrap .test_img img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1350px) {
    .vs-testimoni.style4 .testimonialSlider {
        max-width: 1110px;
        margin: 0 auto;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-active {
        width: 550px !important;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-prev,
    .vs-testimoni.style4 .testimonialSlider .swiper-slide-next {
        width: 250px !important;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap {
        width: 250px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
        max-width: 270px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt .test-icon img {
        width: 30px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img {
        width: 250px;
        height: 330px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img img {
        width: 100%;
        height: 100%;
    }
}

.vs-testimoni.style4 {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-testimoni.style4 .testimonialSlider {
        max-width: 820px;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-active {
        width: 400px !important;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-prev,
    .vs-testimoni.style4 .testimonialSlider .swiper-slide-next {
        width: 190px !important;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap {
        height: 250px;
        width: 180px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
        max-width: 190px;
        top: 15px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt p {
        font-size: 13px;
        line-height: 20px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt h3 {
        font-size: 20px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt .test-icon img {
        width: 30px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img {
        width: 190px;
        height: 250px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img img {
        width: 100%;
        height: 100%;
    }
}

.vs-testimoni.style4 {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-testimoni.style4 .testimonialSlider {
        max-width: none;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-active {
        width: 355px !important;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-prev,
    .vs-testimoni.style4 .testimonialSlider .swiper-slide-next {
        width: 150px !important;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap {
        height: 220px;
        width: 150px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
        top: 25px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt p {
        height: 58px;
        overflow: hidden;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt .test-admin p {
        height: auto;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img {
        width: 150px;
        height: 220px;
    }
}

.vs-testimoni.style4 {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-testimoni.style4 {
        margin: 0;
        padding-top: 460px;
    }

    .vs-testimoni.style4 .testimonialSlider {
        padding: 0;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-active {
        width: 100% !important;
    }

    .vs-testimoni.style4 .testimonialSlider .swiper-slide-prev,
    .vs-testimoni.style4 .testimonialSlider .swiper-slide-next {
        width: 100% !important;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap {
        position: relative;
        height: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
        max-width: 230px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img {
        width: 200px;
    }
}

.vs-testimoni.style4 {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-testimoni.style4 .vs-testimoni__wrap {
        max-width: 350px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
        max-width: 185px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img {
        width: 150px;
    }
}

@media (max-width: 370px) {
    .vs-testimoni.style4 .testimonialSlider .swiper-slide {
        width: 100% !important;
        height: 490px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt {
        padding: 25px;
        position: relative;
        max-width: none;
        top: 0;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt p {
        height: auto;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_txt .test-icon {
        bottom: 30px;
        right: 30px;
    }

    .vs-testimoni.style4 .vs-testimoni__wrap .test_img {
        width: 100%;
        height: 250px;
    }
}

.vs-testimoni.style5 .vs-testimoni__wrap:hover {
    background-color: var(--vs-theme-color4);
}

.vs-testimoni.style5 .vs-testimoni__wrap:hover .gradient-border-corner {
    border-top: 2px solid var(--vs-white-color);
    border-right: 2px solid var(--vs-white-color);
}

.vs-testimoni.style5 .vs-testimoni__wrap:hover .gradient-border-corner.style2 {
    border-bottom: 2px solid var(--vs-white-color);
    border-left: 2px solid var(--vs-white-color);
}

.vs-testimoni.style5 .vs-testimoni__wrap:hover .test_txt .star,
.vs-testimoni.style5 .vs-testimoni__wrap:hover .test_txt p,
.vs-testimoni.style5 .vs-testimoni__wrap:hover .test_txt h3 {
    color: var(--vs-white-color);
}

.vs-testimoni.style5 .vs-testimoni__wrap:hover .test_img {
    background-color: var(--vs-theme-color5);
}

.vs-testimoni.style5 .vs-testimoni__img .test_img {
    background-color: var(--vs-theme-color4);
    transition: all 0.5s ease-in-out;
}

/*------------------- 4.12. Blog Part -------------------*/
.vs-blog {
    position: relative;
}

.vs-blog .vs-title__main {
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 1300px) {
    .vs-blog .vs-title__main {
        font-size: 46px;
    }
}

.vs-blog__wrap .blog_img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
    overflow: hidden;
}

.vs-blog__wrap .blog_img img {
    width: 100%;
}

.vs-blog__wrap .blog_img .bdate {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 170px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: var(--vs-white-color);
    border-bottom: 2px solid var(--vs-theme-color1);
    text-transform: capitalize;
    margin: 0;
    transition: all 0.5s ease-in-out;
}

.vs-blog__wrap .blog_img .bdate.style2 {
    bottom: 20px;
    right: 20px;
    left: auto;
    width: 45px;
    height: 50px;
    padding: 9px 0;
    line-height: 16px;
    border-radius: 5px;
    font-weight: 500;
}

.vs-blog__wrap .blog_img .bdate.style2 span {
    display: block;
    color: var(--vs-theme-color1);
}

.vs-blog__wrap .blog_content {
    background-color: var(--vs-img-bg-color);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 30px;
    transition: all 0.5s ease-in-out;
}

.vs-blog__wrap .blog_content h3 {
    transition: all 0.5s ease-in-out;
    display: inline;
    background-image: linear-gradient(var(--vs-white-color), var(--vs-white-color));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
}

.vs-blog__wrap .blog_content h3:hover {
    background-size: 100% 2px;
}

.vs-blog__wrap .blog_content .blog-meta {
    margin-bottom: 15px;
}

.vs-blog__wrap .blog_content .blog-meta a {
    padding-right: 30px;
    color: var(--vs-body-color);
    text-transform: capitalize;
    font-weight: 400;
    transition: all 0.5s ease-in-out;
}

.vs-blog__wrap .blog_content .blog-meta a i {
    padding-right: 8px;
    transition: all 0.5s ease-in-out;
}

.vs-blog__wrap .blog_content .blog-meta a:hover i {
    color: var(--vs-theme-color1);
}

.vs-blog__wrap .blog_content .blog-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.vs-blog__wrap .blog_content .blog-btn .readMore {
    display: inline-block;
    background: var(--vs-theme-color1);
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-family: var(--vs-title-font);
    font-weight: bold;
    border-radius: 50px;
    width: auto;
    height: auto;
    line-height: 16px;
    padding: 13px 32px;
    transition: all 0.5s ease-in-out;
}

.vs-blog__wrap .blog_content .blog-btn .readMore:hover {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-blog__wrap .blog_content .blog-btn a.blog-share {
    color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    display: inline-block;
    background: var(--vs-title-color);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 43px;
    border-radius: 10px;
}

.vs-blog__wrap:hover .blog_img .bdate {
    color: var(--vs-white-color);
    background-color: var(--vs-title-color);
    border-bottom: 2px solid var(--vs-theme-color2);
}

.vs-blog__wrap:hover .blog_content {
    background-color: var(--vs-title-color);
}

.vs-blog__wrap:hover .blog_content .blog-meta a {
    color: var(--vs-white-color);
}

.vs-blog__wrap:hover .blog_content h3 {
    color: var(--vs-white-color);
}

.vs-blog__wrap:hover .blog_content .blog-btn a.blog-share {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
}

.vs-blog {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-blog__wrap .blog_img .bdate {
        left: 20px;
    }

    .vs-blog__wrap .blog_content {
        padding: 30px 20px;
    }

    .vs-blog__wrap .blog_content h3 {
        font-size: 24px;
    }

    .vs-blog__wrap .blog_content .blog-meta a {
        padding-right: 15px;
    }

    .vs-blog__wrap .blog_content .blog-meta a i {
        padding-right: 5px;
    }
}

.vs-blog {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-blog .vs-title__main {
        font-size: 43px;
    }
}

.vs-blog.style2 .vs-blog__wrap .blog_img .bdate {
    background-color: var(--vs-img-bg-color);
}

.vs-blog.style2 .vs-blog__wrap .blog_content {
    background-color: var(--vs-white-color);
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-blog.style2 .vs-blog__wrap .blog_content {
        padding: 30px;
    }
}

.vs-blog.style2 .vs-blog__wrap:hover .blog_img .bdate {
    background-color: var(--vs-title-color);
}

.vs-blog.style2 .vs-blog__wrap:hover .blog_content {
    background-color: var(--vs-title-color);
}

.vs-blog.style4 .vs-blog__wrap {
    position: relative;
}

.vs-blog.style4 .vs-blog__wrap .blog_img {
    border-radius: 20px;
}

.vs-blog.style4 .vs-blog__wrap .blog_img .bdate {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--vs-white-color);
    border-radius: 40px;
    border: none;
}

.vs-blog.style4 .vs-blog__wrap .blog_content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: var(--vs-white-color);
    border-radius: 20px;
}

.vs-blog.style4 .vs-blog__wrap .blog_content h3 {
    background-image: linear-gradient(var(--vs-title-color), var(--vs-title-color));
}

.vs-blog.style4 .vs-blog__wrap .blog_content .blog-meta a:hover i {
    color: var(--vs-theme-color3);
}

.vs-blog.style4 .vs-blog__wrap .blog_content .blog-btn .readMore {
    background: var(--vs-title-color);
}

.vs-blog.style4 .vs-blog__wrap .blog_content .blog-btn .readMore:hover {
    background: var(--vs-theme-color3);
}

.vs-blog.style4 .vs-blog__wrap .blog_content .blog-btn a {
    background: var(--vs-theme-color3);
}

.vs-blog.style4 .vs-blog__wrap .blog_content .blog-btn a:hover {
    background: var(--vs-theme-color3);
}

.vs-blog.style4 .vs-blog__wrap:hover .blog_img .bdate {
    background-color: var(--vs-theme-color3);
}

.vs-blog.style4 .vs-blog__wrap:hover .blog_content {
    background-color: var(--vs-white-color);
}

.vs-blog.style4 .vs-blog__wrap:hover .blog_content .blog-meta a {
    color: var(--vs-body-color);
}

.vs-blog.style4 .vs-blog__wrap:hover .blog_content h3 {
    color: var(--vs-title-color);
}

.vs-blog.style4 .vs-blog__wrap:hover .blog_content .blog-btn a {
    background: var(--vs-title-color);
}

.vs-blog.style4 .vs-blog__wrap {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-blog.style4 .vs-blog__wrap h3 {
        font-size: 22px;
    }
}

@media (max-width: 370px) {
    .vs-blog.style4 .vs-blog__wrap .blog_img {
        height: 420px;
    }

    .vs-blog.style4 .vs-blog__wrap .blog_img .bdate {
        top: 12px;
        left: 12px;
        width: 140px;
        height: 37px;
        line-height: 20px;
        padding: 10px;
    }

    .vs-blog.style4 .vs-blog__wrap .blog_img img {
        height: 420px;
        object-fit: cover;
    }

    .vs-blog.style4 .vs-blog__wrap .blog-meta a {
        font-size: 14px;
        padding-right: 10px;
    }

    .vs-blog.style4 .vs-blog__wrap h3 {
        font-size: 20px;
    }
}

.vs-blog.style5 {
    padding-top: 635px;
}

.vs-blog.style5 .vs-blog__wrap .blog_content .blog-meta a:hover i {
    color: var(--vs-theme-color4);
}

.vs-blog.style5 .vs-blog__wrap .blog_content .blog-btn .readMore {
    background: var(--vs-theme-color5);
}

.vs-blog.style5 .vs-blog__wrap .blog_content .blog-btn .readMore:hover {
    background: var(--vs-theme-color4);
}

.vs-blog.style5 .vs-blog__wrap .blog_content .blog-btn a {
    background: var(--vs-theme-color4);
}

.vs-blog.style5 .vs-blog__wrap:hover .blog_img .bdate {
    background-color: var(--vs-theme-color5);
}

.vs-blog.style5 .vs-blog__wrap:hover .blog_content .blog-btn a {
    background: var(--vs-theme-color5);
}

@media (max-width: 1300px) {
    .vs-blog.style5 .vs-blog__wrap .blog_content .blog-meta a {
        padding-right: 15px;
    }

    .vs-blog.style5 h3 {
        font-size: 22px;
    }
}

.vs-blog__blogPage h2 {
    font-size: 40px;
    transition: 0.5s;
}

.vs-blog__blogPage .vs-blog__wrap .blog_content .blog-btn .readMore {
    padding: 22px 60px;
    font-size: 16px;
}

.vs-blog__blogPage .vs-blog__wrap .blog_content .blog-btn a.blog-share {
    width: 60px;
    height: 60px;
    line-height: 63px;
    font-size: 24px;
}

.vs-blog__blogPage .vs-blog__wrap:hover .blog_content h2 {
    color: var(--vs-white-color);
}

.vs-blog__blogPage {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-blog__blogPage h2 {
        font-size: 32px;
    }

    .vs-blog__blogPage .vs-blog__wrap .blog-btn .readMore {
        padding: 18px 50px;
    }

    .vs-blog__blogPage .vs-blog__wrap .blog-btn a {
        width: 50px;
        height: 50px;
        line-height: 53px;
        font-size: 22px;
    }
}

.vs-blog__blogPage {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-blog__blogPage h2 {
        font-size: 30px;
    }
}

.vs-blog__blogPage {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-blog__blogPage h2 {
        font-size: 26px;
    }

    .vs-blog__blogPage .vs-blog__wrap .blog-btn .readMore {
        padding: 20px 40px;
    }
}

@media (max-width: 370px) {
    .vs-blog__blogPage h2 {
        font-size: 22px;
    }
}

.vs-blog__blogGridPage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.vs-blog__blogGridPage h2 {
    font-size: 30px;
    transition: 0.5s;
}

.vs-blog__blogGridPage .vs-blog__wrap:hover .blog_content h2 {
    color: var(--vs-white-color);
}

@media (max-width: 1300px) {
    .vs-blog__blogGridPage h2 {
        font-size: 26px;
    }
}

.vs-blog__blogGridPage {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-blog__blogGridPage h2 {
        font-size: 22px;
    }
}

.vs-blog__blogGridPage {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-blog__blogGridPage {
        grid-template-columns: 1fr;
    }

    .vs-blog__blogGridPage h2 {
        font-size: 30px;
    }
}

.vs-blog__blogGridPage {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-blog__blogGridPage h2 {
        font-size: 20px;
    }
}

.vs-blog__blogDpage .blogDpage {
    background-color: var(--vs-img-bg-color);
    border-radius: 20px;
    overflow: hidden;
    border-bottom: 4px solid var(--vs-theme-color2);
}

.vs-blog__blogDpage .blogDpage .blog_content {
    padding: 40px;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-meta {
    margin: 10px 0 20px;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-meta a {
    padding-right: 30px;
    color: var(--vs-body-color);
    text-transform: capitalize;
    font-weight: 400;
    transition: all 0.5s ease-in-out;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-meta a i {
    padding-right: 8px;
    transition: all 0.5s ease-in-out;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-meta a:hover i {
    color: var(--vs-theme-color1);
}

.vs-blog__blogDpage .blogDpage .blog_content h2 {
    font-size: 46px;
    margin-bottom: 30px;
}

.vs-blog__blogDpage .blogDpage .blog_content h3 {
    margin: 30px 0 20px;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-txt ul {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-txt ul li {
    margin-bottom: 10px;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-txt ul li i {
    color: var(--vs-theme-color1);
    margin-right: 6px;
    font-size: 18px;
}

.vs-blog__blogDpage .blogDpage .blog_content .blog-video {
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    margin-bottom: 30px;
}

.vs-blog__blogDpage .blogDpage .blog_content .qoute {
    text-align: center;
    margin: 40px 0;
}

.vs-blog__blogDpage .blogDpage .blog_content .qoute p {
    font-weight: 500;
    margin: 30px 20px 0;
}

.vs-blog__blogDpage .blogDpage .blog_content .qoute h3 {
    font-size: 24px;
    margin: 20px 0 5px;
}

.vs-blog__blogDpage .blogDpage .blog_content .listBTN {
    margin: 50px 0 20px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(var(--vs-theme-color1-rgb), 0.5);
    padding-top: 40px;
}

.vs-blog__blogDpage .blogDpage .blog_content .listBTN .blogD-tag label {
    text-transform: capitalize;
    font-size: 20px;
    font-family: var(--vs-title-font);
    color: var(--vs-title-color);
    font-weight: bold;
    margin-right: 10px;
}

.vs-blog__blogDpage .blogDpage .blog_content .listBTN .blogD-tag a {
    text-transform: capitalize;
    color: var(--vs-body-color);
    font-size: 14px;
    font-weight: 400;
    background-color: var(--vs-white-color);
    border-radius: 6px;
    padding: 8px 15px;
    margin-right: 8px;
}

.vs-blog__blogDpage .blogDpage .blog_content .listBTN .blogD-tag a:hover {
    color: var(--vs-theme-color1);
}

.vs-blog__blogDpage .blogDpage .blog_content .listBTN .social-style li span {
    text-transform: capitalize;
    font-size: 20px;
    font-family: var(--vs-title-font);
    color: var(--vs-title-color);
    font-weight: bold;
    margin-right: 10px;
}

.vs-blog__blogDpage .blogDpage .blog_content .listBTN .social-style li a {
    margin-right: 0;
    margin-left: 8px;
    font-size: 16px;
}

.vs-blog__blogDpage .blogD_comments {
    background-color: var(--vs-img-bg-color);
    padding: 40px;
    border-radius: 20px;
    margin-top: 50px;
}

.vs-blog__blogDpage .blogD_comments h2 {
    text-transform: capitalize;
    margin: 0 0 20px;
    font-weight: bold;
}

.vs-blog__blogDpage .blogD_comments svg {
    margin-bottom: 40px;
}

.vs-blog__blogDpage .blogD_comments .comm-item .item-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    background-color: var(--vs-white-color);
    border-radius: 20px;
    padding: 30px;
}

@media (max-width: 480px) {
    .vs-blog__blogDpage .blogD_comments .comm-item .item-wrap {
        grid-template-columns: 1fr;
    }
}

.vs-blog__blogDpage .blogD_comments .comm-item__img img {
    border-radius: 20px;
    width: 130px;
    height: 130px;
}

.vs-blog__blogDpage .blogD_comments .comm-item__txt {
    margin-left: 25px;
    font-weight: 400;
}

.vs-blog__blogDpage .blogD_comments .comm-item__txt span i {
    color: var(--vs-theme-color1);
    margin-right: 8px;
}

.vs-blog__blogDpage .blogD_comments .comm-item__txt button {
    font-family: var(--vs-title-font);
    background: var(--vs-title-color);
    border: 0;
    border-radius: 10px;
    width: 110px;
    line-height: 20px;
    color: var(--vs-white-color);
    text-transform: capitalize;
    font-weight: bold;
    transition: all 0.5s ease 0s;
    padding: 10px;
}

.vs-blog__blogDpage .blogD_comments .comm-item__txt h3 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: bold;
    text-transform: capitalize;
}

.vs-blog__blogDpage .blogD_comments .comm-item__txt p {
    margin-bottom: 0;
    font-weight: 400;
}

.vs-blog__blogDpage .blogD_comments .comm-item:hover button {
    background-color: var(--vs-theme-color1);
}

.vs-blog__blogDpage .blogD_comments .vs-comments {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vs-blog__blogDpage .blogD_comments .vs-comments .comments {
    list-style: none;
    padding-left: 60px;
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-blog__blogDpage .blogD_comments .vs-comments .comments {
        padding-left: 40px;
    }
}

.vs-blog__blogDpage .blogD_comments .vs-comments .comments {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-blog__blogDpage .blogD_comments .vs-comments .comments {
        padding-left: 0px;
    }
}

.vs-blog__blogDpage .blog_reply {
    padding: 40px;
    background-color: var(--vs-img-bg-color);
    border-radius: 20px;
    margin-top: 50px;
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-blog__blogDpage .blog_reply {
        padding: 20px;
    }
}

.vs-blog__blogDpage .blog_reply h2 {
    margin: 0 0 20px;
}

.vs-blog__blogDpage .blog_reply svg {
    margin-bottom: 40px;
}

@media (max-width: 380px) {
    .vs-blog__blogDpage .blog_reply {
        padding: 30px 20px 40px;
    }
}

.vs-blog__blogDpage .blog_reply .name_email {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

@media (max-width: 480px) {
    .vs-blog__blogDpage .blog_reply .name_email {
        grid-template-columns: 1fr;
    }
}

.vs-blog__blogDpage .blog_reply .name_email input {
    width: 100%;
    height: 60px;
    padding: 10px 20px;
    text-transform: capitalize;
    border-radius: 10px;
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.5);
}

.vs-blog__blogDpage .blog_reply .name_email input:focus {
    outline: none;
}

.vs-blog__blogDpage .blog_reply textarea {
    width: 100%;
    height: 154px;
    text-transform: capitalize;
    padding: 15px;
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.5);
    border-radius: 10px;
    margin-top: 20px;
}

.vs-blog__blogDpage .blog_reply textarea:focus {
    outline: none;
    box-shadow: none;
}

.vs-blog__blogDpage .blog_reply input[type=checkbox] {
    border: none;
    width: 20px;
    margin-right: 15px;
    outline: none;
    accent-color: var(--vs-theme-color1);
}

.vs-blog__blogDpage .blog_reply label {
    text-transform: capitalize;
    font-weight: 400;
}

.vs-blog__blogDpage .blog_reply .post-btn {
    border: none;
    text-transform: capitalize;
    text-align: center;
    background-color: var(--vs-theme-color1);
    color: var(--vs-white-color);
    font-family: var(--vs-title-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 22px 40px;
    border-radius: 60px;
    transition: 0.5s;
    margin-bottom: 20px;
}

.vs-blog__blogDpage .blog_reply .post-btn:hover {
    background-color: var(--vs-title-color);
}

@media (max-width: 1300px) {
    .vs-blog__blogDpage .blogDpage .blog_content h2 {
        font-size: 38px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .blog-txt ul.d-block li {
        font-size: 14px;
    }
}

.vs-blog__blogDpage {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-blog__blogDpage .blogDpage .blog_content {
        padding: 30px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .blog-txt ul li {
        font-size: 14px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .listBTN {
        gap: 20px;
    }

    .vs-blog__blogDpage .blogD_comments {
        padding: 30px;
    }

    .vs-blog__blogDpage .blogD_comments .vs-comments .comments {
        padding-left: 40px;
    }
}

.vs-blog__blogDpage {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-blog__blogDpage .blogDpage .blog_content {
        padding: 20px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content h2 {
        font-size: 32px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .blog-txt ul {
        grid-template-columns: 1fr;
    }

    .vs-blog__blogDpage .blogD_comments .comm-item .item-wrap {
        grid-template-columns: 1fr;
    }

    .vs-blog__blogDpage .blogD_comments .comm-item__txt {
        margin-left: 0px;
    }

    .vs-blog__blogDpage .blog_reply {
        padding: 20px;
    }

    .vs-blog__blogDpage .blog_reply .name_email {
        grid-template-columns: 1fr;
    }
}

.vs-blog__blogDpage {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-blog__blogDpage .blogDpage .blog_content {
        padding: 20px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .blog-meta a {
        padding-right: 10px;
        font-size: 14px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content h2 {
        font-size: 24px;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .blog-video {
        height: 280px;
    }

    .vs-blog__blogDpage .blogD_comments {
        padding: 20px;
    }

    .vs-blog__blogDpage .blogD_comments .vs-comments .comments {
        padding-left: 0;
    }
}

@media (max-width: 425px) {
    .vs-blog__blogDpage .blogDpage .blog_content .qoute p {
        margin: 30px 0 0;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .listBTN .blogD-tag label {
        margin-right: 0;
    }

    .vs-blog__blogDpage .blogDpage .blog_content .listBTN .blogD-tag a {
        font-size: 12px;
        padding: 8px;
        margin-right: 0;
        margin-left: 3px;
    }

    .vs-blog__blogDpage .blogD_comments .comm-item .item-wrap {
        padding: 30px 20px;
    }

    .vs-blog__blogDpage .blogD_comments .comm-item__img {
        margin-bottom: 10px;
    }

    .vs-blog__blogDpage .blogD_comments .comm-item__txt h3 {
        margin: 8px 0;
    }
}

/*------------------- 4.13. videoCount Part -------------------*/
.vs-videoCount__button {
    display: flex;
    justify-content: center;
}

.vs-videoCount__button .play-btn {
    --icon-size: 120px;
}

.vs-videoCount__button .play-btn i {
    --icon-size: 120px;
    font-size: 32px;
    background: rgba(var(--vs-white-color-rgb), 0.2);
    border: 2px solid var(--vs-white-color);
}

.vs-videoCount__button .play-btn:hover:after,
.vs-videoCount__button .play-btn:hover::before,
.vs-videoCount__button .play-btn:hover i {
    background-color: var(--vs-theme-color2);
}

.vs-videoCount .vs-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1480px;
    height: 245px;
    gap: 30px;
    margin: 100px -80px 0;
    border-radius: 20px;
    z-index: 1;
    position: relative;
}

.vs-videoCount .vs-counter .counter-body {
    position: relative;
}

.vs-videoCount .vs-counter .counter-body::before,
.vs-videoCount .vs-counter .counter-body::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    opacity: 0.3;
}

.vs-videoCount .vs-counter .counter-body::before {
    top: 10px;
    right: 10px;
    border-top: 2px solid var(--vs-white-color);
    border-right: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-videoCount .vs-counter .counter-body::after {
    right: 10px;
    bottom: 10px;
    border-right: 2px solid var(--vs-white-color);
    border-bottom: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-videoCount .vs-counter .counter-body:hover::before,
.vs-videoCount .vs-counter .counter-body:hover::after {
    opacity: 1;
}

.vs-videoCount .vs-counter .counter-txt {
    text-align: center;
    width: 308px;
    padding: 20px;
    position: relative;
}

.vs-videoCount .vs-counter .counter-txt h2 {
    color: var(--vs-white-color);
}

.vs-videoCount .vs-counter .counter-txt h3 {
    font-size: 24px;
    color: var(--vs-white-color);
}

@media (max-width: 1400px) {
    .vs-videoCount .vs-counter .counter-txt {
        width: 250px;
        padding: 10px;
    }

    .vs-videoCount .vs-counter .counter-txt h3 {
        font-size: 20px;
    }
}

.vs-videoCount .vs-counter .counter-txt {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-videoCount .vs-counter .counter-txt {
        width: 200px;
    }

    .vs-videoCount .vs-counter .counter-txt h3 {
        font-size: 16px;
    }
}

.vs-videoCount .vs-counter .counter-txt::before,
.vs-videoCount .vs-counter .counter-txt::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--vs-white-color);
    transition: all 0.5s ease-in-out;
    opacity: 0.2;
}

.vs-videoCount .vs-counter .counter-txt::before {
    top: 10px;
    left: 10px;
    border-top: 2px solid var(--vs-white-color);
    border-left: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-videoCount .vs-counter .counter-txt::after {
    left: 10px;
    bottom: 10px;
    border-left: 2px solid var(--vs-white-color);
    border-bottom: 2px solid var(--vs-white-color);
    transition: all 0.5s ease-in-out;
}

.vs-videoCount .vs-counter .counter-txt:hover::before,
.vs-videoCount .vs-counter .counter-txt:hover::after {
    opacity: 1;
}

@media (max-width: 1600px) {
    .vs-videoCount .vs-counter {
        width: auto;
        margin: 80px 0 0;
        gap: 15px;
    }
}

.vs-videoCount .vs-counter {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-videoCount .vs-counter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 40px;
        height: auto;
    }

    .vs-videoCount .vs-counter .counter-txt {
        width: auto;
    }

    .vs-videoCount .vs-counter .counter-txt h3 {
        font-size: 20px;
    }
}

.vs-videoCount .vs-counter {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-videoCount .vs-counter {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 350px) {
    .vs-videoCount .vs-counter {
        padding: 20px;
    }
}

/*------------------- 4.14. Instagram Part -------------------*/
.vs-insta {
    padding: 70px 0;
    background-color: var(--vs-theme-color3);
}

.vs-insta__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.vs-insta__wrap .insta-box {
    position: relative;
    overflow: hidden;
}

.vs-insta__wrap .insta-box .insta-img {
    border: 2px solid var(--vs-white-color);
    border-radius: 20px;
}

.vs-insta__wrap .insta-box .insta-img img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 20px;
}

.vs-insta__wrap .insta-box .insta-img .insta-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.vs-insta__wrap .insta-box .insta-img .insta-icon::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: var(--vs-title-color);
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

.vs-insta__wrap .insta-box .insta-img .insta-icon i {
    width: 50px;
    height: 50px;
    background-color: var(--vs-white-color);
    line-height: 50px;
    font-size: 20px;
    color: var(--vs-theme-color3);
    border-radius: 10px;
    text-align: center;
    position: relative;
    z-index: 1;
    transform: translateY(25px);
    transition: all 0.5s ease-in-out;
}

.vs-insta__wrap .insta-box:hover .insta-img .insta-icon {
    opacity: 1;
    visibility: visible;
}

.vs-insta__wrap .insta-box:hover .insta-img .insta-icon::after {
    width: 100%;
}

.vs-insta__wrap .insta-box:hover .insta-img .insta-icon i {
    transform: translateY(0px);
}

.vs-insta__wrap {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-insta__wrap {
        flex-wrap: wrap;
    }
}

/*------------------- 4.15. Instagram Part -------------------*/
.vs-contact .contact-info {
    background-color: var(--vs-img-bg-color);
    border-radius: 20px;
    padding: 30px 30px 20px;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}

.vs-contact .contact-info h2 {
    font-size: 30px;
    max-width: 240px;
    margin-bottom: 20px;
    transition: 0.5s;
}

.vs-contact .contact-info svg {
    margin-bottom: 10px;
}

.vs-contact .contact-info svg path {
    fill: var(--vs-title-color);
    transition: 0.5s;
}

.vs-contact .contact-info .con-icon {
    background-color: var(--vs-white-color);
    border: 1px solid var(--vs-theme-color1);
    width: 80px;
    height: 80px;
    line-height: 82px;
    text-align: center;
    border-radius: 10px;
    font-size: 36px;
    color: var(--vs-title-color);
    transition: 0.5s;
}

.vs-contact .contact-info p {
    max-width: 200px;
}

.vs-contact .contact-info img {
    position: absolute;
    bottom: -5px;
    left: 50%;
}

.vs-contact .contact-info ul {
    list-style: none;
    padding: 0;
}

.vs-contact .contact-info ul li {
    margin-bottom: 5px;
}

.vs-contact .contact-info ul li a {
    color: var(--vs-body-color);
    transition: all 0.5s ease;
    position: relative;
}

.vs-contact .contact-info ul li a::before {
    position: absolute;
    content: "";
    width: 0%;
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    visibility: hidden;
    height: 2px;
    background-color: var(--vs-theme-color1);
    transition: all 0.5s ease-in-out;
}

.vs-contact .contact-info ul li a:hover {
    color: var(--vs-theme-color1);
}

.vs-contact .contact-info ul li a:hover::before {
    left: 0;
    right: auto;
    opacity: 1;
    visibility: visible;
    width: 100%;
}

.vs-contact .contact-info .bg-icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    font-size: 115px;
    color: var(--vs-theme-color1);
    opacity: 0.1;
}

.vs-contact .contact-info:hover {
    background-color: var(--vs-title-color);
}

.vs-contact .contact-info:hover h2,
.vs-contact .contact-info:hover p {
    color: var(--vs-white-color);
}

.vs-contact .contact-info:hover .con-icon {
    background-color: var(--vs-theme-color2);
    border: 1px solid var(--vs-theme-color2);
    color: var(--vs-white-color);
}

.vs-contact .contact-info:hover ul li a {
    color: var(--vs-white-color);
}

.vs-contact .contact-info:hover svg path {
    fill: var(--vs-white-color);
}

.vs-contact .contact-box {
    background-color: var(--vs-img-bg-color);
    border-radius: 20px;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.vs-contact .contact-box .form-group {
    position: relative;
    margin-bottom: 20px;
}

.vs-contact .contact-box .form-group i {
    position: absolute;
    right: 25px;
    font-size: 14px;
    top: 36%;
}

.vs-contact .contact-box select,
.vs-contact .contact-box input {
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
    background-color: var(--vs-white-color);
    color: var(--vs-body-color);
    font-size: 16px;
    font-weight: 400;
    padding: 20px;
    border-radius: 10px;
    text-transform: capitalize;
}

.vs-contact .contact-box select:focus,
.vs-contact .contact-box input:focus {
    box-shadow: none;
}

.vs-contact .contact-box select::placeholder,
.vs-contact .contact-box input::placeholder {
    color: var(--vs-body-color);
}

.vs-contact .contact-box select:hover,
.vs-contact .contact-box input:hover {
    background-color: var(--vs-white-color);
    color: var(--vs-title-color);
}

.vs-contact .contact-box select:hover::placeholder,
.vs-contact .contact-box input:hover::placeholder {
    color: var(--vs-title-color);
}

.vs-contact .contact-box select {
    color: var(--vs-body-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 16px 13px;
    transition: 0.5s;
}

.vs-contact .contact-box textarea {
    border: 1px solid rgba(var(--vs-theme-color1-rgb), 0.3);
    background-color: var(--vs-white-color);
    color: var(--vs-body-color);
    padding: 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
}

.vs-contact .contact-box textarea:focus {
    box-shadow: none;
}

.vs-contact .contact-box textarea::placeholder {
    color: var(--vs-body-color);
}

.vs-contact .contact-box .con-btn {
    border: 0;
    width: 100%;
    font-family: var(--vs-title-font);
    text-transform: capitalize;
    color: var(--vs-white-color);
    background: var(--vs-title-color);
    border-radius: 50px;
    font-weight: bold;
    padding: 18px;
    margin: 25px 0 10px;
    font-size: 16px;
    transition: all 0.5s ease-in-out;
}

.vs-contact .contact-box .con-btn:hover {
    background: linear-gradient(90deg, var(--vs-theme-color2) 0%, var(--vs-theme-color1) 100%);
    transition: all 0.5s ease-in-out;
}

@media (max-width: 1300px) {
    .vs-contact .contact-info h2 {
        font-size: 26px;
        max-width: 190px;
    }

    .vs-contact .contact-box {
        padding: 45px;
    }
}

.vs-contact {
    /* Large devices */
}

@media (max-width: 1199px) {
    .vs-contact .contact-info {
        padding: 28px 20px 20px;
    }

    .vs-contact .contact-info h2 {
        font-size: 24px;
        max-width: 180px;
    }
}

.vs-contact {
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-contact .contactP {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }

    .vs-contact .contact-info {
        margin-bottom: 0;
    }
}

.vs-contact {
    /* Small devices */
}

@media (max-width: 767px) {
    .vs-contact .contactP {
        grid-template-columns: 1fr;
    }
}

.vs-contact {
    /* Extra small devices */
}

@media (max-width: 575px) {
    .vs-contact .contact-box {
        padding: 30px 20px;
    }
}

.vs-map .mapouter {
    filter: grayscale(80%);
}

.vs-map .gmap {
    height: 740px;
    margin-bottom: -10px;
    /* Medium devices */
}

@media (max-width: 991px) {
    .vs-map .gmap {
        height: 400px;
    }
}

/*=================================
    05. Spacing
==================================*/
/*-- Padding Left And Right --*/
.px-5 {
    padding-right: 5px;
    padding-left: 5px;
}

.px-10 {
    padding-right: 10px;
    padding-left: 10px;
}

.px-15 {
    padding-right: 15px;
    padding-left: 15px;
}

.px-20 {
    padding-right: 20px;
    padding-left: 20px;
}

.px-25 {
    padding-right: 25px;
    padding-left: 25px;
}

.px-30 {
    padding-right: 30px;
    padding-left: 30px;
}

.px-35 {
    padding-right: 35px;
    padding-left: 35px;
}

.px-40 {
    padding-right: 40px;
    padding-left: 40px;
}

.px-45 {
    padding-right: 45px;
    padding-left: 45px;
}

.px-50 {
    padding-right: 50px;
    padding-left: 50px;
}

/*-- Padding Top And Bottom --*/
.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.py-35 {
    padding-top: 35px;
    padding-bottom: 35px;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.py-45 {
    padding-top: 45px;
    padding-bottom: 45px;
}

.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

/*-- Padding Top --*/
.pt-5 {
    padding-top: 5px;
}

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

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

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

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

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

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

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

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

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

/*-- Padding Bottom --*/
.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-35 {
    padding-bottom: 35px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-45 {
    padding-bottom: 45px;
}

.pb-50 {
    padding-bottom: 50px;
}

/*-- Padding Left --*/
.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pl-30 {
    padding-left: 30px;
}

.pl-35 {
    padding-left: 35px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-45 {
    padding-left: 45px;
}

.pl-50 {
    padding-left: 50px;
}

/*-- Padding Right --*/
.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-25 {
    padding-right: 25px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-45 {
    padding-right: 45px;
}

.pr-50 {
    padding-right: 50px;
}

/*-- margin Left And Right --*/
.mx-5 {
    margin-right: 5px;
    margin-left: 5px;
}

.mx-10 {
    margin-right: 10px;
    margin-left: 10px;
}

.mx-15 {
    margin-right: 15px;
    margin-left: 15px;
}

.mx-20 {
    margin-right: 20px;
    margin-left: 20px;
}

.mx-25 {
    margin-right: 25px;
    margin-left: 25px;
}

.mx-30 {
    margin-right: 30px;
    margin-left: 30px;
}

.mx-35 {
    margin-right: 35px;
    margin-left: 35px;
}

.mx-40 {
    margin-right: 40px;
    margin-left: 40px;
}

.mx-45 {
    margin-right: 45px;
    margin-left: 45px;
}

.mx-50 {
    margin-right: 50px;
    margin-left: 50px;
}

/*-- margin Top And Bottom --*/
.my-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.my-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-25 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.my-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.my-35 {
    margin-top: 35px;
    margin-bottom: 35px;
}

.my-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.my-45 {
    margin-top: 45px;
    margin-bottom: 45px;
}

.my-50 {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*-- margin Top --*/
.mt-5 {
    margin-top: 5px;
}

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

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

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

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

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

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

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

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

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

/*-- margin Bottom --*/
.mb-5 {
    margin-bottom: 5px;
}

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

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

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

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

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

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

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

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

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

/*-- margin Left --*/
.ml-5 {
    margin-left: 5px;
}

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

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

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

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

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

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

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

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

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

/*-- margin Right --*/
.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-35 {
    margin-right: 35px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-45 {
    margin-right: 45px;
}

.mr-50 {
    margin-right: 50px;
}

.mt-n1 {
    margin-top: -0.25rem;
}

.mt-n2 {
    margin-top: -0.5rem;
}

.mt-n3 {
    margin-top: -1rem;
}

.mt-n4 {
    margin-top: -1.5rem;
}

.mt-n5 {
    margin-top: -3rem;
}

.mb-n1 {
    margin-bottom: -0.25rem;
}

.mb-n2 {
    margin-bottom: -0.5rem;
}

.mb-n3 {
    margin-bottom: -1rem;
}

.mb-n4 {
    margin-bottom: -1.5rem;
}

.mb-n5 {
    margin-bottom: -3rem;
}

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

.space,
.space-top {
    padding-top: var(--vs-section-space);
}

.space,
.space-bottom {
    padding-bottom: var(--vs-section-space);
}

.space-extra,
.space-extra-top {
    padding-top: calc(var(--vs-section-space) - 30px);
}

.space-extra,
.space-extra-bottom {
    padding-bottom: calc(var(--vs-section-space) - 30px);
}

/* Medium devices */
@media (max-width: 991px) {

    .space,
    .space-top {
        padding-top: var(--vs-section-space-mobile);
    }

    .space,
    .space-bottom {
        padding-bottom: var(--vs-section-space-mobile);
    }

    .space-extra,
    .space-extra-top {
        padding-top: calc(var(--vs-section-space-mobile) - 30px);
    }

    .space-extra,
    .space-extra-bottom {
        padding-bottom: calc(var(--vs-section-space-mobile) - 30px);
    }
}

/*=================================
    06. Components
==================================*/
.icon-call {
    display: flex;
    align-items: center;
}

.icon-call__icon {
    --icon-size: 52px;
    font-size: 20px;
    margin-right: 14px;
    position: relative;
    min-width: var(--icon-size);
    min-height: var(--icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vs-white-color);
    background-color: var(--vs-theme-color2);
    transition: all ease 0.4s;
    border: 3px dashed rgba(255, 255, 255, 0.4);
}

.icon-call__title {
    display: block;
    color: var(--vs-text-color);
    font-size: 16px;
    letter-spacing: 0.48px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 3px 0;
}

.icon-call__number {
    display: block;
    color: var(--vs-white-color);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--vs-title-font);
}

.icon-call__number:hover {
    color: var(--vs-theme-color2);
}

/* Custom Sticky Sidebar for Services */
@media (min-width: 992px) {
    .service-widget {
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
        z-index: 10;
    }

    /* Custom Doctors Slider Styles */
    .vs-doctor-slider.vs-doctors__wrap {
        display: block;
        /* Overrides display: grid */
    }

    .vs-doctor-slider .swiper-wrapper {
        padding-bottom: 90px;
    }

    .vs-doctor-slider .vs-navigation {
        bottom: 10px;
    }

    /*# sourceMappingURL=style.css.map */

    /* =============================================
   HERO BANNER — Premium Overrides
   ============================================= */

    /* Background overlay: lighter so hospital BG is nicely visible */
    .vs-hero__bg::after {
        background: linear-gradient(105deg,
                rgba(8, 18, 58, 0.92) 0%,
                rgba(10, 30, 80, 0.80) 50%,
                rgba(5, 15, 50, 0.65) 100%) !important;
    }

    /* ── Section: min-height ───────────────────── */
    .vs-hero {
        min-height: 600px;
    }

    /* ── Wrap: keep it normal block (don't break Bootstrap row) ── */
    .vs-hero__wrap {
        position: relative;
    }

    /* ── Row: give it the banner height so align-items-end works ── */
    .vs-hero__wrap>.row {
        min-height: 600px;
    }

    /* ── Text column: padding handles vertical position ───────── */
    .vs-hero__content {
        padding: 150px 0 60px !important;
        position: relative;
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    @media (max-width: 1199px) {
        .vs-hero__content {
            padding: 130px 0 50px !important;
        }
    }

    @media (max-width: 991px) {
        .vs-hero__content {
            padding: 120px 0 30px !important;
            text-align: center;
        }

        .vs-hero__wrap>.row {
            min-height: auto;
        }
    }

    /* ── Subtitle badge: pill style ─────────────── */
    .vs-hero__title--sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 200, 180, 0.15);
        border: 1px solid rgba(0, 200, 180, 0.40);
        border-radius: 50px;
        padding: 6px 18px 6px 10px;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #4ff8e5 !important;
        letter-spacing: 0.5px;
        margin-bottom: 18px;
        backdrop-filter: blur(4px);
    }

    .vs-hero__title--sub::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #4ff8e5;
        border-radius: 50%;
        animation: pulse-dot 1.8s ease-in-out infinite;
        flex-shrink: 0;
    }

    @keyframes pulse-dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(79, 248, 229, 0.5);
        }

        50% {
            opacity: 0.8;
            transform: scale(1.2);
            box-shadow: 0 0 0 6px rgba(79, 248, 229, 0);
        }
    }

    /* ── Main heading ─────────────────────────── */
    .vs-hero__title--main {
        font-size: 50px !important;
        line-height: 1.12 !important;
        margin-bottom: 0;
    }

    @media (max-width: 1300px) {
        .vs-hero__title--main {
            font-size: 42px !important;
        }
    }

    @media (max-width: 991px) {
        .vs-hero__title--main {
            font-size: 38px !important;
        }
    }

    /* ── Description ─────────────────────────── */
    .vs-hero__title--para {
        font-size: 15px !important;
        line-height: 1.75 !important;
        color: rgba(255, 255, 255, 0.80) !important;
        margin: 18px 0 32px !important;
    }

    @media (max-width: 991px) {
        .vs-hero__title--para {
            max-width: 100%;
            margin: 18px auto 32px !important;
        }
    }

    /* ── Image column: bottom-anchored in col-6 ──────────── */
    .vs-hero__img {
        position: relative;
        display: flex;
        align-items: flex-end;
        /* doctors stand from bottom */
        justify-content: center;
        height: 100%;
        /* fill col height (works now row has min-height) */
        padding-top: 60px;
        z-index: 2;
        overflow: visible;
    }

    /* Teal glow behind the doctors */
    .vs-hero__img::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 50%;
        background: radial-gradient(ellipse at center bottom, rgba(0, 180, 180, 0.20) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
        border-radius: 50%;
    }

    .vs-hero__img img.main-img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: bottom center;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
        display: block;
        align-self: flex-end;
        /* ensure image sits at bottom of flex */
    }

    @keyframes hero-float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    @media (max-width: 1199px) {
        .vs-hero__img img.main-img {
            max-width: 100%;
        }
    }

    @media (max-width: 991px) {
        .vs-hero__img {
            justify-content: center;
            padding-top: 20px;

        }

        .vs-hero__img img.main-img {
            max-width: 440px;
            align-self: auto;
        }

        @keyframes hero-float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-6px);
            }
        }
    }

    /* ── Inner breadcrumb banner (other pages) ─── */
    .vs-breadcrumb__bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .vs-breadcrumb__bg::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(14, 29, 76, 0.75) !important;
        z-index: 1;
    }

    .vs-breadcrumb__bg>img {
        position: relative;
        z-index: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .vs-hero__btn .vsBtn {
        padding: 20px 80px !IMPORTANT;
    }

    .vs-header__logo {
        padding: 20px 0;
        max-width: 100px;
    }

    button.searchBoxTggler {
        display: none;
    }

    .doctor_img {
        background-color: #85A3AD;
    }

    .vs-header .sticky-wrapper {
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .main-menu a {
        color: #031738 !important;
        /* Menu text dark navy blue */
    }

    /* ======================================================
   DESKTOP & MOBILE HEADER + STICKY OVERRIDES
   ====================================================== */

    /* 1. Header & Sticky Header Background White (Desktop & Mobile) */
    body .vs-header .sticky-wrapper,
    body .will-sticky .sticky-active,
    body .will-sticky .sticky-active.active,
    body .vs-header.home-two .sticky-wrapper .sticky-active.active {
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    /* 2. Desktop Menu Links Color */
    body .vs-header .main-menu>ul>li>a,
    body .will-sticky .sticky-active .main-menu>ul>li>a {
        color: #031738 !important;
        font-weight: 600;
    }

    /* 3. Desktop Active Page Link Highlight */
    body .vs-header .main-menu>ul>li.active>a,
    body .vs-header .main-menu>ul>li.current-menu-item>a,
    body .vs-header .main-menu>ul>li.current-menu-ancestor>a,
    body .will-sticky .sticky-active .main-menu>ul>li.active>a,
    body .will-sticky .sticky-active .main-menu>ul>li.current-menu-item>a {
        color: #ffffff !important;
        background-color: #159AAF !important;
        border-radius: 4px;
        padding: 8px 16px !important;
    }

    /* 4. Desktop Hover Link Color */
    body .vs-header .main-menu>ul>li>a:hover,
    body .will-sticky .sticky-active .main-menu>ul>li>a:hover {
        color: #159AAF !important;
    }

    /* 5. Mobile Toggle (Hamburger Icon) & Phone Info Text */
    body .vs-header .vs-menu-toggle i,
    body .will-sticky .sticky-active .vs-menu-toggle i,
    body .vs-header .H-call p,
    body .vs-header .H-call p span {
        color: #031738 !important;
    }

    /* 6. Mobile Drawer Slide-Out Menu Active Highlight */
    body .vs-mobile-menu ul li.active>a,
    body .vs-mobile-menu ul li.vs-active>a,
    body .vs-mobile-menu ul li.current-menu-item>a {
        color: #159AAF !important;
        font-weight: bold;
    }

    color: #031738 !important;
}

/* ======================================================
   RESPONSIVE HEADER LOGO & FOOTER LOGO FIXES
   ====================================================== */

/* 1. Header Logo Responsive Sizing (Mobile & Tablet) */
.vs-header__logo img {
    max-height: 65px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    .vs-header__logo {
        padding: 12px 0 !important;
    }

    .vs-header__logo img {
        max-height: 52px;
    }
}

@media (max-width: 575px) {
    .vs-header__logo {
        max-width: 200px !important;
        padding: 10px 0 !important;
    }

    .vs-header__logo img {
        max-height: 46px;
    }
}

/* 2. Mobile Menu Drawer Top Bar & Logo Fix */
.vs-menu-wrapper .vs-header__right {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.vs-menu-wrapper .mobile-logo img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

/* 3. Footer Logo Styling (White Card Container for Dark Footer) */
.vs-footer__logo a {
    display: inline-block;
    background: #ffffff !important;
    padding: 8px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.vs-footer__logo a:hover {
    transform: translateY(-2px);
}

.vs-footer__logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 575px) {
    .vs-footer__logo img {
        max-height: 50px;
    }
}


/* ======================================================
   RESPONSIVE HEADER & STICKY OVERRIDES (ALL SCREENS & <768px)
   ====================================================== */

/* 1. White Background for Header (Desktop & All Mobile Breakpoints) */
body .vs-header,
body .vs-header.bg-fixed,
body .vs-header .sticky-wrapper,
body .will-sticky .sticky-active,
body .will-sticky .sticky-active.active,
body .vs-header.home-two .sticky-wrapper .sticky-active.active {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Override Theme Media Queries for <1199px & <768px Mobile Screens */
@media (max-width: 1199px) {

    body .vs-header,
    body .vs-header.bg-fixed,
    body .vs-header .sticky-wrapper,
    body .will-sticky .sticky-active,
    body .will-sticky .sticky-active.active {
        background: #ffffff !important;
        background-image: none !important;
    }
}

@media (max-width: 768px) {

    body .vs-header,
    body .vs-header.bg-fixed,
    body .vs-header .sticky-wrapper,
    body .will-sticky .sticky-active,
    body .will-sticky .sticky-active.active {
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    /* Icons Dark Navy for White Header on Mobile */
    body .vs-header .vs-menu-toggle,
    body .vs-header .vs-menu-toggle i,
    body .vs-header .searchBoxTggler,
    body .vs-header .searchBoxTggler i {
        color: #031738 !important;
    }
}

/* 2. Main Menu Link Colors */
body .vs-header .main-menu>ul>li>a,
body .will-sticky .sticky-active .main-menu>ul>li>a {
    color: #031738 !important;
    font-weight: 600;
}

/* 3. Active Menu Link Badge */
body .vs-header .main-menu>ul>li.active>a,
body .vs-header .main-menu>ul>li.current-menu-item>a,
body .vs-header .main-menu>ul>li.current-menu-ancestor>a,
body .will-sticky .sticky-active .main-menu>ul>li.active>a,
body .will-sticky .sticky-active .main-menu>ul>li.current-menu-item>a {
    color: #ffffff !important;
    background-color: #159AAF !important;
    border-radius: 4px;
}

/* 4. Mobile Drawer Top Bar & Active Menu Items */
.vs-menu-wrapper .vs-header__right {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body .vs-mobile-menu ul li.active>a,
body .vs-mobile-menu ul li.vs-active>a,
body .vs-mobile-menu ul li.current-menu-item>a {
    color: #159AAF !important;
    font-weight: bold;
}

/* 5. Header & Footer Logo Responsive Fixes */
.vs-header__logo img {
    max-height: 65px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .vs-header__logo img {
        max-height: 52px;
    }
}

@media (max-width: 575px) {
    .vs-header__logo img {
        max-height: 46px;
    }
}

.vs-footer__logo a {
    display: inline-block;
    background: #ffffff !important;
    padding: 8px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.vs-footer__logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

.vs-hero__bg::after {
    background: linear-gradient(105deg,
            rgba(8, 18, 58, 0.55) 0%,
            rgba(10, 30, 80, 0.35) 50%,
            rgba(5, 15, 50, 0.20) 100%) !important;
}

/* =============================================
   WHY CHOOSE US SECTION — Image Responsiveness & UI Fixes
   ============================================= */

.vs-choose .chooseImg {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 480px;
    max-height: 580px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 1;
    margin-top: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.vs-choose .chooseImg:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

.vs-choose .chooseImg img {
    width: 100% !important;
    height: 100% !important;
    max-height: 580px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 20px !important;
    display: block !important;
    transition: transform 0.6s ease;
}

.vs-choose .chooseImg:hover img {
    transform: scale(1.03);
}

/* Large Laptop / Desktop (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .vs-choose .chooseImg {
        min-height: 440px;
        max-height: 520px;
    }

    .vs-choose .chooseImg img {
        max-height: 520px !important;
    }
}

/* Tablet Screens (768px to 991px) */
@media (max-width: 991px) {
    .vs-choose .chooseImg {
        position: relative !important;
        width: 100% !important;
        max-width: 600px;
        height: 380px !important;
        min-height: 320px !important;
        max-height: 420px !important;
        margin: 35px auto 0 !important;
        display: block !important;
        border-radius: 16px !important;
    }

    .vs-choose .chooseImg img {
        height: 100% !important;
        max-height: 420px !important;
        border-radius: 16px !important;
    }
}

/* Mobile Screens (up to 767px) */
@media (max-width: 767px) {
    .vs-choose .chooseImg {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important;
        min-height: 260px !important;
        max-height: 350px !important;
        margin: 30px 0 0 0 !important;
        border-radius: 16px !important;
    }

    .vs-choose .chooseImg img {
        height: 100% !important;
        max-height: 350px !important;
        border-radius: 16px !important;
    }
}

/* Extra Small Mobile (up to 575px) — Force visible & nicely sized */
@media (max-width: 575px) {
    .vs-choose .chooseImg {
        display: block !important;
        height: 280px !important;
        min-height: 220px !important;
        max-height: 320px !important;
        margin-top: 25px !important;
        border-radius: 14px !important;
    }

    .vs-choose .chooseImg img {
        height: 100% !important;
        max-height: 320px !important;
        border-radius: 14px !important;
    }
}

.ab-img img {
    max-width: 460px;
}