:root {
  --bg-gray-blue: #f7fbff;
  --blue: #00aeff;
  --orange: orange;
  --grey-light: rgb(240, 240, 240);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.links,
a {
  color: rgb(58, 58, 58);
  text-decoration: none;
}

a img {
  width: 100px;
}
.company-nav a img {
  border-radius: 0px;
}
img {
  border-radius: 15px;
}
hr {
  margin: 4rem 0;
  border-top: 1px solid var(--grey-light);
}

.blue {
  color: var(--blue);
}
.orange {
  color: var(--orange);
}

.primary-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  outline: none;
  background: var(--blue);
  color: whitesmoke;
}
/* ***********main*************** */
.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.navbar {
  display: flex;
  padding: 1rem;
  justify-content: space-between;
}

.navbar {
  font-weight: bold;
}

.brand {
}
.main-nav {
}
.main-nav a {
  margin: 0 10px;
}
.nav-login {
}
.nav-login a {
  margin: 0 10px;
}

/* ******************cover************* */
.cover {
  background: var(--bg-gray-blue);
  height: 85vmin;
  border-radius: 20px;

  padding: 2rem;
  display: flex;
  justify-content: space-around;
}

.trusted-companies {
  display: flex;
  justify-content: space-evenly;
  margin: 3rem 0.5rem;
}
.company-nav {
  display: flex;
  height: 100px;
  gap: 40px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.catalogue {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}

.card {
  border: none;
  padding: 1rem;
  border-radius: 20px;
  box-shadow: 0px 2px 10px rgb(240, 240, 240);
}
.card img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.comfortable-classroom {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.comfortable-classroom .images {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.comfortable-classroom .images div {
  display: flex;
  justify-content: center;
  padding: 10px;
}
.comfortable-classroom .images div img {
  width: 40%;
  height: auto;
  margin: 10px;
}
/* ******for one image of two image size ** */
.two-one {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.benefit {
  display: flex;
}
.benefit-container {
  margin: auto 1rem;
}
.benefit-img {
  align-self: center;
}
.benefit-img img {
  width: 100%;
  height: 50%;
}
.benefit-info div {
  margin: 1rem;
}

.testimoni {
  position: relative;
  background: var(--bg-gray-blue);
  padding: 2rem 1rem 3rem 1rem;

  border-radius: 10px;
}
.testimoni-header {
  display: flex;
  justify-content: space-between;
}

.testimoni-header span {
  margin: 25px 0;
}

.testimoni .review-cards {
  display: flex;
  gap: 1rem;
}

.testimoni .card {
  background: #fff;
  box-shadow: 0px 2px 5px rgb(206, 206, 206);
}

footer {
  padding: 2rem 1rem;
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
}
footer .brand-footer {
  width: 50%;
}

.footer-connect a {
  margin: 5px;
}

.list-style {
  list-style-type: none;
  padding-inline-start: 0px;
}
.brand-footer {
  display: flex;
  flex-direction: column;
}
.logos {
  width: 100px;
}

.cover-info {
  align-self: center;
}
.cover-pic {
  margin-left: 2rem;
  align-self: flex-end;
}
.cover-pic img {
  width: 70%;
}
.input input {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: none;
  outline: none;
  box-shadow: 0px 2px 10px rgb(223, 223, 223);
}