:root {
      --primary: #1a2a6c;
      --secondary: #b21f1f;
      --accent: #64ffda;
      --text: #333;
      --light: #f8f9fa;
      --white: #ffffff;
      --navy: #0a192f;
      --dropdown-bg: #112240;
      --app-green: #28a745;
    }

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

    /* Smooth Scrolling for the whole page */
    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Poppins', sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
      overflow-x: hidden;
    }

    .page-wrapper {
      padding-top: 50px;
    }

    /* --- STICKY NAVBAR --- */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: var(--navy);
      /* Visible from the start */
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5%;
      z-index: 1000;
      transition: all 0.4s ease-in-out;
    }

    /* Glass Effect on Scroll */
    .navbar.nav-scrolled1 {
      background-color: rgba(10, 25, 47, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(10px);
      height: 50px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }

    .logo {
      color: var(--white);
      font-size: 24px;
      font-weight: 700;
      text-decoration: none;
    }

    .logo span {
      color: var(--accent);
      margin-right: 5px;
    }

    .logoimg {
      max-width: 50px;
      max-height: 50px;
      border: 1px solid red;
    }

    .nav-menu {
      display: flex;

      list-style: none;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      color: var(--white);
      text-decoration: none;
      padding: 0 20px;
      font-size: 16px;
      transition: 0.3s;
      height: 80px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .nav-link:hover {
      color: var(--accent);
    }

    /* --- DROPDOWN --- */
    .dropdown {
      position: absolute;
      top: 80px;
      left: 0;
      min-width: 200px;
      display: none;
      flex-direction: column;
      background: var(--dropdown-bg);
      border-top: 3px solid var(--accent);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      animation: slideDown 0.3s ease-out;
    }

    .dropdown.nav-scrolled1 {
      top: 70px;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dropdown a {
      color: white;
      padding: 15px 20px;
      text-decoration: none;
      font-size: 14px;
      transition: 0.3s;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dropdown a:hover {
      background: rgba(100, 255, 218, 0.1);
      color: var(--accent);
      padding-left: 25px;
    }

    .nav-item:hover .dropdown {
      display: flex;
    }

    /* --- LAYOUT --- */
    .container-content {
      max-width: 1150px;
      margin: auto;
      padding: 60px 20px;
    }

    .section-margin {
      margin-bottom: 60px;
    }

    .row-flex {
      display: flex;
      align-items: center;
      gap: 50px;
      flex-wrap: wrap;
    }

    .row-reverse {
      flex-direction: row-reverse;
    }

    .col-flex {
      flex: 1;
      min-width: 320px;
    }

    .col-flexImg {
      flex: 0.6;
      min-width: 320px;
    }

    h2.section-title {
      color: var(--primary);
      font-size: 2.3rem;
      border-left: 6px solid var(--secondary);
      padding-left: 20px;
      margin-bottom: 25px;
    }

    h2.title {
      color: var(--white);
      padding-left: 0px;
      margin-left: 0px;
      margin-block-start: 0px;
    }

    /* --- RESPONSIVE / MOBILE --- */
    .hamburger {
      display: none;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
    }

    .hamburger span {
      width: 25px;
      height: 3px;
      background: white;
      transition: 0.3s;
    }

    @media (max-width: 1150px) {
      .logoimg {
        display: none;
      }
    }

    @media (max-width: 1080px) {
      .feature-img {
        width: 80%;
        height: 350px;
      }

      .hamburger {
        display: flex;
      }

      .nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--navy);
        flex-direction: column;
        align-items: center;
        transition: 0.5s;
        padding-top: 30px;
        overflow-y: auto;
        /*font-size: 5px;*/
      }

      .nav-menu.active {
        right: 0;
      }

      /* ... existing hamburger/nav-menu styles ... */

      .nav-link {
        height: 70px;
        /* Increased height for easier tapping */
        font-size: 24px;
        /* Larger font for the main items */
        font-weight: 600;
        /* Slightly bolder for readability */
        justify-content: center;
        width: 100%;
      }

      .dropdown a {
        font-size: 22px;
        /* Sub-menu items slightly smaller than main, but still large */
        padding: 15px 0;
        /* More vertical space for tap targets */
        text-align: center;
        background: rgba(255, 255, 255, 0.03);
      }

      .nav-item {
        width: 100%;
        text-align: center;
      }

      .nav-link {
        height: 60px;
        justify-content: center;
        width: 100%;
      }

      .dropdown {
        position: static;
        display: none;
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
        border-top: none;
      }

      .nav-item.open .dropdown {
        display: flex;
      }
    }

    /* Fix for image distortion on small mobile devices */
    @media (max-width: 480px) {

      /* Prevent row overflow */
      .row-flex {
        gap: 20px;
        /* Reduce gap from 50px */
        flex-direction: column;
        /* Force stack */
      }

      /* Fix the App Highlight specifically */
      .app-highlight {
        padding: 20px;
        /* Smaller padding inside the card */
        margin: 10px;
        /* Add margin so it doesn't touch screen edges */
        overflow: hidden;
        /* Contain everything */
      }

      .col-flex,
      .col-flexImg {
        width: 100%;
        /* Take full width of the container */
        min-width: 0;
        /* Override the 320px min-width causing the push */
      }

      .feature-img {
        width: 100%;
        /* Ensure image fills its column */
        height: auto;
        /* Maintain aspect ratio */
        max-width: 100%;
        /* Hard limit */
        margin: 0 auto;
      }

      .counter {
        font-size: 2.5rem;
      }

      .navbar {
        padding: 0 15px;
        /* Reduce side padding to save space */
      }

      .title {
        font-size: 1rem;
        /* Shrink title text so it doesn't push the hamburger out */
        white-space: nowrap;
        /* Keep it on one line */
        max-width: 180px;
        /* Limit width */
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .logoimg {
        max-width: 40px;
        /* Slightly smaller logo */
      }

      /* Ensure the hamburger is always visible */
      .hamburger {
        margin-left: auto;
      }

      /* Gallery fix for small screens */
      .main-display {
        aspect-ratio: 4/3;
        /* Better fit for tall mobile screens */
      }

      h2.section-title {
        font-size: 1.8rem;
        /* Scale down headers for 360px width */
      }
    }

    .row-flex {
      gap: 20px;
    }
    
    /*.compact-header {*/
    /*    background: linear-gradient(90deg, var(--primary), var(--secondary));*/
    /*    color: white;*/
    /*    padding: 30px 20px;*/
    /*    text-align: center;*/
    /*}*/