/***********************************************************************************/
/***********************************************************************************/
/*************************         GENERAL         *********************************/
/***********************************************************************************/
/***********************************************************************************/

* {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Gaegu", sans-serif;
  font-size: 2rem;
  overflow-x: hidden;
  color: #153131;
  width: 100vw;
}

:link {
  text-decoration: none;
  color: #153131;
}

li {
  list-style: none;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************       NAVIGATION        *********************************/
/***********************************************************************************/
/***********************************************************************************/

.navbar {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  background-color: rgba(87, 227, 229, 0.95);
  border-bottom: 2px solid rgba(21, 49, 49, 0.25);
  z-index: 1000;
}

.logo-name-div {
  display: flex;
  align-items: center;
  padding-left: 4.68rem;
}

.nav-logo {
  display: inline-block;
  width: 2rem;
}

.nav-link {
  font-size: 1.2rem;
  color: #153131;
}

.active-nav {
  color: #e55a57;
}

.nav-link:last-child {
  padding-right: 4.68rem;
}

.nav-link:hover {
  color: #e55a57;
}

.nav-link:active {
  color: #e55a57;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************         HEADER          *********************************/
/***********************************************************************************/
/***********************************************************************************/

.home-header {
  background-color: #57e2e5;
  display: flex;
  height: 950px;
  justify-content: space-between;
  padding-inline: 4.68rem;
  padding-top: 5rem;
}

.header-txt-div {
  display: block;
  margin-top: 20rem;
}

.home-h1 {
  font-size: 5rem;
  font-weight: 100;
}

.home-header-p {
  margin-top: 5rem;
  font-size: 2rem;
}

.header-img-div {
  align-self: center;
  position: relative;
  height: 40rem;
  width: 40rem;
  overflow: hidden;
  border-radius: 50%;
  border: 6px solid #e55a57;
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 20%;
}

.index-header {
  background-image: url(Assets/images/billetto-editorial-334686.jpg);
}

/*
.home-header-img {
  position: absolute;
  left: 30%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
  */

.circle-1 {
  position: absolute;
  top: 5rem;
  left: 25rem;
  height: 13rem;
  width: 13rem;
  border-radius: 50%;
  background-color: #45cb85;
  z-index: 100;
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.3);
}

.circle-2 {
  position: absolute;
  top: 47rem;
  right: 30rem;
  height: 13rem;
  width: 13rem;
  border-radius: 50%;
  background-color: #e55a57;
  z-index: 100;
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.3);
}

.circle-3 {
  position: absolute;
  top: 8rem;
  right: 25rem;
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  background-color: #45cb85;
  z-index: 100;
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.3);
}

/***********************************************************************************/
/***********************************************************************************/
/*************************         CLOUD           *********************************/
/***********************************************************************************/
/***********************************************************************************/

.dividing-cloud {
  position: absolute;
  top: 890px;
  display: flex;
  align-items: center;
  height: 20rem;
  width: 100vw;
  overflow: hidden;
}

.secound-cloud {
  top: 2310px;
}

.third-cloud {
  top: 3610px;
}

.fourth-cloud {
  top: 5000px;
}

.fifth-cloud {
  top: 6300px;
}

.sixth-cloud {
  top: 7900px;
}

.fourth-cloud-events {
  top: 5100px;
}

.secound-cloud-visit {
  top: 1900px;
}

.cloud1 {
  width: 100vw;
  height: 10rem;
  display: flex;
}

.cloud2 {
  width: 100vw;
  height: 10rem;
  display: flex;
  position: absolute;
  left: 26rem;
}

.cloud3 {
  width: 100vw;
  height: 10rem;
  display: flex;
  position: absolute;
  left: 51rem;
}

.cloud4 {
  width: 100vw;
  height: 10rem;
  display: flex;
  position: absolute;
  left: 76rem;
}

.cloud5 {
  width: 100vw;
  height: 10rem;
  display: flex;
  position: absolute;
  left: 100rem;
}

.ball {
  background-color: white;
  align-self: center;
  position: absolute;
}

.blue-ball {
  background-color: #57e2e5;
  align-self: center;
  position: absolute;
}

.ball1 {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  left: -2rem;
}

.ball2 {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  left: 3rem;
}

.ball3 {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  left: 10rem;
}

.ball4 {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  left: 13rem;
}

.ball5 {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  left: 22rem;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************     SECTION INDEX       *********************************/
/***********************************************************************************/
/***********************************************************************************/

.home-section-1 {
  display: flex;
  padding-inline: 4.68rem;
  padding-top: 10rem;
  padding-bottom: 15rem;
  height: 1000px;
}

.img-div {
  width: 40rem;
  height: 60rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 30% 20%;
  border-radius: 75px 170px 75px 170px;
  border: 5px solid #e55a57;
}

.img-div1 {
  background-image: url(Assets/images/markus-spiske-197281.jpg);
}

.section-p {
  width: 95%;
  padding-inline: 10rem;
  align-self: center;
}

.section-txt {
  padding-inline: 10rem;
  padding-top: 10rem;
}

.home-p {
  align-self: center;
  padding-bottom: 5rem;
}

.section-img-div {
  display: flex;
  justify-content: center;
  align-self: center;
}

.home-section-2 {
  display: flex;
  padding-inline: 4.68rem;
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: #57e2e5;
  height: 1000px;
}

.img-div2 {
  background-image: url(Assets/images/mammoth-1257288_1920.jpg);
}

.section-img-div2 {
  display: flex;
  justify-content: center;
  align-self: center;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************         FOOTER          *********************************/
/***********************************************************************************/
/***********************************************************************************/

.footer {
  margin-top: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
}

.blue-footer {
  background-color: #57e2e5;
}

.footer-img {
  height: 10rem;
  padding-right: 10rem;
}

.footer-menu-link {
  font-size: 1rem;
  color: #153131;
  padding-right: 5rem;
}

.footer-menu-link:hover {
  color: #e55a57;
}

.email-label {
  color: #57e2e5;
}

.email-input {
  font-size: 1rem;
  padding-inline: 0.5rem;
  padding-block: 0.3rem;
  width: 20rem;
  border: 1px solid #e55a57;
  border-radius: 8px;
  font-family: "Gaegu", sans-serif;
}

.submit-btn {
  font-size: 1rem;
  font-family: "Gaegu", sans-serif;
  padding-inline: 0.8rem;
  padding-block: 0.3rem;
  background-color: #e55a57;
  border: 1px solid #e55a57;
  border-radius: 8px;
  margin-left: -2rem;
  cursor: pointer;
}

.submit-btn:active {
  background-color: white;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************    EXHIBITIONS.html     *********************************/
/***********************************************************************************/
/***********************************************************************************/

.exhibitions-header {
  background-image: url(Assets/images/roberto-nickson-396152.jpg);
}

.img-div-exhibitions1 {
  background-image: url(Assets/images/andrew-ruiz-348421.jpg);
}

.img-div-exhibitions2 {
  background-image: url(Assets/images/skeleton-414543_1920.jpg);
}

.img-div-exhibitions3 {
  background-image: url(Assets/images/samuel-zeller-113381.jpg);
}

.img-div-exhibitions4 {
  background-image: url(Assets/images/samuel-zeller-158996.jpg);
}

.img-div-exhibitions5 {
  background-image: url(Assets/images/william-bout-264826.jpg);
}

/***********************************************************************************/
/***********************************************************************************/
/*************************       EVENTS.html       *********************************/
/***********************************************************************************/
/***********************************************************************************/

.img-div-events1 {
  background-image: url(Assets/images/celso-405219.jpg);
}

.img-div-events2 {
  background-image: url(Assets/images/mammoth-1257288_1920.jpg);
}

.img-div-events3 {
  background-image: url(Assets/images/scientific-2040795_1280.jpg);
}

/***********************************************************************************/
/***********************************************************************************/
/*************************       VISIT.html        *********************************/
/***********************************************************************************/
/***********************************************************************************/

.visit-header {
  background-image: url(Assets/images/mavis-cw-164128.jpg);
}

.visit-section {
  height: 500px;
}
.visit-txt {
  text-align: center;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************      INVOLVED.html      *********************************/
/***********************************************************************************/
/***********************************************************************************/

.involved-header {
  background-image: url(Assets/images/scott-webb-102825.jpg);
}

.img-div-involved1 {
  background-image: url(Assets/images/lab-512503_1920.jpg);
}

.img-div-involved2 {
  background-image: url(Assets/images/people-219985_1280.jpg);
}

.img-div-involved3 {
  background-image: url(Assets/images/billetto-editorial-334686.jpg);
  background-position: 90% 20%;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************      EXPLORE.html       *********************************/
/***********************************************************************************/
/***********************************************************************************/

.header-top-div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  padding-bottom: 8rem;
}

.explore-main-header {
  display: flex;
  justify-content: center;
}

.header-btm-div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
}

.teachers-div {
  display: flex;
  transition: all 0.3s ease-in-out;
}

.teachers-div:hover {
  transform: scale(1.2);
}

.kids-div {
  display: flex;
  transition: all 0.3s ease-in-out;
}

.kids-div:hover {
  transform: scale(1.2);
}

.researchers-div {
  display: flex;
  transition: all 0.3s ease-in-out;
}

.researchers-div:hover {
  transform: scale(1.2);
}

.explore-txt {
  color: #153131;
}

.explore-header-img {
  height: 20rem;
  width: 20rem;
  overflow: hidden;
  border: 6px solid #e55a57;
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 20%;
}

.teacher-img {
  background-image: url(Assets/images/luke-ellis-craven-400722.jpg);
}

.kids-img {
  background-image: url(Assets/images/reading-2762010_1280.jpg);
}

.researchers-img {
  background-image: url(Assets/images/people-219985_1280.jpg);
}

/***********************************************************************************/
/***********************************************************************************/
/*************************       KIDS.html         *********************************/
/***********************************************************************************/
/***********************************************************************************/

.explore-p {
  padding-top: 5rem;
}

.explore-cloud {
  top: 1400px;
}

.explore-header {
  display: flex;
  justify-content: normal;
}

.heading-img-div {
  padding-top: 5rem;
  display: flex;
  align-content: space-between;
}

.explore-heading-img {
  height: 20rem;
  width: 20rem;
  overflow: hidden;
  border: 6px solid #e55a57;
  border-radius: 20px 70px 20px 70px;
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(Assets/images/teacher-2816112.jpg);
  margin-left: 50rem;
}

.explore-header {
  flex-direction: column;
  height: 1500px;
}

.back-btn {
  color: #153131;
}

.back-btn:hover {
  color: #e55a57;
}

/***********************************************************************************/
/***********************************************************************************/
/*************************     TEACHERS.html       *********************************/
/***********************************************************************************/
/***********************************************************************************/

.teacher-page-img {
  background-image: url(Assets/images/mavis-cw-164128.jpg);
}

/***********************************************************************************/
/***********************************************************************************/
/*************************    RESEARCHERS.html     *********************************/
/***********************************************************************************/
/***********************************************************************************/

.researchers-page-img {
  background-image: url(Assets/images/roberto-nickson-396152.jpg);
}

.researchers-page {
  height: 1000px;
}

.researchers-cloud {
  top: 900px;
}