.elementor-kit-12{--e-global-color-primary:#6AC3E7;--e-global-color-secondary:#FFC600;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FF8D6D;--e-global-color-f151de0:#00C4B3;--e-global-color-6bc6185:#215682;--e-global-color-40f6a67:#E8E8E9;--e-global-typography-primary-font-family:"Bungee";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Bungee";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-6bc6185 );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{background-color:var( --e-global-color-text );font-family:"Bungee", Sans-serif;color:var( --e-global-color-6bc6185 );border-style:solid;border-width:6px 6px 6px 6px;border-color:var( --e-global-color-secondary );border-radius:12px 12px 12px 12px;padding:10px 40px 10px 40px;}.elementor-kit-12 button:hover,.elementor-kit-12 button:focus,.elementor-kit-12 input[type="button"]:hover,.elementor-kit-12 input[type="button"]:focus,.elementor-kit-12 input[type="submit"]:hover,.elementor-kit-12 input[type="submit"]:focus,.elementor-kit-12 .elementor-button:hover,.elementor-kit-12 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-6bc6185 );border-style:solid;border-width:6px 6px 6px 6px;border-color:var( --e-global-color-secondary );border-radius:12px 12px 12px 12px;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-kit-12 a{color:var( --e-global-color-6bc6185 );}.elementor-kit-12 h1{font-family:"Bungee", Sans-serif;font-size:2.5rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0rem;--container-default-padding-right:2rem;--container-default-padding-bottom:0rem;--container-default-padding-left:2rem;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.e-con{--container-default-padding-top:0rem;--container-default-padding-right:2rem;--container-default-padding-bottom:0rem;--container-default-padding-left:2rem;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.e-con[id] { scroll-margin-top: 100px; } .elementor-menu-anchor { scroll-margin-top: 100px; } .top-dashed-light-blue { position: relative; } .top-dashed-light-blue::before { content: ""; position: absolute; left: 0; right: 0; height: 12px; top: -6px; /* The Pattern: This is an inline SVG. - width='36' height='12': The size of one repeating unit (dash + gap). - rect width='24': The width of the colored dash. The gap is 36 - 24 = 12px. - rx='6' ry='6': The border-radius. Half of the height (12/2=6) makes it fully rounded. - fill='%23FEC931': The yellow color (URL-encoded #). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Crect x='0' y='0' width='24' height='12' rx='6' ry='6' fill='%236ac3e6'/%3E%3C/svg%3E"); /* Repeat the pattern horizontally */ background-repeat: repeat-x; /* Ensure the background size matches the SVG size for perfect repetition */ background-size: 36px 12px; /* Ensures the border sits on top of the background content below */ z-index: 10; } .bottom-dashed-yellow { position: relative; } .bottom-dashed-yellow::after { content: ""; position: absolute; left: 0; right: 0; /* Height of the border dashes. */ height: 12px; /* Positioning: By setting bottom to a negative value equal to its height, we push it completely below the white header container. */ bottom: -6px; /* The Pattern: This is an inline SVG. - width='36' height='12': The size of one repeating unit (dash + gap). - rect width='24': The width of the colored dash. The gap is 36 - 24 = 12px. - rx='6' ry='6': The border-radius. Half of the height (12/2=6) makes it fully rounded. - fill='%23FEC931': The yellow color (URL-encoded #). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Crect x='0' y='0' width='24' height='12' rx='6' ry='6' fill='%23ffc600'/%3E%3C/svg%3E"); /* Repeat the pattern horizontally */ background-repeat: repeat-x; /* Ensure the background size matches the SVG size for perfect repetition */ background-size: 36px 12px; /* Ensures the border sits on top of the background content below */ z-index: 10; } .step-number { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background-color: var(--e-global-color-primary); color: var(--e-global-color-6bc6185); font-family: 'Bungee', cursive; font-size: 2rem; border-radius: 50%; margin: 0 auto 1.5rem; } /* setting up so that as soon as menu is about to go to 2 lines, it turns to hamburger. Elementor didn't have the viewport width. May want to adjust when menu changes. */ #mobile-menu, #desktop-menu { display: block; } @media (min-width: 1250px) { #mobile-menu { display: none!important; } } @media (max-width: 1251px) { #desktop-menu, #cart-link, #account-link { display:none!important; } }/* End custom CSS */