/* Themeisle Support - change menu mobile breakpoint */
@media only screen and (max-width: 900px) {
    .navbar-toggle {
        display: block;
    }
    #main-navigation {
        margin-top: 70px;
        padding-bottom: 15px;
    }
    .navbar.navbar-default .navbar-brand {
        color: #555;
    }
    .header > .navbar, .navbar.navbar-fixed-top .navbar-collapse {
        background-color: #fff;
    }
    .navbar-nav {
        float: none;
    }

    /* This was hiding the entire mobile menu — we need to remove the !important here */
    .navbar-collapse.collapse {
        display: none;
    }

    .navbar-collapse.collapse.in {
        display: block;
    }

    .navbar.hestia_left .navbar-nav {
        display: block;
        width: auto;
        float: none;
    }

    ul#menu-primary-menu li {
        display: block;
        float: none;
    }

    ul#menu-primary-menu li a {
        color: #000;
    }

    .navbar-toggle-wrapper {
        right: 20px;
        position: absolute;
        top: 25px;
    }

    .navbar.navbar-fixed-top .navbar-collapse {
        max-height: calc(100% - 70px);
        margin-top: 70px;
        overflow-y: auto;
        position: fixed;
        z-index: 9999;
        background: #fff;
        width: 100%;
        left: 0;
        top: 0;
        margin-left: 0;
        margin-right: 0;
        -webkit-overflow-scrolling: auto;
    }

    .navbar.navbar-transparent>.container {
        padding-top: 25px !important;
    }

    navbar.navbar-default.navbar-transparent li:not(.btn):hover > a,
    .navbar.navbar-default.navbar-transparent li:not(.btn):hover > a i,
    .navbar.navbar-default.navbar-transparent .navbar-toggle:hover,
    .navbar.navbar-default .responsive-nav-cart a:hover .navbar.navbar-default .navbar-toggle:hover {
        color: #e91e63 !important;
    }
}
@media (max-width: 768px) {
  /* Fix submenu display */
  .navbar-nav .menu-item-has-children > .sub-menu {
    display: none;
    position: relative;
    background-color: #fff;
    padding-left: 20px;
    z-index: 9999;
  }

  .menu-item-has-children.open > .sub-menu {
    display: block !important;
  }

  .navbar-nav .sub-menu li a {
    display: block;
    padding: 10px 15px;
    pointer-events: auto;
    z-index: 99999;
    position: relative;
  }

  /* Prevent next menu item from overlapping submenu */
  .menu-item-has-children.open + li {
    margin-top: 120px;
  }
}
/* Always show title line */
.hestia-work .card-background .content {
  opacity: 1;
}

/* Hide the category by default (if Hestia prints it) */
.hestia-work .card-background .content .category,
.hestia-work .card-background .content .label {
  opacity: 0;
  transform: translateY(6px);
  transition: all .2s ease;
}

/* On hover, reveal category (your “more info”) */
.hestia-work .card-background:hover .content .category,
.hestia-work .card-background:hover .content .label {
  opacity: 1;
  transform: translateY(0);
}

/* Keep overlay subtle until hover */
.hestia-work .card-background:after { opacity: .15; transition: opacity .2s ease; }
.hestia-work .card-background:hover:after { opacity: .65; }

html, body {
  overflow-x: hidden;
}
/* =========================================
   Hestia Portfolio: Title always visible
   Project Type appears UNDER title on hover
   White text only (no colored box)
   ========================================= */

/* Keep overlay content visible so title always shows */
.hestia-work .card-background .content{
  opacity: 1 !important;
}

/* Subtle overlay until hover */
.hestia-work .card-background:after{
  opacity: .18 !important;
  transition: opacity .2s ease;
}

/* Ensure title is white and visible */
.hestia-work .card-background .content h1,
.hestia-work .card-background .content h2,
.hestia-work .card-background .content h3,
.hestia-work .card-background .content h4,
.hestia-work .card-background .content h5,
.hestia-work .card-background .content h6{
  color: #fff !important;
  opacity: 1 !important;
  margin-bottom: 8px !important;
}

/* Target the Project Type line(s): remove any "pill/label" styling */
.hestia-work .card-background .content .category,
.hestia-work .card-background .content .label,
.hestia-work .card-background .content .card-category,
.hestia-work .card-background .content .post-category,
.hestia-work .card-background .content span,
.hestia-work .card-background .content p{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
}

/* Hide the extra line by default, and position it under the title */
.hestia-work .card-background .content .category,
.hestia-work .card-background .content .label,
.hestia-work .card-background .content .card-category,
.hestia-work .card-background .content .post-category{
  display: block !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  margin-top: 0 !important;
  transition: opacity .2s ease, transform .2s ease;
}

/* Reveal Project Type on hover */
.hestia-work .card-background:hover .content .category,
.hestia-work .card-background:hover .content .label,
.hestia-work .card-background:hover .content .card-category,
.hestia-work .card-background:hover .content .post-category{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stronger overlay on hover */
.hestia-work .card-background:hover:after{
  opacity: .65 !important;
}

/* Mobile: show the Project Type all the time (no hover on phones) */
@media (max-width: 900px){
  .hestia-work .card-background:after{
    opacity: .55 !important;
  }
  .hestia-work .card-background .content .category,
  .hestia-work .card-background .content .label,
  .hestia-work .card-background .content .card-category,
  .hestia-work .card-background .content .post-category{
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Make the overlay content a vertical stack we can reorder */
.hestia-work .card-background .content{
  display: flex !important;
  flex-direction: column !important;
}

/* Put title first */
.hestia-work .card-background .content h1,
.hestia-work .card-background .content h2,
.hestia-work .card-background .content h3,
.hestia-work .card-background .content h4,
.hestia-work .card-background .content h5,
.hestia-work .card-background .content h6{
  order: 1 !important;
  margin-bottom: 8px !important;
}

/* Put Project Type (category/label) below the title */
.hestia-work .card-background .content .category,
.hestia-work .card-background .content .label,
.hestia-work .card-background .content .card-category,
.hestia-work .card-background .content .post-category{
  order: 2 !important;
  display: block !important;
  margin-top: 0 !important;
}

/* =========================================================
   Hestia "Meet Our Team" photo sizing (ZERO CROPPING)
   - Desktop/Tablet: uniform max width, full image shown (no crop)
   - Mobile: full image shown (no crop), larger and responsive
   ========================================================= */

/* --- DESKTOP / TABLET: show full image, keep sizes consistent --- */
body .hestia-team img,
body section.hestia-team img,
body .team img,
body section.team img,
body .card-profile .card-avatar img,
body .card-profile .card-image img,
body .team .card-avatar img,
body .team .avatar img {
  width: 240px !important;         /* consistent visual size */
  max-width: 100% !important;
  height: auto !important;         /* no cropping */
  object-fit: contain !important;  /* no cropping */
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Make sure wrappers don't crop the image */
body .card-profile .card-avatar,
body .team .card-avatar,
body .team .avatar,
body .card-profile .card-image {
  width: 240px !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;    /* prevents clipping */
  margin: 0 auto !important;
}

/* --- MOBILE: show full image, responsive and bigger --- */
@media (max-width: 768px){
  body .hestia-team img,
  body section.hestia-team img,
  body .team img,
  body section.team img,
  body .card-profile .card-avatar img,
  body .card-profile .card-image img,
  body .team .card-avatar img,
  body .team .avatar img {
    width: 100% !important;
    max-width: 340px !important;   /* adjust if you want bigger */
    height: auto !important;
    object-fit: contain !important;
  }

  body .card-profile .card-avatar,
  body .team .card-avatar,
  body .team .avatar,
  body .card-profile .card-image {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    overflow: visible !important;
  }
}
/* Ensure Elementor single-page banner starts below sticky header */
body:not(.home) .elementor-location-single .elementor-top-section:first-child,
body:not(.home) .elementor-location-single .e-con:first-child{
  padding-top: 90px !important;  /* desktop header height */
}

/* Mobile header is taller */
@media (max-width: 768px){
  body:not(.home) .elementor-location-single .elementor-top-section:first-child,
  body:not(.home) .elementor-location-single .e-con:first-child{
    padding-top: 90px !important;
  }
}
/* ==================================================
   HESTIA HOME HERO BUTTONS: OUTLINED (more robust selectors)
   ================================================== */

/* Target the homepage hero / big title buttons in multiple common Hestia wrappers */
body.home .header .btn,
body.home .header a.btn,
body.home .header-filter .btn,
body.home .header-filter a.btn,
body.home .big-title-slider-wrapper .btn,
body.home .big-title-slider-wrapper a.btn,
body.home .carousel .btn,
body.home .carousel a.btn,
body.home .page-header .btn,
body.home .page-header a.btn,
body.home .btn.btn-primary,
body.home a.btn.btn-primary,
body.home .btn.btn-white,
body.home a.btn.btn-white {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid #00a8a8 !important;
  color: #00a8a8 !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  letter-spacing: .4px !important;
  text-transform: none !important;

  box-shadow: none !important;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Hover/focus: fill teal */
body.home .header .btn:hover,
body.home .header a.btn:hover,
body.home .header-filter .btn:hover,
body.home .header-filter a.btn:hover,
body.home .big-title-slider-wrapper .btn:hover,
body.home .big-title-slider-wrapper a.btn:hover,
body.home .carousel .btn:hover,
body.home .carousel a.btn:hover,
body.home .page-header .btn:hover,
body.home .page-header a.btn:hover,
body.home .btn.btn-primary:hover,
body.home a.btn.btn-primary:hover,
body.home .btn.btn-white:hover,
body.home a.btn.btn-white:hover,
body.home .header .btn:focus,
body.home .header a.btn:focus,
body.home .header-filter .btn:focus,
body.home .header-filter a.btn:focus {
  background: #00a8a8 !important;
  border-color: #00a8a8 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Optional: make the button area breathe a bit more */
body.home .header .buttons,
body.home .big-title-slider-wrapper .buttons,
body.home .carousel .buttons {
  margin-top: 18px !important;
}
/* =========================================================
   THE WAY KC — SINGLE TEMPLATE (RESET + FIXED)
   Requires template classes:
   - page-banner  (banner container)
   - raised-card  (white content/card container)

   Only adjust TWO values:
   --hdr-desktop and --hdr-mobile
   ========================================================= */

:root{
  --hdr-desktop: 82px;  /* desktop distance from sticky header to banner */
  --hdr-mobile: 90px;  /* mobile distance from sticky header to banner */
}

/* --- 1) Remove any theme top offsets that create a gap ABOVE the banner --- */
body:not(.home) .main,
body:not(.home) .site-content,
body:not(.home) .page-wrap,
body:not(.home) .wrapper,
body:not(.home) #content,
body:not(.home) .elementor-location-single{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- 2) Banner: start directly under sticky header (NO gap, NO clipping) --- */
body:not(.home) .elementor-location-single .page-banner{
  margin-top: var(--hdr-desktop) !important;
  margin-bottom: 0 !important;

  min-height: 340px !important;
  background-size: cover !important;
  background-position: center top !important;
}

@media (max-width: 768px){
  body:not(.home) .elementor-location-single .page-banner{
    margin-top: var(--hdr-mobile) !important;
    min-height: 230px !important;
    background-position: center top !important;
  }
}

/* --- 3) Raised card: overlap banner, BUT remove dead-air above first heading --- */
body:not(.home) .elementor-location-single .raised-card{
  /* overlap */
  margin-top: -64px !important;
  margin-bottom: 0 !important;

  /* THIS is the “white space above first heading” fix */
  padding-top: 0 !important;            /* hard reset */
  padding-bottom: 28px !important;
  padding-left: clamp(18px, 4vw, 70px) !important;
  padding-right: clamp(18px, 4vw, 70px) !important;

  position: relative;
  z-index: 2;
}

/* Mobile overlap + small intentional top padding */
@media (max-width: 768px){
  body:not(.home) .elementor-location-single .raised-card{
    margin-top: -34px !important;
    padding-top: 6px !important;        /* tiny “breathing room” */
    padding-bottom: 22px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Kill any inner-wrapper top padding that Elementor may add */
body:not(.home) .elementor-location-single .raised-card .e-con-inner,
body:not(.home) .elementor-location-single .raised-card .elementor-container,
body:not(.home) .elementor-location-single .raised-card .e-con{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove top margin from the first real content element (THIS is the stubborn part) */
body:not(.home) .elementor-location-single .raised-card :is(
  h1, h2, h3, h4, p, ul, ol, .elementor-heading-title, .elementor-widget-heading, .elementor-widget-text-editor
):first-child{
  margin-top: 0 !important;
}

/* If the first content is coming from Theme Post Content, remove its first-child margin too */
body:not(.home) .elementor-location-single .raised-card .elementor-widget-theme-post-content > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- 4) Tighten spacing inside the raised card (only) --- */
body:not(.home) .elementor-location-single .raised-card .elementor-widget{
  margin-bottom: 14px !important;
}
body:not(.home) .elementor-location-single .raised-card .elementor-widget-heading{
  margin-bottom: 8px !important;
}
body:not(.home) .elementor-location-single .raised-card .elementor-widget-text-editor p{
  margin-bottom: 10px !important;
  line-height: 1.65 !important;
}
body:not(.home) .elementor-location-single .raised-card .elementor-widget-text-editor p:last-child{
  margin-bottom: 0 !important;
}
body:not(.home) .elementor-location-single .raised-card .elementor-widget:last-child{
  margin-bottom: 0 !important;
}

/* --- 5) Footer: never covered, minimal gap --- */
body:not(.home) .elementor-location-single{
  padding-bottom: 0px !important;
}

body:not(.home) footer,
body:not(.home) .footer,
body:not(.home) .footer.footer-big{
  margin-top: 0 !important;
}
/* MOBILE READABILITY FIX: prevent tiny text */
@media (max-width: 768px){
  html { font-size: 16px !important; }
  body { font-size: 16px !important; }

  /* Ensure normal paragraph/list readability */
  p, li { font-size: 1rem !important; }

  /* Keep headings from shrinking too much */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.3rem !important; }
}
/* Ensure Elementor Accordion toggle icons are visible */
.elementor-accordion .elementor-accordion-icon,
.elementor-accordion .elementor-accordion-icon i,
.elementor-accordion .elementor-accordion-icon svg{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Accordion icon fallback: show + / – even if icon fonts don't load */
.elementor-accordion .elementor-tab-title{
  position: relative !important;
  padding-right: 44px !important; /* room for the icon */
}

/* Hide Elementor's missing icon container */
.elementor-accordion .elementor-accordion-icon{
  display: none !important;
}

/* Add a + icon by default */
.elementor-accordion .elementor-tab-title:after{
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

/* Change to – when open */
.elementor-accordion .elementor-tab-title.elementor-active:after{
  content: "–";
}