/* 
Theme Name: Kraken Window Cleaning
Theme URI:  https://www.krakencleaning.co.uk
Description: Custom Wordpress Theme For Kraken Window Cleaning
Author: Alan Jones (First4IT Solutions Limited)
Author URI: https://www.first4it.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/**************/
/* Typography */
/**************/
 
html {font-size: 112.5%; scroll-behavior: smooth;} /*18px*/

/* CSS Font Clamping for Responsive Text */
h1 { font-size: clamp(2.369rem, 2.0686rem + 1.502vw, 4.209rem) !important;}
h2 { font-size: clamp(1.777rem, 1.5517rem + 1.1265vw, 3.157rem);}		
h3 { font-size: clamp(1.333rem, 1.1639rem + 0.8457vw, 2.369rem);}
h4 { font-size: clamp(1.333rem, 1.2605rem + 0.3624vw, 1.777rem);}
h5 { font-size: clamp(1.2rem, 1.1783rem + 0.1086vw, 1.333rem);}
h6 { font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.875rem) !important; line-height: 1.6; font-weight: 300; color: #666; }

.blox-boxed-small-square-icon-box-heading {font-size: clamp(1.2rem, 1.1783rem + 0.1086vw, 1.333rem) !important;}

.elementor-kit-9 {
--e-global-typography-7d0aaee-font-size: clamp(1.0625rem, 0.9503rem + 0.5612vw, 1.75rem); /* Hero Strapline */
--e-global-typography-3ac21e6-font-size: clamp(1rem, 0.9796rem + 0.102vw, 1.125rem); /* Small Text */
}

#strapline h2 {
	font-size: clamp(1.333rem, 1.1639rem + 0.8457vw, 2.369rem);
}

#pricing h2 {
	font-size: clamp(2.369rem, 2.0686rem + 1.502vw, 4.209rem) !important;}	
}

/* Newsletter Sign-Up For Success Message */
form[name="newsletter_sign_up"] .elementor-message {
	text-align: center;
	font-weight: bold;
}
	
form[name="newsletter_sign_up"] .elementor-message-success {
	color: #5cb85c;
}

form[name="newsletter_sign_up"] .elementor-message-danger {
	color: #d9534f;
}

/***************/
/* Link Styles */
/***************/

/* Blue Text For Span */
.blue-text { color: #2B95FF; }

/* Link on Dark Background */
.elementor-kit-9 .link-on-dark { color: #fff; }
.elementor-kit-9 .link-on-dark:visited { color: #2b95ff; }
.elementor-kit-9 .link-on-dark:hover { color: #2b95ff; }

/* Override For Contact Page */
.no-underline { border-bottom: none !important; }

/* Link on White Background */
.elementor-kit-9 .link-on-pale { color: #000000; }
.elementor-kit-9 .link-on-pale:visited { color: #2b95ff; border-bottom: 1px dotted #2b95ff; }
.elementor-kit-9 .link-on-pale:hover { color: #2b95ff; border-bottom: 1px dotted #2b95ff }

/* Offset When Scrolling To Anchor For Fixed Header As Anchor Disappears Under Header */
.anchoroffset { scroll-margin-top: 8rem;}

/* Add Icon To External Links */
a[target="_blank"]:not(.affiliate-link):not(.internal-link):not(.elementor-icon):not(.manual-external-link a):not(.manual-external-link):not(.bdt-logo-carousel-link):not(.wpsr-reviews-slider a):not(.ue_menu-social-icons a):not(.cky-policy):after {
   font-family: "Font Awesome 5 Free";
   content: " \f35d";
   padding-left: 3px;
   /* Must include font-weight: 900 or icons don't show */
   font-weight: 900;
}

/*****************/
/* Button Styles */
/*****************/

/* Button Active State Color */
.elementor-kit-9 .elementor-button:focus {
	background-color: #2178cf !important;
	color: #fff !important;
}

/* Font Size Clamping For Button */
.elementor-kit-9 .elementor-button { font-size: clamp(0.875rem, 0.8546rem + 0.102vw, 1rem); }

/* ------------------------------------------ */
/* Pulse Animation for Elementor Buttons      */
/* ------------------------------------------ */

/* Define the pulsing scale animation */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Container class – add this to the wrapper if needed */
.btn-pulse {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

/* Apply animation only to the button itself */
a.elementor-button.btn-pulse,
.btn-pulse a.elementor-button {
  display: inline-block;
  border-radius: var(--e-button-border-radius, 12px); /* keep radius */
  overflow: hidden;                 /* clip scaling to rounded corners */
  transform-origin: center;
  animation: pulse 1.5s infinite;   /* pulsing effect */
  will-change: transform;
  backface-visibility: hidden;      /* smoother animation */
}

/* Ensure wrapper does not clip as a square */
.elementor-button-wrapper {
  overflow: visible;
}

/* Optional: if wrapper must remain hidden, round it too */
.elementor-button-wrapper.btn-pulse {
  border-radius: var(--e-button-border-radius, 12px);
  overflow: hidden;
}

/* Optional: stronger fallback clipping for older browsers */
@supports (clip-path: inset(0 round 10px)) {
  a.elementor-button.btn-pulse,
  .btn-pulse a.elementor-button {
    clip-path: inset(0 round var(--e-button-border-radius, 12px));
  }
}


/*************************/
/* Popup - 4th Week FREE */
/*************************/

/* Elementor Popup Close Button Does Not Allow Styling Of Border Radius Color or Padding */
.week4free .dialog-close-button { 
	border-radius: 25px;
    padding: 5px !important;
    border: 3px solid #fff;
}

.week4free .dialog-close-button svg:hover {
	fill: #fff !important;
}

.week4free .dialog-close-button:focus {
	outline: 0;
}

/********************/
/* Plugin Overrides */
/********************/

/* =============================*/
/* Premium Addons For Elementor */
/* =============================*/

/* Premium Addons Contact Form 7 Widget - Remove Label Top Padding */
.elementor-widget-premium-contact-form:not(.premium-cf__preset1) label {
	padding-top: 0px;
}

/* Styling For Unfold Widget H3 Embedded Content */
.premium-unfold-content-wrap h3 { margin: 15px 0px 5px 0px; }

/* Maps Widget */
.premium-maps-container .gm-style-iw-d {
	overflow: scroll !important;
}

/* =================================*/
/* Unlimited Elements For Elementor */
/* =================================*/

/* Styling For Unlimited Elements Business Hours Text Colour As No Widget Parameter To Change This
   And It Inherits #333333 From The Hello Theme */
#uc_business_hours_elementor_de0797c .ue_business_hours_list_item_title,
#uc_business_hours_elementor_de0797c .ue_business_hours_list_item_text {
	color: #fff;
}

/* ==================================*/
/* Element Pack Addons For Elementor */
/* ==================================*/

/* Element Pack Addons For Elementor - Accordion Title Text To Close To Open/Close Button */
.bdt-ep-title-text {
	width: 90% !important; 
}

/* Add Custom Number To Top Right Hand Corner Of Icon As BD Themes Step Process Widget
   Does Not Look Good On Mobile in Two Columns - So We Make Our Own Using Containers */
.corner-number-holder { position: relative; }

.corner-number-holder > .corner-number {
  background-color: var( --e-global-color-uicore_primary );
    color: #FFFFFF;
    font-family: "futura-pt", Sans-serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.5em;
    padding: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    min-width: 35px;
    min-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    top: -10px;
    right: -5px; 
    z-index: 1;
}

/* ===========*/
/* Cookie Yes */
/* ===========*/

/* Cookie Consent - Add Border To Buttons */
.cky-notice-btn-wrapper .cky-btn {
	border: 1px solid;
	background-color: #2B95FF !important;
	color: #ffffff !important;
}

.cky-revisit-bottom-left {
	background-color: #2b95ff !important;
}

/* Add Spacing on Cookie Consent Plugin Accept All Button */
.cky-btn-accept { margin-top: 10px !important; }
.cky-notice-des * { font-size: 0.8rem !important; }
.cky-consent-bar .cky-banner-btn-close { top: 15px !important; right: 15px !important;}
.cky-consent-bar .cky-banner-btn-close img,  .cky-preference-header .cky-btn-close img { height: 15px !important; width: 15px !important;}

/* Remove Margin On Last Button */
.cky-btn:last-child {
	margin-right: 0px !important;
}

/* Button Hover Styling */
.cky-notice-btn-wrapper button:hover {
	border: 1px solid #2178CF !important;
	color: #ffffff !important;
	background-color: #2178CF !important;
	opacity: 1;
}

.cky-consent-bar button:hover,  .cky-preference-header button:hover {
	background-color: inherit !important;
}

/* =========*/
/* Chataway */
/* =========*/

/* Override Chataway Bubble Position So It Sits Above Scroll To Top Icon - Plugin Does Not Let You Move Position */
.chatway--container .chatway--trigger-container {
	bottom: 80px !important;
}

/* ======================*/
/* SureForm Form Builder */
/* ======================*/

#srfm-form-10630 .srfm-description
{
	font-size: 0.85rem !important;
}

#srfm-form-10630 .srfm-multi-choice-block .srfm-description {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}
#srfm-form-10630 .srfm-page-break-header-container {
	margin-bottom: 0px !important;
}

#srfm-form-10630 .srfm-block-label, 
#srfm-form-10630 .srfm-block-legend, 
#srfm-form-10630 .srfm-page-break-header-container .srfm-page-break-steps .srfm-steps-content, #srfm-form-10630 .srfm-form-container .srfm-block .srfm-description,
#srfm-form-10630 .srfm-multi-choice-block .srfm-block-wrap .srfm-multi-choice-single .srfm-block-content-wrap label {
	font-size: 1rem !important;
}

#srfm-form-10630 .srfm-button,  
#srfm-form-10630 .srfm-page-break-buttons .srfm-nxt-btn, 
#srfm-form-10630 .srfm-page-break-buttons .srfm-pre-btn {
	border: none !important;
	font-weight: bold;
}

#srfm-form-10630 .srfm-page-break-buttons .srfm-pre-btn {
	background-color: #1e1e1e1a !important;
}

#srfm-form-10630 .srfm-page-break-buttons .srfm-pre-btn:hover {
	background-color: #d5d8dc !important;
	color: #000000;
}

#srfm-form-10630 .srfm-multi-choice-single input:checked+.srfm-block-content-wrap {
	background-color: #2b95ff !important;
	color: #fff !important
}
#srfm-form-10630 .srfm-page-break-buttons .srfm-nxt-btn, 
#srfm-form-10630 .srfm-submit-button  {
	background-color: #2b95ff !important;
}

#srfm-form-10630 .srfm-page-break-buttons .srfm-nxt-btn:hover,
#srfm-form-10630 .srfm-submit-button:hover {
	background-color: #2178CF !important;
}

/* Completed Step Counter Set To Green Not Grey */
.srfm-page-break-header-container .srfm-page-break-progress-container .srfm-progress-connector li.filled .srfm-circle-shape {
	background-color: #1CA739 !important;
}

/* Fix For Missing Gap Declaration In .srfm-page-break Class */
#srfm-form-10630 .srfm-page-break {
/*gap: var(--srfm-column-gap-between-blocks);*/
  gap: 12px;
}

.srfm-icon .srfm-multi-choice-icon-unchecked
#srfm-form-10630 .srfm-icon .srfm-multi-choice-icon-unchecked svg path {
	stroke: black !important;
}

/* Multi Select Checked (White) */
#srfm-form-10630 .srfm-multi-choice-icon svg path {
  stroke: white !important;
}

/* Multi Select Un-Checked (Black) */
#srfm-form-10630 .srfm-multi-choice-icon-unchecked svg path {
  stroke: black !important;
}

#srfm-form-10630 .srfm-page-break-header-container .srfm-page-break-progress-container .srfm-progress-connector li .srfm-circle-text {
	font-size: 1rem !important;
}

#srfm-form-10630 .srfm-input-common {
	font-size: 1rem !important;
}

/* ========*/
/* WPForms */
/* ========*/

/* Override For Submit Button */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    font-family: "proxima-nova", Sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 0 !important;
	height: 51px !important;
    letter-spacing: 0em !important;
    color: #FFFFFF !important;
    background-color: #2b95ff !important;
    border-style: none !important;
    border-radius: 6px 6px 6px 6px !important;
    padding: 17px 30px 17px 30px !important;
}
/* Override For Submit Button Hover */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit]:hover {
	background-color: #2178cf !important;
}

/* FORM-SPECIFIC: stop collapse and stack captcha above the button */
#wpforms-15445 .wpforms-recaptcha-container {
  position: relative;
  display: block;
  min-height: 88px;          /* reserve space for the Turnstile UI (tweak 70–110px if needed) */
  margin-top: 12px;
  z-index: 5;
}

/* Ensure the injected Turnstile element actually occupies space */
#wpforms-15445 .wpforms-recaptcha-container iframe,
#wpforms-15445 .wpforms-recaptcha-container > div,
#wpforms-15445 .wpforms-recaptcha-container .cf-turnstile {
  position: relative !important;
  display: block !important;
}

/* Keep the submit container under the captcha */
#wpforms-15445 .wpforms-submit-container,
#wpforms-submit-15445 {
  position: relative;
  z-index: 1;
  margin-top: 12px;          /* creates a clear gap from the captcha */
}

@media (max-width: 600px) {
  #wpforms-submit-15445 {
    display: block;
    margin: 0 auto;
  }
}

/* ==============*/
/* WP Simple Pay */
/* ==============*/

/* WP Simple Pay Style Override For Text Field As Width Does Not Match Stripe Fields And We Cannot Change These
   Which Make The Form Look Ugly */

.simpay-styled .simpay-form-control input[type=text], 
.simpay-styled .simpay-form-control input[type=email],
.simpay-styled .simpay-form-control input[type=tel]
{
	width: 392px !important;
	padding: 8px !important;
}

.simpay-styled .simpay-form-control .simpay-btn:not(.stripe-button-el) {
	background-color: #2b95ff !important;
	border-radius: 6px 6px 6px 6px !important;
	padding: 15px 30px 15px 30px !important;
	width: 300px !important;
	height: 52px !important;
	font-weight: 700 !important;
}

.simpay-styled .simpay-form-control .simpay-btn:not(.stripe-button-el):hover {
	background-color: #2178CF !important; 
}

/***************/
/* Misc Styles */
/***************/

/* ==========================
/* Fix Owl Carousel Overflow 
/* ==========================

/* Clip the carousel and its viewport */
.owl-carousel,
.owl-carousel .owl-stage-outer { overflow: hidden; max-width: 100%; }

/* Keep slides and media from exceeding their box */
.owl-carousel .owl-item { box-sizing: border-box; max-width: 100%; }
.owl-carousel .owl-item img { max-width: 100%; height: auto; display: block; }

/* Keep nav arrows inside */
.owl-carousel .owl-nav { position: relative; }
.owl-carousel .owl-nav .owl-prev { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
.owl-carousel .owl-nav .owl-next { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* Text wrapping for testimonials */
.owl-carousel { overflow-wrap: anywhere; word-break: break-word; }

/* Class Used To Hide The Input Field Added To The DOM Because The Mobile
   Menu Icon Uses A Input Field With No Label 
   <input class="checkbox-toggle" type="checkbox" name="Mobile Menu Toggle">
   That Make Google PageSpeed Insights Report The Label Missing Reducing Accessibility
   Score. You Cannot Have An Empty Label Field So This Works Around This. */ 
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ======================
/* Square Up Logo Format 
/* ======================

/* keep the cluster together */
.payment-badge{
  display:inline-flex;
  align-items:center;      /* was baseline */
  gap:.4em;
  white-space:nowrap;
}

.payment-badge .payment-link{
  display:inline-flex;
  align-items:center;      /* was baseline */
}

/* Square logo sizing & vertical centering */
.payment-badge .square-logo{
  display:block;           /* no inline baseline gap */
  height:1.2em !important; /* scale with text */
  width:auto;
  max-height:none !important;
  /* optional micro-nudge if your SVG has extra top whitespace */
  /* transform: translateY(0.06em);  // tweak 0.04–0.10em to taste */
}

/* external-link icon */
.payment-badge .payment-link::after{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  content:"\f35d";
  font-weight:900;
  display:inline-block;
  margin-left:.35em;
  line-height:1;
  align-self:center;       /* ensure the icon is also centered */
}

/* =========================================================
   Kraken promo steps (1–2–3 + FREE) — cross-browser perfect
   ========================================================= */

/* Row */
.kraken-promo-steps{
  display:flex;
  align-items:center;          /* align items on the same baseline */
  gap:12px;
  margin:0;
  font-family:"proxima-nova", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
}

/* Base badge: each item centers its own content */
.kraken-promo-steps .step{
  display:grid;                /* grid = reliable 2-axis centering */
  place-items:center;
  box-sizing:border-box;
  line-height:1;               /* remove font leading differences */
  border:3px solid #fff;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}

/* If you keep an inner span, make sure it can't reintroduce leading */
.kraken-promo-steps .step > span{
  display:block;
  line-height:1 !important;
}

/* Circles: 1, 2, 3 */
.kraken-promo-steps .step:not(.check){
  --d:48px;                    /* diameter (even integer for crisp layout) */
  width:var(--d);
  height:var(--d);
  padding:0;                   /* no vertical padding */
  border-radius:50%;
  background:#2B95FF;
  color:#fff;

  /* Use cap-height/monospaced digits so Firefox renders them level */
  font-variant-numeric: lining-nums tabular-nums;
  font-size:20px;
}

/* FREE pill */
.kraken-promo-steps .step.check{
  height:48px;                 /* same height as circles */
  padding:0 16px;              /* horizontal padding only */
  border-radius:9999px;
  background:#d4edda;
  color:#155724;
  font-size:1rem;
}

/* If you animate the pill, animate the inner span so the container
   box stays exactly 48px and centering remains perfect */
.kraken-promo-steps .btn-pulse > span{
  /* animation: pulse 2s infinite; */
  will-change: transform;
}

/* Firefox-only 1px optical lift for digits (caps are already fine) */
@supports (-moz-appearance:none){
  .kraken-promo-steps .step:not(.check) > span{
    position: relative;
    top: -2px;
  }
}

/* Styling For TrustPilot Star Sizes In Testimonial Slider */
.elementor .owl-carousel .owl-item .trustpilot_stars {
	width: 50%;
    height: auto; /* preserves aspect ratio */
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Add Custom Background Circle and Drop Shadow For Specified Icons */
.circle-background > .elementor-widget-container > .elementor-icon-wrapper {
    color: var( --e-global-color-uicore_primary );
    background-color: var( --e-global-color-7923410 );
    border-radius: 100px 100px 100px 100px;
    overflow: hidden;
    padding: 15px 15px 15px 15px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    font-size: 50px;
    width: 100%;
    transform: rotate(0deg);
} 

/* Remove Bottom Margin From Footer Copyright */
.no_paragraph_bottom_margin p { margin-bottom: 0px; }

/* Remove Margin From Paragraph Last Child */
.elementor-widget-text-editor p:last-child { margin-bottom:0px !important;}

/* Pricing Green Tick Boxes Equal Height */
.blur .blox-boxed-small-square-icon-box-heading { height: 80px; }

/* Highlight Parent Menu Item When Submenu Is Selected */
.current-menu-parent > a, .current-menu-item a { color: #2B95FF !important; }

/* Testimonial Text of Current Item Set as Widget Does Not Allow Colour Setting */
.owl-item.uc-active-item .ue-text p, .owl-item.uc-active-item .ue_subtitle  { color: #fff !important; }

/**************************************/
/* Let it snow! - For Christmas Only! */
/**************************************/
.snow-bg {
   position: relative;
}

.snow-bg:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: 
	   url('https://www.krakenwindowcleaning.co.uk/windowclean/wp-content/uploads/2022/12/s1.png'), 			
	   url('https://www.krakenwindowcleaning.co.uk/windowclean/wp-content/uploads/2022/12/s2.png'), 
	   url('https://www.krakenwindowcleaning.co.uk/windowclean/wp-content/uploads/2022/12/s3.png');
   	   animation: snow 10s linear infinite;
}

@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

/****************************************/
/* Policies Pages - HTML Element Styles */
/****************************************/

ol {
	margin-bottom: 40px;
	padding-left: 0px;
	list-style-position: inside;
}

ol li {
	font-family: "futura-pt";
	font-size: clamp(1.333rem, 1.2605rem + 0.3624vw, 1.777rem);
	color: #2b95ff;
        margin-top: 18px;
	margin-bottom: 18px;
	text-indent: -24px;
	margin-left: 24px;	
}

ol > ol {
	margin-top: 0px;
	margin-bottom: 20px;
}

ol > ol > li {
	margin-top: 5px;
	list-style: none;
	color: #000;
	text-indent: -20px;
	margin-left: 40px;
	margin-bottom: 5px;
	font-family: "proxima-nova";
	font-size: 1rem;
}

/* Style Dots Before Item */
ol > ol > li::before {
  display: inline-block;
  content: ' ';
  height: 10px;
  width: 10px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 10px;
}

/******************
/* Media Queries */
/*****************/

/* Override Font-Size and Padding For Mobile Full Menu Contact Details Template */
@media (max-width: 880px) {
.elementor-61 .elementor-element.elementor-element-b45d101 .ue_menu .full-screen-contact-details ul li { 
	margin: 5px; }
.elementor-61 .elementor-element.elementor-element-b45d101 .ue_menu .full-screen-contact-details ul li a {
	font-size: 1.125rem; }
}

/****************************************************/
/* Mobile Vertical Centering Of Hero With Fallbacks */
/*****************************************************
/* Centered section that fills the viewport MINUS header height (stable) */
.vh-minus-header-center {
  display: grid;
  place-items: center;

  /* <768px: header = 90px */
  min-height: calc(100vh - 90px);
  min-height: calc(100svh - 90px);

  /* iOS safe areas */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ≥768px: header = 98px */
@media (min-width: 768px) {
  .vh-minus-header-center {
    min-height: calc(100vh - 98px);
    min-height: calc(100svh - 98px);
  }
}

/* Dynamic version (tracks visible height as bars show/hide) */
.vh-minus-header-center--dynamic {
  display: grid;
  place-items: center;

  /* <768px: header = 90px */
  min-height: calc(100vh - 90px);
  min-height: calc(100svh - 90px);
  min-height: calc(100dvh - 90px);

  padding-bottom: env(safe-area-inset-bottom);
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ≥768px: header = 98px */
@media (min-width: 768px) {
  .vh-minus-header-center--dynamic {
    min-height: calc(100vh - 98px);
    min-height: calc(100svh - 98px);
    min-height: calc(100dvh - 98px);
  }
}

/* If your header is fixed at the top, keep content clear of it */
.has-fixed-header .vh-minus-header-center,
.has-fixed-header .vh-minus-header-center--dynamic {
  padding-top: calc(90px + env(safe-area-inset-top));
  box-sizing: border-box;
}

/* ≥768px: adjust top padding for 98px header */
@media (min-width: 768px) {
  .has-fixed-header .vh-minus-header-center,
  .has-fixed-header .vh-minus-header-center--dynamic {
    padding-top: calc(98px + env(safe-area-inset-top));
  }
}

/****************************/
/* Up & Down Icon Animation */
/****************************/
.updown {
  animation: moveUpDown 4s ease-in-out infinite;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}