* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

#navbar {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f8;
}
#navbar > div:first-child {
  display: flex;
}
#navbar > div:first-child > img {
  width: 180px;
  height: 45px;
  margin-right: 20px;
  cursor: pointer;
}
#navbar > div:first-child > div {
  height: 45px;
  display: flex;
  align-items: center;
  color: #2f2f2f;
}
#navbar a {
  font-family: sans-serif;
  color: #4b4b4b;
  font-weight: 600;
  font-size: 14px;
  padding: 28px 15px;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  font-size: 15px;
}

#navbar a:hover {
  color: #f37e5d;
}

#navbar > div:last-child > button {
  background-color: #f37e5d;
  border-radius: 5px;
  padding: 14px;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

/* whyCoschedule-Card -----------------------*/

#whyCoshedule-card {
  width: 300px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
  padding: 20px;
  line-height: 20px;
  position: absolute;
  top: 45px;
  display: none;
  background-color: #fff;
  border-radius: 5px;
  height: 270px;
}

#navbar > div:first-child > div > div:nth-child(2) {
  position: relative;
  cursor: pointer;
}

#navbar > #main-div > div > div:nth-child(2):hover div {
  display: block;
}

#whyCoshedule-card > div {
  width: 250px;
  padding: 20px;
  cursor: pointer;
}

#whyCoshedule-card > div:hover {
  background-color: #f8f8f8;
}

.grey-color {
  color: rgb(128, 122, 122);
}

/* Product Card -------------------- */

#navbar > #main-div > div > div:first-child {
  position: relative;
}

#product-card {
  border-radius: 5px;
  top: 45px;
  left: -160px;
  width: 730px;
  height: 320px;
  background-color: #fff;
  position: absolute;
  padding: 30px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
  display: flex;
}

#navbar #product-card h5 {
  letter-spacing: 1px;
}
#navbar #product-card > div:first-child {
  width: 55%;
  border-right: 1px solid rgb(219, 214, 214);
  padding: 10px;
  color: #2f2f2f;
}
#navbar #product-card > div:last-child {
  width: 45%;
  padding: 10px 30px;
}

#product-card > div > div {
  display: flex;
  height: 100px;
  align-items: flex-start;
  margin-top: 10px;
  width: 100%;
  line-height: 20px;
  padding: 30px 30px 30px 0px;
}
.new-span {
  font-size: 15px;
  color: #f37e5d;
  background-color: #f1d8d0;
  padding: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}
#product-card > div:nth-child(2) > div {
  height: 70px;
  margin-bottom: 40px;
  align-items: center;
  color: #2f2f2f;
}
#product-card > div:first-child > div > img {
  margin-right: 20px;
}
#product-card > div:nth-child(2) > div > img {
  margin-right: 10px;
}

#navbar > #main-div > div > div:first-child > div {
  display: none;
}
#navbar > #main-div > div > div:first-child:hover > div {
  display: block;
}

#navbar > #main-div > div > div > div > div > div > div:hover {
  background-color: #f8f8f8;
}

/* Resources Card */

#navbar > #main-div > div > div:last-child {
  position: relative;
}

#resources-card {
  width: 870px;
  height: 350px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
  position: absolute;
  display: none;
  top: 70px;
  left: 33px;
  border-radius: 5px;
  padding: 30px;
  background-color: #fff;
  
}

#navbar > #main-div > div > div:nth-child(3):hover #resources-card {
  display: block;
}

/* Resources Card */
#resources-main > #resources-card > div {
  display: flex;
}

#resources-main > #resources-card > div > div:first-child {
  width: 35%;
  padding-right: 30px;
  line-height: 20px;
  border-right: 1px solid rgb(219, 214, 214);
}

#resources-card-first-div > div {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}
#resources-card-first-div > div > img {
  margin-right: 10px;
}

#resources-main > #resources-card > div > div:nth-child(2) {
  width: 40%;
  padding: 0px 20px;
}

#resources-card-second-div > p {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 100;
  padding: 5px;
}

#resources-card-second-div > h5:nth-child(5) {
  margin-top: 30px;
}
#resources-card-second-div > p:hover {
  background-color: #f8f8f8;
}

#resources-card-third-div > p {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 100;
  padding: 5px;
}

#resources-card-third-div > h5:nth-child(5) {
  margin-top: 30px;
}
#resources-card-third-div > p:hover {
  background-color: #f8f8f8;
}