/* ========== GENERAL RESET ========== */

*{
    box-sizing: border-box;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* This is the wash-out layer */
    background: rgba(255, 255, 255, 0.6);

    z-index: -1;
}


/* ========== IMAGE BEHAVIOUR ========== */

.img-fluid {
    display: block;          /* required for margin auto centering */
    width: 100%;
    max-width: 10cm;         /* never wider than 20cm */
    height: auto;
    margin: 20px auto 35px auto;  /* centres the image */
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
/* ==========PAGE WRAPPER +============*/
.page-wrapper {
    position: relative;
    width: 100%;
    max-width: 40cm;
    margin: 0 auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow: hidden; /* keeps background inside rounded corners */
}

/* Tiled + faded background layer */
.page-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image: url('https://learn.myfutureway.co.za/Udemy/course-images/Footer-and-background-image.jpg');
    background-repeat: repeat;
    background-size: auto;
    background-position: center;

    opacity: 0.12; /* <-- CONTROL FADE HERE */
    z-index: 0;
}

/* Ensures content floats above background */
.page-wrapper > * {
    position: relative;
    z-index: 1;
}

/* ========== SECTION PANELS ========== */

.tab_content {
    background: #ffffff; /* Pure white panel */
    padding: 25px 30px;
    border-radius: 10px;
    margin: 0 auto 25px auto; /* Top 0, horizontal auto, bottom 25px */
    max-width: 30cm;
    /* Soft Moodle-like shadow */
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);

    /* Smooth hover */
    transition: all 0.25s ease;
}



/* Slight lift on hover */
.tab_content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* Slightly dimmed version for specific use */
.tab_content.dimmed {
    background: #fafafa;
}


/* ========== HEADINGS ========== */

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: #1a1a1a;
    line-height: 1.2;
}

h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 10px;
    color: #2a2a2a;
    line-height: 1.3;
}


/* ========== TEXT / LISTS ========== */

p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1rem;       /* slightly larger for easier reading */
    line-height: 1.7;         /* matches list line-height for visual rhythm */
    color: #333333;           /* dark enough for readability but not harsh */
    margin-bottom: 1em;       /* spacing between paragraphs */
}

ul, 
ol {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-left: 22px;
    line-height: 1.7;
    color: #333333;
    font-size: 1.05rem;
}

ul li,
ol li {
    margin-bottom: 6px;
}

/* ========== BUTTON ========== */

.button-container {
  display: flex;
  justify-content: center; /* Horizontally center the button */
}

.custom-button {
  display: inline-block;
  padding: clamp(6px, 1.5vw, 10px) clamp(12px, 3vw, 20px); 
  border-radius: 30px;
  text-decoration: none;
  color: white;
  background: linear-gradient(0deg, #203864, #2F5597, #000000);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;          /* medium weight to match text */
  font-size: clamp(14px, 2.5vw, 20px); /* responsive font size */
  line-height: 1.6;          /* same as paragraphs/lists */
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-button:hover {
  color: white;
  text-decoration: none;
  opacity: 0.85;
  background: linear-gradient(0deg, #000000, #203864, #2F5597, #8FAADC);

  /* "Rise" effect */
  transform: translateY(-3px);           /* move button slightly up */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25); /* deepen shadow */
}

.custom-button:focus {
  outline: 2px solid black;
  outline-offset: 2px;
}
/* ==========FOOTER ==================*/
.my-footer {
    background-color: #203864;
    color: #ffffff;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid rgba(0,0,0,0.15);
}

/* ========== VIDEO SECTION ========== */

#iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

#iframe-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}