@font-face {
  font-family: seb;
  src: url(./sf-pro-text_regular.woff2);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: seb;
}
html,body{
    width: 100%;
    height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background: #fefeff;
}
.header{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    height: 45px;
    justify-content: center;
    align-items: center;
    gap: 2.6vw;
    background-color: #fdfcffd0;
    backdrop-filter: blur(10px);
}
.header>p{
    font-size: 12px;
    color: #000000cd;
}
.header >p:hover{
    cursor: pointer;
    color: black;
}
.header >p >i{
    font-size: 18px;
}
.section-01{
    margin-top: 43px;
    width: 100%;
    height: 78%;
    background-image: url("https://www.apple.com/v/home/ch/images/heroes/iphone-17-pro/hero_iphone_17_pro__bknyzxfk2agi_large.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.title{
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 7.5vh;
}
.title > h1{
    font-size: 3.4vw;
}
.title > p{
    font-size: 1.8vw;
    padding-top: 0.5vh;
    padding-bottom: 2.3vh;
}
.link{
    display: flex;
    gap: 20px;
}
.link > button{
    display: flex;
    justify-content: center;
    padding: 10px 17px;
    border-radius: 50px;
    border: none;
    font-size: 1.2vw;
    cursor: pointer;
}
.link > .btn-01{
    color: #e1effc;
    background-color: #0070E2;
}
.link > .btn-02 {
  background: transparent;
  border: 1.5px solid #0070e2;
  color: #0070e2;
}
.link > .btn-02:hover{
    background-color:#0070e2;
    color: white;
}
.section-02{
    background-image: url("https://www.apple.com/v/home/ch/images/heroes/iphone-air/hero_iphone_air__0gxyavihpiqu_large.jpg");
    margin-top: 12px;
}
.title-01{
    color: black;
    text-align: center;
}
.section-03{
    height: 78%;
    padding: 12px;
    width: 100%;
}
.section-03 > .div-box{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.div-box > div{
    width: 50%;
    height: 100%;
}
.div-box01 > .image01{
   background-image: url("https://www.apple.com/v/home/ch/images/promos/iphone-17/promo_iphone_17__bhofuohbsu3m_large.jpg");
   background-size: cover;
   background-position: center;
}
.div-box > .title{
    justify-content: flex-start;
    color: black;
    padding-top: 5vh;
    h1{
        font-size: 2.5vw;
    }
    p{
        font-size: 1.3vw;
    }
    .link{
        gap: 15px;
    }
    .link > button{
        padding: 8px 15px;
        font-size: 1vw;
    }
}
.div-box01 > .image02{
    background: url("https://www.apple.com/v/home/ch/images/promos/airpods-pro-3/promo_airpodspro_3__f6xmza7bglei_large.jpg");
    background-position: center;
    background-size: cover;
    p{
        text-align: center;
    }
}
.div-box02 > .image01{
    background: url("https://www.apple.com/in/home/images/promos/apple-watch-series-11/promo_apple_watch_series_11__b63hxviqvonm_large.jpg");
    background-position: center;
    background-size: cover;
    h1{
        color:#1c1c1fe4 ;
        font-size: 2vw;
        text-shadow: 0px 0px 3px #1c1c1f7f;
    }
    i{
        font-size: 1.8vw;
    }
    span{
       font-weight: 100; 
    }
}
.div-box02 > .image02{
    background: url("https://www.apple.com/in/home/images/promos/apple-watch-se-3/promo_apple_watch_se_3__fz5y29qx5mmy_large.jpg");
    background-position: center;
    background-size: cover;
    justify-content: flex-end;
    padding-bottom: 5vh;
    color: black;
    h1{
        font-size: 2vw;
        color:#1c1c1fe4;
        text-shadow: 0px 0px 3px #1c1c1f7f;
    }
    i{
        font-size: 1.8vw;
    }
    span{
       font-weight: 100; 
    }
}
.div-box03 > .image01{
    background: url("https://www.apple.com/in/home/images/promos/apple-watch-ultra-3/promo_apple_watch_ultra3__bwvslhbxx99e_large.jpg");
    background-position: center;
    background-size: cover;
    color: white;
    h1{
        font-size: 2vw;
        text-shadow: 0px 0px 3px white;
    }
    i{
        font-size: 1.8vw;
    }
    span{
       font-weight: 100; 
    }
}
.div-box03 > .image02{
    background: url("https://www.apple.com/v/home/ch/images/promos/iphone-tradein/promo_iphone_tradein__bugw15ka691e_large.jpg");
    background-position: center;
    background-size: cover;
    text-align: center;
    h1{
        color: #1c1c1fe4;
        font-size: 2.2vw;
        text-shadow: 0px 0px 3px #1c1c1f7f;;
    }
    i{
        font-size: 2vw;
    }
}