:root {
    /* Default Colours */
    --neutral-100: #fff;
    --neutral-150: #f7f7f9;
    --neutral-200: #EDEDF1;
    --neutral-500: #d9d9d9;
    --neutral-900: #000;

    --primary-200: #EDEDF1;
    --primary-400: #494975;
    --primary-700: #212256;

    --secondary-400: #FFAE00;
    --secondary-700: #FF7700;

    /* Default */
    --transition-default: all 0.3s ease-out;
    
    --border-radius-large: 25px;
    --border-radius-medium: 20px;
    --border-radius-small: 15px;
    
    /* Fonts */
    --sansFontFamily: "Montserrat", sans-serif;
    --serifFontFamily: "Kameron", serif; 
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-base: 1rem;

    /* Font size set mobile */
    --fs-level1-title-large: 3.125rem; /* 50px */
    --fs-level2-title-large: 1.875rem; /* 30px */
    
    --fs-level1-title: 2.5rem; /* 40px */
    --fs-level2-title: 1.375rem; /* 22px */
    --fs-level3-title: 1.063rem;  /* 17px */
    
    --fs-body-text-xlarge: 1.875rem;  /* 30px */
    --fs-body-text-large: 1.5rem;   /* 24px */
    --fs-body-text-medium: 1.25rem;   /* 20px */
    --fs-body-text-regular: 1rem;   /* 16px */
    --fs-body-text-small: 0.875rem;   /* 14px */
    --fs-body-text-xsmall: 0.75rem;   /* 12px */
}

/* Background Colours */
.background-primary-200 {background-color:var(--primary-200);}
.background-primary-400 {background-color:var(--primary-400); color:var(--neutral-100);}
.background-secondary-400 {background-color:var(--secondary-400);}

/* Titles and fonts sizes */
.level1-title {font-family:var(--serifFontFamily); font-weight:var(--fw-medium); font-size:var(--fs-level1-title); line-height:1;}
.level1-title span {font-size:var(--fs-body-text-large); display: block;}
.level2-title {font-family:var(--serifFontFamily); font-weight:var(--fw-medium); font-size:var(--fs-level2-title); line-height:1;}
.level3-title {font-family:var(--sansFontFamily); font-weight:var(--fw-semibold); font-size:var(--fs-level3-title); line-height:1; text-transform:uppercase;}
.body-intro {font-family:var(--serifFontFamily); font-weight:var(--fw-medium); font-size:var(--fs-body-text-medium); line-height: 1.4;}

.secondary-title {color:var(--secondary-400);}

@media(min-width:768px) {
    .body-intro {font-size:var(--fs-body-text-large);}
    .level1-title {font-size:var(--fs-level1-title-large);}
    .level1-title span {font-size:var(--fs-body-text-xlarge);}
    .level2-title {font-size:var(--fs-level2-title-large);}
}

/* Alignment */
.text-center {text-align:center;}

/* Images */
.img-fit {object-fit:cover; width:100%; height:auto;}

/* Buttons */
.btn {font-size:0.85rem; text-decoration:none !important; font-weight:var(--fw-semibold); font-family:var(--serifFontFamily); font-weight:var(--fw-medium); font-size:25px; display:inline-block; border-radius:7px; transition:var(--transition-default); background:var(--secondary-700); color:var(--neutral-100); padding:0.75rem 2rem; border:none;}
.btn:hover {background:var(--secondary-400); color:var(--neutral-100);}
.btn-controls {display:flex; gap:0.5rem; align-items:center;}
.btn-controls ul {display:flex; gap:0.5rem; padding:0; margin:0;}
.btn-controls ul li {margin:0;}
.btn-control {background-color:var(--primary-700); color:var(--secondary-700); border-radius:7px; width:40px; height:40px; border:0; transition:var(--transition-default); background-image:url(/images/arrow-secondary-700.svg); background-repeat:no-repeat; background-size:auto 20px; background-position:50% 50%; display:block;}
.btn-control:not(.btn-disabled) {cursor:pointer;}
.btn-control:not(.btn-disabled):hover {background-color:var(--secondary-700); color:var(--primary-700); background-image:url(/images/arrow-white.svg);}
.btn-control.btn-next {rotate:180deg;}
.btn-disabled {opacity:0.2;}

/* 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;}

.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;}

.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;}

.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%, 1224px); margin:0 auto; padding:0 2rem;}
section {padding:50px 0 35px 0;}

.auto-fit-grid {display: grid; gap:3rem;}

@media (min-width:440px) {
    .auto-fit-grid {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
}



/* Panels and Corner Frame */
.panel-border {display:flex;}
.panel-icon svg {height:100%; width:auto; max-height:120px; max-width:none; margin-bottom:1rem; display:block; margin-left:0; margin-right:auto; margin-bottom:1rem;}

.border-frame-left-container {position:relative; flex:0 0 28px; overflow:hidden;}
.border-frame-left-container::before {content:''; position:absolute; left:0; top:0; width:60px; height:100%; border-left:1px solid var(--secondary-400); border-bottom-left-radius:var(--border-radius-large); border-bottom:1px solid var(--secondary-400);}
                
.panel {padding:2rem;}
.panel>*:last-child {margin-bottom:0;}

.corner-frame {border-top-left-radius:var(--border-radius-small); border-bottom-right-radius:var(--border-radius-small); overflow:hidden;}
.corner-frame-alt {border-bottom-left-radius:var(--border-radius-small); border-top-right-radius:var(--border-radius-small); overflow:hidden;}

@media(min-width:768px) {
    .corner-frame {border-top-left-radius:var(--border-radius-large); border-bottom-right-radius:var(--border-radius-large);}
    .corner-frame-alt {border-bottom-left-radius:var(--border-radius-large); border-top-right-radius:var(--border-radius-large);}
}