/* ==========================================================================
           1. MODERN BASE RESETS & FLUID LAYOUT
           ========================================================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Source Sans Pro', sans-serif;
            background-color: #f4f6f9;
            color: #333;
            line-height: 1.6;
        }
        .tm-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ==========================================================================
           2. HEADER & LOGO ALIGNMENT (Mobile-First)
           ========================================================================== */
        .tm-site-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            text-align: center;
            gap: 15px;
        }
        .tm-site-header h1 {
            font-size: 1.4rem;
            color: #004080;
            font-weight: 700;
        }
        .tm-tagline {
            display: block;
            font-size: 0.85rem;
            font-style: normal;
            margin-top: 5px;
            color: #666;
            font-weight: 400;
        }
        .staf-btn {
            background: none;
            border: none;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .staf-btn:hover { transform: scale(1.05); }
        .staf-btn img {
            max-width: 110px;
            border-radius: 4px;
        }

        .sticky-nav {
            position: -webkit-sticky; /* For Safari support */
            position: sticky;
            top: 0;
            z-index: 1000; /* Keeps the nav on top of other content */
            background-color: #FFFFFF; /* Prevents underlying text from showing through */
            }


        /* ==========================================================================
           3. BANNER HERO IMAGES
           ========================================================================== */
        #tm-video-container {
            width: 100%;
            height: 220px;
            overflow: hidden;
        }
        #tm-video-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ==========================================================================
           4. RESPONSIVE NAVIGATION GRID 
           ========================================================================== */
/* --- STICKY NAV BASE BAR --- */
.tm-main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.9); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column; /* Allows vertical stacking on mobile */
  align-items: center;
  padding: 15px 20px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* --- THE 3-LINE MOBILE BUTTON --- */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  width: 100%;
  height: 3px;
  background-color: #333; /* Color of the lines */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* --- BASE GRID (Mobile Hidden Layout) --- */
.nav-grid {
  display: none; /* Hidden on mobile by default */
  grid-template-columns: repeat(1, 1fr); 
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0; /* Add top margin when open */
}

/* Toggle Class controlled by JavaScript */
.nav-grid.show {
  display: grid; /* Shows the grid when clicked */
}

/* --- LINK BUTTON STYLES --- */
.nav-link {
  display: block;
  text-align: center;
  padding: 12px 10px;
  background-color: #0d6efd;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* --- GLOBAL SCROLL OFFSETS --- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 180px; } /* Larger offset for expanded mobile layout */

/* ==========================================
   DESKTOP RESPONSIVE BREAKPOINT (Laptops/PCs)
   ========================================== */
@media (min-width: 768px) {
  .tm-main-nav {
    flex-direction: row; /* Horizontal container layout */
    justify-content: center;
  }
  
  .menu-toggle {
    display: none; /* Hide 3-line button on desktop */
  }
  
  .nav-grid {
    display: grid !important; /* Always show links on desktop */
    grid-template-columns: repeat(6, 1fr); /* 1 smooth row */
    margin: 0;
  }
  
  [id] { scroll-margin-top: 80px; } /* Smaller desktop offset */
}




        /* ==========================================================================
           5. SECTION WRAPPERS & UTILITIES
           ========================================================================== */
        .section-block {
            background: #fff;
            padding: 25px;
            margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        }
        .tm-page-title {
            font-size: 1.6rem;
            color: #333;
            margin-bottom: 20px;
            border-left: 5px solid #0056b3;
            padding-left: 12px;
        }
        .layout-split {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .tm-color-primary { color: #0056b3; font-weight: 600; }
        .tm-btn-primary {
            display: inline-block;
            background: #0056b3;
            color: #fff;
            padding: 10px 24px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 600;
            transition: background 0.2s;
        }
        .tm-btn-primary:hover { background: #004080; }

        /* ==========================================================================
           6. INTERACTIVE SERVICES TABS
           ========================================================================== */
        .tab-button-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 20px;
        }
        .tablink {
            background-color: #f1f1f1;
            color: #444;
            border: 1px solid #ddd;
            cursor: pointer;
            padding: 12px 8px;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        .tablink:hover { background-color: #e0e0e0; }
        .tablink.active {
            background-color: #0056b3 !important;
            color: white !important;
            border-color: #0056b3;
        }
        .tabcontent {
            display: none;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .tabcontent.show { display: block; }
        .tabcontent h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: #222;
        }
        .tab-split-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .styled-list {
            padding-left: 20px;
        }
        .styled-list li {
            margin-bottom: 8px;
        }

        /* ==========================================================================
           7. MODAL / LOGIN STRUCTURE
           ========================================================================== */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 9999; 
            left: 0; top: 0;
            width: 100%; height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.5); 
        }
        .modal-content {
            background-color: #fff;
            margin: 15% auto; 
            width: 90%; 
            max-width: 450px; 
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        .log-container { padding: 25px; }
        .log-container input[type=text], .log-container input[type=password] {
            width: 100%;
            padding: 12px;
            margin: 8px 0 16px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .log-container button[type=submit] {
            background-color: #0056b3;
            color: white;
            padding: 12px;
            border: none;
            cursor: pointer;
            width: 100%;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
        }
        .cancelbtn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .close-container { text-align: right; padding: 10px 15px 0 0; }
        .close { font-size: 28px; font-weight: bold; cursor: pointer; color: #aaa; }
        .close:hover { color: #000; }

        .parent {
            display: flex;
            justify-content: center; /* Horizontally centers children */
            align-items: center;     /* Vertically centers children */
            
            }
        .center {
            width: 30%;         /* Must have a width (px, %, etc.) */
            margin: 0 auto;     /* Sets left and right margins to 'auto' */
            }
    


        /* ==========================================================================
           8. FOOTER DESIGN
           ========================================================================== */
        .tm-footer {
            background-color: #1a1a1a;
            color: #999;
            padding: 25px 15px;
            font-size: 0.85rem;
            margin-top: 5px;
        }
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
        }
        .tm-footer a { color: #3498db; text-decoration: none; }
        .tm-footer a:hover { text-decoration: underline; }

        /* ==========================================================================
           9. 🖥️ RESPONSIVE BREAKPOINT FOR 17" MONITORS & LAPTOPS (>= 1024px)
           ========================================================================== */
        @media screen and (min-width: 1024px) {
            .tm-site-header {
                flex-direction: row;
                text-align: left;
                padding: 20px 40px;
            }
            .tm-site-header h1 { font-size: 1.8rem; }
            .tm-tagline { font-size: 0.95rem; }
            
            #tm-video-container { height: 400px; }
            
            .nav-grid { grid-template-columns: repeat(6, 1fr); }
            .layout-split { flex-direction: row; }
            .tm-col-6 { width: 50%; }
            
            .grid-three-columns {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 25px;
            }
            
            .tab-button-grid { grid-template-columns: repeat(6, 1fr); }
            .tablink { font-size: 0.9rem; }
            
            .tab-split-container { flex-direction: row; align-items: flex-start; }
            .tab-split-container img { width: 45%; max-height: 300px; object-fit: cover; }
            .tab-split-container .styled-list { width: 55%; }
            
            .footer-container {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
        }


/* ⚙️ EXTRA CSS STYLES FOR THE ORGANIZATIONAL CHART (Add this to your CSS area) */

  .org-container-box {
      width: 100%;
      text-align: center;
      margin: 0 auto;
      padding: 10px 0;
  }
  .org-level {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      position: relative;
  }
  .org-node {
      background: #fff;
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      min-width: 200px;
      max-width: 280px;
      margin: 0 auto;
  }
  .org-node h4 { font-size: 0.95rem; color: #222; margin-bottom: 3px; }
  .org-node h5 { font-size: 0.9rem; color: #333; margin-bottom: 2px; }
  .org-node span { font-size: 0.8rem; color: #777; display: block; }
  
  /* Node Color Branding */
  .org-node.leader { border-top: 4px solid #d35400; background: #fffcf9; }
  .org-node.executive { border-top: 4px solid #2980b9; background: #f4f9fd; }
  .org-node.branch-head { border-top: 4px solid #27ae60; background: #f4fdf7; margin-bottom: 15px; }
  .org-node.sub-node { border-top: 4px solid #7f8c8d; padding: 10px; min-width: 130px; margin-bottom: 10px; }

  /* Sub-Grid Tree Layout */
  .org-sub-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
  }

  /* Desktop Optimization for 17" Displays */
  @media screen and (min-width: 768px) {
      .org-sub-grid {
          flex-direction: row;
          justify-content: center;
          gap: 12px;
      }
      .org-node.sub-node { margin-bottom: 0; }
  }


<!-- ⚙️ COMPLEMENTARY CSS STYLES (Add this to your stylesheet area) -->

  /* Contact Layout Sizing (Mobile-First) */
  .contact-grid {
      display: flex;
      flex-direction: column;
      gap: 15px;
  }
  .contact-card {
      background: #fdfdfd;
      border: 1px solid #eef0f3;
      padding: 20px;
      border-radius: 6px;
  }
  .contact-card h4 {
      font-size: 1rem;
      margin-bottom: 8px;
      color: #333;
  }
  .contact-card p {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 4px;
  }
  .contact-link a {
      color: #0056b3;
      text-decoration: none;
      font-weight: 600;
  }
  .contact-link i {
      color: #777;
      margin-right: 6px;
      width: 15px;
  }
  
  /* Left Colored Borders for visual hierarchy */
  .border-hq { border-left: 4px solid #0056b3; }
  .border-sabah { border-left: 4px solid #27ae60; }
  .border-sarawak { border-left: 4px solid #d35400; }

  /* Form Element Structure Layout */
  .enquiry-form {
      background: #fdfdfd;
      border: 1px solid #eef0f3;
      padding: 25px;
      border-radius: 6px;
  }
  .enquiry-form label {
      display: block;
      margin-bottom: 5px;
      font-size: 0.85rem;
      font-weight: 600;
      color: #444;
  }
  .enquiry-form input, .enquiry-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-family: inherit;
      font-size: 0.9rem;
  }
  .enquiry-form input:focus, .enquiry-form textarea:focus {
      border-color: #0056b3;
      outline: none;
  }

  /* Map Fluid Wrapper */
  .iframe-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  /* 🖥️ DESKTOP OPTIMIZATIONS FOR 17" MONITORS (>= 1024px) */
  @media screen and (min-width: 1024px) {
      .contact-card h4 { font-size: 1.05rem; }
      .contact-card p { font-size: 0.95rem; }
      .enquiry-form { padding: 30px; }
      .iframe-container iframe { height: 380px; } /* Taller maps for wide layouts */
  }