/* =========================================
   HULUTECH CLEAN & RESPONSIVE CSS
   ========================================= */

:root {
  --primary-navy: #0f172a;
  --accent-gold: #E1AD01;
  --dark-bg: #00051a;
  --text-main: #0f172a;
  --text-light: #f8fafc;
  --text-gray: #b0b0b0;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-main);
  background-color: #f1f5f9;
  overflow-x: hidden;
}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 8%;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(45deg, #fff, var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo img {
  height: 55px;
  width: auto;
  display: block;
}

#nav-links {
  display: flex;
  gap: 25px;
}

#nav-links a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  transition: var(--transition);
  position: relative;
}

#nav-links a:hover {
  color: var(--accent-gold) !important;
}

#nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: width 0.3s ease;
}

#nav-links a:hover::after {
  width: 100%;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 10000;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: var(--accent-gold);
  transition: var(--transition);
}

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu */
#nav-links {
  display: flex;
  gap: 25px;
}

@media (max-width: 768px) {
  #nav-links {
    display: none;
    position: absolute;
    /* Positioned perfectly under the hamburger */
    top: 50%; 
    right: 1%; 
    
    /* No box, no background */
    background: transparent; 
    width: auto;
    height: auto;
    
    flex-direction: column;
    align-items: flex-end; /* Clean right-alignment */
    gap: 12px; 
    padding: 15px 0;
    z-index: 9999;
  }

  #nav-links.active {
    display: flex !important;
  }

  .hamburger {
    display: flex;
  }

 #nav-links a {
    /* This makes the ACTUAL letters white */
    color: #ffffff !important; 

    /* This removes the blurry glow so it looks clean */
    text-shadow: none; 

    font-size: 0.95rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

 /* Change the shadow to white/glow instead of black */
text-shadow: 
  0px 0px 5px rgba(255, 255, 255, 0.8), 
  0px 0px 10px rgba(255, 255, 255, 0.8);
      
    transition: var(--transition);
    position: relative;
  }
  

  /* Gold glow on hover */
  #nav-links a:hover {
    color: var(--accent-gold) !important;
    text-shadow: 0px 0px 8px rgba(225, 173, 1, 0.6);
    transform: translateX(-5px); /* Tiny nudge to show it's active */
  }

  /* Remove those underlines from the previous style to keep it "Small & Nice" */
  #nav-links a::after {
    display: none;
  }
}

/* =========================================
   FOOTER - 4 COLUMNS ON LARGER SCREENS
   ========================================= */
.main-footer {
  background: var(--dark-bg) !important;
  color: #ffffff;
  padding: 70px 6% 40px;
  border-top: 3px solid var(--accent-gold);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px 30px;
  align-items: start;
}

/* Headings */
.footer-col h3,
.footer-logo {
  color: var(--accent-gold);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  position: relative;
}

.footer-col h3::after,
.footer-logo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 40px;
  height: 3px;
  background: var(--accent-gold);
}

/* Links */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 12px;
}

.footer-links-list a {
  color: var(--text-gray);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.footer-links-list a:hover {
  color: var(--accent-gold);
}

/* Contact */
.contact-details p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--text-gray);
  font-size: 1rem;
}

.contact-details i {
  color: var(--accent-gold);
  min-width: 22px;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.social-icons a {
  font-size: 1.8rem;
  color: var(--accent-gold);
  transition: transform 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.25);
  color: #ffd700;
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 55px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  font-size: 0.9rem;
}
/* --- Contact Section Fix --- */

/* 1. Set text and icons to Mustard by default */
.contact-details p,
.contact-details i,
.contact-details p a {
    color: var(--accent-gold) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 2. Ensure visited links also stay Mustard */
.contact-details p a:visited {
    color: var(--accent-gold) !important;
}

/* 3. Hover Effect: Everything turns White */
.contact-details p:hover,
.contact-details p a:hover,
.contact-details i:hover {
    color: #ffffff !important;
}
/* =========================================
   IMAGE WRAPPER
   ========================================= */
.image-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #FFC107;
  background-color: #050a18;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.image-wrapper img[alt="Lesego"] {
  width: 90%;
  height: auto;
  padding-top: 25px;
  object-fit: contain;
}
/* =========================================================
   CONTACT
   ========================================================= */

.contact-main-card {
    display: flex;
    flex-direction: row !important;
    background: #121621; /* Solid dark base for better contrast */
    border-radius: 12px;
    padding: 25px; /* Reduced padding for smaller footprint */
    border: 1px solid rgba(255, 184, 0, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    gap: 20px;
    max-width: 850px; /* Shorter max-width to look better on desktop too */
    margin: 20px auto;
    overflow: hidden;
}

/* LEFT SIDE: Animated Slim Sidebar */
.contact-details-panel {
    flex: 0 0 130px; /* Fixed small width to save space */
    border-right: 1px solid rgba(255, 184, 0, 0.1);
    padding-right: 15px;
}

/* POPPING ICON ANIMATION */
@keyframes iconPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 12px 2px rgba(255, 184, 0, 0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 184, 0, 0); }
}

.info-block i {
    color: #FFB800;
    font-size: 1rem;
    background: rgba(255, 184, 0, 0.1);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    animation: iconPulse 3s infinite ease-in-out; /* The "Pop" effect */
}

/* ALL TEXT NOW MUSTARD */
.info-block div span, 
.info-block div p {
    color: #FFB800 !important; /* Mustard text as requested */
    margin: 0;
    line-height: 1.2;
}

.info-block div p {
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 500;
}

/* RIGHT SIDE: The Form */
.contact-form-panel {
    flex: 1;
}

/* ALIGNED FIELDS */
.contact-form-panel input, 
.contact-form-panel textarea,
.iti__input { /* Targeting the phone input specifically */
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 184, 0, 0.3) !important; /* Mustard-tinted line */
    color: #FFB800 !important; /* Mustard text in fields */
    font-size: 0.85rem !important;
    padding: 10px 0 !important;
    margin-bottom: 15px;
    border-radius: 0 !important;
}

/* Fixing the alignment of the phone flag and input */
.iti {
    width: 100%;
    margin-bottom: 15px;
}

.iti__selected-flag {
    background: transparent !important;
    padding: 0 10px 0 0 !important;
}

/* Placeholder Color */
::placeholder {
    color: rgba(255, 184, 0, 0.4) !important;
}

/* SEND BUTTON */
.submit-btn {
    width: 100%;
    background: #FFB800 !important;
    color: #121621 !important;
    padding: 12px !important;
    font-weight: 800;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: 0.3s;
}

.submit-btn:hover {
    background: #ffffff !important;
    transform: translateY(-1px);
}
/* =========================================================
   CONTACT 
   ========================================================= */
/* SET GLOBAL BACKGROUND COLOR */
body {
    background-color: #121621 !important; /* The dark blue-gray you requested */
    margin: 0;
    padding: 0;
    color: #FFB800; /* Optional: Sets default text to mustard to match Hulutech theme */
}
/* The Main Container */
.contact-main-card {
    display: flex !important;
    flex-direction: row !important;
    background: #0d1117; 
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(255, 184, 0, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    gap: 20px;
    max-width: 850px;
    margin: 20px auto;
    align-items: stretch;
}

/* SIDEBAR: Slim & Themed */
.contact-details-panel {
    flex: 0 0 135px;
    border-right: 1px solid rgba(255, 184, 0, 0.1);
    padding-right: 15px;
}

.contact-details-panel h3 {
    color: #FFB800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px !important;
}

/* ICON POP ANIMATION */
@keyframes iconPop {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.3); }
}

.info-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.info-block i {
    color: #FFB800;
    font-size: 1rem;
    background: rgba(255, 184, 0, 0.1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    animation: iconPop 4s infinite ease-in-out;
}

/* ALL SIDEBAR TEXT MUSTARD */
.info-block div span {
    font-size: 0.6rem;
    font-weight: 700;
    color: #FFB800;
    text-transform: uppercase;
    opacity: 0.7;
}

.info-block div p {
    font-size: 0.75rem;
    color: #FFB800 !important;
    margin: 0;
    word-break: break-all;
}

/* FORM PANEL */
.contact-form-panel {
    flex: 1;
}

/* INPUT FIELDS - MUSTARD THEMED */
.contact-form-panel input, 
.contact-form-panel textarea {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid rgba(255, 184, 0, 0.3) !important;
    color: #FFB800 !important;
    font-size: 0.9rem !important;
    padding: 12px 0 !important;
    margin-bottom: 15px;
    border-radius: 0 !important;
    transition: 0.3s;
}

.contact-form-panel input:focus, 
.contact-form-panel textarea:focus {
    outline: none !important;
    border-bottom-color: #FFB800 !important;
}
/* 1. The Container now owns the underline */
.iti {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    /* This creates the line under both flag and number */
    border-bottom: 1.5px solid rgba(255, 184, 0, 0.4) !important; 
    margin-bottom: 25px;
    padding-bottom: 5px;
}

/* 2. Remove the line from the input so they don't double up */
#phone, .iti__input {
    border: none !important; 
    border-bottom: none !important;
    padding-left: 100px !important; /* Space after the +27 */
    width: 100% !important;
    background: transparent !important;
    color: #FFB800 !important;
    outline: none !important;
}

/* 3. Ensure the dropdown arrow and flag don't look cramped */
.iti__selected-flag {
    background: transparent !important;
    padding: 0 10px 0 0 !important;
}

/* 4. Make sure the dropdown list stays on top and looks clean */
.iti__country-list {
    background-color: #121621 !important;
    border: 1px solid #FFB800 !important;
    color: white !important;
    z-index: 10000 !important;
}

/* SUBMIT BUTTON */
.submit-btn {
    width: 100%;
    background: #FFB800 !important;
    color: #0d1117 !important;
    padding: 14px !important;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    background: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 184, 0, 0.3);
}

/* MOBILE VIEW - KEEP SIDE BY SIDE */
@media (max-width: 600px) {
    .contact-main-card {
        padding: 15px;
        gap: 12px;
    }
    .contact-details-panel {
        flex: 0 0 95px;
    }
    .info-block i {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    .info-block div p {
        font-size: 0.65rem;
    }
}

/* =========================================
   CAREER
   ========================================= */
   /* FORCE WHITE NAVBAR */
.site-header {
    background-color: #ffffff !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 8%;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* FORCE NAVY LINKS */
#nav-links a {
    color: #0a192f !important; 
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
    border-bottom: 2px solid transparent;
}

/* MUSTARD HOVER */
#nav-links a:hover {
    color: #E1AD01 !important;
    border-bottom: 2px solid #E1AD01;
}
        /* --- YOUR ORIGINAL CSS FIXES --- */
        .social-icons a i {
            color: #FFB800 !important;
        }

        .social-icons a:hover i {
            color: #FFD700 !important;
            text-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
        }

        :root {
            --navy-dark: #050b18; 
            --mustard-yellow: #e1ad01;
            --white: #ffffff;
            --glass: rgba(255, 255, 255, 0.03);
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--navy-dark);
            color: var(--white);
            font-family: Arial, sans-serif;
        }

        /* ── NAVBAR & DROPDOWN LOGIC ── */
        .site-header {
            background-color: var(--navy-dark);
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* border-bottom: 2px solid var(--mustard-yellow); */
            position: relative;
            z-index: 1000;
        }

        .logo img { height: 50px; }

        nav#nav-links {
            display: flex;
            align-items: center;
        }

        nav#nav-links a {
            color: var(--white);
            text-decoration: none;
            margin-left: 30px;
            font-size: 16px;
            font-weight: 500;
            transition: 0.3s;
        }

        nav#nav-links a:hover { color: var(--mustard-yellow); }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown:hover .dropdown-content {
            display: block !important;
        }

        .dropdown-content {
            display: none; 
            position: absolute;
            background-color: transparent; 
            min-width: 200px;
            z-index: 1000;
            top: 40%; 
            left: 30px;
        }

        .dropdown-content a {
            color: white !important;
            text-decoration: none;
            display: block;
            font-size: 16px;
            margin-left: 0 !important;
            background: none !important;
            transition: color 0.3s ease;
        }

        .dropdown-content a:first-child {
            padding-bottom: 40px; 
            margin-top: 15px;
        }

        .dropdown-content a:last-child {
            padding-top: 0px; 
            margin-top: -5px;
        }

        .dropdown-content a:hover {
            color: var(--mustard-yellow) !important; 
        }

        /* ── CAREERS SECTION ── */
        #careers {
            padding: 80px 5%;
            text-align: center;
        }

        .careers-content h2 {
            font-size: 3rem;
            color: var(--mustard-yellow);
            margin-bottom: 20px;
        }

        .job-listings {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 50px auto;
        }

        .job-card {
            background: var(--glass);
            border: 1px solid rgba(225, 173, 1, 0.2);
            padding: 40px 25px;
            border-radius: 15px;
            text-align: left;
            transition: 0.4s;
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(10px);
        }

        .job-card:hover {
            transform: translateY(-10px);
            border-color: var(--mustard-yellow);
            background: rgba(225, 173, 1, 0.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .job-card h3 { color: var(--mustard-yellow); margin-bottom: 10px; }
        .job-meta { font-size: 0.8rem; color: #888; margin-bottom: 20px; text-transform: uppercase; }

        /* --- UPDATED BUTTON GROUP --- */
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: auto;
        }

        .apply-btn {
            background: var(--mustard-yellow);
            color: var(--navy-dark);
            border: none;
            padding: 12px 15px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            flex: 1;
            transition: 0.3s;
            text-align: center;
        }

        .details-btn {
            background: transparent;
            color: var(--mustard-yellow);
            border: 1px solid var(--mustard-yellow);
            padding: 12px 15px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            flex: 1;
            transition: 0.3s;
        }
        
        .details-btn:hover {
            background: rgba(225, 173, 1, 0.1);
        }

        /* --- NEW: JOB DESCRIPTION MODAL CSS --- */
        .details-body h4 { 
            color: var(--mustard-yellow); 
            margin: 20px 0 10px; 
            text-transform: uppercase; 
            font-size: 0.85rem; 
            border-bottom: 1px solid rgba(225, 173, 1, 0.2); 
            display: inline-block;
        }
        .details-body ul { padding-left: 20px; color: #ccc; }
        .details-body li { margin-bottom: 8px; font-size: 0.95rem; }

        /* --- NEW: CV UPLOAD STYLING --- */
        .cv-upload-input {
            border: 1px dashed var(--mustard-yellow) !important;
            padding: 8px !important;
            background: rgba(225, 173, 1, 0.05) !important;
            cursor: pointer;
        }
        .cv-upload-input::-webkit-file-upload-button {
            background: var(--mustard-yellow);
            border: none;
            border-radius: 3px;
            color: var(--navy-dark);
            font-weight: bold;
            padding: 5px 10px;
            cursor: pointer;
            margin-right: 10px;
        }

        /* ── MODAL STYLES ── */
        .hulu-modal {
            display: none;
            position: fixed;
            top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.95);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        .hulu-modal-content {
            background: #0a1428;
            border: 2px solid var(--mustard-yellow);
            padding: 35px;
            border-radius: 15px;
            width: 90%;
            max-width: 550px;
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }

        .close-btn { position: absolute; right: 20px; top: 15px; font-size: 24px; cursor: pointer; color: var(--mustard-yellow); }
        .form-group { margin-bottom: 15px; text-align: left; }
        .form-group label { display: block; margin-bottom: 5px; color: var(--mustard-yellow); font-size: 0.9rem; }
        .form-group input, .form-group textarea {
            width: 100%; padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid #333; color: white; border-radius: 5px; box-sizing: border-box;
        }
        .submit-app-btn {
            width: 100%; background: var(--mustard-yellow); border: none; padding: 12px; font-weight: bold; cursor: pointer; border-radius: 5px; color: var(--navy-dark);
        }

        
.main-footer {
  background: var(--dark-bg) !important;
  color: #ffffff;
  padding: 70px 6% 40px;
  border-top: 3px solid var(--accent-gold);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px 30px;
  align-items: start;
}

/* Headings */
.footer-col h3,
.footer-logo {
  color: var(--accent-gold);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  position: relative;
}

.footer-col h3::after,
.footer-logo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 40px;
  height: 3px;
  background: var(--accent-gold);
}

/* Links */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 12px;
}

.footer-links-list a {
  color: var(--text-gray);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.footer-links-list a:hover {
  color: var(--accent-gold);
}

/* Contact */
.contact-details p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--text-gray);
  font-size: 1rem;
}

.contact-details i {
  color: var(--accent-gold);
  min-width: 22px;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.social-icons a {
  font-size: 1.8rem;
  color: var(--accent-gold);
  transition: transform 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.25);
  color: #ffd700;
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 55px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  font-size: 0.9rem;
}


        @media (max-width: 768px) {
            nav#nav-links { display: none; }
            .footer-container { grid-template-columns: 1fr; }
            .btn-group { flex-direction: column; }
        }
        .job-card {
    background: var(--glass);
    /* 1. Keep your existing border for the other 3 sides */
    border: 1px solid rgba(225, 173, 1, 0.2); 
    
    /* 2. Add the thick mustard line at the bottom */
    border-bottom: 5px solid var(--mustard-yellow); 
    
    padding: 40px 25px;
    
    /* 3. Ensure the bottom corners of the border match the card's curve */
    border-radius: 15px; 
    
    text-align: left;
    transition: 0.4s;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    
    /* 4. Optional: Adds a slight glow to the bottom line like the screenshot */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
}

/* Update the hover state so the line remains prominent */
.job-card:hover {
    transform: translateY(-10px);
    border-color: var(--mustard-yellow);
    border-bottom-width: 6px; /* Slightly thicker on hover for effect */
    background: rgba(225, 173, 1, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* Styling for disabled buttons */
.details-btn:disabled, .apply-btn:disabled {
    background: #444 !important;
    border-color: #444 !important;
    color: #888 !important;
    cursor: not-allowed;
    transform: none !important; /* Prevents hover lift */
}
@media (max-width: 768px) {
    /* 1. Force Job Listings into 2x2 Grid */
    .job-listings {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px; /* Smaller gap for mobile */
        margin: 20px auto;
    }

    /* 2. Adjust Job Card for smaller width */
    .job-card {
        padding: 20px 15px; /* Less padding so text fits */
        border-bottom-width: 4px; /* Slightly thinner line for mobile */
    }

    .job-card h3 {
        font-size: 0.95rem; /* Smaller titles to prevent overlap */
        line-height: 1.2;
    }

    .job-meta {
        font-size: 0.7rem; /* Tiny meta text */
        margin-bottom: 15px;
    }

    /* 3. Button Group: Stacked or Side-by-Side? */
    /* If cards are too narrow, stacking buttons is safer: */
    .btn-group {
        flex-direction: column; 
        gap: 8px;
    }

    .apply-btn, .details-btn {
        padding: 8px 5px;
        font-size: 0.75rem; /* Smaller font for buttons */
    }

    /* 4. Footer: 2x2 Layout instead of 1 column */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
    }

    /* 5. Section Heading scaling */
    .careers-content h2 {
        font-size: 2rem;
    }
}

/* Extra Small Screens (Phones under 400px) */
@media (max-width: 400px) {
    .job-listings {
        grid-template-columns: 1fr !important; /* Stack only on very tiny phones */
    }
}

/* =========================================
      ABOUT 
   ========================================= */
:root {
    --primary-gold: #d4af37; /* Sophisticated gold accent */
    --tech-blue: #e1ad01;
    --dark-bg: #0a0c10;
    --card-bg: #161b22;
    --text-main: #e1ad01;
    --text-dim: #e1ad01;
}

.about-page-content {
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    padding: 0;
}

/* Hero Section */
.about-hero {
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(rgba(10, 12, 16, 0.8), rgba(10, 12, 16, 0.8)), 
                url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80'); /* Tech background image */
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid var(--primary-gold);
}

.about-hero h1 {
    font-size: 3.5rem;
    letter-spacing: 4px;
    margin-bottom: 10px;
    color: #e1ad01;
}

.hero-tagline {
    font-size: 1.2rem;
    color: var(--primary-gold);
    text-transform: uppercase;
    font-weight: 600;
}

/* Mission & Vision Cards */
.content-section {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: -50px auto 60px; /* Overlap effect */
    padding: 0 20px;
}

.info-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    flex: 1;
    border: 1px solid #30363d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-gold);
}

.info-card h2 {
    color: var(--primary-gold);
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-left: 4px solid var(--primary-gold);
    padding-left: 15px;
}

/* Values Grid */
.values-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.section-heading {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.value-item {
    background: #1c2128;
    padding: 30px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.value-item:hover {
    background: #21262d;
    border-color: var(--tech-blue);
}

.value-item i {
    font-size: 2.5rem;
    color: var(--tech-blue);
    margin-bottom: 20px;
    display: block;
}

.value-item h3 {
    margin-bottom: 15px;
    color: #e1ad01;
}

.value-item p {
    font-size: 0.9rem;
    color: var(--text-dim);
}
/* Adds the mustard line to Mission/Vision cards and Value items */
.info-card, .value-item {
    border-bottom: 4px solid var(--mustard) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Adds a slight shadow to make the line pop */
}

/* Ensures the line stays prominent on hover */
.info-card:hover, .value-item:hover {
    border-bottom-color: #ffdb4d !important; /* Slightly brighter on hover */
}

:root {
    --mustard: #FFCC00;
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #FFFFFF;
    --text-dim: #94A3B8;
}
@media (max-width: 768px) {
    /* Mission & Vision Side-by-Side */
    .content-section {
        display: flex;
        flex-direction: row; /* Keep them horizontal */
        gap: 10px;           /* Reduce gap to fit screen width */
        padding: 0 10px;
        margin-top: -30px;   /* Adjusted overlap for mobile */
    }

    .info-card {
        padding: 20px 15px;  /* Slimmer padding so text doesn't feel cramped */
        flex: 1;             /* Ensures they take up equal 50% width */
    }

    .info-card h2 {
        font-size: 1.1rem;   /* Smaller headers for small screens */
        padding-left: 10px;
    }

    .info-card p {
        font-size: 0.85rem;  /* Slightly smaller text to prevent long scrolling */
    }

    /* Values Grid (Two by Two) */
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}
/* =========================
   1. HERO (FIXED STRUCTURE) SERVICE
========================= */
.featured-iot {
    background: linear-gradient(145deg, #0a0e1a, #111827);

    max-width: 750px; /* 🔥 REDUCED SIZE */
    margin: 50px auto;

    padding: 25px;
    border-radius: 16px;

    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    align-items: center;

    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5),
                inset 0 -3px 0 #FFCC00;

    backdrop-filter: blur(10px);
}

/* TEXT SIDE */
.featured-iot h2 {
    color: #FFCC00;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.featured-iot p {
    font-size: 0.9rem;
    color: #94A3B8;
    line-height: 1.6;
    margin: 12px 0;
}

/* IMAGE */
.featured-iot img {
    width: 100%;
    height: 240px; /* 🔥 CONTROL HEIGHT */
    object-fit: cover;
    border-radius: 12px;
}

/* CTA BUTTON (FIXED) */
.cta-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;

    background: #FFCC00;
    color: #0a0e1a;
    font-weight: 700;
    font-size: 0.8rem;

    border-radius: 6px;
    text-decoration: none;

    transition: 0.3s ease;
}

.cta-btn:hover {
    background: #ffd633;
    transform: translateY(-2px);
}

/* MOBILE */
@media (max-width: 768px) {
    .featured-iot {
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 90%;
    }

    .featured-iot img {
        height: 200px;
    }
}

/* =========================
   2. SERVICES GRID
========================= */
/* FORCED COLOR RESET FOR ALL LINKS TO MUSTARD */
a, a:link, a:visited, a:active {
    color: #ffcc00 !important;
    text-decoration: none !important;
}



/* HOVER STATE */
a:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 40px auto;
}

/* CARD */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 25px 15px;
    text-align: center;
    transition: all 0.35s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35),
                inset 0 -3px 0 var(--mustard);
}

.glass-card:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.glass-card i {
    color: var(--mustard);
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.glass-card h3 {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 10px;
}

/* BUTTON */
.learn-more {
    font-size: 10px;
    font-weight: 700;
    color: var(--mustard);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.glass-card:hover .learn-more {
    letter-spacing: 2px;
}
/* THE MAIN SECTION CONTAINER */
.testimonials-section {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* This forces the heading and the box to the center */
    text-align: center;
}

/* THE HEADING - MATCHING YOUR OTHER SECTIONS */
.testimonials-section h2 {
    color: var(--mustard);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    width: 100%; /* Ensures the text-align: center works across the whole space */
    text-align: center;
}

/* THE GLASS CONTAINER BOX */
/* THE MAIN POP-UP BOX */
.modal-content {
    background: #070b14 !important;
    border: 2px solid #ffcc00 !important;
    border-radius: 25px !important;
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.2) !important;
    
    /* MOBILE DIMENSIONS */
    width: 95% !important;
    max-width: 700px !important;
    max-height: 90vh !important; /* Prevents it from going off-screen */
    
    /* THE SCROLL FIX: Move overflow to the main container */
    display: block !important; /* Changed from flex to block for simple scrolling */
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    padding: 0 !important;
    
    /* Smooth scrolling for mobile */
    -webkit-overflow-scrolling: touch !important;
}

/* THE PERMANENT MUSTARD SCROLLBAR */
.modal-content::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #ffcc00 !important;
    border-radius: 10px !important;
    border: 2px solid #070b14 !important;
}

/* THE TITLE - ENSURE IT DOESN'T CLIP */
#modalTitle {
    color: #ffcc00 !important;
    padding: 40px 20px 10px 20px !important;
    font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* THE TEXT BODY - REMOVE INTERNAL SCROLLING */
#modalText {
    padding: 10px 30px !important;
    overflow: visible !important; /* Let the main container handle scrolling */
    color: #ffcc00 !important;
}

/* THE BUTTON - PADDING AT THE BOTTOM */
.modal-btn {
    background: #ffcc00 !important;
    color: #000 !important;
    padding: 18px 45px !important;
    border-radius: 100px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: block !important;
    width: fit-content !important;
    margin: 30px auto 40px auto !important; /* Added 40px bottom margin for spacing */
}
/* =========================
   3. TESTIMONIAL (FIXED)
========================= */
.testimonials-section {
    max-width: 1200px; /* Wider section to allow the container to breathe */
    margin: 80px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.testimonials-section h2 {
    color: var(--mustard);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
}

/* MATCHING THE "INNOVATIVE SOLUTIONS" BOX */
.testimonial-container-box {
    width: 70%;
    max-width: 800px; /* Matches the size of the box in your image */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px; /* Slightly rounder corners */
    padding: 50px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* The specific shadow and mustard bottom border from your image */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border-bottom: 4px solid var(--mustard); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.testimonial-slider {
    width: 100%;
}

/* TEXT STYLING */
.testimonial p {
    font-size: 1.1rem; /* Slightly larger for the bigger container */
    font-style: italic;
    color: var(--mustard); 
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 800px; /* Keeps text readable */
    margin-left: auto;
    margin-right: auto;
}

.testimonial h4 {
    color: var(--mustard);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.testimonial-img {
    width: 90px; /* Slightly larger image to match the bigger scale */
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--mustard);
    margin: 0 auto 25px auto;
    display: block;
    object-fit: contain;
    background: white;
}

.testimonial-slider {
    width: 100%;
    position: relative;
    min-height: 220px; /* Adjust based on longest testimonial */
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial {
    display: none; /* Hidden by default */
    width: 100%;
    max-width: 700px;
}

.testimonial.active {
    display: block; /* Shown when active */
    animation: fadeInUp 0.6s ease forwards;
}

/* Centering the image inside the testimonial */
.testimonial-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--mustard);
    margin: 0 auto 20px auto; /* Auto margins center the block */
    display: block;
    object-fit: cover;
}


/* =========================
   4. MOBILE
========================= */
@media (max-width: 768px) {

    .featured-iot {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .services-grid {
        gap: 12px;
        padding: 0 12px;
    }

    .glass-card {
        padding: 18px 10px;
    }

    .glass-card h3 {
        font-size: 0.85rem;
    }

    .glass-card i {
        font-size: 1.7rem;
    }
}

/* =========================
   PARTNERSHIP
========================= */
/* --- Branding & Typography --- */
:root {
    --mustard-yellow: #FFDB58; /* Branding color */
    --text-light: #f4f4f4;
}

.header-box {
    text-align: center; /* Center the text */
    padding: 60px 20px;
}

.header-box h1 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--mustard-yellow); /* Mustard Yellow */
    text-transform: uppercase;
    margin: 0;
}

.header-box p {
    color: #FFDB58;
    margin-top: 10px;
}

/* --- The Centered 3D Stage --- */
.logo-slider {
    width: 100%;
    height: 500px; 
    display: flex;
    justify-content: center; /* Horizontal Centering */
    align-items: center;     /* Vertical Centering */
    perspective: 1500px;    /* Depth control to prevent distortion */
    overflow: hidden;
    position: relative;
}

.logo-track {
    position: relative;
    width: 200px; /* Width of the "pivot" point */
    height: 120px;
    transform-style: preserve-3d;
    animation: rotate-one-circle 40s linear infinite;
}

/* --- Desktop Positioning (Big Circle) --- */
.logo-track a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Space all 12 logos evenly (30 degrees each) 
   translateZ(450px) keeps them far apart so they don't overlap 
*/
.logo-track a:nth-child(1)  { transform: rotateY(0deg) translateZ(450px); }
.logo-track a:nth-child(2)  { transform: rotateY(30deg) translateZ(450px); }
.logo-track a:nth-child(3)  { transform: rotateY(60deg) translateZ(450px); }
.logo-track a:nth-child(4)  { transform: rotateY(90deg) translateZ(450px); }
.logo-track a:nth-child(5)  { transform: rotateY(120deg) translateZ(450px); }
.logo-track a:nth-child(6)  { transform: rotateY(150deg) translateZ(450px); }
.logo-track a:nth-child(7)  { transform: rotateY(180deg) translateZ(450px); }
.logo-track a:nth-child(8)  { transform: rotateY(210deg) translateZ(450px); }
.logo-track a:nth-child(9)  { transform: rotateY(240deg) translateZ(450px); }
.logo-track a:nth-child(10) { transform: rotateY(270deg) translateZ(450px); }
.logo-track a:nth-child(11) { transform: rotateY(300deg) translateZ(450px); }
.logo-track a:nth-child(12) { transform: rotateY(330deg) translateZ(450px); }

.logo-track img {
    width: 200px; /* Size for big screens */
    height: auto;
    transition: transform 0.3s ease;
}

/* --- Animation --- */
@keyframes rotate-one-circle {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* --- Small Screen Fix (No Overlapping) --- */
@media (max-width: 768px) {
    .header-box h1 { font-size: 2.2rem; }

    .logo-slider { height: 350px; }

    /* Shrink the radius (translateZ) and the logos 
       to ensure they have space on small screens 
    */
    .logo-track a:nth-child(1)  { transform: rotateY(0deg) translateZ(160px); }
    .logo-track a:nth-child(2)  { transform: rotateY(30deg) translateZ(160px); }
    .logo-track a:nth-child(3)  { transform: rotateY(60deg) translateZ(160px); }
    .logo-track a:nth-child(4)  { transform: rotateY(90deg) translateZ(160px); }
    .logo-track a:nth-child(5)  { transform: rotateY(120deg) translateZ(160px); }
    .logo-track a:nth-child(6)  { transform: rotateY(150deg) translateZ(160px); }
    .logo-track a:nth-child(7)  { transform: rotateY(180deg) translateZ(160px); }
    .logo-track a:nth-child(8)  { transform: rotateY(210deg) translateZ(160px); }
    .logo-track a:nth-child(9)  { transform: rotateY(240deg) translateZ(160px); }
    .logo-track a:nth-child(10) { transform: rotateY(270deg) translateZ(160px); }
    .logo-track a:nth-child(11) { transform: rotateY(300deg) translateZ(160px); }
    .logo-track a:nth-child(12) { transform: rotateY(330deg) translateZ(160px); }

    .logo-track img {
        width: 100px; /* Smaller logos for mobile */
    }
}

/* --- Variables (Assumed) --- */
:root {
    --mustard: #FFDB58;
    --mustard-yellow: #FFDB58;
}

/* --- Centered Button --- */
.cta-section {
    text-align: center;
    padding: 20px 0 80px 0;
}

.partner-btn, .open-form-btn {
    background: var(--mustard);
    color: #000;
    padding: 15px 35px;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}

.partner-btn:active {
    transform: scale(0.95);
}

/* --- Modern Mustard Modal Styling --- */
.modal-content {
    background: rgba(17, 17, 17, 0.98); 
    backdrop-filter: blur(15px);
    border: 2px solid var(--mustard);
    border-radius: 20px;
    padding: 40px;
    max-width: 550px;
    width: 90%;
    margin: 20px auto; /* Reduced margin for mobile centering */
    box-shadow: 0 0 30px rgba(255, 219, 88, 0.2);
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

.modal-content h2 {
    color: #FFDB58;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Form Input Styling --- */
.modal-content input, 
.modal-content select, 
.modal-content textarea {
    background: #1a1a1a;
    border: 1px solid #333;
    color: var(--mustard);
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    margin-bottom: 15px; /* Space between fields */
    box-sizing: border-box; 
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
}

/* --- MOBILE RESPONSIVE QUERIES --- */
@media (max-width: 480px) {
    .modal-content {
        padding: 25px 20px; /* Smaller padding for narrow screens */
        width: 95%;
        border-radius: 15px;
    }

    .modal-content h2 {
        font-size: 1.5rem; /* Shrinks title so it doesn't wrap awkwardly */
        margin-bottom: 20px;
    }

    .partner-btn, .open-form-btn {
        width: 100%; /* Makes buttons easier to tap on phones */
        padding: 15px 20px;
    }
}.apply-now-btn {
    /* Kill the default browser look */
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    
    /* Colors */
    background-color: #FFDB58 !important;
    color: #000 !important;
    
    /* Shape & Size Adjustment */
    width: auto;               /* Lets the button shrink to fit the text */
    min-width: 200px;          /* Ensures it's not too tiny */
    padding: 12px 40px;        /* Vertical and Horizontal padding */
    border-radius: 50px;
    
    /* THE FIX: Centering logic */
    display: block;            /* Required for margin auto to work */
    margin: 25px auto 10px auto; /* Top: 25px, Sides: Auto (Centers it), Bottom: 10px */
    
    /* Text Style */
    font-size: 16px;           /* Slightly smaller font */
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
}

/* Hover effect */
.apply-now-btn:hover {
    background-color: #e6c54f !important;
    box-shadow: 0 4px 15px rgba(255, 219, 88, 0.3);
    transform: scale(1.02);    /* Optional: subtle pop on hover */
}/* 1. Ensure the parent container allows absolute positioning */
.modal-content {
    position: relative; 
    padding-top: 50px; /* Adds space so the X doesn't overlap your title */
}

/* 2. Style the X button */
.modal-close-x {
    position: absolute;
    top: 15px;         /* Distance from the top edge */
    right: 20px;       /* Distance from the right edge */
    
    /* Style & Color */
    color: #FFDB58 !important; /* Mustard Yellow */
    font-size: 32px;           /* Makes it bigger */
    font-weight: bold;
    line-height: 1;
    
    /* Interaction */
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    user-select: none;         /* Prevents highlighting the X on click */
}

/* 3. Hover effect */
.modal-close-x:hover {
    color: #fff !important;    /* Turns white on hover */
    transform: scale(1.2);     /* Grows slightly when hovered */
}
/* =========================================
   LATEST NEW
   ========================================= */
/* --- Ultra-Modern News Section --- */
#newsfeed {
    padding: 60px 0; /* Reduced padding for a tighter look */
    background: radial-gradient(circle at 50% 50%, #0a1931 0%, #06122b 100%);
    overflow: hidden;
    position: relative;
}

/* Background Tech Grid - Scaled down for compact feel */
#newsfeed::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255, 219, 88, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 219, 88, 0.03) 1px, transparent 1px);
    background-size: 30px 30px; 
    pointer-events: none;
}

.news-grid {
    display: grid;
    /* Smaller min-width allows more cards to fit per row */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px;
    perspective: 1000px;
    padding: 0 20px;
}

/* --- Compact Futuristic Card --- */
.news-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures uniform height in the grid */
}

/* Animated Border Highlight on Hover */
.news-card::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #FFDB58);
    transition: 0.6s;
    animation: rotate 4s linear infinite;
    opacity: 0;
    z-index: -1;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.news-card:hover {
    transform: translateY(-10px) scale(1.01) rotateX(1deg);
    border-color: rgba(255, 219, 88, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 
                0 0 15px rgba(255, 219, 88, 0.2);
}

.news-card:hover::before {
    opacity: 1;
}

/* --- Compact Media Area --- */
.card-media {
    margin: 10px;
    height: 160px; /* Lower height for smaller containers */
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.card-media img, .card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) brightness(0.9);
    transition: 0.6s ease;
}

/* --- Compact Typography --- */
.card-body {
    padding: 0 20px 15px 20px;
    flex-grow: 1;
}

.card-type {
    display: inline-block;
    color: #000;
    background: #FFDB58;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(255, 219, 88, 0.3);
}

.card-title {
    font-size: 1.2rem; /* Scaled down title */
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
    /* Limit title to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Standard Closed State (Desktop & Mobile) --- */
.card-desc {
    color: #E1AD01;
    line-height: 1.5;
    font-size: 0.85rem;
    margin-bottom: 15px;
    
    /* This forces the 'closed' look */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show exactly 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.5em; /* Fixed height (1.5 line-height * 3 lines) */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- The "View More" Expanded State --- */
.card-desc.expanded {
    display: block; /* Break the line-clamp */
    -webkit-line-clamp: unset;
    
    /* Keeps the card from getting too long on big screens */
    height: 250px; 
    overflow-y: auto; 
    padding-right: 10px;
}

/* --- Scrollbar styling so it stays pretty --- */
.card-desc.expanded::-webkit-scrollbar {
    width: 4px;
}
.card-desc.expanded::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.card-desc.expanded::-webkit-scrollbar-thumb {
    background: #FFDB58;
    border-radius: 10px;
}

/* --- Action Buttons (Sized Down) --- */
.card-actions {
    padding: 0 20px 25px 20px;
    display: flex;
    gap: 10px;
}

.ca-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.65rem;
    transition: 0.3s;
    cursor: pointer;
}

.ca-primary {
    background: #FFDB58;
    color: #000;
    border: none;
    position: relative;
    overflow: hidden;
}

.ca-primary:hover {
    background: #fff;
    transform: scale(1.05);
}

.ca-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ca-ghost:hover {
    border-color: #FFDB58;
    color: #FFDB58;
}

/* Mobile Polish */
@media (max-width: 480px) {
    .news-grid { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .card-media { height: 180px; }
    .card-title { font-size: 1.1rem; }
}
/* Mobile Polish - Two-Column Layout */
@media (max-width: 480px) {
    #newsfeed {
        padding: 40px 0; /* Slightly less padding on small screens */
    }

    .news-grid { 
        /* Forces two equal columns */
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* Reduced gap to save horizontal space */
        padding: 0 10px; /* Reduced side padding */
    }

    .card-media { 
        height: 120px; /* Smaller height so cards aren't too long */
        margin: 8px;
    }

    .card-body {
        padding: 0 12px 10px 12px;
    }

    .card-title { 
        font-size: 0.9rem; /* Smaller font for 2-column mobile */
        margin-bottom: 5px;
    }

    .card-desc {
        display: none; /* Recommended: hide desc on mobile 2-col to keep height clean */
    }

    .card-actions {
        padding: 0 10px 15px 10px;
        flex-direction: column; /* Stack buttons vertically to fit narrow width */
        gap: 5px;
    }

    .ca-btn {
        padding: 6px;
        font-size: 0.55rem;
    }
}
/* =========================================
   MARQUEE - FULL WIDTH & SLOW
   ========================================= */

/* --- Ultra-Modern News Section --- */
#newsfeed {
    padding: 60px 0; /* Reduced padding for a tighter look */
    background: radial-gradient(circle at 50% 50%, #0a1931 0%, #06122b 100%);
    overflow: hidden;
    position: relative;
}

/* Background Tech Grid - Scaled down for compact feel */
#newsfeed::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255, 219, 88, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 219, 88, 0.03) 1px, transparent 1px);
    background-size: 30px 30px; 
    pointer-events: none;
}

.news-grid {
    display: grid;
    /* Smaller min-width allows more cards to fit per row */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px;
    perspective: 1000px;
    padding: 0 20px;
}

/* --- Compact Futuristic Card --- */
.news-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures uniform height in the grid */
}

/* Animated Border Highlight on Hover */
.news-card::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #FFDB58);
    transition: 0.6s;
    animation: rotate 4s linear infinite;
    opacity: 0;
    z-index: -1;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.news-card:hover {
    transform: translateY(-10px) scale(1.01) rotateX(1deg);
    border-color: rgba(255, 219, 88, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 
                0 0 15px rgba(255, 219, 88, 0.2);
}

.news-card:hover::before {
    opacity: 1;
}

/* --- Compact Media Area --- */
.card-media {
    margin: 10px;
    height: 160px; /* Lower height for smaller containers */
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.card-media img, .card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) brightness(0.9);
    transition: 0.6s ease;
}

/* --- Compact Typography --- */
.card-body {
    padding: 0 20px 15px 20px;
    flex-grow: 1;
}

.card-type {
    display: inline-block;
    color: #000;
    background: #FFDB58;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(255, 219, 88, 0.3);
}

.card-title {
    font-size: 1.2rem; /* Scaled down title */
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
    /* Limit title to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Standard Closed State (Desktop & Mobile) --- */
.card-desc {
    color: #E1AD01;
    line-height: 1.5;
    font-size: 0.85rem;
    margin-bottom: 15px;
    
    /* This forces the 'closed' look */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show exactly 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.5em; /* Fixed height (1.5 line-height * 3 lines) */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- The "View More" Expanded State --- */
.card-desc.expanded {
    display: block; /* Break the line-clamp */
    -webkit-line-clamp: unset;
    
    /* Keeps the card from getting too long on big screens */
    height: 250px; 
    overflow-y: auto; 
    padding-right: 10px;
}

/* --- Scrollbar styling so it stays pretty --- */
.card-desc.expanded::-webkit-scrollbar {
    width: 4px;
}
.card-desc.expanded::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.card-desc.expanded::-webkit-scrollbar-thumb {
    background: #FFDB58;
    border-radius: 10px;
}

/* --- Action Buttons (Sized Down) --- */
.card-actions {
    padding: 0 20px 25px 20px;
    display: flex;
    gap: 10px;
}

.ca-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.65rem;
    transition: 0.3s;
    cursor: pointer;
}

.ca-primary {
    background: #FFDB58;
    color: #000;
    border: none;
    position: relative;
    overflow: hidden;
}

.ca-primary:hover {
    background: #fff;
    transform: scale(1.05);
}

.ca-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ca-ghost:hover {
    border-color: #FFDB58;
    color: #FFDB58;
}

/* Mobile Polish */
@media (max-width: 480px) {
    .news-grid { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .card-media { height: 180px; }
    .card-title { font-size: 1.1rem; }
}
/* Mobile Polish - Two-Column Layout */
@media (max-width: 480px) {
    #newsfeed {
        padding: 40px 0; /* Slightly less padding on small screens */
    }

    .news-grid { 
        /* Forces two equal columns */
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* Reduced gap to save horizontal space */
        padding: 0 10px; /* Reduced side padding */
    }

    .card-media { 
        height: 120px; /* Smaller height so cards aren't too long */
        margin: 8px;
    }

    .card-body {
        padding: 0 12px 10px 12px;
    }

    .card-title { 
        font-size: 0.9rem; /* Smaller font for 2-column mobile */
        margin-bottom: 5px;
    }

    .card-desc {
        display: none; /* Recommended: hide desc on mobile 2-col to keep height clean */
    }

    .card-actions {
        padding: 0 10px 15px 10px;
        flex-direction: column; /* Stack buttons vertically to fit narrow width */
        gap: 5px;
    }

    .ca-btn {
        padding: 6px;
        font-size: 0.55rem;
    }
}
/* =========================================
   MARQUEE - FULL WIDTH & SLOW
/* THE MAIN BAR - High-Gloss Metallic & Glow */
.marquee-hero-container {
    background: linear-gradient(90deg, #b8860b 0%, #E1AD01 20%, #FFD700 50%, #E1AD01 80%, #b8860b 100%); 
    background-size: 200% auto;
    animation: shine-bar 10s linear infinite;
    height: 52px;
    position: relative; 
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 100;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 -10px 25px rgba(225, 173, 1, 0.3), 0 5px 15px rgba(0,0,0,0.2);
}

/* THE BLACK LABELS - Universal Angled "Blade" Design */
.marquee-labels {
    display: flex;
    height: 100%;
    z-index: 999;
    background: #000;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1.5px;
    flex-shrink: 0; /* Prevents squishing on mobile */
    /* Keeps the sharp angled cut on ALL screens */
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    padding-right: 30px;
    box-shadow: 10px 0 20px rgba(0,0,0,0.5);
}

/* LIVE TAG - Neon Pulse stays active on mobile */
.live-tag {
    color: #fff;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.live-tag::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 12px #ff0000, 0 0 20px #ff4d4d;
    animation: neon-pulse 1.2s infinite;
}

/* CATEGORY TAG - Visible on mobile */
.category-tag {
    background: #111;
    color: #FFC107;
    padding: 0 20px;
    display: flex; /* Always visible */
    align-items: center;
    font-style: italic;
    border-left: 1px solid #333;
    letter-spacing: 2px;
}

/* THE SCROLLING TEXT */
.marquee-hero-scroll {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 55s linear infinite;
    will-change: transform;
}

.marquee-hero-scroll span {
    color: #000; 
    padding-left: 50px; 
    padding-right: 50px; 
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: flex;
    align-items: center;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
}

/* CLICKABLE AREA */
.marquee-main-link {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* MOBILE FIX: NO HIDING ELEMENTS */
@media (max-width: 768px) {
    .marquee-hero-container { 
        height: 48px; /* Slightly more compact for phones */
    }
    
    .marquee-labels { 
        font-size: 9px; /* Scaled down slightly to fit */
        padding-right: 20px;
        clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
    }

    .category-tag { 
        display: flex !important; /* Forces BLOG NEWS to show */
        padding: 0 10px;
    }

    .live-tag {
        padding: 0 10px;
    }

    .marquee-hero-scroll span { 
        font-size: 11px; /* Scaled for mobile readability */
        padding-left: 30px; 
        padding-right: 30px;
    }
}

/* ANIMATIONS */
@keyframes shine-bar { to { background-position: 200% center; } }
@keyframes neon-pulse {
    0% { transform: scale(1); box-shadow: 0 0 8px #ff0000; opacity: 1; }
    50% { transform: scale(1.4); box-shadow: 0 0 18px #ff0000; opacity: 0.7; }
    100% { transform: scale(1); box-shadow: 0 0 8px #ff0000; opacity: 1; }
}
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
/* =========================================
     first two buttons index page
   ========================================= */
/* Force 'Book' to be Yellow box with Black text */
  .book-btn-fixed {
    background-color: #E1AD01 !important;
    color: #000000 !important;
    border: none !important;
  }
  .book-btn-fixed:hover {
    color: #000000 !important; /* Keeps text black on hover */
    background-color: #E1AD01 !important; /* Keeps box yellow on hover */
  }

  /* Force 'Quick View' to be Transparent box with White text */
  .quick-btn-fixed {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
  }
  .quick-btn-fixed:hover {
    color: #ffffff !important; /* Keeps text white on hover */
    background-color: transparent !important; /* Keeps box transparent on hover */
  }

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */

@media (max-width: 992px) {
  .site-header {
    padding: 1rem 5%;
  }
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);   /* 2 columns on tablets */
    gap: 45px 30px;
  }
}

@media (max-width: 520px) {
  .main-footer {
    padding: 60px 5% 35px;
  }
  
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 25px;
  }

  .footer-col h3,
  .footer-logo {
    font-size: 1.3rem;
  }
}


.main-footer, .footer-col h3::after, .footer-logo::after, .footer-bottom { 
    border-top: none !important; 
    box-shadow: none !important; 
}

.footer-col h3::after, .footer-logo::after { 
    display: none !important; 
}