/* base: phone layout */
/* PHONE LAYOUT — stacked vertically */
.header-box {
    display: flex;
    flex-direction: column;   /* ← THIS is the fix */
    align-items: center;
    text-align: center;
    gap: 0px;
    padding: 20px;
}

/* DESKTOP LAYOUT */
@media (min-width: 900px) {
    .header-box {
        flex-direction: row;              /* logo | title | book */
        justify-content: space-between;   /* spreads them evenly */
        align-items: center;
        text-align: left;
    }

    .logo {
        max-width:850px;
    }

    .title {
        font-size: 72px;
    }

    .book-desktop {
        width: 300px;
        height: auto;
        display: block;
    }
}

 
/* PAGE LINKS — High Priority Force */
.top-section nav ul, 
.top-section ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    gap: 30px !important; /* Increased gap */
}



/* HEADER — DESKTOP */
@media (min-width: 900px) {
    .header-box {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: left;
        gap: 20px;
    }

    .logo {
        max-width: 400px;
    }

    .title {
        font-size: 72px;
    }

 .book-desktop {
    width: 300px;   /* smaller image */
    height: auto;
    display: block;
}   


    .book-desktop {
        display: block;               /* show book on desktop */
    }

   .start-here {
    display: block;
    margin-top: 10px;
    font-size: 1.2rem;
    text-decoration: none;
    color: #0066cc;
}
}


.top-section nav ul li a {
    display: inline-block !important;
    font-size: 48px !important;    /* Bumped to 48px to ensure it looks different */
    font-weight: 900 !important;
    padding: 25px 35px !important; /* Increased padding */
    text-decoration: none !important;
    margin: 15px !important;       /* Added more outer spacing */
}




.slider { 
  overflow: hidden; 
  width: 100%; 
  max-width: 800px; 
  margin: auto; 
  position: relative; 
}

.slides { 
  display: flex; 
  transition: 0.3s; 
}

.slide { 
  min-width: 100%; 
}

.slide img { 
  width: 100%; 
  height: auto; 
}

.arrow { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  background:black; 
  color:white; 
  padding:10px; 
}

.left { left:10px; }
.right { right:10px; }