#about-main-container {
  width: 81%;
  margin: auto;
}

#about-main-container h1 {
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
}

#about-main-container h2 {
  font-size: 48px;
  font-weight: 500;
}

#about-section-top {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 40% 60%;
}

.about-sections {
  width: 60ch;
  line-height: 1.5;
  margin: 20px 0;
  padding: 0;
}

#about-section-image {
  width: 900px;
}

#about-section-middle-body {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  margin: 40px 0;
}

.about-section-middle-bulletpoint-cards {
  width: 350px;
  height: 250px;
  background-color: #f0f0f9;
  border-radius: 5px;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

.about-section-middle-bulletpoint-cards img {
  width: 50px;
  height: 50px;
  margin: 20px auto 0 auto;
}

.about-section-middle-bulletpoint-cards h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 auto;
}

.about-section-middle-bulletpoint-cards h3,
p {
  padding: 0 10px;
}

.about-section-middle-bulletpoint-cards p {
  font-size: 16px;
  text-align: center;
}

#about-section-bottom {
  margin-bottom: 40px;
}

#about-section-bottom h2 {
  padding: 40px 0;
}

#about-section-bottom-body {
  display: grid;
  grid-template-columns: 50% 50%;
}

#about-section-bottom-bulletpoint-card {
  width: 600px;
  height: 250px;
  background-color: #f0f0f9;
  border-radius: 5px;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

#about-section-bottom-bulletpoint-card img {
  width: 50px;
  height: 50px;
  margin: 20px auto 0 auto;
}

#about-section-bottom-bulletpoint-card h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 auto;
}

#about-section-bottom-bulletpoint-card h3,
p {
  padding: 0 10px;
}

#about-section-bottom-bulletpoint-card p {
  font-size: 16px;
  text-align: center;
}

#about-section-bottom-body h3 {
  font-size: 32px;
}

/* Media Queries */

/* Big screens */

/* 4k 175% zoom */

@media (min-width: 1921px) {
  #about-main-container {
    width: 61%;
  }

  .about-section-middle-bulletpoint-cards {
    width: 300px;
    height: 250px;
    gap: 20px;
  }
}

/* 4k 150% zoom */

@media (min-width: 2360px) {
  #about-main-container {
    width: 61%;
    margin: auto;
  }

  #about-main-container h1 {
    font-size: var(--font-h1-big-screen-2);
  }

  #about-main-container h2 {
    font-size: var(--font-h2-big-screen-2);
  }

  .about-sections {
    font-size: var(--font-big-screen-2);
    width: 55ch;
  }

  #about-section-top > * > p {
    padding: 20px 0;
  }

  #about-section-top > * > button {
    width: 300px;
    padding: 10px 0;
  }

  .about-section-middle-bulletpoint-cards {
    width: 330px;
    height: 250px;
    gap: 20px;
  }

  #about-section-bottom-bulletpoint-card {
    width: 700px;
    height: 300px;
    gap: 40px;
  }
}

/* 4k 125% zoom */

@media (min-width: 2800px) {
  #about-main-container {
    width: 61%;
    margin: auto;
  }

  #about-main-container h1 {
    font-size: var(--font-h1-big-screen-3);
  }

  #about-main-container h2 {
    font-size: var(--font-h2-big-screen-3);
  }

  .about-sections {
    font-size: var(--font-big-screen-3);
    width: 55ch;
  }

  #about-section-top > * > p {
    padding: 20px 0;
  }

  #about-section-top > * > button {
    width: 300px;
    padding: 20px 0;
  }

  .about-section-middle-bulletpoint-cards {
    width: 400px;
    height: 300px;
    gap: 30px;
  }

  #about-section-bottom-bulletpoint-card {
    width: 900px;
    height: 300px;
    gap: 40px;
  }
}

/* 4k 100% zoom */

@media (min-width: 3300px) {
  #about-main-container {
    width: 61%;
    margin: auto;
  }

  .about-sections {
    font-size: var(--font-big-screen-4);
    width: 55ch;
  }

  #about-section-top > * > p {
    padding: 20px 0;
  }

  #about-section-top > * > button {
    width: 400px;
    padding: 20px 0;
  }

  #about-main-container h1 {
    font-size: var(--font-h1-big-screen-4);
  }

  #about-main-container h2 {
    font-size: var(--font-h2-big-screen-4);
  }

  #about-section-image {
    width: 1400px;
  }

  #about-section-middle {
    margin-top: 40px;
  }

  .about-section-middle-bulletpoint-cards {
    width: 500px;
    height: 400px;
    gap: 40px;
  }

  .about-section-middle-bulletpoint-cards img {
    width: 80px;
    height: 80px;
    margin: 40px auto 0 auto;
  }

  .about-section-middle-bulletpoint-cards h3 {
    font-size: 32px;
    font-weight: 500;
  }

  .about-section-middle-bulletpoint-cards h3,
  p {
    padding: 0 20px;
  }

  .about-section-middle-bulletpoint-cards p {
    font-size: 24px;
  }

  #about-section-bottom-bulletpoint-card {
    width: 900px;
    height: 400px;
    gap: 40px;
  }

  #about-section-bottom-bulletpoint-card img {
    width: 80px;
    height: 80px;
    margin: 40px auto 0 auto;
  }

  #about-section-bottom-bulletpoint-card h3 {
    font-size: 32px;
    font-weight: 500;
  }

  #about-section-bottom-bulletpoint-card h3,
  p {
    padding: 0 20px;
  }

  #about-section-bottom-bulletpoint-card p {
    font-size: 24px;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  /* Styles for tablet and mobile horizontal view */

  #about-main-container {
    width: 61%;
  }

  #about-main-container h1 {
    font-size: 48px;
    width: 20ch;
  }

  #about-main-container h2 {
    font-size: 32px;
    margin-top: 30px;
  }

  #about-section-image {
    display: none;
  }

  #about-section-top {
    width: 600px;
  }

  .about-sections {
    width: 55ch;
    font-size: 24px;
  }

  #about-section-middle-body {
    grid-template-columns: 50% 50%;
    margin-top: 20px;
  }

  .about-section-middle-bulletpoint-cards {
    width: 280px;
    height: 220px;
    margin: 20px 20px 20px 0;
  }

  #about-section-bottom h2 {
    padding: 0 0 20px 0;
  }

  #about-section-bottom-body {
    grid-template-columns: 100%;
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #about-main-container {
    width: 71%;
  }

  #about-main-container h1 {
    font-size: 42px;
    width: 20ch;
  }

  #about-main-container h2 {
    font-size: 30px;
    margin-top: 30px;
  }

  .about-sections {
    width: 55ch;
    font-size: 24px;
  }

  #about-section-image {
    display: none;
  }

  #about-section-middle h2 {
    margin-top: 50px;
  }

  #about-section-middle-body {
    grid-template-columns: 50% 50%;
    margin-top: 20px;
  }

  .about-section-middle-bulletpoint-cards {
    width: 280px;
    height: 220px;
    margin-bottom: 20px;
  }

  #about-section-bottom h2 {
    padding: 0 0 20px 0;
  }

  #about-section-bottom-body {
    grid-template-columns: 100%;
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #about-main-container {
    width: 75%;
  }

  .about-sections {
    width: 45ch;
    font-size: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #about-main-container {
    width: 75%;
  }

  .about-sections {
    width: 45ch;
    font-size: 24px;
  }
}

/* Mobile Vertical*/

@media (max-width: 767px) {
  #about-main-container h1 {
    font-size: 42px;
    width: 20ch;
  }

  #about-main-container h2 {
    font-size: 30px;
  }

  .about-sections {
    width: 26ch;
  }

  #about-section-image {
    display: none;
  }

  #about-section-top > * > button {
    margin: 20px 0;
    width: 200px;
  }

  #about-section-middle,
  #about-section-bottom {
    margin-top: 40px;
  }

  #about-section-middle-body {
    grid-template-columns: 100%;
  }

  .about-section-middle-bulletpoint-cards {
    width: 300px;
    height: 220px;
    margin-bottom: 20px;
  }

  #about-section-bottom-body {
    grid-template-columns: 100%;
  }

  #about-section-bottom-bulletpoint-card {
    width: 300px;
    height: 320px;
    margin-bottom: 20px;
  }

  #about-section-bottom-bulletpoint-card h3 {
    font-size: 24px;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  /* Styles for smartphone devices in landscape mode */
  #about-main-container {
    width: 75%;
  }

  .about-sections {
    width: 45ch;
  }

  .about-section-middle-bulletpoint-cards {
    width: 500px;
    height: 220px;
  }

  #about-section-bottom-bulletpoint-card {
    width: 500px;
    height: 320px;
  }
}