:root {

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

    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 700;
 
    --neutral-100:#fff;
    --neutral-400:#707070;
    --neutral-900:#000;

    --primary-100:#ECECF5;
    --primary-200:#9D9FE5;
    --primary-300:#7A60E9;
    --primary-400:#F0ACA8;
    --primary-800:#30313E;
    --primary-900:#051851;  

    --secondary-300:#EAF5F2;
    --secondary-400:#0DB7B3;

    /* Layout */
    --container-wide: 1380;
    --container-narrow: 1024;

    /* Border Radius */
    --border-radius-sm:15px;
    --border-radius-lg:30px;

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

    /* mobile */
    --fs-base: 1rem;
    --fs-level1-title-xl-m: 40px; /* home title */
    --fs-level1-title-m: 38px; 
    --fs-level2-title-m: 32px; 
    --fs-level3-title-m: 26px; 

    --fs-button-m: 14px;

    --fs-para-xl-m: 24px;
    --fs-para-lg-m: 22px;
    --fs-para-md-m: 16px;
    --fs-para-sm-m: 14px;
    --fs-para-xs-m: 12px;

    /* tablet */
    --fs-level1-title-tb: 42px; 

    /* desktop */
    --fs-base-d: 20px;
    --fs-level1-title-xl-d: 60px;  /* home title */
    --fs-level1-title-d: 48px; 
    --fs-level2-title-d: 42px; 
    --fs-level3-title-d: 34px; 

    --fs-button-d: 16px;

    --fs-para-xl-d: 28px;
    --fs-para-lg-d: 24px;
    --fs-para-md-d: 18px;
    --fs-para-sm-d: 16px;
    --fs-para-xs-d: 15px;
}


/* Titles and fonts sizes */
.level-1-title {font-family:var(--defaultFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level1-title-m); line-height:1.1; margin:0;}
.level-2-title {font-family:var(--defaultFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level2-title-m); line-height:1.1;}
.level-3-title,
.level-3-title button {font-family:var(--defaultFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level3-title-m); line-height:1.1;}
.level-4-title {font-family:var(--defaultFontFamily); font-weight:var(--fw-bold); font-size:var(--fs-para-xl-m); line-height:1.1;}
.text-center {text-align: center;}
.small-copy {font-size:var(--fs-para-sm-m);}
main ol {padding-left:1.5rem;}

/* Button */
.btn {padding:0.75rem 1rem 0.75rem 1rem; text-transform:uppercase; border:0; font-weight:var(--fw-regular); color:var(--neutral-100); border-radius:2rem; font-size:var(--fs-button-m); background:var(--primary-300); text-decoration:none; display:inline-block; white-space:nowrap; text-decoration:none;}
.btn.btn-reverse {color:var(--primary-300); background:var(--neutral-100);}
.btn:hover {color:var(--neutral-100); background-color:var(--primary-900);}
button {transition:var(--transition-default); cursor:pointer;}
.btn.btn-modal {background-image:url(/images/icon-play.svg); background-repeat: no-repeat; padding-left:3rem;}

@media (min-width:768px) {
  .btn {padding:1.2rem 2rem 1.2rem 2rem;}
  .btn.btn-modal {padding-left:4.5rem;}
}

@media (min-width:992px) {
  body {font-size:var(--fs-base-d);}
  .level-1-title {font-size:var(--fs-level1-title-d);}
  .level-2-title {font-size:var(--fs-level2-title-d);}
  .level-3-title {font-size:var(--fs-level3-title-d);}
  .level-4-title {font-size:var(--fs-para-xl-d);}
  .btn {font-size:var(--fs-button-d);}
}








/* Images */
.img-fit {object-fit:cover; width:100%; height:auto;}
.img-align-left {object-position: 0 50%;}
.img-align-left-70 {object-position: 70% 50%;}
.img-align-right {object-position: 100% 50%;}
.img-expand {margin-left:-2rem; margin-bottom:-2rem; margin-right:-2rem; width:calc(100% + 4rem); max-width:unset; border-bottom-left-radius:var(--border-radius-sm); border-bottom-right-radius:var(--border-radius-sm);}
.img-rounded {border-radius:var(--border-radius-sm);}

@media(min-width:768px) {
  .img-expand {height:calc(100% + 8rem); margin-top:-4rem; margin-right:-4rem; margin-left:0; border-top-right-radius:var(--border-radius-lg); border-bottom-right-radius:var(--border-radius-lg); border-bottom-left-radius:0;}
}





/* 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%, var(--container-wide)*1px); margin:0 auto; padding:0 1rem;}
.container-narrow {width:min(100%, var(--container-narrow)*1px);}
section {padding:60px 0;}
.columns-two {display:grid; column-gap:3rem; row-gap:1rem;}
.columns-two-offset {display:grid; column-gap:3rem; row-gap:1rem;}
.columns-two-offset-right {display:grid; column-gap:3rem; row-gap:1rem;}
.frame {padding:2rem; border-radius:var(--border-radius-sm); border-top-left-radius:0 !important; box-shadow:0px 15px 35px 0px rgba(130,136,171,0.3);}
.content-narrow {max-width:960px; margin:0 auto;}


@media (min-width:768px) {
    .container {padding:0 2rem;}
    .columns-two {grid-template-columns:1fr 1fr;}
    .columns-two-offset {grid-template-columns:0.9fr 2.1fr;}
    .columns-two-offset-right {grid-template-columns:2.1fr 0.9fr;}
    .frame {padding:4rem; border-radius:var(--border-radius-lg);}
}


/* Modal & Video Iframe */
.modal {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); justify-content:center; align-items:center; z-index:1000;}
.modal.active {display:flex; opacity:1;}
.modal-content {position:relative; width:90%; max-width:1200px; padding:3rem 0;}
.modal-close {position:absolute; top:0; right:0; font-size:24px; display:flex; justify-content:center; align-items:center; color:var(--neutral-100); cursor:pointer; padding:0; width:40px; height:40px; transition:var(--transition-default);}
.video-container {position:relative; width:100%; padding-bottom:56.25%; height:0;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ccc;}

/* Badges */
.profile-badges-container {display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap;}
.profile-badges-container a img {transition:var(--transition-default); max-height:80px; width:auto;}
.profile-badges-container a:hover img {opacity:0.5;}

/* Block List */
.block-list ul {list-style:none; padding:0;}
.block-list ul li a {display:block; background:var(--primary-100); margin-bottom:0.5rem; line-height:1.2; border-radius:8px; padding:2rem;}
.block-list ul li a:hover {color:var(--neutral-100); background:var(--primary-300);}

@media (min-width:768px) {
  .block-list {display:flex; gap:2rem}
  .block-list ul {flex:1 1 auto;}
}