/* Flexbox utility classes */
    .header {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background-color: white;
      z-index: 9999;
      transition: max-height 0.5s ease-out;
      /* box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2); */
      box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    }
    
    .section-padding {
      padding: 5% 7%;
    }
    
    /* Top header with logo and centers button */
    .header-upper {
      padding: 0.5% 7%;
    }
    
    .header-upper .left {
      gap: 15px;
    }
    
    .header-upper .logo img {
      height: 80px;
    }
    
    .header-upper .brand-name h2 {
      font-size: 20px;
      /* Adjust font size as needed */
      font-weight: 500;
    }
    
    .header-upper .brand-name h2 span {
      font-size: 25px;
      /* Adjust font size as needed */
      font-weight: 600;
      color: var(--primary-blue-colour);
    }
    
    /* Section for all dropdowns */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* background-color: #fafafa; */
      /* padding: 5px 7%; */
      transition: max-height 0.5s ease-out;
      /* box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2); */
    }
    
    .navbar a {
      color: var(--black);
      padding: 5px 15px;
      text-decoration: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: 500;
    }
    
    .navbar a:hover {
      color: #5a5656;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
      /*z-index: 100000;*/
    }
    
    .dropdown>a>span>i {
      color: var(--primary-blue-colour);
    }
    
    .dropdown-content {
          width: max-content;
          position: absolute;
          top: 100%;
          left: 0;
          background: #fff;
          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
          border-radius: 4px;
          opacity: 0;
          transform: translateY(10px);
          pointer-events: none;
          transition: all 0.25s ease;
          z-index: 999;
    }
    
    .dropdown-content a {
      color: black;
      padding: 8px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
    
    
    .icon {
      display: none;
      color: var(--primary-blue-colour);
    }
    
    .navbar .close-icon {
      display: none;
      font-size: 24px;
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
    }
    
    .book-appointment {
      display: none;
    }
    
    .header_btn {
      display: none;
    }
    
    /* Responsive styles */
    @media screen and (max-width: 1280px) {
        .brand-name{
            display: none;
        }
    }
    /* Responsive styles */
    @media screen and (max-width: 960px) {
      /* 
      .header_btn {
        display: block !important;
      } */
    
      .header {
        overflow: hidden;
      }
    
      .header-upper .left {
        flex-direction: column;
        align-items: center;
      }
    
      .header-upper .brand-name {
        display: none;
      }
    
      .header-upper .right {
        display: flex;
        align-items: center;
      }
    
      .header-upper .logo img {
        height: 60px;
      }
    
      .navbar {
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        width: 100%;
        top: -100%;
        left: 0;
        background-color: #ebebfe;
        padding: 20px;
        z-index: 10;
        transition: top 0.5s ease-out;
      }
    
      .navbar a {
        display: block;
        text-align: left;
        padding: 10px 15px;
      }
    
      .navbar .dropdown-content {
        /*position: relative;*/
      }
    
      .header-upper .icon {
        display: block;
        cursor: pointer;
        font-size: 24px;
      }
    
      .header-upper .main-button {
        margin-left: 15px;
        display: block;
      }
    
      .navbar.show {
        top: 0;
      }
    
      .book-appointment {
        margin-bottom: 20px;
      }
    
      .navbar.show .close-icon {
        display: block;
      }
    }

    .open{
        /*position: relative;*/
        opacity: 1;
        transform: translateY(0px);
        pointer-events: all;
    }


 /* --- Hover effect for desktop --- */
    @media (min-width: 960px) {
      .dropdown:hover .dropdown-content {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
    }