.elementor-kit-10{--e-global-color-primary:#211E72;--e-global-color-secondary:#ED2939;--e-global-color-text:#353744;--e-global-color-accent:#C70936;--e-global-color-navy50:#F4F4FA;--e-global-color-navy100:#E8E8F5;--e-global-color-navy200:#CFD0EA;--e-global-color-navy300:#ABADD9;--e-global-color-navy400:#8184C2;--e-global-color-navy500:#5F62AA;--e-global-color-navy600:#45489A;--e-global-color-navy700:#333487;--e-global-color-navy800:#211E72;--e-global-color-navy900:#17145B;--e-global-color-navy950:#0E0B40;--e-global-color-red50:#FEF2F3;--e-global-color-red100:#FDE3E5;--e-global-color-red200:#FBC8CC;--e-global-color-red300:#F7A1A8;--e-global-color-red400:#F26672;--e-global-color-red500:#ED2939;--e-global-color-red600:#C70936;--e-global-color-red700:#A1042A;--e-global-color-red800:#7C051F;--e-global-color-red900:#590113;--e-global-color-red950:#390109;--e-global-color-neutral50:#F8F8FB;--e-global-color-neutral100:#F2F2F7;--e-global-color-neutral200:#E5E6EE;--e-global-color-neutral300:#D3D4DF;--e-global-color-neutral400:#A5A7B8;--e-global-color-neutral500:#808394;--e-global-color-neutral600:#636575;--e-global-color-neutral700:#4D4F5E;--e-global-color-neutral800:#353744;--e-global-color-neutral900:#22232E;--e-global-color-neutral950:#12131D;--e-global-color-white:#FFFFFF;--e-global-color-black:#000000;--e-global-color-success600:#12805C;--e-global-color-success50:#ECFDF3;--e-global-color-warning600:#B54708;--e-global-color-warning50:#FFFAEB;--e-global-color-error600:#B42318;--e-global-color-error50:#FEF3F2;--e-global-color-info600:#1E66C9;--e-global-color-info50:#EFF6FF;--e-global-typography-primary-font-family:"Figtree";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Figtree";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-size:1.25vw;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.3em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Figtree";--e-global-typography-accent-font-size:1.25vw;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.3em;--e-global-typography-accent-letter-spacing:0em;--e-global-typography-eyebrowxl-font-family:"Figtree";--e-global-typography-eyebrowxl-font-size:1.75vw;--e-global-typography-eyebrowxl-font-weight:500;--e-global-typography-eyebrowxl-text-transform:uppercase;--e-global-typography-eyebrowxl-line-height:1em;--e-global-typography-eyebrowxl-letter-spacing:0.2em;--e-global-typography-eyebrowl-font-family:"Figtree";--e-global-typography-eyebrowl-font-size:1.5vw;--e-global-typography-eyebrowl-font-weight:500;--e-global-typography-eyebrowl-text-transform:uppercase;--e-global-typography-eyebrowl-line-height:1em;--e-global-typography-eyebrowl-letter-spacing:0.2em;--e-global-typography-eyebrowm-font-family:"Figtree";--e-global-typography-eyebrowm-font-size:1.25vw;--e-global-typography-eyebrowm-font-weight:500;--e-global-typography-eyebrowm-text-transform:uppercase;--e-global-typography-eyebrowm-line-height:1em;--e-global-typography-eyebrowm-letter-spacing:0.2em;--e-global-typography-eyebrows-font-family:"Figtree";--e-global-typography-eyebrows-font-size:1vw;--e-global-typography-eyebrows-font-weight:500;--e-global-typography-eyebrows-text-transform:uppercase;--e-global-typography-eyebrows-line-height:1em;--e-global-typography-eyebrows-letter-spacing:0.2em;--e-global-typography-eyebrowxs-font-family:"Figtree";--e-global-typography-eyebrowxs-font-size:0.75vw;--e-global-typography-eyebrowxs-font-weight:500;--e-global-typography-eyebrowxs-text-transform:capitalize;--e-global-typography-eyebrowxs-line-height:1em;--e-global-typography-eyebrowxs-letter-spacing:0.2em;--e-global-typography-displaylmed-font-family:"Figtree";--e-global-typography-displaylmed-font-size:5vw;--e-global-typography-displaylmed-font-weight:500;--e-global-typography-displaylmed-line-height:1.1em;--e-global-typography-displaylmed-letter-spacing:-0.02em;--e-global-typography-displaylreg-font-family:"Figtree";--e-global-typography-displaylreg-font-size:5vw;--e-global-typography-displaylreg-font-weight:400;--e-global-typography-displaylreg-line-height:1.1em;--e-global-typography-displaylreg-letter-spacing:-0.02em;--e-global-typography-displaymmed-font-family:"Figtree";--e-global-typography-displaymmed-font-size:4.5vw;--e-global-typography-displaymmed-font-weight:500;--e-global-typography-displaymmed-line-height:1.1em;--e-global-typography-displaymmed-letter-spacing:-0.02em;--e-global-typography-displaymreg-font-family:"Figtree";--e-global-typography-displaymreg-font-size:4.5vw;--e-global-typography-displaymreg-font-weight:400;--e-global-typography-displaymreg-line-height:1.1em;--e-global-typography-displaymreg-letter-spacing:-0.02em;--e-global-typography-h1reg-font-family:"Figtree";--e-global-typography-h1reg-font-size:4vw;--e-global-typography-h1reg-font-weight:400;--e-global-typography-h1reg-line-height:1.1em;--e-global-typography-h1reg-letter-spacing:-0.02em;--e-global-typography-h1semi-font-family:"Figtree";--e-global-typography-h1semi-font-size:4vw;--e-global-typography-h1semi-font-weight:600;--e-global-typography-h1semi-line-height:1.1em;--e-global-typography-h1semi-letter-spacing:-0.02em;--e-global-typography-h2reg-font-family:"Figtree";--e-global-typography-h2reg-font-size:3.5vw;--e-global-typography-h2reg-font-weight:400;--e-global-typography-h2reg-line-height:1.1em;--e-global-typography-h2reg-letter-spacing:-0.02em;--e-global-typography-h2semi-font-family:"Figtree";--e-global-typography-h2semi-font-size:3.5vw;--e-global-typography-h2semi-font-weight:600;--e-global-typography-h2semi-line-height:1.1em;--e-global-typography-h2semi-letter-spacing:-0.02em;--e-global-typography-h3reg-font-family:"Figtree";--e-global-typography-h3reg-font-size:3.25vw;--e-global-typography-h3reg-font-weight:400;--e-global-typography-h3reg-line-height:1.1em;--e-global-typography-h3reg-letter-spacing:-0.02em;--e-global-typography-h3semi-font-family:"Figtree";--e-global-typography-h3semi-font-size:3.25vw;--e-global-typography-h3semi-font-weight:600;--e-global-typography-h3semi-line-height:1.1em;--e-global-typography-h3semi-letter-spacing:-0.02em;--e-global-typography-h4reg-font-family:"Figtree";--e-global-typography-h4reg-font-size:2.75vw;--e-global-typography-h4reg-font-weight:400;--e-global-typography-h4reg-line-height:1.1em;--e-global-typography-h4reg-letter-spacing:-0.02em;--e-global-typography-h4semi-font-family:"Figtree";--e-global-typography-h4semi-font-size:2.75vw;--e-global-typography-h4semi-font-weight:600;--e-global-typography-h4semi-line-height:1.1em;--e-global-typography-h4semi-letter-spacing:-0.02em;--e-global-typography-h5reg-font-family:"Figtree";--e-global-typography-h5reg-font-size:2.25vw;--e-global-typography-h5reg-font-weight:400;--e-global-typography-h5reg-line-height:1.1em;--e-global-typography-h5reg-letter-spacing:-0.02em;--e-global-typography-h5semi-font-family:"Figtree";--e-global-typography-h5semi-font-size:2.25vw;--e-global-typography-h5semi-font-weight:600;--e-global-typography-h5semi-line-height:1.1em;--e-global-typography-h5semi-letter-spacing:-0.02em;--e-global-typography-h6reg-font-family:"Figtree";--e-global-typography-h6reg-font-size:2vw;--e-global-typography-h6reg-font-weight:400;--e-global-typography-h6reg-line-height:1.1em;--e-global-typography-h6reg-letter-spacing:-0.02em;--e-global-typography-h6semi-font-family:"Figtree";--e-global-typography-h6semi-font-size:2vw;--e-global-typography-h6semi-font-weight:600;--e-global-typography-h6semi-line-height:1.1em;--e-global-typography-h6semi-letter-spacing:-0.02em;--e-global-typography-subl-font-family:"Figtree";--e-global-typography-subl-font-size:2.25vw;--e-global-typography-subl-font-weight:700;--e-global-typography-subl-line-height:1.2em;--e-global-typography-subl-letter-spacing:-0.02em;--e-global-typography-subm-font-family:"Figtree";--e-global-typography-subm-font-size:2vw;--e-global-typography-subm-font-weight:700;--e-global-typography-subm-line-height:1.2em;--e-global-typography-subm-letter-spacing:-0.02em;--e-global-typography-subs-font-family:"Figtree";--e-global-typography-subs-font-size:1.5vw;--e-global-typography-subs-font-weight:700;--e-global-typography-subs-line-height:1.1em;--e-global-typography-subs-letter-spacing:0em;--e-global-typography-subxs-font-family:"Figtree";--e-global-typography-subxs-font-size:1.25vw;--e-global-typography-subxs-font-weight:700;--e-global-typography-subxs-line-height:1.2em;--e-global-typography-subxs-letter-spacing:0em;--e-global-typography-bodyxlreg-font-family:"Figtree";--e-global-typography-bodyxlreg-font-size:1.5vw;--e-global-typography-bodyxlreg-font-weight:400;--e-global-typography-bodyxlreg-line-height:1.3em;--e-global-typography-bodyxlreg-letter-spacing:0em;--e-global-typography-bodyxlmed-font-family:"Figtree";--e-global-typography-bodyxlmed-font-size:1.5vw;--e-global-typography-bodyxlmed-font-weight:500;--e-global-typography-bodyxlmed-line-height:1.3em;--e-global-typography-bodyxlmed-letter-spacing:0em;--e-global-typography-bodylreg-font-family:"Figtree";--e-global-typography-bodylreg-font-size:1.4vw;--e-global-typography-bodylreg-font-weight:400;--e-global-typography-bodylreg-line-height:1.3em;--e-global-typography-bodylreg-letter-spacing:0em;--e-global-typography-bodylmed-font-family:"Figtree";--e-global-typography-bodylmed-font-size:1.4vw;--e-global-typography-bodylmed-font-weight:500;--e-global-typography-bodylmed-line-height:1.3em;--e-global-typography-bodylmed-letter-spacing:0em;--e-global-typography-bodylsemi-font-family:"Figtree";--e-global-typography-bodylsemi-font-size:1.4vw;--e-global-typography-bodylsemi-font-weight:600;--e-global-typography-bodylsemi-line-height:1.3em;--e-global-typography-bodylsemi-letter-spacing:0em;--e-global-typography-bodymreg-font-family:"Figtree";--e-global-typography-bodymreg-font-size:1.25vw;--e-global-typography-bodymreg-font-weight:400;--e-global-typography-bodymreg-line-height:1.3em;--e-global-typography-bodymreg-letter-spacing:0em;--e-global-typography-bodymmed-font-family:"Figtree";--e-global-typography-bodymmed-font-size:1.25vw;--e-global-typography-bodymmed-font-weight:500;--e-global-typography-bodymmed-line-height:1.3em;--e-global-typography-bodymmed-letter-spacing:0em;--e-global-typography-bodymsemi-font-family:"Figtree";--e-global-typography-bodymsemi-font-size:1.25vw;--e-global-typography-bodymsemi-font-weight:600;--e-global-typography-bodymsemi-line-height:1.1em;--e-global-typography-bodymsemi-letter-spacing:0em;--e-global-typography-bodysreg-font-family:"Figtree";--e-global-typography-bodysreg-font-size:1.1vw;--e-global-typography-bodysreg-font-weight:400;--e-global-typography-bodysreg-line-height:1.3em;--e-global-typography-bodysreg-letter-spacing:0em;--e-global-typography-bodysmed-font-family:"Figtree";--e-global-typography-bodysmed-font-size:1.1vw;--e-global-typography-bodysmed-font-weight:500;--e-global-typography-bodysmed-line-height:1.3em;--e-global-typography-bodysmed-letter-spacing:0em;--e-global-typography-bodyssemi-font-family:"Figtree";--e-global-typography-bodyssemi-font-size:1.1vw;--e-global-typography-bodyssemi-font-weight:600;--e-global-typography-bodyssemi-line-height:1.3em;--e-global-typography-bodyssemi-letter-spacing:0em;--e-global-typography-bodyxsreg-font-family:"Figtree";--e-global-typography-bodyxsreg-font-size:1vw;--e-global-typography-bodyxsreg-font-weight:400;--e-global-typography-bodyxsreg-line-height:1.3em;--e-global-typography-bodyxsreg-letter-spacing:0em;--e-global-typography-bodyxsmed-font-family:"Figtree";--e-global-typography-bodyxsmed-font-size:1vw;--e-global-typography-bodyxsmed-font-weight:500;--e-global-typography-bodyxsmed-line-height:1.3em;--e-global-typography-bodyxsmed-letter-spacing:0em;--e-global-typography-bodyxxsreg-font-family:"Figtree";--e-global-typography-bodyxxsreg-font-size:0.85vw;--e-global-typography-bodyxxsreg-font-weight:400;--e-global-typography-bodyxxsreg-line-height:1.3em;--e-global-typography-bodyxxsreg-letter-spacing:0em;--e-global-typography-bodyxxsmed-font-family:"Figtree";--e-global-typography-bodyxxsmed-font-size:0.85vw;--e-global-typography-bodyxxsmed-font-weight:500;--e-global-typography-bodyxxsmed-line-height:1.3em;--e-global-typography-bodyxxsmed-letter-spacing:0em;--e-global-typography-bodyxxxsreg-font-family:"Figtree";--e-global-typography-bodyxxxsreg-font-size:0.75vw;--e-global-typography-bodyxxxsreg-font-weight:400;--e-global-typography-bodyxxxsreg-line-height:1.3em;--e-global-typography-bodyxxxsreg-letter-spacing:0em;--e-global-typography-bodyxxxsmed-font-family:"Figtree";--e-global-typography-bodyxxxsmed-font-size:0.75vw;--e-global-typography-bodyxxxsmed-font-weight:500;--e-global-typography-bodyxxxsmed-line-height:1.3em;--e-global-typography-bodyxxxsmed-letter-spacing:0em;--e-global-typography-eyebrow20-font-family:"Figtree";--e-global-typography-eyebrow20-font-size:1.4vw;--e-global-typography-eyebrow20-font-weight:700;--e-global-typography-eyebrow20-line-height:1.1em;--e-global-typography-eyebrow20-letter-spacing:0em;--e-global-typography-cardtitle-font-family:"Figtree";--e-global-typography-cardtitle-font-size:2.25vw;--e-global-typography-cardtitle-font-weight:700;--e-global-typography-cardtitle-line-height:1.1em;--e-global-typography-cardtitle-letter-spacing:-0.02em;--e-global-typography-cardtitles-font-family:"Figtree";--e-global-typography-cardtitles-font-size:1.65vw;--e-global-typography-cardtitles-font-weight:700;--e-global-typography-cardtitles-line-height:1.1em;--e-global-typography-cardtitles-letter-spacing:-0.02em;--e-global-typography-quote-font-family:"Figtree";--e-global-typography-quote-font-size:2.25vw;--e-global-typography-quote-font-weight:600;--e-global-typography-quote-line-height:1.1em;--e-global-typography-quote-letter-spacing:-0.02em;--e-global-typography-caption-font-family:"Figtree";--e-global-typography-caption-font-size:1.65vw;--e-global-typography-caption-font-weight:400;--e-global-typography-caption-line-height:1.1em;--e-global-typography-caption-letter-spacing:-0.02em;--e-global-typography-stat-font-family:"Figtree";--e-global-typography-stat-font-size:5vw;--e-global-typography-stat-font-weight:600;--e-global-typography-stat-line-height:1.1em;--e-global-typography-stat-letter-spacing:-0.02em;--e-global-typography-tagxs-font-family:"Figtree";--e-global-typography-tagxs-font-size:1vw;--e-global-typography-tagxs-font-weight:700;--e-global-typography-tagxs-line-height:1.1em;--e-global-typography-tagxs-letter-spacing:-0.02em;--e-global-typography-displaymsemi-font-family:"Figtree";--e-global-typography-displaymsemi-font-size:4.5vw;--e-global-typography-displaymsemi-font-weight:600;--e-global-typography-displaymsemi-line-height:1.1em;--e-global-typography-displaymsemi-letter-spacing:-0.02em;--e-global-typography-btnl-font-family:"Figtree";--e-global-typography-btnl-font-size:1.25vw;--e-global-typography-btnl-font-weight:600;--e-global-typography-btnl-line-height:1.2em;--e-global-typography-btnl-letter-spacing:0em;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-10 button,.elementor-kit-10 input[type="button"],.elementor-kit-10 input[type="submit"],.elementor-kit-10 .elementor-button{background-color:var( --e-global-color-red500 );font-family:var( --e-global-typography-btnl-font-family ), Sans-serif;font-size:var( --e-global-typography-btnl-font-size );font-weight:var( --e-global-typography-btnl-font-weight );line-height:var( --e-global-typography-btnl-line-height );letter-spacing:var( --e-global-typography-btnl-letter-spacing );color:var( --e-global-color-white );box-shadow:3px 5px 0px 0px #FC9690;border-style:none;border-radius:50vw 50vw 50vw 50vw;padding:1.2vw 1.7vw 1.2vw 1.7vw;}.elementor-kit-10 button:hover,.elementor-kit-10 button:focus,.elementor-kit-10 input[type="button"]:hover,.elementor-kit-10 input[type="button"]:focus,.elementor-kit-10 input[type="submit"]:hover,.elementor-kit-10 input[type="submit"]:focus,.elementor-kit-10 .elementor-button:hover,.elementor-kit-10 .elementor-button:focus{background-color:var( --e-global-color-red500 );color:var( --e-global-color-white );}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-h1semi-font-family ), Sans-serif;font-size:var( --e-global-typography-h1semi-font-size );font-weight:var( --e-global-typography-h1semi-font-weight );line-height:var( --e-global-typography-h1semi-line-height );letter-spacing:var( --e-global-typography-h1semi-letter-spacing );}.elementor-kit-10 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-h2semi-font-family ), Sans-serif;font-size:var( --e-global-typography-h2semi-font-size );font-weight:var( --e-global-typography-h2semi-font-weight );line-height:var( --e-global-typography-h2semi-line-height );letter-spacing:var( --e-global-typography-h2semi-letter-spacing );}.elementor-kit-10 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-h3semi-font-family ), Sans-serif;font-size:var( --e-global-typography-h3semi-font-size );font-weight:var( --e-global-typography-h3semi-font-weight );line-height:var( --e-global-typography-h3semi-line-height );letter-spacing:var( --e-global-typography-h3semi-letter-spacing );}.elementor-kit-10 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-h4semi-font-family ), Sans-serif;font-size:var( --e-global-typography-h4semi-font-size );font-weight:var( --e-global-typography-h4semi-font-weight );line-height:var( --e-global-typography-h4semi-line-height );letter-spacing:var( --e-global-typography-h4semi-letter-spacing );}.elementor-kit-10 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-h5semi-font-family ), Sans-serif;font-size:var( --e-global-typography-h5semi-font-size );font-weight:var( --e-global-typography-h5semi-font-weight );line-height:var( --e-global-typography-h5semi-line-height );letter-spacing:var( --e-global-typography-h5semi-letter-spacing );}.elementor-kit-10 h6{color:var( --e-global-color-primary );font-family:var( --e-global-typography-h6semi-font-family ), Sans-serif;font-size:var( --e-global-typography-h6semi-font-size );font-weight:var( --e-global-typography-h6semi-font-weight );line-height:var( --e-global-typography-h6semi-line-height );letter-spacing:var( --e-global-typography-h6semi-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0vw;--container-default-padding-right:0vw;--container-default-padding-bottom:0vw;--container-default-padding-left:0vw;}.elementor-widget:not(:last-child){--kit-widget-spacing:0vw;}.elementor-element{--widgets-spacing:0vw 0vw;--widgets-spacing-row:0vw;--widgets-spacing-column:0vw;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-10{--e-global-typography-text-font-size:2.25vw;--e-global-typography-accent-font-size:2.25vw;--e-global-typography-eyebrowxl-font-size:2.5vw;--e-global-typography-eyebrowl-font-size:2.25vw;--e-global-typography-eyebrowm-font-size:2vw;--e-global-typography-eyebrows-font-size:1.75vw;--e-global-typography-eyebrowxs-font-size:1.5vw;--e-global-typography-displaylmed-font-size:5.75vw;--e-global-typography-displaylreg-font-size:5.75vw;--e-global-typography-displaymmed-font-size:5.75vw;--e-global-typography-displaymreg-font-size:5.75vw;--e-global-typography-h1reg-font-size:5.25vw;--e-global-typography-h1semi-font-size:5.25vw;--e-global-typography-h2reg-font-size:4.5vw;--e-global-typography-h2semi-font-size:4.5vw;--e-global-typography-h3reg-font-size:4vw;--e-global-typography-h3semi-font-size:4vw;--e-global-typography-h4reg-font-size:3.5vw;--e-global-typography-h4semi-font-size:3.5vw;--e-global-typography-h5reg-font-size:3.25vw;--e-global-typography-h5semi-font-size:3.25vw;--e-global-typography-h6reg-font-size:2.75vw;--e-global-typography-h6semi-font-size:2.75vw;--e-global-typography-subl-font-size:3.5vw;--e-global-typography-subm-font-size:2.75vw;--e-global-typography-subs-font-size:2.5vw;--e-global-typography-subxs-font-size:2.25vw;--e-global-typography-bodyxlreg-font-size:2.5vw;--e-global-typography-bodyxlmed-font-size:2.5vw;--e-global-typography-bodylreg-font-size:2.5vw;--e-global-typography-bodylmed-font-size:2.5vw;--e-global-typography-bodylsemi-font-size:2.5vw;--e-global-typography-bodymreg-font-size:2.25vw;--e-global-typography-bodymmed-font-size:2.25vw;--e-global-typography-bodymsemi-font-size:2.25vw;--e-global-typography-bodysreg-font-size:2.1vw;--e-global-typography-bodysmed-font-size:2.1vw;--e-global-typography-bodyssemi-font-size:2.1vw;--e-global-typography-bodyxsreg-font-size:1.4vw;--e-global-typography-bodyxsmed-font-size:2vw;--e-global-typography-bodyxxsreg-font-size:1.3vw;--e-global-typography-bodyxxsmed-font-size:1.75vw;--e-global-typography-bodyxxxsreg-font-size:1.5vw;--e-global-typography-bodyxxxsmed-font-size:1.5vw;--e-global-typography-eyebrow20-font-size:2.25vw;--e-global-typography-cardtitle-font-size:3.5vw;--e-global-typography-cardtitles-font-size:2.75vw;--e-global-typography-quote-font-size:3.25vw;--e-global-typography-caption-font-size:2.5vw;--e-global-typography-stat-font-size:5.75vw;--e-global-typography-tagxs-font-size:1.75vw;--e-global-typography-displaymsemi-font-size:5.75vw;--e-global-typography-btnl-font-size:2.25vw;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-10 h1{font-size:var( --e-global-typography-h1semi-font-size );line-height:var( --e-global-typography-h1semi-line-height );letter-spacing:var( --e-global-typography-h1semi-letter-spacing );}.elementor-kit-10 h2{font-size:var( --e-global-typography-h2semi-font-size );line-height:var( --e-global-typography-h2semi-line-height );letter-spacing:var( --e-global-typography-h2semi-letter-spacing );}.elementor-kit-10 h3{font-size:var( --e-global-typography-h3semi-font-size );line-height:var( --e-global-typography-h3semi-line-height );letter-spacing:var( --e-global-typography-h3semi-letter-spacing );}.elementor-kit-10 h4{font-size:var( --e-global-typography-h4semi-font-size );line-height:var( --e-global-typography-h4semi-line-height );letter-spacing:var( --e-global-typography-h4semi-letter-spacing );}.elementor-kit-10 h5{font-size:var( --e-global-typography-h5semi-font-size );line-height:var( --e-global-typography-h5semi-line-height );letter-spacing:var( --e-global-typography-h5semi-letter-spacing );}.elementor-kit-10 h6{font-size:var( --e-global-typography-h6semi-font-size );line-height:var( --e-global-typography-h6semi-line-height );letter-spacing:var( --e-global-typography-h6semi-letter-spacing );}.elementor-kit-10 button,.elementor-kit-10 input[type="button"],.elementor-kit-10 input[type="submit"],.elementor-kit-10 .elementor-button{font-size:var( --e-global-typography-btnl-font-size );line-height:var( --e-global-typography-btnl-line-height );letter-spacing:var( --e-global-typography-btnl-letter-spacing );padding:2vw 3vw 2vw 3vw;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}@media(max-width:767px){.elementor-kit-10{--e-global-typography-text-font-size:4vw;--e-global-typography-accent-font-size:4vw;--e-global-typography-eyebrowxl-font-size:4.5vw;--e-global-typography-eyebrowl-font-size:4vw;--e-global-typography-eyebrowm-font-size:3.5vw;--e-global-typography-eyebrows-font-size:3vw;--e-global-typography-eyebrowxs-font-size:2.5vw;--e-global-typography-displaylmed-font-size:10vw;--e-global-typography-displaylreg-font-size:10vw;--e-global-typography-displaymmed-font-size:10vw;--e-global-typography-displaymreg-font-size:10vw;--e-global-typography-h1reg-font-size:9vw;--e-global-typography-h1semi-font-size:8.14vw;--e-global-typography-h2reg-font-size:8vw;--e-global-typography-h2semi-font-size:8vw;--e-global-typography-h3reg-font-size:7vw;--e-global-typography-h3semi-font-size:7vw;--e-global-typography-h4reg-font-size:6vw;--e-global-typography-h4semi-font-size:8.14vw;--e-global-typography-h5reg-font-size:5.5vw;--e-global-typography-h5semi-font-size:7.12vw;--e-global-typography-h6reg-font-size:5vw;--e-global-typography-h6semi-font-size:5.09vw;--e-global-typography-subl-font-size:6vw;--e-global-typography-subm-font-size:5vw;--e-global-typography-subs-font-size:4.58vw;--e-global-typography-subxs-font-size:4vw;--e-global-typography-bodyxlreg-font-size:4.5vw;--e-global-typography-bodyxlmed-font-size:4.5vw;--e-global-typography-bodylreg-font-size:4.07vw;--e-global-typography-bodylmed-font-size:4.5vw;--e-global-typography-bodylsemi-font-size:4.5vw;--e-global-typography-bodymreg-font-size:4vw;--e-global-typography-bodymmed-font-size:4vw;--e-global-typography-bodymsemi-font-size:4.07vw;--e-global-typography-bodysreg-font-size:3.82vw;--e-global-typography-bodysmed-font-size:3.75vw;--e-global-typography-bodyssemi-font-size:3.75vw;--e-global-typography-bodyxsreg-font-size:3.56vw;--e-global-typography-bodyxsmed-font-size:3.5vw;--e-global-typography-bodyxxsreg-font-size:3vw;--e-global-typography-bodyxxsmed-font-size:3vw;--e-global-typography-bodyxxxsreg-font-size:2.75vw;--e-global-typography-bodyxxxsmed-font-size:2.75vw;--e-global-typography-eyebrow20-font-size:4.58vw;--e-global-typography-cardtitle-font-size:5.6vw;--e-global-typography-cardtitles-font-size:5.09vw;--e-global-typography-quote-font-size:5.6vw;--e-global-typography-caption-font-size:4.07vw;--e-global-typography-stat-font-size:10.18vw;--e-global-typography-tagxs-font-size:3.56vw;--e-global-typography-displaymsemi-font-size:12.21vw;--e-global-typography-btnl-font-size:4.07vw;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-10 h1{font-size:var( --e-global-typography-h1semi-font-size );line-height:var( --e-global-typography-h1semi-line-height );letter-spacing:var( --e-global-typography-h1semi-letter-spacing );}.elementor-kit-10 h2{font-size:var( --e-global-typography-h2semi-font-size );line-height:var( --e-global-typography-h2semi-line-height );letter-spacing:var( --e-global-typography-h2semi-letter-spacing );}.elementor-kit-10 h3{font-size:var( --e-global-typography-h3semi-font-size );line-height:var( --e-global-typography-h3semi-line-height );letter-spacing:var( --e-global-typography-h3semi-letter-spacing );}.elementor-kit-10 h4{font-size:var( --e-global-typography-h4semi-font-size );line-height:var( --e-global-typography-h4semi-line-height );letter-spacing:var( --e-global-typography-h4semi-letter-spacing );}.elementor-kit-10 h5{font-size:var( --e-global-typography-h5semi-font-size );line-height:var( --e-global-typography-h5semi-line-height );letter-spacing:var( --e-global-typography-h5semi-letter-spacing );}.elementor-kit-10 h6{font-size:var( --e-global-typography-h6semi-font-size );line-height:var( --e-global-typography-h6semi-line-height );letter-spacing:var( --e-global-typography-h6semi-letter-spacing );}.elementor-kit-10 button,.elementor-kit-10 input[type="button"],.elementor-kit-10 input[type="submit"],.elementor-kit-10 .elementor-button{font-size:var( --e-global-typography-btnl-font-size );line-height:var( --e-global-typography-btnl-line-height );letter-spacing:var( --e-global-typography-btnl-letter-spacing );padding:4vw 5vw 4vw 5vw;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}/* Start custom CSS *//* ========================================================================== GLOBAL - BUTTONS Built from Figma component "Button" (node 3016:1332). Default (no class) = Accent: red fill, solid #FC9690 shadow s107-btn-outline = Secondary: navy outline + navy text s107-btn-outline-light = Secondary / Light: white outline + white text s107-btn-navy = Primary: navy gradient fill, solid #837FE2 shadow Sizes: default = Large (56), s107-btn-md = Medium (48), s107-btn-sm = Small (40) Outline types: the main outline is an inset ring (inside the button, like Figma). The "shadow" is a second outline ring offset behind the button and masked out wherever it falls inside the button - Figma's shadow is not shown behind transparent areas, so only the slivers outside are visible. The mask needs the pill height, so each size has a fixed vw height. Press effect (Figma): hover/active slides the button into its shadow and collapses the shadow, 150ms ease-out. Secondary types fill on hover (see "Hover fill per type"). ========================================================================== */ body :is(.elementor-widget-button, .elementor-widget-loop-grid) { --s107-btn-h: 3.9vw; --s107-btn-px: 1.7vw; --s107-btn-sx: 3px; --s107-btn-sy: 5px; --s107-btn-bw: 0.1vw; } body :is(.elementor-widget-button, .e-loop__load-more) .elementor-button, body :is(.elementor-widget-button, .e-loop__load-more) .elementor-button:is(:hover, :focus, :active, :visited) { display: inline-flex; align-items: center; justify-content: center; height: var(--s107-btn-h); padding: 0 var(--s107-btn-px); position: relative; z-index: 0; border: 0; border-radius: 50vw; line-height: 1.2; transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; background: var(--s107-btn-bg, var(--e-global-color-red500)); color: var(--s107-btn-color, var(--e-global-color-white)); box-shadow: var(--s107-btn-inset, 0 0 0 0 transparent), var(--s107-btn-outer, var(--s107-btn-sx) var(--s107-btn-sy) 0 var(--s107-btn-shadow, #FC9690)); } /* Types */ body .s107-btn-outline { --s107-btn-bg: transparent; --s107-btn-color: var(--e-global-color-navy800); --s107-btn-inset: inset 0 0 0 var(--s107-btn-bw) var(--e-global-color-navy800); --s107-btn-outer: 0 0 0 0 transparent; --s107-btn-shadow: rgba(33, 30, 114, 0.6); } body .s107-btn-outline-light { --s107-btn-bg: transparent; --s107-btn-color: var(--e-global-color-white); --s107-btn-inset: inset 0 0 0 var(--s107-btn-bw) var(--e-global-color-white); --s107-btn-outer: 0 0 0 0 transparent; --s107-btn-shadow: rgba(255, 255, 255, 0.6); } body .s107-btn-navy { --s107-btn-bg: linear-gradient(126deg, var(--e-global-color-navy800) 39%, var(--e-global-color-navy700) 100%); --s107-btn-color: var(--e-global-color-white); --s107-btn-shadow: #837FE2; } /* Outline types: offset ring behind, masked out inside the button pill */ body :is(.s107-btn-outline, .s107-btn-outline-light) .elementor-button::before { --s107-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Ccircle cx='.5' cy='.5' r='.5'/%3E%3C/svg%3E"); content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 50vw; box-shadow: inset 0 0 0 var(--s107-btn-bw) var(--s107-btn-shadow); transform: translate(var(--s107-btn-sx), var(--s107-btn-sy)); transition: transform 150ms ease-out; -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, var(--s107-dot) calc(var(--s107-btn-sx) * -1) calc(var(--s107-btn-sy) * -1) / auto 100% no-repeat, var(--s107-dot) right var(--s107-btn-sx) top calc(var(--s107-btn-sy) * -1) / auto 100% no-repeat, linear-gradient(#000 0 0) calc(var(--s107-btn-h) / 2 - var(--s107-btn-sx)) calc(var(--s107-btn-sy) * -1) / calc(100% - var(--s107-btn-h)) 100% no-repeat; -webkit-mask-composite: source-out, source-over, source-over; mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, var(--s107-dot) calc(var(--s107-btn-sx) * -1) calc(var(--s107-btn-sy) * -1) / auto 100% no-repeat, var(--s107-dot) right var(--s107-btn-sx) top calc(var(--s107-btn-sy) * -1) / auto 100% no-repeat, linear-gradient(#000 0 0) calc(var(--s107-btn-h) / 2 - var(--s107-btn-sx)) calc(var(--s107-btn-sy) * -1) / calc(100% - var(--s107-btn-h)) 100% no-repeat; mask-composite: subtract, add, add; } /* Press effect (Figma Button: Hover = pressed). Mouse hover only, so taps on touch screens don't leave buttons stuck pressed; :active covers touch. */ @media (hover: hover) { body :is(.elementor-widget-button, .e-loop__load-more) .elementor-button:hover { transform: translate(var(--s107-btn-sx), var(--s107-btn-sy)); box-shadow: var(--s107-btn-inset, 0 0 0 0 transparent), 0 0 0 0 transparent; } body :is(.s107-btn-outline, .s107-btn-outline-light) .elementor-button:hover::before { transform: translate(0, 0); } } body :is(.elementor-widget-button, .e-loop__load-more) .elementor-button:active { transform: translate(var(--s107-btn-sx), var(--s107-btn-sy)); box-shadow: var(--s107-btn-inset, 0 0 0 0 transparent), 0 0 0 0 transparent; } body :is(.s107-btn-outline, .s107-btn-outline-light) .elementor-button:active::before { transform: translate(0, 0); } @media (prefers-reduced-motion: reduce) { body :is(.elementor-widget-button, .e-loop__load-more) .elementor-button, body :is(.elementor-widget-button, .e-loop__load-more) .elementor-button::before { transition: none; } } /* Search widget "Search" button (header, search results, 404): same press effect as the red buttons. Its shadow drops to none on hover in Elementor (Search > Style > Button > Hover, with the 0.15s transition); the slide into the shadow is here. */ @media (hover: hover) { body .elementor-widget-search .e-search-submit:hover { transform: translate(2px, 4px); } } body .elementor-widget-search .e-search-submit:active { transform: translate(2px, 4px); box-shadow: none; } @media (prefers-reduced-motion: reduce) { body .elementor-widget-search .e-search .e-search-submit { transition: none; } } /* Hover fill per type (Figma Button hover variants): Accent and Primary keep their fill; Secondary fills Navy 50; Secondary Light fills white with a navy label (white text would vanish on the white fill). */ body .s107-btn-outline .elementor-button:is(:hover, :active) { --s107-btn-bg: var(--e-global-color-navy50); } body .s107-btn-outline-light .elementor-button:is(:hover, :active) { --s107-btn-bg: var(--e-global-color-white); --s107-btn-color: var(--e-global-color-navy800); } @media (hover: none) { body .s107-btn-outline .elementor-button:hover:not(:active) { --s107-btn-bg: transparent; } body .s107-btn-outline-light .elementor-button:hover:not(:active) { --s107-btn-bg: transparent; --s107-btn-color: var(--e-global-color-white); } } /* Sizes */ body .s107-btn-md { --s107-btn-h: 3.35vw; --s107-btn-px: 1.1vw; --s107-btn-sx: 2px; --s107-btn-sy: 4px; } body .s107-btn-md .elementor-button { font-size: 1.1vw; } body .s107-btn-sm { --s107-btn-h: 2.8vw; --s107-btn-px: 1.1vw; --s107-btn-sx: 1px; --s107-btn-sy: 3px; } body .s107-btn-sm .elementor-button { font-size: 1vw; } @media (max-width: 1024px) { body :is(.elementor-widget-button, .elementor-widget-loop-grid) { --s107-btn-h: 6.75vw; --s107-btn-px: 3vw; --s107-btn-bw: 0.2vw; } body .s107-btn-md { --s107-btn-h: 6vw; --s107-btn-px: 2.25vw; } body .s107-btn-md .elementor-button { font-size: 2.1vw; } body .s107-btn-sm { --s107-btn-h: 5.25vw; --s107-btn-px: 2vw; } body .s107-btn-sm .elementor-button { font-size: 1.85vw; } } /* Mobile sizes from Figma mobile (393 wide): Large 56 / Medium 48 / Small 40 */ @media (max-width: 767px) { body :is(.elementor-widget-button, .elementor-widget-loop-grid) { --s107-btn-h: 14.25vw; --s107-btn-px: 6.11vw; --s107-btn-bw: 0.38vw; } body .s107-btn-md { --s107-btn-h: 12.21vw; --s107-btn-px: 4.07vw; } body .s107-btn-md .elementor-button { font-size: 4.07vw; } body .s107-btn-sm { --s107-btn-h: 10.18vw; --s107-btn-px: 4.07vw; } body .s107-btn-sm .elementor-button { font-size: 3.56vw; } /* s107-btn-m-md: Small on desktop/tablet, Medium on mobile (Beyond the classroom cards) */ body .s107-btn-m-md { --s107-btn-h: 12.21vw; --s107-btn-px: 4.07vw; --s107-btn-sx: 2px; --s107-btn-sy: 4px; } body .s107-btn-m-md .elementor-button { font-size: 4.07vw; } /* s107-btn-mob-md: Medium on mobile only (page hero buttons, Figma mobile 3rd iteration) */ body .s107-btn-mob-md { --s107-btn-h: 12.21vw; --s107-btn-px: 4.07vw; --s107-btn-sx: 2px; --s107-btn-sy: 4px; } body .s107-btn-mob-md .elementor-button { font-size: 4.07vw; } } /* ========================================================================== GLOBAL - FOOTER ========================================================================== */ /* Social icons: hard red shadow from Figma (no native control on Social Icons widget) */ .s107-social .elementor-social-icon { box-shadow: 3px 5px 0 #FC9690; transition: transform 150ms ease-out, box-shadow 150ms ease-out; } /* Same press effect as the buttons: slide into the shadow, shadow collapses */ @media (hover: hover) { .s107-social .elementor-social-icon:hover { transform: translate(3px, 5px); box-shadow: 0 0 0 0 transparent; } } .s107-social .elementor-social-icon:active { transform: translate(3px, 5px); box-shadow: 0 0 0 0 transparent; } @media (prefers-reduced-motion: reduce) { .s107-social .elementor-social-icon { transition: none; } } /* Mobile (Figma Web / Footer, mobile): uses the same crop as Figma - a mobile-only background image cut from Figma's original photo (centred, zoomed in), shown 100% wide from the top, so it ends at 123.2vw. The fade finishes exactly there. Previous note: the footer is much taller relative to its width, so the photo ends at ~35% of the footer height. Elementor does not output responsive gradient stops for background overlays, so the fade is re-set here to finish exactly where the photo ends (all sizes are vw, so the ratio holds across phones). */ @media (max-width: 767px) { body .elementor .elementor-element.s107-footer-bg::before { background-image: linear-gradient(180deg, rgba(33, 30, 114, 0) 105vw, var(--e-global-color-navy800) 123.2vw); } } /* ========================================================================== HOMEPAGE - TABS (Learning journey + Stories) Tab bar pill background - Nested Tabs has no control for the bar itself. ========================================================================== */ .s107-tabs .e-n-tabs-heading { width: fit-content; max-width: 100%; margin-inline: auto; padding: 0.55vw; border-radius: 1.1vw; } .s107-tabs-navy .e-n-tabs-heading { background-color: var(--e-global-color-navy50); } .s107-tabs-red .e-n-tabs-heading { background-color: var(--e-global-color-red50); } /* Tab labels: Figma line height 110% (Nested Tabs forces its own) */ .s107-tabs .e-n-tab-title-text { line-height: 1.1; } @media (max-width: 767px) { /* Figma mobile: full-width bar that scrolls sideways, 8px padding, radius 24 (Learning) / 16 (Stories) */ .s107-tabs .e-n-tabs-heading { width: 100%; padding: 2.04vw; border-radius: 6.11vw; } .s107-tabs-red .e-n-tabs-heading { width: calc(100% - 6.1vw); border-radius: 4.07vw; } } /* ========================================================================== HOMEPAGE - CAMPUS Highlighted word in the section title (colour from Figma, not in palette). ========================================================================== */ .s107-text-green { color: #08A652; } /* ========================================================================== HOMEPAGE - STORIES + ACCREDITATIONS (carousel side offsets) Nested Carousel 'Offset' control only accepts px; these rules keep the peek width responsive in vw. Selector is deliberately more specific than Elementor's per-widget rule (.elementor-225 .elementor-element.elementor-element-xxx). ========================================================================== */ .elementor .elementor-element.elementor-widget-n-carousel.s107-stories-carousel { --e-n-carousel-swiper-offset-size: 17vw; } .elementor .elementor-element.elementor-widget-n-carousel.s107-logo-carousel { --e-n-carousel-swiper-offset-size: 4vw; } @media (max-width: 1024px) { .elementor .elementor-element.elementor-widget-n-carousel.s107-stories-carousel { --e-n-carousel-swiper-offset-size: 8vw; } } @media (max-width: 767px) { .elementor .elementor-element.elementor-widget-n-carousel.s107-stories-carousel { --e-n-carousel-swiper-offset-size: 5vw; } .elementor .elementor-element.elementor-widget-n-carousel.s107-logo-carousel { --e-n-carousel-swiper-offset-size: 12vw; } } /* ========================================================================== GLOBAL - CAROUSEL GAPS (vw) Nested Carousel 'Gap between slides' only accepts px, so the gap is set to 0 and created with vw padding on each slide (widget pulled out by the same amount with negative side margins in Elementor). ========================================================================== */ /* Carousel with vw gaps: widget is pulled out by negative side margins (set in Elementor) so it must also be widened by the same total; Elementor caps widget width at 100%, hence this rule. */ .elementor .elementor-element.elementor-widget.s107-carousel-gap-l:not(.s107-stories-carousel) { width: calc(100% + 1.7vw); max-width: none; } @media (max-width: 767px) { .elementor .elementor-element.elementor-widget.s107-carousel-gap-l:not(.s107-stories-carousel) { width: calc(100% + 4vw); } } .s107-carousel-gap-l .swiper-slide { padding-inline: 0.85vw; } .s107-carousel-gap-s .swiper-slide { padding-inline: 0.55vw; } .s107-carousel-gap-xl .swiper-slide { padding-inline: 1.1vw; } .elementor .elementor-element.elementor-widget.s107-carousel-gap-xl { width: calc(100% + 2.2vw); max-width: none; } @media (max-width: 767px) { .s107-carousel-gap-l .swiper-slide { padding-inline: 2vw; } .s107-carousel-gap-s .swiper-slide { padding-inline: 1.5vw; } .s107-carousel-gap-xl .swiper-slide { padding-inline: 2vw; } .elementor .elementor-element.elementor-widget.s107-carousel-gap-xl { width: calc(100% + 4vw); } } /* ========================================================================== HOMEPAGE - NEWS (Loop Carousel) Desktop shows all 3 posts, so arrows are hidden there. Loop Carousel's Arrows switch has no per-device value, hence this rule. Tablet (2 per view) and mobile (1 per view) keep the arrows. ========================================================================== */ @media (min-width: 1025px) { .elementor .elementor-element.elementor-widget.s107-news-carousel .elementor-swiper-button { display: none; } } /* ========================================================================== HOMEPAGE - ACCREDITATIONS MARQUEE Carousel autoplays with 0 delay + 4000ms slide speed (set in Elementor). Linear easing makes it a continuous, endless scroll instead of stop-start. ========================================================================== */ .s107-logo-carousel .swiper-wrapper { transition-timing-function: linear !important; } /* ========================================================================== HOMEPAGE - HERO Dark gradient overlay from Figma (hero frame 3158:6916, 3 stops). The Elementor overlay (Background Overlay on the hero card) only allows 2 stops, so this adds Figma's middle stop. Remove this block to fall back to the 2-stop Elementor version. ========================================================================== */ body .elementor .elementor-element.s107-hero-card::before { background-image: linear-gradient(190deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0.8) 90%); } /* ========================================================================== GLOBAL - HEADER (default header + compact navy bar on scroll) The Header template has one bar, "Header - Main" (.s107-hdr-main): the default white header, not sticky - it scrolls away with the blue top bar. Once the page has scrolled ~450px past it, Custom Code "Header - compact bar on scroll" adds .s107-hdr-compact to the same bar: it becomes Figma's floating navy header (frame 3158:6955), fixed to the top and parked above the screen, and body.s107-hdr-show slides it down. Scrolling back to the top slides it up and returns it to the page. Rules below scoped to .s107-hdr-compact = navy mode. ========================================================================== */ body .elementor .elementor-element.s107-hdr-compact { position: fixed; top: 0; left: 0; right: 0; --width: 100%; width: 100%; max-width: none; z-index: 100; transform: translateY(-110%); visibility: hidden; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s; } body.s107-hdr-show .elementor .elementor-element.s107-hdr-compact { transform: translateY(0); visibility: visible; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } /* While the bar switches between white and navy, nothing animates (set briefly by the Custom Code) */ body .elementor .s107-hdr-noanim, body .elementor .s107-hdr-noanim * { transition: none !important; } @media (min-width: 783px) { body.admin-bar .elementor .elementor-element.s107-hdr-compact { top: var(--wp-admin--admin-bar--height, 0px); } } /* Announcement in the top bar: one heading, the link typed inside it (). Selector is longer than Elementor's own heading-link rule (colour: inherit). */ body .elementor-widget-heading.s107-announce .elementor-heading-title a { margin-left: 0.3vw; color: var(--e-global-color-red400); font-family: Figtree, sans-serif; font-weight: 400; font-size: 1vw; line-height: 1.3; text-decoration: underline; } @media (max-width: 1024px) { body .elementor-widget-heading.s107-announce .elementor-heading-title a { margin-left: 0.5vw; font-size: 1.4vw; } } @media (max-width: 767px) { body .elementor-widget-heading.s107-announce .elementor-heading-title a { margin-left: 1.02vw; font-size: 3.56vw; } } /* Two logos sit in the same box: colour shows on the default header, white on the compact bar */ .s107-hdr-logo-white { pointer-events: none; } .s107-hdr-logo-white img { opacity: 0; } /* --- Compact bar: colours (all devices) --- */ body .elementor .s107-hdr-compact .elementor-element.s107-hdr-bar { background-color: var(--e-global-color-navy950); } body .elementor .s107-hdr-compact .s107-hdr-logo-colour img { opacity: 0; } body .elementor .s107-hdr-compact .s107-hdr-logo-white { pointer-events: auto; } body .elementor .s107-hdr-compact .s107-hdr-logo-white img { opacity: 1; } body .elementor .s107-hdr-compact .s107-hdr-nav .elementor-nav-menu--main .elementor-item, body .elementor .s107-hdr-compact .s107-hdr-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus) { color: var(--e-global-color-white); } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-nav .elementor-menu-toggle { color: var(--e-global-color-white); background-color: transparent; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-nav .elementor-menu-toggle svg { fill: var(--e-global-color-white); } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-search .elementor-icon { color: var(--e-global-color-white); } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-search .elementor-icon svg { fill: var(--e-global-color-white); } body .elementor .s107-hdr-compact .s107-btn-outline { --s107-btn-color: var(--e-global-color-white); --s107-btn-inset: inset 0 0 0 var(--s107-btn-bw) var(--e-global-color-white); --s107-btn-shadow: rgba(255, 255, 255, 0.6); } body .elementor .s107-hdr-compact .s107-btn-outline .elementor-button:is(:hover, :active) { --s107-btn-bg: var(--e-global-color-white); --s107-btn-color: var(--e-global-color-navy800); } body .elementor .s107-hdr-compact .elementor-widget-button { --s107-btn-sx: 1px; --s107-btn-sy: 3px; } /* --- Compact mode: the default bar's own Elementor colours swapped for the navy bar --- */ body .elementor .s107-hdr-compact .elementor-element.s107-hdr-bar { border-width: 0; --border-top-width: 0px; --border-right-width: 0px; --border-bottom-width: 0px; --border-left-width: 0px; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-mega { --n-menu-title-color-normal: var(--e-global-color-white); --n-menu-title-color-hover: var(--e-global-color-white); --n-menu-title-color-active: var(--e-global-color-white); --n-menu-dropdown-indicator-color-normal: var(--e-global-color-white); --n-menu-dropdown-indicator-color-hover: var(--e-global-color-white); --n-menu-dropdown-indicator-color-active: var(--e-global-color-white); --n-menu-title-distance-from-content: 0.88vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-mega > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not(.e-current), body .elementor .s107-hdr-compact .elementor-element.s107-hdr-mega > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current { background-color: rgba(255, 255, 255, 0.12); } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-call.elementor-view-framed .elementor-icon { color: var(--e-global-color-white); border-color: var(--e-global-color-white); background-color: transparent; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-call.elementor-view-framed .elementor-icon svg { fill: var(--e-global-color-white); } @media (max-width: 1024px) { body .elementor .s107-hdr-compact .elementor-element.s107-hdr-mega { --n-menu-title-distance-from-content: 1.85vw; } } /* --- Compact bar: sizes, desktop (Figma: 70 tall, logo 117, Small buttons) --- */ @media (min-width: 1025px) { body .elementor .elementor-element.s107-hdr-compact { --padding-left: 4vw; --padding-right: 4vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-bar { --padding-top: 0.85vw; --padding-bottom: 0.85vw; --padding-left: 1.7vw; --padding-right: 1.7vw; --border-radius: 0 0 1.7vw 1.7vw; border-radius: 0 0 1.7vw 1.7vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-logo img { width: 8.1vw; } body .elementor .s107-hdr-compact .elementor-widget-button { --s107-btn-h: 2.8vw; --s107-btn-px: 1.1vw; } body .elementor .s107-hdr-compact .elementor-widget-button .elementor-button { font-size: 1vw; } } /* --- tablet --- */ @media (min-width: 768px) and (max-width: 1024px) { body .elementor .elementor-element.s107-hdr-compact { --padding-left: 4vw; --padding-right: 4vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-bar { --padding-top: 1.25vw; --padding-bottom: 1.25vw; --padding-left: 2.5vw; --padding-right: 2.5vw; --border-radius: 0 0 2.5vw 2.5vw; border-radius: 0 0 2.5vw 2.5vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-logo img { width: 15vw; } body .elementor .s107-hdr-compact .elementor-widget-button { --s107-btn-h: 5.25vw; --s107-btn-px: 2vw; } body .elementor .s107-hdr-compact .elementor-widget-button .elementor-button { font-size: 1.85vw; } } /* --- mobile --- */ @media (max-width: 767px) { body .elementor .elementor-element.s107-hdr-compact { --padding-left: 2.5vw; --padding-right: 2.5vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-bar { --padding-top: 2vw; --padding-bottom: 2vw; --padding-left: 4vw; --padding-right: 4vw; --border-radius: 0 0 4vw 4vw; border-radius: 0 0 4vw 4vw; } body .elementor .s107-hdr-compact .elementor-element.s107-hdr-logo img { width: 30vw; } body .elementor .s107-hdr-compact .elementor-widget-button { --s107-btn-h: 10vw; --s107-btn-px: 4vw; } body .elementor .s107-hdr-compact .elementor-widget-button .elementor-button { font-size: 3.5vw; } } @media (prefers-reduced-motion: reduce) { body .elementor .elementor-element.s107-hdr-compact { transition: none; } } /* ========================================================================== GLOBAL - ENTRANCE ANIMATIONS (subtle Fade In Up) Elementor's Fade In Up slides an element up by 100% of its own height, which is far too much for cards and carousels. This keeps Elementor's animation (Motion Effects > Entrance Animation: Fade In Up) but limits the travel. ========================================================================== */ @keyframes s107FadeInUp { from { opacity: 0; transform: translate3d(0, var(--s107-anim-y, 3vw), 0); } to { opacity: 1; transform: none; } } .elementor .elementor-element.animated.fadeInUp { animation-name: s107FadeInUp; } @media (min-width: 768px) and (max-width: 1024px) { .elementor .elementor-element.animated.fadeInUp { --s107-anim-y: 5vw; } } @media (max-width: 767px) { .elementor .elementor-element.animated.fadeInUp { --s107-anim-y: 8vw; } } /* ========================================================================== HOMEPAGE - MOBILE (Figma "0.0 Home — Mobile", node 3636:7, 393 wide) 1px in Figma = 0.2545vw. Spacing, sizes and type are set per element in Elementor (mobile values); this block only covers what Elementor can't do: - Swipe rows: Why S107 and Beyond the classroom cards sit in one row you swipe sideways (containers have no per-device overflow setting). - Peek carousels: Latest campaigns, Stories and News show one card plus a peek of the next, starting at the 12px page edge, no arrows (swipe). Card widths: campaigns/stories 300px, news 280px. ========================================================================== */ @media (max-width: 767px) { .elementor .elementor-element.e-con.s107-m-scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .elementor .elementor-element.e-con.s107-m-scroll::-webkit-scrollbar { display: none; } .elementor .elementor-element.e-con.s107-m-scroll > .e-con { flex-shrink: 0; scroll-snap-align: start; } body .elementor .elementor-element.elementor-widget.elementor-widget.s107-m-peek { --s107-peek-card: 76.34vw; --s107-peek-start: 0vw; width: 100%; max-width: 100%; margin-inline: 0; } body .elementor .elementor-element.elementor-widget.elementor-widget.s107-m-peek-280 { --s107-peek-card: 71.25vw; } body .elementor .elementor-element.elementor-widget.elementor-widget.s107-m-peek-inset { --s107-peek-start: 3.05vw; } body .elementor .elementor-element.elementor-widget.s107-m-peek .swiper.swiper { padding-inline-start: var(--s107-peek-start); padding-inline-end: calc(100% - var(--s107-peek-start) - var(--s107-peek-card) - 3.05vw); } body .elementor .elementor-element.elementor-widget.s107-m-peek .swiper-slide { padding-inline: 0 3.05vw; } body .elementor .elementor-element.elementor-widget.s107-m-peek .elementor-swiper-button { display: none; } /* Free swipe rows: the slider is switched off on phones by Custom Code "Mobile - carousels as swipe rows" (adds .s107-swiper-off), and the slides scroll sideways natively, snapping to each card. */ body .elementor .elementor-element.elementor-widget.s107-swiper-off .swiper.swiper { padding-inline: 0; overflow: visible; } body .elementor .elementor-element.elementor-widget.s107-swiper-off .swiper-wrapper.swiper-wrapper { display: flex; transform: none !important; overflow-x: auto; overflow-y: hidden; padding-inline: var(--s107-peek-start) 0; scroll-padding-inline-start: var(--s107-peek-start); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } body .elementor .elementor-element.elementor-widget.s107-swiper-off .swiper-wrapper::-webkit-scrollbar { display: none; } body .elementor .elementor-element.elementor-widget.s107-swiper-off .swiper-slide { flex: 0 0 auto; width: calc(var(--s107-peek-card) + 3.05vw) !important; scroll-snap-align: start; } body .elementor .elementor-element.elementor-widget.s107-swiper-off .swiper-slide-duplicate { display: none; } /* News card title: 2 lines then ellipsis (Figma mobile) */ .s107-m-clamp-2 .elementor-heading-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } /* ========================================================================== GLOBAL - HEADER (mobile, Figma "Header" 3636:8) Main bar 72px: logo | call button (Icon widget, mobile only) | "Menu" pill. The pill is the Button widget "Menu" (.s107-hdr-menubtn, phones only). It opens the Off-Canvas "Mobile menu" in the Footer template (see MOBILE MENU). ========================================================================== */ @media (max-width: 767px) { body .elementor .elementor-element.s107-hdr-menubtn .elementor-button, body .elementor .elementor-element.s107-hdr-menubtn .elementor-button:hover, body .elementor .elementor-element.s107-hdr-menubtn .elementor-button:active { display: inline-flex; align-items: center; height: 12.21vw; padding: 0 4.58vw 0 4.07vw; border: 0; border-radius: 50vw; background: var(--e-global-color-navy800); color: var(--e-global-color-white); box-shadow: none; transform: none; font-family: "Figtree", sans-serif; font-weight: 600; font-size: 3.82vw; line-height: 1.3; } body .elementor .elementor-element.s107-hdr-menubtn .elementor-button::before, body .elementor .elementor-element.s107-hdr-menubtn .elementor-button::after { display: none; } body .elementor .elementor-element.s107-hdr-menubtn .elementor-button-content-wrapper { flex-direction: row; align-items: center; gap: 2.04vw; } body .elementor .elementor-element.s107-hdr-menubtn .elementor-button-icon { display: flex; } body .elementor .elementor-element.s107-hdr-menubtn .elementor-button-icon svg { width: 6.11vw; height: 6.11vw; fill: currentColor; } /* Compact navy bar (on scroll): white pill, navy label */ body .elementor .s107-hdr-compact.s107-hdr-compact .elementor-element.s107-hdr-menubtn .elementor-button { background: var(--e-global-color-white); color: var(--e-global-color-navy800); } /* Call button: exact 48px circle (Icon widget adds line-height around the frame) */ .s107-hdr-call .elementor-icon-wrapper { line-height: 0; } body .elementor .elementor-element.s107-hdr-call .elementor-icon { display: flex; align-items: center; justify-content: center; width: 12.21vw; height: 12.21vw; padding: 0; border-width: 0.38vw; } } /* ========================================================================== GLOBAL - MOBILE STICKY CTA BAR (Figma "Sticky CTA bar" 3638:1139) Container "Sticky CTA bar" in the Footer template: fixed to the bottom on mobile only (Elementor Position: Fixed). Figma 3rd iteration: Enquire (red) fills the row, Book a Tour (outline) fits its label. The footer card has extra bottom padding so the bar never covers it. ========================================================================== */ @media (max-width: 767px) { .elementor .elementor-element.s107-m-ctabar > .elementor-widget:first-child { flex: 1 1 auto; min-width: 0; } .elementor .elementor-element.s107-m-ctabar > .elementor-widget:first-child .elementor-button { width: 100%; justify-content: center; } .elementor .elementor-element.s107-m-ctabar > .elementor-widget:last-child { flex: 0 0 auto; } } /* Hidden at first: slides up from the bottom once the page is ~300px past the header (body.s107-hdr-show with the navy compact bar, or body.s107-cta-show now that the bar is switched off - both set by Custom Code "Header - compact bar on scroll") and slides back down near the top. */ @media (max-width: 767px) { body .elementor .elementor-element.s107-m-ctabar { transform: translateY(110%); visibility: hidden; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s; } body:is(.s107-hdr-show, .s107-cta-show) .elementor .elementor-element.s107-m-ctabar { transform: translateY(0); visibility: visible; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } } /* ========================================================================== GLOBAL - MEGA MENU (desktop + tablet, Figma "Mega menu overlays" 3617:37865) Elementor Menu widget "Mega menu" in the Header bar (white by default, navy when it becomes the compact bar on scroll). Each dropdown's panel is built directly inside the menu item (Header template > Mega menu > About / Learning / Admissions). Item pill, colours, sizes and the panel are set in Elementor; this block only covers what the widget can't style. ========================================================================== */ /* The dropdown arrow is a