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

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

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

div#date {
    background-color: #f3edd8;
    padding: 3px;
}

marquee {
  font-size: 15px;
  font-family: system-ui;
}

@keyframes scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.header {
  max-width: 1160px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;
}
.header_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.header_logo p {
  color: #111;
  font-family: Quicksand;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
}
.header ul {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.header ul > li {
  list-style: none;
}

.header ul li a {
  text-decoration: none;
  font-size: 20px;
}

.header > ul > li:nth-child(1) a {
  color: #fea301;
}
.header > ul > li:nth-child(2) a {
  color: #01acfd;
}

.header > ul > li:nth-child(3) a {
  color: #05d4df;
}
.header > ul > li:nth-child(4) a {
  color: #5d58ef;
}

.header button {
  background-color: #fea301;
  padding: 10px 20px;
  width: 197px;
  border-radius: 12px;
  border: none;
  height: 50px;
  color: #fff;
  font-family: Quicksand;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  cursor: pointer;
}
.svg {
  width: 50px;
  display: none;
}
.svg svg {
  width: 40px;
}

.hero {
    max-width: 1160px;
    width: 100%;
    margin: 75px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero_left h2 {
  font-family: Quicksand;
  font-size: 5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 90px;
}

.empowering {
  color: #fea301;
}
.towards {
  color: #01acfd;
}

.hero_right {
  width: 100%;
  margin-bottom: 106px;
}

.hero_right img {
  width: 100%;
}

.hero_left p {
  font-family: Quicksand;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: black;
  margin: 25px 0px;
}

.hero_left button {
  background-color: #111;
  padding: 10px 20px;
  width: 197px;
  border-radius: 12px;
  border: none;
  height: 50px;
  color: #fff;
  font-family: Quicksand;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  cursor: pointer;
}

.curriculum {
  max-width: 1160px;
  margin: 0 auto;
  background: url("./assets/bg.png");
  background: lightgray 0% 0% / 100px 100px repeat,
    linear-gradient(
      0deg,
      rgba(254, 163, 1, 0.3) 0%,
      rgba(255, 255, 255, 0.3) 100%
    );
  background-repeat: repeat
}

.curriculum .curriculum_title {
  text-align: center;
  font-family: Quicksand;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  margin: 60px 0px;
}

.curriculum_card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.curriculum > .curriculum_card > .curriculum_single_card {
  padding: 52.819px 40.668px 53.762px 40.878px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 0.943px solid #def5ff;
  gap: 32.069px;
  border-radius: 18.864px;
  color: #202020;
  text-align: center;
  font-family: Quicksand;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 30.654px;
}

.card_one a {
  color: #64c8ff;
  text-decoration: none;
}

.card_two a {
  color: #f0aa00;
  text-decoration: none;
}

.card_three a {
  color: #8700ff;
  text-decoration: none;
}
.card_one {
  background: linear-gradient(180deg, #def5ff 0%, rgba(255, 255, 255, 0) 40%),
    #fff;
}
.card_two {
  background: linear-gradient(180deg, #fff4dc 0%, rgba(255, 255, 255, 0) 40%),
    #fff;
}
.card_three {
  background: linear-gradient(180deg, #eee1ff 0%, rgba(255, 255, 255, 0) 40%),
    #fff;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 60px 0px;
}

.slide button {
  padding: 1rem; 
  border-radius: 50%; 
  background: linear-gradient(
    145deg,
    #fea301,
    #e29400
  ); 
  border: none; 
  color: #fff; 
  width: 4rem; 
  height: 4rem; 
  font-family: "Font Awesome 5 Free";
  font-size: 1.5rem;
  font-weight: 900; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
  cursor: pointer; 
  transition: transform 0.2s, box-shadow 0.2s; 
}
.slide button:hover{
   transform: scale(1.1); 
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /
}
.stories {
  margin: 0 auto;
  background-image: url("./assets/bg.png"),
    linear-gradient(
      0deg,
      rgba(254, 163, 1, 0.3) 0%,
      rgba(255, 255, 255, 0.3) 100%
    );
    background-repeat: repeat
}

.stories_title {
    text-align: center;
    font-family: Quicksand;
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    margin: 60px 0px
}

.grid-container {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.left-column {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.right-column {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.featured-card {
  height: 97%;
}

.image-container {
  position: relative;
  width: 100%;
}

.featured-card .image-container {
  height: 400px;
}

.card:not(.featured-card) .image-container {
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.date-badge {
  position: absolute;
  bottom: -25px;
  left: 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  font-family: Raleway;
  font-size: 15.339px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.761px;
  text-transform: capitalize;
  padding: 8px 35px;
}

.stories .stories_card_one {
  background-color: #3cd8e8;
  border-radius: 47.934px;
}
.stories_card_one:hover {
  background-color: #111;
  border: 1px solid gray;
  transition: all 300ms ease-in-out;
}
.stories .stories_card_two {
  border-radius: 47.934px;
  background: #95b226;
}
.stories_card_two:hover {
  background-color: #111;
  border: 1px solid gray;
  transition: all 300ms ease-in-out;
}
.stories .stories_card_three {
  border-radius: 47.934px;
  background: #5d58f0;
}
.stories_card_three:hover {
  background-color: #111;
  border: 1px solid gray;
  transition: all 300ms ease-in-out;
}
.stories .stories_card_four {
  border-radius: 47.934px;
  background: #95b226;
}
.stories_card_four:hover {
  background-color: #111;
  border: 1px solid gray;
  transition: all 300ms ease-in-out;
}
.stories .stories_card_five {
  border-radius: 47.934px;
  background: #95b226;
}
.stories_card_five:hover {
  background-color: #111;
  border: 1px solid gray;
  transition: all 300ms ease-in-out;
}
.card-content {
  padding: 24px;
}

.featured-card .card-content {
  padding: 32px;
}

.card h2 {
  font-size: 18px;
  color: #333;
  margin-top: 15px;
  color: #000;
  font-family: Quicksand;
  font-size: 15.339px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.761px;
}

.featured-card h2 {
  font-size: 24px;
}

.card p {
  color: #666;
  line-height: 1.5;
}

.view_button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.view_button button {
  color: #fff;
  width: 197px;
  padding: 10px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-family: Quicksand;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 50px;
  cursor: pointer;
}

footer {
  background: #01acfd;
  padding: 60px 0;
}

.footer_content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 20px;
}

.footer_content_left {
  max-width: 300px;
}

.footer_logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.footer_logo img {
  width: 50px;
  height: auto;
}

.footer_logo h1 {
  color: #fff;
  font-family: Quicksand;
  font-size: 42.143px;
  font-style: normal;
  font-weight: 700;
  line-height: 39.509px;
}

.footer_logo_p {
  color: #fff;
  font-family: Quicksand;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer_about h1,
.footer_social h1 {
  margin-bottom: 20px;
  color: #fff;
  font-family: Quicksand;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.footer_about ul {
  list-style: none;
  padding: 0;
}

.footer_about ul li {
  margin-bottom: 10px;
}

.footer_about ul li a {
  text-decoration: none;
  color: #fff;
  font-family: Quicksand;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.social_icons {
  display: flex;
  gap: 15px;
  padding: 10px 10.294px 10px 10px;
}

.social_icons img {
  width: 55px;
  padding: 10px 10.294px 10px 10px;
  border-radius: 4px;
  background: #3b5998;
}
.social_icons a:nth-child(1) img {
  border-radius: 4px;
  background: #3b5998;
}
.social_icons a:nth-child(2) img {
  border-radius: 4px;
  background: #ea4c89;
}
.social_icons a:nth-child(3) img {
  border-radius: 4px;
  background: #1da1f2;
}
.social_icons a:nth-child(4) img {
  border-radius: 4px;
  background: #dd4b39;
}
.footer_about ul li a:hover {
  text-decoration: underline;
}

.social_icons a:hover {
  opacity: 0.8;
}

.header button:hover {
  background-color: #111;
  transition: all 300ms ease-in-out;
  border: 1px solid white;
}

.hero_left button:hover {
  background-color: #ff8a00;
  transition: all 300ms ease-in-out;
  border: 1px solid black;
}
.view_button button:hover {
  background-color: #ff8a00;
  transition: all 300ms ease-in-out;
}
.curriculum_single_card.card_one:hover {
    border: 1px solid #c5c5c5;
    overflow: hidden;
}

.curriculum_single_card.card_two:hover {
    border: 1px solid #c5c5c5;
    overflow: hidden;
}

.curriculum_single_card.card_three:hover {
    border: 1px solid #c5c5c5;
    overflow: hidden;
}

.card:hover{
  transform: translate(2%);
  transition: all ease-in-out 200ms;
}