body {
  margin: 0;
}

/* landingPage css start*/
.landing-main-container {
  position: relative;
}
.foxImage {
  position: absolute;
  top: 20%;
  right: 0%;
}

.mobileImg,
.landing-innner-three {
  justify-content: center;
  display: flex;
}
.landing-sub-container {
  display: flex;
  padding: 2%;
}

.landing-inner-one {
  display: flex;
  justify-content: flex-end;
}
.landing-logo-container {
  gap: 1%;
  display: flex;
  justify-content: center;
}

.landing-description,
.landing-title,
.logoName {
  text-align: center;
  color: white;
}
.logoName {
  font-weight: 600;
}
.landing-description {
  font-weight: 500;
  margin-bottom: 0;
}
.landing-title {
  margin: 1% 0 0% 0;
  font-weight: bold;
}

@media (min-width: 340px) {
  .landing-main-container {
    background: url("miniBackgroung.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .landing-logo-container,
  .landing-inner-one {
    width: 100%;
  }
  .landing-innner-two {
    display: none;
  }
  .foxImage {
    display: none;
  }
  .landing-description {
    font-size: 0.8rem;
  }
  .landing-title {
    font-size: 5rem;
    margin: 1% 0 4% 0;
  }
  .landingMobile {
    display: none;
  }
  .landingMini {
    object-fit: cover;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .landing-description {
    font-size: 1rem;
  }
  .landing-title {
    font-size: 6rem;
  }
  .landingMini {
    object-fit: unset;
    width: unset;
    display: none;
  }
  .landingMobile {
    display: block;
    object-fit: contain;
    width: 100%;
  }
  .logoName {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .landing-main-container {
    background: url("main-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media (min-width: 1240px) {
  .landing-innner-three {
    display: none;
  }
  .landing-innner-two {
    display: block;
  }
  .landing-logo-container {
    width: 75%;
  }
  .landing-inner-one {
    width: 80%;
  }
  .landing-innner-two {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .landing-description {
    font-size: 2rem;
  }
  .landingMobile {
    z-index: 10;
  }
  .landing-title {
    font-size: 8rem;
    margin: 1% 0 0% 0;
  }
  .foxImage {
    display: block;
  }
}
@media (min-width: 1536px) {
  .landingMobile {
    object-fit: unset;
    width: unset;
  }
  .landing-title {
    font-size: 10rem;
  }
  .logoName {
    font-size: 2.5rem;
  }
}
/* landingPage css end*/

/* primary button css start */

.primaryButton {
  color: #2e9ce6;
  font-family: Bricolage Grotesque 72pt;
  font-size: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  width: 250px;
  height: 50px;
  border: 1px solid white;
  font-weight: 600;
  padding: 20x;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (min-width: 340px) {
  .primaryButton {
    width: 180px;
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .primaryButton {
    width: 200px;
    font-size: 18px;
  }
}

@media (min-width: 1536px) {
  .primaryButton {
    width: 250px;
    font-size: 22px;
  }
}
/* primary button css end */
/* aboutme css start */
.abboutme-title,
.abboutme-description {
  text-align: center;
}
.aboutme-main-container {
  position: relative;
  margin: 5% 0 5% 0;
}
.aboutme-main-sub-container {
  display: flex;
  justify-content: center;
}
.aboutme-side-image {
  position: absolute;
  left: 0%;
  z-index: -10;
}
.aboutme-sub-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1280px;
}
.aboutme-mobile {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.aboutme-right-image {
  position: absolute;
  right: 0%;
  z-index: -1;
  bottom: -54%;
}
.abboutme-title {
  background: linear-gradient(91deg, #f9dcd9 30%, #f6978f 60%);
  font-weight: 800;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.abboutme-description,
.abboutme-inner-title {
  color: white;
  font-weight: bold;
}
.abboutme-description {
  font-size: 3.5rem;
}
.abboutme-inner-title {
  margin: 2% 0 2% 0;
}
.abboutme-inner-description {
  font-size: 1.2rem;
  color: white;
}

@media (min-width: 340px) {
  .abboutme-title {
    font-size: 1.5rem;
  }
  .abboutme-description,
  .abboutme-inner-title {
    font-size: 1.2rem;
  }
  .aboutme-sub-container {
    flex-direction: column;
  }
  .aboutme-mobile-img {
    display: none;
  }
  .aboutme-inner-one,
  .aboutme-inner-two {
    width: 100%;
  }
  .abboutme-inner-title,
  .abboutme-inner-description {
    margin: 4% 0 0 4%;
  }
  .abboutme-inner-title > br,
  .abboutme-inner-description > br {
    display: none;
  }
  .abboutme-inner-description {
    font-size: 1rem;
  }
  .aboutme-side-image {
    top: 0;
  }
}
@media (min-width: 768px) {
  .abboutme-inner-title,
  .abboutme-inner-description {
    margin: 4% 4% 0 4%;
  }
  .abboutme-title {
    font-size: 1.8rem;
  }
  .abboutme-description,
  .abboutme-inner-title {
    font-size: 2rem;
  }
  .abboutme-inner-description {
    font-size: 1.2rem;
  }
}
@media (min-width: 1240px) {
  .aboutme-mobile-img {
    display: block;
  }
  .aboutme-mobile-min {
    display: none;
  }
  .aboutme-sub-container {
    flex-direction: row;
  }
  .aboutme-inner-one,
  .aboutme-inner-two {
    width: 50%;
  }
  .abboutme-inner-title {
    margin: 2% 0 2% 4%;
    text-align: left;
  }
  .abboutme-inner-description {
    text-align: left;
  }
  .abboutme-title {
    font-size: 2rem;
  }
  .abboutme-description {
    font-size: 2.5rem;
    width: 60%;
  }
  .abboutme-inner-title {
    font-size: 2rem;
  }
  .aboutme-description-container {
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 1440px) {
  .abboutme-inner-title {
    margin: 2% 4% 2% 4%;
  }
  .abboutme-inner-title > br,
  .abboutme-inner-description > br {
    display: block;
  }
}
@media (min-width: 1536px) {
  .abboutme-title {
    font-size: 2.5rem;
  }
  .abboutme-description {
    font-size: 3.5rem;
  }
  .abboutme-inner-title {
    font-size: 3rem;
  }
  .abboutme-inner-description {
    font-size: 1.2rem;
  }
  .aboutme-side-image {
    top: 20%;
  }
}

/* aboutme css end */
/* ourapp css start */
.ourAppListContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3% 0 6% 0;
}

.our-title,
.our-description,
.our-para {
  text-align: center;
}
.our-title {
  color: #f2794e;
}
.our-description {
  font-size: 3rem;
  color: white;
  font-weight: 600;
  margin: 2% 0 0 0;
}
.our-para {
  color: white;
}

@media (min-width: 340px) {
  .ourAppList {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: 100px;
  }
  .our-title {
    font-size: 1.5rem;
  }
  .our-description {
    font-size: 1.5rem;
  }
  .our-para {
    font-size: 0.9rem;
    margin-bottom: 12%;
  }
}
@media (min-width: 768px) {
  .our-title {
    font-size: 1.5rem;
  }
  .our-description {
    font-size: 1.8rem;
  }
  .our-para {
    font-size: 1rem;
  }
  .our-para {
    margin-bottom: 6%;
  }
}
@media (min-width: 1240px) {
  .our-title {
    font-size: 2rem;
  }
  .our-description {
    font-size: 3rem;
  }
  .our-para {
    font-size: 1.2rem;
  }
  .ourAppList {
    display: flex;
    gap: 10%;
    flex-wrap: wrap;
    width: 70%;
    justify-content: center;
  }
  .appitems {
    margin-bottom: 3%;
  }
  .our-para {
    margin-bottom: 4%;
    width: 60%;
  }
}

@media (min-width: 1241px) {
  .ourAppList {
    width: 50%;
  }
}
/* ourapp css end */
/* what are you waiting container css start */
.download-main-container {
  display: flex;
  width: 100%;
  justify-content: center;
}
.download-sub-container {
  display: flex;
  background-color: #e2e8f0;
  border-radius: 20px;
}

.download-inner-container-two {
  position: relative;
  display: flex;
}
.greenLine,
.Orangeline {
  position: absolute;
  bottom: -21%;
  right: -14%;
}
.leftArm,
.rightArm {
  position: absolute;
  bottom: -13%;
}
.leftArm {
  left: 46%;
  bottom: -32%;
}
.rightArm {
  right: 67%;
  bottom: -32%;
}
/* .fox{
      z-index: 10;
      position: absolute;
      bottom: -21%;
      left: 4%;
  } */
.secondary-button {
  background: #2563eb;
  color: white;
  border: 2px solid #2563eb;
  height: 60px;
  font-size: 1.2rem;
  font-weight: 600;
  width: 250px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.download-inner-title {
  font-size: 4rem;
  font-weight: bold;
  margin: 2% 0 0 0;
}
.download-inner-para {
  font-size: 1.2rem;
}
.quote {
  z-index: 12;
  position: absolute;
}
@media (min-width: 340px) {
  .download-sub-container {
    flex-direction: column;
    width: 90%;
  }
  .quote {
    right: 3%;
    top: -8px;
    width: 80%;
  }

  .download-inner-container-one,
  .download-inner-container-two {
    width: 100%;
  }
  .download-inner-container-two {
    margin-top: 12%;
    display: flex;
    justify-content: center;
  }
  .download-inner-title {
    font-size: 2rem;
    padding: 4% 5% 2% 5%;
  }
  .download-inner-para {
    font-size: 1rem;
    padding: 0% 5% 2% 5%;
    margin: 0 0 2% 0;
  }
  .secondary-button {
    height: 40px;
    width: 150px;
    font-size: 1rem;
    margin-left: 5%;
  }
  .fox {
    object-fit: cover;
    width: 85%;
    z-index: 10;
  }
  .rightArm {
    right: 55%;
    bottom: -15%;
  }
  .leftArm {
    left: 54%;
    bottom: -16%;
  }
  .download-main-container {
    margin-bottom: 15%;
  }
  .greenLine,
  .Orangeline {
    display: none;
  }
  .greenMini {
    right: 0%;
    position: absolute;
    bottom: 0%;
  }
  .orangeMini {
    position: absolute;
    right: 0%;
    bottom: 0%;
  }
}
@media (min-width: 400px) {
  .leftArm,
  .rightArm {
    bottom: -12%;
  }
}
@media (min-width: 768px) {
  .fox {
    width: unset;
  }
  .download-inner-container-two {
    margin-top: 2%;
  }
  .leftArm {
    left: 56%;
  }
  .rightArm {
    right: 56%;
  }
  .quote {
    right: 20%;
    top: -8px;
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .leftArm {
    left: 54%;
  }
  .rightArm {
    right: 54%;
  }
  .quote {
    right: 25%;
    top: -56px;
    width: 50%;
  }
}
@media (min-width: 1240px) {
  .greenLine,
  .Orangeline {
    display: block;
    bottom: -16%;
    right: -4%;
  }
  .download-inner-title {
    padding: 4% 24% 2% 5%;
  }
  .download-inner-para {
    padding: 0% 31% 2% 5%;
  }
  .orangeMini,
  .greenMini {
    display: none;
  }
  .download-sub-container {
    flex-direction: row;
    padding: 1.2% 1.2% 3% 1.2%;
    width: 70%;
  }
  .download-main-container {
    margin-bottom: 6%;
  }
  .secondary-button {
    height: 50px;
    width: 150px;
    font-size: 0.9rem;
  }
  .download-inner-title {
    font-size: 2rem;
  }
  .download-inner-para {
    font-size: 0.8rem;
  }
  .download-inner-container-one {
    width: 60%;
  }
  .download-inner-container-two {
    width: 40%;
    position: relative;
  }
  .fox {
    object-fit: unset;
    position: absolute;
    z-index: 10;
    bottom: -16%;
    width: 85%;
    right: 41%;
  }
  .leftArm {
    left: 21%;
    bottom: -35%;
  }
  .rightArm {
    right: 87%;
    bottom: -35%;
  }
  .quote {
    right: 86%;
    top: -20px;
    width: 76%;
  }
}
@media (min-width: 1440px) {
  .fox {
    bottom: -15%;
    width: 85%;
    right: 27%;
  }
  .download-inner-title {
    padding: 0% 18% 2% 5%;
  }
  .rightArm {
    right: 76%;
    bottom: -27%;
  }
  .leftArm {
    bottom: -29%;
    left: 37%;
  }
  .greenLine,
  .Orangeline {
    bottom: -15%;
    right: -5%;
  }
  .quote {
    right: 70%;
  }
  .download-sub-container {
    padding: 1.2% 1.2% 3% 1.2%;
    height: 320px;
  }
  .download-inner-title {
    font-size: 3rem;
  }
  .secondary-button {
    width: 250px;
    font-size: 1rem;
  }
}

@media (min-width: 1536px) {
  .fox {
    width: 75%;
  }
  .rightArm {
    right: 69%;
    bottom: -27%;
  }
  .leftArm {
    bottom: -29%;
    left: 40%;
  }
  .quote {
    right: 63%;
    top: -5%;
  }
}

@media (min-width: 1537px) {
  .download-sub-container {
    width: 60%;
    height: 380px;
  }
  .download-inner-title {
    padding: 10% 24% 2% 5%;
  }
  .quote {
    right: 66%;
    top: 8%;
  }
  .download-inner-para {
    padding: 1% 23% 3% 5%;
  }
  .fox {
    bottom: -15%;
    width: 80%;
  }
  .greenLine,
  .Orangeline {
    bottom: -15%;
  }
  .rightArm {
    right: 74%;
    bottom: -25%;
  }
  .leftArm {
    bottom: -25%;
  }
  .download-inner-para {
    padding: 0% 12% 3% 5%;
  }
}

/* what are you waiting container css start */

/* footer css start */
.footer-main-container {
  border-top: 2px solid white;
}
.footer-sub-container-one {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
}
.footer-sub-container-two {
  align-items: center;
  justify-content: space-around;
}
.footer-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: white;
}
.footer-about-me,
.footer-apps {
  font-size: 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

@media (min-width: 340px) {
  .footer-about-me,
  .footer-apps {
    text-align: center;
    display: block;
    margin-bottom: 20px;
  }
  .buttonDiv {
    justify-content: center;
    display: flex;
    padding-bottom: 5%;
  }
  .buttonDiv > button {
    width: 80%;
  }
}

@media (min-width: 768px) {
  .buttonDiv > button {
    width: 40%;
    font-size: 24px;
  }
}

@media (min-width: 1240px) {
  .footer-main-container {
    padding: 2%;
    display: flex;
  }
  .footer-sub-container-one {
    width: 40%;
  }
  .footer-sub-container-two {
    width: 60%;
    gap: 4%;
    display: flex;
    align-items: center;
  }
  .buttonDiv > button {
    width: 200px;
  }
  .buttonDiv {
    padding-bottom: unset;
  }
}
@media (min-width: 1536px) {
  .buttonDiv > button {
    width: 250px;
  }
}
/* footer css end */