@font-face {
  font-family: "Inter";
  src: url("../files/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

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

body {
  font-family: "Inter", sans-serif;
  line-height: 1.3;
  font-size: 18px;
  scroll-behavior: smooth;
}

span {
  line-height: 1.4;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 15px;
}

header {
  background: #f1f2f6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* navigation bar  */

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px 0;
}

.navbar {
  position: relative;
  width: 80%;
  max-width: 1200px;
  padding: 15px 0 15px 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo a {
  color: #1c64f2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 700;
}

.navbar .logo a img {
  height: 35px;
  background-color: transparent;
}

.links {
  display: flex;
  align-items: center;
}

.links .link a {
  position: relative;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.links .link a:hover {
  color: #1c64f2;
}

.links .link a::after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: -10px;
  height: 3px;
  width: 0%;
  background-color: #1c64f2;
  transition: width 0.5s ease;
}

.links .link a:hover::after {
  width: 50%;
}

.hero {
  width: 80%;
  max-width: 1200px;
  min-height: 75vh;
  padding: 80px 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px 100px;
}

.heroHeaders {
  letter-spacing: 0.6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.heroHeader {
  max-width: 700px;
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: #000;
}

.heroSubHeader {
  font-size: 20px;
  max-width: 800px;
  color: #0f2336;
}

.heroButtons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 15px 0 0;
}

.heroButton a {
  width: fit-content;
  height: 55px;
  padding: 0 25px;
  background: #10141b;
  border-radius: 9999px;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.heroButton a:hover {
  background: #11161f;
  transition: all 0.3s ease-in-out;
}

.heroButton.webButton a {
  background: #1c64f2;
}

.heroButton.webButton a:hover {
  background: #1859da;
  transition: all 0.3s ease-in-out;
}

.heroButton a img {
  height: 25px;
}

.heroImages {
  position: relative;
  height: 100%;
  width: 85%;
}

.heroImages .desktopImage {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
}

.heroImages .desktopImage img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.heroImages .phoneImage {
  position: absolute;
  right: -20%;
  bottom: -80px;
  height: 70vh;
}

.heroImages .phoneImage img {
  width: auto;
  height: 100%;
}

/* challenges section */

.challengeSection {
  width: 100%;
  padding: 120px 0;
  display: flex;
  justify-content: center;
}

.challengeContent {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 50px 100px;
}

.challengeImage {
  max-width: 450px;
  flex: 1 1 350px;
  height: 60vh;
}

.challengeImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.challengeDetails {
  max-width: 500px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.challengeHeader {
  color: #208aec;
  font-size: 14px;
  font-weight: 500;
}

.challengeSubHeader {
  font-size: 30px;
  color: #0f2336;
  font-weight: 700;
}

.challenges {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.challenge {
  display: flex;
  gap: 10px;
  align-items: center;
}

.challengeHighlighted {
  font-size: 30px;
}

.challengeText {
  color: #576d81;
  line-height: 1.6;
}

.challengeText span {
  font-size: 14px;
}

/* //solutionSection */

.solutionSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.solutionContent {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.solutionHeader {
  background: #208aec;
  padding: 5px 10px;
  border-radius: 5px;
}

.solutionHeader span {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.solutionSubHeader {
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  color: #0f2336;
}

.solutionHeaderDes {
  color: #576d81;
  max-width: 560px;
  text-align: center;
  line-height: 1.6;
}

.solutionContainer {
  width: 100%;
  background: #f1f2f6;
  display: flex;
  justify-content: center;
}

.solutionBox {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 100px;
}

.solutionImage {
  flex: 1 1 300px;
}

.solutionImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-top: -90px;
  z-index: 2;
}

.solutions {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.solution {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 8px 32px -2px rgba(15, 35, 54, 0.06);
  display: flex;
  gap: 20px;
  z-index: 99;
}

.solution:nth-child(odd) {
  margin-right: 20px;
  margin-left: -20px;
}

.solution:first-child {
  margin-top: -30px;
}

.solution:last-child {
  margin-bottom: -30px;
}

.solutonHighlighted {
  height: 30px;
  width: 30px;
  background: #f1f2f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.solutionText {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* feature section */

.featureSection {
  position: relative;
  height: 600vh;
  width: 100vw;
  /* padding: 180px 0; */
  background-image: url("../files/images/b.jpg");
  background-size: cover;
  background-position: bottom center;
  /* display: flex;
  justify-content: center;
  align-items: start; */
}

.featureSection > .sticky-wrapper {
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100vh;
}

.featureContainer {
  display: flex;
  width: max-content; /* Ensure horizontal scroll works */
}

.featureContents {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.featureContent {
  min-height: 75vh;
  width: 80%;
  max-width: 1400px;
  padding: 20px;
  background: #fff;
  border-radius: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 50px 100px;
}

.featureContent.active {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.featureDetails {
  max-width: 400px;
  flex: 1 1 300px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.featureHeader {
  font-size: 20px;
  color: #576d81;
}

.featureSubHeader {
  font-size: 36px;
  color: #0f2336;
  font-weight: 700;
}

.featureDes {
  color: #576d81;
}

.featureImage {
  max-width: 260px;
  flex: 1 1 250px;
  height: auto;
}

.featureImage img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.dots {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.dot {
  height: 10px;
  width: 10px;
  background: #e3e6e8;
  border-radius: 50%;
}

.dot:hover {
  background: #208aec;
  cursor: pointer;
}

.dot.active {
  width: 50px;
  border-radius: 5px;
  background: #208aec;
  transition: width 0.4s ease-in-out;
}

.progress {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background: #1c64f2;
  bottom: 5%;
  transform: scaleX(0);
}

.elementSection {
  padding: 120px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.elementContent {
  position: relative;
  width: 80%;
  max-width: 1400px;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  gap: 100px;
}

.elementContentDetails {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.elementContainer {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

.elementContainer:first-child {
  padding-top: 30%;
  justify-content: flex-start;
}

.elementContainer:last-child {
  height: 70vh;
}

.elementContainer * {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.containerImage {
  display: none;
}

.elementDetails {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.elementHeader {
  font-size: 18px;
  color: #1c64f2;
  font-weight: 600;
}

.elementSubHeader {
  font-size: 32px;
  color: #000;
  font-weight: 700;
}

.elementDes {
  font-size: 28px;
  color: #0f2336;
  line-height: 1.6;
}

.elementImage {
  position: sticky;
  top: 10%;
  flex: 1 1 400px;
  padding: 48px;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #a4cafe 0%, #3f83f8 25%, #a4cafe 75%);
  border-radius: 15px;
}

.elementImage img {
  position: relative;
  max-width: 100%;
  height: 60vh;
  border-radius: 15px;
}

.elementImage img.active {
  animation: bounceIn 0.2s ease forwards;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* subject section */

.subjectsSection {
  width: 100%;
  padding: 120px 0;
  display: flex;
  justify-content: center;
  background: #f1f2f6;
}

.subjectsContent {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.subjectsHeader {
  font-size: 32px;
  font-weight: 600;
  color: #0f2336;
  text-align: center;
}

.subjectsContainer {
  width: 100%;
  position: relative;
  display: flex;
}

.subjects {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.subject,
.subjectSoon {
  padding: 20px;
  background: #fff;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.subjectIcon {
  height: 60px;
  width: 60px;
  margin: 5px 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.msce .subjectIcon {
  /* background: #EBF5FF; */
  /* background: linear-gradient(135deg, #C3DDFD 0%, #EBF5FF 50%, #3F83F8 95%); */
  border: 2px dotted #6875f5;
}

.jce .subjectIcon {
  border: 2px dotted #3f83f8;
  background: #e1effe;
  /* background: linear-gradient(135deg, #CDDBFE 0%, #F0F5FF 50%, #6875F5 95%); */
}

.subjectIcon img {
  height: 30px;
  width: 30px;
}

.subjectText {
  font-size: 16px;
  color: #576d81;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.subjectName {
  font-size: 20px;
  color: #0f2336;
  font-weight: 600;
}

.subjectSoon {
  border: 2px dashed #e3e6e8;
  color: #8fa4bd;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}

.hidden {
  display: none;
}

/* <!-- how it works section --> */

.workSection {
  width: 100%;
  padding: 120px 0;
  display: flex;
  justify-content: center;
  /* background: #f1f2f6; */
}

.workContent {
  width: 80%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.workHeaders {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}

.workHeader {
  font-size: 40px;
  font-weight: 700;
  color: #0f2336;
}

.workSubHeader {
  color: #576d81;
  max-width: 600px;
}

.workSteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 65px;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.stepIcon {
  height: 80px;
  width: 80px;
  background: #f3faf7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step:first-child .stepIcon {
  background: #fdfdea;
}

.step:last-child .stepIcon {
  background: #ebf5ff;
}

.stepIcon img {
  height: 50px;
  width: 50px;
  object-fit: cover;
}

.stepDetails {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stepTitle {
  font-size: 20px;
  font-weight: 600;
  color: #0f2336;
}

.stepDes {
  color: #576d81;
  line-height: 1.6;
  max-width: 250px;
}

.stepDes a {
  font-size: 18px;
  color: #1c64f2;
  font-weight: 500;
}

.workSteps .line {
  position: absolute;
  top: 60%;
  right: -15%;
  display: flex;
  justify-self: center;
  align-items: center;
}

.step:nth-child(even) .line {
  right: -20%;
}

.workSteps .line img {
  width: 60px;
}

/* <!-- why section --> */

.whySection {
  width: 100%;
  display: flex;
  justify-content: center;
}

.whyContent {
  width: 100%;
  padding: 0;
  background: #f1f2f6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px 100px;
}

.whyImage {
  flex: 1 1 300px;
  height: 100%;
}

.whyImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whyDetails {
  width: 80%;
  padding: 120px 80px 120px 0;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.whyHeader {
  color: #208aec;
  font-size: 18px;
  font-weight: 500;
}

.whySubHeader {
  font-size: 26px;
  color: #0f2336;
  font-weight: 700;
}

.reasons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.reason {
  display: flex;
  gap: 20px;
  align-items: center;
}

.reasonHighlighted {
  min-height: 50px;
  max-height: 50px;
  min-width: 50px;
  max-width: 50px;
}

.reasonHighlighted img {
  height: 100%;
  width: 100%;
}

.reasonText {
  color: #576d81;
  line-height: 1.6;
}

.reasonText span {
  font-size: 18px;
}

/* <!-- partners section  */

.partnersSection {
  width: 100%;
  padding: 120px 0;
  display: flex;
  justify-content: center;
}

.partnersContent {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* partner headers */

.partnersHeaders {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partnersHeader {
  font-size: 32px;
  font-weight: 600;
  color: #0f2336;
}

.partnersSubHeader {
  color: #576d81;
  max-width: 300px;
  line-height: 1.6;
}

.partnerTargets {
  flex: 1 1 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px 60px;
}

.partnerTarget {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: 0 8px 32px -2px rgba(15, 35, 54, 0.06);
  border-radius: 15px;
}

.partnerTarget img {
  height: 60px;
  width: 60px;
  object-fit: cover;
}

.partnerDetails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.partnerTitle {
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 600;
  color: #0f2336;
}

.partnerDes {
  color: #576d81;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.partnerDes p {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.6;
}

.partnerActions {
  margin-top: 20px;
  display: flex;
  justify-content: left;
  gap: 20px;
}

.partnerActions a {
  padding: 0 20px;
  height: 45px;
  border-radius: 25px;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.partnerActions a img {
  height: 15px;
  width: 15px;
  filter: invert(1);
}

/* footer */

footer {
  width: 100%;
  padding: 120px 0 20px;
  /* background: #f1f2f6; */
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3)
    ),
    url("../files/images/bg.jpg");
  background-size: cover;
  background-position: bottom right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.footerTop {
  width: 80%;
  max-width: 600px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.volunteerHeader {
  font-size: 32px;
  font-weight: 600;
  color: #0f2336;
}

.volunteerDes {
  color: #576d81;
  line-height: 1.6;
}

.volunteerButton a {
  height: 45px;
  width: 150px;
  background: #208aec;
  border-radius: 25px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

/* divider */

.divider {
  margin-top: 60px;
  height: 1px;
  width: 80%;
  max-width: 1200px;
  background: #e3e6e8;
}

.footerBottom {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.footerLeft {
  max-width: 400px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.footerLogo a {
  font-size: 28px;
  font-weight: 700;
  color: #1c64f2;
  display: flex;
  align-items: center;
  gap: 15px;
}

.footerLogo a img {
  height: 45px;
}

.footerDes {
  max-width: 300px;
  color: #576d81;
  line-height: 1.6;
}

.footerRight {
  max-width: 600px;
  flex: 1 1 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.footerLinks,
.footerResources {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footerLinks .footerHeader,
.footerResources .footerHeader {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
  color: #0f2336;
}

.footerLinks .footerLink a,
.footerResources .footerLink a {
  padding-left: 2px;
  color: #576d81;
}

.socialLinks {
  flex: 1 1 180px;
  display: flex;
  gap: 15px;
}

.socialLink a {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.socialLink a:hover {
  background: #e3e6e8;
  transition: all 0.3s ease-in-out;
}

.socialLink a img {
  height: 20px;
  width: 20px;
  opacity: 0.8;
}

.footerBottomLine {
  width: 80%;
  max-width: 1200px;
  padding: 80px 0 0;
}

.footerBottomLine span,
.footerBottomLine {
  color: #576d81;
  font-size: 14px;
}

/* Mobile menus */

.openMenu,
.closeMenu {
  display: none;
  height: 20px;
  width: 20px;
  transition: all 0.3s ease-in-out;
}

.closeMenu {
  height: 30px;
  width: 30px;
}

/* responsive design { */

@media (max-width: 1350px) {
  .step:nth-child(even) .line {
    right: -23%;
  }
}

@media (max-width: 1300px) {
  .navbar .logo a {
    font-size: 24px;
  }

  .links .link a {
    padding: 0 15px;
    font-size: 14px;
  }

  .whyContent {
    gap: 50px;
  }
}

@media (max-width: 1226px) {
  .step:nth-child(odd) .line {
    right: -25%;
  }
  .step:nth-child(even) .line {
    right: -18%;
  }
}

@media (max-width: 1200px) {
  .heroImages {
    width: 100%;
    height: 100%;
  }

  .heroImages .desktopImage {
    width: 100%;
    height: 100%;
  }

  .heroImages .desktopImage img {
    width: 100%;
  }

  .heroImages .phoneImage {
    height: 60vh;
    right: -80px;
  }

  .featureContent {
    gap: 50px;
  }

  .footerLeft {
    max-width: 100%;
  }

  .footerDes {
    max-width: 100%;
  }

  .footerRight {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  .navbar .logo a {
    font-size: 24px;
  }

  .links .link a {
    padding: 0 12px;
    font-size: 14px;
  }

  .heroImages .phoneImage {
    height: 55vh;
  }

  .challengeContent {
    gap: 50px;
  }

  .challengeImage {
    flex: 1 1 300px;
  }

  .workSteps {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .step {
    max-width: 360px;
  }

  .stopDes {
    max-width: 100%;
  }

  .step .line {
    padding: 10px 0 0;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    justify-content: center;
  }

  .step .line img {
    transform: rotate(90deg);
  }

  .step:nth-child(even) .line,
  .step:nth-child(odd) .line {
    right: 0;
  }
}

@media (max-width: 1020px) {
  .navbar .logo a {
    font-size: 28px;
  }

  .openMenu {
    display: block;
    cursor: pointer;
  }

  .mobileHide {
    display: none;
  }

  .links {
    position: absolute;
    background: #f1f2f6;
    top: 60px;
    right: 0;
    left: 0;
    padding: 40px 40px 60px;
    box-shadow: 0 8px 32px -2px rgba(15, 35, 54, 0.06);
    border: 1px solid #e3e6e8;
    border-radius: 25px;
    color: #000;
    flex-direction: column;
    gap: 40px;
    z-index: 9999;
  }

  .links .link a {
    padding: 0;
    font-size: 28px;
    font-weight: 600;
  }

  .hero {
    padding: 60px 0 80px;
  }

  .heroImages .phoneImage {
    height: 50vh;
  }

  .heroHeader {
    font-size: 48px;
  }

  .heroSubHeader {
    max-width: 640px;
    font-size: 18px;
  }

  .whyImage {
    flex: 1 1 500px;
    height: 50vh;
  }

  .whyImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .whyDetails {
    padding: 0 7.5vw 120px;
    flex: 1 1 500px;
  }
}

@media (max-width: 900px) {
  .heroImages .phoneImage {
    height: 45vh;
  }

  .challengeImage {
    max-width: 100%;
    flex: 1 1 400px;
  }

  .challengeDetails {
    max-width: 100%;
  }

  .solutionContent {
    align-items: start;
  }

  .solutionSubHeader {
    font-size: 28px;
  }

  .solutionHeaderDes,
  .solutionSubHeader {
    text-align: left;
  }

  .solutionImage {
    flex: 1 1 400px;
  }

  .solutionImage img {
    margin-top: 0;
  }

  .elementSection {
    min-height: 100%;
    padding: 80px 0;
  }

  .elementContentDetails {
    gap: 80px;
  }

  .elementContainer {
    height: fit-content;
  }

  .elementContainer:first-child,
  .elementContainer:last-child {
    padding: 0;
    height: fit-content;
  }

  .elementContainer * {
    transition: opacity 0.3s ease-out;
    opacity: 1;
  }

  .elementImage {
    display: none;
  }

  .containerImage {
    display: flex;
    max-width: 300px;
  }

  .containerImage img {
    width: 80%;
  }

  .elementDetails {
    /* align-items: center;
    text-align: center; */
  }

  .elementDes {
    font-size: 22px;
  }

  .partnerTargets {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }

  .footerLinks,
  .footerResources,
  .socialLinks {
    flex: 1 1 300px;
  }
}

@media (max-width: 720px) {
  .heroImages .phoneImage {
    height: 40vh;
    right: -60px;
  }

  .containerImage {
    display: flex;
    max-width: 250px;
  }

  .elementDes {
    font-size: 20px;
  }

  .subjectsSection {
    padding: 60px 0;
  }

  .workSection {
    padding: 80px 0;
  }
}

@media (max-width: 640px) {
  .heroHeader {
    font-size: 40px;
  }
  .heroImages .phoneImage {
    height: 35vh;
  }

  .containerImage {
    display: flex;
    max-width: 200px;
  }

  .elementDes {
    font-size: 18px;
  }
}

@media (max-width: 540px) {
  body {
    font-size: 16px;
  }

  .heroHeader {
    font-size: 36px;
  }

  .heroButtons {
    width: 100%;
    flex-wrap: wrap;
  }

  .heroButtons .heroButton a {
    height: 45px;
    width: 250px;
    justify-content: center;
  }

  .heroImages .phoneImage {
    height: 30vh;
    right: -40px;
    bottom: -60px;
  }

  .featureSection {
    padding: 70px 0 50px;
  }

  .featureContent {
    gap: 20px;
  }

  .featureHeader {
    font-size: 18px;
  }

  .elementSubHeader {
    font-size: 28px;
  }

  .workSection {
    padding: 60px 0;
  }

  .whyHeader {
    font-size: 16px;
  }

  .whySubHeader {
    font-size: 22px;
  }

  .reasonText span {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .heroHeader {
    font-size: 28px;
  }

  .featureHeader {
    font-size: 16px;
  }

  .partnerTargets {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .heroImages .phoneImage {
    height: 25vh;
    right: -40px;
    bottom: -60px;
  }
}