Vision.css

@import url("https://fonts.googleapis.com/css2?family=Belanosima&family=Poppins:wght@100;300;400;500;600;700;800&display=swap");

:root {
  --font-base: "poppins";
}
* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
}

#main {
  position: relative;
  overflow: hidden;
}

#page {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
  margin-bottom: 12rem;
}

header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  z-index: 1;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin: 0 12rem;
}

nav h3 {
  color: white;
  font-family: "poppins";
  font-weight: 600;
  cursor: pointer;
}

nav button {
  padding: 3px 10px;
  background: white;
  color: black;
  border-radius: 25px;
  font-family: "poppins";
  cursor: pointer;
}
#page > video {
  height: 100%;
  width: 70%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#page-bottom {
  height: 20%;
  width: 25%;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#page-bottom > img {
  width: 100%;
}
#page-bottom > h3 {
  color: #2c3333;
  margin-bottom: 0.5vw;
  font-size: 30px;
  font-family: "poppins";
  font-weight: 400;
}

.page1__video {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
}

.page1__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.page1 h1 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 2.7rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

#page2 {
  margin-top: 9rem;
}

.page2__video {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
}

.page2__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page2 h1 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 2.7rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

#page3 {
  margin-top: 9rem;
}

.page3__video {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
}

.page3__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page3 h1 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 2.7rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

#page4 {
  margin-top: 9rem;
}

.page4__video {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
}

.page4__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page4 h1 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 2.7rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

#page5 {
  margin-top: 9rem;
}

.page5-h1 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 2.7rem;
  font-weight: 600;
  margin-bottom: 9rem;
}

.watch__film {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 7rem;
}

.watch__movie-subheading {
  display: flex;
  justify-content: space-between;
  width: 35%;
  padding: 1.5rem 0;
  margin-top: 3rem;
}

.watch__movie-subheading a {
  text-decoration: none;
}

.watch__movie-subheading a p {
  font-size: 1.5rem;
  color: #ff823d;
}

.sale-period {
  font-size: 1.3rem;
  color: gray;
  font-weight: 400;
}

.watch-img {
  width: 70%;
}

.watch__film button {
  padding: 10px 30px;
  background: white;
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2rem;
  margin-top: 3rem;
  border: 2px solid black;
}

.watch__film button:hover {
  background: black;
  color: white;
  transition: 0.5s cubic-bezier(0.08, 0.91, 0.43, 0.99);
}

#page6 {
  margin-top: 9rem;
  padding: 9rem 0;
}

#page6 h3 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
}

.page6__video {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
}

.page6__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page6 h1 {
  text-align: center;
  font-family: var(--font-base);
  font-size: 2.7rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.page6-app-description {
  margin: 5rem 14rem;
  display: flex;
  gap: 5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.page6-app-description p {
  font-size: 2rem;
  font-family: var(--font-base);
  color: black;
  font-weight: 600;
  min-width: 18rem;
  text-align: start;
}

.page6-app-description-subtext p {
  font-size: 1.3rem;
  font-family: var(--font-base);
  color: #4d4d4d;
  font-weight: 500;
  text-align: start;
}

.page6-app-description-subtext button {
  padding: 10px 30px;
  background: #ff823d;
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2rem;
  margin-top: 3rem;
  color: white;
}

#page7 {
  margin-top: 4rem;
  padding: 7rem 9rem 3rem;
  background-color: #f5f5f7;
}

#page7 h3,
h1,
p {
  text-align: center;
  font-family: var(--font-base);
  font-weight: 600;
}

#page7 h3 {
  font-size: 2rem;
}

#page7 h1 {
  font-size: 5rem;
  font-weight: 700;
}

#page7 p {
  color: #545454c9;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 3rem 5rem;
  text-align: center;
}

#page8 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}

#page8 > canvas {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 99;
  image-rendering: auto;
}

#page9 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #f5f5f7;
}

#page9 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #4d4d4d;
  max-width: 20rem;
  font-size: 1.4rem;
  left: 9%;
  text-align: start;
  font-family: var(--font-base);
  z-index: 100;
}

#page9 span {
  color: black;
  font-weight: 600;
}

#page10 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #f5f5f7;
}

#page10 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #4d4d4d;
  max-width: 20rem;
  font-size: 1.4rem;
  right: 9%;
  text-align: start;
  z-index: 100;
}

#page10 span {
  color: black;
  font-weight: 600;
}

#page11 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #f5f5f7;
}

#page11 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #4d4d4d;
  max-width: 20rem;
  font-size: 1.4rem;
  left: 9%;
  text-align: start;
  z-index: 100;
}

#page11 span {
  color: black;
  font-weight: 600;
}

#page12 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #f5f5f7;
}

#page12 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #4d4d4d;
  max-width: 20rem;
  font-size: 1.4rem;
  right: 9%;
  text-align: start;
  z-index: 100;
}

#page12 span {
  color: black;
  font-weight: 600;
}

#page13 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #f5f5f7;
}

#page13 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #4d4d4d;
  max-width: 20rem;
  font-size: 1.4rem;
  left: 9%;
  text-align: start;
  z-index: 100;
}

#page13 span {
  color: black;
  font-weight: 600;
}

#page14 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #f5f5f7;
}

#page14 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #4d4d4d;
  max-width: 20rem;
  font-size: 1.4rem;
  right: 9%;
  text-align: start;
  z-index: 100;
}

#page14 span {
  color: black;
  font-weight: 600;
}

#page15 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 100vh;
  width: 100vw;
  padding: 0 3rem;
}

.page15-left-container {
  height: 90%;
  width: 48%;
  position: relative;
  background-image: url(https://www.apple.com/v/apple-vision-pro/a/images/overview/design/glass_top__k3b8lzqd1l2m_large.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.page15-right-container {
  height: 90%;
  width: 48%;
  position: relative;
  background-image: url(https://www.apple.com/v/apple-vision-pro/a/images/overview/design/glass_side__gm4agomrwl2e_large.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#page16 {
  padding: 2rem 0;
}

.page16__video {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
}

.page16__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page17 {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
}

.page17-heading {
  text-align: center;
  padding: 9rem 24rem;
}

.page17-heading h1 {
  font-size: 1.3rem;
  color: #4d4d4d;
  font-family: var(--font-base);
  font-weight: 600;
}

.one,
.two,
.three {
  color: black;
  font-weiht: 800;
}

#page17 img {
  width: 80%;
}

.page17-btn {
  position: absolute;
  z-index: 1;
  bottom: 11%;
}

.page17-btn button {
  padding: 15px 60px;
  background: #ff823d;
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2rem;
  margin-top: 3rem;
  border: 2px solid black;
  color: white;
}

#page18 {
  background: #f5f5f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12rem 0;
}

.pages18-heading h3 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.pages18-heading h1 {
  font-size: 4.65rem;
  font-weight: 700;
  margin-bottom: 7rem;
  padding: 0 15rem;
  line-height: 100px;
}

.page18-vdieo {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 0 3rem;
  background: #f5f5f7;
}

.page18-vdieo video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.page18-description {
  display: flex;
  justify-content: space-between;
  padding: 6rem 12rem;
  align-items: start;
  gap: 5rem;
}

.page18-description p:first-child {
  font-size: 2rem;
  font-family: var(--font-base);
  color: black;
  font-weight: 600;
  min-width: 20rem;
  text-align: start;
}

.page18-description p:last-child {
  color: #4d4d4d;
  text-align: start;
}

#page19 {
  padding: 0 3rem 0 3rem;
  background-color: #f5f5f7;
}

.page19-img {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #f5f5f7;
  padding: 0 3rem;
}

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

.tech-section {
  background: #000;
}

#page20 {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #000;
  color: #fff;
  z-index: -1;
  padding-top: 4rem;
}
#page20 h4 {
  font-size: 2vw;
  font-weight: 500;
  margin-bottom: 2vw;
  font-family: var(--font-base);
}
#page20 h1 {
  font-size: 5vw;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 3vw;
}
#page20 p {
  font-size: 1.5vw;
  font-weight: 500;
  margin-bottom: 2vw;
  color: #ffffff7c;
  width: 50%;
  text-align: center;
}
#page20 p span {
  color: #fff;
}

#page21 {
  position: relative;
  height: 100vh;
  width: 100vw;
  top: 0%;
  z-index: 0;
  margin-top: -1rem;
}
#page21 canvas {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
}

#page22 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  height: 30vh;
  width: 100vw;
  background-color: #000;
  flex-direction: column;
  text-align: center;
  font-size: 1.5vw;
  margin-top: -3rem;
  z-index: 1;
}
#page22 h5 {
  width: 35%;
  font-family: var(--font-base);
  padding-bottom: 3rem;
}

#page23 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}

#page23 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#center-page23 {
  position: absolute;
  height: 20%;
  width: 20%;
  bottom: 60%;
  right: 8%;
  color: #fff;
  z-index: 3;
}
#center-page23  h1 {
  margin-bottom: 1.7vw;
  color: #4d4d4d;
  text-align:start;

}


#center-page23 p{
  text-align:start;
font-size: 1rem;
font-family:var(--font-base;)
}

#page24 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #000;
  margin-top: -0.5rem;
  z-index: 0;

}

#headesetoff {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
  z-index: 9;
}

#headseton {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
}

#page25 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #000;
  margin-top: -0.5rem;
  z-index: 1;
}

#page25-onheadeset {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
}

#page25-offheadset {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
  z-index: 9;
}

#page26 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
  margin-top: -0.5rem;
  z-index: 2;
}

#page26 img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 4rem;
}

#page27 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 25rem;
  margin-top: -0.5rem;
  z-index: 3;
}

.chip-heading {
  color: white;
  margin-bottom: 3rem;
  font-family: var(--font-base);
  font-size: 2rem;
  font-weight: 700;
}

.chip-subheading {
  color: #4d4d4d;
  margin-bottom: 3rem;
  font-family: var(--font-base);
  font-size: 1.3rem;
  font-weight: 700;
}

#page27 button {
  padding: 10px 30px;
  background: white;
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2rem;
  margin-top: 3rem;
  color: #000;
  width: 30%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4rem;
}

.M2,
.R1 {
  color: white;
}

#page28 {
  position: relative;
  height: 150vh;
  width: 100vw;
  background: #fff;
  padding: 0 5rem;
}

#page28 img {
  width: 5%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 7rem;
}

.page28-details {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page28-details h3 {
  font-size: 1.5rem;
  font-family: var(--font-base);
  font-weight: 600;
  margin-bottom: 1rem;
}

.page28-details h1 {
  font-size: 5rem;
  line-height: 90px;
  max-width: 100%;
  margin-bottom: 1rem;
}

.page28-details p {
  color: #4d4d4d;
  margin-bottom: 3rem;
  font-family: var(--font-base);
  font-size: 1.3rem;
  font-weight: 700;
}

.page28-details button {
  padding: 10px 30px;
  background: #ff823d;
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  color: white;
}