:root {
  /* Colors */
  --clr-green_main: #47ad11;
  --clr-green_mid: #30770b;
  --clr-green_dark: #3d950f;
  --clr-orange_main: #f58b0e;
  --clr-orange_secondary: #fcd825;
  --clr-purple_main: #471ae5;
  --clr-white_main: #ffffff;

  /* Gradients */
  --gradient-green_top: linear-gradient(#245709, #47ad11);
  --gradient-green_bottom: linear-gradient(#47ad11, #245709);

  /* Box shadow */
  --bs-green: 0 3px 6px #47ad11;
  --bs-orange: 0 3px 6px #f58b0e;
  --bs-purple: 0 3px 6px #471ae5;

  /* Text colors */
  --txt-clr_main: #393058;
  --txt-clr_light: #ffffff;

  /* Font sizes */
  --fs-H1: 3rem;
  --fs-H2: 2.5rem;
  --fs-H3: 1.9rem;
  --fs-H4: 1.25rem;

  --fs-text_main: 1.3rem;
  --fs-text_medium: 1.25rem;
  --fs-text_small: 1rem;

  /* Font family */
  --ff-headings_main: "Poppins", "Roboto Flex", Verdana, Geneva, Tahoma,
    sans-serif;
  --ff-text_main: "Roboto Flex", "Poppins", Verdana, Geneva, Tahoma, sans-serif;

  /* Font weight */
  --fw-headings: 500;
  --fw-text_main: 400;
  --fw-text_light: 300;

  /* Border-radius */
  --br-main: 20px;
  --br-left: 20px 0 0 20px;
  --br-right: 0 20px 20px 0;
  --br-top: 20px 20px 0 0;
  --br-bottom: 0 0 20px 20px;

  /* Margins */
  --mb-H1: 6rem;
  --mb-H2: 2rem;
  --mb-H3: 2rem;
  --mb-H4: 1rem;
  --mb-sections: 6rem;
  --mt-H1: 4rem;
  --mt-footer: 10rem;
}

/*******************************************************************/
/* GLOBAL/REUSABLE CSS */
/*******************************************************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Centered containers */

.container_1600 {
  max-width: 100rem;
  margin: 0 auto;
}

.container_1200 {
  max-width: 75rem;
  margin: 0 auto;
}

/* Flexbox */

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container_nowrap {
  display: flex;
  flex-wrap: nowrap;
}

/* Headings */

.primary-heading,
.secondary-heading,
.tertiary-heading,
.quaternary-heading {
  font-family: var(--ff-headings_main);
  color: var(--txt-clr_main);
}

.secondary-heading,
.tertiary-heading,
.quaternary-heading {
  font-weight: var(--fw-headings);
}

.primary-heading {
  font-size: var(--fs-H1);
  font-weight: 500;
}

.secondary-heading {
  font-size: var(--fs-H2);
}

.tertiary-heading {
  font-size: var(--fs-H3);
  margin-bottom: var(--mb-H3);
}

.quaternary-heading {
  font-size: var(--fs-H4);
  margin-bottom: var(--mb-H4);
}

/* Text */

.text,
.text_medium,
.text_small {
  font-family: var(--ff-text_main);
}

.text,
.text_medium {
  font-weight: var(--fw-text_main);
  color: var(--txt-clr_main);
}

.text {
  font-size: var(--fs-text_main);
  line-height: 1.4;
}

.text_medium {
  font-size: var(--fs-text_medium);
  line-height: 1.4;
}

.text_small {
  font-size: var(--fs-text_small);
  font-weight: var(--fw-text_light);
}

/* Border-radius + box-shadows (Container styling)*/

.purple-style {
  box-shadow: var(--bs-purple);
  border-radius: var(--br-main);
}

.green-style {
  box-shadow: var(--bs-green);
  border-radius: var(--br-main);
}

.orange-style {
  box-shadow: var(--bs-orange);
  border-radius: var(--br-main);
}

/* HEADER */

.header {
  background-image: var(--gradient-green_top);
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem 1rem 1rem;
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 999;
}

.logo {
  height: 6rem;
}

.nav-list {
  gap: 2rem;
  list-style: none;
}

.nav-list li a {
  text-decoration: none;
  color: var(--txt-clr_light);
  font-family: var(--ff-headings_main);
  font-size: var(--fs-H3);
  font-size: 1.5rem;
  display: block;
  position: relative;
}

.nav-list a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: var(--clr-orange_secondary);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.nav-list a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.nav-list li a:active {
  color: var(--clr-orange_secondary);
}

.nav-list li a.current:link,
.nav-list li a.current:visited,
.nav-list li a.current:hover,
.nav-list li a.current:active {
  color: var(--clr-orange_secondary);
  text-decoration: underline;
}

.toggle-icon {
  font-size: var(--fs-H3);
  color: var(--txt-clr_light);
  display: none;
}

.menu-checkbox {
  display: none;
}

/* BREADCRUMBS */

.breadcrumbs {
  display: flex;
  padding: 1.5rem;
  list-style: none;
}

.breadcrumbs li + li::before {
  padding: 0.5rem;
  color: var(--clr-green_main);
  content: "/\00a0";
}

.breadcrumbs li a {
  text-decoration: none;
  color: var(--clr-green_mid);
}

.breadcrumbs li a:hover {
  text-decoration: underline;
}

.current-crumb {
  color: var(--txt-clr_main);
}

/* FOOTER */

.footer-container {
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  background-image: var(--gradient-green_bottom);
  padding: 3rem 2rem 1rem 2rem;
  border-radius: var(--br-top);
  margin-top: var(--mt-footer);
}

.logo-address-container {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.address-container {
  flex-direction: column;
}

.hours-container {
  justify-content: space-between;
  gap: 0.5rem;
}

.hours-heading,
.social-heading {
  color: var(--txt-clr_light);
  text-align: center;
}

.address-txt,
.hours-txt,
.day,
.hours {
  color: var(--txt-clr_light);
  line-height: 1.5;
}

.icon-container {
  justify-content: space-between;
}
.icon {
  width: 4rem;
}

/* CTA */

a.cta:link,
a.cta:visited {
  color: var(--txt-clr_light);
  background-image: var(--gradient-green_bottom);
  font-family: var(--ff-headings_main);
  font-size: var(--fs-H3);
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  transition-duration: 0.5s;
}

a.cta:hover {
  box-shadow: 0px 4px 80px 15px #78cd4bd8;
  background-color: var(--clr-white_main);
  background-image: none;
  color: var(--txt-clr_main);
  transition: box-shadow 3s ease-out, color 0s;
}

a.cta:active {
  box-shadow: none;
  background-color: #78cd4bd8;
  transition: 0.1s;
  color: var(--clr-purple_main);
}

/*******************************************************************/
/* HOMEPAGE */
/*******************************************************************/

/* Hero section */

.section-hero {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-image: url(/resources/images/Hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
  height: calc(100vh - 8rem);
  margin-bottom: var(--mb-sections);
}

.hero-heading-container {
  text-align: center;
  padding: 1rem;
  backdrop-filter: blur(10px);
  margin-bottom: 5rem;
}

.hero-heading {
  color: var(--txt-clr_light);
}

/* Explore section */

.section-explore {
  margin-bottom: var(--mb-sections);
}

.explore-h2 {
  text-align: center;
  margin-bottom: var(--mb-H2);
}

.explore-cards-container {
  justify-content: center;
  gap: 3rem;
}

.explore-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 23rem;
  height: 30rem;
  background-position: center;
  background-size: cover;
  text-decoration: none;
}

.explore-card:hover {
  transform: scale(1.08);
  transition: 0.2s ease-out;
}

.ec1 {
  background-image: url(../resources/images/kids_in_science_1.jpg);
}

.ec2 {
  background-image: url(../resources/images/teacher_1.jpg);
}

.ec3 {
  background-image: url(../resources/images/researcher_1.jpg);
}

.explore-card-txt {
  text-decoration: none;
  font-family: var(--ff-headings_main);
  font-size: var(--fs-H3);
  color: var(--txt-clr_main);
  background-color: #ffffffca;
  border-radius: var(--br-main);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* Special events and exhibitions */

.specials-H2 {
  text-align: center;
  margin-bottom: var(--mb-H2);
}

.specials-features {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.specials-img {
  max-width: 24rem;
  border-radius: var(--br-left);
}

.specials-img-reverse {
  border-radius: var(--br-right);
}

.specials-txt-container {
  max-width: 44rem;
}

.specials-H3 {
  text-align: center;
}

.specials-txt {
  padding: 0 2.5rem 0 2.5rem;
}

/*******************************************************************/
/* EXHIBITIONS PAGE */
/*******************************************************************/

.exhib-H1 {
  text-align: center;
  margin-top: var(--mt-H1);
  margin-bottom: var(--mb-H1);
}

.exhibition-cont {
  justify-content: center;
  gap: 1rem;
  margin-bottom: 5rem;
}

.exhib-img {
  max-width: 34rem;
}

.exhib-txt-cont {
  display: flex;
  flex-direction: column;
  max-width: 34rem;
  padding: 1rem 2rem;
}

.exhib-H2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

/*******************************************************************/
/* VISIT PAGE */
/*******************************************************************/

.visit-H1 {
  text-align: center;
  margin-top: var(--mt-H1);
  margin-bottom: var(--mb-H1);
}

.visit-card-row_1 {
  margin-bottom: 4rem;
}

.visit-card-row_1,
.visit-card-row_2 {
  column-gap: 4rem;
  row-gap: 4rem;
  justify-content: center;
}

.visit-card {
  width: 24rem;
  border-radius: var(--br-main);
  overflow: hidden;
}

.visit-img {
  width: 100%;
  height: 17rem;
  background-position: center;
  background-size: cover;
}

.vc-img_1 {
  background-image: url(../resources/images/map.jpg);
}

.vc-img_2 {
  background-image: url(../resources/images/admission.jpg);
}

.vc-img_3 {
  background-image: url(../resources/images/hours.jpg);
}

.vc-img_4 {
  background-image: url(../resources/images/accessibility.jpg);
}

.vc-img_5 {
  background-image: url(../resources/images/cafe.jpg);
}

.vc-img_6 {
  background-image: url(../resources/images/shop.jpg);
}

.vc-H2 {
  text-align: center;
  background-color: var(--clr-green_dark);
  color: var(--clr-white_main);
}

.vc-text-container {
  padding: 2rem;
}

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

/*******************************************************************/
/* GET INVOLVED PAGE */
/*******************************************************************/

.involved-H1 {
  text-align: center;
  margin-bottom: var(--mb-H1);
  margin-top: var(--mt-H1);
}

.involved-flex-cont {
  justify-content: center;
  gap: 2rem;
}

.involved-img-container {
  width: 31rem;
  height: 21rem;
  background-position: center;
  background-size: cover;
}

.involved-text-container {
  width: 31rem;
  height: 21rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.involved-H2 {
  text-align: center;
  margin-top: 1rem;
}

.involved-text {
  padding: 0rem 2rem 2rem 2rem;
  font-size: 1rem;
}

.support-container,
.volunteer-container {
  margin-bottom: 3rem;
}

.support-img {
  background-image: url(../resources/images/support.jpg);
}

.volunteer-img {
  background-image: url(../resources/images/volunteer.jpg);
}

.internship-img {
  background-image: url(../resources/images/internship.jpg);
}

/*******************************************************************/
/* ABOUT PAGE */
/*******************************************************************/

.about-H1 {
  margin-top: var(--mt-H1);
  margin-bottom: var(--mb-H1);
  text-align: center;
}

.about-card {
  justify-content: center;
  gap: 2rem;
}

.ac_1,
.ac_2 {
  margin-bottom: 4rem;
}

.ac_2 {
  flex-wrap: wrap-reverse;
}

.about-img {
  width: 31rem;
  height: 21rem;
  border-radius: var(--br-main);
  background-position: center;
  background-size: cover;
}

.about-img_1 {
  background-image: url(../resources/images/about_1.jpg);
}

.about-img_2 {
  background-image: url(../resources/images/about_2.jpg);
}

.about-img_3 {
  background-image: url(../resources/images/about_3.jpg);
}

.about-text {
  /* width: 31rem; */
  /* height: 21rem; */
  display: flex;
  align-items: center;
  padding: 2rem 2rem;
  max-width: 31rem;
}

/*******************************************************************/
/* CONTACT PAGE */
/*******************************************************************/

.contact-body {
  background-image: url(../resources/images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  backdrop-filter: blur(4px);
}

.contact-H1 {
  margin-top: var(--mt-H1);
  margin-bottom: var(--mb-H3);
  text-align: center;
}

.form-flex-container {
  flex-direction: column;
  flex-wrap: nowrap;
}

fieldset {
  background-image: var(--gradient-green_top);
  color: var(--clr-white_main);
  font-size: var(--fs-H4);
  font-family: var(--ff-headings_main);
  border: solid 2px var(--txt-clr_main);
  border-radius: var(--br-main);
  max-width: 37.5rem;
  min-width: 24rem;
  padding: 1rem 3rem;
  margin: 0 auto;
}

.contact-label {
  display: block;
  margin-top: 2rem;
  margin-bottom: 0.3rem;
  text-align: center;
}

.input,
textarea {
  padding: 1rem;
  border-radius: var(--br-main);
  font-family: var(--ff-text_main);
  font-size: var(--fs-H4);
  width: 100%;

  min-width: 20rem;
}

textarea {
  max-width: 100%;
  margin-bottom: 2rem;
}

input::placeholder,
option::placeholder,
textarea::placeholder {
  color: var(--txt-clr_main);
  font-family: var(--ff-text_main);
  font-size: var(--fs-H4);
}

.submit-btn {
  color: var(--txt-clr_main);
  width: 100%;
  background-color: var(--clr-white_main);
  font-family: var(--ff-headings_main);
  font-size: var(--fs-H3);
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  transition-duration: 0.5s;
  border: none;
  margin-bottom: 2rem;
}

.submit-btn:hover {
  box-shadow: 0px 4px 80px 15px #ffffffd8;
  background-color: var(--clr-green_main);
  background-image: none;
  color: var(--txt-clr_light);
  transition: 0.6s;
}

.submit-btn:active {
  box-shadow: none;
  background-color: #eef1ecd8;
  transition: 0.5s;
  color: white;
  color: var(--clr-green_mid);
  outline: 2px solid var(--clr-white_main);
  border-radius: 20rem;
}

/*******************************************************************/
/*FOR KIDS PAGE + Shared styling for  FOR TEACHERS PAGE and RESEARCHERS PAGE*/
/*******************************************************************/

.explore-H1 {
  margin-top: var(--mt-H1);
  margin-bottom: var(--mb-H1);
  text-align: center;
}

.explore-feature-container {
  flex-direction: column;
  justify-content: space-between;
  margin: 0 1rem;
  gap: 2rem;
}

.explore-txt-cont {
  flex-direction: column;
  gap: 2rem;
}
.explore-feature-text {
  min-width: 23rem;
}

.explore-feature-images {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.explore-feature-image {
  width: 23rem;
  height: 25rem;
  background-position: center;
  background-size: cover;
  margin-top: 2rem;
}

.feat-img_kids1 {
  background-image: url(../resources/images/kids_in_science_2.jpg);
}

.feat-img_kids2 {
  background-image: url(../resources/images/kids_in_science_3.jpg);
}

.feat-img_kids3 {
  background-image: url(../resources/images/kids_in_science_4.jpg);
}

.explore-contact-btn {
  text-align: center;
  margin-top: 2rem;
}

/*******************************************************************/
/*FOR TEACHERS PAGE*/
/*******************************************************************/

.feat-img_teacher1 {
  background-image: url(../resources/images/teacher_2.jpg);
}

.feat-img_teacher2 {
  background-image: url(../resources/images/teacher_3.jpg);
}

.feat-img_teacher3 {
  background-image: url(../resources/images/teacher_4.jpg);
}

/*******************************************************************/
/*FOR RESEARCHERS PAGE*/
/*******************************************************************/

.feat-img_researcher1 {
  background-image: url(../resources/images/researcher_2.jpg);
}

.feat-img_researcher2 {
  background-image: url(../resources/images/researcher_3.jpg);
}

.feat-img_researcher3 {
  background-image: url(../resources/images/researcher_4.jpg);
}