@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Quicksand:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

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

/* Global Styles */
.title-font {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.font {
  font-family: "Raleway", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Header Styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fffaec;
  padding: 1.25rem 8.75rem;
}

header div {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

header div img {
  width: 3.875rem;
  height: 3.875rem;
}

header h1 {
  color: black;
  font-size: 2rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
  text-align: left;
}

header ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

header ul li a {
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
}

.home {
  color: orange;
}

.about {
  color: skyblue;
}

.facilities {
  color: rgb(5, 212, 223);
}

.admission {
  color: rgb(93, 88, 239);
}

header ul li a:hover {
  color: rgb(17, 17, 17);
}

header button {
  background: orange;
  color: white;
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
  padding: 0.625rem 2.5rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
}

header button:hover {
  background: darkorange;
}

.menubar {
  display: none;
}

/* Section 1: Marquee Styles */
#section-1 marquee {
  color: darkred;
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
  text-align: center;
  padding: 0.625rem;
  background: #e8f9ff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Section 2: Hero */
#section-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 8.75rem;
  gap: 3.125rem;
  margin-bottom: 3.75rem;
}

#section-2 .hero-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#section-2 h1 {
  font-size: 3.5rem;
  line-height: 3.813rem;
  letter-spacing: 0%;
}

#section-2 p {
  font-size: 1.25rem;
  line-height: 1.563rem;
  letter-spacing: 0%;
}

#section-2 .empowering {
  color: #fea301;
}

#section-2 .towards {
  color: #01acfd;
}

#section-2 button {
  padding: 1.25rem 2.5rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

#section-2 button:hover {
  background-color: darkgray;
  color: black;
}

/* Section 3: Standard Curriculum */
#section-3 {
  padding: 1.25rem 8.75rem;
  background-image: url("/assets/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left bottom right;
}

#section-3 h1 {
  font-size: 2.875rem;
  line-height: 3.594rem;
  letter-spacing: 0%;
  text-align: center;
  margin-bottom: 5rem;
}

#section-3 .curriculum-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.768rem;
}

#section-3 .curriculum-card h3 {
  font-size: 1.533rem;
  line-height: 1.916rem;
  letter-spacing: 0%;
}

#section-3 .curriculum-card p {
  color: rgb(128, 128, 128);
  font-size: 0.943rem;
  line-height: 1.769rem;
  letter-spacing: 0%;
}

#section-3 .curriculum-card-1 {
  text-align: center;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
  border: 0.94px solid rgb(222, 245, 255);
  border-radius: 18.86px;

  box-shadow: inset 0px 0px 28.3px 0.94px rgba(0, 0, 0, 0.05);
  background: linear-gradient(
      180deg,
      rgb(222, 245, 255),
      rgba(255, 255, 255, 0) 40%
    ),
    rgb(255, 255, 255);
}

#section-3 .curriculum-card-2 {
  text-align: center;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
  border: 0.94px solid rgb(255, 244, 220);
  border-radius: 18.86px;

  box-shadow: inset 0px 0px 28.3px 0.94px rgba(0, 0, 0, 0.05);
  background: linear-gradient(
      180deg,
      rgb(255, 244, 220),
      rgba(255, 255, 255, 0) 40%
    ),
    rgb(255, 255, 255);
}

#section-3 .curriculum-card-3 {
  text-align: center;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
  border: 0.94px solid rgb(242, 232, 255);
  border-radius: 18.86px;

  box-shadow: inset 0px 0px 28.3px 0.94px rgba(0, 0, 0, 0.05);
  background: linear-gradient(
      180deg,
      rgb(238, 225, 255),
      rgba(255, 255, 255, 0) 40%
    ),
    rgb(255, 255, 255);
}

#section-3 .read-1 {
  color: skyblue !important;
  font-size: 15.09px;
  font-weight: 700;
  line-height: 28.3px;
  letter-spacing: 0%;
  text-align: center;
  cursor: pointer;
}

#section-3 .read-1:hover {
  color: darkturquoise !important;
}

#section-3 .read-2 {
  color: orange !important;
  font-size: 15.09px;
  font-weight: 700;
  line-height: 28.3px;
  letter-spacing: 0%;
  text-align: center;
  cursor: pointer;
}

#section-3 .read-2:hover {
  color: darkorange !important;
}

#section-3 .read-3 {
  color: rgb(135, 0, 255) !important;
  font-size: 15.09px;
  font-weight: 700;
  line-height: 28.3px;
  letter-spacing: 0%;
  text-align: center;
  cursor: pointer;
}

#section-3 .read-3:hover {
  color: darkmagenta !important;
}

#section-3 .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  margin-top: 5rem;
}

#section-3 .arrow-left,
.arrow-right {
  background-color: Orange;
  padding: 1.188rem 1.406rem;
  border-radius: 50%;
  color: white;
  cursor: pointer;
}

/* Section 4: Our Stories */
#section-4 {
  padding: 1.25rem 8.75rem;
  background: url("/assets/bg.png"),
    linear-gradient(0deg, rgba(254, 163, 1, 0.3), rgba(255, 255, 255, 0.3) 100%);
  background-position: top left bottom right;
  background-size: cover;
  background-repeat: no-repeat;
}

#section-4 h1 {
  margin: 3.75rem auto 5rem;
  text-align: center;
  font-size: 2.875rem;
}

#section-4 .story-cards h2 {
  margin: 1.5rem 3.375rem 2.063rem 2.313rem;
  font-size: 0.959rem;
  font-weight: bold;
}

#section-4 .story-cards p {
  color: rgb(102, 102, 102);
  font-size: 0.959rem;
  margin: 3.75rem 6.25rem 3.125rem 2.5rem;
}

#section-4 .story-cards img {
  width: 100%;
}

#section-4 .story-cards {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1.25rem;
}

#section-4 .left-div {
  position: relative;
  width: 33.767rem;
  height: 39.408rem;
  border-radius: 1rem;
  background: rgb(255, 255, 255);
}

#section-4 .left-div button {
  position: absolute;
  width: 10.907rem;
  height: 2.996rem;
  left: 2.397rem;
  top: 19.634rem;
  border-radius: 2.996rem;
  background: rgb(60, 216, 232);
  border: none;
  color: rgb(255, 255, 255);
  font-size: 0.959rem;
  line-height: 1.798rem;
  letter-spacing: 0%;
  text-transform: capitalize;
  cursor: pointer;
}

#section-4 .left-div button:hover {
  background: rgb(0, 128, 255);
}

#section-4 .right-div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

#section-4 .right-div .story-card-2,
.story-card-3,
.story-card-4,
.story-card-5 {
  position: relative;
  width: 18.168rem;
  height: 18.851rem;
  border-radius: 1rem;
  background: rgb(255, 255, 255);
}

#section-4 .right-div button {
  position: absolute;
  width: 10.907rem;
  height: 2.397rem;
  left: 2.397rem;
  top: 9.863rem;
  border-radius: 2.996rem;
  background: rgb(149, 178, 38);
  border: none;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
}

#section-4 .right-div button:hover {
  background: #77B254;
}

#section-4 .right-div .story-card-3 button {
  background: rgb(93, 88, 240);
}

#section-4 .right-div .story-card-3 button:hover {
  background: rgb(0, 0, 128);
}

.story-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5rem 0;
}

.story-btn {
  padding: 1.25rem 2.5rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Footer */
footer {
  padding: 1.25rem 8.75rem;
  background: rgb(1, 172, 253);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.125rem;
}

footer .kids-education .title {
  display: flex;
  gap: 0.625rem;
}

footer .kids-education img {
  width: 4.375rem;
  height: 4.375rem;
}

footer .kids-education h1 {
  color: white;
  font-size: 1.875rem;
  line-height: 2.344rem;
  letter-spacing: 0%;
  margin-bottom: 1.125rem;
}

footer .kids-education p {
  color: white;
  font-size: 1.125rem;
  line-height: 1.563rem;
  letter-spacing: 0%;
  width: 25rem;
  height: 6.25rem;
}

footer .about-school h2 {
  color: white;
  font-size: 1.5rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
}

footer .about-school ul {
  list-style: none;
}

footer .about-school ul li {
  margin: 0.625rem 0;
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
}

footer .about-school ul li a {
  text-decoration: none;
  color: white;
}

footer .about-school ul li a:hover {
  color: rgb(17, 17, 17);
}

footer .keep-in-touch h2 {
  color: white;
  font-size: 1.5rem;
  line-height: 1.875rem;
  letter-spacing: 0%;
}

footer .keep-in-touch {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

footer .copy-right {
  grid-column: 2 / 3;
  color: white;
  font-size: 1.125rem;
  line-height: 1.563rem;
  letter-spacing: 0%;
  text-align: center;
}