/*---------------------Roots-----------------*/

:root {
  ---red: #e9413a;
  ---white: #ffffff;
  ---grey: #4a4a4a;
  ---black: #134ba1;
  --lightgrey: #858585;
  ---border: #eeeeee;
  ---yellow: #ffe127;
}

/*---------------------Roots-----------------*/
.our-approach {
  margin-top: 80px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.our-approach .cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 50px;
}

.our-approach .card {
  background: var(---white);
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 423px;
  transition: transform 0.3s ease;
}

.our-approach .card:hover {
  transform: translateY(-10px);
}

.our-approach .icon {
  font-size: 50px;
  margin-bottom: 20px;
}

.our-approach .card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: var(---black);
}

.our-approach .card p {
  font-size: 15px;
  color: var(---black);
  line-height: 30px;
  font-weight: 600;
}

















/* media quries */

@media (max-width:1772px) {
  section {
    padding: 20px 100px;
  }
}

@media (max-width:1685px) {
  section {
    padding: 20px 80px;
  }


}

@media (max-width:1590px) {
  section {
    padding: 20px 60px;
  }

}

@media (max-width:1486px) {}

@media (max-width:1390px) {
  section {
    padding: 20px 40px;
  }

}

@media (max-width:1280px) {

  html {
    font-size: 80%;
  }

  section {
    padding: 20px 20px;
  }

  .our-approach {
    margin-top: 120px;
  }
}

@media (max-width:1080px) {
  section {
    padding: 20px 15px;
  }

  .our-approach {
    margin-top: 100px;
  }

}

@media (max-width:920px) {

  section {
    padding: 20px 10px;
  }

  .our-approach {
    margin-top: 80px;
  }
}

@media (max-width:780px) {
  .our-approach {
    margin-top: 60px;
  }
}

@media (max-width:690px) {
  .our-approach {
    margin-top: 80px;
  }

}

@media (max-width:640px) {}

@media (max-width:550px) {
  .our-approach {
    margin-top: 40px;
  }

  .our-approach .cards {
    gap: 20px;
    margin-top: 30px;
  }

  .our-approach .card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(---black);
  }

  .our-approach .card p {
    font-size: 12px;
    line-height: 25px;
    font-weight: 600;
  }
}

@media (max-width:500px) {}

@media (max-width:430px) {
  .our-approach {
    margin-top: 30px;
  }

  .our-approach .our-approach-slider {
    margin-top: 20px;
  }

  .our-approach .card h3 {
    font-size: 16px;
    margin-bottom: 5px;
    color: var(---black);
  }

  .our-approach .card p {
    font-size: 9px;
    line-height: 20px;
    font-weight: 600;
  }

}

@media (max-width:400px) {}

/* media quries */