.elementor-50 .elementor-element.elementor-element-f051b50{--display:flex;--min-height:100vh;--justify-content:space-evenly;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:8px 8px;--row-gap:8px;--column-gap:8px;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-50 .elementor-element.elementor-element-f051b50:not(.elementor-motion-effects-element-type-background), .elementor-50 .elementor-element.elementor-element-f051b50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://shutterd.uk/wp-content/uploads/2025/12/Coastline.jpg");background-position:center center;}.elementor-50 .elementor-element.elementor-element-f051b50::before, .elementor-50 .elementor-element.elementor-element-f051b50 > .elementor-background-video-container::before, .elementor-50 .elementor-element.elementor-element-f051b50 > .e-con-inner > .elementor-background-video-container::before, .elementor-50 .elementor-element.elementor-element-f051b50 > .elementor-background-slideshow::before, .elementor-50 .elementor-element.elementor-element-f051b50 > .e-con-inner > .elementor-background-slideshow::before, .elementor-50 .elementor-element.elementor-element-f051b50 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-50 .elementor-element.elementor-element-0bfba56{text-align:center;}.elementor-50 .elementor-element.elementor-element-0bfba56 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:123px;font-weight:600;color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-50 .elementor-element.elementor-element-0ba4479.elementor-element{--align-self:center;}.elementor-50 .elementor-element.elementor-element-0ba4479{text-align:center;}.elementor-50 .elementor-element.elementor-element-1d5f8fc{text-align:center;}.elementor-50 .elementor-element.elementor-element-1d5f8fc .elementor-heading-title{mix-blend-mode:screen;color:var( --e-global-color-accent );}.elementor-50 .elementor-element.elementor-element-7430e00{--display:flex;}.elementor-50 .elementor-element.elementor-element-b18533a{--display:flex;}.elementor-50 .elementor-element.elementor-element-2145e56{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:30px 30px;--row-gap:30px;--column-gap:30px;}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}@media(max-width:767px){.elementor-50 .elementor-element.elementor-element-0bfba56 .elementor-heading-title{font-size:3.5em;}}@media(min-width:1025px){.elementor-50 .elementor-element.elementor-element-f051b50:not(.elementor-motion-effects-element-type-background), .elementor-50 .elementor-element.elementor-element-f051b50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS *//* =========================================================
   SHUTTER’D — Hello Theme + Elementor Header/Footer
   Header/Footer specific CSS (Sticky + Transparent-over-Hero)
   Paste into: Elementor → Site Settings → Custom CSS
   ========================================================= */

/* ---------------------------
   1) HEADER: Sticky + Clean
   ---------------------------

   HOW TO APPLY (important):
   - In Elementor Theme Builder > Header:
     Select the top header SECTION > Advanced > CSS Classes:
       sd-site-header
   - If your hero section sits under it and you want it transparent on the homepage:
     Add class to the HERO SECTION:
       sd-hero-under-header
*/

/* Make the Elementor header section sticky */
.sd-site-header{
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Default header look (solid) */
.sd-site-header{
  background: rgba(11,13,16,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(233,237,243,.10);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Slight shadow once sticky is engaged (works consistently because it’s always sticky) */
.sd-site-header{
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* Header inner spacing */
.sd-site-header .elementor-container{
  min-height: 74px;
}

/* Logo sizing (adjust as needed) */
.sd-site-header .custom-logo,
.sd-site-header img{
  max-height: 44px;
  height: auto;
}

/* Nav menu styling */
.sd-site-header .elementor-nav-menu--main .elementor-item{
  color: rgba(233,237,243,.92);
  padding: 14px 14px;
  border-radius: 999px;
  transition: background .18s ease, opacity .18s ease;
}

.sd-site-header .elementor-nav-menu--main .elementor-item:hover{
  background: rgba(233,237,243,.08);
  opacity: 1;
}

.sd-site-header .elementor-nav-menu--main .elementor-item.elementor-item-active{
  background: rgba(199,154,90,.18);
  color: rgba(233,237,243,.98);
}

/* Optional: Header button look (if you have a CTA in header) */
.sd-site-header .elementor-button{
  padding: 10px 16px;
  border-radius: 999px;
}


/* ----------------------------------------
   2) TRANSPARENT HEADER OVER THE HERO (Home)
   ----------------------------------------

   This makes the header transparent when it's sitting over a hero
   section that has the class: sd-hero-under-header

   IMPORTANT:
   - This is a simple, robust method without JS.
   - It remains transparent as long as the hero exists directly after.
*/

.sd-site-header:has(+ .sd-hero-under-header){
  background: rgba(0,0,0,0);
  border-bottom-color: rgba(233,237,243,.06);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Improve menu contrast when transparent */
.sd-site-header:has(+ .sd-hero-under-header) .elementor-nav-menu--main .elementor-item{
  color: rgba(255,255,255,.96);
}

/* Hover state on transparent header */
.sd-site-header:has(+ .sd-hero-under-header) .elementor-nav-menu--main .elementor-item:hover{
  background: rgba(255,255,255,.10);
}

/* Fallback if :has isn't supported (older browsers):
   Header will just stay solid — which is acceptable.
*/


/* ----------------------------------------
   3) FIX: HERO CONTENT NOT HIDING UNDER HEADER
   ----------------------------------------

   Add class 'sd-hero-under-header' to your hero section.
   This adds top padding so text isn't covered by sticky header.
*/
.sd-hero-under-header{
  padding-top: clamp(96px, 10vh, 140px);
}


/* ---------------------------
   4) MOBILE HEADER IMPROVEMENTS
   --------------------------- */
@media (max-width: 767px){
  .sd-site-header .elementor-container{
    min-height: 64px;
  }

  /* Mobile menu toggle (hamburger) */
  .sd-site-header .elementor-menu-toggle{
    border-radius: 12px;
    padding: 10px;
    background: rgba(233,237,243,.08);
  }

  /* Ensure dropdown panel looks intentional */
  .sd-site-header .elementor-nav-menu--dropdown{
    background: rgba(11,13,16,.96);
    border: 1px solid rgba(233,237,243,.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
    margin-top: 10px;
  }

  .sd-site-header .elementor-nav-menu--dropdown a{
    color: rgba(233,237,243,.96);
    padding: 14px 16px;
  }

  .sd-site-header .elementor-nav-menu--dropdown a:hover{
    background: rgba(233,237,243,.08);
  }
}


/* ---------------------------
   5) FOOTER: Editorial + Clean
   ---------------------------

   Apply class to Footer top SECTION:
     sd-site-footer
*/
.sd-site-footer{
  background: #0b0d10;
  color: rgba(233,237,243,.92);
  border-top: 1px solid rgba(233,237,243,.10);
}

.sd-site-footer a{
  color: rgba(233,237,243,.88);
  text-decoration-color: rgba(199,154,90,.55);
}
.sd-site-footer a:hover{
  color: rgba(233,237,243,.98);
  text-decoration-color: rgba(199,154,90,1);
}

.sd-site-footer .elementor-widget-heading .elementor-heading-title{
  letter-spacing: -0.01em;
}

/* Footer spacing (optional if your template is tight) */
.sd-site-footer .elementor-container{
  padding-top: 28px;
  padding-bottom: 28px;
}


/* -----------------------------------------
   6) OPTIONAL: Admin bar offset (logged in)
   -----------------------------------------
   WordPress admin bar can push sticky header down.
*/
body.admin-bar .sd-site-header{
  top: 32px;
}
@media (max-width: 782px){
  body.admin-bar .sd-site-header{
    top: 46px;
  }
}/* End custom CSS */