/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
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
*/

html {font-size: 100%;} /* Usually 16px */

select, textarea, input, button {
  font: inherit;
}

/* Base font family */
body {
  line-height: 1.5;
}

.elementor-icon-wrapper {
  display: flex;
}

:root { 
  --primary-color: hsla(193,72%,52%,1);
  --primary-color-hover: hsla(193, 90%, 23%,1);
  --secondary-color: hsl(24, 90%, 23%);
  --secondary-color-hover: hsl(24, 100%, 36%);

  --text-color: hsla(193,72%,52%,1);
  --text-color-hover: hsla(193, 90%, 23%,1);
  --heading-color: hsla(193,72%,52%,1);
  --heading-color-hover: hsla(193, 90%, 23%,1);
  
  /* ========================================
     TYPOGRAPHIC SCALE RATIOS
     ========================================
  
     Quick Reference - Desktop → Mobile pairs:
     1.618 (Golden Ratio) → 1.5 (Perfect Fifth)
     1.5 (Perfect Fifth) → 1.414 (Augmented Fourth)
     1.414 (Augmented Fourth) → 1.333 (Perfect Fourth)
     1.333 (Perfect Fourth) → 1.25 (Major Third)
     1.25 (Major Third) → 1.2 (Minor Third)
     1.2 (Minor Third) → 1.125 (Major Second)
     1.125 (Major Second) → 1.067 (Minor Second)
  */

  --scale-golden-ratio: 1.618;
  --scale-perfect-fifth: 1.5;
  --scale-augmented-fourth: 1.414;
  --scale-perfect-fourth: 1.333;
  --scale-major-third: 1.25;
  --scale-minor-third: 1.2;
  --scale-major-second: 1.125;
  --scale-minor-second: 1.067;

/* Typography Scale - Change THESE TWO variables together! */
  --type-scale-desktop: var(--scale-major-third); /* Major Third */
  --type-scale-mobile: var(--scale-minor-third);   /* Minor Third */
  
  /* Base font sizes */
  --font-size-base-min: 1rem;      /* 16px on mobile */
  --font-size-base-max: 1.125rem;  /* 18px on desktop */
  
  /* Viewport widths for fluid scaling */
  --fluid-min-width: 20rem;   /* 320px */
  --fluid-max-width: 90rem;   /* 1440px */
  
  /* Fluid scaling factor */
  --fluid-bp: calc((100vw - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)));
  
  /* Fluid base font size */
  --font-size-base: clamp(
    var(--font-size-base-min),
    calc(var(--font-size-base-min) + (var(--font-size-base-max) - var(--font-size-base-min)) * var(--fluid-bp)),
    var(--font-size-base-max)
  );
  
  /* Calculate min sizes (mobile) */
  --font-size-h6-min: calc(var(--font-size-base-min) * var(--type-scale-mobile));
  --font-size-h5-min: calc(var(--font-size-h6-min) * var(--type-scale-mobile));
  --font-size-h4-min: calc(var(--font-size-h5-min) * var(--type-scale-mobile));
  --font-size-h3-min: calc(var(--font-size-h4-min) * var(--type-scale-mobile));
  --font-size-h2-min: calc(var(--font-size-h3-min) * var(--type-scale-mobile));
  --font-size-h1-min: calc(var(--font-size-h2-min) * var(--type-scale-mobile));
  
  /* Calculate max sizes (desktop) */
  --font-size-h6-max: calc(var(--font-size-base-max) * var(--type-scale-desktop));
  --font-size-h5-max: calc(var(--font-size-h6-max) * var(--type-scale-desktop));
  --font-size-h4-max: calc(var(--font-size-h5-max) * var(--type-scale-desktop));
  --font-size-h3-max: calc(var(--font-size-h4-max) * var(--type-scale-desktop));
  --font-size-h2-max: calc(var(--font-size-h3-max) * var(--type-scale-desktop));
  --font-size-h1-max: calc(var(--font-size-h2-max) * var(--type-scale-desktop));
  
  /* Fluid heading sizes */
  --font-size-h6: clamp(var(--font-size-h6-min), calc(var(--font-size-h6-min) + (var(--font-size-h6-max) - var(--font-size-h6-min)) * var(--fluid-bp)), var(--font-size-h6-max));
  --font-size-h5: clamp(var(--font-size-h5-min), calc(var(--font-size-h5-min) + (var(--font-size-h5-max) - var(--font-size-h5-min)) * var(--fluid-bp)), var(--font-size-h5-max));
  --font-size-h4: clamp(var(--font-size-h4-min), calc(var(--font-size-h4-min) + (var(--font-size-h4-max) - var(--font-size-h4-min)) * var(--fluid-bp)), var(--font-size-h4-max));
  --font-size-h3: clamp(var(--font-size-h3-min), calc(var(--font-size-h3-min) + (var(--font-size-h3-max) - var(--font-size-h3-min)) * var(--fluid-bp)), var(--font-size-h3-max));
  --font-size-h2: clamp(var(--font-size-h2-min), calc(var(--font-size-h2-min) + (var(--font-size-h2-max) - var(--font-size-h2-min)) * var(--fluid-bp)), var(--font-size-h2-max));
  --font-size-h1: clamp(var(--font-size-h1-min), calc(var(--font-size-h1-min) + (var(--font-size-h1-max) - var(--font-size-h1-min)) * var(--fluid-bp)), var(--font-size-h1-max));
}

/* Apply to heading elements */
/* h1, .title-h1 { font-size: var(--font-size-h1); }
h2, .title-h2 { font-size: var(--font-size-h2); }
h3, .title-h3 { font-size: var(--font-size-h3); }
h4, .title-h4 { font-size: var(--font-size-h4); }
h5, .title-h5 { font-size: var(--font-size-h5); }
h6, .title-h6 { font-size: var(--font-size-h6); } */

.title-h1 h1, .title-h1 h2, .title-h1 h3, .title-h1 h4, .title-h1 h5, .title-h1 h6 { font-size: var(--font-size-h1) !important; }
.title-h2 h1, .title-h2 h2, .title-h2 h3, .title-h2 h4, .title-h2 h5, .title-h2 h6 { font-size: var(--font-size-h2) !important; }
.title-h3 h1, .title-h3 h2, .title-h3 h3, .title-h3 h4, .title-h3 h5, .title-h3 h6 { font-size: var(--font-size-h3) !important; }
.title-h4 h1, .title-h4 h2, .title-h4 h3, .title-h4 h4, .title-h4 h5, .title-h4 h6 { font-size: var(--font-size-h4) !important; }
.title-h5 h1, .title-h5 h2, .title-h5 h3, .title-h5 h4, .title-h5 h5, .title-h5 h6 { font-size: var(--font-size-h5) !important; }
.title-h6 h1, .title-h6 h2, .title-h6 h3, .title-h6 h4, .title-h6 h5, .title-h6 h6 { font-size: var(--font-size-h6) !important; }

/* Line heights based on Title */

.title-h1 h1, .title-h1 h2, .title-h1 h3, .title-h1 h4, .title-h1 h5, .title-h1 h6 { line-height: 1.35 !important; }
.title-h2 h1, .title-h2 h2, .title-h2 h3, .title-h2 h4, .title-h2 h5, .title-h2 h6 { line-height: 1.35 !important; }
.title-h3 h1, .title-h3 h2, .title-h3 h3, .title-h3 h4, .title-h3 h5, .title-h3 h6 { line-height: 1.25 !important; }
.title-h4 h1, .title-h4 h2, .title-h4 h3, .title-h4 h4, .title-h4 h5, .title-h4 h6 { line-height: 1.25 !important; }
.title-h5 h1, .title-h5 h2, .title-h5 h3, .title-h5 h4, .title-h5 h5, .title-h5 h6 { line-height: 1.2 !important; }
.title-h6 h1, .title-h6 h2, .title-h6 h3, .title-h6 h4, .title-h6 h5, .title-h6 h6 { line-height: 1.3 !important; }

/* Title Margins */

/* .mb-xxl h1,.mb-xxl h2,.mb-xxl h3,.mb-xxl h4,.mb-xxl h5,.mb-xxl h6,.mb-xxl p {margin: 3rem 0 4rem;}
.mb-xl h1,.mb-xl h2,.mb-xl h3,.mb-xl h4,.mb-xl h5,.mb-xl h6,.mb-xl p {margin: 2rem 0 3rem;}
.mb-l h1,.mb-l h2,.mb-l h3,.mb-l h4,.mb-l h5,.mb-l h6,.mb-l p {margin: 1rem 0 2rem;} 
.mb-m h1,.mb-m h2,.mb-m h3,.mb-m h4,.mb-m h5,.mb-m h6,.mb-m p {margin: 0.75rem 0 1rem;}
.mb-s h1,.mb-s h2,.mb-s h3,.mb-s h4,.mb-s h5,.mb-s h6,.mb-s p {margin: 0.5rem 0;}
.mb-0 h1,.mb-0 h2,.mb-0 h3,.mb-0 h4,.mb-0 h5,.mb-0 h6,.mb-0 p {margin: 0 0;} */

/* Margin Bottom Only  */

/* .mb-xxl h1,.mb-xxl h2,.mb-xxl h3,.mb-xxl h4,.mb-xxl h5,.mb-xxl h6,.mb-xxl p {margin-bottom: 4rem;}
.mb-xl h1,.mb-xl h2,.mb-xl h3,.mb-xl h4,.mb-xl h5,.mb-xl h6,.mb-xl p {margin-bottom: 3rem;}
.mb-l h1,.mb-l h2,.mb-l h3,.mb-l h4,.mb-l h5,.mb-l h6,.mb-l p {margin-bottom: 2rem;} 
.mb-m h1,.mb-m h2,.mb-m h3,.mb-m h4,.mb-m h5,.mb-m h6,.mb-m p {margin-bottom: 1rem;}
.mb-s h1,.mb-s h2,.mb-s h3,.mb-s h4,.mb-s h5,.mb-s h6,.mb-s p {margin-bottom: 0.5rem;}
.mb-xs h1,.mb-xs h2,.mb-xs h3,.mb-xs h4,.mb-xs h5,.mb-xs h6,.mb-xs p {margin-bottom: 0.25rem;}
.mb-0 h1,.mb-0 h2,.mb-0 h3,.mb-0 h4,.mb-0 h5,.mb-0 h6,.mb-0 p {margin-bottom: 0;} */

/* Margin Top Only  */

/* .mt-xxl h1,.mt-xxl h2,.mt-xxl h3,.mt-xxl h4,.mt-xxl h5,.mt-xxl h6,.mt-xxl p {margin-top: 3rem;}
.mt-xl h1,.mt-xl h2,.mt-xl h3,.mt-xl h4,.mt-xl h5,.mt-xl h6,.mt-xl p {margin-top: 2rem;}
.mt-l h1,.mt-l h2,.mt-l h3,.mt-l h4,.mt-l h5,.mt-l h6,.mt-l p {margin-top: 1rem;} 
.mt-m h1,.mt-m h2,.mt-m h3,.mt-m h4,.mt-m h5,.mt-m h6,.mt-m p {margin-top: 0.75rem;}
.mt-s h1,.mt-s h2,.mt-s h3,.mt-s h4,.mt-s h5,.mt-s h6,.mt-s p {margin-top: 0.5rem;}
.mt-xs h1,.mt-xs h2,.mt-xs h3,.mt-xs h4,.mt-xs h5,.mt-xs h6,.mt-xs p {margin-top: 0.25rem;}
.mt-0 h1,.mt-0 h2,.mt-0 h3,.mt-0 h4,.mt-0 h5,.mt-0 h6,.mt-0 p {margin-top: 0;} */


/* Margin Bottom Only — now fluid */
.mb-xxl h1,.mb-xxl h2,.mb-xxl h3,.mb-xxl h4,.mb-xxl h5,.mb-xxl h6,.mb-xxl p {margin-bottom: var(--gap-xxl);}
.mb-xl h1,.mb-xl h2,.mb-xl h3,.mb-xl h4,.mb-xl h5,.mb-xl h6,.mb-xl p {margin-bottom: var(--gap-xl);}
.mb-l h1,.mb-l h2,.mb-l h3,.mb-l h4,.mb-l h5,.mb-l h6,.mb-l p {margin-bottom: var(--gap-l);}
.mb-m h1,.mb-m h2,.mb-m h3,.mb-m h4,.mb-m h5,.mb-m h6,.mb-m p {margin-bottom: var(--gap-m);}
.mb-s h1,.mb-s h2,.mb-s h3,.mb-s h4,.mb-s h5,.mb-s h6,.mb-s p {margin-bottom: var(--gap-s);}
.mb-xs h1,.mb-xs h2,.mb-xs h3,.mb-xs h4,.mb-xs h5,.mb-xs h6,.mb-xs p {margin-bottom: var(--gap-xs);}
.mb-xxs h1,.mb-xxs h2,.mb-xxs h3,.mb-xxs h4,.mb-xxs h5,.mb-xxs h6,.mb-xxs p {margin-bottom: var(--gap-xxs);}
.mb-0 h1,.mb-0 h2,.mb-0 h3,.mb-0 h4,.mb-0 h5,.mb-0 h6,.mb-0 p {margin-bottom: 0;}

/* Margin Top Only — now fluid */
.mt-xxl h1,.mt-xxl h2,.mt-xxl h3,.mt-xxl h4,.mt-xxl h5,.mt-xxl h6,.mt-xxl p {margin-top: var(--gap-xxl);}
.mt-xl h1,.mt-xl h2,.mt-xl h3,.mt-xl h4,.mt-xl h5,.mt-xl h6,.mt-xl p {margin-top: var(--gap-xl);}
.mt-l h1,.mt-l h2,.mt-l h3,.mt-l h4,.mt-l h5,.mt-l h6,.mt-l p {margin-top: var(--gap-l);}
.mt-m h1,.mt-m h2,.mt-m h3,.mt-m h4,.mt-m h5,.mt-m h6,.mt-m p {margin-top: var(--gap-m);}
.mt-s h1,.mt-s h2,.mt-s h3,.mt-s h4,.mt-s h5,.mt-s h6,.mt-s p {margin-top: var(--gap-s);}
.mt-xs h1,.mt-xs h2,.mt-xs h3,.mt-xs h4,.mt-xs h5,.mt-xs h6,.mt-xs p {margin-top: var(--gap-xs);}
.mt-0 h1,.mt-0 h2,.mt-0 h3,.mt-0 h4,.mt-0 h5,.mt-0 h6,.mt-0 p {margin-top: 0;}


/* Line Heights when margin bottom is specified */

.mb-xxl h1,.mb-xl h1,.mb-l h1,.mb-m h1,.mb-s h1,.mb-0 h1 {line-height: 1 !important;}
.mb-xxl h2,.mb-xl h2,.mb-l h2,.mb-m h2,.mb-s h2,.mb-0 h2 {line-height: 1.1 !important;}
.mb-xxl h3,.mb-xl h3,.mb-l h3,.mb-m h3,.mb-s h3,.mb-0 h3 {line-height: 1.2 !important;}
.mb-xxl h4,.mb-xl h4,.mb-l h4,.mb-m h4,.mb-s h4,.mb-0 h4 {line-height: 1.25 !important;}
.mb-xxl h5,.mb-xl h5,.mb-l h5,.mb-m h5,.mb-s h5,.mb-0 h5 {line-height: 1.27 !important;}
.mb-xxl h6,.mb-xl h6,.mb-l h6,.mb-m h6,.mb-s h6,.mb-0 h6 {line-height: 1.3 !important;}

/* Text Transforms - Over ride preset headings */

.tt-upper { text-transform: uppercase; }
.tt-lower { text-transform: lowercase; }
.tt-cap { text-transform: capitalize; }


/* Gap calculations with fluid scaling */

  /* Quick Reference - Desktop → Mobile pairs:
     1.618 (Golden Ratio) → 1.5 (Perfect Fifth)
     1.5 (Perfect Fifth) → 1.414 (Augmented Fourth)
     1.414 (Augmented Fourth) → 1.333 (Perfect Fourth)
     1.333 (Perfect Fourth) → 1.25 (Major Third)
     1.25 (Major Third) → 1.2 (Minor Third)
     1.2 (Minor Third) → 1.125 (Major Second)
     1.125 (Major Second) → 1.067 (Minor Second)
  */

:root {
  /* Spacing Scale - Change THESE TWO variables together! */
  --space-scale-desktop: var(--scale-perfect-fifth);  /* Perfect Fifth */
  --space-scale-mobile: var(--scale-minor-second); /* Minor Second */

  /* Base spacing sizes */
  --space-base-min: 1rem;      /* 16px on mobile */
  --space-base-max: 1.25rem;   /* 20px on desktop */
  
  /* Viewport widths for fluid scaling (reuse from typography if in same file) */
  --fluid-min-width: 20rem;   /* 320px */
  --fluid-max-width: 90rem;   /* 1440px */
    
  /* Calculate min sizes (mobile) using mobile scale */
  --gap-xxs-min: calc(var(--space-base-min) / var(--space-scale-mobile) / var(--space-scale-mobile)); /* ~0.56rem / 9px */
  --gap-xs-min: calc(var(--space-base-min) / var(--space-scale-mobile)); /* ~0.75rem / 12px */
  --gap-s-min: var(--space-base-min); /* 1rem / 16px */
  --gap-m-min: calc(var(--space-base-min) * var(--space-scale-mobile)); /* ~1.33rem / 21px */
  --gap-l-min: calc(var(--gap-m-min) * var(--space-scale-mobile)); /* ~1.77rem / 28px */
  --gap-xl-min: calc(var(--gap-l-min) * var(--space-scale-mobile)); /* ~2.37rem / 38px */
  --gap-xxl-min: calc(var(--gap-xl-min) * var(--space-scale-mobile)); /* ~3.16rem / 51px */
  
  /* Calculate max sizes (desktop) using desktop scale */
  --gap-xxs-max: calc(var(--space-base-max) / var(--space-scale-desktop) / var(--space-scale-desktop)); /* ~0.56rem / 9px */
  --gap-xs-max: calc(var(--space-base-max) / var(--space-scale-desktop)); /* ~0.83rem / 13px */
  --gap-s-max: var(--space-base-max); /* 1.25rem / 20px */
  --gap-m-max: calc(var(--space-base-max) * var(--space-scale-desktop)); /* 1.875rem / 30px */
  --gap-l-max: calc(var(--gap-m-max) * var(--space-scale-desktop)); /* 2.8125rem / 45px */
  --gap-xl-max: calc(var(--gap-l-max) * var(--space-scale-desktop)); /* ~4.22rem / 67px */
  --gap-xxl-max: calc(var(--gap-xl-max) * var(--space-scale-desktop)); /* ~6.33rem / 101px */
  
  /* Fluid gap sizes with clamp */
  --gap-xxs: clamp(var(--gap-xxs-min), calc(var(--gap-xxs-min) + (var(--gap-xxs-max) - var(--gap-xxs-min)) * var(--fluid-bp)), var(--gap-xxs-max));
  --gap-xs: clamp(var(--gap-xs-min), calc(var(--gap-xs-min) + (var(--gap-xs-max) - var(--gap-xs-min)) * var(--fluid-bp)), var(--gap-xs-max));
  --gap-s: clamp(var(--gap-s-min), calc(var(--gap-s-min) + (var(--gap-s-max) - var(--gap-s-min)) * var(--fluid-bp)), var(--gap-s-max));
  --gap-m: clamp(var(--gap-m-min), calc(var(--gap-m-min) + (var(--gap-m-max) - var(--gap-m-min)) * var(--fluid-bp)), var(--gap-m-max));
  --gap-l: clamp(var(--gap-l-min), calc(var(--gap-l-min) + (var(--gap-l-max) - var(--gap-l-min)) * var(--fluid-bp)), var(--gap-l-max));
  --gap-xl: clamp(var(--gap-xl-min), calc(var(--gap-xl-min) + (var(--gap-xl-max) - var(--gap-xl-min)) * var(--fluid-bp)), var(--gap-xl-max));
  --gap-xxl: clamp(var(--gap-xxl-min), calc(var(--gap-xxl-min) + (var(--gap-xxl-max) - var(--gap-xxl-min)) * var(--fluid-bp)), var(--gap-xxl-max));
}

/* Gap classes - streamlined */

.gap-xxl, .gap-xxl .e-con-inner { gap: var(--gap-xxl); }
.gap-xl, .gap-xl .e-con-inner { gap: var(--gap-xl); }
.gap-l, .gap-l .e-con-inner { gap: var(--gap-l); }
.gap-m, .gap-m .e-con-inner { gap: var(--gap-m); }
.gap-s, .gap-s .e-con-inner { gap: var(--gap-s); }
.gap-xs, .gap-xs .e-con-inner { gap: var(--gap-xs); }
.gap-xxs, .gap-xxs .e-con-inner { gap: var(--gap-xxs); }

/* ========================================
    Buttons
  ======================================== */

/* Button Styles */

.elementor-button {
  fill: var(--primary-color);
}

.btn-sm a.elementor-button:link,
.btn-sm a.elementor-button:visited {
  border: none;
  padding: 0 !important;
  margin: 1rem 0;
  line-height: 1.5;
}

.btn-sm a.elementor-button:hover,
.btn-sm a.elementor-button:focus {
  border: none;
  padding: 0 !important;
  fill: var(--primary-color);
}

.btn-b a.elementor-button,
.btn-b a.elementor-button:active {
  color: white;
  border: 1px solid #061E36;
  background-color: #061E36;
  fill: var(--primary-color);
}

.btn-ghost a.elementor-button,
.btn-ghost a.elementor-button:active {
  background-color: white;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  fill: var(--primary-color);
}

.btn-ghost a.elementor-button:hover {
  background-color: white;
  border: 1px solid  var(--primary-color-hover);
  color:  var(--primary-color-hover);
  fill:  var(--primary-color-hover);
}

/* Right aligning the arrows in the Elementor Icons list */

.icons-right ul li.elementor-icon-list-item {
  display: flex;              /* enable flex layout */
  justify-content: space-between; /* push text left, icon right */
  align-items: center;        /* vertical alignment */
}

.icons-right ul li.elementor-icon-list-item span.elementor-icon-list-icon {
  order: 2;                   /* move icon after the text */
  margin-left: 8px;           /* add some space between text and icon */
}

.icons-right ul li.elementor-icon-list-item span.elementor-icon-list-text {
  order: 1;                   /* keep text before the icon */
}

section p a {
  text-decoration: underline;
}

/* Base (desktop-first) */
.example-media-query {
  width: 100%;
}

/* Laptops and below (≤ 1024px) */
@media (max-width: 1024px) {
  .example-media-query {
    max-width: 960px;
  }
}

/* Tablets and below (≤ 768px) */
@media (max-width: 768px) {
  .example-media-query {
    max-width: 720px;
  }
}

/* Phones and below (≤ 480px) */
@media (max-width: 480px) {
  .example-media-query {
    max-width: 100%;
  }
}

/* Container variables - https://lytboxacademy.com/fluid-containers-for-elementor-with-clamp/ */

:root {
    /* Left and Right Padding All /Sections/Containers*/
    --fluid-side-padding-min: 1.25rem; /* 20px */
    --fluid-side-padding-max: 5rem;   /* 80px */

    /* Top and Bottom Padding All Containers*/
    --section-xxl-padding-min: 9.375rem; /* 150px */
    --section-xxl-padding-max: 10rem; /* 160px */ 
  
    --section-xl-padding-min: 6.875rem; /* 110px */
    --section-xl-padding-max: 7.5rem; /* 120px */
  
    --section-l-padding-min: 5.625rem; /* 90px */
    --section-l-padding-max: 6.25rem; /* 100px */
  
    --section-m-padding-min: 5rem; /* 80px */
    --section-m-padding-max: 5rem; /* 80px */
  
    --section-s-padding-min: 3.75rem; /* 60px */
    --section-s-padding-max: 3.75rem; /* 60px */
  
    --section-xs-padding-min: 2.5rem; /* 40px */
    --section-xs-padding-max: 2.5rem; /* 40px */
  
    --section-xxs-padding-min: 1.5rem; /* 24px */
    --section-xxs-padding-max: 1.5rem; /* 24px */
    
    --section-header-padding-min: 1.25rem; /* 20px */
    --section-header-padding-max: 1.25rem; /* 20px */
    
    --section-zero-padding-min: 0rem; /* 20px */
    --section-zero-padding-max: 0rem; /* 20px */
  
    /* Hero Sections Height Variable */
    --section-hero-height: 100vh; /* 100% the screen height */
  
    /* Offset Padding for Overlay Headers */
    --section-offset-header: 80px; /* Adjust to the overlay header's negative margin */

    /* Width For Narrow Sections*/
    --section-narrow: 62.5rem; /* 1000px */
    --section-narrow-xs: 45rem; /* 720px */
  }

  /* Section/Container Padding - Fluid Variants */
  .section-custom, .section-xxl, .section-xl, .section-l, .section-m, .section-s, .section-xs, .section-xxs, .section-header, .section-0 {
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  
  
  .section-xxl {
    padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  }
  
  .section-xl {
    padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  }
  
  .section-l {
    padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  }
  
  .section-m {
    padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  }
  
  .section-s {
    padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  }
  
  .section-xs {
    padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  }
  
  .section-xxs {
    padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  }
  
  .section-header {
    padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  }
  
  .section-0 {
    padding-top: clamp(var(--section-zero-padding-min), 0vw, var(--section-zero-padding-max))!important;
    padding-bottom: clamp(var(--section-zero-padding-min), 0vw, var(--section-zero-padding-max))!important;
  }
    
  .section-0 .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Hero Container/Sections Height */
  .section-hero {
    min-height: var(--section-hero-height)!important;
  }

  .section-hero .e-con-inner {
    justify-content: center!important;
}
  
  /* Full Width Sections - No Side Padding */

  .section-full div {
    max-width: 100%!important;
  }
  
  /* Narrow Sections */
  .section-narrow .e-con-inner {
    max-width: var(--section-narrow)!important;
  }

  .section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs)!important;
  }

  /* Offset Padding for Overlay or Sticky Headers */
  .section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
  }


/* Image sizing based on ratio */
  
  .ratio-1-1 img { object-fit: cover; max-width: 100%; }
  .ratio-2-1 img { object-fit: cover; max-width: 100%; }
  .ratio-3-2 img { object-fit: cover; max-width: 100%; }
  .ratio-4-3 img { object-fit: cover; max-width: 100%; }
  .ratio-5-4 img { object-fit: cover; max-width: 100%; }
  .ratio-16-9 img { object-fit: cover; max-width: 100%; }
  .ratio-21-9 img { object-fit: cover; max-width: 100%; }
  .ratio-191-1 img { object-fit: cover; max-width: 100%; }
  .ratio-1-2 img { object-fit: cover; max-width: 100%; }
  .ratio-2-3 img { object-fit: cover; max-width: 100%; }
  .ratio-3-4 img { object-fit: cover; max-width: 100%; }
  .ratio-9-16 img { object-fit: cover; max-width: 100%; }
  .ratio-9-21 img { object-fit: cover; max-width: 100%; }
  
  /* Square */
  .ratio-1-1 img {
    aspect-ratio: 1 / 1;
    }
    
  /* Landscape Orientation */
  .ratio-2-1 img {
    aspect-ratio: 2 / 1;
    }
  .ratio-3-2 img {
    aspect-ratio: 3 / 2;
  }
  .ratio-4-3 img {
    aspect-ratio: 4 / 3;
  }
  .ratio-5-4 img {
    aspect-ratio: 5 / 4;
  }
  .ratio-16-9 img {
    aspect-ratio: 16 / 9;
  }
  .ratio-21-9 img {
    aspect-ratio: 21 / 9;
  }
  .ratio-191-1 img {
    aspect-ratio: 1.91 / 1; /* FB social share */
  }
  
/* Portrait Orientation */

  .ratio-1-2 img {
    aspect-ratio: 1 / 2;
  }
  .ratio-2-3 img {
    aspect-ratio: 2 / 3;
  }
  .ratio-3-4 img {
    aspect-ratio: 3 / 4;
  }
  .ratio-9-16 img {
    aspect-ratio: 9 / 16;
  }
  .ratio-9-21 img {
    aspect-ratio: 9 / 21;
  }

/* Shoutbox Border Styles */

/* Shoutbox Border Styles */

:root {
  /* Base radius sizes */
  --radius-s-min: 0.25rem;   /* 4px  mobile */
  --radius-s-max: 0.375rem;  /* 6px  desktop */

  --radius-m-min: 0.375rem;  /* 6px  mobile */
  --radius-m-max: 0.75rem;   /* 12px desktop */

  --radius-l-min: 0.5rem;    /* 8px  mobile */
  --radius-l-max: 1.25rem;   /* 20px desktop */

  --radius-xl-min: 0.75rem;  /* 12px mobile */
  --radius-xl-max: 2rem;     /* 32px desktop */

  /* Fluid radius sizes */
  --radius-s: clamp(var(--radius-s-min), calc(var(--radius-s-min) + (var(--radius-s-max) - var(--radius-s-min)) * var(--fluid-bp)), var(--radius-s-max));
  --radius-m: clamp(var(--radius-m-min), calc(var(--radius-m-min) + (var(--radius-m-max) - var(--radius-m-min)) * var(--fluid-bp)), var(--radius-m-max));
  --radius-l: clamp(var(--radius-l-min), calc(var(--radius-l-min) + (var(--radius-l-max) - var(--radius-l-min)) * var(--fluid-bp)), var(--radius-l-max));
  --radius-xl: clamp(var(--radius-xl-min), calc(var(--radius-xl-min) + (var(--radius-xl-max) - var(--radius-xl-min)) * var(--fluid-bp)), var(--radius-xl-max));
}

/* Radius utility classes */
.border-s, .border-m, .border-l, .border-xl,  {
  border-width: 2px;
  border-style: solid;
  border-color: var(--primary-color);
}
.border-s  { border-radius: var(--radius-s); }
.border-m  { border-radius: var(--radius-m); }
.border-l  { border-radius: var(--radius-l); }
.border-xl { border-radius: var(--radius-xl); }

/* Post Content in Elementor */
  
  :root {
    /* Edit Link Colors */
    --color-link: var(--text-color);
    --color-link-hover: var(--text-color-hover);
    
    /* Edit Quote */
    --color-quote-border: var(--secondary-color);
    --width-quote-border: 3px;
    --bg-quote: transparent;
  
    /* Edit Spacing */
    --space-s: 0.25rem;
    --space-m: 0.75rem;
    --space-l: 1.25rem;
    --space-xl: 2.25rem;
    --space-xxl: 2.5rem;
    
    /* Edit Image Border Radius */
    --radius-m: 1rem;
    
    /* Edit Link Transition */
    --transition-default: 0.2s ease-in-out;
  
    /* Edit Typography */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-size-xs: .85rem;
    --font-size-p: 1rem;
    --mobile-font-size-p: 1.15rem;
    --font-size-m: 1.5rem;
    --mobile-font-size-m: 1.5rem;
    --font-size-l: 2rem;
    --mobile-font-size-l: 2rem;
    --line-height-body: 1.5em;
    --line-height-heading: 1.25em;
    --line-height-list: 1.3rem;
  }
  
  /*----------------------------------------------------------------
  End of template style editing, do not edit below
  ----------------------------------------------------------------*/
  
  /* Headings */
  .post-content h2, 
  .post-content h3, 
  .post-content h4, 
  .post-content h5, 
  .post-content h6 {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-s);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
  }
  
  .post-content h2 {
    font-size: var(--font-size-l);
  }
  
  .post-content h3, 
  .post-content h4, 
  .post-content h5, 
  .post-content h6 {
    font-size: var(--font-size-m);
  }
  
  /* Paragraphs */
  .post-content p {
    padding-bottom: var(--space-l);
    margin-bottom: 0;
    line-height: var(--line-height-body);
  }
  
  /* Links */
  .post-content p a {
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    transition: color var(--transition-default);
  }
  
  .post-content p a:hover {
    color: var(--color-link-hover);
  }
  
  /* Lists */
  .post-content ul,
  .post-content ol {
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-regular);
    padding-bottom: var(--space-l);
  }
  
  .post-content ul li {
    line-height: var(--line-height-list);
    margin-bottom: var(--space-l);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p);
  }
  
  .c-post-meta ul li:nth-child(2) {
    font-weight: var(--font-weight-regular)!important;
  }
  
  /* Images */
  .post-content .wp-block-image img {
    margin: var(--space-xxl) 0;
    border-radius: var(--radius-m);
  }
  
  /* Blockquotes */
  .post-content blockquote {
    border-left: var(--width-quote-border) solid var(--color-quote-border);
    margin: 0;
    padding: var(--space-m) var(--space-l);
    background: var(--bg-quote);
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-regular);
  }
  
  .post-content blockquote cite {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
  }
  
  .post-content blockquote p {
    padding-bottom: 0;
  }
  
  /* Mobile responsiveness */
  @media screen and (max-width: 767px) {
    .post-content p {
      font-size: var(--mobile-font-size-p);
    }
  
    .post-content h2 {
      font-size: var(--mobile-font-size-l);
    }
  
    .post-content h3, 
    .post-content h4, 
    .post-content h5, 
    .post-content h6 {
      font-size: var(--mobile-font-size-m);
    }
  }
  
  /* WP Blog Buttons  */
  
  .wp-element-button, .wp-block-button__link {
    background-color: var(--color-link);
  }
  
  .wp-element-button:hover, .wp-block-button__link:hover {
    background-color: var(--color-link-hover);
  }
  
  a.wp-block-button__link {
    color: white !important;
  }
  
/* Add below to Global CSS in site settings */
/* Set up default Contain values in Site settings */

/* =======================
   Custom Keyframes
   ======================= */

/* Slide In Up (fade in from bottom) */
@keyframes cdSlideInUp {
  from {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  }
  to {
  opacity: 1;
  transform: none;
  }
}

/* Slide In Down (fade in from top) */
@keyframes cdSlideInDown {
  from {
  opacity: 0;
  transform: translate3d(0, -24px, 0);
  }
  to {
  opacity: 1;
  transform: none;
  }
}

/* Slide In Left (fade in from left) */
@keyframes cdSlideInLeft {
  from {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  }
  to {
  opacity: 1;
  transform: none;
  }
}

/* Slide In Right (fade in from right) */
@keyframes cdSlideInRight {
  from {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
  }
  to {
  opacity: 1;
  transform: none;
  }
}

/* =======================
   Animation Classes
   ======================= */

.cd-SlideInUp {
  animation-name: cdSlideInUp;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
}

.cd-SlideInDown {
  animation-name: cdSlideInDown;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
}

.cd-SlideInLeft {
  animation-name: cdSlideInLeft;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
}

.cd-SlideInRight {
  animation-name: cdSlideInRight;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
}

/* =======================
   Contact Form Styling
   ======================= */

/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
    display: inline-block;
    height: 4.5em !important;
    border: 1px solid #666666 !important;
    padding: 1em;
    font-size: 12px !important;
    line-height: normal;
    color: #051143;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
    border: 1px solid blue !important;
    box-shadow: 0em 0.5em 2em 0em rgba(0,0,0,0.1) !important;
}

/* Form field labels */
body .gform_wrapper .top_label .gfield_label,
body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
    font-size: 1rem;
    background: white;
    padding: 0.25rem 0;
}

/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
    color: blue;
}

body .gform_wrapper .gform_body .gfield_description {
    font-size: 0.90rem;
}

/* Spacing */
.gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 30px !important;
}

/* Additional styles for Gravity Forms theme */
.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
    padding: 1em !important;
}

/* Submit button styles */
.gform_wrapper.gravity-theme #field_submit .gform-button--width-full,
.gform_wrapper.gravity-theme .gform_footer .gform-button--width-full {
    height: 4em;
}

.gform_wrapper input[type=submit].gform_button {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    padding: 1rem 4rem !important;
    text-transform: uppercase !important;
}

.gform_wrapper input[type=submit].gform_button:hover {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
}

/* Large input and select styles */
.gform_wrapper.gravity-theme .gfield input.large,
.gform_wrapper.gravity-theme .gfield select.large {
    height: 4em;
}

.gform_wrapper.gravity-theme .gfield_required {
    color: #c02b0a;
    display: inline-block;
    font-size: 0.9em;
    padding-left: 0.5em;
}

.gform_wrapper.gravity-theme .gform_validation_errors:focus {
    border-color: var(--gf-form-validation-border-color-focus);
    /* outline: var(--gf-form-validation-outline-focus);
    outline-offset: var(--gf-ctrl-outline-offset); */
}

/* Header Menu styles */

.header-menu li.btn-book-a-tour {
    border: 1px solid black;
    padding: 10px 10px 10px 8px;
    margin-left: 1rem;
}

.header-menu li.btn-book-a-tour {
    border: 1px solid black;
    padding: 10px 10px 10px 8px;
    margin-left: 1rem;
}

.off-canvas-menu {
  
}