body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

.header-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 15px;
    padding-right: 150px;
    padding-left: 150px;
    list-style: none;
    font-size: 12px;
}

.apple-logo{
    width: 16px;
}

.search-icon{
    width: 16px;
}

.shop-bag-icon{
    width: 16px;
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    color: #1d1d1f;
    width: 100%;
    height: 48px; /* Apple's standard navbar height */
    /* Apple's signature frosted glass effect */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    backdrop-filter: blur(20px);                 /* Blurs content behind it */
    /* Optional subtle bottom border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); 
    z-index: 1000; /* Keeps navbar on top of everything */
}

a{
    text-decoration: none;
}
.shop-text{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-top: 45px;
    padding: 12px 0;
}
.hero-section{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 35px;
    background-image: url("/images/iphone-duo-image.jpg");
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
    min-height: 650px;
}
.hero-title{
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: 0;
    margin-bottom: 0;
}
.hero-subtitle{
    font-size: 28px;
    font-weight: 400;
    color: black; /* Apple's muted grey subtitle color */
    margin-top: 0;
    margin-bottom: 23px;
}
.btn-section{
    display: flex;
    margin-bottom: 45px;
}
.learn-btn{
    background-color: #0066cc;
    border: none;
    color: #F5F5F7;
    padding: 11px 21px 11px 21px;
    border-radius: 20px;
    font-size: 17px;
    text-decoration: none;
    transition: background-color 0.2s;
    border-radius: 19px;
    min-width: 735px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin-right: 20px;

}
.lern-btn:hover{
    background-color: #0077ed;
}
.buy-btn{
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
    padding: 8px 15px;
    border-radius: 26px;
    text-decoration: none;
    transition: all 0.2s;

    font-size: 17px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.buy-btn:hover{
    background-color: #0066cc;
    color: #ffffff;
}
.hero-image-section{
    width: 100%;
    max-width: 980px; /* Keeps image controlled on large monitors */
    padding: 0 20px;
}
.hero-image{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image block horizontally */
}


.hero2-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 35px;
    background-image: url("/images/second-image.jpg");
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
    min-height: 650px;
    margin-top: 13px;
}
.apple-logo2{
    width: 40px;
}
.hero2-title{
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: 0;
    margin-bottom: 0;

}
.hero2-subtitle{
    font-size: 28px;
    font-weight: 400;
    color: black; 
    margin-top: 0;
    margin-bottom:8px;

}
.hero2-subtitle2{
    font-size: 19px;
    margin-top: 0;
    margin-bottom: 25px;
    color: #6e6e73;
    line-height: 1.2105263158;
    font-weight: 400;
    letter-spacing: .012em;
    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}


.pre-order-btn{
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
    padding: 8px 15px;
    border-radius: 26px;
    text-decoration: none;
    transition: all 0.2s;

    font-size: 17px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.pre-order-btn:hover{
    background-color: #0066cc;
    color: #ffffff;
}

.hero3-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 35px;
    background-image: url("/images/third-image.jpg");
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
    min-height: 650px;
    margin-top: 13px;
}

.hero3-content{
    margin-top: 386px;
}
.hero3-subtitle{
    font-size: 28px;
    font-weight: 400;
    color: black; 
    margin-top: 0;
    margin-bottom:20px;
}
.shop-btn{
    background-color: #0066cc;
    border: none;
    color: #F5F5F7;
    padding: 11px 21px 11px 21px;
    border-radius: 20px;
    font-size: 17px;
    text-decoration: none;
    transition: background-color 0.2s;
    border-radius: 19px;
    min-width: 735px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin-right: 20px;
    
}
.promo-section{
    margin-top: 15px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    height: auto;
    text-align: center;

}
.product1-section{
    background-image: url("/images/apple-product1.jpg");
    width: 610px;
    height: 650px;
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
}
.product2-section{
    background-image: url("/images/apple-product2.jpg");
    width: 610px;
    height: 650px;
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-title{
    color: white;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: 50px;
    margin-bottom: 0;
}
.product-subtitle{
    color: white;
    font-weight: 400;
    font-size: 23px;
    margin-top: 0;
    margin-bottom: 21px;
}
.product-learn-btn{
    background-color: #0066cc;
    border: none;
    color: #F5F5F7;
    padding: 11px 21px 11px 21px;
    border-radius: 20px;
    font-size: 17px;
    text-decoration: none;
    transition: background-color 0.2s;
    border-radius: 19px;
    min-width: 735px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin-right: 10px;
}
.product-lern-btn:hover{
    background-color: #0077ed;
}
.product-buy-btn{
     background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
    padding: 8px 15px;
    border-radius: 26px;
    text-decoration: none;
    transition: all 0.2s;

    font-size: 17px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.product-buy-btn:hover{
    background-color: #0066cc;
    color: #ffffff;
}
span{
    font-weight: 300;
}
.product2-subtitle{
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    width: 300px;
    margin-top: 400px;
    margin-bottom: 30px;
}
.product3-section{
    background-image: url("/images/apple-product3.jpg");
    width: 610px;
    height: 650px;
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
}
.product4-section{
    background-image: url("/images/apple-product4.jpg");
    width: 610px;
    height: 650px;
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
}
.promo-section2{
    margin-top: 15px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    height: auto;
    text-align: center;
}
.product3-section{
    margin-top: 12px;
}
.product4-section{
    margin-top: 12px;
}
.product-title-black{
    color: black;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: 50px;
    margin-bottom: 0;
}
.product-subtitle-black{
    color: black;
    font-weight: 400;
    font-size: 23px;
    margin-top: 0;
    margin-bottom: 21px;
}
.ipad-air-name{
    width: 135px;
    margin-top: 60px;
}

.product5-section{
    background-image: url("/images/apple-product5.jpg");
    width: 610px;
    height: 650px;
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product6-section{
    background-image: url("/images/apple-product6.jpg");
    width: 610px;
    height: 650px;
    background-size: cover;       /* Stretches the image to completely fill the section */
    background-position: center;  /* Centers the image inside the box */
    background-repeat: no-repeat;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-subtitle-black-6{
    color: black;
    font-weight: 400;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 21px;
    width: 190px;
}
.product-subtitle-black-5{
    color: black;
    font-weight: 400;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 21px;
    width: 545px;
}









.apple-footer {
    position: relative;
    background-color: #f5f5f7;
    color: #6e6e73;
    font-size: 12px;
    line-height: 1.33337;
    font-weight: 400;
    padding: 0 16px 20px 16px;
    display: flex;
    justify-content: center;
    z-index: 2; /* Sits above background elements */
}

.footer-container {
    max-width: 980px;
    width: 100%;
}

/* Disclaimer Text */
.footer-notes {
    padding: 17px 0 11px 0;
    border-bottom: 1px solid #d2d2d7;
}

/* Multi-Column Directory Grid */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.footer-col h3 {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.col-space {
    margin-top: 24px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #515154;
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

/* Retail Store Callout Text */
.footer-shop-text {
    padding: 17px 0;
    border-top: 1px solid #d2d2d7;
    border-bottom: 1px solid #d2d2d7;
    margin-bottom: 12px;
}

.footer-shop-text a {
    color: #0066cc;
    text-decoration: none;
}

/* Bottom Legal & Copyright Bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
    gap: 10px;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.legal-links a,
.footer-region a {
    color: #424245;
    text-decoration: none;
}

.legal-links a:not(:last-child):after {
    content: "|";
    margin-left: 12px;
    color: #d2d2d7;
}

.footer-region a {
    color: #1d1d1f;
}








/* ==========================================
   Responsive Mobile Adjustments (Media Query)
   ========================================== */
@media (max-width: 768px) {
    /* Adjust header padding for smaller screens */
    .header-section {
        padding-left: 15px;
        padding-right: 15px;
        overflow-x: auto; /* Allows scrolling navbar items if needed */
    }

    /* Stack product cards vertically on mobile */
    .promo-section {
        grid-template-columns: 1fr;
        height: auto;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Force product sections to fit the phone width */
    .product1-section,
    .product2-section,
    .product3-section,
    .product4-section,
    .product5-section,
    .product6-section {
        width: 100% !important;
        height: 550px; /* Adjust height slightly for smaller screens if desired */
    }

    /* Adjust button min-width so it doesn't overflow mobile screens */
    .learn-btn,
    .product-learn-btn,
    .shop-btn {
        min-width: unset;
        width: 90%;
        max-width: 320px;
        margin-right: 0;
    }
}