/* google fonts end */
@import url(../font/stylesheet.css);

/* google fonts end */

/* FONT FAMILY AYER HERE END */

:root {
  --fs-16: 16px;
  --lh-16: 16px;
  --fs-18: 18px;
  --lh-22: 22px;
  --fs-20: 20px;
  --lh-20: 20px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-30: 30px;
  --lh-30: 30px;
  --lh-32: 32px;
  --lh-34: 34px;
  --fs-36: 36px;
  --fs-40: 40px;
  --lh-42: 42px;
  --lh-50: 50px;
  --fs-64: 64px;
  --lh-68: 68px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  color: var(--CTA, #040d33);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  transition: 0.3s ease-in;
  display: inline-block;
  color: inherit;
}

p {
  color: var(--Paragraph, #64748b);
  font-family: Montserrat;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  margin-bottom: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #061a00;
}

input,
textarea,
select {
  width: 100%;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

input[type="radio"],
input[type="checkbox"] {
  width: auto;
}
.mt {
  margin-top: 140px;
}
/* HEADER  */
.navgations {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu .login-process {
  display: none;
}
.menu ul li a {
  transition: 0.3s ease-in;
}
.menu ul li:hover a,
.menu ul li.current-menu-item a {
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.c-btn {
  color: var(--White, #fff);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-16); /* 100% */
  text-transform: uppercase;
  border-radius: 6px;

  display: block;
  padding: 19px 40px;
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.c-btn::before,
.c-btn::after {
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  width: 100%;
  position: absolute;
  content: "";
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  transition: 0.3s ease-in;
}
.c-btn::before {
  background: var(--Logo-Blue, #004aad);
}
a.c-btn.bg-color::before {
  border-radius: 6px;
  background: var(--CTA, #040d33);
}
.c-btn:hover::after {
  opacity: 0;
}
.c-btn:hover::before {
  opacity: 1;
}

header.custom-header {
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: #fff;
  z-index: 99999999;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
/* HEADER  */

/* footer css start */

footer.custom-footer {
  background: var(--CTA, #040d33);

  padding-top: 150px;
}

footer.custom-footer .logo {
  display: block;
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 25px;
}
footer.custom-footer .c-btn {
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 45px;
}
footer.custom-footer .bottom p {
  color: var(--White, #fff);
  text-align: center;
  font-family: Montserrat;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-30); /* 125% */
  margin-bottom: 0px;
  padding-left: 15px;
  padding-right: 15px;
}
footer.custom-footer .bottom {
  padding: 25px 0px;
}
ul.social {
  display: flex;
  align-items: center;
  padding: 0px;
  margin: 0px;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  list-style: none;
}
.title-footer {
  margin-top: 20px;
}
footer.custom-footer .title-footer p {
  color: var(--Footer-Text, #9ca3af);
  text-align: center;
  font-size: var(--fs-30);
  font-style: normal;
  font-weight: 500;
  line-height: var(--lh-42); /* 143.333% */
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 37px;
}

.menu-data ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
footer.custom-footer p {
  padding-bottom: 0px;
}
footer.custom-footer .bottom {
  background: var(--Blue, #004aad);
}
/* footer css end */

/* new header css */
.menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0px;
  margin: 0px;
}
.menu-data ul li a {
  color: var(--Footer-Text, #9ca3af);
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 88.889% */
}
.menu-data ul li a {
  position: relative;
  transition: 0.3s ease-in;
}
.menu-data ul li:hover a {
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menu-data ul li a::after {
  position: absolute;
  content: "";
  right: 0px;
  background-color: #e2e8f0;
  height: 100%;
  width: 1.5px;
  right: -16px;
}
.menu-data ul li:last-child a::after {
  display: none;
}
.menu-data ul li.current-menu-item a {
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menu-data ul {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.menu-data {
  margin-bottom: 60px;
}
.menu ul li a {
  color: var(--Heading, #020817);
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 88.889% */
}
.menu ul li {
  padding: 58px 0px;
  position: relative;
  z-index: 0;
}
.menu ul li a {
  position: relative;
}
.menu ul li a::after {
  position: absolute;
  content: "";
  right: 0px;
  background-color: #e2e8f0;
  height: 100%;
  width: 1.5px;
  right: -16px;
}
.menu ul li:last-child a::after {
  display: none;
}

.menu ul li::after {
  position: absolute;
  content: "";
  width: 100%;
  bottom: 0px;
  background-color: transparent;
  left: 0px;
  height: 2px;
  z-index: 2;
  transition: 0.3s ease-in;
}
.menu ul li.current-menu-item::after {
  background-color: #ea580c;
}
.menu ul li:hover::after {
  background-color: #ea580c;
}
/*  hero section css start */
section.hero-section {
  height: 790px;
  position: relative;
}
.main-slider-hero-section,
section.hero-section .mySwiper-hero {
  height: 100%;
}
section.hero-section .mySwiper-hero .swiper-slide {
  background-size: cover;
  background-repeat: no-repeat;
}
section.hero-section::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.39);
  z-index: 99;
}

.main-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
}
.fs-70 {
  font-size: 70px;
  line-height: normal;
}

.fs-70 {
  color: var(--White, #fff);
  text-align: center;
  font-family: Montserrat;

  font-style: normal;
  font-weight: 600;
  letter-spacing: -1.4px;
}

.toogle-menu {
  display: none;
}

.buttom-btns {
  display: flex;
  align-items: center;
  padding-top: 20px;
  gap: 23px;
}

.buttom-btns a {
  color: var(--White, #fff);
  text-align: center;
  font-family: Montserrat;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 106.667% */
  letter-spacing: 0.75px;
  text-transform: uppercase;
  display: block;
  padding: 20px 40px;
  border-radius: 6px;
  border: 1px solid var(--White, #fff);
  transition: 0.3s ease-in;
}
.buttom-btns a:hover {
  color: var(--CTA, #040d33);
  background: var(--White, #fff);
}

.main-tile .fs-180 {
  color: var(--White, #fff);
  text-align: center;
  font-family: "FreightDispProBold";
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  line-height: 150px; /* 100% */
  letter-spacing: -3.6px;
  margin-bottom: 20px;
  opacity: 0.4;
}
.main-tile p {
  color: var(--White, #fff);
  text-align: center;
  font-family: Montserrat;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-30); /* 130% */
  letter-spacing: -0.8px;
  margin-bottom: 0px;
  opacity: 0.4;
}
.mySwiper-text .swiper-button-next::after,
.mySwiper-text .swiper-button-prev::after {
  display: none;
}
.text-slider {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

.text-slider .swiper-button-next,
.text-slider .swiper-button-prev {
  height: 130px;
  width: 130px;
  bottom: auto;
  top: 30px;
}

.main-title .buttom-btns,
.main-title .fs-70 {
  transition: 0.9s ease-in;
}
section.hero-section.active .main-title .fs-70 {
  transform: translateY(-110px) scale(0.5);
}
section.hero-section.active .main-title .buttom-btns {
  transform: translateY(140px);
  padding-top: 0px;
}
.text-slider .swiper-button-next.swiper-button-disabled,
.text-slider .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.text-slider .swiper-slide.swiper-slide-active .main-tile p,
.text-slider .swiper-slide.swiper-slide-active .main-tile .fs-180 {
  opacity: 1;
}

.main-img-slider {
  position: absolute;
  transition: 1.5s ease-in;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: circle(0% at 50% 50%);
  z-index: 12;
}

.main-img-slider {
  position: absolute;
  transition: 1.5s ease-in;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: circle(0% at 50% 50%);
  z-index: 12;
}

/* Base image style */
.main-img-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 1.2s ease; /* smooth blur transition */
  filter: blur(8px); /* default blur for all slides */
}

/* Active slide effect */
.main-slider-hero-section .swiper-fade .swiper-slide-active .main-img-slider {
  animation: animateme 1.2s ease-in forwards;
}

.main-slider-hero-section
  .swiper-fade
  .swiper-slide-active
  .main-img-slider
  img {
  filter: blur(0); /* remove blur for active one */
}

/* Expanding circular reveal animation */
@keyframes animateme {
  100% {
    clip-path: circle(70.7% at 50% 50%);
  }
}

section.hero-section .mySwiper-hero .swiper-slide {
  position: relative;
  overflow: hidden;
}

/* create blurred background layer */
section.hero-section .mySwiper-hero .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(34);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
}

/* keep your real content clear */
section.hero-section .mySwiper-hero .swiper-slide > * {
  position: relative;
  z-index: 16;
}

.text-slider .container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -120px;
  z-index: 999;
}

.text-slider .container .swiper-button-next::after,
.text-slider .container .swiper-button-prev::after {
  display: none;
}

/* inivation section css start */

section.inovations .container {
  padding-top: 100px;
  position: relative;
  padding-bottom: 45px;
  overflow: hidden;
}
section.inovations .container .mani-logo {
  position: absolute;
  top: 0px;
}
.main-inivations .fs-56 {
  color: var(--Heading, #020817);
  font-weight: 500;
  max-width: 680px;
  width: 100%;
  margin-bottom: 22px;
}
.fs-56 {
  line-height: 60px; /* 107.143% */
  font-size: 56px;
}
.fs-56 span,
.main-inivations .fs-56 span {
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main-inivations {
  max-width: 785px;
  width: 100%;
  padding-bottom: 12px;
}
.fs-20 {
  font-size: var(--fs-20);
  line-height: var(--lh-30);
}
.inovations-grid .fs-20 {
  margin-bottom: 30px;
  color: var(--Heading, #020817);
  font-weight: 600;
}
.main-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}
.inovation-conent h4 {
  margin-top: 35px;
  color: var(--Heading, #020817);
  font-size: var(--fs-26);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-34);
  margin-bottom: 7px;
  /* 130.769% */
}
.inovations-grid h5 {
  text-align: center;
  margin-top: 50px;
  color: var(--Heading, #020817);
  font-family: Montserrat;
  font-size: var(--fs-30);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.inovations-grid h5 strong {
  font-weight: 600;
}

section.inovations {
  position: relative;
  overflow: hidden;
}
.main-cover {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 262px;
  height: 377px;
  transition: 0.5s ease-in;
}
section.inovations::after {
  width: 262px;
  height: 377px;
  position: absolute;
  content: "";
  top: 0px;
  right: 0px;
  background: #eaf5f5;
  z-index: -1;
  transition: 0.5s ease-in;
}
.main-cover {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
section.inovations.active .main-cover,
section.inovations.active::after {
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* inovation css end */

/* seeting css */

section.main-seting {
  padding: 57px 0px;
  background: var(--CTA, #040d33);
}

.list-setings {
  max-width: 1078px;
  width: 100%;
  margin: 0 auto;
  border-radius: 11px;
  padding-bottom: 43px;
  padding-top: 35px;
  border-radius: 18px;
  border: 2px solid rgba(100, 116, 139, 0.2);
  background: rgba(55, 65, 81, 0.3);
  padding-left: 120px;
  padding-right: 120px;
  display: flex;
  justify-content: center;
  justify-content: space-between;
  position: relative;
}
.title-data h3 {
  color: var(--White, #fff);
  text-align: center;
  font-family: Montserrat;
  font-size: var(--fs-30);
  font-style: normal;
  font-weight: 600;
  line-height: normal; /* 100% */
  margin-top: 35px;
}

.title-data .setings {
  width: 154px;
  height: 154px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.list-setings::after {
  border-radius: 11px;
  opacity: 0.1;
  background: var(--Paragraph-1, #64748b);
  width: 100%;
  height: 97%;
  position: absolute;
  content: "";
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.title-data {
  position: relative;
  z-index: 10;
}

.network {
  padding: 92px 0px;
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
}
.main-list {
  display: flex;
  gap: 155px;
  align-items: center;
}
.main-list h2 {
  max-width: 987px;
  width: 100%;
  color: var(--White, #fff);
  font-family: "FreightDispProBold";
  font-size: 72px;
  font-style: normal;
  line-height: 80px; /* 111.111% */
}
.main-list .buttom-btns {
  flex-direction: column;
  padding-top: 0px;
  gap: 35px;
  max-width: 273px;
  width: 100%;
}
.main-list .buttom-btns a {
  width: 100%;
  padding: 18px 30px;
  text-transform: uppercase;
}

/* maimbership css start */
.main-memeber-ship {
  max-width: 1760px;
  width: 100%;
  margin-left: auto;
  padding-left: 15px;
  display: flex;
  gap: 97px;
  position: relative;
  z-index: 999;
}
.membership-content {
  max-width: 450px;
  width: 100%;
}
.membership-content-slider {
  max-width: 1213px;
  width: 100%;
  position: relative;
}
.memebership {
  padding-top: 160px;
  padding-bottom: 90px;
  position: relative;
}
.main-netx-prev {
  position: absolute;
  top: 0px;
  z-index: 99;
  right: 230px;
  width: 130px;
  height: 130px;
  top: -100px;
}
.main-netx-prev img {
  position: absolute;
}
.swiper-button-next1.swiper-button-disabled,
.swiper-button-prev1.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

.membership-content .c-btn {
  max-width: 275px;
  text-align: center;
  margin-top: 35px;
}

.membership-content .fs-56 {
  margin-bottom: 16px;
}
.membership-content span.fs-20 {
  color: var(--CTA, #040d33);
  font-style: normal;
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}

.main-slider-data .fs-20 {
  margin-top: 25px;
  margin-bottom: 10px;
}
section.memebership .mani-logo {
  position: absolute;
  left: 163px;
  top: 109px;
}
.membership-content {
  padding-top: 45px;
}

/* video play section */

section.what-do {
  padding-top: 125px;
  padding-bottom: 60px;
  position: relative;
}
section.what-do .mani-logo {
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
}
.video-data {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.main-video-poup {
  margin-bottom: 30px;
  position: relative;
  height: 540px;
}
.main-video-poup span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.main-video-poup video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-data p {
  text-align: center;
}
.main-what-do {
  margin-bottom: 50px;
}
.main-what-do .fs-56 {
  text-align: center;
  margin-bottom: 35px;
}
.main-what-do p {
  text-align: center;
  margin-bottom: 35px;
}
.main-what-do a {
  width: fit-content;
  margin: 0 auto;
}

/* our comminity */

section.community {
  padding-top: 175px;
  position: relative;
  padding-bottom: 205px;
  background-color: #fff3ee;
  z-index: 2;
}
.bottom-vector {
  position: absolute;
  bottom: 0px;
  z-index: -1;
}
.main-title-community .fs-56 {
  text-align: center;
}
.community-grid {
  padding-top: 60px;
  display: flex;
  gap: 23px;
  justify-content: center;
  padding-top: 60px;
}
.community .mani-logo,
.what-do .mani-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 75px;
}
.community-grid-data {
  max-width: 395px;
  width: 100%;
  border-radius: 18px;
  border: 2px solid rgba(100, 116, 139, 0.2);
  background: rgba(255, 255, 255, 0.7);
  padding: 60px 40px;
}
.community-grid-data img {
  margin-bottom: 22px;
}
.community-grid-data strong {
  color: var(--Heading, #020817);
  font-family: Montserrat;
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-30); /* 166.667% */
  margin-top: 22px;
}

/* end css */

/* botttom news latter css */

.bottom-emailer {
  padding: 30px 55px;
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  max-width: 1385px;
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: -90px;
}
.main-content {
  max-width: 590px;
  width: 100%;
}
.bottom-emailer p {
  color: var(--White, #fff);
  font-family: Montserrat;
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: 500;
  line-height: var(--lh-30); /* 133.333% */
  margin-top: 10px;
}
.main-content h3 {
  color: var(--White, #fff);
  font-family: "FreightDispProBold";
  font-size: var(--fs-40);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-50); /* 125% */
}
.input-feilds {
  display: flex;
  gap: 12px;
  max-width: 620px;
  width: 100%;
}
.input-feilds input[type="email"] {
  border-radius: 6px;
  border: 1px solid var(--Outline, #e2e8f0);
  background: var(--White, #fff);
  padding: 15px 20px;
}
.input-feilds input[type="submit"] {
  text-align: center;
  font-family: Montserrat;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 106.667% */
  letter-spacing: 0.75px;
  text-transform: uppercase;
  border: none;
  outline: none;
  background-color: #fff;
  border-radius: 6px;
  color: #ef4443;
  max-width: 177px;
  width: 100%;
  transition: 0.3s ease-in;
}
.input-feilds input[type="submit"]:hover {
  border-radius: 6px;
  background: var(--CTA, #040d33);
  color: var(--White, #fff);
}
.main-form {
  max-width: 620px;
  width: 100%;
}
.main-what-do p {
  color: var(--CTA, #040d33);
  text-align: center;
  font-family: Montserrat;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-30); /* 140% */
}

/* css end */

/* login poup css start */

.login-poup {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999999999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  display: none;
  justify-content: center;
}
.login-from {
  max-width: 1270px;
  width: 100%;
  background-color: #fff;
  padding: 130px 120px;
  border-radius: 32px;
  position: relative;
}
span.login {
  color: var(--CTA, #040d33);
  font-family: Montserrat;
  font-size: var(--fs-30);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.33px;
  display: block;
  margin-bottom: 10px;
}

.login-from h2 {
  background: var(--Gradiant, linear-gradient(90deg, #ef4443 0%, #ea580c 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Montserrat;
  font-size: 50px;
  margin-bottom: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 60px; /* 120% */
  letter-spacing: -1px;
}
.login-from p {
  max-width: 1026px;
  width: 100%;
  margin-bottom: 30px;
  color: var(--Heading, #020817);
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-30);
}
.main-from .input-feilds{
  display: block;
  margin-bottom: 6px;
  max-width: 736px;
  width: 100%;
  margin-bottom: 20px;
}
.main-from .input-feilds label{
  color: var(--Paragraph, #64748B);
font-family: Montserrat;
font-size: var(--fs-18);
font-style: normal;
font-weight: 600;
line-height: var(--lh-30); /* 133.333% */
margin-bottom: 6px;
}
.main-from a {
  color: var(--Blue, #004AAD);
text-align: right;
font-family: Montserrat;
font-size: var(--fs-18);
font-style: normal;
font-weight: 600;
line-height: var(--lh-30); /* 133.333% */
}
.main-from a.show-password{
  margin-left: auto;
  display: block;
}
.main-from{
  max-width: 736px;
  width: 100%;
}
.main-from .input-feilds input{
border-radius: 3px;
border: 1px solid var(--Outline, #E2E8F0);
background: var(--White, #FFF);
padding: 12px 16px;
color: var(--Paragraph, #64748B);
font-family: Montserrat;
font-size: var(--fs-18);
font-style: normal;
font-weight: 400;
line-height: var(--lh-30); /* 133.333% */
}
.forget-password{
margin-top: 13px;
}
.login-poup .save{
  margin-top: 33px;
  max-width: 145px;
  width: 100%;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  overflow: hidden;

}

.login-poup .save input{
background-color: transparent;
border: none;
padding: 20px 40px;
color: var(--White, #FFF);
text-align: center;
font-family: Montserrat;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 16px; /* 106.667% */
letter-spacing: 0.75px;
text-transform: uppercase;
z-index: 6;
position: relative;
}
.login-poup .save::before,
.login-poup .save::after{
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--CTA, #040D33);
  overflow: hidden;
  content: "";
  left: 0px;
  top: 0px;
  position: absolute;
  transition: 0.3s ease-in;
  opacity: 0;
  z-index: 3;
}
.login-poup .save::before{
background: var(--Gradiant, linear-gradient(90deg, #EF4443 0%, #EA580C 100%));
opacity: 1;
z-index: 2;
}

span.close-me{
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}
.login-poup .save:hover::before{
opacity: 0;
}
.login-poup .save:hover::after{
  z-index: 5;
  opacity: 1;
}

.login-poup.active{
  display: flex;
      animation: .9s 
ease-in animte-drop-down;
}
@keyframes animte-drop-down{
  0% {
    opacity: 0;
    -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
100% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
}
}
/* login poup end */