@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500;700&display=swap");
:root {
  --zero:#404258;
  --one:#474E68;
  --two:#50577A;
  --three:#6B728E;
  --sig: #7faf41;
  --org: #ffae5f;
  --rdx: #C3C9B5;
  --rd: #688E35;
  --bg: #E2FAF2;
  --shade: rgb(188, 188, 188);
  --box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

body main {
  padding: 2em 4em;
  background-image: linear-gradient(100deg, var(--bg), white);
}
body main .mainConainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  align-items: center;
}
body main .mainConainer .left {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
body main .mainConainer .left h1 {
  font-size: 2em;
  font-weight: 500;
}
body main .mainConainer .left a {
  text-decoration: none;
}
body main .mainConainer .left a button {
  width: 200px;
  border: none;
  outline: none;
  background-color: var(--sig);
  color: white;
  padding: 12px;
  border-radius: 30px;
  cursor: pointer;
}
body main .mainConainer .right {
  width: 60%;
}
body main .mainConainer .right img {
  width: 100%;
}
body main .Cards h2 {
  align-items: center;
  color: var(--rd);
}
body main .Cards h2 span {
  color: var(--sig);
}
body main .Cards .CardContainer {
  padding-top: 2em;
  width: 100%;
  display: flex;
  gap: 2em;
}
body main .Cards .CardContainer .card {
  padding: 1em;
  background-color: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
}
body main .Cards .CardContainer .card .img img {
  width: 100%;
  display: block;
}
body main .Cards .CardContainer .card .details {
  padding-bottom: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
body main .Cards .CardContainer .card .details h3 {
  font-size: 1em;
  font-weight: 600;
  width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--two);
}
body main .Cards .CardContainer .card .details h5 {
  font-size: 12px;
  font-weight: 400;
  width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--three);
}
body main .Cards .CardContainer .card .details .info {
  padding-top: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body main .Cards .CardContainer .card .details .info p {
  font-size: 1.2em;
  font-weight: 500;
  color: var(--rd);
}
body main .Cards .CardContainer .card .details .info p i {
  color: var(--rd);
}
body main .About {
  padding-top: 5em;
}
body main .About h2 {
  align-items: center;
  color: var(--rd);
}
body main .About h2 span {
  color: var(--sig);
}
body main .About .DivContainer {
  display: flex;
  gap: 2em;
  width: 100%;
  padding-top: 2em;
}
body main .About .DivContainer .img {
  width: 50%;
}
body main .About .DivContainer .img img {
  width: 100%;
  display: block;
  border-radius: 15px;
}
body main .About .DivContainer .details {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em 0;
}
body main .About .DivContainer .details .info {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
body main .About .DivContainer .details .info h3 {
  font-weight: 500;
  color: var(--two);
}
body main .About .DivContainer .details .info .social {
  display: flex;
  gap: 1em;
  padding-left: 0.2em;
}
body main .About .DivContainer .details .info .social a {
  text-decoration: none;
  color: var(--three);
}
body main .footer {
  padding-top: 5em;
}
body main .footer .footerContainer {
  width: 100%;
  padding-top: 2em;
  border-top: solid 1px var(--shade);
}
body main .footer .footerContainer .top {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: center;
}
body main .footer .footerContainer .top a {
  text-decoration: none;
  color: var(--rd);
}

@media only screen and (max-width: 480px) {
  body main {
    padding: 2em 1em;
  }
  body main .mainConainer {
    flex-direction: column-reverse;
    height: 100%;
    padding-top: 2em;
  }
  body main .mainConainer .left {
    width: 100%;
  }
  body main .mainConainer .right {
    width: 100%;
  }
  body main .Cards {
    padding-top: 5em;
  }
  body main .Cards .CardContainer {
    display: flex;
    flex-direction: column;
  }
  body main .About .DivContainer {
    flex-direction: column;
    gap: 2em;
  }
  body main .About .DivContainer .img {
    width: 100%;
  }
  body main .About .DivContainer .details {
    width: 100%;
  }
  body main .footer .footerContainer .top {
    gap: 0.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    justify-content: flex-start;
  }
  body main .footer .footerContainer .top p {
    display: none;
  }
}/*# sourceMappingURL=IndexDesignx.css.map */