/* TABLE OF CONTENT */
/* -----------------
1.General
2.Navbar
3.Banner
4.About
5.Story
6.Footer
---------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
-webkit-box-sizing:border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
a:hover,
a.active{
color: #EF2A82 !important;
}
ul{
margin:0;
padding:0;
}
/* =========== Variable Define ========== */
/* 1 Custom Css */
html{
scroll-behavior: smooth;
}
::selection{
background-color: #172755;
color: #8794BA;
}
body{
font-family: "Roboto", sans-serif;
background-color: #F8F9FF;
}
::-webkit-scrollbar{
width:.425rem;
}
::-webkit-scrollbar-track{
background:#8794BA;
}
::-webkit-scrollbar-thumb{
background: #172755;
}
h1{
font-size: 50px;
font-weight: 700;
line-height: 60px;
color: #FFFFFF;
}
h2{
font-size: 40px;
font-weight: 700;
line-height: 46.88px;
color: #172755;
}
p{
font-size: 18px;
font-weight: 400;
line-height: 27px;
color: #8794BA;
}
.main-btn{
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
text-transform: capitalize;
-webkit-transition:all 0.4s ease-out 0s;
-moz-transition:all 0.4s ease-out 0s;
-o-transition:all 0.4s ease-out 0s;
-ms-transition:all 0.4s ease-out 0s;
transition:all 0.4s ease-out 0s;
border:0.1875rem solid #EF2A82;
background-color:#EF2A82;
color: #fff;
width:238px;
height:50px;
padding: 10px 80px;
border-radius: 68px;
}
.main-btn:hover{
background-color:transparent;
color: #EF2A82;
}
.main-btn2{
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
-webkit-transition:all 0.4s ease-out 0s;
-moz-transition:all 0.4s ease-out 0s;
-o-transition:all 0.4s ease-out 0s;
-ms-transition:all 0.4s ease-out 0s;
transition:all 0.4s ease-out 0s;
background-color:transparent;
width:200px;
height:50px;
padding: 10px 80px;
position: relative;
overflow: hidden;
border-radius: 68px;
border: 1px solid #465B95
}
.main-btn2:hover {
  box-shadow: .5px .5px 150px #252525;
}

.type1::after {
  content: "Let`s Go";
  height: 50px;
  width: 150px;
  background-color:#EF2A82;
  color: #fff;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(50px);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EF2A82;
  transition: all 0.5s ease-in-out;
}

.type1::before {
  content: "Sign Up";
  height: 50px;
  width: 150px;
  background-color:transparent !important;
  color:#8794BA;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type1:hover::after {
  transform: translateY(0) scale(1.2);
}

.type1:hover::before {
  transform: translateY(-50px) scale(0) rotate(120deg);
}
/* type2 */
.type2::after {
  content: "Now";
  height: 50px;
  width: 218px;
  background-color:#EF2A82;
  color: #fff;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(50px);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EF2A82;
  transition: all 0.5s ease-in-out;
}

.type2::before {
  content: "Order";
  height: 50px;
  width:218px;
  background-color:transparent !important;
  color:#8794BA;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type2:hover::after {
  transform: translateY(0) scale(1.2);
}

.type2:hover::before {
  transform: translateY(-50px) scale(0) rotate(120deg);
}
/* 2 Navbar */
.navigation-wrap{
position:fixed;
width: 100%;
left: 0;
padding:25px 10%;
background-color:transparent;
z-index: 1000;
transition: all 1s ease-out;
}
.navigation-wrap .navbar-brand{
margin: 0;
padding: 0;
}
.navigation-wrap .nav-item{
padding:0 1rem;
transition: all 200ms linear;
}
.navbar-toggler:focus{
outline: unset;
border:unset;
box-shadow: none;
}
.nav-link{
padding: 0 !important;
text-transform: capitalize;
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
color: #8794BA;
}
.buttons .main-btn2{
width:150px;
padding: 10px 60px;
}
.buttons{
margin-left: auto;
width: 240px;
display: flex;
gap: 40px;
align-items: center;
}
.buttons .simple{
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
color: #7587BB;
}
/* Scroll Navbar */
.navigation-wrap.scroll-on{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #172755;
box-shadow:0 0.125rem 1.75rem 0 rgba(0,0,0,0.09);
-webkit-transition: all 0.15s ease-in-out 0s;
-moz-transition: all 0.15s ease-in-out 0s;
-o-transition: all 0.15s ease-in-out 0s;
-ms-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
}
.navigation-wrap.scroll-on .nav-link{
color:#8794BA;
}
/* 3 Top Banner */
.top-banner{
width: 100%;
height:100%;
background:url(../images/background-top.png);
background-size:cover;
padding:6.875rem 0 6.375rem;
overflow: hidden;
}
.top-banner .main-btn{
padding: 10px 70px;
}
/* ****************CARD H CSS START********* */
.header-extradiv{
width:100%;
height:auto;
margin:100px 0;
text-align:center;
}
.extra-div{
background:#F8F9FF;
border:medium none;
padding:50px !important;
border-radius:3px;
transition:0.3s;
}
.extra-div:hover{
box-shadow:0 0 20px 0 rgba(239, 42, 130, 1);
transform:translateY(-20px);
}
.header-extradiv .extra-div h5{
font-size: 16px;
font-weight: 700;
line-height: 18.75px;
color: #172755;
}
.header-extradiv .extra-div p{
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #8794BA;
}
/* ****************CARD H CSS END********* */
.footer-bg{
background: url(../images/background-bottom.png) no-repeat;
background-size: cover;
padding:200px 0 50px;
}
.footer-bg .card{
width: 340px;
height: 440px;
border-radius: 30px;
box-shadow: 0px 18px 50px -15px #192A5933;
padding:50px 60px 40px;
background-color: #0F1F4B;
}
.footer-bg .card h3{
font-size: 30px;
font-weight: 700;
line-height: 35.16px;
color: #FFFFFF;
text-align: center;
margin-bottom: 10px;
}
.footer-bg .card p{
text-align: center;
}
.footer-bg .card hr{
color:#2A407C;
}
.footer-bg .card h2{
font-size: 30px;
font-weight: 700;
line-height: 35.16px;
color: #FFFFFF;
text-align: center;
margin-top: 28px;
}
.footer-bg .card h2 span{
font-size: 60px;
line-height: 70.31px;
color: #FFFFFF;
}
.footer-bg .card-2{
background-color: #fff;
box-shadow: 0px 18px 50px -15px #060F28;
}
.footer-bg .card-2 h2{
color:#172755;
}
.footer-bg .card-2 h3{
color: #172755;
}
.footer-bg .card-2 h2 span{
color: #172755;
}
.footer-bg .card-2 .main-btn{
  width:218px;
  height:50px;
}
.footer-bg .card .main-btn2{
  width:218px;
  height:50px;
}
.footer-bg .links-f ul{
display: flex;
gap: 36px;
}
.footer-bg .links-f ul li{
list-style: none;
}
.footer-bg .links-f ul li a{
font-size: 14px;
font-weight: 400;
line-height: 16.41px;
color: #8794BA;
}
.footer-bg .socials{
display: flex;
gap: 40px;
}
.footer-bg .socials i{
font-size: 20px;
color: #8794BA;
transition: all 1s ease-out;
}
.footer-bg .socials i:hover{
color: #EF2A82;
filter: drop-shadow(0 0 10px #EF2A82);
transform: scale(1.2) rotate(360deg);
}