body{
    background-image: url('Images/water.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
html, body{
    margin: 0;
    padding: 0;
}
/* navbar */
.topnav {
  position:sticky;
  top:0;
  overflow: hidden;
  background-color: #AC7B78;
  z-index: 999;
}
.topnav a {
  float:right;
  color: #2D1910;
  text-align: center;
  padding:  20px 50px;
  text-decoration: none;
  font-size: 17px;
  font-family: Apple Chancery;
}
.topnav a:hover {
  background-color: #F5DEB3;
  color: #B37152;
}
.topnav a.active {
  background-color: #011627;
  color: #CFB893;
}
.topnav a.active:hover {
  background-color: #9DC7E4;
  color: #A55166;
}

/* navbar end */

/*This allows the sections to be reveal as scrolling. Each section is hidden until scrolling*/
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* this is the end of section reveal*/

/* Section info begins with p to the left and table to the right*/
 #info {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      padding-bottom: 90px;
    }
   
    h1{
        text-align: center;
        font-size: x-large;
    }

    .left-text {
      width: 40%;
      text-indent: 1em;
      padding: 30px;
      padding-top: 40px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    .right-table {
      width: 55%;
      padding: 90px 20px 80px 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      box-shadow: 0 8px 32px rgba(0, 0,0, 3);
    }

    th, td {
      border: 3px solid #030956;
      padding: 10px;
      text-align: left;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    /* Zebra striping */
    tr:nth-child(even) {
      background-color: #a4c8e9;
    }

    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    /*Info section end*/

    /* Tips section begins with a table with buttons*/
h2{
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.strategy{
    box-shadow: #f2d9e6;
    padding-bottom: 60px;
}
.strategy th {
    text-align: center;
    background-color: #e9cd99;
}
.strategy tr:nth-child(even) {
      background-color: #abccff;
    }
.strategy tr:nth-child(even):hover{
    background-color: #729bd4;
    transition: background-color 0.3s ease;
}
.strategy tr:nth-child(odd) {
      background-color: #f5e8ef;
    }
.strategy tr:nth-child(odd):hover{
     background-color: #cbb3bf;
     transition: background-color 0.3s ease;
}
/*Tips/Chart section ends*/

/*This is the sparkle effect on the buttons in the Tips section*/
 .sparkle-btn {
      position: relative;
      padding: 15px 40px;
      font-size: 1.2rem;
      color: #ffffff;
      background: linear-gradient(145deg, #71d6f8, #4799e0);
      border: none;
      border-radius: 50px;
      box-shadow: 0 6px 12px rgba(0, 120, 255, 0.4), inset 0 0 10px rgba(245, 234, 234, 0.503);
      cursor: pointer;
      overflow: hidden;
      transition: background 0.4s ease, transform 0.2s ease;
    }

    .sparkle-btn::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 60%);
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      transition: transform 0.6s ease, opacity 0.6s ease;
    }

    .sparkle-btn:hover::before {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }

    .sparkle-btn:hover {
      transform: translateY(-2px);
      background: linear-gradient(145deg, #00cfff, #0084f0);
    }

    .sparkle-btn:active {
      transform: scale(0.96);
    }

    /* ✨ Sparkles Layer */
    .sparkle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 6px white;
      animation: sparkleAnim 2s infinite ease-in-out;
      pointer-events: none;
    }

    .sparkle:nth-child(1) {
      top: 10%;
      left: 20%;
      animation-delay: 0s;
    }

    .sparkle:nth-child(2) {
      top: 40%;
      left: 70%;
      animation-delay: 0.3s;
    }

    .sparkle:nth-child(3) {
      top: 70%;
      left: 35%;
      animation-delay: 0.6s;
    }

    .sparkle:nth-child(4) {
      top: 25%;
      left: 80%;
      animation-delay: 1s;
    }

    @keyframes sparkleAnim {
      0%, 100% {
        transform: scale(1);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.6);
        opacity: 0.2;
      }
    }
/*This is the end of the sparkle button css*/

/*Blog/Journey section begins with toggle buttons with info and links*/
  .toggle-btn {
      padding: 10px 12px;
      margin: 10px 0;
      background-color: #011627;
      color: #CFB893;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: block;
      width: 100%;
      text-align: center;
      font-size: x-large;
      box-shadow: 0 8px 32px rgba(0, 0,0, 3);
    }

    .toggle-btn:hover {
      background-color: #9DC7E4;
      color: #A55166;
    }

    .slide-content {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.5s ease-out, padding 0.3s ease;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 0 10px;
      font-size: x-large;
      text-indent: 1em;
    }

    .slide-content.open {
      max-height: 800px; /* Large enough to fit content */
      padding: 10px;
    }
    .story{
        text-align: center;
        font-size: larger;
    }