/* GLOBAL RESET */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root {

  /* =========================================================
     AQUASPHERE — GLOBAL FONT FAMILY
  ========================================================= */

  --font-primary:
    "Poppins",
    sans-serif;


  /* =========================================================
     AQUASPHERE — TYPOGRAPHY SCALE
     ---------------------------------------------------------
     IMPORTANT:
     11px = absolute minimum readable interface text
  ========================================================= */

  --font-page-title:
    30px;

  --font-section-title:
    22px;

  --font-panel-title:
    16px;

  --font-subheading:
    14px;

  --font-body:
    14px;

  --font-button:
    13px;

  --font-secondary:
    12px;

  --font-label:
    12px;

  --font-caption:
    11px;

  --font-minimum:
    11px;


  /* =========================================================
     AQUASPHERE — FONT WEIGHTS
  ========================================================= */

  --font-weight-regular:
    400;

  --font-weight-medium:
    500;

  --font-weight-semibold:
    600;

  --font-weight-bold:
    700;


  /* =========================================================
     AQUASPHERE — LINE HEIGHTS
  ========================================================= */

  --line-height-title:
    1.2;

  --line-height-heading:
    1.3;

  --line-height-body:
    1.5;

  --line-height-description:
    1.6;


  /* =========================================================
     AQUASPHERE — TEXT COLORS
  ========================================================= */

  --text-primary:
    #1e3445;

  --text-secondary:
    #607789;

  --text-muted:
    #8294a5;


  /* =========================================================
     AQUASPHERE — BACKGROUNDS
  ========================================================= */

  --background-primary:
    #ffffff;

  --background-soft:
    #f8fcfe;

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;

  font-family:
    var(--font-primary);

  font-size:
    var(--font-body);

  line-height:
    var(--line-height-body);

  color:
    var(--text-primary);

  background:
    var(--background-primary);

  overflow-x:
    hidden;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-primary);
}

img,
svg {
  max-width: 100%;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

.container {
  width: 90%;
  max-width: 1280px;

  margin: 0 auto;
}

section {
  padding: 80px 0;
}

.section-heading {
  margin-bottom: 40px;
}

.section-heading h2 {
  margin-bottom: 10px;

  color: var(--text-primary);

  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

.section-heading p {
  color: var(--text-secondary);

  font-size: 16px;
  line-height: 1.7;
}

button,
.hero-buttons a,
.cta-container a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #76b7d6;
  outline-offset: 3px;
}

::selection {
  color: #ffffff;
  background: #76b7d6;
}

@media (max-width: 620px) {
  .container {
    width: 92%;
  }

  section {
    padding: 64px 0;
  }

  .section-heading h2 {
    font-size: 28px;
  }
}


/* ============================================================
   AQUASPHERE — GLOBAL RESPONSIVE FOUNDATION
   ------------------------------------------------------------
   PURPOSE:
   - Prevent layout overflow
   - Scale spacing and typography naturally
   - Keep media/forms/buttons inside the viewport
   - Improve laptop/tablet/mobile behavior
   - Provide reusable responsive variables
============================================================ */


/* ============================================================
   01. RESPONSIVE DESIGN VARIABLES
============================================================ */

:root {
  --responsive-page-x:
    clamp(
      16px,
      4vw,
      72px
    );

  --responsive-page-y:
    clamp(
      18px,
      3vw,
      48px
    );

  --responsive-section-gap:
    clamp(
      18px,
      2vw,
      32px
    );

  --responsive-card-gap:
    clamp(
      10px,
      1.4vw,
      20px
    );

  --responsive-card-radius:
    clamp(
      12px,
      1vw,
      18px
    );

  --responsive-title:
    clamp(
      26px,
      2.4vw,
      38px
    );

  --responsive-subtitle:
    clamp(
      12px,
      1vw,
      15px
    );

  --responsive-body:
    clamp(
      11px,
      0.85vw,
      14px
    );
}


/* ============================================================
   02. VIEWPORT SAFETY
============================================================ */

html {
  width:
    100%;

  max-width:
    100%;

  overflow-x:
    hidden;
}


body {
  width:
    100%;

  max-width:
    100%;

  min-width:
    320px;

  overflow-x:
    hidden;
}


/* ============================================================
   03. UNIVERSAL BOX SAFETY
============================================================ */

*,
*::before,
*::after {
  box-sizing:
    border-box;
}


main,
section,
article,
aside,
header,
footer,
nav,
div {
  min-width:
    0;
}


/* ============================================================
   04. MEDIA RESPONSIVENESS
============================================================ */

img,
picture,
video,
canvas,
svg {
  max-width:
    100%;

  height:
    auto;
}


iframe {
  max-width:
    100%;
}


/* ============================================================
   05. FORM RESPONSIVENESS
============================================================ */

input,
select,
textarea,
button {
  max-width:
    100%;
}


input,
select,
textarea {
  min-width:
    0;
}


/* ============================================================
   06. LONG TEXT PROTECTION
============================================================ */

p,
span,
strong,
small,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button {
  overflow-wrap:
    break-word;
}


/* ============================================================
   07. GLOBAL CONTAINER
============================================================ */

.container {
  width:
    min(
      100% - 32px,
      1280px
    );

  margin-inline:
    auto;
}


/* ============================================================
   08. RESPONSIVE TABLE SAFETY
============================================================ */

table {
  width:
    100%;

  max-width:
    100%;
}


.table-responsive,
.responsive-table {
  width:
    100%;

  overflow-x:
    auto;

  -webkit-overflow-scrolling:
    touch;
}


/* ============================================================
   09. GLOBAL CARD SAFETY
============================================================ */

.card,
[class*="card"] {
  min-width:
    0;

  max-width:
    100%;
}


/* ============================================================
   10. GRID SAFETY
============================================================ */

.grid,
[class*="grid"] {
  min-width:
    0;
}


/* ============================================================
   11. DESKTOP / STANDARD LAPTOP
   1600px and below
============================================================ */

@media (max-width: 1600px) {

  :root {
    --responsive-page-x:
      clamp(
        24px,
        3vw,
        52px
      );
  }

}


/* ============================================================
   12. COMMON LAPTOP
   1366px and below
============================================================ */

@media (max-width: 1366px) {

  :root {
    --responsive-page-x:
      clamp(
        20px,
        2.5vw,
        38px
      );

    --responsive-section-gap:
      20px;

    --responsive-card-gap:
      12px;
  }


  section {
    padding-top:
      clamp(
        40px,
        5vw,
        64px
      );

    padding-bottom:
      clamp(
        40px,
        5vw,
        64px
      );
  }

}


/* ============================================================
   13. SMALL LAPTOP / LARGE TABLET
   1180px and below
============================================================ */

@media (max-width: 1180px) {

  :root {
    --responsive-page-x:
      22px;
  }


  .container {
    width:
      calc(
        100% - 44px
      );
  }


  /* Generic large grids become more flexible */

  .responsive-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }

}


/* ============================================================
   14. TABLET
   900px and below
============================================================ */

@media (max-width: 900px) {

  :root {
    --responsive-page-x:
      18px;

    --responsive-section-gap:
      18px;
  }


  .container {
    width:
      calc(
        100% - 36px
      );
  }


  .responsive-grid,
  .responsive-two-column {
    grid-template-columns:
      1fr !important;
  }


  .responsive-flex {
    flex-wrap:
      wrap;
  }

}


/* ============================================================
   15. MOBILE
   620px and below
============================================================ */

@media (max-width: 620px) {

  :root {
    --responsive-page-x:
      14px;

    --responsive-page-y:
      18px;

    --responsive-section-gap:
      16px;

    --responsive-card-gap:
      10px;
  }


  .container {
    width:
      calc(
        100% - 28px
      );
  }


  section {
    padding:
      42px
      0;
  }


  .responsive-grid,
  .responsive-two-column {
    grid-template-columns:
      1fr !important;
  }


  .responsive-flex {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  button,
  input,
  select,
  textarea {
    font-size:
      16px;
  }

}


/* ============================================================
   16. VERY SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

  :root {
    --responsive-page-x:
      12px;
  }


  .container {
    width:
      calc(
        100% - 24px
      );
  }

}