@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");
}

.theme-color{
	color: #7638f9;
}
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;
}
@media (max-width: 575px) {
   .btn {
      padding: 10px 20px;
   }
}
.btn-white {
   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;
}
.btn-primary-light,
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
   background-color: #fff;
   border: 1px solid #7638f9;
   color: #7638f9;
}
.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: 35px;
      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;
}
.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, 0.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: 0.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: 90%;
}
@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(0.5);
   }
   50% {
      transform: scale(1);
   }
   to {
      transform: scale(0.4);
   }
}
@keyframes zoom-in-zoom-out {
   0% {
      transform: scale(0.9);
   }
   50% {
      transform: scale(1);
   }
   to {
      transform: scale(0.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;
   z-index: 5;
}
.js-cookie-consent .cookie-consent__message {
   color: #000 !important;
}
@media (max-width: 375px) {
   input.contact-section-submit-btn {
      font-size: 12px !important;
      padding: 6px !important;
   }
}
.ribbon-wrapper {
   height: 88px;
   left: 0 !important;
   overflow: hidden;
   position: absolute;
   top: 0 !important;
   width: 85px;
}
.ribbon-wrapper .ribbon {
   background-color: #3498db;
   color: #333;
   color: #fff;
   font-size: 10px !important;
   left: -27px;
   padding: 7px 0;
   position: relative;
   text-align: center;
   top: 17px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   width: 120px;
}
.main-social-links {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
}
@media (max-width: 991px) {
   .main-social-links {
      justify-content: center;
   }
}
.main-social-links a {
   align-items: center;
   background: #fff;
   border-radius: 50%;
   display: flex;
   font-size: 20px;
   height: 37px;
   justify-content: center;
   margin: 5px;
   transition: 0.5s ease;
   width: 37px;
}
.main-social-links a.globe {
   color: #0d6efd;
}
.main-social-links a.globe:hover {
   background-color: #0d6efd;
   color: #fff;
}
.main-social-links a.twitter .icon {
   fill: #000;
}
.main-social-links a.twitter:hover {
   background-color: #000;
}
.main-social-links a.twitter:hover .icon {
   fill: #fff;
}
.main-social-links a.facebook {
   color: #0a66ff;
}
.main-social-links a.facebook:hover {
   background-color: #0a66ff;
   color: #fff;
}
.main-social-links a.instagram {
   color: #ee2a7b;
}
.main-social-links a.instagram:hover {
   background: linear-gradient(213deg, #833ab4, #fd1d1d, #fcb045);
   color: #fff;
}
.main-social-links a.youtube {
   color: #fd0200;
}
.main-social-links a.youtube:hover {
   background-color: #fd0200;
   color: #fff;
}
.main-social-links a.tumblr {
   color: #001a35;
}
.main-social-links a.tumblr:hover {
   background-color: #001a35;
   color: #fff;
}
.main-social-links a.reddit {
   color: #fd4500;
}
.main-social-links a.reddit:hover {
   background-color: #fd4500;
   color: #fff;
}
.main-social-links a.linkedin {
   color: #0c66c2;
}
.main-social-links a.linkedin:hover {
   background-color: #0c66c2;
   color: #fff;
}
.main-social-links a.whatsapp {
   color: #2bd44b;
}
.main-social-links a.whatsapp:hover {
   background-color: #2bd44b;
   color: #fff;
}
.main-social-links a.pinterest {
   color: #e60222;
}
.main-social-links a.pinterest:hover {
   background-color: #e60222;
   color: #fff;
}
.main-social-links a.tiktok {
   color: #000;
}
.main-social-links a.tiktok:hover {
   background-color: #000;
   color: #fff;
}
.header[dir="rtl"] .dropdown .dropdown-toggle:after {
   margin-left: auto;
   margin-right: 10px;
}
.header[dir="rtl"] .me-1 {
   margin-left: 0.25rem !important;
   margin-right: auto;
}
@media (max-width: 768px) {
   .new-footer-term {
      margin-top: 90px !important;
   }
}
@media (max-width: 425px) {
   .new-footer-term {
      text-align: center !important;
   }
}

.contactContainer {
    width: 100%;
    min-height: 80vh; 
	background-image: url("../../../assets/img/new_home_page/our-mission-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
}

.contactContent {
    width: 90%; 
    max-width: 996px; 
    margin: 0 auto;
    display: grid;
    gap:20px;
    position: relative;
}
.contactContainer .contactContent h1 {
    margin: 0;
    padding: 0;
    font-size: 3.5rem;
    line-height: 1.2; 
    text-align: center;
}

.contactContainer .contactContent  p {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1.5; 
    text-align: center;
}

.contactContainer .contactContent .contactBtn {
    padding: 12px 24px;
    border: none;
    outline: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all .4s;
    margin: 0 auto; 
}

.contactContainer .contactContent .arrowBtn {
    width: 70px;
    height: 70px;
    opacity: 1; 
    position:absolute ;
    bottom: -100px;
    left :50%;
    transform: translate(-50%, 0px);
}

.contactContentBox{
    position: relative;
}
.ContactAbsoluteContent{
    width: 100%;
    position:absolute;
    left:0%;
    bottom:0px;
    transform:translate(0px, 100px);
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap:30px
}
.margin{
    margin-top: -60px !important;
}
.textWhite {
    color: white;
}

.textBlack {
    color: black;
}

.whiteBackground {
    background-color: white;
}

.contactHidden {
    display: none;
}
.customActionButtonContact{
	padding: 12px 24px;
    width: fit-content;
    border-radius: 4px;
    border: 0;
    outline: 0;
    margin: 0 auto;
}

@keyframes fadeOut {
    from {
        opacity: 1; 
        transform: translateY(-50%,-150px);
    }
    to {
        opacity: 0; 
    }
}



@keyframes visible {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide {
    from {
        transform:translate(0,0)
    }
    to {
        transform:translate(0,-100px)
    }
}






@media only screen and (max-width: 768px) {
    .contactContainer{
        min-height: 90vh;
    }
    .contactContainer .contactContent h1 {
        font-size: 2.5rem; 
    }

    .contactContainer .contactContent p {
        font-size: 1.25rem; 
    }

    .contactContainer .contactContent .contactBtn {
        font-size: 0.9rem; 
    }
}
@media only screen and (max-width: 768px) {
    .ContactAbsoluteContent{
       
        transform:translate(0px, 100px);
        
    }
    @keyframes slide {
        from {
            transform:translate(0,0)
        }
        to {
            transform:translate(0,-110px)
        }
    }
}

@media only screen and (max-width: 480px) {
    .contactContainer .contactContent h1 {
        font-size: 2rem; 
    }

    .contactContainer .contactContent p {
        font-size: 1rem; 
    }

    .contactContainer .contactContent .contactBtn {
        font-size: 0.8rem; 
    }
}


@media only screen and (max-width: 520px) {
    .ContactAbsoluteContent{
       
        transform:translate(0px, 130px);
        
    }
    @keyframes slide {
        from {
            transform:translate(0,0)
        }
        to {
            transform:translate(0,-120px)
        }
    }
}


@media only screen and (max-width: 480px) {
    .ContactAbsoluteContent{
       
        transform:translate(0px, 100px);
        
    }
    @keyframes slide {
        from {
            transform:translate(0,0)
        }
        to {
            transform:translate(0,-110px)
        }
    }
}


@media only screen and (max-width: 355px) {
    .ContactAbsoluteContent{
       
        transform:translate(0px, 100px);
        
    }
    @keyframes slide {
        from {
            transform:translate(0,0)
        }
        to {
            transform:translate(0,-130px)
        }
    }
}



@media only screen and (max-width: 320px) {
	.customActionButtonContact{

	padding:10px
	}
}