/* ==========================================================
   BabyChoice Nappies
   BASE CSS
   Global setup, fonts, colours, reset and utilities
========================================================== */


/* ===============================
   GOOGLE FONTS
================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');



/* ===============================
   ROOT VARIABLES
================================ */

:root {

  /* Brand colours */

  --pink: #FFD9E4;
  --pink-deep: #FF8FAE;

  --blue: #CDE7FF;
  --blue-deep: #6FB1E8;

  --yellow: #FFF3C4;

  --cream: #FFFBF5;

  --ink: #4A3F3A;
  --ink-soft: #7A6E68;

  --white: #FFFFFF;


  /* Status colours */

  --green: #25D366;
  --success: #2A7A4B;
  --warning: #B8860B;


  /* Layout */

  --container:1200px;


  /* Radius */

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;


  /* Shadows */

  --shadow:
  0 10px 30px rgba(255,143,174,.15);

}



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

*,
*::before,
*::after {

box-sizing:border-box;

margin:0;
padding:0;

}



html {

scroll-behavior:smooth;

}



body {

font-family:'Quicksand', sans-serif;

color:var(--ink);

background:var(--cream);

line-height:1.6;

overflow-x:hidden;

}



img {

max-width:100%;

display:block;

}



a {

text-decoration:none;

color:inherit;

}



button,
input,
textarea,
select {

font-family:inherit;

}



button {

cursor:pointer;

}



ul,
ol {

list-style:none;

}



/* ===============================
   TYPOGRAPHY
================================ */


h1,
h2,
h3,
h4,
h5,
h6,
.brand-font {

font-family:'Baloo 2', cursive;

font-weight:700;

color:var(--ink);

line-height:1.2;

}



h1 {

font-size:clamp(2.2rem,5vw,3.5rem);

}



h2 {

font-size:clamp(1.8rem,4vw,2.3rem);

}



h3 {

font-size:1.5rem;

}



p {

color:var(--ink-soft);

}



/* ===============================
   GLOBAL CONTAINER
================================ */


.container {

width:100%;

max-width:var(--container);

margin:0 auto;

padding-left:24px;

padding-right:24px;

}



/* ===============================
   SECTIONS
================================ */


.section {

padding:80px 0;

}



.section-head {

text-align:center;

max-width:650px;

margin:0 auto 50px;

}



.section-head .eyebrow {


color:var(--pink-deep);

font-size:13px;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

}



.section-head h2 {

margin:12px 0;

}



.section-head p {

font-size:16px;

}



/* ===============================
   BACKGROUND HELPERS
================================ */


.bg-soft {

background:
linear-gradient(
180deg,
#FFFFFF 0%,
#FFF6F9 100%
);

}



/* ===============================
   UTILITY CLASSES
================================ */


.text-center {

text-align:center;

}



.flex {

display:flex;

}



.flex-center {

display:flex;

align-items:center;

justify-content:center;

}



.hidden {

display:none!important;

}