@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --white: #ffffff;
  --blue: #1e3a8a;
  --green: #16a34a;
  --red: #dc2626;
  --colorF9: #f9b700;
  --color2D2D: #2d2d2d;
  --color3285: #32857a;
  --colorB800: #ffb800;
  --colorFFC8: #ffc85d;
  --color7077: #0b7077;
}
section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

/* Individual background colors for clarity */
#Learnwithus {
  background-color: transparent; /* dark blue */
  padding-top: 0px;
}
@media screen and (max-width: 768px) {
  #Learnwithus {
    padding-top: 0px;
    margin-top: 0px;
  }
}

#OurPlatform {
  background-color: var(--white); /* red */
}
.get-started-btn {
  background-color: var(--colorF9);
  color: #2d2d2d;
  border-radius: 5px;
  border: none;
  font-weight: 500;
  text-decoration: none;
}

.get-started-btn:hover,
.get-started-btn:focus,
.get-started-btn:active {
  background-color: var(--colorF9);
  color: #2d2d2d;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}
/* Default: hide all UI variations */
.desktop-ui,
.tablet-ui,
.small-laptop-ui,
.mobile-landscape-ui,
.mobile-portrait-ui {
  display: none;
}

/* Show mobile portrait view only */
@media (max-width: 854px) {
  .mobile-portrait-ui {
    display: block;
  }
  .mobile_ui {
    display: block;
  }
}

/* Show mobile landscape view only */
@media (min-width: 577px) and (max-width: 768px) {
  .mobile-landscape-ui {
    display: block;
  }
}

/* Show tablet view only */
@media (min-width: 769px) and (max-width: 992px) {
  .tablet-ui {
    display: block;
  }
}

/* Show desktop view only */
@media (min-width: 993px) {
  .desktop-ui {
    display: block;
  }
}
.mobile-portrait-ui img {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: block;
}