:root {
  --col1: #d9f2e6;
  --col2: #ffe9dd;
  --col3: #34beff;
  --br: 10px;
}
body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background: linear-gradient(135deg, #d9f2e6, #ffe9dd);
      background-attachment: fixed;
      color: #003366;
      text-align: center;
    }

    header {
      padding: 20px 40px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
    }

    nav a {
      margin: 20px 15px 0 15px;
      display: inline-block;
      text-decoration: none;
      color: #003366;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #0077cc;
    }

    div {
      box-sizing: border-box;
    }
    body::-webkit-scrollbar {
      background: var(--col2);
    }
    body::-webkit-scrollbar-thumb {
      background: var(--col3);
    }
    p {
      margin: 0;
    }
    img {
      border: 0;
    }
    a {
      color: var(--col2);
      text-decoration: none;
    }
    a:hover {
      color: var(--col2);
      text-decoration: none;
      filter: contrast(130%);
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: Font;
      font-weight: normal;
      margin: 10px 0;
    }
    h1 {font-size: 36px;}
    h2 {font-size: 30px;}
    h3 {font-size: 26px;}
    h4 {font-size: 22px;}
    h5 {font-size: 20px;}
    h6 {font-size: 18px;}

    input, textarea {
      background: #fff;
      border-radius: var(--br);
      color: var(--col1);
      font-family: Font;
      font-size: 30px;
      padding: 10px;
      border: 1px solid var(--col1);
      box-sizing: border-box;
    }
    input {height: 57px;}
    .p12 {font-size: 12px;}
    .p14 {font-size: 14px;}
    .p16 {font-size: 16px;}
    .p18 {font-size: 18px;}
    .p20 {font-size: 20px;}
    .p21 {font-size: 21px;}
    .p22 {font-size: 22px;}
    .p24 {font-size: 24px;}
    .p25 {font-size: 25px;}
    .p26 {font-size: 26px;}
    .p30 {font-size: 30px;}
    .p36 {font-size: 36px;}
    .p40 {font-size: 40px;}
    .p48 {font-size: 48px;}

    .p1 {color: var(--col1);}
    .p2 {color: var(--col2);}
    .p3 {color: var(--col3);}
    .pgrey {color: #333;}
    .pblack {color: #000;}
    .pwhite {color: #fff;}

    .clear {clear: both; float: none;}

    .pupper {text-transform: uppercase;}
    .pl {text-align: left;}
    .pr {text-align: right;}

    .hero h1 {
      font-size: 2.8em;
      margin-bottom: 10px;
    }

    .hero h2 {
      font-size: 1.4em;
      font-weight: normal;
      color: #224466;
    }

    .button {
      background-color: #44bbff;
      color: white;
      padding: 15px 30px;
      margin: 20px 10px 0;
      font-size: 1.1em;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: #2299dd;
    }

    .section {
      padding: 40px 20px;
    }

    .benefit {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 800px;
      margin: 20px auto;
      font-size: 1.2em;
    }

    .benefit img {
      width: 32px;
      height: 32px;
      margin-right: 15px;
    }

    footer {
      margin-top: 40px;
      padding: 20px;
      font-size: 0.9em;
      color: #666;
    }

    footer a {
      margin: 0 10px;
      text-decoration: none;
      color: #44bbff;
    }

    .card {
      background: white;
      padding: 40px;
      border-radius: 24px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.1);
      max-width: 420px;
      width: 100%;
      box-sizing: border-box;
      display: inline-block;
    }

    .card img {
      width: 64px;
      margin-bottom: 20px;
    }

    .card h1 {
      font-size: 2em;
      color: #0077cc;
      margin-bottom: 10px;
    }

    .card p {
      font-size: 1.1em;
      margin-bottom: 20px;
      color: #224466;
    }
    .cont {
      display: inline-block;
      max-width: 1200px;
      padding: 10px 20px;
    }

    #backToTopBtn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: var(--col3);
        border: none;
        border-radius: var(--br);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    #backToTopBtn.visible {
        opacity: 1;
        pointer-events: auto;
    }
    #backToTopBtn::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-right: 4px solid white;
        border-top: 4px solid white;
        transform: rotate(-45deg);
        margin-top: 4px;
    }
    #backToTopBtn:hover {
        background-color: var(--col3);
    }