:root {
	--white: #ffffff;
	--light-gray: #F6F6F6;
	--gray: #2C2C2C;
	--gray-dark: #1E1E1E;
	--primary: #732867;
	--secondary: #969696;
	--success: #00A827;
	--info: #36b9cc;
	--warning: #f6c23e;
	--danger: #EA0000;
	--light: #f8f9fc;
	--dark: #1C1D1F;
	--form-border-color: #FFE3C9; 
	--bg-light: #D3ECFF;
	--bg-color: #fff;
	--table-border: #F5F5F5;
	--light-primary: #FFD5B8;
	--border-color: #ECECEC;
	--purple: #9B2B8B;
	--darkblue: #0067B7;
  --black: #000000;
  --light-green: #04C380;
  --bg-gradient: linear-gradient(90deg, rgba(115, 40, 103, 1) 0%, rgba(180, 39, 158, 1) 100%);
}
html {
  scroll-behavior: smooth;          /* smooth scroll */
  scroll-padding-top: 130px;         /* height of your navbar */
}
body {
  font-family: 'Inria Sans', sans-serif;
}
.bebas {
  font-family: 'Bebas Neue', sans-serif;
}
header nav img{
    width: 120px;
}
body.menu-open::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(167, 167, 167, 0.63);
  z-index: 3;
}
body.menu-open {
  overflow: hidden;
}
/* start-primeary btn */
.primary-btn {
  background: var(--bg-gradient);
  color: var(--white) !important;
  border-radius: 32px;
  display: flex;
  padding: 11px 27px !important;
  justify-content: center;
  align-items: center;
  gap: 7px;
 font-size: 17px;
  transition: 0.5s ease-out;
}
.primary-btn .icon {
  transition: 0.5s ease-out;
  transform: rotate(0deg) scale(1);
}
.primary-btn:hover .icon {
  transform: rotate(45deg) scale(1.05);
}
.primary-btn:hover {
  color: var(--white);
  transform: scale(1.02);
}
/* end-primeary btn */
header nav ul li {
  margin-right: 17px;
}
header nav ul li:last-child{
   margin-right: 0px;   
}
header nav ul li a{
  color: var(--gray) !important;
  font-family: "Inria Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
header .nav-style {
background: rgba(255, 246, 246, 0.64);
  backdrop-filter: blur(6px);
  padding: 0px 15px;
  border-radius: 10px;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0rem;
}
/* -----------------------------banner start--------------------------------- */
.banner{
  background-image: url(../img/banner-bg.webp);
  height: 100%;
  min-height: 730px;
background-size: cover;
  position: relative;
  overflow: hidden;
}

.banner h1 {
  color: #FFF;
  font-family: "Bebas Neue";
  font-size: 380px;
  font-style: normal;
  font-weight: 400;
  position: absolute;
  margin: 0;
  line-height: 0;
  /* bottom: 18%; */
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; 
  animation: fadeh1 0.9s ease-out 2s forwards;
}
@keyframes fadeh1 {
  from {
    opacity: 0;
    bottom: 0%;
  }
  to {
    opacity: 1;
    bottom: 18%;
  }
}

.bg-person {
  position: absolute;
  height: 650px;
  left: 50%;
  transform: translate(-50%, 0%);
  bottom: 0;
  z-index: 1;
  opacity: 0; 
  animation: fadeimg 0.8s ease-out 2s forwards;
}
@keyframes fadeimg {
  from {
    opacity: 0;
    transform: translate(-50%, 8%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}
.star-c,.star-b, .star-a{
 height: 75px;
}
.star-a {
  position: absolute;
  left: 35%;
  transform: translate(-50%,50%);
  bottom: 34%;
  z-index: 2;
  opacity: 0;
  animation: stara 1s ease-out 2s forwards, jumpa  4s linear 0s infinite normal;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(2px);
}
@keyframes stara {
  from {
    opacity: 0;
    left: 25%;
  }
  to {
    opacity: 1;
    left: 35%;
  }
}
.star-b {
position: absolute;
  left: 72%;
  transform: translate(-50%,50%);
  bottom: 47%;
  z-index: 2;
  opacity: 0;
  animation: starb 1s ease-out 2s forwards,jumpb  4s linear 0s infinite normal;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(2px);
}
@keyframes starb {
  from {
    opacity: 0;
    left: 80%;
  }
  to {
    opacity: 1;
    left: 72%;
  }
}
.star-c {
position: absolute;
  left: 59%;
  transform: translate(-50%,50%);
  bottom: 14%;
  z-index: 2;
  opacity: 0;
   animation: starc 1s ease-out 2s forwards, jumpc  4s linear 0s infinite normal;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(2px);
}
@keyframes starc {
  from {
    opacity: 0;
    left: 70%;
  }
  to {
    opacity: 1;
    left: 59%;
  }
}
/* start jump animation */
@keyframes jumpa {
 0%, 100% {
    bottom: 35%;
  }
  50% {
    bottom: 36%;
  }
   100% {
    bottom: 35%;
  }
}
@keyframes jumpb {
 0%, 100% {
    bottom: 47%;
  }
  50% {
    bottom: 46%;
  }
   100% {
    bottom: 47%;
  }
}
@keyframes jumpc {
  0%, 100% {
    bottom: 14%;
  }
  50% {
    bottom: 15%;
  }
   100% {
    bottom: 14%;
  }
}
/* end jump animation */
.banner h2{
color: #1E1E1E;
  font-family: "Bebas Neue";
  font-size: 66px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-134%, -100%);
   opacity: 0;
  animation: h2 1s ease-out 3s forwards;
}
@keyframes h2 {
  from {
    opacity: 0;
    transform: translate(-156%, -100%);
  }
  to {
    opacity: 1;
    transform: translate(-134%, -100%);
  }
}
.banner h3{
color: var(--gray);
font-family: "Inria Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 133.333% */
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(55%, -210%);
opacity: 0;
animation: h3 1s ease-out 3s forwards;
}
@keyframes h3 {
  from {
    opacity: 0;
    transform: translate(80%, -210%);
  }
  to {
    opacity: 1;
    transform: translate(55%, -210%);
  }
}

/* ----------------------------------------------banner end------------------------------------- */
/* ----------------------------------------------mob start------------------------------------- */
.navbar-toggler .hamburger,
.navbar-toggler .close {
 font-size: 32px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
  top: 30px;
  right: 27px;
}
.navbar-toggler .close{
  font-size: 44px;
  top: 26px;
}

.navbar-toggler .hamburger {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.navbar-toggler .close {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}

/* When active (menu open) */
.navbar-toggler.active .hamburger {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

.navbar-toggler.active .close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.navbar-toggler{
  border: none;
}
.navbar-toggler span{
  color: var(--primary);
}
/* ----------------------------------------------mob end------------------------------------- */
.tailored h4,
.handpicked h4{
  color: var(--gray-dark);
font-family: "Bebas Neue";
font-size: 92px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
margin: 0;
}
.handpicked h6{
  color: var(--gray-dark);
  font-family: "Inria Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
}
.handpicked {
  padding: 100px 0px 60px 0px;
  position: relative;
  overflow: hidden;
}
.handpicked .card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.handpicked .card img{
  width: 100%;
  height: 550px;
  object-fit: cover;
  object-position: top;
}
.handpicked .shirt-name {
  position: absolute;
  bottom: 0;
  background: rgba(255, 246, 246, 0.44);
  backdrop-filter: blur(6px);
  width: 100%;
  text-align: center;
  border-radius: 20px 20px 0px 0px;
  border-top: 1px solid var(--white);
}
.handpicked .shirt-name p{
  color: var(--gray-dark);
  font-family: "Bebas Neue";
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  text-align: start;
}
.handpicked .bg-circle{
  width: 500px;
  position: absolute;
  top: -88px;
  left: -160px;
  z-index: -1;
  animation: rotate360 200s linear infinite;
}
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.about h6{
  color: var(--primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  text-transform: uppercase;
}
.about h5{
  color: var(--gray-dark);
  font-family: "Bebas Neue";
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
}
.about p{
  color: var(--gray);
  font-family: "Inria Sans";
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
}
.about .bg-circle{
  position: absolute;
  bottom: -125px;
  right: -141px;
  width: 302px;
  animation: rotate360 200s linear infinite;
}
.tailored .container-fluid{
  margin-left: 111px;
}
.tailored .card img{
  border-radius: 24px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  height: 490px;
}
.tailored .card .nam p{
  color: var(--gray-dark);
  font-family: "Bebas Neue";
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}
.mission img{
  border-radius: 32px;
  height: 666px;
  object-fit: cover;
}
.mission {
margin: 55px 0px;
}
.mission .card.our-m{
  background: var(--bg-gradient);
}
.mission .card.our-m, .mission .card.our-p{
  padding: 50px 40px;
  border-radius: 32px;
  height: 321px;
  place-content: center;
}
.mission .card.our-m p, .mission .card.our-m h3{color: var(--white);}
.mission .card.our-p p, .mission .card.our-p h3{color: var(--gray-dark);}

.mission .card.our-p h3,
.mission .card.our-m h3{
font-family: "Bebas Neue";
font-size: 64px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}
.mission .card.our-p p,
.mission .card.our-m p{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 135%; 
}

.story {
  background: var(--bg-gradient);
  padding: 50px 0px;
}
.story h4{
  color: var(--white);
  font-size: 29px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.story h3{
color: var(--white);
font-family: "Bebas Neue";
font-size: 52px;
font-style: normal;
font-weight: 400;
line-height: 120%; 
text-transform: uppercase;
}
.story img{
border-radius: 32px;
}
.story p{
color: var(--white);
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 36px */
}
.line{
  border-left: 1px solid #fff;
  padding-left: 25px;
}
.circle-a{
  height: 600px;
  width: 600px;
  position: absolute;
  top: -161px;
  border-radius: 50%;
  background: linear-gradient(141deg, rgba(255, 255, 255, 0.00) 35.97%, rgba(255, 255, 255, 0.09) 85.97%);
  left: -160px;;
}
.circle-b {
  height: 600px;
  width: 600px;
  position: absolute;
  top: 50%;
  border-radius: 50%;
  left: 50%;
  transform: translate(50%,-50%);
  background: linear-gradient(141deg, rgba(255, 255, 255, 0.00) 35.97%, rgba(255, 255, 255, 0.09) 85.97%);
}
.circle-c {
  height: 290px;
  width: 290px;
  position: absolute;
  top: 60%;
  border-radius: 50%;
  right: 87%;
  transform: translate(50%,-50%);
  background: linear-gradient(141deg, rgba(255, 255, 255, 0.00) 35.97%, rgba(255, 255, 255, 0.09) 85.97%);
}
.circle-d {
height: 400px;
  width: 400px;
  position: absolute;
  bottom: -17%;
  border-radius: 50%;
  right: 4%;
  background: linear-gradient(141deg, rgba(255, 255, 255, 0.00) 35.97%, rgba(255, 255, 255, 0.09) 85.97%);
  transform: rotate(210deg);
}

.footer-card {
  background: #333;
    background-size: auto;
  padding: 67px 40px;
  margin-top: 70px;
  height: 440px;
border-radius: 32px;
background: linear-gradient(180deg, #FFF1F1 0%, #FFD5D5 100%);
}
footer ul li.social-media{
  color: #fff;
}
footer ul li.social-media a{
  cursor: pointer;
  font-size: 23px;
}
footer ul li.social-media a:first-child{
  margin-right: 17px;
}
.footer-card h4{
  color: var(--gray-dark);
  font-family: "Bebas Neue";
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
}
.footer-card p{
  color: #2C2C2C;
  font-family: "Inria Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
}
.footer-card .footer-img{
  position: absolute;
  height: 410px;
  bottom: 0;
}
.card-label{
position: absolute;
  left: 0;
  background: var(--bg-gradient);
  width: 102%;
  z-index: 0;
  transform: rotate(357deg);
  padding: 21px 0px;
  white-space: nowrap;
  box-sizing: border-box;
  bottom: 0;
}
.card-label .loop-inner span{
color: var(--white);
  font-family: "Bebas Neue";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}
.card-label .loop-inner span img{
width: 37px;
  margin-left: 35px;
  margin-right: 35px;
}
.loop-inner {
  display: inline-block;
  animation: slide-left 100s linear infinite;
}

.loop-inner span {
  display: inline-block;
  padding-right: 2rem; /* space between repeats */
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.footer-card .bg-circle-a{
position: absolute;
  top: -101px;
  left: -119px;
  height: 286px;
  animation: rotate1 200s linear infinite;
}
@keyframes rotate1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.footer-card .bg-circle-b {
  position: absolute;
  top: -101px;
  right: 0px;
  height: 305px;
  animation: rotate2 200s linear infinite;
}
@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

footer {
background: var(--gray-dark);
  border-radius: 32px;
  margin: 35px 45px;
  padding: 51px 30px;
}
footer img {
width: 105px;
  margin-bottom: 20px;
}
footer ul{
  display: flex;
  gap: 51px;
  text-align: end;
  justify-content: end;
  list-style: none;
  margin: 0;
}
footer ul li a{
  color: var(--white);
  text-decoration: none;
  font-size: 19px;
}
footer ul li a:hover {color: #ae2799 !important;
}
footer .fot-wp{
border-bottom: 1px solid var(--white);}
footer p{
color: var(--white);
  margin: 0px;
  padding: 21px 0px;
  font-size: 19px;
}

.cus-modal.modal h1{
  color: #1E1E1E;
  font-family: "Bebas Neue";
  font-size: 54px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
  margin-top: 15px;
}
.cus-modal.modal .modal-header{
border-bottom: none;
}
 .cus-modal.modal .modal-content{
  padding: 16px;
  border-radius: 30px !important;
  position: relative;
}
.cus-modal .btn-close {
  position: absolute;
  right: 0px;
  top: 0px;
}
.cus-modal form input{
  height: 45px;
  border-radius: 25px;
  padding: 10px 25px;
}
.cus-modal textarea{
  border-radius: 16px;
  border: 1px solid #cacac5 !important;
  padding: 12px;
}
.cus-modal p{
font-size: 19px;
  margin-bottom: 40px;
}
.cus-modal .primary-btn{
padding: 11px 45px !important;
}
.cus-modal .modal-dialog.modal-dialog{
 margin-right: 10px; 
}
.store{
  background: #ffebec;
    padding: 10px;
    max-height: 90px;
    border-radius: 20px;
   margin-top: 0px !important;
}
.love-icon{
  font-size: 30px;
  color: #752869;
  vertical-align: sub;
}



.store-banner {
  z-index: 1030; /* higher than navbar, if you have one */
  top: 100px;
}

.primary-btn {
  background-color: #6c63ff;
  color: #fff !important;
  padding: 6px 16px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.primary-btn:hover {
  background-color: #5a54e3;
}

.love-icon {
  color: #752869;
  font-size: 24px;
}


























/* ---------------------------------------------responsive------------------------------------ */
@media (max-width: 1399.98px) { 
.banner {min-height: 749px;}
.banner h1 {font-size: 327px;}
@keyframes fadeh1 {
  from {
    opacity: 0;
    bottom: 0%;
  }
  to {
    opacity: 1;
    bottom: 13%;
  }
}
.bg-person {height: 630px;}
.banner h2 {font-size: 57px;}
.banner h3 {font-size: 20px;}
@keyframes h3 {
  from {
    opacity: 0;
    transform: translate(80%, -210%);
  }
  to {
    opacity: 1;
    transform: translate(58%, -185%);
  }
}
.star-a {left: 34%;}
  @keyframes stara {
  from {
    opacity: 0;
    left: 25%;
  }
  to {
    opacity: 1;
    left: 34%;
  }
}

.star-c, .star-b, .star-a { height: 71px;}
.tailored .card img {height: 420px;}
}







@media (max-width: 1199.98px) { 
  .banner h1 {font-size: 250px;}
  @keyframes fadeh1 {
  from {
    opacity: 0;
    bottom: 0%;
  }
  to {
    opacity: 1;
    bottom: 10%;
  }
}
 .banner h2 {font-size: 47px;}
  @keyframes h2 {
  from {
    opacity: 0;
    transform: translate(-150%, -134%);
  }
  to {
    opacity: 1;
    transform: translate(-136%, -134%);
  }
 }
.banner h3 {font-size: 17px;line-height: 26px;}
  @keyframes h3 {
  from {
    opacity: 0;
    transform: translate(67%, -250%);
  }
  to {
    opacity: 1;
   transform: translate(55%, -250%);
  }
}
.star-c, .star-b, .star-a {height: 60px;}
.star-b {}
  @keyframes jumpb {
 0%, 100% {
    bottom: 42%;
  }
  50% {
    bottom: 43%;
  }
   100% {
    bottom: 42%;
  }
}
@keyframes starb {
  from {
    opacity: 0;
    left: 83%;
  }
  to {
    opacity: 1;
    left: 78%
  }
}
.tailored h4, .handpicked h4 {font-size: 75px;}
.handpicked h6 {font-size: 26px;}
.handpicked .card img {height: 430px;}
.tailored .card img { height: 370px;}
.about h5 {font-size: 32px;}
.about p {font-size: 17px;}
.about .bg-circle {width: 272px;}


}


@media (max-width: 991.98px) { 
.banner h2{transform: translate(-50%,0%) !important;top: 14%;right: 50%;width: 82%;text-align: center;font-size: 58px;}
.banner h3 br,.banner h2 br{display: none;}
.banner h2 br.cus-br{display: block;}
header .nav-style {margin: 0;max-width: 100%;}
header nav ul li {margin-right: 0px;}
header nav ul {text-align: center;}
.banner {min-height: 940px;}
.banner h3 {font-size: 16px;line-height: 30px;top: 29%;right: 50%;transform: translate(-50%, 0%) !important;width: 70%;left: 50%;text-align: center;}
.banner h1 {font-size: 218px;bottom: 6% !important;}
.story h3, .tailored h4, .handpicked h4 { font-size: 60px;}
.story h3 br{display: none;}
.handpicked h6 {font-size: 23px;}
.handpicked .bg-circle {width: 395px;}
.handpicked .card img {height: 300px;}
.handpicked .shirt-name p {font-size: 21px;}
.about h6 {font-size: 18px;}
.about h5 {font-size: 27px;}
.tailored .container-fluid {margin-left: 0px;}
.tailored .card img { height: 290px;border-radius: 10px;}
.tailored .card .nam p {font-size: 24px;}
.mission .card.our-p h3, .mission .card.our-m h3 {font-size: 41px;}
.mission .card.our-p p, .mission .card.our-m p {font-size: 16px;}
.mission .card.our-m, .mission .card.our-p {height: 245px;}
.mission img { border-radius: 32px;height: 515px;}
.story p {font-size: 18px;}
.footer-card .footer-img {height: 326px;bottom: 0;right: 0px;}
footer { margin: 34px 25px;padding: 35px 30px;}
.cus-modal.modal h1 {font-size: 47px !important;}
}



@media (max-width: 767.98px) {
  .store{
  background: #ffebec;
    padding: 20px;
    max-height: 160px;
    border-radius: 20px;
   margin-top: 30px !important;
   margin-bottom: 10px !important;
   padding-bottom: 30px !important;
}
.love-icon{font-size: 35px;}
.store-banner p{padding-left: 5px !important;}
.banner h2 {font-size: 47px;}
.banner h3 {font-size: 16px; line-height: 24px;top: 29%;}
.bg-person {height: 520px;}
.banner {min-height: 815px;}
.star-a {}
@keyframes jumpa {
 0%, 100% {
    bottom: 25%;
  }
  50% {
    bottom: 26%;
  }
   100% {
    bottom: 25%;
  }
}@keyframes stara {
  from {
    opacity: 0;
    left: 15%;
  }
  to {
    opacity: 1;
    left: 20%;
  }
}
.banner h1 {bottom: 6% !important;font-size: 175px;}
@keyframes starb {
  from {
    opacity: 0;
    left: 90%;
  }
  to {
    opacity: 1;
    left: 78%;
  }
}@keyframes jumpb {
 0%, 100% {
    bottom: 30%;
  }
  50% {
    bottom: 31%;
  }
   100% {
    bottom: 30%;
  }
}
.banner h2 {top: 16%;}
.banner h3 {top: 31%;}
.handpicked .bg-circle { width: 357px;}
.handpicked .card img {height: 560px;}
.handpicked .shirt-name p { font-size: 27px;}
.about .bg-circle {bottom: -269px;}
.tailored .card img {height: 560px;}
.tailored .card .nam p {font-size: 35px;}
.about h5 {font-size: 29px;}
.about .bg-circle {bottom: -343px;}
.mission img {margin-top: 40px;}
.story h3 {font-size: 36px;}
.story h4 {font-size: 22px;margin-bottom: 19px;}
.footer-card {height: 640px;}
.footer-card h4 br{display: none;}
.footer-card h4 {font-size: 45px;}
.footer-card {height: 560px;}
 .footer-card .footer-img {height: 360px;}
 .card-label {bottom: 51px;}
 .footer-card .bg-circle-b {top: 178px;right: -40px; height: 305px;}
 footer p, footer ul li a {font-size: 16px;}
}

 @media (max-width: 575.98px) { 
.banner h2 {font-size: 36px;width: 92%;top: 20%;}
.banner h3 {top: 35%;font-size: 15px;line-height: 21px;width: 92%;}
.bg-person { height: 359px;}
.star-c, .star-b, .star-a { height: 43px;}
.banner {min-height: 640px;}
@keyframes starb {
  from {
    opacity: 0;
    left: 90%;
  }
  to {
    opacity: 1;
    left: 78%;
  }
}@keyframes jumpb {
 0%, 100% {
    bottom: 49%;
  }
  50% {
    bottom: 50%;
  }
   100% {
    bottom: 49%;
  }
}
.banner h1 {bottom: 5% !important;font-size: 123px;}
.tailored h4, .handpicked h4 {font-size: 48px;}
.handpicked h6 { font-size: 21px;}
.footer-card {height: 615px;}
footer ul {
  display: block;
  list-style: none;
  margin: 0;
  text-align: center;
  padding: 0;
}
 footer ul li{
  padding-bottom: 15px;
 }
   footer p{
    text-align: center;
  }
  footer img {
  width: 150px;
  margin-bottom: 20px;
}
  footer p, footer ul li a {
    font-size: 18px;
  }
}

 @media (max-width: 400.98px) { 
.banner h2 {font-size: 32px;width: 92%;}
.banner h3 {top: 34%;font-size: 13px;line-height: 18px; width: 92%;}
.banner h1 {bottom: 5% !important;font-size: 105px;}
.handpicked h6 {font-size: 19px;}
.tailored h4, .handpicked h4 {font-size: 42px;}
.about .bg-circle {bottom: -358px;}
.mission img {height: 430px;}
.mission {margin: 10px 0px;}
.tailored .card img {height: 340px;}
.story h3 {font-size: 34px;}
.footer-card p {font-size: 17px;}
.footer-card h4 {font-size: 45px;line-height: 50px;}
.footer-card {height: 670px;}
.footer-card .footer-img {height: 333px;}
footer p{font-size: 12px;}
 .cus-modal.modal h1 {
    font-size: 43px !important;
    margin-top: 26px;

}
.cus-modal p {
  font-size: 17px;
  margin-bottom: 40px;
  line-height: 23px;
  margin-top: 10px;
}
}