:root {

    /* Fonts */
    --defaultFontFamily: "Poppins", sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
 
    --neutral-100:#fff;
    --neutral-300:#F4F4FB;
    --neutral-900:#000;

    --primary-400:#2B3D50;
    --secondary-400:#74D174;

    /* Border Radius */
    --border-radius-default:15px;

    /* Default */
    --transition-default: all 0.3s ease-out;

    /* Fonts Sizes */
    --fs-base-m: 18px;
    --fs-base-d: 20px;

    --fs-title-xl: 48px; 
    --fs-title-lg: 36px; 
    --fs-title-md: 34px; 
    --fs-title-sm: 30px;
    --fs-title-xs: 27px; 

    --fs-para-xl: 24px;
    --fs-para-lg: 20px;
    --fs-para-md: 18px;
    --fs-para-sm: 16px;
    --fs-para-xs: 14px;
}



/* -------------------------
   Titles and fonts sizes
------------------------- */
.text-center {text-align:center;}
.highlight {color:var(--secondary-400);}

.level-1-title {font-family:var(--defaultFontFamily); font-weight:var(--fw-medium); font-size:var(--fs-title-lg); line-height:1.1; margin:0;}
.level-2-title {font-family:var(--defaultFontFamily); font-weight:var(--fw-bold); font-size:var(--fs-title-sm); line-height:1.1;}

.title-sm {font-size:var(--fs-title-xs); font-weight:var(--fw-medium);}
.para-xl {font-size:var(--fs-para-xl); font-weight:var(--fw-medium);}
ul li::marker {color:var(--secondary-400);}


@media (min-width:768px) {
  :root {
    --border-radius-default:30px;
  }
  body {font-size:var(--fs-base-d);}
  .level-1-title {font-size:var(--fs-title-xl);}
  .level-2-title {font-size:var(--fs-title-md);}
}




/* -------------------------
  Button
------------------------- */
.btn {cursor:pointer; padding:0.75rem 1.5rem 0.75rem 1.5rem; transition:var(--transition-default); border:0; font-weight:var(--fw-regular); color:var(--neutral-100); border-radius:6px; font-size:var(--fs-para-sm); background:var(--secondary-400); text-decoration:none; display:inline-block; white-space:nowrap; text-decoration:none;}
.btn:hover {color:var(--primary-400);}

@media (min-width:768px) {
  .btn {font-size:var(--fs-para-md);}
}




/* -------------------------
   Images
------------------------- */
.img-fit {object-fit:cover; width:100%; height:auto;}
.img-rounded {border-radius:var(--border-radius-default);}
.img-corner-left {border-top-left-radius:0;}
.img-corner-right {border-top-right-radius:0;}
.mask-frame {max-width:400px; margin:0 auto; width:100%; aspect-ratio:440.733 / 331.449; mask-image:url('/images/img-mask.svg'); -webkit-mask-image:url('/images/img-mask.svg'); mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-position:center; -webkit-mask-position:center; overflow:hidden;}
.mask-frame img {max-width:none; width:100%; height:100%; object-fit:cover; transform-origin:center;}





/* -------------------------
   Padding & Margins
------------------------- */
.pt-0 {padding-top:0 !important;}
.pt-1 {padding-top:1rem !important;}
.pt-2 {padding-top:2rem !important;}
.pt-3 {padding-top:3rem !important;}
.pt-4 {padding-top:4rem !important;}
.pt-5 {padding-top:5rem !important;}

.pb-0 {padding-bottom:0 !important;}
.pb-1 {padding-bottom:1rem !important;}
.pb-2 {padding-bottom:2rem !important;}
.pb-3 {padding-bottom:3rem !important;}
.pb-4 {padding-bottom:4rem !important;}
.pb-5 {padding-bottom:5rem !important;}

.mt-0 {margin-top:0 !important;}
.mt-1 {margin-top:1rem !important;}
.mt-2 {margin-top:2rem !important;}
.mt-3 {margin-top:3rem !important;}
.mt-4 {margin-top:4rem !important;}
.mt-5 {margin-top:5rem !important;}

.mb-0 {margin-bottom:0 !important;}
.mb-1 {margin-bottom:1rem !important;}
.mb-2 {margin-bottom:2rem !important;}
.mb-3 {margin-bottom:3rem !important;}
.mb-4 {margin-bottom:4rem !important;}
.mb-5 {margin-bottom:5rem !important;}




/* -------------------------
   Containers
------------------------- */
.container {width:min(100%, 1300px); margin:0 auto; padding:0 2rem;}
section {padding:60px 0;}
.offset-top {margin-top:132px;}

@media (min-width:768px) {
    .container {padding:0 2rem;}
}



/* -------------------------
   Lazy
------------------------- */
img.lazy {opacity:0; transition:opacity .4s ease-in;}
img.loaded {opacity:1;}