@font-face {

    font-display: swap;

    font-family: rubik;

    font-style: normal;

    font-weight: 300;

    src: url(/fonts/Rubik-Light.ttf?b269c92bc326f0d43f542b946c3f0203) format("truetype")

}



@font-face {

    font-display: swap;

    font-family: rubik;

    font-style: normal;

    font-weight: 400;

    src: url(/fonts/Rubik-Regular.ttf?705a89f52bdf93b960ed7777e4b152af) format("truetype")

}



@font-face {

    font-display: swap;

    font-family: rubik;

    font-style: normal;

    font-weight: 500;

    src: url(/fonts/Rubik-Medium.ttf?e41132b912f5c264d4f0596e939fb78a) format("truetype")

}



@font-face {

    font-display: swap;

    font-family: rubik;

    font-style: normal;

    font-weight: 600;

    src: url(/fonts/Rubik-SemiBold.ttf?4bc5c511d3be812971dc09c7b01a9d56) format("truetype")

}



@font-face {

    font-display: swap;

    font-family: rubik;

    font-style: normal;

    font-weight: 700;

    src: url(/fonts/Rubik-Bold.ttf?b24c64f715ba25a6e7f5c3df2188a90c) format("truetype")

}



body {

    font-family: rubik;

    font-weight: 400

}



ul {

    list-style: none;

    padding-left: 0

}



.object-fit-cover {

    -o-object-fit: cover;

    object-fit: cover

}



.object-center {

    -o-object-position: center;

    object-position: center

}



.btn {

    border-radius: 10px;

    box-shadow: none !important;

    padding: 10px 30px;

    border: none;

}



@media (max-width:575px) {

    .btn {

        padding: 10px 20px

    }

}



.btn-white {

    background: linear-gradient(90deg,#ED1C24,#F38E4A,#ED1C24);

    color: #ffffff;

    /*background-color: #fff;*/

    /*border: 1px solid #7638f9;*/

    /*color: #7638f9*/

}



.btn-primary,

.btn-white.active,

.btn-white:active,

.btn-white:focus,

.btn-white:hover {

    /*background-color: #7638f9;*/

    /*border: 1px solid #fff;*/

    color: #fff;

    background: linear-gradient(90deg,#ED1C24,#F38E4A,#ED1C24);

}



.btn-primary-light,

.btn-primary.active,

.btn-primary:active,

.btn-primary:focus,

.btn-primary:hover {

    /*background-color: #fff;*/

    /*border: 1px solid #7638f9;*/

    /*color: #7638f9*/

    

    background-color: #fff;

    /* border: 1px solid #7638f9; */

    color: #ffffff;

}



.btn-primary-light.active,

.btn-primary-light:active,

.btn-primary-light:focus,

.btn-primary-light:hover {

    background-color: #7638f9;

    border: 1px solid #7638f9;

    color: #fff

}



.btn-gray {

    background-color: #fff;

    border: 1px solid #d8d8d8;

    color: #1b1920

}



.mb-20 {

    margin-bottom: 20px

}



.mb-40 {

    margin-bottom: 40px

}



@media (max-width:991px) {

    .mb-40 {

        margin-bottom: 30px

    }

}



.mb-60 {

    margin-bottom: 60px

}



@media (max-width:991px) {

    .mb-60 {

        margin-bottom: 40px

    }

}



.fs-60,

h1 {

    font-size: 50px;

    font-weight: 600;

    line-height: 60px

}



@media (max-width:991px) {



    .fs-60,

    h1 {

        font-size: 42px;

        line-height: 50px

    }

}



@media (max-width:575px) {



    .fs-60,

    h1 {

        font-size: 26px;

        line-height: 42px

    }

}



.fs-18 {

    font-size: 18px

}



@media (max-width:767px) {

    .fs-18 {

        font-size: 16px

    }

}



.fs-40 {

    font-size: 40px

}



@media (max-width:991px) {

    .fs-40 {

        font-size: 36px

    }

}



@media (max-width:575px) {

    .fs-40 {

        font-size: 32px

    }

}



h2 {

    font-size: 30px

}



@media (max-width:575px) {

    h2 {

        font-size: 26px

    }

}



.section-heading h2 {

    position: relative

}



.section-heading h2:after {

    background-color: #7638f9;

    border-radius: 2px;

    bottom: -4px;

    content: "";

    height: 2px;

    left: 6%;

    position: absolute;

    width: 33%

}



.fs-20 {

    font-size: 20px

}



@media (max-width:991px) {

    .fs-20 {

        font-size: 18px

    }

}



.fs-30 {

    font-size: 30px

}



@media (max-width:991px) {

    .fs-30 {

        font-size: 26px

    }

}



@media (max-width:575px) {

    .fs-30 {

        font-size: 24px

    }

}



.fw-5 {

    font-weight: 500

}



.fw-6 {

    font-weight: 600

}



.pt-50 {

    padding-top: 50px

}



.pt-50 {

    padding-top: 50px

}



.pb-50 {

    padding-bottom: 50px

}



.pt-60 {

    padding-top: 60px

}



.pb-60 {

    padding-bottom: 60px

}



.pb-40 {

    padding-bottom: 40px

}



.pt-100 {

    padding-top: 100px

}



@media (max-width:991px) {

    .pt-100 {

        padding-top: 50px

    }

}



.pb-100 {

    padding-bottom: 100px

}



@media (max-width:991px) {

    .pb-100 {

        padding-bottom: 50px

    }

}



.bg-light {

    background-color: #f3f3ff !important

}



.text-black {

    color: #1b1920

}



.text-gray-100 {

    color: #99999a

}



.text-primary {

    color: #7638f9 !important

}



.bg-primary {

    background-color: #7638f9 !important

}



.form-control {

    background-color: #f7f7f7;

    border: 1px solid #f7f7f7;

    color: #1b1920;

    height: 60px;

    padding: 10px 20px

}



.form-control::-moz-placeholder {

    color: #99999a

}



.form-control::placeholder {

    color: #99999a

}



.form-control:focus {

    border: 1px solid #d8d8d8;

    box-shadow: none

}



mark {

    background-color: transparent;

    color: #7638f9

}



@media (max-width:767px) {

    mark {

        color: #1b1920

    }

}



.slick-arrow {

    align-items: center;

    background-color: #7638f9;

    border: 1px solid #7638f9;

    border-radius: 50%;

    color: #fff;

    display: flex;

    height: 50px;

    justify-content: center;

    min-width: 50px;

    position: absolute;

    width: 50px

}



@media (max-width:575px) {

    .slick-arrow {

        height: 40px;

        min-width: 40px;

        width: 40px

    }

}



.slick-arrow.active,

.slick-arrow:active,

.slick-arrow:focus,

.slick-arrow:hover {

    background-color: transparent;

    border: 1px solid #7638f9;

    color: #7638f9

}



.vcard-template-section .vcard-bg {

    left: 0;

    top: 60px;

    z-index: -1

}



.vcard-template-section .plus-vector1 {

    animation: zoom-in 3s linear infinite;

    left: 100px;

    top: 900px;

    z-index: -1

}



.vcard-template-section .plus-vector2 {

    animation: zoom-in 3s linear infinite;

    bottom: 550px;

    right: 100px;

    z-index: -1

}



.vcard-template-section .plus-vector3 {

    animation: zoom-in 3s linear infinite;

    bottom: 60px;

    right: 250px;

    z-index: -1

}



.vcard-template-section .template-card {

    margin: 0 auto;

    max-width: 400px

}



.vcard-template-section .template-card .card-img {

    border-radius: 15px;

    box-shadow: 0 8px 20px rgba(64, 60, 72, .1);

    height: auto;

    max-height: 700px;

    overflow: hidden

}



.vcard-template-section .template-card .card-img:hover img {

    -o-object-position: left;

    object-position: left;

    transform-origin: 50% 50%;

    transition-duration: .5s;

    transition: all 8s ease

}



.vcard-template-section .template-card .card-img img {

    height: 700px;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: top;

    object-position: top;

    transition: all 8s ease;

    width: 100%

}



@media (max-width:1199px) {

    .vcard-template-section .template-card .card-img img {

        max-height: 500px

    }

}



.curve-shape {

    overflow: hidden;

    padding-bottom: 7%;

    position: relative;

    width: 100%

}



.curve-shape svg {

    height: 100%;

    left: 0;

    position: absolute;

    top: 1px;

    width: 100%

}



.vcard-object {

    position: absolute;

    z-index: 0

}



.vcard-object img {

    width: 100%

}



@media (max-width:768px) {

    .vcard-object img {

        width: 70%

    }

}



@media (max-width:575px) {

    .vcard-object img {

        width: 50%

    }

}



.vcard-object.object-img-1 {

    animation: movetopbounce 5s linear infinite;

    left: 50%;

    top: 0

}



.vcard-object.object-img-2 {

    animation: movetopbounce 5s linear infinite;

    left: 0;

    top: 22%

}



.vcard-object.object-img-3 {

    animation: zoom-in 3s linear infinite;

    left: 20%;

    top: 34%

}



.vcard-object.object-img-4 {

    animation: moveleftbounce 3s linear infinite;

    left: 36%;

    top: 26%

}



.vcard-object.object-img-5 {

    animation: zoom-in 3s linear infinite;

    right: 10%;

    top: 30%

}



.vcard-object.object-img-6 {

    animation: moveleftbounce 2s linear infinite;

    right: 5%;

    top: 60%

}



.vcard-object.object-img-7 {

    animation: zoom-in 3s linear infinite;

    left: 7%;

    top: 90%

}



.vcard-object.object-img-8 {

    animation: movetopbounce 5s linear infinite;

    right: 0;

    text-align: right;

    top: 120%

}



@keyframes moveleftbounce {

    0% {

        transform: translateX(0)

    }



    50% {

        transform: translateX(20px)

    }



    to {

        transform: translateX(0)

    }

}



@keyframes movetopbounce {

    0% {

        transform: translateY(0)

    }



    50% {

        transform: translateY(20px)

    }



    to {

        transform: translateY(0)

    }

}



@keyframes zoom-in {

    0% {

        transform: scale(.5)

    }



    50% {

        transform: scale(1)

    }



    to {

        transform: scale(.4)

    }

}



@keyframes zoom-in-zoom-out {

    0% {

        transform: scale(.9)

    }



    50% {

        transform: scale(1)

    }



    to {

        transform: scale(.9)

    }

}



@keyframes geometric-form-animation {

    0% {

        transform: rotate(0deg)

    }



    50% {

        transform: rotate(45deg)

    }



    to {

        transform: rotate(-45deg)

    }

}



.nav-link-white {

    color: #fff !important

}



@media (max-width:991px) {

    .nav-link-white {

        color: #1b1920 !important

    }

}



.top-margin {

    margin-bottom: 190px;

    position: relative;

    top: 178px

}



@media (max-width:1399px) {

    .top-margin {

        margin-bottom: 190px;

        position: relative;

        top: 163px

    }

}



@media (max-width:1199px) {

    .top-margin {

        margin-bottom: 190px;

        position: relative;

        top: 130px

    }

}



@media (max-width:991px) {

    .top-margin {

        margin-bottom: 190px;

        position: relative;

        top: 110px

    }

}



@media (max-width:575px) {

    .top-margin {

        margin-bottom: 190px;

        position: relative;

        top: 85px

    }

}



.top-margin-privacy {

    margin-bottom: 190px;

    position: relative;

    top: 178px

}



.js-cookie-consent {

    background: #f3f3ff

}



.js-cookie-consent .cookie-consent__message {

    color: #000 !important

}





.enquire_now_btn{

    border:unset;

}

.border_none{

    border:unset;

}



.buynow_btn,.buynow_btn:hover {

     background: linear-gradient(90deg,#374ba6,#2c95d4,#4c55a8);

    color: #ffffff;

}





.custom_card .card {

    border-radius: 4px;

    box-shadow: 0 20px 50px hsla(261,8%,52%,.1);

    margin-bottom: 25px;

    text-align: center;

      height: 285px;

    padding: 30px 20px;

}

.custom_card .card:hover {

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    cursor: pointer;

}



.contact-section .contact-form.contact_form {

    border: none;

    border-radius: unset;

        padding: 30px 20px;

}



.contact_info_bg {

    background-color: #226ba1;

    height: 100%;

    padding: 40px 20px;

}



.curve-shape svg {

    height: 100%;

    left: 0;

    position: absolute;

    top: 10px;

    width: 100%;

}

.section.hero-section.position-relative.pt-60.pb-60 {

    border-bottom: 1px solid #dadada;

}



.contact-section .address-text.textaddress{

    width:100% !important;

}



.contact-section .contact-icon.contact_icon {

    height: 40px;

    margin-right: 20px;

    min-width: 40px;

    width: 40px;

}



.footer_copyright{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:5px;

}

.footer_copyright_logo{

    width:200px;

}





.card-img.overflow-hidden.feature_image{

     height: 100px;

         display: flex;

    justify-content: center;

}

.card-img.overflow-hidden.feature_image img{

     height:100px;

}



.pricing_slider.slick-initialized .slick-slide {

    display: block;

    height: auto;

}

.pricing_slider .pricing-card{

    padding: 20px 0px;



}



.plan_btn{

    padding-top: 20px;

    text-align: center;

}