/** @format */

/* ! link font  */
@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Peralta&family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "poppins", sans-serif;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

:root {
  --blue: #4b40c5;
  --orange: #ec682c;
  --white: #fff;
  --black: #000;
  --radious-card-shadow: 0px 2.4631879329681396px 4.187419891357422px 0px
      rgba(0, 0, 0, 0),
    0px 10.838027954101562px 8.67042064666748px 0px rgba(0, 0, 0, 0.01),
    0px 26.60243034362793px 17.291582107543945px 0px rgba(0, 0, 0, 0.01),
    0px 51.234317779541016px 33.893463134765625px 0px rgba(0, 0, 0, 0.01),
    0px 86.2115707397461px 62.318668365478516px 0px rgba(0, 0, 0, 0.02),
    0px 133.0121612548828px 106.40972137451172px 0px rgba(0, 0, 0, 0.02);
  --card-colom-shadow: 0px 2.4631879329681396px 4.187419891357422px 0px
      rgba(0, 0, 0, 0),
    0px 10.838027954101562px 8.67042064666748px 0px rgba(0, 0, 0, 0.01),
    0px 26.60243034362793px 17.291582107543945px 0px rgba(0, 0, 0, 0.01),
    0px 51.234317779541016px 33.893463134765625px 0px rgba(0, 0, 0, 0.01),
    0px 86.2115707397461px 62.318668365478516px 0px rgba(0, 0, 0, 0.02),
    0px 133.0121612548828px 106.40972137451172px 0px rgba(0, 0, 0, 0.02);
}

/* ? header-container design starts here  */
header {
  background: url(./img/background-img.png) no-repeat 50% center;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0.9;
  overflow: hidden;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.logo {
   margin-top: 48px; 
  /*margin-left: 55px;*/
}

.logo a {
  color: darkblue;
  font-family: Georgia;
  font-size: 40px;
  font-weight: 600;
  text-decoration: none;
}

.nav-list {
  flex: 1;
  text-align: right;
}

.nav-list ul li {
  list-style: none;
  display: inline-block;
  margin: 50px 54px 0px 13px;
}

nav ul li a {
  color: var(--1st, #212832);
  text-align: center;
  font-size: 22.612px;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

nav ul li .btn-orange {
  border-radius: 8px;
  border: 1px solid var(--orange);
  background: var(--orange);
  height: 40px;
  padding: 8px 20px;
  color: var(--white);
  font-size: 22.612px;
  font-weight: 400;
}

/* *text box  */

.text-box {
  text-align: start;
  margin: 180px 0px 451px 41px;
  position: relative;
  top: 150px;
}

.text-box > h1 {
  color: yellow;
  font-size: 48px;
  font-weight: 700;
  line-height: 118.381px;
  letter-spacing: -1.92px;
}

.text-box > h2 {
  color: #E8DC97;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
}

.text-box > button {
  border-radius: 13.301px;
  background: #4b40c5;
  box-shadow: 0px 26.60243034362793px 46.55425262451172px 0px
    rgba(241, 165, 1, 0.15);
  color: #fff1da;
  text-align: center;
  font-family: Poppins;
  font-size: 23.942px;
  font-weight: 500;
  border: none;
  padding: 1rem;
  margin-top: 26px;
}

/* ? header-container design end here  */

/* todo main-container starts here  */
/* ? category-container starts here  */
.category-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin: 4rem auto;
  z-index: 500;
}

.category-container > p {
  color: var(--blue);
  font-size: 32px;
  font-weight: 700;
}

.category-container > h1 {
  color: var(--3rd, #14183e);
  font-size: 64px;
  font-weight: 700;
  text-transform: capitalize;
}

.category-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  margin: 6rem auto;
}

.content-card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  align-items: center;
  width: 313.15px;
  height: 393.544px;
}

.content-card > h2 {
  color: #000;
  font-size: 24px;
  font-weight: 500;
  width: 201px;
  height: 33px;
}

.content-card > p {
  color: #000;
  font-size: 20px;
  font-weight: 400;
  line-height: 34.583px;
  width: 212px;
  height: 136px;
  margin-top: 16px;
}

.content-card > img {
  align-items: center;
}
.card-col {
  position: relative;
}
.card-col > .boder-orange {
  position: absolute;
  top: 313px;
  left: -50px;
  z-index: -1;
  width: 117.285px;
  height: 125.333px;
  border-radius: 39.904px 0px 13.301px 0px;
  background: var(--orange);
}
.card-col > .boder-blue {
  position: absolute;
  top: -30px;
  left: 225px;
  z-index: -1;
  width: 117.285px;
  height: 125.333px;
  border-radius: 0px 39.904px 0px 13.301px;
  background: #4b40c5;
}
.radious-card > .back-image {
  position: relative;
  top: -15px;
  left: 20px;
  width: 58px;
  height: 60px;
  background: rgba(240, 187, 31, 0.3);
}
.radious-card > .left-img > img {
  position: absolute;
  top: -186px;
  left: -34px;
}
.radious-card > .right-img > img {
  position: absolute;
  top: 16px;
  left: -12px;
}
.radious-card > .left-img {
  border-radius: 6.651px 13.301px 6.651px 23.942px;
}
.radious-card > .right-img {
  border-radius: 6.651px 23.942px 6.651px 13.301px;
}
.radious-card {
  border-radius: 47.884px;
  background: var(--white, --white);
  box-shadow: var(--radious-card-shadow);
}

.category-container > .orange-color {
  border-radius: 39.904px 0px 13.301px 0px;
  background: var(--orange);
  width: 117.285px;
  height: 125.333px;
  z-index: 1000;
}
/* ? category-container end here  */

/* ? topSelling-container start here  */
.topSelling-container {
  text-align: center;
}
.topSelling-container > p {
  color: var(--blue);
  text-align: center;
  font-size: 32px;
  font-weight: 700;
}
.topSelling-container > h1 {
  color: var(--3rd, #14183e);
  text-align: center;
  font-size: 62px;
  font-weight: 700;
  margin: 40px auto;
}
.row-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.card-colom {
  position: relative;
  width: 417.658px;
  height: 607.866px;
}
.card-colom > .img > img {
  position: absolute;
}
.card-colom > .img > .rome-img {
  top: -3px;
  left: -21px;
}
.card-colom > .img > .london-img {
  top: -3px;
  left: -106.5px;
}
.card-colom > .img > .europe-img {
  top: -3px;
  left: -106px;
}
.card-contents {
  border-radius: 0px 0px 31.923px 31.923px;
  background: var(--white, #ffffff);
  width: 418.988px;
  height: 172.916px;
  position: absolute;
  bottom: 0px;
}
.card-contents > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-contents > span > p:nth-child(1) {
  margin-left: 26.6px;
}
.card-contents > span > p:nth-child(2) {
  margin-right: 37.23px;
}
.card-contents > span > p {
  color: var(--textclr, #5e6282);
  font-size: 24px;
  font-weight: 500;
  line-height: 124.5%;
  margin-top: 35.9px;
}
.card-contents > p {
  color: var(--textclr, #5e6282);
  font-size: 20px;
  font-weight: 500;
  line-height: 124.5%;
  display: flex;
  align-items: center;
  margin-top: 24.54px;
  margin-left: 26.6px;
  gap: 18.62px;
}
/* ? topSelling-container end here  */

/* ? easySteps-container start here  */
.easySteps-container {
  position:relative;
  top:-80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.left-content > p {
  color: var(--textclr, #5e6282);
  font-size: 23.942px;
  font-weight: 600;
  width: 204px;
  height: 32px;
  margin-left: 50.6px;
}
.left-content > h1 {
  width: 686px;
  height: 155px;
  color: var(--3rd, #14183e);
  font-size: 64px;
  font-weight: 700;
  text-transform: capitalize;
  margin-left: 41.6px;
}
.texts {
  display: flex;
  width: 529px;
  min-height: 300px;
  margin-top: 38px;
  margin-left: 41.6px;
  column-gap: 24.68px;
  align-items: center;
}
.texts span > h1 {
  color: var(--textclr, #5e6282);
  font-size: 24px;
  font-weight: 700;
  line-height: 124.5%;
}
.texts span > p {
  color: var(--textclr, #5e6282);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 124.5%;
}

.background-color-blur {
  width: 424.228px;
  height: 439.807px;
  border-radius: 439.807px;
  opacity: 0.8;
  background: #4b40c5;
  filter: blur(99.75911712646484px);
  position: relative;
  top: 236.6px;
  right: 100.7px;
}
/* * small card start */
.big-card {
  position: relative;
  top: -108.4px;
  right: 175.22px;
  width: 443.402px;
  height: 479.354px;
  border-radius: 34.583px;
  background: var(--white, #fff);
  box-shadow: 0px 2.4631879329681396px 4.187419891357422px 0px rgba(0, 0, 0, 0),
    0px 10.838027954101562px 8.67042064666748px 0px rgba(0, 0, 0, 0.01),
    0px 26.60243034362793px 17.291582107543945px 0px rgba(0, 0, 0, 0.01),
    0px 51.234317779541016px 33.893463134765625px 0px rgba(0, 0, 0, 0.01),
    0px 86.2115707397461px 62.318668365478516px 0px rgba(0, 0, 0, 0.02),
    0px 133.0121612548828px 106.40972137451172px 0px rgba(0, 0, 0, 0.02);
}
.big-card > h2 {
  color: var(--black, #080809);
  font-size: 24px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: 0.36px;
  text-align: left;
  margin-left: 30.22px;
  margin-top: 31.62px;
}
.big-card > img {
  margin-top: 23.97px;
  margin-left: 29.96px;
}
.text-content {
  display: flex;
  text-align: left;
  justify-content: left;
}
.text-content > span {
  color: var(--text-2, #84829a);
  font-size: 21.282px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -0.106px;
  margin-left: 48px;
}
.text-content > p {
  color: var(--text-2, #84829a);
  font-size: 21.282px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -0.106px;
  margin-left: 29.96px;
}
.card-icons {
  align-items: center;
  margin: 8px;
}
.card-icons > span {
  background-color: #f5f5f5;
  border-radius: 50%;
  margin-left: 33.55px;
  padding: 8px;
}
.card-icons > span > img {
  width: 16.777px;
  height: 16.777px;
}
.people-going {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.people-going > span {
  display: flex;
  text-align: start;
  justify-content: left;
}
.people-going > span > .building > img {
  margin-left: 29.96px;
  margin-top: 34.74px;
  margin-bottom: 43.14px;
}
.people-going > span > p {
  color: var(--text-2, #84829a);
  font-size: 21.282px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -0.426px;
  margin: 35.95px 0px 37.69px 17.98px;
}
.people-going > img {
  margin-right: 29.96px;
  margin-bottom: 38px;
}
/* * small card end */

/* * small card start */
.small-card {
  display: flex;
  position: relative;
  top: -334px;
  left: 86px;
  align-items: flex-start;
  justify-content: left;
  width: 315.175px;
  height: 154.592px;
  border-radius: 23.942px;
  background: var(--white, #fff);
  box-shadow: 0px 2.4631879329681396px 4.187419891357422px 0px rgba(0, 0, 0, 0),
    0px 10.838027954101562px 8.67042064666748px 0px rgba(0, 0, 0, 0.01),
    0px 26.60243034362793px 17.291582107543945px 0px rgba(0, 0, 0, 0.01),
    0px 51.234317779541016px 33.893463134765625px 0px rgba(0, 0, 0, 0.01),
    0px 86.2115707397461px 62.318668365478516px 0px rgba(0, 0, 0, 0.02),
    0px 133.0121612548828px 106.40972137451172px 0px rgba(0, 0, 0, 0.02);
}
.small-card > .text-rome > p {
  color: var(--text-2, #84829a);
  font-size: 18.622px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -0.652px;
  margin-top: 19.08px;
  margin-right: 110px;
}
.small-card > .text-rome > h2 {
  color: var(--black, #080809);
  font-size: 23.942px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -0.359px;
  margin-top: 7px;
}
.small-card > .text-rome > div > p > span {
  color: var(--1, #8a79df);
  font-size: 18.622px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -1.024px;
  margin-top: 16px;
}
.small-card > .text-rome > div > p {
  color: var(--text-2, #080809);
  font-size: 18.622px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: -0.652px;
  margin-top: 16px;
}
.small-card > .icon-image > img {
  border-radius: 50%;
  margin-top: 20.37px;
  margin-left: 29.39px;
  margin-right: 12px;
}
/* * small card end */
/* ? easySteps-container end here  */

/* ? choose-container start here  */
.text-choose {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.text-choose > h1 > span {
  color: #7f2736;
  font-size: 40px;
  font-weight: 700;
  line-height: 180%;
}
.text-choose > h1 {
  color: #080809;
  font-size: 40px;
  font-weight: 700;
  line-height: 180%;
}
.text-choose > p {
  width: 858.49px;
  height: 125.398px;
  color: #2c2d32;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 180%;
}

.choose-cards {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  margin-top: 122.72px;
}
.choose-cards > .choose-card {
  position: relative;
  width: 430px;
  height: 405px;
  margin-bottom: 184px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 10px 60px 0px rgba(38, 45, 118, 0.08);
}
.choose-card > h1 {
  color: #000;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  width: 340px;
  height: 42px;
  margin-top: 115px;
  margin-left: 50px;
}
.choose-card > p {
  color: #000;
  font-size: 20px;
  font-weight: 400;
  line-height: 180%;
  width: 325px;
  height: 136px;
  margin-top: 30px;
  margin-left: 50px;
}
.choose-card > img {
  position: relative;
  top: -25px;
}
.choose-card > span {
  position: absolute;
  top: -50px;
  left: 167px;
  width: 96px;
  height: 94px;
  border-radius: 50%;
}
.choose-card > .blues-circle {
  background-color: #4b40c5;
}
.choose-card > .yellow-circle {
  background-color: #f0bb1f;
}
.choose-card > .orange-circle {
  background-color: #f15a2b;
}
/* ? choose-container end here  */

/* ? rectangle-container start here  */
.rectangle-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: center;
  margin: auto;
  margin-bottom: 195.28px;
  width: 1350.493px;
  height: 484.792px;
  border-radius: 171.586px 26.602px 26.602px 26.602px;
  background-color: #f9f7fe;
}
.rectangle-content > h2 {
  width: 991px;
  height: 161px;
  color: var(--textclr, #5e6282);
  font-size: 32px;
  font-weight: 600;
  line-height: 71.827px;
  margin-left: 194.58px;
  margin-top: 107px;
}
.rectangle-content > .email-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.rectangle-content > form {
  margin-top: 48.27px;
}
.rectangle-content > form > .sub-button {
  width: 207.768px;
  height: 78.49px;
  margin-right: 55.2px;
  color: white;
  font-size: 24px;
  font-weight: 400;
  border: none;
  border-radius: 13.301px;
  background: var(
    --gradient,
    linear-gradient(180deg, #ff946d 0%, #ff7d68 100%)
  );
}
.rectangle-content > form > #email {
  width: 485.947px;
  height: 78.49px;
  margin-right: 27.7px;
  flex-shrink: 0;
  border-radius: 13.301px;
  background: var(--white, #fff);
  border: none;
}
.rectangle-content > .email-subscribe > label {
  display: flex;
  align-items: center;
  left: 320px;
  position: absolute;
}
.rectangle-content > .email-subscribe > label > p {
  color: var(--textcolor, #39425d);
  font-family: Montserrat;
  font-size: 18.622px;
  font-weight: 400;
  margin-left: 15.92px;
}
.rectangle-content > .email-subscribe {
  position: relative;
}
.rectangle-content > img {
  position: absolute;
  left: auto;
  right: -33px;
}

/* ? rectangle-container end here  */
/* todo main-container end here  */

/* todo footer-container starts here  */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-bottom: 113.65px;
}
.footer-container > p {
  color: var(--textclr, #5e6282);
  font-size: 18px;
  font-weight: 500;
  line-height: 124.5%;
  text-align: start;
}
.discover-app {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.discover-app > h2 {
  color: var(--textclr, #5e6282);
  font-size: 26.602px;
  font-weight: 500;
  line-height: 124.5%;
  letter-spacing: 0.133px;
  margin-top: 34.58px;
  margin-right: 86.74px;
}
.social-icons {
  margin-right: 81.31px;
}
.social-icons > span {
  position: relative;
}
.social-icons > span > .insta-icon {
  position: absolute;
  top: -40px;
  left: 33px;
}
.store-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 21.54px;
  margin-right: 34.76px;
}
.play-store {
  display: flex;
  align-items: center;
  width: 142.323px;
  height: 46.554px;
  border-radius: 23.277px;
  background: var(--black, #080809);
  position: relative;
}
.play-store > .logo {
  position: absolute;
  top: -38px;
  left: -27px;
}
.play-store > .text {
  position: absolute;
  left: 55px;
}
.table-content {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
}
.table-content > .company {
  margin-right: 76.75px;
  margin-left: 99.74px;
}
.table-content > .contact {
  margin-right: 76.75px;
}
.table-content > .more {
  margin-right: 76.75px;
}
.contents > span > h1 {
  color: var(--black, #080809);
  font-size: 32px;
  font-weight: 700;
  line-height: 124.5%;
}
.contents > span > p {
  color: var(--textclr, #5e6282);
  font-size: 24px;
  font-weight: 500;
  line-height: 124.5%;
}
/* todo footer-container end here  */

/* todo copy rights starts here  */
.copyRights {
  color: var(--textclr, #5e6282);
  font-size: 18.622px;
  font-weight: 500;
  line-height: 124.5%;
  text-align: center;
}
/* todo copy rights end here  */

/* ! media query for responsive width in 480px  */
@media (max-width: 480px) {
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
  }
  .nav-list {
    display: none;
  }
  .text-box {
    margin: -91px 0px 451px 41px;
    top: 250px;
  }
  .text-box > h1 {
    font-size: 33px;
    line-height: 45.381px;
    margin-bottom: 23px;
  }
  .text-box > h2 {
    font-size: 20px;
  }
  .text-box > button {
    font-size: 13.942px;
  }
  .category-container > h1 {
    font-size: 27px;
  }
  .category-container > p {
    font-size: 19px;
  }
  .category-cards-row {
    justify-content: center;
  }
  .topSelling-container > p {
    font-size: 25px;
  }
  .topSelling-container > h1 {
    font-size: 35px;
  }
  .row-cards {
    gap: 30px;
  }
  .left-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -34px;
  }
  .left-content > h1 {
    font-size: 30px;
    width: auto;
    height: auto;
  }
  .easySteps-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 80px;
  }
  .texts {
    width: 320px;
    height: 99px;
  }
  .background-color-blur {
    right: -30.3px;
    top: 237.6px;
  }
  .big-card {
    right: -14.78px;
    left: 20.4px;
  }
  .small-card {
    top: -81px;
    left: 14px;
    width: 294.175px;
  }
  .text-choose > p {
    width: auto;
    font-size: 16px;
  }
  .text-choose > h1 {
    font-size: 35px;
  }
  .rectangle-content {
    margin: 37px;
    width: auto;
    height: 580px;
  }
  .rectangle-content > h2 {
    width: 190px;
    font-size: 21px;
    line-height: 39.827px;
    margin-left: 50.58px;
  }
  .rectangle-content > form > #email {
    width: 203.947px;
    margin-left: 30px;
  }
  .rectangle-content > .email-subscribe > label {
    left: 60px;
    top: 27px;
  }
  .rectangle-content > form > .sub-button {
    width: 198.768px;
    height: 65.49px;
    margin-top: 40px;
    margin-left: 40px;
  }
  .footer-container {
    justify-content: center;
  }
  .social-icons {
    margin-right: 20.31px;
  }
  .table-content {
    text-align: left;
    flex-direction: column;
    gap: 1rem;
  }
  .table-content > .company {
    margin-left: 0px;
  }
  .discover-app {
    align-items: stretch;
  }
  .discover-app > h2 {
    margin-left: 20px;
  }
  .logo a {
    font-size: 38px;
    margin-left: -45px;
  }
  .texts span > h1 {
    font-size: 20px;
  }
  .texts span > p {
    font-size: 15px;
    line-height: 138.5%;
  }

  .big-card {
    width: 288.402px;
  }

  .big-card > img {
    width: 230px;
    height: auto;
  }

  .right-content {
    margin-top: -250px;
  }

  .choose-cards > .choose-card {
    width: 301px;
  }
  .choose-card > span {
    left: 105px;
  }

  .choose-card > h1 {
    width: 220px;
    height: 67px;
  }
  .choose-card > p {
    font-size: 18px;
    line-height: 145%;
    width: 205px;
  }
}

/* ! media query for responsive width in 480px to 900px  */

@media (min-width: 480px) and (max-width: 912px) {
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
  }
  .nav-list {
    display: none;
  }
  .text-box {
    margin: 111px 0px 451px 41px;
    top: 160px;
  }
  .text-box > h1 {
    line-height: 60.381px;
    font-size: 44px;
    margin-bottom: 10px;
  }
  .text-box > h2 {
    font-size: 30px;
  }
  .text-box > button {
    font-size: 20px;
  }
  .category-container > h1 {
    font-size: 47px;
    text-align: center;
  }
  .category-container > p {
    font-size: 30px;
  }
  .category-cards-row {
    justify-content: center;
  }
  .topSelling-container > p {
    font-size: 30px;
  }
  .topSelling-container > h1 {
    font-size: 47px;
  }
  .row-cards {
    gap: 50px;
  }
  .left-content {
    display: flex;
    flex-direction: column;
    margin-top: 6rem;
    gap: 30px;
  }
  .left-content > h1 {
    width: auto;
    height: auto;
    font-size: 55px;
  }
  .background-color-blur {
    top: 164.6px;
    right: -28.3px;
  }
  .big-card {
    top: -242.4px;
    right: 23.22px;
  }
  .small-card {
    top: -466px;
    left: 236px;
  }
  .text-choose > p {
    width: auto;
    margin-bottom: 43px;
  }
  .rectangle-content {
    margin: 3rem;
    margin-bottom: 195.28px;
    width: auto;
    align-items: center;
  }
  .rectangle-content > h2 {
    width: auto;
    line-height: 55.827px;
    margin-left: auto;
    font-size: 30px;
    position: absolute;
    margin-top: 70px;
    padding: 10px;
  }
  .rectangle-content > .email-subscribe {
    position: relative;
    top: 235px;
    gap: 30px;
  }
  .rectangle-content > .email-subscribe > label {
    left: 140px;
    position: absolute;
    top: 25px;
    z-index: 1;
  }
  .rectangle-content > form > #email {
    position: relative;
  }
  .footer-container {
    justify-content: center;
    gap: 3rem;
  }
}

/* ! media query for responsive width in 900px to 1480px  */

@media (min-width: 913px) and (max-width: 1480px) {
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
  }
  .rectangle-content {
    margin: 3rem;
    margin-bottom: 195.28px;
    width: auto;
    align-items: center;
  }
  .rectangle-content > h2 {
    width: auto;
    line-height: 55.827px;
    margin-left: auto;
    font-size: 30px;
    position: absolute;
    margin-top: 70px;
    padding: 3rem;
  }
  .rectangle-content > .email-subscribe {
    position: relative;
    top: 235px;
    gap: 30px;
  }
  .rectangle-content > .email-subscribe > label {
    left: 140px;
    position: absolute;
    top: 25px;
    z-index: 1;
  }
  .rectangle-content > form > #email {
    position: relative;
  }
  .category-cards-row {
    justify-content: center;
  }
  .row-cards {
    gap: 50px;
  }
}

/* ! media query for navigation bar */

@media all and (max-width: 1390px) {
  .nav-list ul li {
    margin: 50px 35px 0px 13px;
  }
}

@media all and (max-width: 1270px) {
  .nav-list ul li {
    margin: 50px 15px 0px 13px;
  }
}
@media all and (max-width: 1271px) {
  .nav-list {
    display: none;
  }
}

/* ! media query for responsive footer  */

@media screen and (max-width: 777px) {
  .table-content {
    text-align: left;
    flex-direction: column;
    gap: 1rem;
  }
  .table-content > .company {
    margin-left: 0px;
  }
}

@media (min-width: 913px) and (max-width: 1060px) {
  .footer-container {
    justify-content: center;
    gap: 2rem;
  }
  .social-icons {
    margin-right: 58.31px;
  }
  .discover-app > h2 {
    margin-left: 20px;
  }
}
form {
  width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  margin-bottom: 15px;
}

textarea {
  height: 100px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #45A049;
}
input[type="date"] {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
select {
  /* Adjust width as needed */
  width: 200px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: inherit; /* Inherit font from parent element */
}

select:focus {
  outline: none;
  border-color: #4CAF50; /* Change border color on focus */
}

/* Style the dropdown menu (when opened) */
select option {
  padding: 5px 10px;
  cursor: pointer;
}

/* Optional: Style for hover effect on options */
select option:hover {
  background-color: #f1f1f1;
}

#form-message {
  text-align: center;
  margin-top: 10px;
}