* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'ip';
}

html,
body {
    height: 100%;
    width: 100%;
}

@font-face {
    font-family: 'ip';
    src: url(./sf-pro-text_regular.woff2);
}

.main {
    height: 100%;
    width: 100%;
    background-color: black;
}

.nav {
    height: 48px;
    width: 100%;
    background-color: rgb(32, 32, 32);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    color: #a19b9b;
    font-size: 15px;

}

.nav h4 {
    font-weight: 400;
    font-family: ip;
    color: #C5C5C6;
}


.center {
    color: white;
    margin: 10px;
    text-align: center;
    margin-top: 50px;
    height: 84%;
    width: 100%;
    background-image: url(https://www.apple.com/v/home/ch/images/heroes/iphone-17-pro/hero_iphone_17_pro__bknyzxfk2agi_medium.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
}

.center h1 {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 10px;
}

.center h3 {
    font-size: 30px;
    font-weight: 400;
    color: #F5F5F7;
    margin-bottom: 20px;
}

.button {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    /* background-color: red;  */
    /* margin-right: 60px; */
}

.btn1 {
    padding: 11px 21px;
    border: none;
    font-weight: 400;
    border-radius: 9999px;
    background-color: #0077ED;
    color: white;
    font-size: 17px;
    /* align-items: center; */
}



.btn2 {
    padding: 11px 21px;
    border: 1px solid #0077ED;
    font-weight: 400;
    border-radius: 9999px;
    background-color: black;
    color: #0077ED;
    font-size: 17px;
    /* align-items: center; */
}

.btn2:hover {
    background: #005bb5;
    color: white;
    transition: 0.3s;
    delay: 0.1s;
    outline: none;
}

.space {
    height: 20px;
    width: 100%;
    background-color: white;
}

.content1 {
    height: 600px;
    width: 100%;
    background-color: #F5F5F7;
    padding: 50px;
    text-align: center;
    background-image: url(https://www.apple.com/v/home/ch/images/heroes/iphone-air/hero_iphone_air__0gxyavihpiqu_medium.jpg);
    background-position: center;
    background-size: cover;
}

.content1 h1 {
    font-size: 55px;
    font-weight: 600;
    margin-bottom: 10px;
}

.content1 h3 {
    font-size: 30px;
    font-weight: 300;
    color: black;
    /* background-color: red; */
    margin-bottom: 20px;
}

.btn3 {
    padding: 11px 21px;
    border: 1px solid #0077ED;
    font-weight: 400;
    border-radius: 9999px;
    background-color: white;
    color: #0077ED;
    font-size: 17px;
    /* align-items: center; */
}

.content2 {
    height: 650px;
    width: 100%;
    background-color: #F5F5F7;
    padding: 50px;
    text-align: center;
    background-image: url(https://www.apple.com/v/home/ch/images/heroes/iphone-17/hero_iphone_17__c5vvimu9a20y_medium.jpg);
    background-position: center;
    background-size: cover;
}

.content2 h1 {
    font-size: 55px;
    font-weight: 600;
    margin-bottom: 10px;
}

.content2 h3 {
    font-size: 30px;
    font-weight: 300;
    color: black;
    /* background-color: red; */
    margin-bottom: 20px;
}

.btn3 {
    padding: 11px 21px;
    border: 1px solid #0077ED;
    font-weight: 400;
    border-radius: 9999px;
    background-color: white;
    color: #0077ED;
    font-size: 17px;
    /* align-items: center; */
}

.left {
    height: 500px;
    width: 650px;
    /* background-color: #F5F5F7; */
    background-color:#F5F5F7;
    margin: 0px 20px;
    flex: display;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-image: url(https://www.apple.com/v/home/ch/images/promos/apple-watch-series-11/promo_apple_watch_series_11__b63hxviqvonm_medium.jpg);
    background-position: center;
    background-size: cover;
}

.left h1{
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
    
}

.left h1 span{
    font-weight: 600;
}
.left h3{
    text-align: center;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 10px;
}


.right{
    height: 500px;
    width: 650px;
    /* background-color: #F5F5F7; */
    background-color:#F5F5F7;
    margin: 0px 20px;
    flex: display;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-image: url(https://www.apple.com/v/home/ch/images/promos/airpods-pro-3/promo_airpodspro_3__f6xmza7bglei_medium.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}

#left{
     height: 500px;
    width: 650px;
    /* background-color: #F5F5F7; */
    background-color:#F5F5F7;
    margin: 0px 20px;
    flex: display;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-image: url(https://www.apple.com/v/home/ch/images/promos/macbook-air/promo_macbook_air__fqowrtnxewqe_medium.jpg);
    background-position: center;
    background-size: cover;

}

#rgt{
    height: 500px;
    width: 650px;
    /* background-color: #F5F5F7; */
    background-color:#F5F5F7;
    margin: 0px 20px;
    flex: display;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-image: url(https://www.apple.com/v/home/ch/images/promos/ipad-air/promo_ipad_air_avail__6i02t7nujr62_medium.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}
#lft{
    height: 500px;
    width: 650px;
    /* background-color: #F5F5F7; */
    background-color:#F5F5F7;
    margin: 0px 20px;
    flex: display;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-image: url(https://www.apple.com/v/home/ch/images/promos/iphone-tradein/promo_iphone_tradein__bugw15ka691e_medium.jpg);
    background-position: center;
    background-size: cover;
}

#right{
    height: 500px;
    width: 650px;
    /* background-color: #F5F5F7; */
    background-color:#F5F5F7;
    margin: 0px 20px;
    flex: display;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-image: url(https://www.apple.com/v/home/ch/images/promos/apple-card/promo_apple_card__5cm7draujpey_medium.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}


.right h1{
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
    
}

.right h1 span{
    font-weight: 600;
}
.right h3{
    text-align: center;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 20px;
}

.content3{
    height: fit-content;
    width: 100%;
    /* background-color: red; */
    position: relative;
}