@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import 'webfonts.css';

:root{
   --theme-color : #143D6D;
   --text-color : #2A2A2A;
   --primary-color : #32B8FF;
   --white-color : #fff;
   --black-color: #000;
   --light-blue: #EBF8FF;
}


body {  padding: 0; margin: 0;  font-family: "Montserrat", serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text-color);  } 
img{ max-width: 100%; }

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {  font-family: 'PP Neue Machina Plain'; font-weight: 300; }

a{ color: inherit; } 
a:hover,
a:focus{ text-decoration: none; color: inherit; }

a, .btn { text-decoration: none; -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
.btn:focus { box-shadow: 0 0 0 0.2rem rgb(0 128 128 / 11%); /* box-shadow: 0 0 0 0.2rem rgb(55 52 53 / 24%); */ }
.required-star { color: red; }

.bdr-radius{ border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; }
.pt-140 { padding-top: 140px; }

 
.form-group { position: relative; }
.form-group label{ font-weight: 600; margin: 0 0 8px; color: var(--theme-color); }  
.form-group .iti { width: 100%; }
.form-group input[type="password"]::-ms-reveal {  display: none; /* Hide the eye icon */ }
.form-control, .form-select { border-color: #E4E4EB; outline: none; box-shadow: none; border-radius: 15px; height: 60px; padding: 0 20px; font-weight: 500; background-color: transparent; box-shadow: 0px 2.24444px 6.73333px rgba(5, 2, 41, 0.05); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } 
.form-control:focus, .form-select:focus{ box-shadow: none;  } 
 

textarea.form-control { resize: none; height: 120px;  padding: 15px 15px;} 

/* Common Button */
.primary-btn { border: 0; display: inline-block; border-radius: 30px; color: var(--white-color); padding: 15px 40px; background: var(--theme-color); outline: none; font-weight: 500; }
.primary-btn:hover, .primary-btn:focus { color: var(--white-color); }
.secondary-btn { border: 0; display: inline-block; border-radius: 30px; color: var(--white-color); padding: 15px 40px; background: var(--primary-color); outline: none; font-weight: 500; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; }
.secondary-btn:hover, .secondary-btn:focus { color: var(--white-color); }
 
  

.required-error { border-color: red !important; } 
.text-error { color: red !important; } 
.spinner { width: 45px;height: 45px; border-radius: 50%; background: radial-gradient(farthest-side,#32B8FF 94%,#0000) top/9px 9px no-repeat, conic-gradient(#0000 30%,#32B8FF); -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0); animation: spinner-c7wet2 1s infinite linear; }

@keyframes spinner-c7wet2 {
   100% {  transform: rotate(1turn); }
}

/* ----------------------------------
 Bootstrap Fix: IE10
 in Windows 8 & Windows Phone 8
 ---------------------------------- */
@-webkit-viewport { width: device-width; } 
@-moz-viewport { width: device-width; } 
@-ms-viewport { width: device-width; } 
@-o-viewport { width: device-width; } 
@viewport { width: device-width; } 


.custom-scroll::-webkit-scrollbar {width:4px;}
.custom-scroll::-webkit-scrollbar-track {background: #f1f1f150;}
.custom-scroll::-webkit-scrollbar-thumb {background:#333333bb;}
.custom-scroll::-webkit-scrollbar-thumb:hover {background: #0f0f0fe4;}

 
/* ----------------------------------
 Input Light
 ---------------------------------- */
.form-control.light { color: #BFBFBF;  } 
.form-control.light:-moz-placeholder { color: #BFBFBF; } 
.form-control.light::-moz-placeholder { color: #BFBFBF; } 
.form-control.light:-ms-input-placeholder { color: #BFBFBF; } 
.form-control.light::-webkit-input-placeholder { color: #BFBFBF; } 
 
/* Page Title */
.page-title {  margin: 0 0 20px; color: var(--theme-color);}
.page-title h1{ margin: 0; font-size: 4rem; font-weight: 400; text-transform: capitalize; }
 

/* Section Title */
.section-title { margin: 20px 0; color: var(--theme-color); }
.section-title .lable{ color: var(--white-color); background: var(--black-color); display: inline-flex; gap: 10px; align-items: center; justify-content: center; margin: 0 0 30px; padding: 12px 20px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } 
.section-title h2{ font-size: 3rem; font-weight: 400;  margin: 0; text-transform: capitalize; }
  
   
/* ====== Header ====== */
header { font-family: 'PP Neue Machina Plain'; font-weight: 400; padding: 15px 0; position: fixed; top: 0px; left: 0; right: 0; z-index: 999; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); background-color: rgba(255, 255, 255, .8);   transition: top .2s ease-in-out; }
header.nav-up{top:-78px}
header a{ transition: none; }
/* header .dropdown-toggle::after{ display: none; } */

header .navbar-light .navbar-toggler { border: none; outline: none; box-shadow: none; }
header .navbar-brand { display: flex; align-items: center; padding: 0; }
header .navbar-brand img{ max-width: 120px; }
header .navbar-brand .mobile-hide{ width: 150px; }
header .right-side { display: flex; align-items: center;  } 
header .navbar { padding: 0;  display: flex; justify-content: space-between;  } 
header .navbar .navbar-toggler-icon { width: 24px; height: 17px; background-image: none; position: relative; border-bottom: 1px solid #0068FF; transition: all 300ms linear; }
header .navbar .navbar-toggler-icon::after, 
header .navbar .navbar-toggler-icon::before{ width: 24px; position: absolute; height: 1px;  background-color: #0068FF; top: 0; left: 0; content: ''; z-index: 2; transition: all 300ms linear; }
header .navbar .navbar-toggler-icon::after{ top: 8px; }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { transform: rotate(45deg); }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: translateY(8px) rotate(-45deg); }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; }
header .navbar-nav li { padding: 0px 10px; position: relative; }
 
 
header .navbar-light .navbar-nav .nav-link{ color: var(--black-color); }
header .navbar-light .navbar-nav .nav-link.active{ color: #E55C28; }
header .navbar-light .navbar-nav .nav-item.icon .nav-link{ display: flex; align-items: center; gap: 5px; }
header .navbar-light .navbar-nav .support a{   padding: 12px 25px; color: var(--white-color); }
 
 
header .navbar-nav { display: flex; align-items: center;  }
header .navbar-nav ul{ padding: 0; margin: 0;  list-style: none; align-items: center;} 
 
.main-wapper { padding: 78px 0 0; }
/* .home-bg{ background: url('../images/home-bg.png') no-repeat center center; background-size: cover; background-attachment: fixed; } */
section { padding: 50px 0; } 
 
/*===================
    Home Page 
====================*/
 
/* Banner */
section.hero-banner { padding: 100px 0 0; background: url(../images/hero-banner.svg) no-repeat center center; background-size: cover;  display: flex; align-items: center; justify-content: center; }
section.hero-banner .banner-text{ max-width: 900px; margin: 0 auto; text-align: center;  }
section.hero-banner .banner-text h1{ font-size: 4rem; margin: 0 0 20px; color: var(--theme-color); }
section.hero-banner .banner-text p{ font-size: 1.3rem; }
section.hero-banner .banner-mobile { position: relative; text-align: center; }
section.hero-banner .banner-mobile .img img{ max-width: 500px; width: 100%; margin: 0 auto; }

/* Achievements */
section.achievements { }
section.achievements .section-title .img{ max-width: 90px; margin: 0 auto 30px; }
section.achievements .main-box { margin: 30px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;  text-align: center; }
section.achievements .main-box .box { flex: 1; padding: 0 20px; }
section.achievements .main-box .box:not(:last-child){ border-right: 1px solid #e2e2e2; }
section.achievements .main-box .box p{ color: var(--primary-color); margin: 0; font-weight: 600; }
section.achievements .main-box .box .num{ font-size: 4rem; color: var(--theme-color); }
 
/* spotlight part */
section.spotlight-part { }
 
section.spotlight-part .box { transition: all 0.3s; overflow: hidden; height: calc(100% - 24px); margin: 12px 0; background: var(--light-blue); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; }
section.spotlight-part .box:hover{ transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); }
section.spotlight-part .box.marketplace{ height: auto; }
section.spotlight-part .box.marketplace .inner-box{ position: relative; flex-direction: row; }
section.spotlight-part .box.marketplace .text{ max-width: 350px;  position: absolute; }
section.spotlight-part .box.marketplace .img{ max-width: 80%; margin-left: auto; margin-top: -90px;}
section.spotlight-part .box.blue-box{ background: var(--theme-color); color: var(--white-color); }
section.spotlight-part .box .inner-box{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
section.spotlight-part .box .text{ padding: 30px; }
section.spotlight-part .box .img{ text-align: center; width: 100%; }
section.spotlight-part .space-adde { display: flex; flex-direction: column; justify-content: space-between;  }
section.spotlight-part .explore-btn { margin: 15px 0; }
section.spotlight-part .explore-btn .secondary-btn{ font-size: 1.3rem; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; }

/* our-service */
.service-box { position: relative; transition: all 0.3s;  background: var(--white-color); padding: 20px; height: calc(100% - 24px); margin: 12px 0; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; }
.service-box .img{ margin: 20px auto 30px; width: 80px; height: 80px; box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.service-box .text h3{ font-weight: 600; font-size: 1.2rem; color: var(--black-color); margin: 15px 0 20px; }
.service-box:hover{ transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); }

section.our-service { }
section.our-service .gray-bg{ position: relative; background: #F9F9F9; padding: 60px; }
section.our-service .section-title p{ color: var(--primary-color); }

/* mission vision */
section.mission-vision { background: #EBF8FF; }
section.mission-vision .instant-commerce .inner-content{   padding: 30px 50px 0; position: relative; }
section.mission-vision .instant-commerce{ margin: 12px 0;  overflow: hidden;  background: linear-gradient(180deg, #FFFFFF 34.98%, rgba(255, 255, 255, 0) 100%); }
section.mission-vision .instant-commerce .big-img{ margin-top: -120px;  }
section.mission-vision .instant-commerce .section-title .lable{ margin: 0 0 15px;  }
section.mission-vision .instant-commerce .text{ margin: 50px 0 0;  }
section.mission-vision .misvis-box{ background: var(--white-color); padding: 30px; height: calc(100% - 24px); margin: 12px 0; }
section.mission-vision .misvis-box .img{  margin: 15px 0 25px; }
section.mission-vision .misvis-box .img img{ max-height: 80px; }
section.mission-vision .misvis-box h3 { font-size: 2rem; font-weight: 400; color: var(--theme-color); margin: 20px 0; }
section.mission-vision .misvis-box p{ color: #797B85;  }

/* launching-soon */
section.launching-soon { }
section.launching-soon .custom-tabs{ position: relative; padding: 0 30px;  }
section.launching-soon .custom-tabs:before{ content: ""; background: var(--theme-color); padding: 30px; position: absolute; top: 18%; left: 0; right: 0; bottom: 18%; z-index: -1; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; }
section.launching-soon .custom-tabs .big-img { text-align: center; }
section.launching-soon .custom-tabs .big-img img{  max-width: 400px; width: 100%; }

section.launching-soon .custom-tabs ul { margin: 0 0 30px; overflow-x: auto; display: inline-flex; background: var(--white-color); padding: 5px; flex-wrap: nowrap; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } 
section.launching-soon .custom-tabs .nav .nav-item .nav-link { white-space: nowrap; padding: 8px 20px;background:transparent;border: none; color: var(--black-color); border-radius: 30px;}
section.launching-soon .custom-tabs .nav .nav-item .nav-link.active {background-color:var(--primary-color) ; color: var(--white-color);}

section.launching-soon .contnet { color: var(--white-color); }
section.launching-soon .section-title { color: var(--white-color); }
section.launching-soon .contnet .form-group { display: flex; align-items: center; text-wrap: nowrap; justify-content: space-between; gap: 10px;}
section.launching-soon .contnet .form-group .form-control{ background: transparent; border: 0; padding: 0; color: var(--white-color); border-bottom: 1px solid var(--white-color); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; }

/* ===================== 
      Contact Page 
========================*/
section.contact-page { position: relative; }
section.contact-page a{ color: var(--primary-color); }
section.contact-page:after{ content: ""; position: absolute; top: 0; right: 0; width: 35%; z-index: -1; bottom: 0; background: #EBF8FF; border-radius: 30px 0 0 30px; -webkit-border-radius: 30px 0 0 30px; -moz-border-radius: 30px 0 0 30px; -ms-border-radius: 30px 0 0 30px; -o-border-radius: 30px 0 0 30px; }
section.contact-page .contact-form{ background: var(--white-color); padding: 30px; box-shadow: 0px 30px 60px -30px rgba(34, 152, 255, 0.1), inset 0px -2px 6px rgba(10, 37, 64, 0.2); }
section.contact-page .contact-info { margin: 24px 0; background: #F9F9F9; padding: 30px; box-shadow: 0px 30px 60px -30px rgba(34, 152, 255, 0.1); }
section.contact-page .contact-info h4{ font-size: 1.3; font-weight: 500; margin: 0 0 15px; color: var(--theme-color); }
section.contact-page .contact-info ul { list-style-type: none; padding: 0; margin: 0; }
section.contact-page .contact-info ul li { position: relative; padding: 10px 0 10px 30px; color: #3B3B4E; }
section.contact-page .contact-info ul li:before{ content: ""; background: url(../images/icon/right-check.svg) no-repeat; width: 20px; height: 20px; position: absolute; top: 12px; left: 0px; }


/*==========================
    CMS Pages 
============================*/

section.cms-pages {  }
section.cms-pages h2{ font-size: 2.2rem; }
section.cms-pages h3{ font-size: 1.5rem; }
section.cms-pages a{ color: var(--primary-color); }
section.cms-pages ul {padding: 0; list-style: none;  }
section.cms-pages ul li{position: relative; padding: 5px 0 5px 40px;}
section.cms-pages ul li::before {content: '\2192';margin-right: 10px; font-weight: 600; font-size: 22px; position: absolute;left: 0px;top: -2px;}
section.cms-pages ul li ul li::before{content:''; margin: 0;}
section.cms-pages ul li ul {padding: 0px 0px 0px 20px; list-style: decimal-leading-zero; }
section.cms-pages ul li ul li {padding: 5px 0;}
section.cms-pages ul li ul li ul li{ list-style:square; }

/*================== 
    Footer 
====================*/

footer {  padding: 100px 0 0px; background: url(../images/footer-bg.jpg) no-repeat center center; background-size: cover;  }
footer .foot-logo img{ max-width: 130px; } 
footer ul { list-style-type: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 15px; justify-content: center; } 
footer .center-part {  } 
footer .center-part .footer-link { margin: 30px 0; text-transform: uppercase; } 
footer .center-part .social-link { margin: 30px 0; } 
footer .center-part .social-link li {  } 
footer .center-part .social-link li a{ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e2e2; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
footer .center-part .app-store  { margin: 30px 0; } 
footer .center-part .app-store li img{ max-height: 50px; } 
 
footer .copy-right { border-top: 1px solid #e2e2e2; margin: 50px 0 0;  }
footer .copy-right .bottom-bot{ padding: 10px 0;  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
footer .copy-right .bottom-part { display: flex; align-items: center; justify-content: end; gap: 15px; }

 /* ======================= 
      Animation 
=========================== */ 
.asset {position: absolute; transform-style: preserve-3d; will-change: transform; } 
.asset img {  user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; } 
.asset1 { top: -40px; left: 0; animation: floatLeft 2.6s 0.2s ease-in-out infinite; -webkit-animation: floatLeft 2.6s 0.2s ease-in-out infinite; }
.asset2 { top: 40px; right: 0; animation: floatLeft 2.6s 0.3s ease-in-out infinite; -webkit-animation: floatLeft 2.6s 0.3s ease-in-out infinite; }
.asset3 { bottom: -40px; right: 10px; animation: floatUp 2.6s 0.3s ease-in-out infinite; -webkit-animation: floatUp 2.6s 0.3s ease-in-out infinite; }
.asset4 { top: 80px; left: -80px; animation: floatUp 2.6s 0.3s ease-in-out infinite; -webkit-animation: floatUp 2.6s 0.3s ease-in-out infinite; }
.asset5 { top: 70px; right: -50px; animation: floatUp 2.6s 0.3s ease-in-out infinite; -webkit-animation: floatUp 2.6s 0.3s ease-in-out infinite; }
.asset6 { bottom: -80px; left: 0; right: 0; text-align: center; animation: floatRight 4.6s 0.2s ease-in-out infinite; -webkit-animation: floatRight 4.6s 0.2s ease-in-out infinite; }

@keyframes floatLeft {
   0% {
     transform: translate3d(0, 0, 0);
   }
   50% {
     transform: translate3d(5%, 0, 0);
   }
   100% {
     transform: translate3d(0, 0, 0);
   }
 }

 @keyframes floatUp {
   0% {
     transform: translate3d(0, 0, 0);
   }
   50% {
     transform: translate3d(0, -7%, 0);
     -webkit-transform: translate3d(0, -7%, 0);
     -moz-transform: translate3d(0, -7%, 0);
     -ms-transform: translate3d(0, -7%, 0);
     -o-transform: translate3d(0, -7%, 0);
   }
   100% {
     transform: translate3d(0, 0, 0);
   }
 }

 @keyframes floatRight {
   0% {
     transform: translate3d(0, 0, 0);
   }
   50% {
     transform: translate3d(-5%, 0, 0);
     -webkit-transform: translate3d(-5%, 0, 0);
     -moz-transform: translate3d(-5%, 0, 0);
     -ms-transform: translate3d(-5%, 0, 0);
     -o-transform: translate3d(-5%, 0, 0);
}
   100% {
     transform: translate3d(0, 0, 0);
   }
 }