/*! Theme Name: esb Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: esb Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. esb is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */
/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/
/*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/
/* Normalize --------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */
 html {
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
}
/* Sections ========================================================================== */
/** * Remove the margin in all browsers. */
 body {
     margin: 0;
     overflow-x: hidden;
     width: 100%;
}
/** * Render the `main` element consistently in IE. */
 main {
     display: block;
}
/* Grouping content ========================================================================== */
/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
 hr {
     box-sizing: content-box;
     height: 0;
     overflow: visible;
}
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
 pre {
     font-family: monospace, monospace;
     font-size: 1em;
}
/* Font ========================================================================== */
 @font-face {
     font-family: StRyde-Regular;
     src: url(fonts/StRyde/StRyde-Regular.woff);
     font-display: swap 
}
 @font-face {
     font-family: StRyde-Italic;
     src: url(fonts/StRyde/StRyde-Italic.woff);
     font-display: swap 
}
 @font-face {
     font-family: StRyde-Light;
     src: url(fonts/StRyde/StRyde-Light.woff);
     font-display: swap 
}
 @font-face {
     font-family: StRyde-LightItalic;
     src: url(fonts/StRyde/StRyde-LightItalic.woff);
     font-display: swap 
}
 @font-face {
     font-family: StRyde-Medium;
     src: url(fonts/StRyde/StRyde-Medium.woff);
     font-display: swap 
}
 @font-face {
     font-family: StRyde-MediumItalic;
     src: url(fonts/StRyde/StRyde-MediumItalic.woff);
     font-display: swap 
}
 @font-face {
     font-family: Arial;
     src: url(fonts/Arial/Arial-ItalicMT.eot);
     src: url(fonts/Arial/Arial-ItalicMT.eot?#iefix) format('embedded-opentype'), url(fonts/Arial/Arial-ItalicMT.woff2) format('woff2'), url(fonts/Arial/Arial-ItalicMT.woff) format('woff'), url(fonts/Arial/Arial-ItalicMT.ttf) format('truetype');
     font-weight: normal;
     font-style: italic;
}
 @font-face {
     font-family: Arial;
     src: url(fonts/Arial/ArialMT.eot);
     src:url(fonts/Arial/ArialMT.eot?#iefix) format('embedded-opentype'), url(fonts/Arial/ArialMT.woff2) format('woff2'), url(fonts/Arial/ArialMT.woff) format('woff'), url(fonts/Arial/ArialMT.ttf) format('truetype');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: Arial;
     src: url('Arial-BoldItalicMT.eot');
     src: local('Arial Bold Italic'), local('Arial-BoldItalicMT'), url(fonts/Arial/Arial-BoldItalicMT.eot?#iefix) format('embedded-opentype'), url(fonts/Arial/Arial-BoldItalicMT.woff2) format('woff2'), url(fonts/Arial/Arial-BoldItalicMT.woff) format('woff'), url(fonts/Arial/Arial-BoldItalicMT.ttf) format('truetype');
     font-weight: bold;
     font-style: italic;
}
/* Text-level semantics ========================================================================== */
/** * Remove the gray background on active links in IE 10. */
 a {
     background-color: transparent;
     text-decoration: none;
}
/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
 abbr[title] {
     border-bottom: none;
     text-decoration: underline;
     text-decoration: underline dotted;
}
/** * Add the correct font weight in Chrome, Edge, and Safari. */
 @import url('https://fonts.googleapis.com/css2?family=Arial:wght@700&display=swap');
 b, strong {
     font-family: Arial Bold, sans-serif !important;
     font-weight: 700 !important;
}
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
 code, kbd, samp {
     font-family: monospace, monospace;
     font-size: 1em;
}
/** * Add the correct font size in all browsers. */
 small {
     font-size: 80%;
}
/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
 sub, sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
}
 sub {
     bottom: -0.25em;
}
 sup {
     top: -0.5em;
}
/* Embedded content ========================================================================== */
/** * Remove the border on images inside links in IE 10. */
 img {
     border-style: none;
}
/* Forms ========================================================================== */
/** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */
 button, input, optgroup, select, textarea {
     font-family: inherit;
     font-size: 100%;
     line-height: 1.15;
     margin: 0;
}
/** * Show the overflow in IE. * 1. Show the overflow in Edge. */
 button, input {
     overflow: visible;
}
/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */
 button, select {
     text-transform: none;
}
/** * Correct the inability to style clickable types in iOS and Safari. */
 button, [type="button"], [type="reset"], [type="submit"] {
     -webkit-appearance: button;
}
/** * Remove the inner border and padding in Firefox. */
 button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
     border-style: none;
     padding: 0;
}
/** * Restore the focus styles unset by the previous rule. */
 button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
     outline: 1px dotted ButtonText;
}
/** * Correct the padding in Firefox. */
 fieldset {
     padding: 0.35em 0.75em 0.625em;
}
/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */
 legend {
     box-sizing: border-box;
     color: inherit;
     display: table;
     max-width: 100%;
     padding: 0;
     white-space: normal;
}
/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */
 progress {
     vertical-align: baseline;
}
/** * Remove the default vertical scrollbar in IE 10+. */
 textarea {
     overflow: auto;
}
/** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */
 [type="checkbox"], [type="radio"] {
     box-sizing: border-box;
     padding: 0;
}
/** * Correct the cursor style of increment and decrement buttons in Chrome. */
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
     height: auto;
}
/** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */
 [type="search"] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
}
/** * Remove the inner padding in Chrome and Safari on macOS. */
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
}
/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */
 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit;
}
/* Interactive ========================================================================== */
/* * Add the correct display in Edge, IE 10+, and Firefox. */
 details {
     display: block;
}
/* * Add the correct display in all browsers. */
 summary {
     display: list-item;
}
/* Misc ========================================================================== */
/** * Add the correct display in IE 10+. */
 template {
     display: none;
}
/** * Add the correct display in IE 10. */
 [hidden] {
     display: none;
}
/* Box sizing --------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level. @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
 *, *::before, *::after {
     box-sizing: inherit;
}
 html {
     box-sizing: border-box;
}
/*-------------------------------------------------------------- # Base --------------------------------------------------------------*/
/* Typography --------------------------------------------- */
 body, button {
     color: #404040;
     font-family: Arial;
     font-size: 1rem;
     line-height: 1.5;
}

input, select, optgroup, textarea {
    font-family: Arial;
    color: var(--Secondary-Night-Blue, #003C71);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

 h1, h2, h3, h4, h5, h6 {
     font-family: StRyde-Medium;
}
 dfn, cite, em, i {
     font-style: italic;
}
 blockquote {
     margin: 0 1.5em;
}
 address {
     margin: 0 0 1.5em;
}
 pre {
     background: #eee;
     font-family: "Courier 10 Pitch", courier, monospace;
     line-height: 1.6;
     margin-bottom: 1.6em;
     max-width: 100%;
     overflow: auto;
     padding: 1.6em;
}
 code, kbd, tt, var {
     font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
 abbr, acronym {
     border-bottom: 1px dotted #666;
     cursor: help;
}
 mark, ins {
     background: #fff9c0;
     text-decoration: none;
}
 big {
     font-size: 125%;
}
/* Elements --------------------------------------------- */
 body {
     background: #fff;
}
 hr {
     background-color: #ccc;
     border: 0;
     height: 1px;
     margin-bottom: 1.5em;
}
 ul, ol, li {
	color: var(--Secondary-Deep-Blue, #111C2D);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
 ul {
     list-style: disc;
    padding: 0 24px;
}
 ol {
     list-style: decimal;
}
 li > ul, li > ol {
     margin-bottom: 0;
     margin-left: 1.5em;
}
li:not(:last-child) {
    padding-bottom: 10px;
}
 dt {
     font-weight: 700;
}
 dd {
     margin: 0 1.5em 1.5em;
}
/* Make sure embeds and iframes fit their containers. */
 embed, iframe, object {
     max-width: 100%;
}
 img {
     height: auto;
     max-width: 100%;
}
 figure {
     margin: 1em 0;
}
 table {
     margin: 0 0 1.5em;
     width: 100%;
}
/* Forms --------------------------------------------- */
 button, input[type="button"], input[type="reset"], input[type="submit"] {
    border: 1px solid;
    border-color: #cccccc00 #cccccc00 #bbbbbb00;
    border-radius: 0;
    background: var(--Secondary-Warm-Yellow, #FFCD00);
    display: flex;
    height: 56px;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Secondary-Deep-Blue, #111C2D);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
	background-color: #6E267B;
    color: #fff;
}

.wpcf7-list-item {
    margin: 0 !important;
}
 button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
     border-color: #ccc #bbb #aaa;
}
 button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {
     border-color: #aaa #bbb #bbb;
}
 input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    border-radius: 4px;
    border: 2px solid var(--Primary-Corporate-Blue-500, #0076B7);
    background: var(--Base-White, #FFF);
    padding: 12px 16px;
	width: 100%;
	color: var(--Secondary-Deep-Blue, #111C2D);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}
 input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {
     color: #111;
}
select {
    border-radius: 4px;
    border: 2px solid var(--Primary-Corporate-Blue-500, #0076B7);
    width: 100%;
}
 textarea {
     width: 100%;
}
/*-------------------------------------------------------------- # Layouts --------------------------------------------------------------*/
/*-------------------------------------------------------------- # Components --------------------------------------------------------------*/
/* Navigation --------------------------------------------- */
 .main-navigation {
     width: 100%;
}
 .main-navigation ul {
     display: none;
     list-style: none;
     margin: 0;
     padding-left: 0;
}
 .main-navigation ul ul {
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     float: left;
     position: absolute;
     top: 100%;
     left: -999em;
     z-index: 99999;
}
 .main-navigation ul ul ul {
     left: -999em;
     top: 0;
}
 .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
     display: block;
     left: auto;
}
 .main-navigation ul ul a {
     width: 200px;
}
 .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
     left: auto;
}
 .main-navigation li {
     position: relative;
}
 .main-navigation a {
     display: block;
     text-decoration: none;
}
/* Small menu. */
 .menu-toggle, .main-navigation.toggled ul {
     display: block;
}
 @media screen and (min-width: 37.5em) {
     .menu-toggle {
         display: none;
    }
     .main-navigation ul {
         display: flex;
    }
}
 .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation {
     margin: 0 0 1.5em;
}
 .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links {
     display: flex;
}
 .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous {
     flex: 1 0 50%;
}
 .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next {
     text-align: end;
     flex: 1 0 50%;
}
/* Posts and pages --------------------------------------------- */
 .sticky {
     display: block;
}
 .updated:not(.published) {
     display: none;
}
 .page-content, .entry-content, .entry-summary {
     margin: 8px 0 24px;
}
 .page-links {
     clear: both;
     margin: 0 0 1.5em;
}
/* Comments --------------------------------------------- */
 .comment-content a {
     word-wrap: break-word;
}
 .bypostauthor {
     display: block;
}
/* Widgets --------------------------------------------- */
 .widget {
     margin: 0 0 1.5em;
}
 .widget select {
     max-width: 100%;
}
/* Media --------------------------------------------- */
 .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley {
     border: none;
     margin-bottom: 0;
     margin-top: 0;
     padding: 0;
}
/* Make sure logo link wraps around logo image. */
 .custom-logo-link {
     display: inline-block;
}
/* Captions --------------------------------------------- */
 .wp-caption {
     margin-bottom: 1.5em;
     max-width: 100%;
}
 .wp-caption img[class*="wp-image-"] {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 .wp-caption .wp-caption-text {
     margin: 0.8075em 0;
}
 .wp-caption-text {
     text-align: center;
}
/* Galleries --------------------------------------------- */
 .gallery {
     margin-bottom: 1.5em;
     display: grid;
     grid-gap: 1.5em;
}
 .gallery-item {
     display: inline-block;
     text-align: center;
     width: 100%;
}
 .gallery-columns-2 {
     grid-template-columns: repeat(2, 1fr);
}
 .gallery-columns-3 {
     grid-template-columns: repeat(3, 1fr);
}
 .gallery-columns-4 {
     grid-template-columns: repeat(4, 1fr);
}
 .gallery-columns-5 {
     grid-template-columns: repeat(5, 1fr);
}
 .gallery-columns-6 {
     grid-template-columns: repeat(6, 1fr);
}
 .gallery-columns-7 {
     grid-template-columns: repeat(7, 1fr);
}
 .gallery-columns-8 {
     grid-template-columns: repeat(8, 1fr);
}
 .gallery-columns-9 {
     grid-template-columns: repeat(9, 1fr);
}
 .gallery-caption {
     display: block;
}
/*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/
/* Jetpack infinite scroll --------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
 .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer {
     display: none;
}
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
 .infinity-end.neverending .site-footer {
     display: block;
}
/*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/
/* Accessibility --------------------------------------------- */
/* Text meant only for screen readers. */
 .screen-reader-text {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute !important;
     width: 1px;
     word-wrap: normal !important;
}
 .screen-reader-text:focus {
     background-color: #f1f1f1;
     border-radius: 3px;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     clip: auto !important;
     clip-path: none;
     color: #21759b;
     display: block;
     font-size: 0.875rem;
     font-weight: 700;
     height: auto;
     left: 5px;
     line-height: normal;
     padding: 15px 23px 14px;
     text-decoration: none;
     top: 5px;
     width: auto;
     z-index: 100000;
}
/* Do not show the outline on the skip link target. */
 #primary[tabindex="-1"]:focus {
     outline: 0;
}
/* Alignments --------------------------------------------- */
 .alignleft {
    /*rtl:ignore*/
     float: left;
    /*rtl:ignore*/
     margin-right: 1.5em;
     margin-bottom: 1.5em;
}
 .alignright {
    /*rtl:ignore*/
     float: right;
    /*rtl:ignore*/
     margin-left: 1.5em;
     margin-bottom: 1.5em;
}
 .aligncenter {
     clear: both;
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 1.5em;
}
/* Header -----------------------------------------------------*/
 .site-header {
     background-color: #fff;
     width: 100%;
}
 .header-container {
     display: flex;
     height: 100px;
     margin: 0 auto;
     padding: 24px 32px;
     justify-content: space-between;
     align-items: center;
	 box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.10);ZZ
}
 .site-branding {
     display: flex;
     align-items: center;
}
 .main-navigation {
     flex-grow: 1;
     text-align: center;
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin-left: 100px;
}
 .main-navigation ul {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
}
 .main-navigation li {
     margin: 0 15px;
}
 .main-navigation a {
     text-decoration: none;
     color: var(--Secondary-Night-Blue, #003C71);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
     padding: 8px 12px;
}
 .main-navigation a:hover {
     border-radius: 100px;
     background: var(--Secondary-Bright-Blue-100, #CCECF9);
     color: var(--Secondary-Deep-Purple, #6E267B);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
     padding: 8px 12px;
}
 .header-button {
     display: flex;
     align-items: center;
}
 .custom-button {
     background-color: #FFCD00;
     text-decoration: none;
     display: flex;
     height: 48px;
     padding: 16px;
     justify-content: center;
     align-items: center;
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: 20px;
     white-space: nowrap;
}
 .custom-button:hover {
     background-color: #6E267B;
     color: #fff;
}
/* Main Hero Slider -----------------------------------------------------*/
 .hero-slider {
     position: relative;
     width: 100%;
     overflow: hidden;
}
 .hero-slide {
     position: relative;
     background-size: cover;
     background-position: center;
     width: 100%;
     height: 700px;
}
 .hero-content-mobile {
     display:none;
}
 .hero-content-desktop {
     position: absolute;
     top: 40%;
     left: 0;
     padding: 40px 80px 40px 48px;
     transform: translate(0, -50%);
     color: #fff;
     width: 575px;
     margin: 65px;
     border-radius: 4px;
     background: linear-gradient(244deg, #0266A0 2.44%, #6E267B 95.75%);
}
 .hero-title {
     display: flex;
     max-width: 500px;
}
 .hero-title h1 {
     color: var(--Base-White, #FFF);
     font-size: 36px;
     font-style: normal;
     line-height: 38px;
     letter-spacing: -0.72px;
}
 .hero-icon {
     object-fit: contain;
     position: absolute;
     bottom: 0;
     right: 0;
}
 .hero-description {
     max-width: 400px;
     color: #FFF;
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     display: flex ;
}

.hero-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
}
 .hero-button:hover {
     opacity: 0.8;
}

.hero-buttons-inline {
    display: flex;
    gap: 10px;
}

.hero-button svg {
    width: 22px;
    height: 16px;
}
/* Image/Text Section -----------------------------------------------------*/
 .discover_weather {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
    /* 133.333% */
}
 .get_involved {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
     padding-bottom: 24px;
}
 .buttons a {
     padding: 16px 32px;
     color: var(--Secondary-Deep-Blue, #111C2D);
    /* Text md/Arial Bold */
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 22px;
    /* 137.5% */
}
 .buttons a:hover {
     background-color: #6E267B !important;
     color: #fff !important;
}
 .image-text-section {
     padding: 72px 0;
}
 .image-text-section .container {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .image-text-section .row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 96px;
}
 .image-text-section .image-column {
     flex: 1;
}
 .image-text-section .text-column {
     flex: 1;
     max-width: 500px;
}
 .image-text-section .buttons {
     padding-top: 24px;
}
/* Image Position */
 .image-left .image-column {
     order: 1;
}
 .image-right .image-column {
     order: 2;
}
/* Button styling */
 .button {
     display: inline-block;
     padding: 10px 20px;
     margin: 5px;
     text-decoration: none;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .button:hover {
     opacity: 0.8;
}
 .gradient-text {
     background: var(--Gradient-Purple-Blend, linear-gradient(270deg, #0266A0 0%, #6E267B 100%));
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 36px;
     line-height: 38px;
     letter-spacing: -0.72px;
}
 .image-column img {
     border-radius: 4px;
     background: var(--Secondary-Cool-Grey, #63666A);
     box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
	 max-height: 450px;
}
/* Timeline -----------------------------------------------------*/
/* Container for the entire section */
 .timeline-section {
     background-size: cover;
     background-position: top;
     padding: 96px 0;
     color: var(--Base-White, #FFF);
}
 .timeline-section .timeline-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
}
/* Section Title */
 .timeline-section .section-title {
     font-size: 30px;
     line-height: 34px;
     margin-bottom: 20px;
}
/* Section Description */
 .timeline-section .section-description {
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
    /* 137.5% */
}
 .timeline-section .section-header {
     padding: 0px 384px 0px 128px;
}
/* Timeline container */
 .timeline {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     margin-top: 40px;
}
/* Timeline Item */
 .timeline-item {
     display: flex;
     align-items: center;
     width: 100%;
     position: relative;
     gap: 50px;
    /* Gap between content boxes and the line */
}
/* Timeline Content */
 .timeline-content {
     width: 45%;
     text-align: left;
}
 .timeline-content.left, .timeline-content.right {
     border-radius: 4px;
     background: var(--Base-White, #FFF);
     box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
     padding: 32px;
}
/* Text Styling for Content */
 .timeline-content.left p, .timeline-content.right p {
     color: var(--Secondary-Night-Blue, #003C71);
     font-family: Arial;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
    /* 120% */
}
/* Vertical Line and Dot */
 .timeline-line {
     position: relative;
     width: 1px;
     background: transparent;
    /* Make line itself transparent since we'll use inner div */
     height: 100%;
    /* Line height spans full content */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
    /* Ensure top and bottom dots are spaced correctly */
     align-items: center;
}
 .timeline-line-inner {
     width: 1px;
     background: rgba(255, 255, 255, 0.50);
    /* The line itself */
     flex-grow: 1;
    /* Line stretches between the dots */
}
/* Add extra spacing for the last dot */
 .timeline-item:last-child .timeline-line .timeline-dot:last-of-type {
     margin-bottom: -12px;
    /* Adjust the bottom dot to align visually */
}
 .timeline-content.empty {
     width: 45%;
    /* Empty space for alignment */
}
/* Vertical Line and Dot */
 .timeline-line {
     position: absolute;
     width: 1px;
     background: rgba(255, 255, 255, 0.50);
     height: 173px;
    /* Adjust height for the vertical line */
     display: flex;
     justify-content: flex-start;
    /* Align content to the top */
     align-items: center;
     flex-direction: column;
    /* Stack dot and line vertically */
}
 .timeline-marker {
     position: relative;
     width: 1px;
}
 .timeline-dot {
     width: 24px;
     height: 24px;
     background-color: var(--Secondary-Bright-Blue-100, #CCECF9);
     border-radius: 50%;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: -11px;
    /* adjust the value to center the dot horizontally */
}
 .timeline-item:last-child .timeline-line {
     height: 0;
    /* hide the line for the last item */
}
 .timeline-line::after {
     content: '';
     width: 1px;
     flex-grow: 1;
    /* This ensures the line fills the remaining space */
     order: 2;
    /* Ensure line comes after the dot */
}
 .timeline-item:last-child .timeline-line::after {
     content: none;
}
/* Ensure the last dot is still displayed */
 .timeline-item:last-child .timeline-line .timeline-dot {
     margin-bottom: 8px;
    /* Maintain space between dot and line */
}
 .weather-watch-timeline {
     position: absolute;
     right: 0;
     margin: -27px 0;
}
/* four-columns-block -----------------------------------------------------*/
 section.four-columns-block {
     border-top: 1px solid var(--Tertiary-Grey-200, #EAECF0);
	 border-bottom: 1px solid var(--Tertiary-Grey-200, #EAECF0);
}
 .four-columns-block .row .col-md-3:not(:nth-child(4n)) {
     position: relative;
}
 .four-columns-block .row .col-md-3:not(:nth-child(4n)):after {
     content: '';
     position: absolute;
     top: 0;
     right: -24px;
    /* Half of the gap (48px) */
     width: 1px;
     height: 100%;
     background-color: var(--Tertiary-Grey-200, #EAECF0);
}
 .four-columns-block .container {
     padding: 88px 64px;
}
 .four-columns-block .row {
     display: flex;
     gap: 48px;
}
 .four-columns-block .col-md-3 {
     width: 22%;
    /* Ensures 4 columns, each taking 23% width, leaving gap */
     box-sizing: border-box;
}
 .block-item {
     text-align: center;
}
 .block-icon img {
     width: 56px;
     margin-bottom: 15px;
     object-fit: contain;
}
 .block-title {
     color: var(--Secondary-Deep-Blue, #111C2D);
     text-align: center;
    /* Text xl/Arial Bold */
     font-family: Arial;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
    /* 120% */
}
 .block-description {
     color: var(--Secondary-Deep-Blue, #111C2D);
     text-align: center;
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
}
/* Footer -----------------------------------------------------*/
/* Footer Background */
 footer.site-footer {
     position: relative;
     background: url('/wp-content/themes/esb/images/footer_background.svg');
     width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
}
 .footer-full{
     width: 100%;
     padding-top: 18vw;
     display: flex;
     flex-direction: column;
}
 .site-footer .footer-columns {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 64px 96px 32px 96px;
}
/* Footer Column Styling */
 .site-footer .footer-column {
     flex: 1;
     min-width: 200px;
    /* Ensures columns are responsive */
     padding: 0 15px;
     text-align: left;
}
/* Footer Widget Headings */
 .site-footer .footer-column h3 {
     color: var(--Base-White, #FFF);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
	     margin-bottom: 24px;
}
/* Footer Links */
 .site-footer .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .site-footer .footer-column ul li {
     margin-bottom: 10px;
}
 .site-footer .footer-column ul li a {
     color: var(--Base-White, #FFF);
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     text-decoration: none;
     transition: color 0.3s;
}
 .site-footer .footer-column ul li a:hover {
     color: #fff;
}
/* WYSIWYG Content Styling */
 .site-footer .wysiwyg-content {
     font-size: 1rem;
     line-height: 1.6;
     color: #ccc;
}
/* Divider Line */
 .site-footer .footer-separator {
     border: 0;
     border-top: 1px solid #FFF;
     margin: 20px 96px;
}
/* Copyright Section */
 .copyright-container {
     display: flex;
     justify-content: space-between;
     padding: 20px;
     align-items: center;
     width: 100%;
}
 .copyright-column {
     text-align: center;
}
 .copyright-text, .policy-links, .social-links {
     margin: 0 auto;
}
 .site-footer .copyright-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     font-size: 0.9rem;
     color: #ccc;
     padding: 40px 96px 32px 96px;
     text-align: center;
    /* Fallback for narrow screens */
}
 .copyright-text p, .copyright-text a {
     color: var(--Base-White, #FFF);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
}
.copyright-text a {
	text-decoration: underline;
}
 .site-footer .copyright-info .copyright-text {
     flex: 1;
}
 .site-footer .copyright-info .policy-links ul {
     list-style: none;
     display: flex;
     justify-content: center;
     padding: 0;
     margin: 0;
}
 .site-footer .copyright-info .policy-links ul li {
     margin-right: 15px;
}
 .site-footer .copyright-info .policy-links ul li:last-child {
     margin-right: 0;
}
 .site-footer .copyright-info .policy-links ul li a {
     color: var(--Base-White, #FFF);
    /* Text sm/Arial Regular */
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
    /* 142.857% */
     text-decoration: underline;
     transition: color 0.3s;
}
 .site-footer .copyright-info .social-links a {
     display: inline-block;
     margin-left: 15px;
}
 .site-footer .copyright-info .social-links a img {
     width: 36px;
     height: 36px;
     transition: transform 0.3s;
}
 .site-footer .copyright-info .social-links a img:hover {
     transform: scale(1.1);
}
 .contact-us a {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .contact-us img {
     margin-right: 10px;
}
 .contact-us {
     padding-top: 10px;
}
 .contact-us a {
     display: flex;
     justify-content: flex-start;
     color: var(--Base-White, #FFF);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
     text-decoration: none;
}
 .top_margin {
     margin-top: 56px;
}
/* Video/Text Section -----------------------------------------------------*/
 .video-text-section {
     padding: 72px 0;
}
 .video-text-section .container {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .video-text-section .row {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 96px;
}
 .video-text-section .image-column {
     flex: 1;
}
 .video-text-section .text-column {
     flex: 1;
	 max-width: 580px;
}
 .video-text-section .buttons {
     margin-top: 20px;
	 display:flex;
	 flex-wrap: wrap;
}
 .video-right .image-column {
     order: 2;
}
a.button.arrow {
    display: flex;
    gap: 8px;
    flex-direction: row;
    width: 55%;
    align-items: center;
    padding: 16px 0px;
    justify-content: center;
}

a.button.arrow:hover {
    background: #ffcd00 !important;
    color: #000 !important;
}

/* Button styling */
 .button {
     display: inline-block;
     padding: 10px 20px;
     margin: 5px;
     text-decoration: none;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .button:hover {
     opacity: 0.8;
}
 .video-column img {
     border-radius: 4px;
     box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
	 max-height: 350px;
     object-fit: cover;
}
 .thumbnail-container {
     position: relative;
}
 .play-button-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     padding: 20px;
     border-radius: 50%;
     background-color: #FFF;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 72px;
     height: 72px;
}
 .play-button-container:hover {
     border: 4px solid var(--Secondary-Warm-Yellow, #FFCD00);
     background-color: var(--Gradient-Blue-Blend, #007bff);
}
 .play-button-container:hover svg path {
     fill: #FFF ;
}
 img.active {
     opacity: 0.5;
     background: var(--Primary-Corporate-Blue-500, #0076B7);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
/* Show overlay when image is active */
 .thumbnail-container img.active ~ ::before {
     opacity: 0.5;
}
/*Resources Section */
 .line-separator {
     border-radius: 100px;
     background: var(--Secondary-Warm-Yellow, #FFCD00);
     width: 39px;
     height: 5px;
     margin-bottom: 32px;
}
 .resources-blog-section {
     padding: 96px 0px;
     background-color: #f9f9f9;
}
/* Resource List and Boxes */
 .resource-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
}
 .resource-box-first {
     flex: 0 0 calc(50% - 10px);
     box-sizing: border-box;
}
 .resource-box {
     flex: 0 0 calc(50% - 10px);
     box-sizing: border-box;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .resource-box:hover {
     transform: translateY(-5px);
     border-radius: 4px;
     border: 4px solid var(--Secondary-Warm-Yellow, #FFCD00);
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}
/* Resource Image */
 .resource-image img {
     width: 100%;
     height: auto;
     display: block;
}
/* Two-column Styling */
 .resource-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
}
 .resources-blog-section .section-title {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-size: 36px;
     font-style: normal;
     line-height: 38px;
    /* 105.556% */
     letter-spacing: -0.72px;
     text-align: left;
     margin-bottom: -24px;
}
 .resources-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 56px;
    ;
     max-width: 800px;
     margin: 0 auto;
     padding: 0;
}
 .first-column {
     grid-column: 1;
     gap: 56px;
     display: grid;
}
 .second-column {
     grid-column: 2;
     gap: 56px;
     display: grid;
}
 .resource-image img {
     max-height: 232px;
     object-fit: cover;
     object-position: top center;
     height: auto;
     display: block;
}
 .resource-details {
     padding: 24px 24px 16px 24px;
     text-align: left;
}
 .resource-title a {
     color: var(--Secondary-Night-Blue, #003C71);
     font-size: 20px;
     font-style: normal;
     font-family: Arial Bold, sans-serif !important;
     font-weight: 700 !important;
     line-height: 24px;
     transition: color 0.3s ease;
}
 .resource-title a:hover {
     color: #0056b3;
}
 .resource-date {
     color: var(--Tertiary-Grey-500, #667085);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
}
 .resource-excerpt {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
}
 .read-more {
     display: inline-block;
     float: right;
     margin: 24px;
}
 .view-all a {
     color: var(--Secondary-Deep-Blue, #111C2D);
    /* Text md/Arial Bold */
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 22px;
    /* 137.5% */
     padding: 16px;
     display: flex;
     align-items: center;
}
 .view-all a:hover {
     border: 2px solid var(--Secondary-Warm-Yellow, #FFCD00);
     max-width: 125px;
}
 .view-all a span.arrow {
     display: flex;
     margin-left: 8px;
     align-items: center;
}
/*Testimonial Section*/
 .testimonial_gradient-text {
}
 .user_details {
     color: var(--Tertiary-Grey-700, #344054);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: 20px;
}
 .testimonial_text {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     border-left: 4px solid var(--Secondary-Warm-Yellow, #FFCD00);
     padding-left: 24px;
}
 .testimonial-text-section {
     padding: 72px 0;
}
 .testimonial-text-section .container {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .testimonial-text-section .row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 96px;
}
 .testimonial-text-section .testimonial-image-column {
     flex: 1;
     max-width: 400px;
}
 .testimonial-text-section .text-column {
     flex: 1;
     max-width: 610px;
}
 .testimonial-text-section .buttons {
     margin-top: 20px;
}
 .quote-header {
     display: flex;
     align-items: center;
}
 .quote {
     position: absolute;
     margin-top: -145px;
     margin-left: -45px;
}

.testimonial-image-column img {
    border-radius: 4px;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    width: 100%;
    max-height: 385px;
    object-position: top center;
}
 .site-footer .footer-column ul li a:hover, .copyright-text a:hover, .site-footer .copyright-info .policy-links ul li a:hover {
     color: var(--Secondary-Bright-Orange, #FFCD00);
     text-decoration: underline;
}
/* Resources Listing */
 .resources-list, .news-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     padding: 0 32px;
     margin-top: 0;
     max-width: 1500px;
     margin: auto;
}
.news-list {
	padding-top: 56px 
}
 .resources-item, .news-item {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     border-radius: 4px;
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}
 .resources-image, .news-image {
     width: 100%;	 
    position: relative;
    display: inline-block;
}

.resources-image img.weather-watch-resources, .news-image img.weather-watch-news{
    height: auto;
}
 .resources-image img {
     width: 100%;
     object-fit: cover;
     max-height: 270px;
     height: 270px;
}
 .news-image img {
     width: 100%;
     object-fit: cover;
}
 .resources-info, .news-info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 24px;
     gap: 8px;
}
 .resources-info h2, .news-info h2 {
     font-size: 18px;
     margin-bottom: 10px;
}
 .resources-info p, .news-info p {
     font-size: 14px;
     margin-bottom: 20px;
}
.news-info p {
     font-size: 14px;
}
 .download-button {
     padding: 16px;
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: 20px;
     white-space: nowrap;
     background-color: #FFCD00;
     border: none;
     cursor: pointer;
     text-decoration:none;
}
 .download-button:hover {
     background-color: #6E267B;
     color: #fff;
}
 .resources-info h2, .news-info h2 {
     color: var(--Secondary-Night-Blue, #003C71);
     font-family: Arial;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
     transition: color 0.3s ease;
     padding: 0;
     margin: 0;
}
 .resources-info p, .news-info p {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     margin-bottom: 20px;
     padding: 0;
     margin: 0;
}
 .resources-filter {
     display: flex;
     align-items: center;
     gap: 24px;
     padding: 32px 64px;
	 max-width: 1500px; 
	 margin: auto; 
}
 .resources-filter select {
     color: var(--Secondary-Night-Blue, #003C71);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
     padding: 12px 16px;
}
 span.filter_by {
     color: var(--Secondary-Cool-Grey, #63666A);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
    /* 142.857% */
}

 .text_editor_section p {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
}
 h2.blog_title {
     color: var(--Secondary-Night-Blue, #003C71);
     font-size: 36px;
     font-style: normal;
     font-weight: 500;
     line-height: 38px;
     letter-spacing: -0.72px;
     margin: 0;
}
 .mobile_menu {
     display: none;
}
 .mobile-menu-bx {
     display: none;
}
/* Mobile Menu Styling */
 .mobile-menu-toggle {
     background: none;
     border: none;
     cursor: pointer;
     width: 40px;
     height: 40px;
     position: absolute;
     top: 60px;
     right: 60px;
     z-index: 1000;
}
 .burger-icon {
     display: block;
     width: 30px;
     height: 4px;
     background-color: #333;
     position: relative;
}
 .burger-icon::before, .burger-icon::after {
     content: "";
     display: block;
     width: 30px;
     height: 4px;
     background-color: #333;
     position: absolute;
     transition: all 0.3s ease-in-out;
}
 .burger-icon::before {
     top: -10px;
}
 .burger-icon::after {
     top: 10px;
}
 .mobile-menu-toggle.open .burger-icon {
     background: transparent;
}
 .mobile-menu-toggle.open .burger-icon::before {
     transform: rotate(45deg);
     top: 0;
}
 .mobile-menu-toggle.open .burger-icon::after {
     transform: rotate(-45deg);
     top: 0;
}
/* Mobile Navigation */
 .mobile-navigation {
     position: fixed;
     top: 0;
     left: -100%;
     width: 250px;
     height: 100%;
     background: #333;
     color: #fff;
     transition: left 0.3s ease-in-out;
     padding: 50px 20px;
     z-index: 999;
}
 .mobile-navigation.active {
     left: 0;
}
 .mobile-navigation ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .mobile-navigation ul li {
     margin-bottom: 15px;
}
 .mobile-navigation ul li a {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
}


/*To unhide for phase 2*/
 section.resources-blog-section {
     display: none;
}

a.esb_network_footerlink {
    display: flex;
    justify-content: flex-start;
    color: var(--Base-White, #FFF);
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
}

.mysticky-welcomebar-content p:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px; 
    background-image: url('/wp-content/themes/esb/images/warning_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 10px;
}
 .page-id-295 .container ul {
     margin: auto;
}
 .page-id-295 .container ul li {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
}
 .page-id-324 .container ul {
     margin: auto;
}
 .page-id-324 .container ul li {
     color: var(--Secondary-Deep-Blue, #111C2D);
     font-family: Arial;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
}
 h3.resource-title {
     margin: 0px;
}
 p.resource-date {
     margin: 0px;
     padding-top: 4px;
     padding-bottom: 4px;
}
 p.resource-excerpt {
     margin: 0px;
}
 .resource-details a.read-more.keychainify-checked {
     margin: 0px;
}
 .resource-box {
     height: 452px !important;
}
 section.four-columns-block h3.block-title {
     font-family: Arial Bold, sans-serif !important;
     font-weight: 700 !important;
     margin: 0px;
}
 select#resource-type {
     appearance: none;
    /* Removes default browser styles */
     -webkit-appearance: none;
    /* For Safari */
     -moz-appearance: none;
    /* For Firefox */
     background-image: url('/wp-content/uploads/2025/02/chevron-down-1.svg');
     background-repeat: no-repeat;
     background-position: right 10px center;
	 min-width: 200px;
	 max-width: 200px;
}
 select#sort-order {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('wp-content/uploads/2025/02/chevron-down-1.svg');
     background-repeat: no-repeat;
     background-position: right 10px center;
     width: 90px;
}

.resources-weather-watch-logo {
	position: absolute;
    bottom: 0;
    right: 0;
    width: 85px;
}

section.text_editor_section.contact_form {
    display: flex;
    padding: 56px 196px 72px 196px;
    gap: 24px;
    align-self: stretch;
    justify-content: space-around;
	max-width: 1200px;
    margin: 0 auto;
}

input, select, optgroup, textarea {
    padding: 12px 16px;
}
.contact_form .container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 32px;
}

div#wpcf7-f290-o1, div#wpcf7-f547-o1, div#wpcf7-f562-o1 {
    border-radius: 4px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.10);
    padding: 40px 48px;
}
.form-row {
    display: flex;
    gap: 20px; 
}
.form-row p {
    flex: 1;
}

.form-row label {
    flex: 1; 
    min-width: 0;
}
.hide {
	display:none;
}

label.privacy_label {
    color: var(--Tertiary-Grey-600, #475467);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

label.contact_label { 
	color: var(--Secondary-Cool-Grey, #63666A); 
	font-family: Arial; 
	font-size: 14px; 
	font-style: normal; 
	font-weight: 700; 
	line-height: 20px; 
}
span.terms {
    color: var(--Tertiary-Grey-600, #475467);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

span.terms a {
    color: var(--Secondary-Night-Blue, #003C71);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
	text-decoration: underline;
}

.contact_form h2.blog_title {
    background: var(--Gradient-Purple-Blend, linear-gradient(270deg, #0266A0 0%, #6E267B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    line-height: 38px;
    letter-spacing: -0.72px;
}

 @media (min-width: 1500px) {
     .resources-item, .news-item {
         width: 462px !important;
    }
}
 .resource-box.gdpr-request-box {
     max-width: 290px;
     height: 240px !important;
}
 .gdpr-request-box .key-facts__cards-holder__card__card-cta {
     align-items: center;
     justify-content: center;
     vertical-align: middle;
     color: #003c71;
     justify-content: unset;
}
 .gdpr-request-box .key-facts__cards-holder__card__card-cta:after {
      margin-left: 10px;
     transition: all .2s ease-in-out;
}
 .resource-box.gdpr-request-box:hover {
     border-width: 1px;
}
 .gdpr-request-box h3.resource-title {
     color: var(--Secondary-Night-Blue, #003C71);
     font-size: 20px;
     font-style: normal;
     font-family: Arial Bold, sans-serif !important;
     font-weight: 700 !important;
     line-height: 24px;
     transition: color 0.3s ease;
}
 img.custom-logo {
     min-width: 150px !important;
}
 .timeline-content.left p a, .timeline-content.right p a {
     text-decoration-line: underline !important;
     text-decoration-style: solid !important;
     color: #003C71 !important;
}


/*Sticky Bar*/
.sticky-bar {
    width: 100%;
    background: #ffcd00;
    color: #000;
    text-align: left;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.sticky-bar-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.sticky-bar-icon img {
    max-width: 24px;
    height: auto;
}

.sticky-bar-message {
    flex: 1;
    text-align: left;
}

.sticky-bar-close {
    background: none;
    border: none;
    color: #111c2d;
    font-size: 18px;
    cursor: pointer;
}
a.sticky_link {
    text-decoration: underline;
    color: #000;
}

.codedropz-upload-inner h3 {
    color: var(--Secondary-Night-Blue, #003C71);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-family: Arial;
}

.codedropz-upload-inner span {
    color: var(--Secondary-Night-Blue, #003C71);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-family: Arial;
}

.codedropz-btn-wrap a {
    color: var(--Secondary-Night-Blue, #003C71);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

span.form_heading {
    color: var(--Secondary-Deep-Blue, #111C2D);
    font-family: 'StRyde-Medium';
    margin: 24px 0 0 0;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    display: flex;
}
.codedropz-upload-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
span.dnd-upload-counter {
    display: none;
}

/*Steps*/
.steps-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.steps {
    display: flex;
    flex-direction: column;
    position: relative;
}

.steps::before {
	content: "";
    position: absolute;
    left: 20px;
    top: 35px;
    bottom: 60px;
    width: 1px;
    background: #98A2B3;
}

.step-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    align-content: center;
    justify-content: flex-start;
}

.step-number {
	min-width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(270deg, #0266A0 0%, #6E267B 100%);
    border-radius: 100px;
    color: var(--Base-White, #FFF);
    text-align: center;
    font-family: Arial;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
	margin-bottom: 32px;
}
.step-content {
    margin-bottom: 32px;
}
.steps-container h2.section-title, .text_editor_section .container h1, .gradient_text h2 {
	background: var(--Gradient-Purple-Blend, linear-gradient(270deg, #0266A0 0%, #6E267B 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: StRyde-Medium;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: -0.72px;
}
.step-content p {
    color: var(--Secondary-Deep-Blue, #111C2D);

	/* Text md/Arial Regular */
	font-family: Arial;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; /* 137.5% */
}

/**Map*/
.wpsl-search {
    display: none !important;
}

.wpsl-info-window span {
    display: none!important;
}


#wpsl-gmap .wpsl-info-actions {
    display: none!important;
}

.wpsl-info-window a {
	color: var(--Secondary-Deep-Blue, #111C2D);
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
}


.gm-ui-hover-effect {
    display:none !important;
}

#wpsl-wrap #wpsl-result-list ul li {
    gap: 16px;
    display: flex;
    justify-content: center;
    align-content: center;
}

section.text_editor_section.weather_map {
    padding: 0;
}

#wpsl-wrap #wpsl-result-list li {
		border-bottom: 0px;
}
#wpsl-result-list li p {
    margin: 0 !important;
}

 @media (min-width: 1080px) {

	#wpsl-gmap {
		width: 75%;
	}

	#wpsl-wrap #wpsl-result-list li {
		padding: 8px 32px;
		border-bottom: 0px;
	}
	
	#wpsl-result-list {
		width: 30%;

		margin-right: 0;
	}

 }
 
 .wpsl-map-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.wpsl-buttons {
    position: absolute;
    bottom: 40px;
    left: 35%;
    display: flex;
    gap: 10px;
}

.wpsl-buttons button {
	border-radius: 100px;
    background: var(--Secondary-Warm-Yellow, #FFCD00);
    cursor: pointer;
    padding: 8px 24px 8px 12px;
    justify-content: center;
    color: var(--Secondary-Deep-Blue, #111C2D);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.wpsl-buttons button:hover {
    background-color: #6E267B;
    color: #fff;
}
	
section.text_editor_section.box_shadow .container {
    max-width: 800px;
    margin: auto;
    padding: 0 20px;
}

section.text_editor_section.disclaimer_text .container {
    margin: auto;
    padding: 0 20px;
}


/* Pop-up container */
.cf7-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 56px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.wpcf7-response-output {
    display: none;
}

span#cf7-popup-message {
    color: var(--Secondary-Deep-Blue, #111C2D);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    line-height: 22px;
    display: flex;
}
/* When visible */
.cf7-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Popup content */
.cf7-popup-content {
    position: relative;
    text-align: left;
}

/* Error Message */
.cf7-popup.error {
    background: #fff5f5;
}

/* Close button */
#cf7-popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: #333;
    outline: none;
	padding:0;
}

/* Close button hover */
#cf7-popup-close:hover {
    color: red;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.wpcf7-not-valid,
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.wpcf7-not-valid  {
    background: #FFF4F4;
    border: 2px solid var(--Primary-Corporate-Blue-500, #A50013);
}
.wpcf7-not-valid-tip {
    display: block;
    color: #A50013;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.wpcf7-form-control-wrap input[type="checkbox"]:checked + .wpcf7-list-item-label + .wpcf7-not-valid-tip {
  display: none;
}

section.text_editor_section.box_shadow {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.10);
    padding: 40px 48px;
	max-width: 1200px;
	margin: 40px auto 0;
}
section.text_editor_section.disclaimer_text {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.10);
    padding: 10px 0;
	background: #ffcd00;
}
section.text_editor_section.disclaimer_text p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.page-id-21 div#sticky-bar, .page-id-1083 div#sticky-bar {
    display: none;
}

div#howto a {
    text-decoration: underline;
}

.grey_background {
    background: var(--Tertiary-Grey-25, #FAFAFA);
}

.image-right {
    flex-direction: row-reverse;
}

.yellow_banner .container {
    border-radius: 4px;
    background: var(--Secondary-Warm-Yellow, #FFCD00);
    padding: 24px;
    display: flex;
    justify-content: space-around;
}

.blue_banner .container {
    border-radius: 4px;
	background: var(--Secondary-Bright-Blue-100, #CCECF9);
    padding: 24px;
    display: flex;
    justify-content: space-around;
}
.grey_banner .container {
    border-radius: 4px;
	background: #FAFAFA;
    padding: 32px;
    display: flex;
    justify-content: space-around;
}


section.text_editor_section.overview .container {
    padding: 72px 128px;
    max-width: 1500px;
    margin: auto;
}

section.text_editor_section.overview.no-paddingtop .container{
    padding: 0 128px 72px 128px;
}

p.news-date {
    color:  #667085;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
	padding-bottom: 0 !important;
}

.news-arrow-link  {
    transition: transform 0.3s ease;
    position: absolute;
    bottom: 24px;
    right: 24px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.news-arrow-link svg {
    width: 24px;
    height: 10px;
    transition: transform 0.3s ease;
}

.news-item:hover {
    border-radius: 4px;
    border: 4px solid var(--Secondary-Warm-Yellow, #FFCD00);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}

.news-item:hover .news-arrow-link svg {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

.news-info {
    position: relative;
}

.news-info p {
	padding-bottom:24px;
}

.no-paddingtop {
    padding-top: 0 !important;
}

.no-paddingbottom {
    padding-bottom: 0 !important;
}

.overview-image-text .container {
    max-width: 1500px;
    margin: auto;
    padding: 0 128px;
}
.no-paddingtop ul {
    margin-top: 0 !important;
}

/* General styles for the 50/50 layout */
.text-editor{
    display: flex;
    flex-wrap: wrap; /* Allows responsiveness */
    gap: 20px; /* Adds space between columns */
}

.editor-column {
    display: flex;
    flex-wrap: wrap; /* Ensure columns wrap on smaller screens */
    gap: 20px;
}

.editor-left, .editor-right {
    width: 48%; /* Set each column to 50% of the width */
}

/* Masonry Gallery Styling */
.masonry-gallery {
  column-count: 2; /* Number of columns for desktop */
  column-gap: 16px; /* Gap between columns */
}

.gallery-item {
  break-inside: avoid; /* Ensures that items don’t break inside columns */
  margin-bottom: 16px;
  width: 100%; /* Items should fill 100% of the column width */
  display: inline-block;
}

.gallery-item img {
  width: 100%; /* Image takes up full width of its container */
  height: auto;
  display: block;
  border-radius: 8px; /* Optional: rounded corners for images */
}

/* Responsive Design for Mobile (1 column on small screens) */
@media (max-width: 768px) {
  .masonry-gallery {
    column-count: 1; /* Single column on mobile */
  }
}
}
.post-navigation {
    display: flex;
    justify-content: space-between; /* Pushes Previous to start & Next to end */
    align-items: center;
	width: 100%;
}

.previous {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns Previous to the left */
}

.next {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns Next to the right */
}

.post-nav {
    font-family: Arial;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--Dark-Blue-500, #1C4DA1);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.post-nav:hover {
    color: #163b81;
}

.previous svg {
    margin-right: 8px; /* Adds spacing between icon and text */
}

.next svg {
    margin-left: 8px; /* Adds spacing between text and icon */
}


.padding-30 {
	padding:30px 0;
}

.post h2 {
    margin-top: 24px;
    margin-bottom: 0;
}

h3 {
    color: var(--Secondary-Night-Blue, #003C71);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
	margin-bottom: 0;
	margin-top: 24px;
}
li::marker {
    color: #6E267B;
}
h4 {
    color: var(--Secondary-Night-Blue, #003C71);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
	margin-bottom: 0;
	margin-top: 24px;
}

.author-share-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--Dark-Blue-200, #D0D5DD); /* Border line at the top */
    padding: 24px 0;
	border-bottom: 1px solid var(--Dark-Blue-200, #D0D5DD); /* Border line at the top */
    margin-top: 36px;
	width: 100%;
	margin-bottom: 16px;
}
.publish {
    color: var(--Tertiary-Grey-500, #667085);

	/* Text sm/Arial Regular */
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}

.author-info {
    display: flex;
    align-items: center;
}

.author-info img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.author-info .author-name {
    font-family: Arial;
    font-size: 16px;
    font-weight: 600;
    color: var(--Dark-Blue-500, #1C4DA1);
}
/* General styles for the share icons inside a circle */
.share-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Set width */
    height: 40px; /* Set height */
    text-align: center;
    font-size: 18px;
    color: #1C4DA1; /* Icon color */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}
.share-icons {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
	gap:16px;
}
span.entry-date {
    color: var(--Tertiary-Grey-500, #667085);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
span.backbutton {
   
    color: var(--Secondary-Night-Blue, #003C71);

	/* Text xs/Arial Bold */
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px; /* 150% */
}
.back-to-blog {
	padding: 56px 0 0;
    display: flex;
	gap: 8px;
    align-items: center;
}

a.back-button {
	gap: 8px;
    display: flex;
    align-items: center;
    border-radius: 100px;
    border: 2px solid var(--Tertiary-Grey-200, #EAECF0);
    padding: 8px 24px;
}
span.shareon {
    color: var(--Tertiary-Grey-500, #667085);

	/* Text sm/Arial Regular */
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}
h1.entry-title {
    background: var(--Gradient-Purple-Blend, linear-gradient(270deg, #0266A0 0%, #6E267B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
	margin: 24px 0 0;
}
.post section.text-editor .container p, .post section.text_editor_section .container p, .post section.text_editor_section .container li {
    font-size: 16px;
}

.entry-content p {
    color: var(--Secondary-Deep-Blue, #111C2D);
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.single-post-image img {
    width: 100%;
	border-radius: 4px;
	background: url(<path-to-image>) lightgray 50% / cover no-repeat;
	box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
}
.post .container {
    max-width: 1200px;
    margin: 0 auto;
}

.margin-24 {
	margin:24px 0;
}



/* Start of Tablet */

@media (max-width: 1080px) and (min-width: 768px) {
	.custom-button {
		display:none;
	}
    .main-navigation {
        display: flex	;
        justify-content: flex-end;
        margin-left: 0;
    }	
	.header-button {
		display: none;
	}
	 .timeline {
		margin-bottom: 100px;
	 }
     .hero-content-desktop {
         display:none;
    }
     .hero-content-mobile {
         display: block;
         background: linear-gradient(244deg, #0266A0 2.44%, #6E267B 95.75%);
         padding: 40px 80px 40px 48px;
    }
     .hero-title, .hero-description {
         max-width: 90%;
    }
     .hero-description {
         font-size: 16px;
         line-height: 22px;
    }
     .hero-title h1 {
         font-size: 30px;
         line-height: 34px;
    }
	.hero-button {
		display: flex;
		text-decoration: none;
		font-weight: bold;
		justify-content: flex-start;
		padding: 16px 32px;
		align-items: center;
		gap: 8px;
	}
	.hero-buttons-inline {
		display: flex;
		gap: 10px;
		padding-top: 24px;
	}
     .image-text-section {
         display: flex;
         justify-content: space-around;
         align-items: flex-start;
         gap: 24px;
         align-self: stretch;
		 padding: 16px 32px;
    }
	.image-text-section .text-column {
        flex: 1;
        max-width: 100%;
        order: 2;
    }
     .gradient-text {
         font-size: 30px;
         line-height: 34px;
    }
     .get_involved {
         font-size: 16px;
         line-height: 22px;
         padding-bottom: 16px;
    }
     .discover_weather {
         font-size: 16px;
         line-height: 22px;
    }
    .overview-image-text .row {
         display: flex;
         justify-content: space-between;
         gap: 24px;
         align-items: flex-start;
		 flex-direction: column;
    }
	.image-text-section .buttons {
		padding: 24px 0;
	}
	.image-column img {
		max-height: 100%;
	}	
     .timeline-section {
         padding: 48px 32px;
    }
     .timeline-section .section-header {
         padding: 0px;
    }
     .timeline-section .section-title {
         font-size: 24px;
         line-height: 28px;
         margin-bottom: 16px;
    }
     .timeline-content.left p, .timeline-content.right p {
         font-size: 18px;
    }
     .timeline-content.left, .timeline-content.right {
         padding:24px;
    }
     .weather-watch-timeline {
         position: absolute;
         right: 0;
         margin: -75px 0;
    }
     .video-text-section {
         padding: 48px 32px;
    }
     .four-columns-block .container {
         padding: 56px 32px;
    }
     .block-title {
         font-size: 18px;
         line-height: 24px;
    }
     .block-description {
         font-size: 14px;
         line-height: 20px;
    }
     .resources-blog-section .section-title {
         line-height: 34px;
    }
     .resource-details {
         padding: 16px;
         text-align: left;
    }
     .resource-excerpt {
         font-size: 14px;
         line-height: 20px;
    }
     .resource-date {
         font-size: 12px;
         line-height: 18px;
    }
     .resource-title a {
         font-size: 18px;
    }
     .read-more {
         margin: 16px;
    }
     .testimonial-text-section {
         padding: 72px 32px 48px 32px;
    }
     p {
         font-family: Arial;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px;
    }
     .resources-blog-section {
         padding: 96px 32px;
    }
     .video-column {
         max-width: 50%;
    }
     .video-text-section .row {
         gap: 24px;
    }
     .copyright-container {
         justify-content: space-between;
         padding: 20px;
         align-items: flex-start;
         width: 100%;
         flex-direction: column-reverse;
         align-content: flex-start;
    }
     .site-footer .copyright-info .social-links a {
         margin-left:0;
    }
     .site-footer .footer-columns {
         padding: 64px 32px 40px 32px;
    }
     .site-footer .footer-separator {
         border: 0;
         border-top: 1px solid #FFF;
         margin: 0px 32px;
    }
     footer.site-footer {
         position: relative;
         background: url(/wp-content/themes/esb/images/footer_background_tablet.svg);
         width: 100%;
         background-repeat: no-repeat;
         background-size: cover;
         background-position: top right;
    }
     .site-footer .footer-column {
         flex: 1;
         min-width: 25%;
         padding: 0 15px;
         text-align: left;
    }
     .site-footer .copyright-info {
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
         font-size: 0.9rem;
         color: #ccc;
         padding: 40px 32px 32px 32px;
         text-align: center;
    }
     .resources-list, .news-list {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         padding: 0 96px;
         margin-top: 48px;
    }

     .resource-info h2 {
         color: var(--Secondary-Night-Blue, #003C71);
         font-family: Arial;
         font-size: 18px;
         font-style: normal;
         font-weight: 700;
         line-height: 24px;
         transition: color 0.3s ease;
    }
     .resource-info p {
         color: var(--Secondary-Deep-Blue, #111C2D);
         font-family: Arial;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px;
         margin-bottom: 20px;
    }
     .resources-filter {
         display: flex;
         gap: 24px;
         padding: 32px 96px 0;
         flex-direction: column;
    }
	 .overview-image-text .container {
		padding: 0;
	 }
	 .no-paddingtop {
		padding-top: 0;
	}
	.no-paddingbottom {
		padding-bottom: 0;
	}
	
	section.text_editor_section.overview, section.text_editor_section {
         padding: 16px 32px;
    }
	
     .top_margin {
         margin-top: 32px;
    }
     .text_editor_section p {
         color: var(--Secondary-Deep-Blue, #111C2D);
         font-family: Arial;
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
         line-height: 22px;
    }
     h2.blog_title {
         color: var(--Secondary-Night-Blue, #003C71);
         font-size: 30px;
         font-style: normal;
         font-weight: 500;
         line-height: 34px;
         letter-spacing: -0.72px;
         margin: 0;
    }
	a.button.arrow {
		width: 100%; 
		justify-content:flex-start;
	}
	div#wpcf7-f290-o1, div#wpcf7-f547-o1, div#wpcf7-f562-o1 {
		padding: 24px !important;
	}
	section.text_editor_section.overview .container , section.text_editor_section.overview.no-paddingtop .container{
		padding: 0;
	}	
	
	.post .container {
		padding: 0 24px;
	}
	.post section.text_editor_section .container, 
	.post section.text_editor_section,
	.post section.text-editor .container {
        padding: 0;
    }
	
	.post section.text_editor_section.yellow_banner .container , 
	.post section.text_editor_section.blue_banner .container {
		padding: 24px;
	}
	.editor-column {
        flex-direction: column; /* Stack on smaller screens */
		gap: 0;
    }
    
    .editor-left, .editor-right {
        width: 100%; /* Make each column 100% width on mobile */
    }
	
	h1.entry-title {
		font-size: 36px;
		line-height: 38px; /* 105.556% */
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 20px;
	}
	.entry-content p {
		/* Text md/Arial Regular */
		font-family: Arial;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px; /* 137.5% */
	}
	.post section.text-editor .container p, .post section.text_editor_section .container p, .post section.text_editor_section .container li {
		font-size: 14px;
		line-height: 20px;
	}

}



 @media (max-width: 768px) {
	 
	 .custom-button {
		display:none;
	}
	section.text_editor_section.overview .container , section.text_editor_section.overview.no-paddingtop .container{
		padding: 0;
	}
	 button#close-sticky-bar {
		width: 10%;
	}
	 button, input[type="button"], input[type="reset"], input[type="submit"] {
		width: 100%;
	 }
	.steps-container {
		padding: 32px 20px !important;
	}
	
	.step-content p {
		color: var(--Secondary-Deep-Blue, #111C2D);
		font-family: Arial;
		font-size: 14px !important;
		font-style: normal;
		font-weight: 400;
		line-height: 20px !important; 
	}	
	
	 .wpsl-buttons {
		display: none !important;
	}
	
	
	div#wpcf7-f290-o1, div#wpcf7-f547-o1, div#wpcf7-f562-o1 {
    padding: 24px !important;
	}	
	 
	.hero-button {
		display: flex;
		text-decoration: none;
		font-weight: bold;
		justify-content: flex-start;
		min-width: 250px;
		padding: 16px 32px;
		align-items: center;
		gap: 8px;
	}
	.hero-buttons-inline {
		display: flex;
		gap: 10px;
		flex-direction: column;
		align-items: flex-start;
		padding-top: 24px;
	}
	 
	section.text_editor_section.contact_form {
		display: flex;
		padding: 32px 24px 56px 24px !important;
		gap: 24px;
		align-self: stretch;
		justify-content: space-around;
		flex-direction: column;
	}
	.form-row {
		display: flex;
		gap: 0px !important;
		flex-direction: column;
	}
	 
	div#wpcf7-f290-o1 {
		padding: 24px 24px 32px 24px !important;
	}
	
	a.button.arrow {
		width: 100%; 
	}

	.policy-links ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	
     .main-navigation {
         display: flex;
         justify-content: flex-end;
		 margin-left: 0;
    }
	
	#mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated {
		    justify-content: flex-end;
	}
     .image-text-section {
         padding: 32px 24px;
    }
     .image-text-section .row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 16px;
         flex-direction: column;
    }
     .image-right .image-column {
         order: 1;
    }
     .image-text-section .text-column {
         flex: 1;
         order: 2;
    }
    /*Timeline*/
     .timeline-item {
         flex-direction: column;
         align-items: flex-start;
    }
     .timeline-item .timeline-content {
         width: 70%;
         background: var(--Base-White, #FFF);
         box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
         padding: 16px 24px;
         margin-bottom: 16px;
    }
     .timeline-item .timeline-marker {
         position: absolute;
         right: 40px;
         top: 80px;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
    }
     .timeline-content.left p, .timeline-content.right p {
         color: var(--Secondary-Night-Blue, #003C71);
         font-family: Arial;
         font-size: 16px;
         font-style: normal;
         font-weight: 700;
         line-height:22px;
    }
     .timeline-dot {
         position: static;
         width: 24px;
         height: 24px;
         background-color: var(--Secondary-Bright-Blue-100, #CCECF9);
         border-radius: 50%;
    }
     .timeline-line {
         width: 1px;
         background: rgba(255, 255, 255, 0.50);
         height: 100%;
        /* Adjust height for the vertical line */
         display: flex;
         flex-direction: column;
         justify-content: space-between;
        /* Stack dot and line vertically */
         align-items: center;
    }
     .timeline-item:last-child .timeline-line {
         height: auto;
        /* Adjust height for the last item */
    }
     .timeline-section .section-header {
         padding: 0;
    }
     .site-branding img {
         width: 200px;
    }
     .header-container {
         height: 70px;
         padding: 24px 16px;
    }
     p {
         font-size: 14px;
         line-height: 20px;
    }
     .timeline-content {
         width: 85%;
         text-align: left;
    }
     .timeline-marker {
         display: none;
    }
     .timeline-section .section-header {
         padding: 0;
    }
     .timeline-section {
         padding: 0;
    }
     .timeline-section .section-title {
         font-size: 24px;
         line-height: 28px;
    }
     .timeline-section .timeline-container{
         padding: 32px 24px 96px;
    }
     .timeline-content.empty {
         display: none;
    }
     .timeline-item {
         display: flex;
         align-items: flex-start;
         width: 100%;
         position: relative;
         gap: 0;
         flex-direction: column;
         padding-bottom: 16px;
    }
     .video-text-section .row {
         gap: 24px;
         flex-direction: column;
    }
     .video-text-section {
         padding: 32px 24px 16px 24px;
    }
     .video-text-section .text-column {
         flex: 1;
         order: 2;
    }
     .main-navigation ul {
         display: none;
         flex-direction: column;
         background: white;
         position: absolute;
         top: 50px;
         right: 0;
         width: 200px;
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
         padding: 10px;
    }
     .toggled ul {
         display: flex;
    }
     .menu-toggle {
         display: block;
         cursor: pointer;
         padding: 10px;
         font-size: 18px;
         background: none;
         border: none;
    }
     .main-navigation ul {
         display: none;
         position: absolute;
         top: 50px;
         right: 0;
         background: white;
         width: 200px;
         padding: 10px;
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
     .resources-blog-section {
         padding: 56px 24px 32px 24px;
    }
     .resources-grid {
         display: flex;
         gap: 16px;
         flex-direction: column;
    }
     .testimonial-text-section {
         padding: 32px 24px;
    }
     .testimonial-text-section .row {
         display: flex;
         gap: 32px;
         flex-direction: column;
    }
     h2.testimonial_title.gradient-text {
         padding-left: 32px;
    }
     .quote {
         position: absolute;
         margin-top: -175px;
         margin-left: -15px;
    }
     .header-button {
         display: none;
         align-items: center;
    }
     .hero-content-desktop {
         display:none;
    }
     .hero-content-mobile {
         display: block;
         background: linear-gradient(244deg, #0266A0 2.44%, #6E267B 95.75%);
         padding: 32px 24px 80px 24px;
    }
     .hero-title, .hero-description {
         max-width: 90%;
    }
     .hero-slide {
         position: relative;
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         height: 270px;
         width: 100%;
    }
     .hero-title h1 {
         font-size: 30px;
         line-height: 34px;
    }
     .hero-description p {
         font-size: 16px;
         line-height: 22px;
    }
     .gradient-text {
         font-size: 30px;
         line-height: 34px;
    }
     .get_involved {
         font-size: 16px;
         line-height: 22px;
         padding-bottom: 16px;
    }
     .discover_weather {
         font-size: 16px;
         line-height: 22px;
    }
     .site-footer .footer-columns {
         flex-direction: column;
         align-items: left;
         padding: 100px 24px 0;
    }
     .site-footer .footer-column {
         text-align: left;
         margin-bottom: 20px;
    }
     .site-footer .copyright-info {
         flex-direction: column;
         text-align: left;
         padding: 0 24px;
    }
     .site-footer .footer-separator {
         border: 0;
         border-top: 1px solid #FFF;
         margin: 16px 24px;
    }
     footer.site-footer {
         background: url('/wp-content/themes/esb/images/footer background_mobile.svg');
         width: 100%;
         background-repeat: no-repeat;
         background-size:cover;
    }
     .copyright-container {
         display: flex;
         padding: 0;
         width: 100%;
         flex-direction: column;
		 align-items: flex-start;
    }
	.copyright-column {
		text-align: left;
	}	
     .site-footer .copyright-info .social-links a {
         margin-left:0;
    }
     .site-footer .copyright-info .policy-links ul {
         justify-content: left;
    }
     .site-footer .copyright-info .social-links {
         margin-top: 10px;
    }
     .resource-excerpt {
         font-size: 14px;
         line-height: 20px;
    }
     .resource-title a {
         font-size:18px;
    }
     .resource-date {
         font-size: 12px;
         line-height: 18px;
    }
     .resource-details {
         padding: 16px;
         text-align: left;
    }
     .resources-blog-section .section-title {
         color: var(--Secondary-Deep-Blue, #111C2D);
         font-size: 30px;
         font-style: normal;
         line-height: 34px;
    }
    /* four columns block */
     .four-columns-block .row {
         flex-direction: column;
    }
     .four-columns-block .col-md-3 {
         width: 100%;
    }
     .block-item {
         display: flex;
         flex-direction: row;
         align-items: center;
    }
     .block-text {
         text-align: left;
         flex: 1;
    }
     .block-title {
         font-size: 16px;
         line-height: 22px;
         text-align: left;
         margin: 0;
    }
     .block-description {
         font-size: 14px;
         line-height: 20px;
         text-align: left;
         margin: 0;
    }
     .four-columns-block .container {
         padding: 32px 24px;
    }
     .four-columns-block .row {
         gap: 48px;
         flex-direction: column;
    }
     .block-icon {
         margin-right: 24px;
    }
    /* Resources List */
     .resources-list, .news-list {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         padding: 0 24px;
         margin-top: 24px;
    }
     .resources-item, .news-item {
         display: flex;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         padding: 16px;
         align-items: flex-start;
         flex-direction: column;
    }
     .resources-image, .news-image {
         width: 100%;
         margin-right: 0;
    }
     .resources-info, .news-info {
         width: 100%;
    }
     .resources-info h2, .news-info h2 {
         color: var(--Secondary-Night-Blue, #003C71);
         font-family: Arial;
         font-size: 18px;
         font-style: normal;
         font-weight: 700;
         line-height: 22px;
         transition: color 0.3s ease;
    }
     .resources-info p, .news-info p {
         color: var(--Secondary-Deep-Blue, #111C2D);
         font-family: Arial;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px;
    }
	.resources-info p {
         margin-bottom: 20px;
    }
     .resources-filter {
         display: flex;
         gap: 16px;
         padding: 32px;
         flex-direction: column;
         align-items: flex-start;
    }
     .resources-filter select {
         width: 100%;
    }
     .text_editor_section p {
         color: var(--Secondary-Deep-Blue, #111C2D);
         font-family: Arial;
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
         line-height: 22px;
    }
     h2.blog_title {
         color: var(--Secondary-Night-Blue, #003C71);
         font-size: 30px;
         font-style: normal;
         font-weight: 500;
         line-height: 34px;
         letter-spacing: -0.72px;
         margin: 0;
    }
     section.text_editor_section  {
         padding: 16px 32px;
    }
	section.text_editor_section.overview  {
         padding: 16px 24px;
    }
	
	section.image-text-section li {
		color: var(--Secondary-Deep-Blue, #111C2D);
		font-family: Arial;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
	}
	
	section.text_editor_section.box_shadow {
		padding: 16px 20px;
	}
	section.text_editor_section.disclaimer_text {
		padding: 16px 20px;
	}

     .top_margin {
         margin-top: 32px;
    }
     .buttons a {
         padding: 16px 32px;
         color: var(--Secondary-Deep-Blue, #111C2D);
         font-family: Arial;
         font-size: 14px;
         font-style: normal;
         font-weight: 700;
         line-height: 22px;
         width: 100%;
         display: flex;
         justify-content: center;
    }
     
	.resources-item, .news-item {
         width: 100%;
         margin-left: 0px;
         margin-right: 0px;		 
         padding: 0px;
    }
     select#sort-order {
         width: 100%;
    }
     
     select#resource-type {
         background: white;
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         background-image: url('/wp-content/uploads/2025/02/chevron-down-1.svg');
         background-repeat: no-repeat;
         background-position: right 10px center;
    }
     select#sort-order {
         background: white;
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         background-image: url('/wp-content/uploads/2025/02/chevron-down-1.svg');
         background-repeat: no-repeat;
         background-position: right 10px center;
    }
	
	.overview-image-text .container {
		padding: 0;
	}
	#wpsl-stores {
		height: 350px;
		overflow-y: auto;
		width: 70%;
		margin: auto;
	}
	.steps::before {
		top: 45px;
	}
	section.text_editor_section.box_shadow {
		padding: 40px 0 !important;
	}
	section.text_editor_section.disclaimer_text {
		padding: 40px 0 !important;
	}
    #cf7-message-popup {
        width: 90%; /* Make the popup width 90% on smaller screens */
        max-width: 350px; /* Adjust the maximum width for smaller screens */
        padding: 15px; /* Reduce padding on mobile for a more compact layout */
    }

    #cf7-popup-close {
        font-size: 30px; /* Slightly smaller close button */
    }

    .cf7-popup-header h2 {
        font-size: 18px; /* Make header text slightly smaller on mobile */
    }

    .cf7-popup-content {
        font-size: 14px; /* Smaller font size for mobile */
    }
	ul, ol, li {
		font-size: 16px;
		line-height: 22px;
	}
	
	.post .container {
		padding: 0 24px;
	}
	.post section.text_editor_section .container, 
	.post section.text_editor_section,
	.post section.text-editor .container {
        padding: 0;
    }
	
	.post section.text_editor_section.yellow_banner .container , 
	.post section.text_editor_section.blue_banner .container {
		padding: 24px;
	}
	.editor-column {
        flex-direction: column; /* Stack on smaller screens */
		gap: 0;
    }
    
    .editor-left, .editor-right {
        width: 100%; /* Make each column 100% width on mobile */
    }
	.author-share-block {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: column;
		align-content: flex-start;
	}
	.publish {
		display: inline;
	}
	h1.entry-title {
		font-size: 36px;
		line-height: 38px; /* 105.556% */
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 20px;
	}
	.entry-content p {
		/* Text md/Arial Regular */
		font-family: Arial;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px; /* 137.5% */
	}
	.post section.text-editor .container p, .post section.text_editor_section .container p, .post section.text_editor_section .container li {
		font-size: 14px;
		line-height: 20px;
	}
}

p.caption {
    font-size: 14px;
}

.language-button {
    border-radius: 100px;
    border: 1px solid var(--Tertiary-Grey-200, #EAECF0);
    padding: 8px 16px;
    text-decoration: none;
    margin-right: 10px;
    font-size: 14px;
    display: inline-block;
    background-color: transparent;
    color: #003C71; 
}

.language-button:hover {
    background-color: #f0f0f0;
}

section.default_page {
    margin: 56px;
}

@media screen and (min-width: 1081px) and (max-width: 1600px) {
  .copyright-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .copyright-column {
    flex: 0 0 50%;
    box-sizing: border-box;
  }

  .copyright-column:nth-child(1) {
    order: 2;
  }

  .copyright-column:nth-child(2) {
    order: 1;
    text-align: left;
  }

  .copyright-column:nth-child(3) {
    flex: 0 0 50%;
    text-align: left;
    order: 3;
  }
  .site-footer .copyright-info .policy-links ul {
    display: flex;
    justify-content: left;
	}
}

#wpsl-result-list ul {
    background-color: #F2F8FB;
}

.resource-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Layout Engine */
.video-text-section .row {
    display: flex;
    align-items: center;
    gap: 40px; /* Adjust gap between video and text */
    flex-wrap: wrap; /* Allows stacking on mobile */
}

/* Video on Left (Default) */
.video-text-section .row.video-left {
    flex-direction: row;
}

/* Video on Right */
.video-text-section .row.video-right {
    flex-direction: row-reverse;
}

/* Responsive Columns */
.video-column, .text-column {
    flex: 1;
    min-width: 320px; /* Prevents columns from getting too narrow */
}