:root {
  --purple-cslu: #ff0299;
  --red: #ff0001;
  --blue: #3653a7;
  --light-blue: #21f0f9;
  --purple: #7673da;

  --grad-top: #127fbd;
  --grad-bot: #191265;
  --primary-color: #ecebeb;
  --secondary-color: #151515;
  --button-color: #1375b5;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  visibility: hidden;
}

img {
  user-select: none;
}

/* hero section */
.hero {
  height: 100vh;
  position: relative;
  background-image: url("./resources/background/hero-background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-boom {
  width: 60vw;
  position: relative;
  left: 3%;
}

.hero-cslu-logo {
  width: 45vw;
  position: absolute;
}

.join-btn {
  position: absolute;
  bottom: 10%;
}

.join-btn a {
  padding: 0.5rem 5rem;
  background-color: white;
  border: 5px solid var(--purple-cslu);
  border-radius: 50px;
  color: #000;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
  box-shadow: -7px 5px;
  display: inline-block;
  overflow: visible;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.join-btn a:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: -10px 8px 15px rgba(0, 0, 0, 0.5);
}

.join-btn img {
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.join-btn img:nth-child(1) {
  width: 4rem;
  right: -5%;
  top: -50%;
}

.join-btn img:nth-child(2) {
  width: 3rem;
  right: -5%;
  top: -20%;
  transform: rotate(20deg);
}

.join-btn:hover img:nth-child(1) {
  transform: rotate(-20deg) scale(1.2);
  opacity: 1;
}

.join-btn:hover img:nth-child(2) {
  transform: rotate(40deg) scale(1.2);
  opacity: 1;
}

.hero .thunder-layer img {
  position: absolute;
}

.hero .thunder-layer img:nth-child(1) {
  width: 17%;
  left: 7%;
  top: 3%;
  transform: rotate(-100deg);
}

.hero .thunder-layer img:nth-child(2) {
  width: 13%;
  left: 15%;
  top: 3%;
  transform: rotate(-60deg);
}

.hero .thunder-layer img:nth-child(3) {
  width: 15%;
  left: 10%;
  bottom: 10%;
  transform: rotate(210deg);
}

.hero .thunder-layer img:nth-child(4) {
  width: 19%;
  right: 7%;
  bottom: 7%;
  transform: rotate(80deg);
}

.hero .thunder-layer img:nth-child(5) {
  width: 15%;
  right: 10%;
  top: 7%;
  transform: rotate(20deg);
}

/* cslu information */
.cslu-information {
  height: 100vh;
  width: 100%;
  position: relative;
}

.cslu-information .background {
  height: 100%;
  width: 100%;
  position: relative;
}

.cslu-information .background .red {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  background-color: var(--red);
  z-index: 4;
}

.cslu-information .background .red-border {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 100%;
  background-color: white;
  z-index: 5;
}

.cslu-information .background .red-border2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  background-color: white;
  z-index: 3;
}

.cslu-information .background .blue {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 30% 0, 50% 100%, 0 100%);
  background-color: var(--blue);
  z-index: 2;
}

.cslu-information .background .blue-border {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, calc(30% + 20px) 0, calc(50% + 20px) 100%, 0 100%);
  background-color: white;
  z-index: 1;
}

.cslu-information .background .purple {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--purple);
}

.cslu-information .content {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 6;
}

.cslu-information .content .left-side {
  margin: auto 0;
  height: 125%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cslu-information .content .left-side .image-round {
  height: 100%;
  width: 50vw;
  overflow: hidden;
}

.cslu-information .content .left-side .image-round img {
  width: 80vw;
  position: relative;
  right: 60%;
  bottom: 10%;
}

.cslu-information .content .left-side img:nth-child(2) {
  width: 50vw;
  position: absolute;
  right: 56%;
  top: 20%;
}

.cslu-information .content .right-side {
  padding-right: 3rem;
  width: 100%;
}

.cslu-information .content .right-side .text-header-container {
  width: 100%;
  text-align: end;
}

.cslu-information .content .right-side .text-header-container .center {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: start;
}

.cslu-information .content .right-side .text-header-container .center img:nth-child(1) {
  position: relative;
  top: -3rem;
  left: 6rem;
  width: 5rem;
  transform: rotate(-40deg);
}

.cslu-information .content .right-side .text-header-container .center img:nth-child(2) {
  position: relative;
  top: -2rem;
  left: 1rem;
  width: 4rem;
  transform: rotate(-60deg);
}

.cslu-information .content .right-side .text-header-container .center h1 {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  color: white;

  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.cslu-information .content .right-side p {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2vw;
  color: white;
  text-align: end;
}

.cslu-information .content .right-side img:nth-child(3) {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 15vw;
  transform: rotate(10deg);
}

/* rehack information */
.rehack-info {
  height: 100vh;
  width: 100%;
  position: relative;
}

.rehack-info .background {
  height: 100%;
  width: 100%;
  position: relative;
}

.rehack-info .light-blue {
  height: 100%;
  width: 100%;
  background-color: var(--light-blue);
}

.rehack-info .background .red-light-blue-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: white;
  z-index: 5;
}

.rehack-info .background .red-light-blue-divider2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  background-color: white;
  z-index: 2;
}

.rehack-info .background .red-light-blue-divider3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  clip-path: polygon(0 0, 32% 0, 37% 87%, 0 100%);
  background-color: white;
  z-index: 3;
}

.rehack-info .background .red {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  background-color: var(--red);
  z-index: 2;
}

.rehack-info .background .light-blue-red {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  clip-path: polygon(0 0, 30% 0, 35% 87%, 0 100%);
  background-color: var(--light-blue);
  z-index: 4;
}

.rehack-info .background .purple {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 70% 0, 50% 100%, 0 100%);
  background-color: var(--purple);
  z-index: 1;
}

.rehack-info .background .purple-divider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, calc(70% + 20px) 0, calc(50% + 20px) 100%, 0 100%);
  background-color: white;
}

.rehack-info .content {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 6;
}

.rehack-info .content .right-side {
  height: 135%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rehack-info .content .right-side .image-round {
  height: 100%;
  width: 50vw;
  overflow: hidden;
}

.rehack-info .content .right-side .image-round img {
  width: 80vw;
  position: relative;
}

.rehack-info .content .right-side img:nth-child(2) {
  width: 30vw;
  position: absolute;
  right: 0;
}

.rehack-info .content .left-side {
  padding-left: 3rem;
  width: 100%;
}

.rehack-info .content .left-side .text-header-container {
  position: relative;
  display: flex;
}

.rehack-info .content .left-side .text-header-container img:nth-child(2) {
  position: relative;
  top: -3rem;
  left: -1rem;
  width: 5rem;
  transform: rotate(50deg);
}

.rehack-info .content .left-side .text-header-container img:nth-child(3) {
  position: relative;
  top: -2rem;
  left: -5rem;
  width: 4rem;
  transform: rotate(80deg);
}

.rehack-info .content .left-side .text-header-container h1 {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  color: white;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.rehack-info .content .left-side p {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1vw;
  color: white;
}

.rehack-info .content .left-side img:nth-child(3) {
  position: absolute;
  top: 5%;
  left: -10%;
  width: 20vw;
  transform: rotate(10deg);
  z-index: -1;
}

/* cysec info */
.cysec-info {
  height: 100vh;
  width: 100%;
  position: relative;
}

.cysec-info .background {
  height: 100%;
  width: 100%;
  position: relative;
}

.cysec-info .background .red {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  background-color: var(--red);
  z-index: 4;
}

.cysec-info .background .red-border {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 100%;
  background-color: white;
  z-index: 5;
}

.cysec-info .background .red-border2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  background-color: white;
  z-index: 3;
}

.cysec-info .background .blue {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 30% 0, 50% 100%, 0 100%);
  background-color: var(--blue);
  z-index: 2;
}

.cysec-info .background .blue-border {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, calc(30% + 20px) 0, calc(50% + 20px) 100%, 0 100%);
  background-color: white;
  z-index: 1;
}

.cysec-info .background .purple {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--purple);
}

.cysec-info .content {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 6;
}

.cysec-info .content .left-side {
  height: 140%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cysec-info .content .left-side .image-round {
  height: 100%;
  width: 50vw;
  overflow: hidden;
}

.cysec-info .content .left-side .image-round img {
  width: 80vw;
  position: relative;
  right: 60%;
}

.cysec-info .content .left-side img:nth-child(2) {
  width: 30vw;
  position: absolute;
  right: 70%;
  top: 20%;
}

.cysec-info .content .right-side {
  padding-right: 3rem;
  width: 100%;
}

.cysec-info .content .right-side .text-header-container {
  width: 100%;
  text-align: end;
}

.cysec-info .content .right-side .text-header-container .center {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: start;
}

.cysec-info .content .right-side .text-header-container .center img:nth-child(1) {
  position: relative;
  top: -3rem;
  left: 6rem;
  width: 5rem;
  transform: rotate(-40deg);
}

.cysec-info .content .right-side .text-header-container .center img:nth-child(2) {
  position: relative;
  top: -2rem;
  left: 1rem;
  width: 4rem;
  transform: rotate(-60deg);
}

.cysec-info .content .right-side .text-header-container .center h1 {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  color: white;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.cysec-info .content .right-side p {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2vw;
  color: white;
  text-align: end;
}

.cysec-info .content .right-side img:nth-child(3) {
  position: absolute;
  right: 40%;
  bottom: 0;
  width: 15vw;
  transform: rotate(10deg);
}

.cysec-info .content .right-side .image-round {
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.cysec-info .content .right-side .image-round img {
  position: relative;
  right: -10rem;
  width: 20vw;
  transform: rotate(10deg);
}

/* supporting-oragnization */
.supp-organization {
  height: 100vh;
  position: relative;
  background-color: #f0eae5;
}

.supp-organization .background {
  height: 100%;
  width: 100%;
  position: absolute;
  top: -1px;
  left: 0;
  display: flex;
  justify-content: space-around;
}

.supp-organization .background .blue {
  background-color: var(--blue);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  width: 5%;
  height: 50px;
}

.supp-organization .background .purple {
  background-color: var(--purple);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  width: 5%;
  height: 50px;
}

.supp-organization .center {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.supp-organization .center h1 {
  color: white;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
  background-color: var(--red);
  padding: 0.5rem 3rem;
  border-radius: 50px 0;
  z-index: 1;
}

.supp-organization .center img {
  margin-top: -15%;
  width: 50vw;
  z-index: 1;
}

.supp-organization .comic-cloud {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.supp-organization .comic-cloud .cloud-container:nth-child(1) {
  position: absolute;
  bottom: -50%;
  overflow: hidden;
  z-index: 0;
}

.supp-organization .comic-cloud .cloud-container:nth-child(1) img {
  width: 50vw;
  position: relative;
  left: -25rem;
}

.supp-organization .comic-cloud img:nth-child(2) {
  width: 30vw;
  position: absolute;
  bottom: -35%;
  left: 10%;
  z-index: 1;
}

.supp-organization .comic-cloud img:nth-child(3) {
  width: 40vw;
  position: absolute;
  bottom: -50%;
  left: 30%;
  z-index: 0;
}

.supp-organization .comic-cloud .cloud-container:nth-child(4) {
  position: absolute;
  bottom: -45%;
  right: 5%;
  overflow: hidden;
  z-index: 1;
}

.supp-organization .comic-cloud .cloud-container:nth-child(4) img {
  width: 35vw;
  position: relative;
}

.supp-organization .comic-cloud .cloud-container:nth-child(5) {
  position: absolute;
  bottom: -55%;
  right: 0;
  overflow: hidden;
  z-index: 0;
}

.supp-organization .comic-cloud .cloud-container:nth-child(5) img {
  width: 50vw;
  position: relative;
  left: 70%;
}

/* objective */
.objective {
  height: 120vh;
  position: relative;
}

/* .objective .empty {
  width: 100%;
  height: 200px;
  background-color: white;
} */

.objective .center {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 15% 5% 5% 5%;
}

.objective .center > h1 {
  color: white;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.objective .center .cards {
  max-width: 90%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 3%;
}

.objective .center .cards .card {
  max-width: 40%;
  min-height: 40%;
  position: relative;
  border: 3px solid var(--blue);
  border-radius: 50px 0;
  margin: 2rem;
  box-shadow: 10px 8px;
}

.objective .center .cards .card .point {
  max-width: 4.5rem;
  height: 4.5rem;
  height: 4rem;
  width: 4rem;
  position: absolute;
  top: -1.5rem;
  left: -1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--blue);
  border-radius: 50px;
  background-color: white;
}

.objective .center .cards .card .point h1 {
  color: var(--blue);
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5vw;
}

.objective .center .cards .card h3 {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2vw;
  padding: 1% 3rem;
}

.objective .center .cards .card p {
  padding: 1% 1%;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2vw;
}

.banner {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner img {
  max-width: 80vw;
}

/* timeline & venue */
.timeline-venue {
  padding: 2%;
  min-height: 100vh;
}

.timeline-venue > h1 {
  color: white;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.timeline-venue .text-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-venue .text-center > div {
  padding: 1%;
}

.timeline-venue .text-center p {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1vw;
  padding-left: 5px;
}

.timeline-venue .text-center .date {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.timeline-venue .text-center .venue {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.timeline-venue .day-header {
  color: white;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 3vw;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
  margin: 2%;
}

.timeline-venue .timeline-container {
  position: relative;
  height: 300px;
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
}

/* Centered horizontal line */
.timeline-venue .horizontal-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  z-index: 1;
  transform: translateY(-50%);
}

/* Timeline items */
.timeline-venue .timeline-item {
  position: absolute;
  z-index: 2;
}

/* TOP item: above horizontal line */
.timeline-venue .timeline-item.top {
  top: calc(50% - 127px); /* box height + gap from line */
}

/* BOTTOM item: below horizontal line */
.timeline-venue .timeline-item.bottom {
  top: calc(50% + 40px); /* just under the line */
}

.timeline-venue .box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Event box design */
.timeline-venue .content {
  border-radius: 50px;
  padding: 10px 1rem 10px 0.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  text-wrap: nowrap;
}

.timeline-venue .day-1 .content {
  background: var(--light-blue);
}

.timeline-venue .day-2 {
  margin-top: 7rem;
}

.timeline-venue .day-2 .content {
  color: white;
  background: var(--red);
}

.timeline-venue .content .image-round {
  background-color: white;
  border-radius: 50px;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-venue .content img {
  width: 20px;
  height: 20px;
}

/* Time positioning */
.timeline-venue .time {
  font-size: 0.9em;
  color: #333;
  margin: 6px 0;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* Vertical line no gap */
.timeline-venue .vertical-line {
  width: 2px;
  height: 90px;
  background: #000;
  position: absolute;
  left: 30px;
  z-index: -2;
}

/* Vertical from bottom of top box to line */
.timeline-venue .timeline-item.top .vertical-line {
  bottom: -40px;
}

/* Vertical from top of bottom box to line */
.timeline-venue .timeline-item.bottom .vertical-line {
  top: -40px;
}

/* key activities */
.key-activities {
  height: 100vh;
  background-color: #f0eae5;
  position: relative;
}

.key-activities .brush {
  height: 20vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.key-activities .brush img {
  height: 150vh;
  width: 300%;
  position: relative;
  bottom: 95%;
  z-index: 1;
}

.key-activities .header-text h1 {
  color: white;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.key-activities .center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.key-activities .center .cards {
  max-width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 3%;
}

.key-activities .center .cards .card {
  min-width: 30%;
  min-height: 40%;
  position: relative;
  border: 3px solid var(--blue);
  border-radius: 0 50px;
  margin: 2rem 4rem;
  box-shadow: -7px 7px;
  background-color: white;
}

.key-activities .center .cards .card .point {
  width: 4vw;
  height: 4vw;
  position: absolute;
  top: -1.5rem;
  left: -1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--blue);
  border-radius: 50px;
  background-color: white;
  overflow: hidden;
}

.key-activities .center .cards .card .point img {
  width: 70%;
}

.key-activities .center .cards .card h3 {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2vw;
  padding: 5% 3rem;
}

/* join us */
.join-us {
  position: relative;
  height: 130vh;
  background-color: #f0eae5;
}

.join-us .header-text {
  padding-top: 3%;
}

.join-us .header-text h1 {
  color: white;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 5vw;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 -2px 0 black, 0 2px 0 black, -2px 0 0 black,
    2px 0 0 black;
}

.join-us .posters {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4% 0;
}

.join-us .posters img {
  margin: 0 2%;
  width: 25vw;
}

.join-us .posters img:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.join-us .reg-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.join-us a {
  padding: 0.5rem 5rem;
  background-color: white;
  border: 5px solid var(--blue);
  border-radius: 50px;
  color: #000;
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5vw;
  box-shadow: -7px 5px;
  display: inline-block;
  overflow: visible;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.join-us a:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: -10px 8px 15px rgba(0, 0, 0, 0.5);
}

.footer-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.footer-curve svg {
  position: relative;
  display: block;
  width: calc(174% + 1.3px);
  height: 140px;
}

.footer-curve .shape-fill {
  fill: var(--secondary-color);
}

/* footer section */
footer {
  padding: 0.5rem;
  text-align: center;
  background: var(--secondary-color);
  color: white;
}

footer h2 {
  padding-bottom: 1rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size: clamp(2rem, 2vw, 3rem);
}

footer .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .icon-socmed {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .image-round {
  position: relative;
  width: 70px;
  height: 70px;
  overflow: hidden;
  margin: 1rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bot));
}

footer a:not(:first-child) img {
  filter: invert(1);
}

footer .image-round img {
  width: 100%;
  height: 100%;
  padding: 1rem;
  object-fit: contain; /* Make the whole image fit inside */
  object-position: center;
  display: block;
}

footer p {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: 1rem;
}

/* device warning */
#device-warning {
  height: 100vh;
  width: 100%;
  display: none;
  text-align: center;
  color: white;
  background-color: var(--secondary-color);
  padding: 5%;
}

#device-warning .center {
  height: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#device-warning img {
  width: 80vw;

}

#device-warning h1 {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 40vw;
}

#device-warning p:nth-child(2) {
  font-size: 5vw;
  margin: 5% 0;
}

#device-warning p {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 3vw;
}

#device-warning p:nth-child(5) {
  font-size: 5vw;
  margin-top: 10%;
}

@media (max-width: 1300px) {
  .supp-organization .comic-cloud {
    position: absolute;
    bottom: 10%;
  }

  .objective .center .cards .card .point h1 {
    font-size: 3vw;
  }

  .objective .center .cards .card p {
    padding: 3% 1%;
  }

  .key-activities .center .cards .card .point {
    width: 5vw;
    height: 5vw;
  }

  .join-us {
      height: 120vh;
  }

  .join-us .posters img {
    width: 30vw;
  }
}

@media (max-width: 1150px) {
  .cslu-information .content .left-side .image-round img {
    bottom: 0;
  }

  .cslu-information .content .left-side img:nth-child(2) {
    top: 25%;
  }

  .cslu-information .content .right-side .text-header-container .center h1 {
    font-size: 6vw;
  }

  .cslu-information .content .right-side p {
    font-size: 1.8vw;
  }

  .rehack-info .content .left-side .text-header-container h1 {
    font-size: 6vw;
  }

  .rehack-info .content .left-side p {
    font-size: 1.2vw;
  }


  .cysec-info .content .right-side .text-header-container h1 {
    font-size: 6vw;
  }

  .cysec-info .content .right-side p {
    font-size: 1.5vw;
  }

  .cysec-info .content .right-side img:nth-child(3) {
    width: 30vw;
    right: 20%;
  }
  
  .cysec-info .content .left-side .image-round img {
    top: 10%;
  }

  .cysec-info .content .right-side .image-round img {
    width: 25vw;
  }

  .join-us .posters img {
    width: 35vw;
  }
}

@media (max-width: 1000px) {
  .hero-boom {
    width: 70vw;
  }

  .hero-cslu-logo {
    width: 55vw;

  }

  .hero .thunder-layer img:nth-child(1) {
    width: 20%;
    left: 2%;
  }

  .hero .thunder-layer img:nth-child(2) {
    left: 13%;
  }

  .hero .thunder-layer img:nth-child(3) {
    width: 20%;
    left: 5%;
    bottom: 5%;
  }

  .cslu-information .content .left-side .image-round img {
    bottom: 0;
  }

  .cslu-information .content .left-side img:nth-child(2) {
    top: 20%;
  }

  .rehack-info .content .right-side .image-round img {
    top: 15%;
  }
  
  .cysec-info .content .left-side .image-round img {
    top: 10%;
  }

  .supp-organization .comic-cloud .cloud-container:nth-child(1) img {
    width: 60vw;
  }

  .supp-organization .comic-cloud img:nth-child(2) {
    width: 40vw;
  }

  .supp-organization .comic-cloud img:nth-child(3) {
    width: 50vw;
  }

  .objective .center .cards .card .point {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (max-width: 800px) {
  .supp-organization .background .blue {
    width: 10%;
  }

  .supp-organization .background .purple {
    width: 10%;
  }

  .supp-organization .comic-cloud .cloud-container:nth-child(1) img {
    width: 60vw;
    left: -35%;
  }

  .supp-organization .comic-cloud img:nth-child(2) {
    width: 45vw;
  }

  .supp-organization .comic-cloud img:nth-child(3) {
    width: 60vw;
    bottom: -40%;
  }

  .supp-organization .comic-cloud .cloud-container:nth-child(4) img {
    display: none;
  }

  .supp-organization .comic-cloud .cloud-container:nth-child(5) {
    bottom: -40%;
  }

  .supp-organization .center img {
    margin-top: -30%;
    width: 60vw;
  }

  .join-us {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .join-us .center {
    width: 100%;
    width: 100%;
  }
}

@media (max-width: 790px) {
  .objective .center .cards .card {
    min-height: 20%;
  }
}

@media (max-width: 768px) {
  .hero-boom {
    width: 80vw;
  }

  .hero-cslu-logo {
    width: 65vw;

  }

  .hero .thunder-layer img:nth-child(5) {
    width: 20vw;
    right: 5%;
  }

  .cslu-information .content .left-side .image-round {
    width: 55vw;

  }

  .cslu-information .content .left-side .image-round img {
    width: 90vw;
    /* right: 60%;
    bottom: 10%; */
  }

  .cslu-information .content .left-side img:nth-child(2) {
    width: 60vw;
    right: 50%;
    /* top: 20%; */
  }

  .cslu-information .content .right-side {
    padding: 0 3%;
  }

  .cslu-information .content .right-side p {
    font-size: 2vw;
  }

  .cslu-information .content .right-side .text-header-container h1 {
    font-size: 4vw;
  }

  .cslu-information .content .right-side .text-header-container .center img:nth-child(1) {
    display: none;
  }

  .cslu-information .content .right-side .text-header-container .center img:nth-child(2) {
    display: none;
  }

  .cslu-information .content .right-side img:nth-child(3) {
    width: 30vw;
    bottom: 0;
  }

  .rehack-info .content .right-side .image-round {
    width: 55vw;
  }

  .rehack-info .content .right-side img:nth-child(2) {
    width: 35vw;
    top: 25%;
  }

  .rehack-info .content .left-side {
    padding: 0 3%;
  }

  .rehack-info .content .left-side .text-header-container img:nth-child(2) {
    display: none;
  }

  .rehack-info .content .left-side .text-header-container img:nth-child(3) {
    display: none;
  }

  .rehack-info .content .left-side p {
    font-size: 1.7vw;
  }

  .rehack-info .content .left-side img:nth-child(3) {
    width: 30vw;
    top: 0;
  }

  .cysec-info .content .left-side .image-round {
    width: 55vw;
  }

  .cysec-info .content .left-side .image-round img {
    width: 90vw;
  }

  .cysec-info .content .right-side {
    padding: 0 3%;
  }

  .cysec-info .content .right-side .text-header-container .center img:nth-child(1) {
    display: none;
  }

  .cysec-info .content .right-side .text-header-container .center img:nth-child(2) {
    display: none;
  }

  .cysec-info .content .right-side p {
    font-size: 2vw;
  }

  .cysec-info .content .right-side .text-header-container h1 {
    font-size: 4vw;
  }

  .cysec-info .content .right-side .image-round img {
    width: 30vw;
    right: -5rem;
  }

  .supp-organization .center h1 {
    font-size: 6vw;
  }

  .objective .center > h1 {
    font-size: 6vw;
  }

  .objective .center .cards .card {
    max-width: 80%;
  }

  .objective .center .cards .card .point h1 {
    font-size: 4vw;
  }

  .objective .center .cards .card h3 {
    font-size: 3vw;
  }

  .objective .center .cards .card p {
    font-size: 2vw;
  }

  .timeline-venue > h1 {
    font-size: 6vw;
  }

  .timeline-venue .text-center p {
    font-size: 1.3vw;
  }

  .timeline-venue .text-center .date img {
    width: 2vw;
  }

  .timeline-venue .text-center .venue img {
    width: 2vw;
  }

  .timeline-venue .day-header {
    font-size: 5vw;
  }

  .timeline-venue .timeline-container {
    max-width: 90%;
  }

  .timeline-venue .content {
    font-size: 1.5vw;
  }

  .key-activities .header-text h1 {
    font-size: 6vw;
  }

  .key-activities .center .cards .card {
    scale: 1.3;
  }

  .key-activities .center .cards .card .point {
    height: 7vw;
    width: 7vw;
  }

  .join-us .header-text h1 {
    font-size: 6vw;
  }

  .footer-curve svg {
    width: calc(174% + 1.3px);
    height: 100px;
  }

    footer h2 {
    font-size: 25px;
  }

  footer .image-round {
    width: 60px;
    height: 60px;
  }

  footer p {
    font-size: 10px;
  }
}