/* style.css */
body {
  margin: 0;
  padding: 0;
  font-family: "Canva Sans", Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.page {
  height: 100vh;
  width: 100vw;
  position: relative;
  scroll-snap-align: start;
}

.extra {
  width: 100%;
  height: 100%;
  position: absolute;
}

.text {
  position: absolute;
}

.Myfooter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  z-index: 100;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #ffcc00;
}

.contact-text {
  font-size: 16px;
}

.MyHeader {
  position: absolute;
  top: 10%;
  left: 45%;
  transform: translateX(-50%);
  width: 95%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 5px 20px;
  z-index: 100;
}

.MyHeader a {
  color: white;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.MyHeader a:hover {
  color: #ffcc00;
}

/* Added for slider Effect start*/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent default scrolling */
}

.page-container {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.page {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.page > div {
  height: 100%;
  width: 100%;
  position: relative;
}

/* Ensure all pages start off-screen */
.page:not([data-page="1"]) {
  transform: translateY(100%);
}

/* Added for slider Effect End*/

/* Page 1 Start */

.navbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  background: white;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  box-sizing: border-box;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.logo img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li {
  display: inline;
}

.nav-links a {
  color: black;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ffcc00;
}

/* Hamburger menu */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 3px 0;
  border-radius: 10px;
}

.page1 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 1/11.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage12 {
  z-index: 1;
}

.extra.extraPage13 {
  z-index: 2;
}

.extra.extraPage14 {
  z-index: 3;
}

/* Page 1 End */

/* Page 2 Start */

.page2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 2/21.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage22 {
  z-index: 1;
}

.extra.extraPage23 {
  z-index: 2;
}

.extra.extraPage24 {
  z-index: 3;
}

/* Page 2 End */

/* Page 3 Start */

.page3 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 3/31.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage32 {
  z-index: 1;
}

.extra.extraPage33 {
  z-index: 2;
}

/* Page 3 End */

/* Page 4 Start */

.page4 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 4/41.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage42 {
  z-index: 1;
}

.extra.extraPage43 {
  z-index: 2;
}

.extra.extraPage44 {
  z-index: 3;
}

.extra.extraPage45 {
  z-index: 4;
}

.extra.extraPage46 {
  z-index: 5;
}

.extra.extraPage47 {
  z-index: 6;
}
/* Page 4 End */

/* Page 5 Start */

.page5 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 5/51.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage52 {
  z-index: 1;
}

.extra.extraPage53 {
  z-index: 2;
}

.extra.extraPage54 {
  z-index: 3;
}

.extra.extraPage55 {
  z-index: 4;
}

.extra.extraPage56 {
  z-index: 5;
}

.extra.extraPage57 {
  z-index: 6;
}

.extra.extraPage58 {
  z-index: 7;
}

.extra.extraPage59 {
  z-index: 8;
}

.extra.extraPage510 {
  z-index: 9;
}

.extra.extraPage511 {
  z-index: 10;
}

.extra.extraPage512 {
  z-index: 11;
}

/* Page 5 End */

/* Page 6 Start */
.page6 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 6/61.webp") no-repeat center center;
  background-size: cover;
  background-color: #112a52;
}

.extra.extraPage62 {
  z-index: 1;
}

.extra.extraPage63 {
  z-index: 2;
}

.extra.extraPage64 {
  z-index: 3;
}

.extra.extraPage65 {
  z-index: 4;
}

/* Page 6 End */

/* Page 7 Start */

.page7 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 7/71.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage72 {
  z-index: 1;
}

.extra.extraPage73 {
  z-index: 2;
}

.extra.extraPage74 {
  z-index: 3;
}

.extra.extraPage75 {
  z-index: 4;
}

.extra.extraPage76 {
  z-index: 5;
}

.extra.extraPage77 {
  z-index: 6;
}

.extra.extraPage78 {
  z-index: 7;
}

.extra.extraPage79 {
  z-index: 8;
}

/* Page 7 End */

/* Page 8 Start */

.page8 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 8/81.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage82 {
  z-index: 1;
}

.extra.extraPage83 {
  z-index: 2;
}

.extra.extraPage84 {
  z-index: 3;
}

.extra.extraPage85 {
  z-index: 4;
}

.extra.extraPage86 {
  z-index: 5;
}

/* Page 8 End */

/* Page 9 Start */

.page9 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./images/page 9/91.webp") no-repeat center center;
  background-size: cover;
}

.extra.extraPage92 {
  z-index: 1;
}

.extra.extraPage93 {
  z-index: 2;
}

.extra.extraPage94 {
  z-index: 3;
}

.extra.extraPage95 {
  z-index: 4;
}

.extra.extraPage96 {
  z-index: 5;
}

/* Page 9 End */

@media (max-width: 475px) {
  .extra.extraPage14,
  .extra.extraPage12,
  .extra.extraPage13 {
    width: 120%;
    height: 60%;
    right: -10%;
    left: -10%;
    top: 20%;
    bottom: 20%;
  }

  .extra.extraPage22,
  .extra.extraPage23 {
    width: 120%;
    height: 50%;
    right: -10%;
    left: -10%;
    top: 25%;
    bottom: 25%;
  }

  .extra.extraPage24 {
    width: 100%;
    height: 50%;
    top: 25%;
    bottom: 25%;
  }

  .extra.extraPage32 {
    width: 100%;
    height: 50%;
    top: 0%;
  }

  .extra.extraPage33 {
    width: 150%;
    height: 100%;
    top: 0%;
    left: 0%;
  }

  .extra.extraPage42,
  .extra.extraPage43,
  .extra.extraPage44 {
    width: 100%;
    height: 60%;
    bottom: 0%;
  }

  .extra.extraPage45,
  .extra.extraPage46 {
    width: 100%;
    height: 60%;
    top: 20%;
  }

  .extra.extraPage47 {
    width: 150%;
    height: 100%;
    top: 10%;
    left: 0%;
  }

  .extra.extraPage52,
  .extra.extraPage53 {
    width: 100%;
    height: 60%;
    top: 0%;
  }
  .extra.extraPage54,
  .extra.extraPage55 {
    width: 150%;
    height: 100%;
    left: -25%;
  }

  .extra.extraPage56,
  .extra.extraPage57,
  .extra.extraPage58,
  .extra.extraPage59,
  .extra.extraPage510,
  .extra.extraPage511 {
    width: 100%;
    height: 60%;
    bottom: 0%;
  }

  .extra.extraPage512 {
    width: 140%;
    height: 100%;
    left: -20%;
  }

  .extra.extraPage62,
  .extra.extraPage63 {
    width: 100%;
    height: 60%;
    top: 0%;
  }

  .extra.extraPage64 {
    width: 100%;
    height: 60%;
    bottom: 0%;
  }

  .extra.extraPage65 {
    width: 100%;
    height: 60%;
    top: 20%;
  }

  .extra.extraPage72,
  .extra.extraPage73,
  .extra.extraPage74,
  .extra.extraPage75 {
    width: 140%;
    height: 100%;
    left: -20%;
  }

  .extra.extraPage76,
  .extra.extraPage77 {
    width: 100%;
    height: 60%;
    bottom: 0%;
  }

  .extra.extraPage78,
  .extra.extraPage79 {
    width: 140%;
    height: 100%;
    left: -20%;
  }

  .extra.extraPage82,
  .extra.extraPage83,
  .extra.extraPage84,
  .extra.extraPage85,
  .extra.extraPage86 {
    width: 100%;
    height: 60%;
    top: 0%;
  }

  .extra.extraPage92,
  .extra.extraPage93,
  .extra.extraPage94,
  .extra.extraPage95,
  .extra.extraPage96 {
    width: 100%;
    height: 70%;
    top: 20%;
  }
}

@media (max-width: 640px) {
}

@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: white;
    text-align: center;
    border-radius: 10px;
    padding: 10px 0;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    padding: 15px 0;
  }

  .hamburger {
    display: flex;
  }
}

@media (max-width: 1024px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 1536px) {
}