@font-face {
    font-family: 'PlusJakartaSans';
    font-style: normal;
    font-weight: 400;
    src: local('PlusJakartaSans Regular'), local('PlusJakartaSans-Regular'),
        url(../fonts/plus-jakarta-sans-2-7-1/plusjakartasans-regular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'PlusJakartaSans';
    font-weight: 500;
    src: local('PlusJakartaSans Medium'), local('PlusJakartaSans-Medium'),
        url(../fonts/plus-jakarta-sans-2-7-1/plusjakartasans-medium.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'PlusJakartaSans';
    font-weight: 600;
    src: local('PlusJakartaSans Semibold'), local('PlusJakartaSans-Semibold'),
        url(../fonts/plus-jakarta-sans-2-7-1/plusjakartasans-semibold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'PlusJakartaSans';
    font-weight: 700;
    src: local('PlusJakartaSans Bold'), local('PlusJakartaSans-Bold'),
        url(../fonts/plus-jakarta-sans-2-7-1/plusjakartasans-bold.ttf) format('truetype');
    font-display: swap;
}


/* Common */
* {
    margin: 0;
    padding: 0;
    font-family: 'PlusJakartaSans', sans-serif;
}

body {
    background: #fff;
    scroll-behavior: smooth;
    font-family: 'PlusJakartaSans', sans-serif;
    font-style: normal;
    overflow-x: hidden;
}

.vaan_container {
    max-width: 1200px;
    margin: auto;
    padding: 0 40px;
}

.vcta_primary {
    font-size: 18px;
    background-color: #000;
    color: #fff;
    padding: 20px 35px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 500;
}

.vcta_primary:hover {
    background-color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    color: #333;
}

a {
    cursor: pointer;
}



main h2 {

    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 30px;
}

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

/* Header */

header {
    margin: 30px auto;
    padding: 0 40px;
    max-width: 1350px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    line-height: 0;
}

nav ul li a:hover {
    text-decoration: underline;
}

nav ul li a div {
    padding-left: 5px;
}

/* Announcement */



/* Header announcement */
.head .announcement {
    background: rgb(255,212,178);
    background: -moz-linear-gradient(90deg, rgba(255,212,178,1) 0%, rgba(255,188,208,1) 38%, rgba(230,216,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,212,178,1) 0%, rgba(255,188,208,1) 38%, rgba(230,216,255,1) 100%);
    background: linear-gradient(90deg, rgba(255,212,178,1) 0%, rgba(255,188,208,1) 38%, rgba(230,216,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd4b2",endColorstr="#e6d8ff",GradientType=1);
padding: 20px 0;

    
color: #333;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.mesurz-icon {
    max-width: 130px;
    position: relative;
    padding-right: 15px;
}
.mesurz-icon svg {
    max-width: 100%;
    height: auto;
}

.mesurz-icon::after {
    content: " ";
    display: block;
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: #333;
    top: 0;
    right: 0;
}

.head .announcement a {
    color: #333;
    border: 2px solid #333;
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 20px;
}

.head .announcement a:hover {
    background-color: #333;
    color: #fff;
}


/* Banner Section */

.banner {
    padding: 10px 0 50px;
}

h1 {
    font-size: 48px;
    font-weight: 700;
    max-width: 400px;
    line-height: 1.2;
    margin-bottom: 30px;
}

.vbanner_content p {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 330px;
}


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

.vbanner_content {
    width: 40%;
}

.vbanner_picture {
    width: 60%;
}

/* Behind the Vaansoft story */
.behind_vaan {
    padding: 20px 0 50px;
}

.bev_wrapper {
    background: #000;
    padding: 90px 60px;
    border-radius: 15px;
}
.bev_wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.bev_content,
.bev_picture {
    width: 46%;
}

.bev_picture {
    text-align: center;
}

.bev_wrapper h2,
.bev_wrapper p {
    color: #fff;
}

.bev_wrapper h2 {
    max-width: 290px;
}

.bev_wrapper p {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 500px;
}

.bev_wrapper p span {
    background: #FFB274;
    background: -webkit-linear-gradient(to right, #FFB274 0%, #EC1657 46%, #3F256D 89%, #3F256D 100%);
    background: -moz-linear-gradient(to right, #FFB274 0%, #EC1657 46%, #3F256D 89%, #3F256D 100%);
    background: linear-gradient(to right, #FFB274 0%, #EC1657 46%, #3F256D 89%, #3F256D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 26px;
    font-weight: 700;
}

/* Services section */

.services {
    padding: 50px 0 50px;
}

.vserve_wrapper,
.vserve_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.vserve_wrapper h2 {
    max-width: 550px;
}

.vserve_picture {
    width: 40%;
}

.vserve_content {
    width: 60%;
}

.vserve_content hr {
    width: 80%;
    margin-bottom: 30px;
    height: 1px;
    background-color: #ccc;
    border: none;
}

.vservice_box {
    width: 50%;
    margin-bottom: 20px;
}

.vservice_box h3 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 10px;
}

.vservice_box ol li {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 5px;
    color: #8E8E8E;
    list-style: none;
}

/* Solutions */

.solutions {
    padding: 90px 0 50px;
}

.vsol_wrapper {
    border: 1px solid #C9C9C9;
    border-radius: 15px;
    padding: 50px 0;
    position: relative;
}

.vsol_heading {
    padding: 20px 30px;
    background: #F0F8FF;
    border: 1px solid #a3a3a3;
    border-radius: 10px;
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.vsol_heading h2 {
    font-size: 26px;
    margin: 0 auto;
    font-weight: 600;
}

.vsol_container {
    margin-top: 30px;
}

.vsol_group h3 {
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 500;
}

.vsol_container,
.vsol_products {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}

.vsol_container {
    justify-content: space-evenly;
}

.vsol_group {
    padding: 20px 0px 0;
}

.vsol_group:nth-child(1),
.vsol_group:nth-child(2),
.vsol_group:nth-child(3) {
    border-bottom: 1px solid #c9c9c9;
    padding-bottom: 20px;
}

.vsol_group:nth-child(1),
.vsol_group:nth-child(2),
.vsol_group:nth-child(4),
.vsol_group:nth-child(5) {
    border-right: 1px solid #c9c9c9;
}

.vsol_group,
.vsol_bp {
    width: 33.16%;
    text-align: center;
}

.vsol_bp {
    padding: 20px 0;

}

.vsol_bp p {
    font-size: 14px;
    font-weight: 400;
}

.vsol_bp:nth-child(1),
.vsol_bp:nth-child(2),
.vsol_bp:nth-child(3) {
    border-bottom: 1px solid #f0f0f0;
}

.vsol_bp:nth-child(1),
.vsol_bp:nth-child(2),
.vsol_bp:nth-child(4),
.vsol_bp:nth-child(5) {
    border-right: 1px solid #f0f0f0;
}

.vsol_bp_icon {
    background: url('../images/home/solution-icon-sprite.svg') no-repeat -3px -2px;
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
}

.vsol_mail {
    width: 36px;
}

.vsol_crm {
    background-position: -51px -2px;
}

.vsol_chat {
    background-position: -93px -2px;
}

.vsol_drive {
    background-position: -135px -2px;
    width: 41px;
}

.vsol_docs {
    background-position: -188px -2px;
    width: 40px;
}

.vsol_cms {
    background-position: -240px -2px;
}

.vsol_blog {
    background-position: -282px -2px;
    width: 37px;
}

.vsol_seo {
    background-position: -331px -2px;
}

.vsol_sm {
    background-position: -373px -2px;
}

.vsol_campaigns {
    background-position: -415px -2px;
    width: 38px;
}

.vsol_forms {
    background-position: -464px -2px;
}

.vsol_payroll {
    background-position: -147px -46px;
    width: 38px;
}

.vsol_accounts {
    background-position: -5px -46px;
}

.vsol_invoice {
    background-position: -49px -46px;
    width: 27px;
}

.vsol_payments {
    background-position: -95px -46px;
    width: 41px;
}

.vsol_expense {
    background-position: -201px -46px;
    width: 33px;
}

.vsol_careers {
    background-position: -253px -46px;
    width: 24px;
}

.vsol_careerapplication {
    background-position: -294px -46px;
    width: 18px;
}

.vsol_log {
    background-position: -327px -46px;
}

.vsol_lms {
    background-position: -378px -46px;
    width: 25px;
}

.vsol_hosting {
    background-position: -422px -46px;
    width: 28px;
}

.vsol_security {
    background-position: -465px -46px;
    width: 24px;
}

.vsol_backup {
    background-position: -4px -90px;
    width: 42px;
}

.vsol_monitoring {
    background-position: -61px -90px;
}

.vsol_auth {
    background-position: -106px -90px;
    width: 28px;
}

.vsol_bugtrack {
    background-position: -149px -90px;
}

.vsol_analytics {
    background-position: -194px -90px;
}

.vsol_tracking {
    background-position: -239px -90px;
}

.vsol_helpdesk {
    background-position: -284px -90px;
    width: 33px;
}

.vsol_supporttkt {
    background-position: -332px -90px;
    width: 31px;
}

.vsol_legal {
    background-position: -378px -90px;
    width: 28px;
}

.vsol_community {
    background-position: -421px -90px;
}

.vsol_container_para {
    text-align: center;
    margin: 50px 0 10px;
}

/* Get in touch forms */
.getintouch {
    padding: 80px 0 40px;
}

.vcontact_wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
    flex-wrap: wrap;
}

.vcontact_forms {
    width: 40%;
}

.vcontact_picture {
    width: 50%;
}

.vcontact_forms h3 {
    margin-bottom: 50px;
}

.vs-cat,
.vs-cat-div,
.vform-ctn,
.vform-pjt {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vs-cat .vs-cat-div {
    padding: 12px 60px 12px 15px;
    border: 1px solid #000;
    border-radius: 10px;
    background: #f1f1f1;
}

.vs-cat {
    margin-bottom: 30px;
}

.vs-cat .vs-cat-div input {
    margin-right: 15px;
    cursor: pointer;
}

.vs-cat .vs-cat-div label {
    font-size: 18px;
    font-weight: 600;
    width: 118px;
    display: inherit;
    line-height: 1;
    cursor: pointer;
}


.vs-cat .vs-cat-div label span {
    font-size: 12px;
    color: #6A6A6A;
}

.vform-hr {
    width: 100%;
    margin-bottom: 30px;
    height: 1px;
    background-color: #ccc;
    border: none;
}

.vform-ctn input,
textarea,
.vform-pjt input,
.vform-pjt label {
    width: 214px;
    font-size: 14px;
    padding: 15px 0px 15px 10px;
    background: #F7F7F7;
    color: #6A6A6A;
    border: 1px solid #000;
    border-radius: 10px;
}

.vform-pjt label {
    padding: 13px 0px 13px 10px;
}

.vform-ctn input::placeholder,
.textarea::placeholder,
.vform-pjt input::placeholder,
.placeholder-text {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    font-family: 'PlusJakartaSans', sans-serif;

}

.vform-ctn,
.vform-pjt {
    margin-bottom: 20px;
}

textarea {
    width: 97.5%;
    overflow: auto;
    resize: vertical;
    min-height: 110px;
    margin-bottom: 20px;
}

.custom-file-upload {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

input[type="file"] {
    position: absolute;
    left: -9999px;
}

.file-icon {
    display: inline-block;
    background: url('../images/home/solution-icon-sprite.svg') no-repeat -280px -53px;
    background-size: 300px auto;
    width: 16px;
    height: 21px;
    vertical-align: middle;
}

.placeholder-text {
    vertical-align: middle;
    margin-left: 5px;
    color: #868181;
}

input[type="file"] {
    color: transparent;
}

#selectedFileName {
    font: message-box;
}

.vform-con {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.vform-con div {
    padding-left: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6A6A6A;
    line-height: 1.4;
}

.vform-con div a {
    font-weight: 600;
}

.vform-cta {
    padding: 20px 50px 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #f0f0f0;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;

    transition: all 0.3s;
}

.vform-cta svg {
    padding-left: 5px;
}

.vform-cta:hover {
    background-color: #333;
}

.vform-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vform-mail {
    color: #6A6A6A;
    font-weight: 500;
    margin-right: 20px;
}

.vform-mail a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.vcontact_picture {
    padding: 0 50px;
}


/* footer */
footer {
    padding: 40px 0 50px;
}

.footer-br {
    width: 80%;
    height: 1px;
    background-color: #ccc;
    border: none;
    margin: 0 auto 10px;
}

.footer_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.vsocial,
.vfollow {
    display: flex;
    align-items: center;
}

.vfollow p {
    margin-right: 10px;
}

.footer_wrapper a {
    text-decoration: none;
}

.footer_wrapper a:hover {
    text-decoration: underline;
}

.vsocial-icon {
    background: url('../images/global/social-icon-sprite-dark.svg') no-repeat 0 0;
    width: 20px;
    height: 20px;
    margin: 0 5px;
}

.vsocial-github {
    background-position: -121px 0;
    width: 21px;
}

.vsocial-linkedin {
    background-position: -52px 0;
    width: 25px;
    height: 20.5px;
}


.vsocial-x {
    background-position: -25px 0;
    width: 22px;
}

.vsocial-youtube {
    background-position: -83px 0;
    width: 29px;
}

/* Media queries */
@media screen and (max-width:1220px) {
    .vaan_container {
        padding: 0 20px;
    }

    .vsol_group,
    .vsol_bp {
        width: 32%;

    }

    .vsol_container {
        justify-content: center;
    }
}

@media screen and (max-width:1180px) {
    main h2 {
        font-size: 44px;
    }

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


    .vsol_bp p {
        font-size: 12px;
        font-weight: 400;
    }

    .vsol_group,
    .vsol_bp {
        width: 31%;
    }

    .vcontact_forms {
        width: 42%;
    }

    .vcontact_picture {
        width: 45%;
    }
}



@media screen and (max-width:1090px) {
    main h2 {
        font-size: 40px;
    }

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

    .bev_wrapper p span {
        font-size: 20px;
    }

    .vcontact_forms {
        width: 45%;
    }

    .vcontact_picture {
        width: 40%;
    }
}


@media screen and (max-width:991px) {
    h1 {
        margin: 0 auto 30px;
    }

    .vbanner_picture {
        width: 90%;
    }

    .vb_svg_home svg {
        width: 100%;
    }

    .banner_wrapper {
        flex-direction: column-reverse;
        text-align: center;
    }

    .vbanner_content {
        width: 100%;
    }

    .vbanner_content p {
        max-width: 100%;
    }

    .vaan_light_svg svg {
        width: 70%;
    }

    .bev_content,
    .bev_picture {
        width: 50%;
    }

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

    .behind_vaan {
        padding: 40px 0 10px;
    }

    .bev_wrapper {
        padding: 70px 40px;
    }

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

    .vservice_box ol li {
        font-size: 16px;
    }

    .solutions {
        padding: 60px 0 50px;
    }

    .vsol_group {
        width: 49%;
    }

    .vsol_group:nth-child(1),
    .vsol_group:nth-child(2),
    .vsol_group:nth-child(3),
    .vsol_group:nth-child(4),
    .vsol_group:nth-child(4) {
        border-bottom: 1px solid #c9c9c9;
        padding-bottom: 20px;
    }

    .vsol_group:nth-child(2),
    .vsol_group:nth-child(4) {
        border-right: none;
    }


    .vsol_group:nth-child(1),
    .vsol_group:nth-child(3),
    .vsol_group:nth-child(5) {
        border-right: 1px solid #c9c9c9;
    }

    .vcontact_picture {
        width: 60%;
    }

    .vcontact_picture h2 {
        text-align: center;
    }

    .vcontact_forms {
        width: min-content;
    }

    .vcontact_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .footer-br {
        margin: 0 auto;
    }

    .getintouch {
        padding: 20px 0 40px;
    }

    .vserve_picture {
        width: 100%;
    }

    .vserve_picture img {
        border-radius: 10px;
        width: 100%;
    }

    .vserve_content {
        width: 90%;
        margin: auto;
    }

    .vserve_wrapper h2 {
        max-width: 550px;
        text-align: center;
        margin: 0 auto 40px;
    }

    .vservice_box {
        width: 40%;
    }

    .vserve_wrapper,
    .vserve_container {
        justify-content: space-around;
    }

    .vserve_content hr {
        margin: 0 auto 30px;
    }
}


@media screen and (max-width:768px) {

    .bev_content,
    .bev_picture {
        width: 100%;
    }

    .bev_content {
        text-align: center;
    }

    .bev_wrapper h2 {
        max-width: 100%;
    }

    .bev_wrapper p {
        max-width: 460px;
        margin: 0 auto 50px;
    }

    .bev_wrapper p br {
        display: none;
    }
}


@media screen and (max-width:500px) {
    header {
        margin: 20px auto;
        padding: 0 15px;
        max-width: 1350px;
    }

    nav img {
        width: 140px;
    }

    .vb_svg_home svg {
        width: 100%;
        height: auto;
    }

    h1 {
        font-size: 38px;
        margin: 0 auto 20px;
    }

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

    .vcta_primary {
        font-size: 16px;
    }

    .vaan_container {
        padding: 0 15px;
    }

    .bev_wrapper {
        padding: 40px 20px;
    }

    .bev_wrapper p {
        margin: 0 auto;
        font-size: 16px;
    }

    .bev_wrapper p span {
        font-size: 16px;
    }

    .vaan_light_svg svg {
        width: 70%;
        height: auto;
        margin: 40px 0 5px;
    }

    .services {
        padding: 40px 0 10px;
    }

    main h2 {
        font-size: 28px;
    }

    .vserve_wrapper h2 {
        margin: 0 auto 20px;
    }

    .vservice_box {
        width: 100%;
    }

    .vsol_heading {
        padding: 15px;
    }

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

    .vsol_group {
        width: 99%;
    }

    .vsol_bp {
        width: 33%;
    }

    .vsol_group:nth-child(1),
    .vsol_group:nth-child(2),
    .vsol_group:nth-child(3),
    .vsol_group:nth-child(4),
    .vsol_group:nth-child(5) {
        border: none;
    }

    .vsol_wrapper {
        padding: 30px 0 20px;
    }

    .vsol_container_para {
        margin: 40px 10px 10px;

    }

    .vcontact_picture {
        width: 100%;
    }

    .vcontact_picture {
        padding: 0;
    }

    .vcontact_picture img {
        width: auto;
    }

    .vcontact_forms {
        width: 100%;
    }

    .vcontact_forms {
        width: 100%;
    }

    .vs-cat .vs-cat-div {
        padding: 10px 20px 10px 10px;
    }

    .vs-cat .vs-cat-div input {
        margin-right: 5px;
    }

    .vs-cat .vs-cat-div label {
        font-size: 16px;
    }

    .vs-cat .vs-cat-div label span {
        font-size: 10px;
    }

    .vs-cat .vs-cat-div label {
        width: 105px;
    }

    .vs-cat,
    .vform-hr {
        margin-bottom: 20px;
    }

    .vcontact_forms h3 {
        margin-bottom: 25px;
    }

    .vform-ctn,
    .vform-pjt,
    .vform-end {
        display: block;
    }

    .vform-ctn input,
    .vform-pjt input,
    .vform-pjt label {
        width: 97.5%;

    }

    .vform-ctn input:nth-child(1),
    .vform-pjt input:nth-child(1),
    textarea,
    .vform-ctn,
    .vform-pjt {
        margin-bottom: 15px;
    }

    .vform-mail {
        margin-top: 25px;
    }

    .solutions {
        padding: 60px 0 35px;
    }

    .footer_wrapper {
        flex-wrap: wrap;

    }

    .vfollow,
    .vbtop,
    .vcopyright {
        width: 100%;
        margin-bottom: 25px;
    }

    .vcopyright {
        margin-top: 20px;
        font-size: 12px;
    }

    footer {
        padding: 40px 0 10px;
    }

    /* Announcement */

    /* Header */
 
    .announcement {
        flex-wrap: wrap;
        text-align: center;
        font-size: 14px;
    }
    .mesurz-icon {
        padding: 0 0 10px;
        margin-bottom: 10px;
    }
    .mesurz-icon::after {
        width: 100%;
        height: 2px;
        top: auto;
        bottom: -4px;
    }
}



/* Form Submission */
.form-submit-pop {
	position: fixed;
	bottom: 25px;
	left: 25px;
	width: 360px;
	padding: 20px;
	background-color: rgb(255, 255, 255);
	color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
	border: 1px solid rgb(52, 52, 52);
	border-radius: 6px;
	z-index: 11;
}

.vs_form_svg {
    position: relative;
    top: 6px;
}
.vaan_submait_wrapper {
    display: flex;
}
.vs_form_p {
    margin-left: 12px;
}

@media screen and (max-width:500px) {
    .form-submit-pop {
        padding: 15px;
        font-size: 14px;
        width: 80%;
        left: 20px;
        bottom: 20px;
    }
}