.total-page {
  display: flex;
  flex-direction: column;
  padding-top: 10vw;
  padding-bottom: 10vw;
  padding-left: 6vw;
}

/* .name {
  color: #030303;
}
.menu-bar i {
  color: #000000;
}
.explore button {
  color: #000000;
} */
.heading div {
  font-size: 17vw;
  display: inline;
  font-family: "Impact";
  line-height: 15.5vw;
  text-transform: uppercase;
}
.heading :nth-child(1) {
  margin-right: 2vw;
  color: #ffffff;
}
.heading :nth-child(2) {
  color: #f93434;
}
.total-page .heading-para {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-top: -1.5vw;
  margin-left: 2vw;
  color: #ffff;
}
.total-page .heading-para p {
  font-family: "Futura";
}
.total-page .heading-para :nth-child(1) {
  margin: 0;
}
.total-page .heading-para :nth-child(4) {
  color: #f93434;
}
.heading p {
  font-family: "Fellix", serif;
  font-size: 1.5vw;
}
.details {
  padding: 7vw 2.5vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4vw;
  position: relative;
}
.pt-one {
  width: 39.5vw;
  height: 50vw;
  display: flex;
  gap: 2vw;
  flex-direction: column;
  position: relative;
}

.pic-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pt-one-img {
  height: 39.5vw;
  width: 39.5vw;
  overflow: hidden;
}
.pt-one-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hr-line {
  height: 1px;
  width: 100%;
  border: 1px solid #fff;
  background-color: rgb(204, 204, 199);
}
.programm-name {
  font-family: "Impact";
  font-size: 3vw;
  font-weight: 500;
  margin-top: 1vw;
  color: #ffffff;
  letter-spacing: 0.1vw;
}
.pic-date {
  font-family: "Futura";
  font-size: 1.2vw;
  color: #ffffff;
  text-transform: uppercase;
}
.org-1 {
  position: relative;
  left: -10vw;
  opacity: 1;
  left: 0;
}
.org-2 {
  position: relative;
  right: -20vw;
  opacity: 1;
  right: 0;
}
.membership-dev {
  rotate: 2deg;
}
.heading .word {
  position: relative;
  top: 5vw;
  opacity: 0;
}
.heading-para p {
  position: relative;
  top: 5vw;
  opacity: 0;
}
.page2 {
  background-color: #131212;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rotate-box {
  height: 2vw;
  width: 2vw;
  background-color: #ffff;
  position: relative;
  top: -40vw;
  left: -10vw;
  rotate: 180deg;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
}
.rotate-box h1 {
  font-family: "Impact";
  color: #fff;
  font-size: 19vw;
  scale: 0.7;
  opacity: 0;
}
.rotate-box .red {
  color: #f93434;
}

@media (max-width: 768px) {
  .scroll {
    display: none;
  }
  /* General adjustments */
  .total-page {
    padding-top: 16vw; /* Reduced padding for mobile */
    padding-bottom: 5vw; /* Reduced padding for mobile */
    padding-left: 4vw; /* Reduced padding for mobile */
  }

  .nav-bar {
    width: 100%; /* Full width on mobile */
    margin-left: 0;
    scale: 1;
    opacity: 1;
  }

  .heading div {
    font-family: "Bebas Neue", sans-serif; /* Updated font family */
    font-size: 28vw; /* Scaled down for mobile */
    text-transform: uppercase;
    font-weight: 900;
    line-height: 23vw;
  }

  .heading :nth-child(1) {
    margin-right: 1vw;
    color: #ffffff;
  }

  .heading :nth-child(2) {
    color: #f93434;
  }

  .total-page .heading-para {
    flex-direction: row;
    margin-top: 0;
    margin-left: 2vw;
  }

  .total-page .heading-para p {
    font-family: "Futura";
    font-size: 2.4vw;
  }

  .details {
    padding: 5vw 0;
    padding-right: 5vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .pt-one {
    width: 100%; /* Full width on mobile */
    height: auto; /* Adjust height for mobile */
  }

  .pt-one-img {
    height: auto; /* Adjust height for mobile */
    width: 100%; /* Full width on mobile */
  }

  .hr-line {
    height: 1px;
    width: 100%; /* Full width */
  }

  .programm-name {
    font-family: "Bebas Neue", sans-serif; /* Updated font family */
    font-size: 8vw; /* Scaled down for mobile */
    margin-top: 2vw; /* Adjusted margin for mobile */
  }

  .pic-date {
    font-family: "Roboto";
    font-size: 2.5vw; /* Scaled down for mobile */
  }

  .org-1,
  .org-2 {
    position: static; /* Reset positioning */
    opacity: 1;
    left: 0;
    right: 0;
    font-size: 2vw;
  }

  .membership-dev {
    rotate: 0deg; /* Reset rotation */
  }

  .heading .word,
  .heading-para p {
    position: static; /* Reset positioning */
    opacity: 1; /* Ensure visibility */
  }

  .page2 {
    height: 100vh;
    padding: 5vw;
    margin-top: 0;
  }

  .rotate-box {
    opacity: 0;
    height: 8vw; /* Scaled height for mobile */
    width: 8vw; /* Scaled width for mobile */
    top: -50vw; /* Adjust position for mobile */
    left: -20vw; /* Adjust position for mobile */
    rotate: 180deg;
    gap: 2vw; /* Adjusted gap for mobile */
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .rotate-box h1 {
    font-family: "Bebas Neue", sans-serif; /* Updated font family */
    font-size: 30vw; /* Scaled down for mobile */
    scale: 0.8;
    opacity: 0;
    margin: 0;
  }

  .rotate-box .red {
    color: #f93434;
  }
}