@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #e3e7eb;
}

nav {
  display: flex;
  background-color: #f4f3f3;
  height: 8vh;
  margin: 0;
}

nav div {
  display: flex;
  flex: 50%;
  align-items: center;
}

nav div ol {
  display: flex;
  margin: 0;
  padding: 0;
}

a {
  color: black;
  text-decoration: none;
}

div a.home {
  font-weight: 800;
}

nav div.left-side {
  padding-left: 90px;
}

nav div.right-side {
  padding-right: 90px;
  display: flex;
  justify-content: flex-end;
}

nav ol li {
  display: inline;
  margin-left: 40px;
}

nav div.right-side a {
  font-size: 15px;
  color: white;
  background-color: black;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92vh;
}

.container {
  width: 1200px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.08),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0620203),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0572013),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0535481),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0481321),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0371428);
  border-radius: 9px;
}

.container .content {
  flex: 70%;
}

.container .card {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  flex: 30%;
  text-align: center;
  /* background-color: red; */
}

.container .card h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  font-size: 25px;
}
.container .card p {
  margin: 0px;
  font-size: 14px;
  margin-bottom: 15px;
}

.container .content {
  padding-top: 45px;
  padding-left: 35px;
  padding-right: 75px;
  text-align: justify;
}

.container .card .card-content img {
  width: 100%;
}

.btn-detail {
  border-radius: 18px;
  padding: 6px 30px;
  border: none;
  cursor: pointer;
  background-color: black;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: white;
  margin-top: 25px;
  transition: 0.5s;
  opacity: 100%;
}

.btn-detail:hover {
  opacity: 70%;
}

.line-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.line-2-2 {
  margin-left: 30px;
  margin-top: 20px;
}

.line-2-2 img {
  width: 15px;
}

.line-3 {
  margin-top: 50px;
}

.card-content {
  margin: 0 auto;
  width: 350px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 100px 317px rgba(0, 0, 0, 0.11),
    0px 45.931px 132.435px rgba(0, 0, 0, 0.0562632),
    0px 18.5017px 70.8061px rgba(0, 0, 0, 0.038833),
    0px 0.93918px 39.6933px rgba(0, 0, 0, 0.0346007),
    0px -8.75718px 21.0808px rgba(0, 0, 0, 0.0360483),
    0px -10.0607px 8.7722px rgba(0, 0, 0, 0.0370893);
}

.fa {
  padding: 10px;
  font-size: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: black;
  color: white;
}

.fa-twitter {
  background: black;
  color: white;
}

.fa-instagram {
  background: black;
  color: white;
}

.fa-linkedin {
  background: black;
  color: white;
}