@font-face {
    font-family: Apple;
    src: url("Fonts/sf-pro-display_regular.ttf");
}

*{
    padding: 0;
    margin: 0;
    font-family:Apple;
    /* background-color: black; */
}
#root, html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

#main {
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

/* #main{
    position: relative;
    overflow: hidden;
    height: 579vh;
} */

#page1{
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-color: rgb(0, 0, 0);
}

#page2{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: rgb(0, 0, 0);
}

/* navbar1 */
nav{
    /* centered, floating nav with top spacing */
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 96%);
    background-color: #000000; /* grey interior */
    color: #ffffff;
    display: flex;  
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px; /* vertical and horizontal padding */
    border-radius: 10px;
    z-index: 120;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* .nav-logo img{
    height: 44px;
    width: 44px;
} */

.nav-items{
    display:flex;
    gap:18px;
    align-items:center;
}
.nav-items a{
    text-decoration: none;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.92);
    border-radius:6px;
}

.nav-items a:hover{
    color: white;
}

.nav-items i{
    padding: 8px;
    color: #fff; /* make nav icons white to match nav text */
    cursor: pointer;
}

.nav-items i:hover{
    color: white;
}

/* navbar1 end */

/* nav2 (base) - minimal reset; visual styling handled in .nav .nav2 below */
.nav2{
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav2 a{color: #2997ff; text-decoration: none;}
/* nav2 end */

.subnav{
    height: 100vh;
    width: 100vw;
    display: none;
}

/* subnav-menu */



/* end */
/* hero-section img */
.hero-section{
    height: 80vh;
    width: 100vw;
    color: rgb(255, 255, 255);
    /* display: flex;
    justify-content: center;
    flex-direction: column; */
    /* background-color:black; */
    background-image: url("Assests/iphone15black.jpg");
    background-position: center;
    overflow: hidden;
    position: relative;

}

.hero-sections-special{
    width: 100%;
    color: #ffffff;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* default: keep content centered for shop layout */
    font-size: 20px;
    line-height: 1.25;
}

/* Two-up gallery layout: show two products per row on wider screens */
.gallery.two-up{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    align-items: start;
    padding: 12px;
}

.gallery.two-up .hero-sections-special{
    justify-content: stretch; /* let each card fill its grid cell */
    padding: 6px;
}

@media (max-width: 800px){
    .gallery.two-up{
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Resources-only: stack heading above gallery */
.resources-list .hero-sections-special{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 6px 18px 6px;
}

.hero{
    background-size: cover;
}

.hero-section-img{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .hero-section-img img{
    height: 365px;
    width: 1520px;
} */

.hero-section-p{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: absolute;
    top: 11%;
    gap: 10px;
}

.hero-section-p h2{
    font-size: 4vw;
}

.hero-section-p h3{
    font-size: 2vw;
}

.hero-section2{
    margin: 5px;
    background-image: url("Assests/iphone15white.jpg");
}
.hero-section3{
    padding-top: 3px;
    background-image: url("Assests/applewatchblack.jpg");
}

.text1{
    color: black;
}

.links{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 21px;
}

.links2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    line-height: 20px;
    font-size: 15px;
}

.links a{
    color: #2997ff;
    text-decoration: none;
}

.links a:hover{
    text-decoration: underline;
}

.hero-section4{
    width: 100%;
    display: flex;
    /* padding-top: 3px; */
   
}

.section4-1{
    width: 50%;
    background-image: url("Assests/applewatchseries.jpg");
    background-repeat: no-repeat;
    margin: 3px;
}

.section4-2{
    background-image: url("Assests/card1.jpg");
    width: 50%;
    margin: 3px;
}
.text3{
    color: black;
}

.section5-1{
    width: 50%;
    background-image: url("Assests/mac1.jpg");
    background-repeat: no-repeat;
    margin: 3px;
}

.section5-2{
    width: 50%;
    background-image: url("Assests/ipad1.jpg");
}

.text4{
    color: black;
}

.text4 p{
    font-size: 20px;
    line-height: 3px;
}

.section6-1{
    width: 50%;
    background-image: url("Assests/card4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 3px;
}

.section6-2{
    width: 50%;
    background-image: url("Assests/card5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.text5{
    color: black;
    font-size: 20px;
}

.text6{
    color: white;
    font-size: 20px;
}

/* sliding window css */
.slider{
    margin: 3px;
    background-color: #ffffff;
    height: 80vh;
    width: 100%;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #b42929;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide {
    width: 60%;
}

.swiper-button-next{
    padding-right: 30px;
}

.s1{
    background-image: url("Assests/s1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.s2{
    background-image: url("Assests/s2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.s3{
    background-image: url("Assests/s3.jpg");
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
}
.s4{
    background-image: url("Assests/s4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.s5{
    background-image: url("Assests/s5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}





/* End */


/* footer */
footer{
    /* align-items: center; */
    height: 967px;
    /* width: 100vw; */
    background-color: #e8e8ed;
    /* opacity: 0.36; */
    color: #9d9da4;
}

.footer1{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    margin: 0px 250px 0px 220px;
    
}

.footer1 a{
    color: #6b6b71;
}

.footer1 .text1{
    padding-bottom: 10px;
    color: #9d9da4;
}

/* Footer links (panel2) should be white with no underline */
.panel2 a, .panel2 a:link, .panel2 a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}
.panel2 a:hover, .panel2 a:active {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.9;
}

.footer1 .text2{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer1 .text3{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer1 .text4{
    padding-bottom: 10px;
    color: #9d9da4;
}

.footer3{
    border-top: 1px solid rgba(0, 0, 0, 0.222);
    /* display: flex; */
    /* justify-content: center; */
    padding-left: 30px;
    align-items: center;
    gap: 30px;
    margin: 30px 250px 0px 250px;
}
.panel1{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.panel2{
    font-size: 14px;
    display: flex;
    justify-content: center;
    color: #fff;
}

.panel3{
    display: flex;
    justify-content: end;
    color: #fff;
}

.panel2 li{
    list-style: none;
    padding: 6px;
    cursor: pointer;
}

.panel2 li:hover{
    text-decoration: underline;
    padding: 6px;
    cursor: pointer;
}

.panel3 li{
    list-style: none;
    padding-left: 100px;
    cursor: pointer;
}

.footer2{
    line-height: 189%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 250px 0px 250px;
    cursor: default;
}

.footer2 a:hover{
    text-decoration: underline;
}

.footer2 a{
    text-decoration: none;
    color: #9d9da4;
}

.sub-footer1{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.sub-footer2{
    position: relative;
    top: -15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sub-footer3{
    position: relative;
    top: -48px;
    display: flex;
    flex-direction: column;
}

.sub-footer4{
    position: relative;
    top: -50px;
    display: flex;
    flex-direction: column;
}

.sub-footer5{
    position: relative;
    top: 7px;
    display: flex;
    flex-direction: column;
}


/* footer end */

.ri-menu-line{
    display: none;
}

/* subnav */

.nav3{
    /* background-color: #2997ff; */
    height: 100vh;
    position: absolute;
    top: -100%;
    width: 100%;
    z-index: 99;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
    pointer-events:none;
}

.nav-top{
    height: 50vh;
    background-color: rgb(21, 20, 20);
}

.nav-bottom{
    height: 45vh;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.185);
    backdrop-filter: blur( 8px );
    -webkit-backdrop-filter: blur( 4px );
}

.nav-top-store{
    display: flex;
    /* flex-direction: column; */
    padding: 2vw 20vw;
    gap: 3vw;

}

.nav-top-store a{
    
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.nav-top-store h4{
    color: rgba(255, 255, 255, 0.241);
    font-weight: 300;
    cursor: default;
}

.store1{
    line-height: 4vh;
    display: flex;
    flex-direction: column;
    font-weight: 800;
    font-size: 3vh;
}

.store2{
    line-height: 3vh;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

.store3{
    line-height: 3vh;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

@media (max-width:500px) {
    /* Keep #main natural height on small screens so content scrolls normally */
    #main{
        height: auto;
        min-height: 100vh;
    }
    nav{
        position: center;
        justify-content: space-between;
        /* display:flex; */
    }

    .nav-items i{
        color: relative;
    }

    .ri-apple-fill:before{
        padding-left: 11px;
        padding-right: 237px;
    }

    .ri-menu-line{
        display: initial;
    }
    /* show nav links on small screens and stack them */
    /* .nav-items{
        display:flex;
        flex-direction:column;
        gap:6px;
        align-items:center;
        width:100%;
    }
    .nav-items a{
        display:inline-block;
        padding:8px 12px;
        width:100%;
        text-align:center; */
    }
    /* show the promo inside nav on very small screens as a block under nav items */
    .nav2{display:block}
 /* Possible value options for the property here:
       - display: flex | block | none | inline | grid | inline-block | contents | inherit | initial | unset;
       - position: static | relative | absolute | fixed | sticky | inherit | initial | unset;
       - background-color: any valid color value (e.g., #fff, rgb(0,0,0), transparent);
       - width/height: auto | px | % | vw | vh | em | rem | etc.;
       - justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
       - align-items: flex-start | flex-end | center | baseline | stretch;
       - font-size: px | em | rem | % | vw | vh;
       - color: any valid color value;
       - padding/margin: px | em | rem | % | auto;
    */
    .subnav{
        padding: 10vw 10vw;
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        position: absolute;
        top: -109%;
        z-index: 99;
        background-color: rgb(21, 20, 20);
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
        /* position: fixed; */
    }
    
    .subnav i{
        position: absolute;
        top: 1%;
        /* left: 70%; */
        right: 22%;
        font-size: 4vh;
        color: white;
    }
    .subnav a{
        text-decoration: none;
        color: white;
        font-size: 3vh;
        font-weight: 600;
    }

    .hero-section2{
        background-image: url("Assests/iphone15white.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text1 h2{
        font-size: 9vh;
    }
    .text1 h3{
        font-size: 2vh;
    }
    .links{
        font-size: 2vh;
    }

    .hero{
        background-image: url("Assests/iphon15resp.jpg");
    }
    .hero-p h2{
        font-size: 5vh;
    }
    .hero-p h3{
        font-size: 2vh;
        font-weight: 400;
    }
    .hero-section3{
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
    }

    .text0 h3{
        font-size: 3vh;
    }

    .hero-section4{
        justify-content: center;
        align-items: center;
        background-size: contain;
        flex-direction: column;
        min-height: 60vh;
    }
    .section5-1{
        background-image: url("Assests/card2.jpg");
    }

    .text1 h3{
        font-weight: 400;
    }

    .text1 h2{
        font-size: 6vh;
    }

    .text3 h3{
        font-size: 3vh;
    }
    .text4 h3{
        font-size: 5vh;
    }

    .text6 h3{
        font-size: 6vh;
    }
    .text5 .links a{
        font-size: 2.5vh;
    }
   .s1{
    background-image: url("Assests/resp1.jpg");
   }
   .s2{
    background-image: url("Assests/resp2.jpg");
   }
   .s3{
    background-image: url("Assests/resp3.jpg");
   }
   .s4{
    background-image: url("Assests/resp4.jpg");
   }
   .s5{
    background-image: url("Assests/resp5.jpg");
   }

   footer{
    width: 414px;
    height: 1450px;
   }
   .footer1{
    margin: 0;
    
   }

   .footer3{
    flex-direction: column;
    align-items: end;
    margin: 0;
    font-size: 17px;
    padding-right: 147px;
   }

   .panel1, .panel2, .panel3{
        margin: 16px 0 8px 0;
        padding: 0 8vw;
        font-size: 0.75rem;
        text-align: center;
    }
   
   /* .panel2{
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-left: 117px;
    /* right: 54%; */
    /* padding-bottom: 55px;
    } */
   /* .panel3{
    display: flex; */
    /* justify-content: center; */
    /* align-items: center;
    width: 55vw;
    font-size: 14px;
   } */

   .panel3 a{
    color: #2997ff;
   } */

   .nav3{
    display: none;
   }

   .footer2{
    position: relative;
    right: 53%;
    bottom: 4%;
    display: block;
   }

   .sub-footer1{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer2{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer3{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer4{
    width: 140px;
    line-height: 22px;
    padding-bottom: 28px;
   }

   .sub-footer5{
    width: 140px;
    position: absolute;
    line-height: 22px;
    padding-bottom: 28px;
    top: 78%;
   }
   .footer2 a{
    display: none;
   }

/* --- Site-wide theming for Resources & Shop consistency --- */
body{
    background: #070708; /* deep dark */
    color: #e6e6e8;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing:antialiased;
}

/* Headings */
h1, h2, h3{
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 8px;
}
h1{font-size: 34px}
h2{font-size: 22px}

/* Content container adjustments so content sits below fixed nav */
.container{margin-top: 84px}

/* Footer */
.site-footer{
    background: #0b0b0c;
    color: #9d9da4;
    padding: 30px 20px;
    border-top: 1px solid rgba(255,255,255,0.03);
}
.site-footer .panel2{
    display:flex;gap:20px;list-style:none;margin-top:10px;padding-left:0
}

/* Cards and gallery tweaks */
.card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:8px;box-sizing:border-box}
.card .thumb-wrap{height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.card canvas, .card img{max-width:100%;max-height:100%;border-radius:4px;object-fit:contain;display:block}

/* Resources: 3-up per row (one-line per book section) */
.gallery{display:flex;gap:10px;flex-wrap:nowrap;align-items:flex-start}
.gallery .card{flex:1 0 calc((100% / 3) - 10px);max-width:calc((100% / 3) - 10px)}

/* Shop: 2-up layout */
.gallery.two-up{display:flex;gap:18px;flex-wrap:wrap}
.gallery.two-up .card{flex:1 0 48%;max-width:48%}
.shop-card .thumb-wrap{height:360px}
.card .card-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.view-link{color:#bfc1c5;text-decoration:none;padding:8px 12px;border-radius:6px;background:transparent}

/* Make buy buttons small and consistent */
.buy-button{background:#2997ff;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.buy-button:hover{filter:brightness(0.95)}

/* Make sure .buy-button keeps a visible white text color even when inside .links */
.links .buy-button{color:#ffffff}

/* Mobile: reduce buy-button size so it isn't too large */
@media (max-width: 720px){
    .buy-button{padding:8px 12px;font-size:14px}
}

/* Resources: headings and gallery center/spacing */
.resources-list .hero-sections-special h3{width:100%;text-align:center;margin-bottom:12px;font-size:20px;color:#ffffff}
.resources-list .hero-sections-special h3{margin-left:0;margin-right:0}
.resources-list .hero-sections-special .gallery{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;width:100%;max-width:1100px;margin:0 auto;padding:0}
.resources-list .hero-sections-special .card{flex:0 0 30%;max-width:30%;display:flex;flex-direction:column;align-items:center;text-align:center;margin:8px}
.card .caption{margin-top:8px;color:#d0d0d2}
.card-actions{width:100%;display:flex;justify-content:center}

/* Responsive tweaks */
@media (max-width: 900px){
    .gallery{flex-wrap:wrap;gap:10px}
    .gallery .card{flex:1 0 48%;max-width:48%}
    .gallery.two-up .card{flex:1 0 48%;max-width:48%}
}

@media (max-width: 720px){
    .resources-list .hero-sections-special .card{flex:1 0 100%;max-width:100%;}
    .resources-list .hero-sections-special .gallery{gap:12px}
    .resources-list .card .thumb-wrap{height:140px}
    .resources-list .hero-sections-special h3{font-size:18px}
}

@media (max-width: 720px){
    h1{font-size:28px}
    .card .thumb-wrap{height:140px}
    .shop-card .thumb-wrap{height:180px}
    nav{height:48px;padding:8px}
    .container{margin-top:110px}
}

/* Promo inside nav: on small screens hide to avoid layout break */
@media (max-width: 600px){
    nav .nav2{display:block}
}


/* Ensure nav sits above content */
nav{position:fixed;top:0;left:0;right:0;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#161616,#0f0f10);z-index:120}

nav .nav-items{display:flex;gap:14px;align-items:center}
nav .nav-items a{color:rgba(255,255,255,0.72);padding:6px 8px;text-decoration:none}
nav .nav-items a:hover{color:#fff}

/* Mobile nav override: make the nav flow naturally and show links stacked */
@media (max-width: 720px) {
    nav{position:static;display:block;padding:8px 12px}
    nav .nav-items{display:flex;flex-direction:column;gap:6px;align-items:stretch}
    nav .nav-items a{display:block;padding:10px;background:transparent;text-align:center}
    nav .nav2{display:block}
    .container{margin-top:20px}
}

/* Style for div.nav (used in shop.html) — center bar with vertical margins */
.nav{
    width: min(1100px, 96%);
    margin: 18px auto; /* vertical margin top/bottom and centered horizontally */
    display: flex;
    align-items: center;
    justify-content: space-between; /* keep items and promo separated */
    gap: 12px;
    padding: 10px 14px;
    box-sizing: border-box;
    background-color: #000000; /* grey interior */
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.nav .nav-items{
    display: flex;
    gap: 16px;
    align-items: center;
}

.nav .nav2{
    color: #ffffff;
    background: rgba(255,255,255,0.04);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Responsive: stack nav and promo on small screens */
@media (max-width: 720px){
    .nav{flex-direction:column;align-items:stretch;padding:10px;}
    .nav .nav-items{justify-content:center;padding-bottom:6px}
    .nav .nav2{width:100%;justify-content:center;text-align:center}
}

/* override subscribe popup background and text color */
#ttaoa-subscribe {
  background: #313131 !important; /* replace with any hex/RGB/RGBA */
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
}
#ttaoa-subscribe .buy-button {
  background: #2997ff !important;
  color: #fff !important;
}
#ttaoa-subscribe .buy-button.close-white {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}