/* ================== FONTS ================== */
@font-face {
  font-family: "AvenirLight";
  src: url("../fonts/Avenir Light.ttf") format("truetype");
}

@font-face {
  font-family: "AvenirBlack";
  src: url("../fonts/Avenir Black.ttf") format("truetype");
}

@font-face {
  font-family: "GoldenHopes";
  src: url("../fonts/GoldenHopes_PERSONAL_USE_ONLY.otf") format("truetype");
}

@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir Regular.ttf") format("truetype");
}

/* ================== GLOBAL ================== */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #000;
  color: #fff;
}

/* ================== NAVBAR ================== */
nav {
  width: 80%;
  margin: 5vh auto 0 auto;
  border-radius: 50px;
  border: 1px solid #ff8b03;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000000 !important;
  padding: 0 1vw;
  background-color: rgba(15, 15, 15, 0.8);
  background-image: url();

  background: transparent url("img/Rectangle 13.png") 0% 0% no-repeat
    padding-box;
  /* Example overlay */
  z-index: 1;
  opacity: 1;
  box-shadow: 20px 20px 20px #00000029;

  -webkit-backdrop-filter: blur(5px);
  /* for Safari */
  backdrop-filter: blur(5px);
  /* this creates the blur behind the box */
}

/* ensure nav is relatively positioned for absolute child */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
  /* important */
}

/* make Contact button stay on right corner */
nav li:last-child a {
  position: absolute;
  right: 0vw;
  top: 50%;
  transform: translateY(-50%);
  background: #ff8b03;
  color: #fff;
  padding: 10px 25px;
  border-radius: 25px;
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 14px);
  text-decoration: none;
  margin-right: 0vw;
  margin-top: 0vw;
}
#download {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  background: #ff8b03;
  color: #fff;
  padding: 10px 25px;
  border-radius: 25px;
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 14px);
  text-decoration: none;
  margin-right: 0vw;
  margin-top: 0vw;
}

nav a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 0.8vw, 14px);
  margin: 15px 1vw;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #ff8b03;
}

nav a.active {
  color: #ff8b03;
  font-weight: bold;
}

/* ================== CONTAINERS ================== */
.container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 5vw;
  box-sizing: border-box;
}

/* ================== CONTAINER 1 ================== */
#container1 {
  background-image: url("../img/nogoom ui 1.png");
  align-items: center;
  justify-content: center;
  text-align: center;
}

#container1 h1 {
  font-family: "AvenirHeavy", "Avenir", Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(18px, 2vw, 28px);
  color: #fff;
  margin-top: 15vh;
}

/* ================== CONTAINER 2 ================== */
#container2 {
  background-image: url("../img/nogoom ui 2.png");
  position: relative;
}

#container2 img:nth-of-type(1) {
  display: block;
  position: absolute;
  right: 0vw;
  top: -5vh;
  width: 20vw;
  max-width: 300px;
  height: auto;
}

#container2 h1 {
  font-family: "AvenirBlack", sans-serif;
  font-size: clamp(50px, 5vw, 90px);
  color: #fff;
  margin: 0;
}

#container2 h1:nth-of-type(1) {
  margin-left: 10vw;
  margin-top: 20vh;
}

#container2 h1:nth-of-type(2) {
  font-family: "GoldenHopes";
  color: #ff8b03;
  margin-left: 35vw;
  margin-top: -10vh;
  font-size: clamp(50px, 5vw, 80px);
  font-weight: lighter;
}

#container2 p {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.6;
  margin-left: 10vw;
  max-width: 70vw;
  margin-top: 2vh;
  color: #fff;
}

/* ================== CONTAINER 3 ================== */
#container3 {
  background-image: url("../img/Rectangle 4.svg");
  position: relative;
  color: #151515;
}

#container3 h1 {
  font-family: "AvenirBlack", sans-serif;
  font-weight: 900;
  font-size: clamp(100px, 13vw, 250px);
  margin: 0;
  margin-left: 6vw;
  line-height: 23vh;
}

#container3 h1:first-child {
  margin-top: 18vh;
}

#container3 img {
  position: absolute;
  top: 28vh;
  left: 10vw;
  width: 30vw;
}

#container3 .about-title {
  position: absolute;
  top: 18vh;
  left: 39vw;
  color: #ff8b03;
  font-family: "AvenirBlack", sans-serif;
  font-size: clamp(40px, 4vw, 80px);
}

#container3 p {
  position: absolute;
  top: 35vh;
  left: 45vw;
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 20px);
  color: #fff;
  line-height: 1.6;
  max-width: 45vw;
}

/* ================== CONTAINER 4 ================== */
#container4 {
  background-image: url("../img/nogoom ui 2.png");
  position: relative;
  color: #151515;
}

#container4 h1 {
  font-family: "AvenirBlack", sans-serif;
  font-size: clamp(50px, 5vw, 70px);
  color: #fff;
  margin: 0;
}

#container4 h1:nth-of-type(1) {
  margin-left: 10vw;
  margin-top: -40vh;
}

#container4 h1:nth-of-type(2) {
  font-family: "GoldenHopes";
  color: #ff8b03;
  margin-left: 15vw;
  margin-top: -7vh;
  font-size: clamp(50px, 5vw, 40px);
  font-weight: lighter;
}

#container4 h1:nth-of-type(3) {
  margin-left: 10vw;
  position: absolute;
  top: 55vh;
}

#container4 h1:nth-of-type(4) {
  font-family: "GoldenHopes";
  color: #ff8b03;
  margin-left: 15vw;
  font-size: clamp(50px, 5vw, 40px);
  font-weight: lighter;
  position: absolute;
  top: 63vh;
}

#container4 h2 {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 14px);
  color: #fff;
  margin: 0;
  position: absolute;
}

#h21 {
  top: 43vh;
  left: 15vw;
}

#h22 {
  top: 43vh;
  left: 38vw;
}

#h23 {
  top: 43vh;
  left: 62vw;
}

#h24 {
  top: 43vh;
  left: 85vw;
}

.hl {
  width: 70vw;
  height: 2px;
  background-color: #fff;
  margin-left: 10vw;
  margin-top: 5vh;
}

.circle {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 999;
  margin-left: 10vw;
}

#circle1 {
  margin-top: -8px;
}

#circle2 {
  margin-top: -15px;
  margin-left: 33vw;
}

#circle3 {
  margin-top: -15px;
  margin-left: 57vw;
}

#circle4 {
  margin-top: -15px;
  margin-left: 80vw;
}

.hl2 {
  width: 47vw;
  height: 2px;
  background-color: #fff;
  margin-left: 10vw;
  top: 80vh;
  position: absolute;
}

#circle5 {
  position: absolute;
  top: 79vh;
  left: 5vw;
}

#circle6 {
  position: absolute;
  top: 79vh;
  left: 28vw;
}

#circle7 {
  position: absolute;
  top: 79vh;
  left: 52vw;
}

#h25 {
  top: 83vh;
  left: 15vw;
}

#h26 {
  top: 83vh;
  left: 38vw;
}

#h27 {
  top: 83vh;
  left: 62vw;
}

/* ================== CONTAINER 5 ================== */
#container5 {
  background-image: url("../img/Rectangle 9.svg");
  position: relative;
  color: #151515;
}

#container5 h1 {
  font-family: "GoldenHopes";
  color: #ff8b03;
  margin-left: -5vw;
  font-size: clamp(50px, 100vw, 25vw);
  font-weight: lighter;
  position: absolute;
  top: 0vh;
}

#container5 .foreground {
  position: absolute;
  top: 20vh;
  left: 10vw;
  width: 80%;
  height: 70%;
  background: transparent url("img/Rectangle 13.png") 0% 0% no-repeat
    padding-box;
  /* Example overlay */
  z-index: 1;
  opacity: 1;
  box-shadow: 20px 20px 20px #00000029;
  border: 0px dashed #0f0f0f;
  border-radius: 37px;

  -webkit-backdrop-filter: blur(13px);
  /* for Safari */
  backdrop-filter: blur(13px);
  /* this creates the blur behind the box */
}

#container5 .foreground h2 {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  color: #fff;
  font-size: clamp(20px, 4vw, 70px);
  position: absolute;
  left: 5vw;
  top: 7vh;
}

#container5 .foreground h3 {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-weight: lighter;
  color: #fff;
  font-size: clamp(20px, 3vw, 30px);
  position: absolute;
  left: 5vw;
  top: 34vh;
}

#container5 .foreground p:nth-of-type(1) {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-weight: lighter;
  color: #fff;
  font-size: clamp(15px, 2vw, 17px);
  position: absolute;
  left: 5vw;
  top: 23vh;
}

#container5 .foreground p:nth-of-type(2) {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-weight: lighter;
  color: #fff;
  font-size: clamp(15px, 2vw, 17px);
  position: absolute;
  left: 5vw;
  top: 43vh;
}

/* ================== CONTAINER 6 ================== */
#container6 {
  background-image: url("../img/Group 32.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

#container6 h1 {
  font-family: "AvenirBlack", sans-serif;
  font-weight: bolder;
  font-size: clamp(50px, 10vw, 160px);
  color: #fff;
  margin: 0;
  margin-left: 20vw;
  margin-top: -45vh;
}

#container6 h3 {
  font-family: "GoldenHopes";
  color: #ff8b03;
  font-weight: lighter;
  margin-left: 15vw;
  font-size: clamp(50px, 12vw, 160px);
  margin-top: -20vh;
}

/* Carousel styling */
.carousel {
  position: absolute;
  height: 30vh;
  width: 100%;
  overflow: hidden;
  bottom: 0;
  left: 0;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll 30s linear infinite;
}

.carousel-track img {
  height: 100%;
  width: auto;
  margin: 0 40px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.carousel-track img:hover {
  filter: grayscale(0%);
}

/* Auto scrolling animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ================== CONTAINER 7 ================== */
#container7 {
  background-image: url("../img/nogoom ui 2.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

#container7 img {
  position: absolute;
  top: 0;
  left: 0vw;
  height: 100vh;
}

.contact-form {
  margin-left: 50vw;
  margin-top: 0vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border: 1px solid #302e2eff;
  color: #fff;
  background-color: #111;
  border-radius: 50px;
  outline: none;
  font-family: "AvenirLight", sans-serif;
  transition: all 0.3s ease;
}

.contact-form #message {
  height: 10vh;
  border-radius: 30px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff8b03;
  box-shadow: 0 0 5px rgba(255, 139, 3, 0.3);
}

.contact-form button {
  background: #ff8b03;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 14px;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: "AvenirBold", sans-serif;
  width: 8vw;
  margin: auto;
  margin-left: 40%;
  margin-top: 2vh;
}

.contact-form button:hover {
  background: #e67800;
}

.footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  height: 8vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  margin-left: -5vw;
}

.footer h2 {
  display: inline-block;
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-weight: lighter;
  font-size: clamp(10px, 0.8vw, 14px);
  color: #fff;
  margin: 0;
  padding: 1vh 0;
}

#circle9 {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 10px;
}

#circle10 {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 10px;
}

.footer h3 {
  font-family: "AvenirLight", "Avenir", Arial, sans-serif;
  font-weight: lighter;
  font-size: clamp(10px, 0.8vw, 14px);
  color: #fff;
  margin: 0;
  padding: 0px 0;
}

#con {
  font-family: "AvenirBlack", sans-serif;
  font-weight: bolder;
  font-size: clamp(30px, 6vw, 80px);
  color: #fff;
  margin: 0;
  margin-left: 0vw;
  margin-top: 0vh;
  text-align: center;
  margin-bottom: 0;
}

#us {
  font-family: "GoldenHopes";
  color: #ff8b03;
  margin-left: 20vw;
  font-size: clamp(30px, 6vw, 80px);
  font-weight: lighter;
  margin-top: -10vh;
  text-align: left;
  margin-bottom: -3vh;
}

/* ========== ANIMATIONS ========== */

/* Fade and slide effects */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle left slide */
.slide-left {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Right slide */
.slide-right {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease, transform 1s ease;
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.carousel-track img {
  animation: float 3s ease-in-out infinite;
}

/* ========== Container 8 ========== */
#container8 {
  background-image: url("../img/profile/Nogoom company profile_-3.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}
/* ========== Container 9 ========== */
#container9 {
  background-image: url("../img/profile/Nogoom company profile_-4.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}
/* ========== Container 10 ========== */
#container10 {
  background-image: url("../img/profile/Nogoom company profile_-5.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 11 ========== */
#container11 {
  background-image: url("../img/profile/Nogoom company profile_-6.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 12 ========== */
#container12 {
  background-image: url("../img/profile/Nogoom company profile_-7.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 13 ========== */
#container13 {
  background-image: url("../img/profile/Nogoom company profile_-8.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 14 ========== */
#container14 {
  background-image: url("../img/profile/Nogoom company profile_-9.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 15 ========== */
#container15 {
  background-image: url("../img/profile/Nogoom company profile_-10.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 16 ========== */
#container16 {
  background-image: url("../img/profile/Nogoom company profile_-11.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 17 ========== */
#container17 {
  background-image: url("../img/profile/Nogoom company profile_-12.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 18 ========== */
#container18 {
  background-image: url("../img/profile/Nogoom company profile_-13.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 19 ========== */
#container19 {
  background-image: url("../img/profile/Nogoom company profile_-14.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 20 ========== */
#container20 {
  background-image: url("../img/profile/Nogoom company profile_-15.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 21 ========== */
#container21 {
  background-image: url("../img/profile/Nogoom company profile_-16.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 22 ========== */
#container22 {
  background-image: url("../img/profile/Nogoom company profile_-17.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 23 ========== */
#container23 {
  background-image: url("../img/profile/Nogoom company profile_-18.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 24 ========== */
#container24 {
  background-image: url("../img/profile/Nogoom company profile_-19.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 25 ========== */
#container25 {
  background-image: url("../img/profile/Nogoom company profile_-20.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 26 ========== */
#container26 {
  background-image: url("../img/profile/Nogoom company profile_-21.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 27 ========== */
#container27 {
  background-image: url("../img/profile/Nogoom company profile_-22.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 28 ========== */
#container28 {
  background-image: url("../img/profile/Nogoom company profile_-23.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 29 ========== */
#container29 {
  background-image: url("../img/profile/Nogoom company profile_-24.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 30 ========== */
#container30 {
  background-image: url("../img/profile/Nogoom company profile_-25.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 31 ========== */
#container31 {
  background-image: url("../img/profile/Nogoom company profile_-26.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 32 ========== */
#container32 {
  background-image: url("../img/profile/Nogoom company profile_-27.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 33 ========== */
#container33 {
  background-image: url("../img/profile/Nogoom company profile_-28.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 34 ========== */
#container34 {
  background-image: url("../img/profile/Nogoom company profile_-29.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 35 ========== */
#container35 {
  background-image: url("../img/profile/Nogoom company profile_-30.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 36 ========== */
#container36 {
  background-image: url("../img/profile/Nogoom company profile_-31.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 37 ========== */
#container37 {
  background-image: url("../img/profile/Nogoom company profile_-32.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 38 ========== */
#container38 {
  background-image: url("../img/profile/Nogoom company profile_-33.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 39 ========== */
#container39 {
  background-image: url("../img/profile/Nogoom company profile_-34.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 40 ========== */
#container40 {
  background-image: url("../img/profile/Nogoom company profile_-35.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 41 ========== */
#container41 {
  background-image: url("../img/profile/Nogoom company profile_-36.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 42 ========== */
#container42 {
  background-image: url("../img/profile/Nogoom company profile_-37.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 43 ========== */
#container43 {
  background-image: url("../img/profile/Nogoom company profile_-38.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 44 ========== */
#container44 {
  background-image: url("../img/profile/Nogoom company profile_-39.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 45 ========== */
#container45 {
  background-image: url("../img/profile/Nogoom company profile_-40.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 46 ========== */
#container46 {
  background-image: url("../img/profile/Nogoom company profile_-41.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ========== Container 47 ========== */
#container47 {
  background-image: url("../img/profile/Nogoom company profile_-42.png");
  position: relative;
  color: #151515;
  overflow: hidden;
}

/* ===== Scroll Buttons ===== */
/* Buttons container */
.scroll-buttons {
  position: fixed;
  right: 20px;
  bottom: 50%;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.scroll-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #151515;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.scroll-btn:hover {
  background-color: #ff8b03;
  transform: scale(1.1);
}
#contactmob {
  display: none;
}
#starmob {
  display: none;
}
#mobstar2 {
  display: none;
}
#profilemob {
  display: none;
}
/* ================== MEDIA QUERIES ================== */
@media (max-width: 1400px) {
  #container3 p {
    top: 45vh;
  }
}

@media (max-width: 1200px) {
  nav ul {
    justify-content: center;
  }

  #container2 h1:nth-of-type(2) {
    margin-left: 25vw;
  }

  #container3 img {
    width: 30vw;
  }
}

@media (max-width: 1024px) {
  #container3 {
    flex-direction: column;
    align-items: center;
  }

  #container3 h1,
  #container3 .about-title,
  #container3 p {
    margin-left: 0;
    left: auto;
    text-align: center;
  }

  #container3 p {
    max-width: 80%;
    position: relative;
    top: auto;
  }
}
@media only screen and (max-width: 768px) {
  body {
    width: 100%;
    height: 100%;
  }
  html {
    width: 100%;
    height: 100%;
  }
  nav {
    display: none;
  }
  #container1 {
    background-image: url("../img/mobileview/1.png");
    width: 100vw;
  }
  #container1 h1 {
    font-size: clamp(30px, 7vw, 22px);
    margin-top: 50vh;
    max-width: 40vw;
  }
  #container1::after {
    content: "";
    display: block;
    height: 5px;
    width: 40vw;
    justify-content: center;
    background-color: #e67800; /* change to your desired color */
    margin-top: 0px; /* spacing from the container */
  }
  #contactmob {
    display: block;
    position: fixed;
    top: 20px;
    right: 30px;
    background: #ff8b03;
    color: #fff;
    padding: 10px 15px;
    border-radius: 25px;
    font-family: "AvenirLight", "Avenir", Arial, sans-serif;
    font-size: clamp(10px, 3vw, 14px);
    text-decoration: none;
    z-index: 1000001 !important;
    transform: none;
  }
  #profilemob {
    display: block;
    position: fixed;
    top: 20px;
    left: 20px;
    background: #ff8b03;
    color: #fff;
    padding: 10px 15px;
    border-radius: 25px;
    font-family: "AvenirLight", "Avenir", Arial, sans-serif;
    font-size: clamp(10px, 3vw, 14px);
    text-decoration: none;
    z-index: 1000001 !important;
    transform: none;
  }
  #container2 {
    background-image: url("../img/mobileview/2.png");
    width: 100%;
  }
  #container2 h1:nth-of-type(1) {
    margin-top: -30vh;
    font-size: clamp(35px, 6vw, 50px);
    margin-left: 3vw;
  }
  #container2 h1:nth-of-type(2) {
    margin-left: 45vw;
    margin-top: -3vh;
    font-size: clamp(35px, 7vw, 40px);
    justify-content: center;
  }
  #container2 p {
    margin-top: 10vh;
    max-width: 80%;
    justify-content: center;
    font-size: clamp(12px, 4vw, 16px);
  }
  #container2 img:nth-of-type(1) {
    display: none;
  }
  #starmob {
    display: block;
    position: absolute;
    bottom: 0vh;
    right: 0vw;
    width: 50vw;
  }
  #container3 {
    width: 100% !important;
  }
  #container3 h1 {
    font-size: clamp(150px, 8vw, 80px);
    line-height: 30vw;
    text-align: center;
  }
  .about-title {
    margin-top: -10vh !important;
  }
  #container3 p {
    margin-top: -80vh;
    line-height: 1.4;
  }
  #container3 img {
    width: 70vw;
    top: 63vh;
    left: 13vw;
    bottom: 5vh;
  }
  #container4 {
    width: 100% !important;
    background-image: url("../img/mobileview/4.png");
  }
  #container4 h1:nth-of-type(1) {
    margin-top: -45vh;
  }
  #container4 h1:nth-of-type(2) {
    margin-left: 27vw;
    margin-top: -4vh;
    font-size: clamp(30px, 5vw, 40px);
  }
  #h21 {
    top: 22vh;
    left: 25vw;
  }
  #h22 {
    top: calc(30vh - 2px);
    left: 25vw;
  }
  #h23 {
    top: 36vh;
    left: 25vw;
  }
  #h24 {
    top: calc(45vh + 2px);
    left: 25vw;
  }
  #h25 {
    top: 67vh;
    left: 25vw;
  }
  #h26 {
    top: calc(79vh - 2px);
    left: 25vw;
  }
  #h27 {
    top: calc(87vh + 2px);
    left: 25vw;
  }
  #container4 h1:nth-of-type(4) {
    margin-left: 27vw;
    font-size: clamp(30px, 5vw, 40px);
    top: calc(60vh + 3px);
  }
  .circle {
    margin-left: calc(9vw - 2px);
  }
  #circle1 {
    margin-top: -25vh;
  }
  #circle2 {
    margin-top: 6vh;
    margin-left: calc(9vw - 2px);
  }
  #circle3 {
    margin-top: 6vh;
    margin-left: calc(9vw - 2px);
  }
  #circle4 {
    margin-top: 6vh;
    margin-left: calc(9vw - 2px);
  }
  #circle5 {
    top: 69vh;
    left: calc(6vw - 4px);
  }
  #circle6 {
    top: 79vh;
    left: calc(6vw - 4px);
  }
  #circle7 {
    top: 89vh;
    left: calc(6vw - 4px);
  }

  .hl2 {
    width: 2px;
    height: 20vh;
    top: 70vh;
  }
  .hl {
    width: 2px;
    height: 25vh;
  }
  #container5 {
    width: 100% !important;
  }
  #container5 h1 {
    top: 35vh;
  }
  #container5 .foreground {
    width: 70vw;
    left: 15vw;
  }
  #container6 {
    width: 100% !important;
    background-image: url("../img/mobileview/6.png");
  }
  #container6 h1 {
    margin-left: 16vw;
    margin-top: -14vh;
  }
  #container6 h3 {
    margin-left: 8vw;
    font-size: clamp(59px, 12vw, 160px);
  }
  #mobstar2 {
    display: block;
    position: absolute;
    top: 0;
    left: -40vw;
    width: 100vw;
  }
  #container7 img {
    top: auto;
    left: 0vw;
    height: auto;
    width: 100vw;
    bottom: 0;
  }
  .contact-form {
    margin-left: 6vw;
    margin-top: -22vh;
    width: 70vw;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .contact-form #message {
    height: 4vh;
    border-radius: 20px;
  }
  .contact-form input {
    height: 1vh;
  }
  .contact-form button {
    width: 20vw;
  }
  #con {
    padding-bottom: 15vh;
    margin-top: -12vh;
  }
  #us {
    margin-top: -20vh;
    margin-bottom: 0vh;
    margin-left: 45vw;
  }
  .footer h2 {
    font-size: clamp(6px, 0.8vw, 14px);
  }
}