html, body {
         
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          }


section.mt-0 {
    margin-top: 0 !important;
}
 
    .site-logo {
        max-height: 100px;
        width: 200px;
    }
    body, html {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .menu-bar-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
 

.business-card {
  border-radius: 14px;
  padding: 32px 28px 28px 28px;
  color: #fff;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 340px;
  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
  background: #069FE3;
}
.business-card-green {
  background: #D70004;
}
.business-card-blue {
  background: #069FE3;
}
.business-card-dark {
  background: #232323;
}
.business-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.13);
}
.icon-box {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
}
.business-card h5 {
  color: #fff;
  font-size: 1.25rem;
}
.business-card-dark h5 {
  color: #fff;
}
.business-card p {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .business-card { min-height: 260px; padding: 24px 16px; }
  .icon-box { width: 52px; height: 52px; }
}
          /* ────────────────────────────────
             G 
          ──────────────────────────────────*/
          :root {
            --primary-blue: #069FE3;
            --accent-red: #D70004;
          }

          .scroll-images {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            padding: 1rem;
          }

          .child {
              z-index: 20;
           display: flex;
            align-items: center;
            gap: 1rem;
              height: 100%;
            flex: 1 1 300px;
            max-width: 380px;
            background: #fff;
            border-radius: 12px;
            padding: 1rem 1.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.4s cubic-bezier(.4,2,.6,1);
          }

          .child:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 24px rgba(0,0,0,0.1);
          }

          .child img {
            width: 80px; /* override individual widths for consistent icon size */
            flex-shrink: 0;
          }

          .child h4 {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
          }

          .child p {
            font-size: 0.95rem;
            color: #666;
            margin: 0;
          }

          .child div {
            flex: 1;
          }
         
        

    .hover-1 {
        background: linear-gradient(#4a90e2 0 0) var(--p, 0) / var(--p, 0) no-repeat;
        transition: 0.4s, background-position 0s;
      }
      .hover-green>a:hover{
        color: #4a90e2;
        background-color: transparent;
      }
      .hover-1:hover , .hover-1>div>p>img{
        --p: 100%;
        color: #fff;
      }

          .vibrate-card,
          .card { transition:transform .2s ease-in-out; }
          .vibrate-card:hover,
          .card:hover { transform:scale(1.1) translateY(-8px); cursor:pointer; }

          /* ────────────────────────────────
             SCROLLABLE ICON “SERVICES” CAROUSEL
          ──────────────────────────────────*/
          .cover {
            position:relative;
            padding:80px 0px;
            margin-top:-150px;  
            margin-bottom: -45px;    
            overflow-x:auto;
            height: 100%;
          }
    /* ...existing code... */
    .promo-tight-spacing {
    
      
      margin-top: -10px !important;
      margin-bottom: 0 !important;
      padding-top: 0px !important;
      padding-bottom: 1.2rem !important;
    }
/* ...existing code... */
          .left,
          .right {
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            display:none;           /* remove if you want buttons visible */
          }
          .left  { left:0; }
          .right { right:0; }


  .service-icon {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    background: #f5faff;
    border-radius: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 175, 240, 0.10);
    padding: 0.75rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s, transform 0.2s;
    border: 2px solid #e0f3fa;
    display: inline-block;
  }
  .service-icon:hover {
    box-shadow: 0 4px 24px rgba(0, 175, 240, 0.18);
    transform: translateY(-4px) scale(1.07);
    border-color: #00aff0;
    background: #e6f7fd;
  }
  .sahal-col p {
    font-size: 1.08rem;
    color: #222;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

          /* ────────────────────────────────
             PRICING / PLAN CARDS
          ──────────────────────────────────*/
          .pricing {
            display:flex;
            flex-wrap:wrap;
            justify-content:space-around;
            gap:10px;
          }
          .pricing > div {
            width:300px;
            top:0;
            transition:top .1s;
          }
          .pricing > div:hover { top:-8px; }

          /* ────────────────────────────────
             NAVBAR & SIDENAV
          ──────────────────────────────────*/
          .side-nav {
            background-color: #1b1a1b;
            backdrop-filter: blur(15px);
            width: 250px;
            height: 100vh;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: -250px;
            overflow-y: auto;
            transition: 0.6s ease;
            transition-property: left;
          }
          .side-nav.active {
            left: 0;
          }
          .side-nav .menu-nav {
            width: 100%;
            margin-top: 50px;
          }
          .side-nav .menu-nav .menu-item a {
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            display: block;
            padding: 5px 30px;
            line-height: 30px;
          }
          .side-nav .menu-nav .menu-item a:hover {
            background: #33363a;
            transition: 0.3s ease;
          }
          .side-nav .menu-nav .menu-item i {
            margin-right: 15px;
          }
          .side-nav .menu-nav .menu-item .sub-menu {
            background: #262627;
            display: none;
          }
          .side-nav .menu-nav .menu-item .sub-menu a {
            padding-left: 60px;
          }
          .close-btn {
            color: #fff;
            position: absolute;
            font-size: 23px;
            right: 0px;
            top: 0;
            margin: 15px;
            cursor: pointer;
          }
          /* Mobile toggle buttons */
          .menu-btn { cursor: pointer; }

          /* ────────────────────────────────
             DROPDOWN MENU (MULTI-LEVEL)
          ──────────────────────────────────*/
          .dropdown-menu li{ position:relative; }
          .dropdown-submenu{
            display:none; position:absolute; left:100%; top:-7px;
          }
          .dropdown-submenu-left{ right:100%; left:auto; }
          .dropdown-menu > li:hover > .dropdown-submenu{ display:block; }


          /* ────────────────────────────────
             “GO-UP” SCROLL-TOP BUTTON
          ──────────────────────────────────*/
          .go-up{
            position:fixed; bottom:0; right:10px;
          }

          /* ────────────────────────────────
             CIRCULAR PROGRESS INDICATOR
          ──────────────────────────────────*/
          .circular{
            position:relative;
            width:100px; height:100px;
          }
          .circular .inner,
          .circular .outer,
          .circular .circle{
            position:absolute; width:100%; height:100%;
            border-radius:50%;
            box-shadow:inset 0 1px 0 rgba(0,0,0,.2);
          }
          .circular .inner{
            top:50%; left:50%;
            width:80px; height:80px;
            margin:-40px 0 0 -40px;
            background:#dde6f0;
          }
          .circular .numb{
            position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%);
            font-size:18px; font-weight:500; color:#069FE3;
          }

          .circle .bar,
          .circle .dot{ position:absolute; width:100%; height:100%; border-radius:50%; }
          .circle .bar{ clip:rect(0,100px,100px,50px); background:#fff; }
          .circle .progress-bar,
          .circle .dot span{ background:#069FE3; }
          .circle .left  .progress-bar{ animation:left 4s linear both; }
          .circle .right .progress-bar{ animation:right 4s 4s linear both; transform:rotate(180deg); }
          .circle .dot{ animation:dot 8s linear both; transform-origin:0 50%; }
          @keyframes left  { to{ transform:rotate(180deg);} }
          @keyframes right { to{ transform:rotate(180deg);} }
          @keyframes dot   {
            0%   { transform:rotate(-90deg); }
            50%  { transform:rotate(90deg);  z-index:4; }
            100% { transform:rotate(270deg); z-index:4; }
          }
.header-wrapper {
    width: 100%;
}

.logo-container {
    flex-shrink: 0;
}


          /* ────────────────────────────────
             MISC. HELPERS
          ──────────────────────────────────*/
          .progress-center,
          .progress-center-row{
            display:flex; justify-content:center; align-items:center;
          }
          .plan-tab-button{ min-width:120px; font-weight:500; }
          .plan-tab-button.active{ background:#069FE3!important; color:#fff!important; }

          .animate-p2p{ width:400px; transition:transform .2s; }
          .animate-p2p:hover{ transform:scale(1.1); }

          /* Add or override in your CSS for mobile sidebar menu look */


          /* ────────────────────────────────
             NAVBAR DROPDOWN STYLES
          ──────────────────────────────────*/
          /* Dropdown on hover for main nav */
          .navbar .dropdown:hover > .dropdown-menu,
          .navbar .dropdown:focus-within > .dropdown-menu {
            display: block !important;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
          }

          .navbar .dropdown-menu {
            display: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s;
            margin-top: 0.5rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px #0d6efd22;
            border: none;
            background: #fff;
            min-width: 250px;
            z-index: 1001;
          }

          .navbar .dropdown-menu .dropdown-header {
            font-size: 1.1rem;
            color: #000000;
            font-weight: 700;
            letter-spacing: 0.5px;
          }

          .navbar .dropdown-menu .dropdown-item {
            font-size: 1.08rem;
          
            color: #333 !important;
            border-radius: 0.5rem;
            margin-bottom: 2px;
            transition: background 0.2s, color 0.2s;
          }

          .navbar .dropdown-menu .dropdown-item:hover {
            background: #f2f8ff;
            color: #000000 !important;
          }

          /* Optional: style for chevron arrow */
          .drop-arrow {
            font-size: 1rem;
            margin-left: 0.3rem;
            color: inherit;
          }
.btn.text-primary.px-4 {
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}
.btn.text-primary.px-4:hover {
  background: linear-gradient(90deg, #10c174 0%, #069FE3 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(16, 193, 116, 0.15);
}
.btn.text-primary.px-4:hover .bi-arrow-right {
  transform: translateX(6px) scale(1.2);
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}