/* ══════════════════════════════════════
       CSS Variables
    ══════════════════════════════════════ */
    :root {
      --pink-50: rgb(255, 238, 244);
      --pink-100: rgb(255, 214, 226);
      --pink-300: rgb(255, 139, 176);
      --pink-500: rgb(255, 91, 152);
      --pink-600: rgb(230, 81, 136);
      --purple-pastel: rgb(129, 98, 158);
      --purple-50: rgb(234,231,238);
      --purple-500: rgb(101, 78, 158);
      --purple-600: rgb(80, 61, 125);
      --green-100: rgb(223, 241, 241);
      --black-heading: rgb(31, 41, 51);
      --blue-grey-50: #ECEFF1;
      --blue-grey-100: #CFD8DC;
      --blue-grey-300: #90A4AE;
      --blue-grey-400: #78909C;
      --blue-grey-500: #607D8B;
      --blue-grey-600: #546E7A;
      --blue-grey-700: #455A64;
      --blue-grey-800: #37474F;
      --body-max: 1200px;
      --body-padding: 3vw;

      /* Google palette colours used for icons */
      --google-green-700: rgb(76, 175, 80);
      --google-red-300: #E57373;

      --purple-large-size: 3.6vh;
      --purple-small-size: 2.3vh;

      --purple-large-size-m: 2.5vh;
      --purple-small-size-m: 1.6vh;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}

    /* Prevent tap highlight on interactive elements */
    a, button, [role="button"] {
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

  
    /* ══════════════════════════════════════
       MAIN LAYOUT WRAPPER
    ══════════════════════════════════════ */

    body {
      background: rgb(249, 249, 249);
      font-family: 'Figtree', sans-serif;
    }


    main {
      max-width: var(--body-max);
      width: 100%;
      margin: 0 auto;
      padding-left: 15px;
      padding-right: 15px;
    }

    .sec-top {
      padding-top: 56px; /* header height */
    }
    
    
@media (max-width: 767px) {

      .sec-top {
        padding-top: 53px; /* header height */
      }
}