:root{
  /*
  This section defines reusable design variables for the information pages.
  These include background colors, button colors, card styles, and text color.
  Using variables keeps the design consistent across the About, Instructions,
  and Contact pages and makes it easier to update the theme.
  */

  --bg1:#dff3ff;
  --bg2:#cfe8f5;

  /* Background gradient colors */

  --blue1:#5c9df5;
  --blue2:#3d81eb;

  /* Header banner gradient colors */

  --pink:#ef3f9a;
  --pink-dark:#c92d7d;

  /* Primary button color */

  --yellow:#ffd86b;
  --yellow-dark:#e4b63d;

  /* Accent button color */

  --green:#62d59b;
  --green-dark:#38b576;

  /* Secondary button color */

  --card:#ffffffd9;

  /* Semi transparent white card background */

  --text:#21436b;

  /* Main text color */
}

*{
  /*
  Applies consistent sizing rules to all elements.
  This ensures padding and borders are included in width calculations.
  */
  box-sizing:border-box;
}

body{
  /*
  Styles the main page background and default font settings.
  */

  margin:0;
  /* Removes browser default margin */

  font-family:Arial,Helvetica,sans-serif;
  /* Sets the base font for the page */

  background:linear-gradient(to bottom,var(--bg1),var(--bg2));
  /* Creates a soft vertical gradient background */

  color:var(--text);
  /* Applies the default text color */

  min-height:100vh;
  /* Ensures the page always fills the full screen height */
}

.page-shell{
  /*
  Main page container used by the informational pages.
  This centers the layout and controls overall page width.
  */

  max-width:980px;
  margin:0 auto;
  /* Centers the content horizontally */

  padding:28px 20px 40px;
  /* Adds spacing around the page content */
}

.header-banner{
  /*
  Styles the top header banner showing JUANLEARN.
  */

  background:linear-gradient(to right,var(--blue1),var(--blue2));
  /* Creates a blue gradient header */

  color:white;
  text-align:center;

  font-size:2.2rem;
  font-weight:900;
  letter-spacing:1px;

  padding:22px 18px;

  border-radius:28px;
  /* Gives the header rounded corners */

  box-shadow:0 8px 0 rgba(0,0,0,0.08);
  /* Adds a subtle depth effect */

  margin-bottom:18px;
}

.progress-wrap{
  /*
  Decorative progress bar area used to keep visual consistency
  with the learning modules.
  */

  background:#ffffffaa;
  border-radius:999px;

  padding:8px;
  margin:0 auto 24px;

  max-width:820px;

  box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}

.progress-bar{
  /*
  Decorative progress bar used on information pages.
  */

  height:18px;
  width:100%;

  border-radius:999px;

  background:linear-gradient(to right,#7dd7ff,#7ce7b6);
  /* Blue to green gradient */
}

.info-card{
  /*
  Main content card used by the About, Instructions,
  and Contact pages.
  */

  background:var(--card);
  border-radius:32px;

  padding:28px;

  box-shadow:0 14px 34px rgba(0,0,0,0.08);
  /* Creates a floating card appearance */
}

.hero{
  /*
  Styles the introductory section at the top of each page.
  */
  text-align:center;
  margin-bottom:24px;
}

.hero h1{
  /*
  Styles the main heading of the page.
  */

  font-size:2rem;
  color:#2f5cc8;
  margin:0 0 10px;
}

.hero p{
  /*
  Styles the introductory paragraph below the heading.
  */

  font-size:1.08rem;
  line-height:1.6;

  margin:0 auto;
  max-width:760px;
  /* Limits text width for readability */
}

.grid{
  /*
  Creates a grid layout used for feature cards.
  Example: learning categories.
  */

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;

  margin:22px 0;
}

.mini-card{
  /*
  Styles small feature cards used in the grid.
  */

  border-radius:24px;
  padding:20px;

  color:white;

  min-height:170px;

  box-shadow:0 8px 0 rgba(0,0,0,0.08);
}

.mini-card h3{
  /*
  Styles the mini card title.
  */
  margin:0 0 10px;
  font-size:1.3rem;
}

.mini-card p,
.mini-card li{
  /*
  Styles text inside mini cards.
  */

  line-height:1.5;
  font-size:1rem;
}

.c1{background:#4ec9c1;}
.c2{background:#f2ab49;}
.c3{background:#8ad6a4;}
.c4{background:#ad8be8;}

 /*
 These color classes provide different background colors
 for each feature card.
 */

.section{
  /*
  Styles standard content sections in the page.
  */
  margin-top:24px;
}

.section h2{
  /*
  Styles section headings.
  */

  color:#2f5cc8;
  font-size:1.45rem;

  margin:0 0 10px;
}

.section p{
  /*
  Styles paragraph text inside sections.
  */

  line-height:1.7;
  margin:0 0 12px;
}

.list{
  /*
  Styles bullet lists used in the content pages.
  */

  margin:0;
  padding-left:22px;
}

.list li{
  margin-bottom:10px;
  line-height:1.6;
}

.callout{
  /*
  Styles highlighted information boxes.
  These are used to emphasize key messages.
  */

  background:#fff7d9;
  border:3px dashed #f0c84c;

  border-radius:24px;

  padding:18px;
  margin-top:22px;
}

.callout h3{
  margin:0 0 10px;
  color:#8a5a00;
}

.button-row{
  /*
  Styles the row of navigation buttons at the bottom of the page.
  */

  display:flex;
  gap:14px;

  justify-content:center;
  flex-wrap:wrap;

  margin-top:28px;
}

.btn{
  /*
  Base style for all buttons.
  */

  text-decoration:none;
  color:white;

  font-weight:700;

  padding:14px 24px;

  border-radius:999px;

  display:inline-block;

  box-shadow:0 8px 0 rgba(0,0,0,0.08);
}

.btn-primary{
  background:var(--pink);
}

.btn-primary:hover{
  background:var(--pink-dark);
}

.btn-secondary{
  background:var(--green);
}

.btn-secondary:hover{
  background:var(--green-dark);
}

.btn-accent{
  background:var(--yellow);
  color:#6a4700;
}

.btn-accent:hover{
  background:var(--yellow-dark);
}

 /*
 These button classes allow different color styles
 for navigation actions such as Back, About, or Contact.
 */

.contact-box{
  /*
  Styles the contact information container
  on the Contact Us page.
  */

  background:#eef6ff;

  border-radius:24px;

  padding:20px;

  margin-top:16px;
}

.contact-item{
  /*
  Styles individual contact lines such as
  email, website, or social media.
  */

  font-size:1.05rem;
  margin-bottom:10px;
}

.footer-note{
  /*
  Styles the small footer message shown
  at the bottom of the page.
  */

  text-align:center;

  margin-top:18px;

  font-size:.95rem;

  color:#57739d;
}

@media (max-width:760px){

  /*
  Responsive rules for tablets and smaller devices.
  */

  .header-banner{
    font-size:1.7rem;
  }

  .hero h1{
    font-size:1.65rem;
  }

  .grid{
    grid-template-columns:1fr;
    /* Converts the two column grid into one column */
  }

  .info-card{
    padding:22px;
  }
}