mobile.css

html {
    font-size: 16px;
}

/* Navbar */

#navbar {
    z-index: 100;
}

.apple {
    margin-right: 200px;
    margin-left: -20px;
}

.search {
    margin-left: -10px;
    margin-right: -30px;
}

.bag {
    margin-top: -3px;
    margin-left: -10px;
    margin-right: -40px;
}
/* Hiding text in navbar and show icons  */

@media (max-width: 500px) {
    #navbar ul li:not(.nav-icon,.apple-logo-icon) a {
        display: none; 
    }
}

/* Title adjustments */

.main-title {
    font-size: 40px; 
    padding-top: 40px; 
}

.sub-title {
    font-size: 20px; 
}

.pre-order-big,
.pre-order-big-line-2,
.pre-order-small {
    font-size: 16px; 
    margin-top: 8px; 
}

/* Reduce spacing */

.space {
    height: 20px; 
}

/* Adjust the width of containers for mobile */

.container-for-2-section {
    flex-direction: column; 
    align-items: center;
}

/* Editing Sections */

#iphone-15-pro {
    height: 600px;
    width: 100%;
}

.bg-image-iphone-15-pro {
    background-size: 2000px;
    background-position-y: 60px;
}

#carbon-neutral {
    margin-top: 20px;
    width: 100%;
}

#save-for-college {
    margin-top: 20px;
    width: 100%;
}

#apple-card {
    width: 100%;
}

#save-for-college .second-line {
    margin-top: -41px;
}

#trade-in {
    margin-top: 20px;
    width: 100%;
}

#apple-watch-ultra-2 {
    width: 100%;
}

#apple-watch-se {
    width: 100%;
}

#creator {
    width: 100%;
    height: 650px;
}

/* Small main title */

.small-main-title {
    font-size: 30px; 
    padding-top: 40px; 
}

/* Small subtitle */

.small-sub-title {
    font-size: 16px; 
}

/* Footer */

#footer {
    height: auto; /* Allow the footer to expand based on content */
}

#footer p {
    font-size: 14px; /* Reduce the font size for mobile */
    width: auto; /* Allow text to flow naturally on mobile */
    padding-right: 30px;
    padding-left: 30px;
}

#footer hr {
    line-height: 1px;
    margin-right: 30px;
    margin-left: 30px;
}

@media (max-width: 500px) {
    #footer-categories {
        display: none; 
    }
}

#footer-container {
    height: -500px;
}