@font-face {
    font-family: Apple;
    src: url("Fonts/sf-pro-display_regular.ttf");
}

*{
    padding: 0;
    margin: 0;
    font-family:Apple;
    /* background-color: black; */
}

#main{
    position: relative;
    overflow: hidden;
    height: 579vh;
}

#page1{
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: rgb(255, 255, 255);
    /* background-color: white; */
}

#page2{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: white;
}

/* navbar1 */
nav{
    height: 40px;
    background-color: rgb(21, 20, 20);
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
    position: fixed;
    z-index: 99;
    padding-left: 14px;
}

/* .nav-logo img{
    height: 44px;
    width: 44px;
} */

.nav-items a{
    text-decoration: none;
    padding: 8px;
    color: rgba(255, 255, 255, 0.241);
}

.nav-items a:hover{
    color: white;
}

.nav-items i{
    padding: 8px;
    color: rgba(255, 255, 255, 0.241);
    cursor: pointer;
}

.nav-items i:hover{
    color: white;
}

/* navbar1 end */

/* nav2 */
.nav2{
    color: white;
    background-color: #1d1d1f;
    height: 45px;
    margin: auto;
    width: 100vw;
    padding-left: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding-top: 45px;
}

.nav2 a{
    color: #2997ff;
    padding: 5px;
    text-decoration: none;
}
/* nav2 end */

.subnav{
    height: 100vh;
    width: 100vw;
    display: none;
}

/* subnav-menu */



/* end */
/* hero-section img */
.hero-section{
    height: 80vh;
    width: 100vw;
    color: rgb(255, 255, 255);
    /* display: flex;
    justify-content: center;
    flex-direction: column; */
    /* background-color:black; */
    background-image: url("Assests/iphone15black.jpg");
    background-position: center;
    overflow: hidden;
    position: relative;

}

.hero{
    background-size: cover;
}

.hero-section-img{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .hero-section-img img{
    height: 365px;
    width: 1520px;
} */

.hero-section-p{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: absolute;
    top: 11%;
    gap: 10px;
}

.hero-section-p h2{
    font-size: 4vw;
}

.hero-section-p h3{
    font-size: 2vw;
}

.hero-section2{
    margin: 5px;
    background-image: url("Assests/iphone15white.jpg");
}
.hero-section3{
    padding-top: 3px;
    background-image: url("Assests/applewatchblack.jpg");
}

.text1{
    color: black;
}

.links{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 21px;
}

.links2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    line-height: 1px;
}

.links a{
    color: #2997ff;
    text-decoration: none;
}

.links a:hover{
    text-decoration: underline;
}

.hero-section4{
    width: 100%;
    display: flex;
    /* padding-top: 3px; */
   
}

.section4-1{
    width: 50%;
    background-image: url("Assests/applewatchseries.jpg");
    background-repeat: no-repeat;
    margin: 3px;
}

.section4-2{
    background-image: url("Assests/card1.jpg");
    width: 50%;
    margin: 3px;
}
.text3{
    color: black;
}

.section5-1{
    width: 50%;
    background-image: url("Assests/mac1.jpg");
    background-repeat: no-repeat;
    margin: 3px;
}

.section5-2{
    width: 50%;
    background-image: url("Assests/ipad1.jpg");
}

.text4{
    color: black;
}

.text4 p{
    font-size: 20px;
    line-height: 3px;
}

.section6-1{
    width: 50%;
    background-image: url("Assests/card4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 3px;
}

.section6-2{
    width: 50%;
    background-image: url("Assests/card5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.text5{
    color: black;
    font-size: 20px;
}

.text6{
    color: white;
    font-size: 20px;
}

/* sliding window css */
.slider{
    margin: 3px;
    background-color: #ffffff;
    height: 80vh;
    width: 100%;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #b42929;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide {
    width: 60%;
}

.swiper-button-next{
    padding-right: 30px;
}

.s1{
    background-image: url("Assests/s1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.s2{
    background-image: url("Assests/s2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.s3{
    background-image: url("Assests/s3.jpg");
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
}
.s4{
    background-image: url("Assests/s4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.s5{
    background-image: url("Assests/s5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}





/* End */


/* footer */
footer{
    /* align-items: center; */
    height: 967px;
    /* width: 100vw; */
    background-color: #e8e8ed;
    /* opacity: 0.36; */
    color: #9d9da4;
}

.footer1{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    margin: 0px 250px 0px 220px;
    
}

.footer1 a{
    color: #6b6b71;
}

.footer1 .text1{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer1 .text2{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer1 .text3{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer1 .text4{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer3{
    border-top: 1px solid rgba(0, 0, 0, 0.222);
    /* display: flex; */
    /* justify-content: center; */
    padding-left: 30px;
    align-items: center;
    gap: 30px;
    margin: 30px 250px 0px 250px;
}
.panel1{
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel2{
    font-size: 14px;
    display: flex;
    justify-content: center;
}

.panel3{
    display: flex;
    justify-content: end;
}

.panel2 li{
    list-style: none;
    padding: 6px;
    cursor: pointer;
}

.panel2 li:hover{
    text-decoration: underline;
    padding: 6px;
    cursor: pointer;
}

.panel3 li{
    list-style: none;
    padding-left: 100px;
    cursor: pointer;
}

.footer2{
    line-height: 189%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 250px 0px 250px;
    cursor: default;
}

.footer2 a:hover{
    text-decoration: underline;
}

.footer2 a{
    text-decoration: none;
    color: #9d9da4;
}

.sub-footer1{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.sub-footer2{
    position: relative;
    top: -15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sub-footer3{
    position: relative;
    top: -48px;
    display: flex;
    flex-direction: column;
}

.sub-footer4{
    position: relative;
    top: -50px;
    display: flex;
    flex-direction: column;
}

.sub-footer5{
    position: relative;
    top: 7px;
    display: flex;
    flex-direction: column;
}


/* footer end */

.ri-menu-line{
    display: none;
}

/* subnav */

.nav3{
    /* background-color: #2997ff; */
    height: 100vh;
    position: absolute;
    top: -100%;
    width: 100%;
    z-index: 99;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
    pointer-events:none;
}

.nav-top{
    height: 50vh;
    background-color: rgb(21, 20, 20);
}

.nav-bottom{
    height: 45vh;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.185);
    backdrop-filter: blur( 8px );
    -webkit-backdrop-filter: blur( 4px );
}

.nav-top-store{
    display: flex;
    /* flex-direction: column; */
    padding: 2vw 20vw;
    gap: 3vw;

}

.nav-top-store a{
    
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.nav-top-store h4{
    color: rgba(255, 255, 255, 0.241);
    font-weight: 300;
    cursor: default;
}

.store1{
    line-height: 4vh;
    display: flex;
    flex-direction: column;
    font-weight: 800;
    font-size: 3vh;
}

.store2{
    line-height: 3vh;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

.store3{
    line-height: 3vh;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

@media (max-width:500px) {
    #main{
        height: 773vh;
    }
    nav{
        position: relative;
        justify-content: space-between;
    }

    .nav-items i{
        color: white;
    }

    .ri-apple-fill:before{
        padding-left: 11px;
        padding-right: 237px;
    }

    .ri-menu-line{
        display: initial;
    }
    .nav-items a{
        display: none;
    }
    .nav2{
        display: none;
    }

    .subnav{
        padding: 10vw 10vw;
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        position: absolute;
        top: -109%;
        z-index: 99;
        background-color: rgb(21, 20, 20);
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
        /* position: fixed; */
    }
    
    .subnav i{
        position: absolute;
        top: 1%;
        /* left: 70%; */
        right: 22%;
        font-size: 4vh;
        color: white;
    }
    .subnav a{
        text-decoration: none;
        color: white;
        font-size: 3vh;
        font-weight: 600;
    }

    .hero-section2{
        background-image: url("Assests/iphone15white.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text1 h2{
        font-size: 9vh;
    }
    .text1 h3{
        font-size: 2vh;
    }
    .links{
        font-size: 3vh;
    }

    .hero{
        background-image: url("Assests/iphon15resp.jpg");
    }
    .hero-p h2{
        font-size: 5vh;
    }
    .hero-p h3{
        font-size: 2vh;
        font-weight: 400;
    }
    .hero-section3{
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
    }

    .text0 h3{
        font-size: 3vh;
    }

    .hero-section4{
        justify-content: center;
        align-items: center;
        background-size: contain;
        flex-direction: column;
        /* height: 100%; */
        height: 150vh;
    }
    .section5-1{
        background-image: url("Assests/card2.jpg");
    }

    .text1 h3{
        font-weight: 400;
    }

    .text1 h2{
        font-size: 6vh;
    }

    .text3 h3{
        font-size: 3vh;
    }
    .text4 h3{
        font-size: 5vh;
    }

    .text6 h3{
        font-size: 6vh;
    }
    .text5 .links a{
        font-size: 2.5vh;
    }
   .s1{
    background-image: url("Assests/resp1.jpg");
   }
   .s2{
    background-image: url("Assests/resp2.jpg");
   }
   .s3{
    background-image: url("Assests/resp3.jpg");
   }
   .s4{
    background-image: url("Assests/resp4.jpg");
   }
   .s5{
    background-image: url("Assests/resp5.jpg");
   }

   footer{
    width: 414px;
    height: 1450px;
   }
   .footer1{
    margin: 0;
    
   }

   .footer3{
    flex-direction: column;
    align-items: end;
    margin: 0;
    font-size: 17px;
    padding-right: 147px;
   }

   .panel1{
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 10px;
    position: relative;
    right: -19%;
   }
   
   .panel2{
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-left: 117px;
    right: 54%;
    padding-bottom: 55px;
    }
   .panel3{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 55vw;
    font-size: 14px;
   }

   .panel3 a{
    color: #2997ff;
   }

   .nav3{
    display: none;
   }

   .footer2{
    position: relative;
    right: 53%;
    bottom: 4%;
    display: block;
   }

   .sub-footer1{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer2{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer3{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer4{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer5{
    width: 140px;
    position: absolute;
    line-height: 22px;
    padding-bottom: 28px;
    top: 78%;
   }
   .footer2 a{
    display: none;
   }

}