*{
 margin: 0;
 padding: 0;
}

:root{
  --font1:"Montserrat", sans-serif;
  --font2:"Roboto Condensed", sans-serif;
  --font3:"Epunda Slab", serif;
    --midnightblue:#232946;
  --pink:#eebbc3;
  --white:#fffffe;
  --sky:#d4d8f0;
  --br:#121629;
}


body{
  width: 100vw;
  background: #f3f4f6;
  font-family: var(--font2);

}

html{
  font-size: 62.5%;
}
a{
  text-decoration: none;
  color: black;
}
/* -------------------------Main container2------------------ */
.maincontainer2{
display: flex;
max-width: 100rem;
width: 80%;

flex-direction: column;
justify-content: space-between;

}

/* -------------------------Sub container1------------------ */


.subcontainer1{
  display: flex;
  justify-content: space-between;
  border-bottom: 0.5px solid black;
}
/* -------------------------mini container1------------------ */

.minicontainer1{
  display: flex;
}

.sub1img{
  width: 7rem;
}
.sub1txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sub1txt1{
  font-size: 2.048rem;
  font-family: var(--font1);
  font-weight: 600;

}
.sub1txt2{
 font-size: 1.28rem;
}

.sub1txt3{
  font-size:0.8rem;
}
/* -------------------------mini container2------------------ */

.minicontainer2{
  display: flex;
 justify-content: center;
 align-items: center;
  margin-right: 4rem;
}
.btn{
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: 15px;
  font-size: 2rem;
}
.btn1{
  font-family: var(--font1);
  margin: 1.5rem;
  color: var(--white);
  background-color: var(--midnightblue);
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* -------------------------Sub container2------------------ */

.subcontainer2{
  display: flex;
  flex-direction: column;
}

/* -------------------------Sub 2 txt------------------ */
.sub2txt{
  text-align: center;
}

.sub2txt1{
  letter-spacing: -2px;
  font-size: 3.5rem;
  margin: 2rem;
}

.sub2txt2{
  font-family: var(--font3);
  font-size: 1.6rem;
  margin: 1rem;
}

.btn2{
  font-family: var(--font1);
  margin: 1.5rem;
  color: var(--white);
  background-color: var(--midnightblue);
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}
/* -------------------------SUBCONTAINER3------------------ */

.subcontainer3{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1rem;

}
.card1,.card2{
  max-width: 46rem;
  grid-row: 1/2;
  grid-column: 1/2;
  /* border: 1px black solid; */
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.card2{
  grid-row: 1/2;
  grid-column: 2/3;
}

.prof{
  width: 5rem;
  margin-bottom: 0.8rem;
}
.profname{
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: var(--br);
}
.profwords{
  font-size: 1.1rem;
  text-align: center;
  margin: 0.3rem auto;
  color: var(--br);
}

.profquote{
  font-size: 1rem;
  text-align: center;
  margin: 0.2rem auto;
  color: var(--br);
}

@media(max-width:768px){
  html{
    font-size: 50%;
  }
  .subcontainer2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 1rem;
  }
}