.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* 3. NAVIGATION BAR + HAMBURGER MENU */
.hamburger-line {
    transition: all 0.35s ease;
}

/* When the menu is open, the TOP line rotates down 45 degrees... */
.hamburger-line.open:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

/* ...the MIDDLE line fades out and slides left... */
.hamburger-line.open:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

/* ...and the BOTTOM line rotates up 45 degrees. Together they form the X. */
.hamburger-line.open:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/*The thin vertical blue bar next to the logo in the navbar.
   CHANGE: width / height = size of the bar, background-color = its colour. */
.nav-divider {
    width: 3px;
    height: 40px;
    background-color: var(--knight-blue, #1D7FBF);
    flex-shrink: 0;
    border-radius: 2px;
}

/* The default navbar at the top of every page.
   CHANGE: background-color = navbar colour (white now),
           border-bottom = thin line under the navbar. */
.navbar {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    background-color: #ffffff;
    border-bottom: 1px solid #E4E8EF;
}

/* Adds a soft shadow under the navbar once you scroll down
   (the "scrolled" class is added by the JavaScript in the HTML).
   CHANGE: the last number (0.25) = how dark the shadow is. */
.navbar.scrolled {
    box-shadow: 0 8px 24px -16px rgba(16, 27, 51, 0.25);
}

/* Navbar colour while the full-screen menu is open.
   CHANGE: background-color = navbar colour when the menu is open. */
.navbar.open {
    background-color: #101B33;
    border-bottom-color: transparent;
}

/* Turns the hamburger lines white when the menu is open
   so they stay visible on the dark navbar. */
.navbar.open .hamburger-line {
    background-color: #ffffff;
}


/* 4. SMALL DESIGN PIECES */

/*  The small round blue dot used beside section labels
   ("OUR PROJECT", "WHAT WE DO", etc.). It echoes the dot in your logo.
   CHANGE: width / height = dot size, background-color = dot colour. */
.node-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #1D7FBF;
    flex-shrink: 0;
}

/*  A reusable "lift up" effect for cards on hover (you can add
   the class card-hover to any card in the HTML).
   CHANGE: translateY(-4px) = how far it lifts, the shadow = depth. */
.card-hover:hover {
    box-shadow: 0 20px 40px -18px rgba(16, 27, 51, 0.18);
    transform: translateY(-4px);
}


/*  5. HERO SECTION (top of the home page) */

/* WHAT IT DOES: The dark navy hero background: two soft glows (blue top-left,
   cyan bottom-right) over a navy gradient. No photo is used.
   CHANGE: the rgba(29,127,191,0.35) and rgba(79,195,232,0.22) lines = glow
           colours and strength (last number). The #0B1428 / #101B33 values
           in the last line = the navy base colours. */
.hero-navy {
    background:
        radial-gradient(circle at 12% 18%, rgba(29, 127, 191, 0.35), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(79, 195, 232, 0.22), transparent 46%),
        linear-gradient(160deg, #0B1428 0%, #101B33 55%, #0B1428 100%);
}

/* The faint dotted grid pattern laid over the dark sections.
   CHANGE: rgba(255,255,255,0.07) = dot brightness (higher = more visible),
           26px = space between dots. */
.circuit-grid {
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* The blinking cursor after the typed words in the hero
   ("Through Technology.").
   CHANGE: background-color = cursor colour, width = thickness. */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: #4FC3E8;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 0.8s step-end infinite;
}

/* The blinking cursor after the typed words in the hero
   ("Through Technology.").
   CHANGE: background-color = cursor colour, width = thickness. */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: #4FC3E8;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 0.8s step-end infinite;
}

/* Makes the cursor flash on and off.
   CHANGE: 0.8s (in .typing-cursor above) = blink speed. */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Colour of the typed hero words.
   CHANGE: color = text colour. */
.typed-text {
    color: #4FC3E8;
}


/* 6. "OUR PROJECT" ROTATING LIST (hero section, right side) */
/* Smooth movement for each item in the list. */
.tree-item {
    transition: all 0.45s ease;
    cursor: pointer;
}

/* The currently highlighted item: cyan text and nudged right.
   CHANGE: color = highlight colour, translateX(8px) = how far it slides. */
.tree-item.active {
    color: #4FC3E8;
    transform: translateX(8px);
}

/*  The dot beside the highlighted item turns cyan and glows.
   CHANGE: background-color = dot colour, box-shadow = glow colour/size. */
.tree-item.active .tree-dot {
    background-color: #4FC3E8;
    box-shadow: 0 0 16px rgba(79, 195, 232, 0.45);
}

/*The small dot beside every item (not highlighted).
   CHANGE: width/height = dot size, background-color = dot colour. */
.tree-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: all 0.45s ease;
    border: 1px solid rgba(79, 195, 232, 0.3);
}

/* A gentle fade in and out used for the glowing dot. */
@keyframes glowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Makes the highlighted dot pulse.
   CHANGE: 2s = pulse speed. */
.tree-item.active .tree-dot {
    animation: glowPulse 2s infinite;
}


/* 7. LOGO ZOOM ANIMATION */

/* Defines the zoom in / zoom out motion.
   CHANGE: scale(1.1) = how big it grows (1.1 = 10% bigger; 1.3 = more). */
@keyframes zoomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Applies the zoom to anything with class "zoom-pulse"
   (the logo in the "Who We Are" panel).
   CHANGE: 9s = time for one full zoom in and out (lower = faster). */
.zoom-pulse {
    animation: zoomPulse 9s ease-in-out infinite;
}


/*  SERVICE POPUP
   The box that opens when you click a service card. */

/* The full-screen layer that holds the popup. Hidden by default
   (opacity 0), and it ignores clicks until opened. */
#serviceModal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Shows the popup. The "open" class is added by JavaScript
   when you click a service card. */
#serviceModal.open {
    opacity: 1;
    pointer-events: auto;
}

/*  The dark blurred layer behind the popup.
   CHANGE: the last number (0.72) = how dark it is,
           blur(4px) = how blurred the page behind looks. */
#serviceModalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 27, 51, 0.72);
    backdrop-filter: blur(4px);
}

/*  The white popup box itself.
   CHANGE: background = box colour, border-radius = corner roundness,
           max-width = how wide it can get, padding = inner spacing,
           max-height = tallest it can be before scrolling. */
#serviceModalPanel {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    padding: 40px;
    box-shadow: 0 25px 60px rgba(16, 27, 51, 0.3);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    max-height: 85vh;
    overflow-y: auto;
}

/* Makes the box grow slightly into place when it opens. */
#serviceModal.open #serviceModalPanel {
    transform: scale(1);
}

/* The X (close) button in the top-right corner.
   CHANGE: color = X colour. */
#serviceModalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #6B7280;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
}

/* The X turns blue when hovered. */
#serviceModalClose:hover {
    color: #1D7FBF;
}

/* The small number badge ("01", "02"...) at the top of the popup.
   CHANGE: color = number colour, background = badge fill. */
#serviceModalNumber {
    display: inline-block;
    color: #1D7FBF;
    font-weight: 700;
    font-size: 12px;
    background: rgba(29, 127, 191, 0.1);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* The service heading inside the popup.
   CHANGE: color = heading colour, font-size = heading size. */
#serviceModalTitle {
    color: #101B33;
    font-size: 26px;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
    margin-bottom: 16px;
}

/* The description paragraph under the heading.
   CHANGE: color = text colour, font-size = text size. */
#serviceModalBody {
    color: #4B5568;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* The checklist container (removes the default bullet dots). */
#serviceModalList {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
}

/* The checklist lines.
   CHANGE: color = text colour, font-size = text size, padding = line spacing. */
#serviceModalList li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #33394A;
    padding: 6px 0;
}

/* Adds the tick mark (check) before every checklist line.
   CHANGE: color = tick colour. */
#serviceModalList li::before {
    content: "\2713";
    color: #1D7FBF;
    font-weight: 700;
    flex-shrink: 0;
}

/* The "Get This Service" button at the bottom of the popup.
   CHANGE: background-color = button colour, color = text colour,
           border-radius = corner roundness. */
#serviceModalCta {
    width: 100%;
    background-color: #101B33;
    color: #ffffff;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* The button turns blue when hovered.
   CHANGE: background-color = hover colour. */
#serviceModalCta:hover {
    background-color: #1D7FBF;
}


/* 9. CONTACT SECTION */
/* The big white card that holds everything in "Contact Us".
   CHANGE: max-width = card width, border-radius = corners,
           padding = inner space, gap = space between left and right halves. */
.contact-outer-card {
    max-width: 1100px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #E4E8EF;
    box-shadow: 0 10px 40px rgba(16,27,51,0.06);
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

/* The left half (title, text, and the four info cards). */
.contact-info {
    flex: 1;
    min-width: 280px;
}

/* The "Contact Us" heading.
   CHANGE: font-size = size, color = colour. */
.contact-title {
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #101B33;
    margin-bottom: 12px;
}

/* The sentence under the heading.
   CHANGE: color = text colour, font-size = size. */
.contact-text {
    color: #6B7280;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 15px;
}

/* Arranges the four info cards (Services, Email, Phone, Visit)
   in 2 columns.
   CHANGE: grid-template-columns: 1fr 1fr = two columns (use 1fr for one). */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Each small info card.
   CHANGE: background-color = card fill, border = outline, border-radius = corners. */
.contact-card {
    background-color: #ffffff;
    border: 1px solid #E4E8EF;
    border-radius: 10px;
    padding: 20px;
}

/* The small square behind each icon (mail, phone, etc.).
   CHANGE: background-color = square colour, color = icon colour. */
.contact-card .contact-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(29, 127, 191, 0.1);
    color: #1D7FBF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 20px;
}

/* The card headings ("Our Email", "Phone"...).
   CHANGE: color = text colour, font-size = size. */
.card-title {
    font-size: 16px;
    font-weight: 700;
    color: #101B33;
    margin-bottom: 4px;
}

/* The detail text in the cards (email address, phone numbers).
   CHANGE: color = text colour. */
.card-text {
    font-size: 14px;
    color: #6B7280;
}

/* The "View Services" link in the first card.
   CHANGE: color = link colour. */
.card-link {
    font-size: 14px;
    color: #1D7FBF;
    text-decoration: underline;
}

/* ---- Right side: the message form ---- */

/* The light gray box that holds the form.
   CHANGE: background-color = box colour. */
.contact-form-wrapper {
    flex: 1.2;
    min-width: 300px;
    background-color: #F5F7FA;
    border-radius: 12px;
    padding: 30px;
}

/* The form fields (they wrap onto new lines). */
.contact-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Each field with its label (Full Name, Email...). Two small
   fields sit side by side when there is room. */
.form-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

/* Makes a field take the whole row (Subject, Message, button). */
.form-group.full-width {
    flex-basis: 100%;
}

/* The little labels above each field.
   CHANGE: color = label colour, font-size = label size. */
.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #33394A;
    margin-bottom: 8px;
}

/* The typing boxes (name, email, subject dropdown, message).
   CHANGE: border = outline colour, border-radius = corners,
           font-size = typed text size.
   NOTE: !important is used so these win over the page's other styles. */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 14px !important;
    border: 1px solid #D6DAE2 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background-color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* The box outline turns blue while you are typing in it.
   CHANGE: border-color = focus colour. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none !important;
    border-color: #1D7FBF !important;
}

/* The "Send Message" button.
   CHANGE: background-color = button colour, color = text colour. */
.contact-form button {
    width: 100% !important;
    background-color: #101B33 !important;
    color: #ffffff !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* The button turns blue on hover.
   CHANGE: background-color = hover colour. */
.contact-form button:hover {
    background-color: #1D7FBF !important;
    color: #ffffff !important;
}

/* Less padding inside the contact card on small screens. */
@media (max-width: 768px) {
    .contact-outer-card {
        padding: 30px 20px;
    }
}


/* 10. ABOUT PAGE BANNER */
.about-hero {
    background:
        linear-gradient(rgba(16, 27, 51, 0.78), rgba(16, 27, 51, 0.78)),
        url('assets/images/about/hero.jpg') center / cover no-repeat,
        linear-gradient(160deg, #0B1428 0%, #101B33 55%, #0B1428 100%);
}


/* 11. MOBILE     */

/* ---- Tablets and below (screens 1023px wide or less) ---- */
@media (max-width: 1023px) {

    /* Removes the left gap on the hero text. */
    .ml-20 { margin-left: 0 !important; }

    /* Stacks the hero content in one centred column. */
    .hero-content-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Centres the hero text and buttons. */
    .hero-text { text-align: center !important; }
    .hero-buttons { justify-content: center !important; }

    /* Centres the rotating "Our Project" list. */
    .tree-wrapper { justify-content: center !important; }

    /* Lets narrow-column content use the full width. */
    .max-w-2xl { max-width: 100% !important; }
    .lg\:w-\[55\%\] { width: 100% !important; }
    .lg\:w-\[35\%\] { width: 100% !important; }

    /* Hero heading size on tablets.
       CHANGE: font-size = heading size on tablets. */
    .hero-heading { font-size: 2.4rem !important; line-height: 1.2 !important; }
    .tree-container { max-width: 100% !important; }
}

/* Phones */
@media (max-width: 480px) {
    .hero-heading { font-size: 1.7rem !important; }

    /* Smaller logo and shorter navbar on phones.
       CHANGE: height values = logo / navbar height. */
    .navbar img { height: 44px !important; }
    .navbar { height: 72px !important; }
    .h-39 { height: 72px !important; }
    .h-36 { height: 44px !important; }

    /* Tighter spacing and smaller text in the rotating list. */
    .tree-item { padding: 8px 12px !important; }
    .tree-item .text-base { font-size: 14px !important; }

    /* Smaller padding and heading in the service popup. */
    #serviceModalPanel { padding: 28px 22px; }
    #serviceModalTitle { font-size: 22px; }
}