@font-face {
    font-family: apple;
    src: url(/font/sf-pro-text_regular.woff2);
}
@font-face {
    font-family: apple pro;
    src: url(./font/sf-pro-text_regular.woff2);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    width: 100%;
    height: 100%;
}
#main{
    width: 100%;
    height: 100%;
    background-color: black;
}
#nav{
    position: fixed;
    top: 0;
    padding: 20px 40px;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap:40px;
    border-radius:0 0 25px 25px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#nav a{
    text-decoration: none;
    color:black;
    font-family: apple;
    font-size: 12px;
}
#nav i{
    font-size: 20px;
}
#sub-one{
    width: 100%;
    height: 90%;
    padding-top: 80px;
    background-image: url(./images/hero_iphone_17_pro__bknyzxfk2agi_large.jpg);
    background-position: center;
    background-size: cover;
    background-color: black;
    text-align: center;
}
#sub-one h1,
#sub-one h4{
    color:white;
    font-family: apple pro;
}
#sub-one h1{
    font-size: 56px;
    font-weight: 600;
}
#sub-one h4{
    font-size: 28px;
    font-weight: 400;
}
#buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
    
}
#buttons button{
    color:white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 17px;
    z-index: 1;
}
#buttons button:nth-of-type(1){
    background-color:#0071e3;
    border:none;
}
#buttons button:nth-of-type(2){
    background-color:transparent;
    border: 1px solid #0071e3;
    color: #0071e3;
}
#buttons button:nth-of-type(2):hover{
    background-color: #0071e3;
    color: white;

}
#sub-second{
    width: 100%;
    height: 80%;
    padding-top: 50px;
    text-align: center;
    background-image: url(./images/hero_iphone_air__0gxyavihpiqu_large.jpg);
    background-position: center;
    background-size: cover;
    
}
#sub-second h1,
#sub-second h4{
    color: black;
    font-family: apple pro;
}
#sub-second h1{
    font-size: 56px;
    font-weight: 600;
}
#sub-second h4{
    font-size: 28px;
    font-weight: 400;
}
#grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}
#top-left{
    background-image: url(./images/promo_iphone_17__bhofuohbsu3m_large.jpg);
    background-position: center;
    background-size: cover;
    height: 600px;
    padding-top: 53px;
}
#top-left h1,
#top-left h4{
    color:black;
    font-family: apple pro;
    text-align: center;
}
#top-left h1{
    font-size: 40px;
    font-weight: 600;
}
#top-left h4{
    font-size: 21px;
    font-weight: 400;
}
#top-right{
    background-image: url(./images/promo_airpodspro_3__f6xmza7bglei_large.jpg);
    background-position: center;
    background-size: cover;
    height: 600px;
    padding-top: 53px;
}
#top-right h1,
#top-right h4{
    color:black;
    font-family: apple pro;
    text-align: center;
}
#top-right h1{
    font-size: 40px;
    font-weight: 600;
}
#top-right h4{
    font-size: 21px;
    font-weight: 400;
}
#center-left{
    background-image: url(./images/promo_apple_watch_series_11__b63hxviqvonm_large.jpg);
    background-position: center;
    background-size: cover;
    height: 600px;
    padding-top: 53px;
}
#center-left h1,
#center-left h4{
    color:black;
    font-family: apple pro;
    text-align: center;
}
#center-left h1{
    font-size: 40px;
    font-weight: 600;
}
#center-left h4{
    font-size: 21px;
    font-weight: 400;
}
#center-right{
    background-image: url(./images/promo_apple_watch_se_3__fz5y29qx5mmy_large.jpg);
    background-position: center;
    background-size: cover;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
#center-right h1,
#center-right h4{
    color:black;
    font-family: apple pro;
    text-align: center;
}
#center-right h1{
    margin-top: -30px;
    font-size: 40px;
    font-weight: 600;
}
#center-right h4{
    font-size: 21px;
    font-weight: 400;
}
#bottom-left{
    background-image: url(./images/promo_apple_watch_ultra3__bwvslhbxx99e_large.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 53px;
    height: 600px;
}
#bottom-left h1,
#bottom-left h4{
    color:white;
    font-family: apple pro;
    text-align: center;
}
#bottom-left h1{
    font-size: 40px;
    font-weight: 600;
}
#bottom-left h4{
    font-size: 21px;
    font-weight: 400;
}
#bottom-right{
    background-image: url(./images/promo_iphone_tradein__bugw15ka691e_large.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 53px;
    height: 600px;
}
#bottom-right h1,
#bottom-right h4{
    color:black;
    font-family: apple pro;
    text-align: center;
}
#bottom-right h1{
    font-size: 40px;
    font-weight: 600;
}
#bottom-right h4{
    font-size: 21px;
    font-weight: 400;
}