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

/* 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 {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-family: "Philosopher", sans-serif;
  font-weight: 600;
}

.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: center;
  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: 150px;
      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 {
      background-color: #28a745;
      color: #fff;
      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: none;
      background: var(--blue-end);
      color: #fff;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: fixed;
      left: 0;
      top: 150px;
      width: 200px;
      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: 0;
    }

    .mobile-sidebar .icon-list {
      margin-bottom: 100px;
      margin-top: 50px;
      margin-left: -10px;
    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;
      }
    }

    @media (max-width: 400px) {
      .mobile-sidebar {
        top: 150px;
        bottom: 0;
      }
    }

    .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;
      }
    }