@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

* {
  margin: 0px;
  padding: 0px;
  /* box-sizing: border-box; */
}
.top-border {
  box-shadow: 0px 10px 50px 50px rgba(0, 0, 0, 0.6);
  position: sticky;
  top: 0px;
}
.header-div > div img {
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.6));
}
.header-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 0px 100px;
  padding: 0px 25px;
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.6));
  filter: opacity(40px);
  position: sticky;
  top: 0px;
}
.header-div > .login-btn {
  display: flex;
  justify-content: flex-end;
  width: 438.16px;
  height: 38px;
  text-align: center;
}
.header-div > .login-btn a {
  background-color: rgb(241, 239, 239);
  border-radius: 25px;
  width: 88.86px;
  height: 27px;
  padding-top: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 1);
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400px;
  text-decoration: none;
  text-transform: capitalize;
  /* text-align: justify; */
  filter: drop-shadow(12px 16px 12px rgba(0, 0, 0, 0.6));
  position: sticky;
}
.navbar {
  display: flex;
  justify-content: center;
}
.navbar > ul > li a {
  text-decoration: none;
  display: inline;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  margin: 3.2px 20px;
  font-weight: 700;
  color: #ffffffb3;
  text-shadow: rgba(0, 0, 0, 0.5);
  filter: drop-shadow(12px 16px 12px rgba(0, 0, 0, 0.6));
}
.navbar > ul {
  background-color: rgba(0, 0, 0, 0.548);
  position: relative;
  bottom: 107px;
  padding: 0px 16px;
  border-radius: 100px;
  width: 415px;
  height: 45.5px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(12px 12px 15px rgba(0, 0, 0, 0.6));
}
.navbar > li {
  position: sticky;
}
.navbar > ul > li a:hover {
  color: #ffffff;
}
.hero-sec {
  display: flex;
  justify-content: center;
}
.hero-sec > .hero-img {
  position: relative;
  bottom: 160px;
  z-index: -2;
  filter: drop-shadow(0px 16px 12px rgba(0, 0, 0, 0.6));
  background-image: url("./assets/images/hero_banner/hero.jpg");
  box-shadow: 0px 0px 5px 800px rgba(5, 0, 0, 0.6) inset;
  width: 1250px;
  height: 850px;
  background-repeat: no-repeat;
  background-position: unset;
  background-size: contain;
  clip-path: xywh(0 70px 100% 71% round 5% 40px);
  /* clip-path: polygon(51% 25%, 100% 25%, 100% 75%, 51% 70%, 0% 75%, 0% 25%); */
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: -2;
}
.hero-content > h1 {
  font-size: 60px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  position: relative;
  bottom: 680px;
}
.hero-content > h2 {
  font-size: 60px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  position: relative;
  bottom: 680px;
}
.hero-content > p {
  font-size: 23px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  position: relative;
  bottom: 680px;
}
.hero-content > div {
  position: relative;
  bottom: 650px;
  background-color: rgb(229, 9, 20);
  width: 250px;
  height: 56px;
  font-size: 20px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-content > div a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Manrope", sans-serif;
}

#trending {
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem;
  color: #ffffffb3;
  font-weight: 900;
  position: relative;
  bottom: 550px;
  right: 0px;
  left: 150px;
  z-index: -1;
}
#card-sec {
  display: flex;
  /* justify-content: space-evenly; */
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  bottom: 550px;
  z-index: -1;
  left: 110px;
  max-width: 1150px;
}

#card-sec > div ul {
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  max-width: 1150px;
  list-style: none;
  padding: 25px;
}

#card-sec > div > ul > li img {
  display: inline;
  border-radius: 1rem;
  width: 135px;
  height: 260px;
  box-shadow: 10px 10px 10px 50px rgba(0, 0, 0, 0.8) inset;
}
.num {
  font-size: 4rem;
  font-family: sans-serif;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);
  filter: drop-shadow(5px 10px 5px 16px black inset);
  -webkit-text-stroke: 0.125rem rgb(255, 255, 255);
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  right: 160px;
}
.card-heading{
  font-family: sans-serif;
  /* font-size:; */
  color: #ffffffb3;
  font-size: 1.8rem;
  text-transform: capitalize;
  position: relative;
  bottom: 510px;
  left: 150px;
}
#main-div {
   background-image: linear-gradient(to bottom right, rgba(1, 84, 139, 0.788),
  rgba(5, 0, 0, 0.925));
  width: 212px;
  height: 245px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  position: relative;
  left: 130px;
  bottom: 490px;
  color: #ffffff;
  padding: 25px 40px 11px 14px;
  z-index: -1;

}
#main-div:hover{
  cursor: pointer;
  background-image: linear-gradient(to bottom right, rgba(3, 127, 209, 0.788),
  rgba(5, 0, 0, 0.925));
  scale: 1.01;
  transition: ease-out 0.1s;

}
.main-content > div > .top-h2 {
  font-family: sans-serif;
  font-size: 25px;
  color: #ffffff;
  font-weight: 700;
  padding: 5px;
}
.main-content > div > .sec-h2 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 25px;
  color: #ffffffb3;
  font-weight: 500;
  padding: 5px;
}
.points {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 18px;
  color: #ffffffb3;
  font-weight: 300;
  padding: 5px;
}
.price {
  font-family: sans-serif;
  font-size: 22px;
  color: #ffffffb3;
  font-weight: 500;
  padding: 5px;
}
.points > ul > li {
  list-style: none;
}
#m-d{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  max-width: 1150px;
}
#p-par-div{
  background-color:rgb(34, 29, 29);
  width: 225px;
  height: 200px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  position: relative;
  left: 130px;
  bottom: 400px;
  padding: 16px;
  z-index: -1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.img-p{
  display: flex;
  justify-content: flex-end;
}
.img-p>img{
  width: 49px;
  height: 49px;
}
.parent-div{
  width: 193px;
  height: 72px;
}
.heading-p{
  font-family: "Manrope";
  font-size: 14px;
  padding: 3px;
  color: #ffffff;
}
.para-p{
  font-family: "Manrope";
  font-size: 15px;
  padding: 3px;
  color: #ffffffb3;
  font-weight: 600;
}
.main-div-p{
  max-width: 1150px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.m-reason-sec{
  font-family: sans-serif;
  /* font-size:; */
  color: #ffffffb3;
  font-size: 1.8rem;
  text-transform: capitalize;
  position: relative;
  bottom: 430px;
  left: 150px; 
}
#main-footer-div{
  display: flex;
  flex-direction: column;
}
#main-div-f{
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  flex-direction: column;
  position: relative;
  bottom: 360px;
  left: 135px;
}
#main-div-f>.first-div-f{
  padding: 15px;
  font-size: 17px;
}
#main-div-f>.first-div-f>a{
  color: #ffffffb3;
}
#sec-div-f{
  display: flex;
  justify-content: space-between;
  width: 850px;
  padding: 20px;
  line-height: 2;
  text-transform: capitalize;
  font-family: Helvetica, sans-serif;
   font-size: 15px;
  /* text-decoration: wavy; */
}
#sec-div-f>.sec-sub-div-f>ul>li{
list-style: none;

}
#sec-div-f>.sec-sub-div-f>ul>li>a{
  color: #ffffffb3;
}

.thrd-div-f{
  padding: 20px;
}
.thrd-div-f>select{
  background-color: rgba(0, 0, 0, 0.5);
  width: 128px;
  height: 34px;
  border-radius: 1rem;
  border: solid 1px #ffffffb3;
  text-align: center;
  /* padding: 6px 36px 6px 34px; */
  color: #ffffffb3;
}
.frth-div-f{
  padding: 20px;
  font-family: Helvetica, sans-serif;
  color: #ffffffb3;
  font-size: 14px;
  font-weight: 200;
}
.contact-link-f{
  padding: 25px;
}
@media screen and (max-width: 755px) {
 #main-footer-div{
  display: flex;
  flex-direction: column;
  max-width: 355px;
 }
}


body {
  background: -webkit-linear-gradient(
    rgba(39, 0, 0, 0.863),
    rgba(5, 0, 0, 1)
  );
  overflow-x: hidden;
}