:root {
  --blue-start: #355ca7;
  --blue-end: #0183d0;
  --bg-body: #0b1020;
  --text-main: #f9fafb;
  --text-muted: #cbd5f5;
  --mobile-header-height: 150px;
}

/* Reset / base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===== FIXED CALL BUTTON (DESKTOP) ===== */
.fixed-call-button {
  width: 250px;
  height: 80px;
  background: linear-gradient(to right, var(--blue-start) 0%, var(--blue-end) 100%);
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  border-radius: 10px 0 0 10px;
}

.fixed-call-button a,
.fixed-call-button .fixed-call-content {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-family: "Philosopher", sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.fa-whatsapp {
  margin-left: -10px;
  margin-right: 5px;
  font-size: 24px;
}

.fa-phone-volume {
  margin-right: 10px;
  margin-left: 10px;
}

/* ===== SIDEBAR (DESKTOP) ===== */
/* Default state: narrow (JS adds sidebarWide on load if no scroll) */
.sidebar {
  background: linear-gradient(to right, var(--blue-start) 0%, var(--blue-end) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
  z-index: 9998;
  width: 90px;
  clip-path: polygon(0 0, 0 0, 100% 50%, 0 100%, 0 0);
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5),
             -5px 0 10px rgba(0, 0, 0, 0.5);
}

/* WIDE STATE */
.sidebar.sidebarWide {
  width: 235px;
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50%, calc(100% - 50px) 100%, 0 100%);
  box-shadow: 10px 0 15px rgba(0, 0, 0, 0.7),
              5px 0 10px rgba(0, 0, 0, 0.5),
             -5px 0 10px rgba(0, 0, 0, 0.5);
}

/* NARROW STATE */
.sidebar.sidebarNarrow {
  width: 90px;
  clip-path: polygon(0 0, 0 0, 100% 50%, 0 100%, 0 0);
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5),
             -5px 0 10px rgba(0, 0, 0, 0.5);
}

/* Toggle visibility */
.sidebar .sidebar-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.sidebar.sidebarWide .sidebar-toggle {
  opacity: 0;
  pointer-events: none;
}

.sidebar.sidebarNarrow .sidebar-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* Logo & nav: hidden by default (narrow), shown when wide */
.sidebar .logo {
  width: 100px;
  margin: 35px 25px 0 10px;
  display: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.sidebar .icon-list {
  display: none;
  opacity: 0;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  padding: 10px 10px;
  margin-bottom: 10%;
  transition: all 0.3s ease-in-out;
}

.sidebar.sidebarWide .logo {
  display: block;
  opacity: 1;
}

.sidebar.sidebarWide .icon-list {
  display: flex;
  opacity: 1;
}

.sidebar.sidebarNarrow .logo,
.sidebar.sidebarNarrow .icon-list {
  opacity: 0;
  display: none;
}

.icon-item {
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 500;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 20px 0 0;
  transition: all 0.3s ease-in-out;

}

.icon-item i {
  margin:10px 10px 20px 20px ;
  font-size: 20px;
  transition: transform 0.5s ease-in-out;
}

.icon-item:hover {
  color: #1dc1e6;
}

.icon-item:focus,
.icon-item:active,
.icon-item *:focus,
.icon-item *:active {
  outline: none;
}

.icon-item:hover i {
  transform: rotate(360deg);
  color: #1dc1e6;
}

.fa-bars {
  font-size: 30px;
  color: #fff;
}

/* ===== MOBILE HEADER & SIDEBAR ===== */
    /* ===== MOBILE HEADER & SIDEBAR ===== */
    .mobileHeader {
      background: var(--blue-end);
      z-index: 9999;
      height: var(--mobile-header-height);
      display: none;
      flex-direction: row;
      position: fixed;
      top: 0;
      left: 0;
      width: 100% !important;
    }

    .mobileLeft {
      width: 25%;
      margin: auto 5px;
      display: flex;
    }

    .mobileMiddle {
      width: 50%;
      margin: auto;
      display: flex;
      justify-content: center;
    }

    .mobileRight {
      width: 25%;
      margin: auto 10px;
      display: flex;
      justify-content: center;
    }

    .call-button,
    .call-button:link,
    .call-button:visited,
    .call-button:hover,
    .call-button:active,
    .call-button i {
      color: #fff;
      /* iOS Safari can tint tapped tel: links via the visited state —
         text-fill-color forces the icon to stay white. */
      -webkit-text-fill-color: #fff;
    }

    .call-button {
      background-color: #28a745;
      border-radius: 50%;
      padding: 10px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      text-decoration: none;
      transition: background-color 0.3s ease;
      margin: auto 20px;
    }

    .call-button:hover {
      background-color: #218838;
    }

    .mobile-logo {
      max-height: 80px;
      object-fit: contain;
    }

    .mobile-toggle {
      font-size: 34px;
      /* slightly larger */
      color: #fff;
      cursor: pointer;
      margin: auto;
      
      /* more space on the right */
      padding: 6px 10px;
      /* hit area */
      transition: transform 0.2s ease;

    }

    .fa-x {
      color: #fff;
      font-size: 34px;
      /* a bit larger */
      display: none;
      margin: auto;
      margin-right: 26px;
      /* ~2x space compared to hamburger */
      padding: 8px 14px;
      /* more padding so it feels centered and clickable */
      transition: transform 0.2s ease;
    
    }

    .mobile-sidebar {
      display: flex;
      background: var(--blue-end);
      color: #fff;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: fixed;
      left: 0;
      top: var(--mobile-header-height);
      width: 200px;
      height: calc(var(--app-viewport-height, 100vh) - var(--mobile-header-height));
      transform: translateX(-200%);
      transition: transform 0.5s ease-in-out;
      z-index: 9999;
      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
      bottom: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* iOS Safari's collapsing toolbar can leave a gap below a fixed
       bottom:0 element. Dynamic viewport units track the toolbar so the
       drawer always reaches the true bottom edge. */
    @supports (height: 100svh) {
      .mobile-sidebar {
        height: calc(100svh - var(--mobile-header-height));
      }
    }

    @supports (height: 100dvh) {
      .mobile-sidebar {
        height: calc(100dvh - var(--mobile-header-height));
      }
    }

    .mobile-sidebar .icon-list {
      margin-bottom: 0;
      margin-top: 0;
      margin-left: 0;
      justify-content: space-between;
    }

    .mobile-sidebar .icon-list .icon-item {
      font-size: 20px;
      padding: 15px 20px;
      transition: all 0.3s ease-in-out;
    }

    .mobile-sidebar .icon-list .icon-item i {
      transition: transform 0.3s ease-in-out;
    }

    /* ===== CONTENT WRAPPER ===== */
    .content-wrapper {
      margin-left: 245px;
      padding: 2rem 2rem 3rem;
      min-height: 100vh;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 600px) {
      .fixed-call-button {
        display: none;
      }

      .sidebar {
        display: none;
      }

      .mobileHeader {
        display: flex;
      }

      .mobile-sidebar {
        display: flex;
      }

      .content-wrapper {
        margin-left: 0;
        padding: 170px 1.5rem 2.5rem;
      }
    }

    .elementor-element-85a9c70 { height: 450px; }
    .elementor-610 .elementor-element.elementor-element-2e6319b:not(.elementor-motion-effects-element-type-background),
    .elementor-610 .elementor-element.elementor-element-2e6319b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
      background-position: -130px -40px;
    }

    @media (max-width: 768px) {
      .elementor-610 .elementor-element.elementor-element-2e6319b:not(.elementor-motion-effects-element-type-background),
      .elementor-610 .elementor-element.elementor-element-2e6319b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-position: -130px -40px;
      }
      .elementor-element-9be7789,
      .elementor-element-2e6319b,
      .elementor-element-85a9c70 {
        height: 160px;
      }
      .elementor-element-2e6319b { min-height: 150px; }
      .elementor-element-9be7789 { min-height: 150px; }
      .elementor-element-4633bff {
        min-height: 170px;
      }
      .page-id-5106,
      .page-id-5267,
      .page-id-25280,
      .page-id-610,
      .elementor-page-15274,
      .elementor-page-5267 {
        margin-top: 150px;
      }
    }