*{margin:0;padding:0;box-sizing:border-box;outline:none}html{font-size:62.5%;scroll-behavior:smooth}a{text-decoration:none}ul{list-style-type:none;padding-left:0}.center{display:flex;align-items:center;justify-content:center}body{font-family:Work Sans,sans-serif}.section-1{position:relative;width:100%;height:100vh;background-color:#6edae6;display:flex;align-items:center;justify-content:space-evenly;clip-path:polygon(100% 0,100% 95%,38% 100%,0 100%,0 0)}.logo{position:absolute;top:3rem;left:3rem}.logo i{font-size:10rem;color:#000c}.navbar{position:absolute;top:3rem;right:10%}.navbar-link{font-size:2rem;display:inline-block;margin:0 3rem;color:#000;transition:transform .35s ease}.navbar-link:hover,.navbar-link:focus{transform:scale(1.5)}.cube-wrapper{perspective:100rem}.cube{width:30rem;height:55rem;transform-style:preserve-3d;transform:roateX(0deg) rotateY(91deg) rotate(0);position:relative;top:-2rem;transition:transform .35s}.front-side,.back-side{position:absolute;width:100%;height:100%;background-color:#fee;transform-style:preserve-3d;box-shadow:inset .1rem .1rem .1rem #ddd,inset -.1rem -.1rem .1rem #ddd}.front-side:before,.front-side:after{content:"";width:100%;height:10rem;position:absolute;background-color:#fee;box-shadow:inset .1rem .1rem .1rem #ddd,inset -.1rem -.1rem .1rem #ddd}.back-side:before,.back-side:after{content:"iPhone";width:10rem;height:100%;position:absolute;background-color:#fee;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:500;color:#ec1919;box-shadow:inset .1rem .1rem .1rem #ddd,inset -.1rem -.1rem .1rem #ddd}.back-side:before{transform:rotateY(-90deg);top:0;left:0;transform-origin:left}.back-side:after{transform:rotateY(90deg);top:0;right:0;transform-origin:right}.front-side:before{top:0;left:0;transform:rotateX(-90deg);transform-origin:top}.front-side:after{bottom:0;left:0;transform:rotateX(90deg);transform-origin:bottom}.front-side img{width:100%;height:100%;object-fit:contain}.front-side{padding:2.5rem;transform:translateZ(5rem)}.back-side{transform:translateZ(-5rem);display:flex;align-items:center;justify-content:center}.back-side i{font-size:12rem;color:#6edae6;transform:rotateY(180deg);text-shadow:.1rem .1rem .2rem #aaa,-.1rem -.1rem .2rem #aaa}.controls{position:absolute;bottom:-15rem;left:50%;transform:translate(-50%);width:10rem;height:10rem;background-color:#000000e6;border-radius:50%;border:1px solid rgba(0,0,0,.8)}.controls a{position:absolute;cursor:pointer}.controls a:nth-child(1){top:.5rem;left:50%;transform:translate(-50%)}.controls a:nth-child(2){bottom:.5rem;left:50%;transform:translate(-50%)}.controls a:nth-child(3){top:50%;left:.5rem;transform:translateY(-50%)}.controls a:nth-child(4){top:50%;right:.5rem;transform:translateY(-50%)}.controls a:nth-child(5){top:15%;right:15%;transform:rotate(45deg)}.controls a:nth-child(6){bottom:15%;left:15%;transform:rotate(45deg)}.controls i{color:#6edae6;font-size:1.5rem;opacity:.5;transition:opacity .35s}.controls a:hover i{opacity:1}.section-1-banner{flex-direction:column}.section-1-banner h1{font-size:13rem;font-weight:300;text-transform:uppercase;letter-spacing:.5rem}.section-1-banner p{font-size:4rem;font-weight:400;margin:6rem 0 4rem;letter-spacing:.1rem}.section-1-banner span{font-size:3rem;margin-bottom:6rem}.section-1-banner button{padding:2rem 4rem;font-size:2rem;background-color:#000;color:#6edae6;font-weight:400;letter-spacing:.1rem;border:none;border-radius:.5rem;cursor:pointer;clip-path:polygon(50% 0%,81% 5%,100% 0,100% 100%,80% 95%,50% 100%,20% 95%,0 100%,0 0,23% 5%);transition:clip-path .35s ease}.section-1-banner button:hover{clip-path:polygon(40% 15%,77% 15%,100% 10%,100% 90%,75% 85%,40% 85%,30% 100%,0 50%,0 50%,30% 0)}.slideshow{position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1}.slideshow .slide{width:100%;height:100%;position:absolute;left:0;top:0;background-position:center;background-repeat:no-repeat;background-size:cover;transition:opacity 1s ease}.section-2{width:100%;height:120vh;padding:10vh 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.section-2-heading{font-size:10rem;font-weight:200;color:#000;position:relative;margin-bottom:5rem}.section-2-heading:before{content:"";width:130%;height:30vh;background-image:linear-gradient(#6edae6,#fff);position:absolute;top:0;left:0;transform:skew(-50deg);transform-origin:left top;border-radius:1rem;z-index:-1}.section-2-images{width:50vw;height:60vh;background-image:linear-gradient(#6edae6,#fff);border-radius:.5rem}.section-2-images img{width:inherit;height:inherit;object-fit:contain;position:absolute;transition:opacity 2.5s ease}.section-2-images:hover .iphone-1-img{opacity:0}.section-2-images:hover .iphone-2-img{opacity:1}.iphone-btns{display:flex;gap:3rem}.iphone-btn{width:6rem;height:6rem;background-image:linear-gradient(to right,#333 60%,#525252);border-radius:50%;position:relative}.iphone-btn:after{content:"";display:block;width:50%;height:50%;border:.1rem solid #6edae6;border-radius:1rem}.iphone-btn span{position:absolute;top:-3rem;font-size:1.6rem;font-weight:400;text-transform:uppercase;letter-spacing:.1rem;color:#6edae6;transform:scale(0);transition:transform .5s;width:max-content}.iphone-btn:hover span{transform:scale(1)}.section-3{width:100%;height:100%;background-color:#000;flex-direction:column;padding:15rem 0;clip-path:polygon(68% 0,100% 0,100% 97%,38% 100%,0 100%,0 3%)}.section-3-heading{font-size:10rem;font-weight:200;color:#6edae6;margin-bottom:15rem}.section-3-content{width:80%;flex-direction:column;perspective:1000rem;position:relative;transform-style:preserve-3d;overflow:hidden}.section-3-content img{width:inherit;transform:rotateX(-80deg);transform-origin:bottom}.section-3-content.change img{transform:rotateX(0);transition:transform 3s}.loading-wrapper{position:absolute;top:6%;width:60%;height:85%;background:linear-gradient(#fff9,#fff9),url(/aplle-e-commerce/assets/macbook-1-desktop-CLWDEoIi.png);background-position:center center;background-repeat:no-repeat;background-size:cover;z-index:-1;opacity:0}.change .loading-wrapper{opacity:1;transition:opacity 1s 2s}.loading{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000;flex-direction:column}.change .loading{opacity:0;transition:opacity 1s 4s}.loading i{font-size:10rem;color:#fff;margin-bottom:2rem}.progress-bar{width:22rem;height:.35rem;background-color:#888;border-radius:5rem;position:relative}.progress-bar:after{content:"";display:block;position:absolute;width:0;height:.3rem;top:0;left:0;background-color:#fff;border-radius:5rem}.change .progress-bar:after{width:100%;transition:width 1s 3s}.macbook-info{position:absolute;width:70rem;text-align:center;opacity:0}.change .macbook-info{opacity:1;transition:opacity 1s 5s}.macbook-info-heading{font-size:6rem;font-weight:400;color:#6edae6}.macbook-price{font-size:2.5rem;font-weight:200;margin:3rem 0}.macbook-btn{width:25rem;height:5rem;background-image:linear-gradient(#ddd,#fff);border:none;border-radius:.5rem;box-shadow:.1rem .1rem .1rem #fff,-.1rem -.1rem .1rem #fff;font-size:1.5rem;font-weight:500;letter-spacing:.2rem;color:#6edae6;cursor:pointer}.section-4{height:140vh;padding:20vh 0;flex-direction:column;position:relative}.watches{position:relative;width:100%;height:100%;overflow:hidden}.watches>div{position:absolute}.watch-bands{transition:margin-left 1s}.watch-band-img{width:35rem;height:35rem;object-fit:contain}.watch-cases{flex-direction:column;transition:margin-top 1s}.watch-case-img{width:35rem;height:35rem;object-fit:contain;display:flex}.hide-control{opacity:0;visibility:hidden}.watch-control{position:absolute;width:4rem;height:4rem;background-color:#ddd6;display:flex;align-items:center;justify-content:center;border-radius:50%}.watch-control i{font-size:3rem;color:#6edae6}.watch-top-control{top:22vh;left:50%;transform:translate(-50%)}.watch-right-control{right:2rem;top:50%;transform:translateY(-50%)}.watch-left-control{left:2rem;top:50%;transform:translateY(-50%)}.watch-bootom-control{bottom:20vh;left:50%;transform:translate(-50%)}.watch-btn{position:absolute;right:35%;bottom:30vh;width:13rem;height:5rem;background-color:#000;color:#6edae6;border:.1rem dashed #ffffff;border-radius:4rem;font-size:1.6rem;font-weight:200;cursor:pointer}.section-5{width:100%;height:100vh}.airpods{width:90%;height:80%;display:flex;position:relative}.section-5-heading{position:absolute;top:0;left:50%;transform:translate(-50%);font-size:15rem;font-weight:300;color:#fff;text-shadow:.1rem .1rem 0 #999}.airpods img{width:50%;height:100%;object-fit:contain}.airpods-img-2{background-color:#6edae6}.airpods-buttons{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:5rem}.airpods-btn{width:15rem;height:4rem;background-color:#6edae6;margin:0 2rem;border:none;border-radius:.5rem;color:#fff;cursor:pointer}.airpods-btn:last-child{background-color:#fff;color:#6edae6}.footer{width:100%;height:40vh;position:relative}.icon-link{margin:0 5rem}.icon-img{width:10rem}.copyrigth{position:absolute;bottom:5rem;font-size:1.5rem;letter-spacing:.1rem}@media (max-width: 1500px){html{font-size:45%}}@media (max-width: 1100px){html{font-size:40%}.navbar-link{font-weight:700}.section-1-banner h1{font-size:8rem}.section-1-banner p{font-size:3rem}.watch-btn{right:25%}}@media (max-width: 900px){.section-3-content{width:90%}.loading-wrapper{width:70%}.loading i{font-size:6rem}.section-5-heading{font-size:12rem}}@media (max-width: 700px){.logo{top:0;left:2rem}.logo i{font-size:8rem}.controls{display:none}.cube-wrapper{opacity:.7}.cube{top:3rem}.section-1-banner{position:absolute}.section-1-banner h1{position:relative;left:-5rem}.section-1-banner h1:first-letter{visibility:hidden;opacity:0}.section-1-banner button:hover{clip-path:polygon(50% 0%,81% 5%,100% 0,100% 100%,80% 95%,50% 100%,20% 95%,0 100%,0 0,23% 5%)}.section-2-images{height:70vh;width:70vw}.watch-btn{right:15%}.airpods-img-1{display:none}.airpods .airpods-img-2{width:100%}.airpods-btn{background-color:#fff;color:#6edae6;box-shadow:.1rem .1rem .1rem #ddd}.icon-link{margin:0 2rem}}@media (max-width: 550px){.navbar-link{margin:0 1.5rem}.section-2-heading,.section-3-heading{font-size:8rem}.macbook-info-heading{font-size:5rem}.macbook-btn{width:15rem;height:3rem;font-size:1.3rem}.airpods-buttons{width:50rem;text-align:center}.icon-link img{width:8rem}}@media (max-width: 450px){html{font-size:35%}.logo{top:10rem;left:50%;transform:translate(-50%)}.navbar{left:50%;transform:translate(-50%);width:max-content}.section-1-banner p{text-align:center}.iphones{width:75vw}.section-3-heading{font-size:6rem}.macbook-info{width:40rem}.macbook-info-heading{font-size:3rem}.macbook-price{font-size:2rem;font-weight:300}.watch-btn{right:5%}.icon-link img{width:6rem}}