/*********************************
    MukaTech Unified Brand Variables
**********************************/
:root {
    --bs-primary: #00296B !important;   /* MukaTech Master Navy */
    --bs-secondary: #00D4FF !important; /* MukaTech Electric Cyan */
    --bs-dark: #00296B !important;      /* Unified Dark Backgrounds */
    --bs-success: #00D4FF !important;
    --bs-info: #00D4FF !important;
    --bs-white: #ffffff;    
    --muka-danger: #e74c3c;  /* Clean, professional Red */
    --muka-success: #27ae60; /* Professional Emerald Green */
}

/*********************************
    Global Overrides & Fixes
**********************************/
.top-info small, .top-link small, .text-white {
    color: #ffffff !important;
}

/* Force all Navy Backgrounds to be identical */
.bg-primary, .topbar, .navbar, .footer, .copyright, .dropdown-menu {
    background-color: var(--bs-primary) !important;
}

/* Force all Cyan Highlights to be identical */
.text-secondary, .text-cyan, .service-icon i, .btn-link, .check-mark, .timeline-number {
    color: var(--bs-secondary) !important;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    visibility: visible;
    opacity: 1;
}

/*** Buttons (Navy & Cyan only) ***/
.btn { font-weight: 600; transition: .5s; border-radius: 4px; }

/* Primary Button: Cyan with Navy Text */
.btn-primary, .btn-secondary, .btn-success {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
}

.btn-primary:hover, .btn-secondary:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--bs-primary) !important;
    transform: translateY(-2px);
}

.btn-square, .btn-sm-square, .btn-md-square, .btn-lg-square {
    padding: 0; display: flex; align-items: center; justify-content: center;
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px solid var(--bs-secondary) !important;
    color: var(--bs-secondary) !important;
}

.back-to-top {
    position: fixed; width: 50px; height: 50px; right: 30px; bottom: 30px; z-index: 99;
    background: var(--bs-secondary) !important; 
    color: var(--bs-primary) !important;
}



/*** Navbar ***/
.top-link a.btn-sm-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Ensures padding doesn't push the icon off-center */
}

.topbar .top-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar .top-link a {
    margin-right: 10px;
}


.topbar {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 1. Added 15px horizontal padding to fix the spacing between menu items */
.navbar .navbar-nav .nav-link {
    padding: 10px 15px; 
    color: var(--bs-white); 
    font-size: 18px; 
    outline: none;
    transition: 0.3s;
}

/* 2. Hover & Active State - Ensuring it uses MukaTech Cyan */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: #00D4FF !important;
}

/* 3. Dropdown Arrow Fix: Positioned AFTER, no background box, inherits color */
.navbar .nav-link.dropdown-toggle::after {
    display: inline-block !important;    
    content: "\f107" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-left: 4px !important; /* Pulls arrow to text */
    padding-right: 15px !important; /* Pushes 'Contact' away */
    vertical-align: 1px !important;
    color: inherit !important; 
    border: none !important;
}

/* 4. Crucial: Remove the 'before' arrow that was appearing on hover */
.navbar .dropdown-toggle::before {
    display: none !important;
    content: none !important;
}

/* 5. Extra spacing for the Dropdown container to push 'Contact' further away */
.nav-item.dropdown {
    margin-right: 5px;
}



.navbar .navbar-nav .nav-link {
    padding: 10px; color: var(--bs-white); font-size: 18px; outline: none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-secondary) !important;
}

/*** Carousel & Headers ***/
#carouselId .carousel-item {
    height: 85vh;
    background-color: #000;
}

.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

}    

#carouselId .carousel-item img {
    height: 100%; width: 100%; object-fit: cover;
    filter: brightness(0.55);
}

#carouselId .carousel-item::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0, 41, 107, 0.6), rgba(0, 41, 107, 0.3));
    z-index: 1;
}

.carousel-control-prev, .carousel-control-next { background: none !important; opacity: 1; z-index: 10; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: var(--bs-primary); border-radius: 50%; padding: 20px;
}







/*** Services & Projects ***/
.services-content::after, .project-content {
    background: rgba(0, 41, 107, 0.95) !important;
}

.project-img::before { background: var(--bs-secondary); }
.project-img::after { background: var(--bs-primary); }

.project-content a {
    background: var(--bs-secondary);
    color: var(--bs-primary) !important;
}

/*** Hardware & Architecture Specs (Unified) ***/
.arch-card, .specs-table, .hw-specs {
    border-color: rgba(0, 212, 255, 0.2) !important;
}

.arch-card.active-server, .specs-table thead, .table thead th {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.highlight-col {
    background: rgba(0, 212, 255, 0.05);
    border-left: 2px solid var(--bs-secondary) !important;
    border-right: 2px solid var(--bs-secondary) !important;
}

.port-badge {
    background: var(--bs-primary);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary);
}

/*** Timeline & Sliders ***/
.timeline-item { border-left: 2px solid var(--bs-secondary); }
.timeline-item::before { background: var(--bs-primary); border: 2px solid var(--bs-secondary); }
.img-after { border-right: 3px solid var(--bs-secondary); }
.slider-handle { background: var(--bs-primary); border: 3px solid var(--bs-secondary); }









/*** Footer & Copyright ***/
.footer .btn-link {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
}
.footer .btn-link::before {
    content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    margin-right: 10px; color: var(--bs-secondary);
}
.footer .btn-link:hover { color: var(--bs-secondary) !important; padding-left: 5px; }


.section-divider {
    width: 50%; margin: 80px auto; border-top: 1px solid var(--bs-secondary);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); opacity: 0.6;
}

/* Animations & Polish */
#typewriter { border-right: 2px solid var(--bs-secondary); animation: blink 0.75s step-end infinite; }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--bs-secondary) } }

/* FORCE FACT SECTION COLORS */
.bg-secondary {
    background-color: #00D4FF !important; /* MukaTech Electric Cyan */
}

/* Ensure the numbers (text-primary) are dark enough to read on the Cyan background */
.bg-secondary .text-primary {
    color: #00296B !important; /* MukaTech Master Navy */
    font-weight: 800;
}

/* Optional: Add a slight glow to the numbers to make them look high-tech */
.counter-value {
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.4);
}

/*** Footer Alignment & Link Polish ***/

/* 1. Remove default padding/margins from footer lists */
.footer ul, 
.footer .btn-link-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Standardize the Quick Links & Resource links */
.footer .btn-link {
    display: flex !important;
    align-items: center !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    text-align: left !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
}

/* 3. Ensure the FontAwesome arrows are aligned perfectly */
.footer .btn-link::before {
    content: "\f105" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
    color: var(--bs-secondary) !important; /* MukaTech Cyan */
    font-size: 14px;
}

/* 4. Fix column heading alignment */
.footer h4 {
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
    position: relative;
    text-align: left !important;
}

/* 5. Optional: Add a small Cyan underline to the headings to anchor them */
.footer h4::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;
    background: var(--bs-secondary);
    bottom: 0;
    left: 0;
}








/*** Dropdown Menu Polish ***/

/* 1. Set the background and border of the dropdown box */
.navbar .dropdown-menu {
    background-color: #00296B !important; /* MukaTech Navy */
    border: 1px solid rgba(0, 212, 255, 0.2) !important; /* Subtle Cyan border */
    border-top: 3px solid #00D4FF !important; /* Thick Cyan line at the top */
    border-radius: 0 0 4px 4px !important;
    padding: 10px 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* 2. Style the links inside the dropdown */
.navbar .dropdown-item {
    color: #ffffff !important; /* Crisp white text */
    padding: 10px 25px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* 3. Hover state for dropdown items */
.navbar .dropdown-item:hover {
    background-color: rgba(0, 212, 255, 0.1) !important; /* Very faint Cyan glow background */
    color: #00D4FF !important; /* Text turns Electric Cyan */
    padding-left: 30px !important; /* Subtle "slide" effect on hover */
}

/* 4. Fix for the dropdown arrow (if your template uses one) */
.navbar .dropdown-toggle::after {
    color: #00D4FF !important;
}

/* The Service Button Hover Effect */
.service-item .btn-primary:hover {
    background-color: #00296B !important; /* Switch to Navy background */
    color: #00D4FF !important;           /* Text turns Cyan */
    border: 2px solid #00D4FF !important; /* Add a glowing Cyan edge */
    transform: translateY(-5px);          /* Lift the button slightly */
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3); /* Add a soft Cyan glow */
    transition: all 0.3s ease;
}

/* Make the icons spin or grow when the card is hovered */
.service-item:hover .rounded-circle {
    background-color: #00D4FF !important; /* Circle turns Cyan */
}

.service-item:hover .rounded-circle i {
    color: #00296B !important;           /* Icon turns Navy */
    transform: scale(1.2);               /* Icon grows slightly */
    transition: 0.4s;
}




/* --- UNIVERSAL LINK TREATMENT --- */

/* Standard links in your text/paragraphs */
a {
    color: #00296B; /* Master Navy */
    text-decoration: none;
    transition: 0.3s all ease;
    font-weight: 500;
}

a:hover {
    color: #00D4FF !important; /* Electric Cyan Glow */
    text-decoration: none;
}

/* Links inside the Navy sections (TopBar, Navbar, Footer) */
.bg-primary a, 
.footer a, 
.topbar a,
.navbar-nav .nav-link {
    color: #ffffff !important;
}

.bg-primary a:hover, 
.footer a:hover, 
.topbar a:hover,
.navbar-nav .nav-link:hover {
    color: #00D4FF !important; /* Electric Cyan Glow */
}

/* Special "Read More" links with arrows */
.btn-link {
    color: #00D4FF !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.btn-link:hover {
    letter-spacing: 1px; /* Subtle tech-expansion effect */
    color: #00296B !important;
}










/* --- UNIFIED MUKATECH BUTTON BEHAVIOR --- */

/* Base State: Electric Cyan with Navy Text */
.btn-primary {
    background-color: #00D4FF !important; /* MukaTech Electric Cyan */
    color: #00296B !important;           /* MukaTech Master Navy */
    border: 2px solid #00D4FF !important;
    font-weight: 700 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hover State: The "Power-Up" Inversion */
.btn-primary:hover {
    background-color: #00296B !important; /* Flip to Navy */
    color: #00D4FF !important;           /* Text turns Cyan */
    border: 2px solid #00D4FF !important; /* Cyan glowing edge */
    transform: translateY(-5px) !important; /* Lift effect */
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.4) !important; /* Cyan Glow */
}

/* Active State: Pressing the button */
.btn-primary:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 10px rgba(0, 212, 255, 0.2) !important;
}

/* Force Section Subtitles to MukaTech Electric Cyan */
h5.text-uppercase {
    color: #00D4FF !important;
    letter-spacing: 2px; /* Adds a clean, technical look */
    font-weight: 700;
}
/* Ensure all section labels/subtitles use MukaTech Cyan */
h5.text-primary, 
h5.text-secondary, 
.services h5, 
.project h5 {
    color: #00D4FF !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}
/*** Project Section Refined ***/

.project-img {
    position: relative;
    padding: 15px; /* This creates the gap where the colors show */
    z-index: 1;
}

/* The Top-Left Block (Electric Cyan) */
.project-img::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    top: 0;
    left: 0;
    background: #00D4FF; /* MukaTech Electric Cyan */
    border-radius: 10px;
    opacity: 1;
    z-index: -1;
    transition: .5s;
}

/* The Bottom-Right Block (Master Navy) */
.project-img::after {
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #00296B; /* MukaTech Master Navy */
    border-radius: 10px;
    opacity: 1;
    z-index: -1;
    transition: .5s;
}

/* Content Overlay */
.project-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 2;
    transition: .5s;
    background: rgba(0, 41, 107, 0.8); /* Semi-transparent Navy overlay */
    border-radius: 10px;
}

/* The Icon/Link inside the hover overlay */
.project-content a {
    display: inline-block;
    padding: 20px 25px;
    background: #00D4FF; /* Cyan button */
    color: #00296B;      /* Navy icon */
    border-radius: 10px;
    font-size: 24px;
}

/* Hover States */
.project-item:hover .project-content {
    opacity: 1;
}

/* This makes the color blocks disappear on hover so the image stands out */
.project-item:hover .project-img::before,
.project-item:hover .project-img::after {
    opacity: 0;
    transform: scale(0.8); /* Adds a nice shrinking effect */
}

.project-item img {
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Styling the text below the project image */
.project-item h4 {
    color: #00296B; /* Master Navy Title */
    font-weight: 700;
    margin-top: 15px;
    transition: 0.3s;
}

.project-item:hover h4 {
    color: #00D4FF; /* Turns Cyan when you hover the whole card */
}

.project-item h5 {
    letter-spacing: 2px;
    font-size: 0.9rem;
}
/* --- MukaTech Insights Button --- */

/* 1. Base State: Electric Cyan */
.blog-icon .btn-secondary {
    background-color: #00D4FF !important; /* Electric Cyan */
    border: 2px solid #00D4FF !important;
    color: #00296B !important;           /* Master Navy Text */
    transition: all 0.4s ease-in-out !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* 2. Hover State: Power-Up Inversion */
.blog-icon .btn-secondary:hover {
    background-color: #00296B !important; /* Flip to Navy */
    color: #00D4FF !important;           /* Text turns Cyan */
    border: 2px solid #00D4FF !important;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4); /* Cyan Glow */
    transform: scale(1.05);               /* Slight grow effect */
}

/* 3. Link color protection */
.blog-icon a.btn:hover {
    color: #00D4FF !important;
}
.blog-item:hover {
    border-bottom: 5px solid #00D4FF; /* Adds a "Power Bar" to the bottom of the card on hover */
    transition: 0.3s;
}
/* MukaTech Insights Button Styling */

/* Base State: Cyan background, Navy text */
.blog-icon .btn-secondary, 
.blog-btn-icon.btn-secondary {
    background-color: #00D4FF !important;
    border: 2px solid #00D4FF !important;
    color: #00296B !important;
    transition: all 0.3s ease-in-out !important;
}

/* Fix text colors inside the share button */
.blog-btn-icon.btn-secondary .text-primary,
.blog-btn-icon.btn-secondary i {
    color: #00296B !important;
}

/* Hover State: Flip to Navy background, Cyan text */
.blog-icon .btn-secondary:hover,
.blog-btn-icon.btn-secondary:hover {
    background-color: #00296B !important;
    color: #00D4FF !important;
    border-color: #00D4FF !important;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}

/* Ensure the link text turns cyan on hover */
.blog-icon .btn-secondary:hover {
    color: #00D4FF !important;
}

/* Change icon colors to Cyan when the parent Share button is hovered */
.blog-btn-icon.btn-secondary:hover i,
.blog-btn-icon.btn-secondary:hover .text-primary {
    color: #00D4FF !important;
}
.blog-item span.bg-primary {
    border: 1px solid #00D4FF;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
}
/* The MukaTech Command Button Style */
.blog-icon .btn-secondary {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important; /* This is the secret to the 'High-End' look */
    font-weight: 700 !important;
    font-size: 0.8rem !important;
}
/* --- FINAL FOOTER QUICK LINKS FIX --- */

/* 1. Reset everything for footer links */
.footer-item .btn-link {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.7) !important;
    padding: 5px 0 !important;
    transition: 0.3s !important;
}

/* 2. KILL the "Crossing" line from the universal 'a::after' rule */
.footer-item .btn-link::after {
    display: none !important; 
    content: none !important;
}

/* 3. Re-enable the FontAwesome Arrow (only on the left) */
.footer-item .btn-link::before {
    content: "\f105" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 10px !important;
    color: var(--bs-secondary) !important;
    display: inline-block !important;
}

/* 4. The Hover: Clean Underline and Text Glow */
.footer-item .btn-link:hover {
    color: var(--bs-secondary) !important;
    padding-left: 10px !important;
    /* This creates the line strictly UNDER the text */
    box-shadow: 0 1px 0 0 var(--bs-secondary) !important; 
}

/* --- FOOTER CONTACT ICONS (Navy Circle, Cyan Icon) --- */

.footer-item .d-flex .btn-lg-square {
    background-color: var(--bs-primary) !important; /* Master Navy Circle */
    border: 1px solid var(--bs-secondary) !important; /* Cyan Border */
    color: var(--bs-secondary) !important;           /* Cyan Icon */
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: 0.4s;
}

.footer-item .d-flex .btn-lg-square:hover {
    background-color: var(--bs-secondary) !important; /* Fills Cyan on hover */
    color: var(--bs-primary) !important;              /* Icon turns Navy */
}

/* Fix for icons inside the square */
.footer-item .d-flex i {
    font-size: 18px !important;
    color: inherit !important; /* Follows the parent color logic above */
    margin: 0 !important;
}
/* About Page Breadcrumb/Header */
.page-header {
    background: linear-gradient(rgba(0, 41, 107, 0.9), rgba(0, 41, 107, 0.9)), url(../img/carousel-1.jpg) center center no-repeat !important;
    background-size: cover !important;
    border-bottom: 3px solid var(--bs-secondary) !important; /* The Cyan "Power Line" */
}

.page-header .breadcrumb-item a {
    color: var(--bs-secondary) !important;
}

.page-header h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}
/* MukaTech Value Cards */
.about-feature-item {
    background: #ffffff;
    border-left: 5px solid var(--bs-primary); /* Navy left border */
    transition: 0.5s;
    padding: 30px;
    border-radius: 0 10px 10px 0;
}

.about-feature-item:hover {
    border-left: 5px solid var(--bs-secondary); /* Flips to Cyan */
    background: rgba(0, 212, 255, 0.02); /* Very faint Cyan tint */
    transform: translateX(10px); /* Slides right slightly */
}

.about-feature-item i {
    color: var(--bs-secondary);
    font-size: 3rem;
    margin-bottom: 20px;
}
/* --- MUKATECH TOPBAR REFINEMENT --- */

.topbar {
    padding: 10px 0;
    background-color: var(--bs-primary) !important; /* Master Navy */
    border-bottom: 1px solid rgba(0, 212, 255, 0.2); /* Subtle Cyan Divider */
}

/* Style the Contact Icons */
.topbar i {
    color: var(--bs-secondary) !important; /* Electric Cyan Icons */
    margin-right: 8px;
}

/* Style the Social Media Buttons in the Topbar */
.topbar .btn-sm-square {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.topbar .btn-sm-square:hover {
    background-color: var(--bs-secondary) !important; /* Glows Cyan */
    color: var(--bs-primary) !important;              /* Icon turns Navy */
    border-color: var(--bs-secondary) !important;
    transform: scale(1.1);
}

/* Ensure text is bright and professional */
.topbar small, .topbar a {
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.topbar a:hover {
    color: var(--bs-secondary) !important; /* Text glows Cyan on hover */
}
/* Topbar Text & Icon Polish */
.top-info small {
    color: #ffffff !important; /* Makes Sandton & Email bright white */
    font-weight: 500;
}

.top-info i {
    color: #00D4FF !important; /* MukaTech Electric Cyan Icons */
}

/* Typewriter Styling in Topbar */
#note {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

#typewriter {
    color: #ffffff !important; /* The typing text will be White */
    border-right: 2px solid #00D4FF; /* The blinking cursor is Cyan */
}

/* LinkedIn Icon Power-Up */
.top-link .btn-sm-square {
    background-color: #00D4FF !important; /* Start as Cyan */
    transition: all 0.3s ease;
}

.top-link .btn-sm-square i {
    color: #00296B !important; /* Navy Icon on Cyan Background */
}

.top-link .btn-sm-square:hover {
    background-color: #ffffff !important; /* Flips to White on hover */
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
/* Force the Topbar Wrapper to be Master Navy */
.container-fluid.bg-primary {
    background-color: #00296B !important; /* MukaTech Master Navy */
    border-bottom: 1px solid rgba(0, 212, 255, 0.3); /* Thin Cyan accent line */
}

/* Ensure the topbar content area is transparent so the Navy shows through */
.topbar {
    background: transparent !important;
    width: 100%;
}

/* Clean up the text colors for the dark background */
.top-info small {
    color: #ffffff !important;
}

.top-info i {
    color: #00D4FF !important; /* Electric Cyan icons */
}
.contact-form input, .contact-form textarea {
    border: 1px solid rgba(0, 41, 107, 0.1);
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: #00D4FF !important; /* Glows Cyan when typing */
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}
.page-header {
    position: relative;
    background: url("../img/header-bg.jpg") center center no-repeat; /* Ensure the path is correct */
    background-size: cover;
    border-bottom: 4px solid #00D4FF !important;
    padding: 60px 0; /* Adjust height as needed */
}

/* This creates the Navy Tint without hiding the image */
.page-header::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 41, 107, 0.7); /* 0.7 transparency lets the image show through */
    z-index: 1;
}

/* This forces the text to sit on top of the tint */
.page-header .container {
    position: relative;
    z-index: 2;
}
/* Tech-Style Bullet Points */
.about-list i {
    color: #00D4FF !important;
    border: 1px solid rgba(0, 212, 255, 0.3);
    padding: 5px;
    border-radius: 4px;
    margin-right: 10px;
}
/* Ensure the 'Explore Hardware' button follows the MukaTech Power-Up */
.btn-secondary.rounded-pill {
    background-color: #00D4FF !important; /* Electric Cyan */
    border: 2px solid #00D4FF !important;
    color: #00296B !important;           /* Master Navy Text */
    font-weight: 700;
    transition: all 0.4s ease;
}

.btn-secondary.rounded-pill:hover {
    background-color: #00296B !important; /* Flip to Navy */
    color: #00D4FF !important;           /* Text turns Cyan */
    border: 2px solid #00D4FF !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.3) !important;
}
/* MukaTech Hardware Highlight Effect */
.hardware-glow {
    border: 3px solid #00D4FF !important; /* The solid Cyan line */
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6) !important; /* The blurred glow effect */
    transition: all 0.5s ease;
}

/* Optional: Make it pulse or glow brighter on hover */
.hardware-glow:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.9) !important;
    transform: scale(1.02);
}
/* The MukaTech Data Transfer Line */
.data-line {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #00D4FF, transparent);
    left: 20%; /* Adjust based on your image overlap */
    top: 50%;
    z-index: 0;
    animation: flow 2s linear infinite;
}

/* The Flow Animation */
@keyframes flow {
    0% { transform: translateY(-50px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(50px); opacity: 0; }
}
/* Technical Expertise Cards */
.technical-card {
    background: #ffffff !important;
    border-top: 5px solid var(--bs-primary) !important; /* Start with Master Navy */
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px; /* Forces all cards to be the same height */
}

.technical-card:hover {
    border-top-color: var(--bs-secondary) !important; /* Glows Cyan on hover */
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 41, 107, 0.1) !important;
}

/* Force Icons to stay Cyan unless hovered */
.technical-card i {
    color: var(--bs-secondary) !important;
    transition: 0.3s;
}

.technical-card:hover i {
    transform: scale(1.1);
}

/* --- MUKATECH ECOSYSTEM ALIGNMENT --- */

/* Force the Row to keep all children equal height */
.ecosystem-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* This is the secret for equal height */
}

/* Base Card Styling */
.eco-card {
    height: 100%; /* Fills the col height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to top but stays consistent */
    padding: 40px 30px !important;
    transition: all 0.4s ease;
    border-radius: 10px;
}

/* Ensure icons and titles are spaced identically */
.eco-card i {
    margin-bottom: 20px !important;
}

.eco-card h3 {
    font-weight: 700;
    margin-bottom: 15px;
}

/* Hover effect to maintain the tech feel */
.eco-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 41, 107, 0.15) !important;
}
/* --- ECOSYSTEM FINAL ALIGNMENT --- */

/* Force the row to stretch all children */
.ecosystem-row {
    display: flex !important;
    align-items: stretch !important;
}

/* Force cards to fill 100% of the column height */
.eco-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important; /* Pushes content to top and bottom */
}

/* KILL THE GREEN TICKS - Force MukaTech Cyan */
.eco-card i.fa-check, 
.eco-card .text-success {
    color: #00D4FF !important; /* Electric Cyan */
}

/* Ensure icons in the side cards match the middle */
.eco-card i.fa-3x {
    min-height: 60px;
    display: block;
}

/* --- MUKATECH IMPLEMENTATION TIMELINE --- */

/* The main container for the vertical line */
.timeline-item {
    position: relative;
    padding-left: 45px; /* Space for the line and dots */
    padding-bottom: 30px;
    border-left: 2px solid var(--bs-primary); /* The Navy Track */
    margin-left: 20px;
}

/* The Glowing Cyan Dots */
.timeline-item::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: -9px; /* Centers the dot on the line */
    top: 0;
    background-color: var(--bs-secondary); /* Electric Cyan */
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* The Week Label Styling */
.timeline-number {
    display: inline-block;
    background-color: var(--bs-secondary);
    color: var(--bs-primary);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Typography Polish */
.timeline-item h5 {
    color: var(--bs-primary);
    font-weight: 700;
    margin-bottom: 5px;
}

/* Animation on Hover */
.timeline-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 1);
    transition: 0.3s;
}

/* Last item fix: Removes the extra line at the bottom */
.timeline-item:last-child {
    border-left: 2px solid transparent !important;
}
/* Timeline Image Glow */
.col-lg-5 img {
    border-left: 5px solid var(--bs-secondary) !important; /* Cyan accent line */
    box-shadow: 0 10px 30px rgba(0, 41, 107, 0.2) !important;
    transition: 0.5s;
}

.col-lg-5 img:hover {
    transform: scale(1.02);
    border-left-width: 10px !important; /* Thickens on hover */
}
/* --- VENDOR LOGO POLISH --- */

.vendor-carousel img {
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    padding: 10px;
}

.vendor-carousel img:hover {
    filter: grayscale(0%) !important; /* Bring back original color */
    opacity: 1 !important;           /* Full brightness */
    transform: scale(1.1);            /* Subtle zoom */
    /* Add a faint cyan glow behind the logo */
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4)); 
}
/* --- VDI CORE LOGIC ICONS --- */

/* Style the Square around the icon */
.btn-sm-square.bg-secondary {
    background-color: var(--bs-secondary) !important; /* Electric Cyan */
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.3s all ease;
}

/* Style the Icon inside */
.btn-sm-square.bg-secondary i {
    color: var(--bs-primary) !important; /* MukaTech Navy */
    font-size: 1.2rem;
}

/* Hover Effect: Glow the node */
.d-flex.align-items-center:hover .btn-sm-square {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
    background-color: #ffffff !important; /* Flips to White on hover */
}

/* Typography polish for the labels */
.d-flex.align-items-center span {
    font-size: 0.95rem;
    color: #333;
}

.d-flex.align-items-center span strong {
    color: var(--bs-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}
/* VDI Architecture Image Frame */
.vdi-frame-container {
    border: 8px solid #ffffff;
    box-shadow: 0 20px 40px rgba(0, 41, 107, 0.1);
    position: relative;
}

/* The inner Cyan glowing rim */
.vdi-hud-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--bs-secondary);
    opacity: 0.4;
    pointer-events: none;
    z-index: 2;
}

/* Force the "Core Logic" border to Cyan */
.border-primary, 
.border-success, 
.border-start {
    border-color: #00D4FF !important; /* MukaTech Electric Cyan */
}

/* Ensure the subtitle text is also Cyan */
h5.text-primary, 
h5.text-secondary {
    color: #00D4FF !important;
}

/* --- MUKATECH 4-STEP MIGRATION CARDS --- */

/* Base Card Style */
.migration-card {
    transition: all 0.5s ease;
    border-top: 5px solid var(--bs-primary) !important; /* Starts Navy */
    background: #ffffff !important;
}

.migration-card:hover {
    transform: translateY(-12px);
    border-top-color: var(--bs-secondary) !important; /* Glows Cyan on hover */
    box-shadow: 0 15px 35px rgba(0, 212, 255, 0.2) !important;
}

/* Step Number Styling (The Circles) */
.step-number {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    background-color: var(--bs-primary) !important; /* Navy Circle */
    color: var(--bs-secondary) !important;        /* Cyan Number */
    transition: 0.4s;
    border: 2px solid transparent;
}

.migration-card:hover .step-number {
    background-color: var(--bs-secondary) !important; /* Flips to Cyan Circle */
    color: var(--bs-primary) !important;              /* Navy Number */
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
}

/* Typography Consistency */
.migration-card h4 {
    color: var(--bs-primary);
    font-weight: 700;
    margin-top: 10px;
}

/* --- COST ANALYSIS TABLE POLISH --- */

/* Highlight the MukaTech Column specifically */
.table td:last-child, .table th:last-child {
    background-color: rgba(0, 212, 255, 0.03); /* Faint Cyan tint */
    border-left: 1px solid rgba(0, 212, 255, 0.1);
}

/* Hover effect for the table rows */
.table-hover tbody tr:hover {
    background-color: rgba(0, 41, 107, 0.05) !important;
    transition: 0.3s;
}

/* Style the Loadshedding Alert */
.loadshedding-alert {
    background-color: #FFD700 !important; /* Industrial Gold */
    border-color: #00296B !important;     /* Navy Border */
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ROI Badge Polish */
.roi-badge {
    border-bottom: 5px solid #00D4FF !important;
    transition: 0.4s;
}

.roi-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 41, 107, 0.1) !important;
}

/* Force 'Primary' to be Master Navy */
.text-primary {
    color: #00296B !important;
}

/* Force 'Secondary' to be Electric Cyan */
.text-secondary {
    color: #00D4FF !important;
}

/* Specifically target the ROI highlight if you want it extra bold */
.roi-badge span {
    color: #00D4FF !important;
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
}

/* --- CONTACT PAGE ICON BLOCKS --- */

/* The Circle Container */
.btn-square.bg-primary {
    background-color: #00D4FF !important; /* Electric Cyan */
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Icon Glyph */
.btn-square.bg-primary i {
    color: #00296B !important; /* Master Navy */
    font-size: 1.5rem;
}

/* Hover Effect: The "Active Line" */
.d-flex.bg-light:hover {
    background-color: #ffffff !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 41, 107, 0.1) !important;
    border-bottom-color: #00D4FF !important; /* Entire row turns Cyan on hover */
}

.d-flex.bg-light:hover .btn-square {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.7);
}

/* Subtle Power-Up for your existing form */
.form-control.bg-light:focus, 
.form-select.bg-light:focus {
    background-color: #ffffff !important; /* Whiten on focus */
    border: 1px solid #00D4FF !important; /* Thin Cyan line */
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
    color: #00296B !important;
}

/* Make the placeholder text match the Navy theme */
.form-control::placeholder {
    color: #00296B !important;
    opacity: 0.4;
}

/* --- FOOTER LINKEDIN ICON POLISH --- */

/* The Footer Social Button Base */
.footer-social-link {
    width: 45px;
    height: 45px;
    background-color: #00D4FF !important; /* Electric Cyan */
    color: #00296B !important;           /* Master Navy Glyph */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.4s ease;
    text-decoration: none;
    font-size: 1.2rem;
}

/* Hover State: The Inversion */
.footer-social-link:hover {
    background-color: #ffffff !important;
    color: #00D4FF !important;
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
}

/* --- HARDWARE SPEC DASHBOARD --- */

.hw-specs {
    background: #ffffff;
    border-radius: 15px;
    border-left: 5px solid var(--bs-secondary); /* Electric Cyan Accent */
    box-shadow: 0 10px 30px rgba(0, 41, 107, 0.08);
}

.hw-specs h3 {
    color: var(--bs-primary);
    font-weight: 800;
}

/* Port Badges - The "Circuit Look" */
.port-badge {
    background-color: #f8f9fa;
    color: var(--bs-primary);
    border: 1px solid rgba(0, 41, 107, 0.1);
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 5px; /* Adds the missing space */
    display: inline-block;
    transition: all 0.3s ease;
}

.port-badge:hover {
    background-color: var(--bs-secondary); /* Cyan on hover */
    color: var(--bs-primary);
    border-color: var(--bs-secondary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

/* Fix for the flex container spacing */
.badge-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Modern way to handle spacing between wrapped items */
}

/* --- PRODUCT SPEC BADGES (Specs.html) --- */

/* Override the bg-dark for MukaTech specs */
.port-badge.bg-dark {
    background-color: #00296B !important; /* MukaTech Master Navy */
    color: #00D4FF !important;           /* Electric Cyan Text */
    border: 1px solid #00D4FF;           /* Cyan Rim */
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 15px;
    box-shadow: 0 4px 10px rgba(0, 41, 107, 0.2);
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Optional: Subtle glow on the product card */
.col-lg-5 .p-4.rounded {
    border: 1px solid rgba(0, 212, 255, 0.2);
    transition: 0.4s;
}

.col-lg-5 .p-4.rounded:hover {
    background: #ffffff !important;
    border-color: #00D4FF;
    box-shadow: 0 15px 30px rgba(0, 41, 107, 0.1) !important;
}

/* --- SPECS TABLE & I/O BLOCKS --- */

/* Professional Table Header */
.table thead.table-dark th {
    background-color: #00296B !important; /* MukaTech Navy */
    color: #00D4FF !important;           /* Cyan Text */
    border: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Row Hover Effect */
.table-hover tbody tr:hover {
    background-color: rgba(0, 212, 255, 0.05) !important;
}

/* I/O Interface Boxes */
.io-box {
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

.io-box:hover {
    border-color: #00D4FF !important;
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.io-box i {
    transition: 0.4s;
}

.io-box:hover i {
    transform: scale(1.2);
    color: #ffffff !important;
}

/* --- MANAGEMENT PAGE SPECIFICS --- */

/* Dashboard Image Hover Effect */
.img-container {
    background: #00296B; /* Background for images during loading */
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 41, 107, 0.15);
}

.img-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0, 212, 255, 0.1), transparent);
    pointer-events: none;
}

/* Management Action Icons */
.btn-square.bg-primary {
    background-color: #00D4FF !important; /* Electric Cyan Circle */
}

.btn-square.bg-primary i {
    color: #00296B !important; /* Master Navy Icon */
}

/* The Enterprise CTA Gradient */
.management-cta {
    background: linear-gradient(135deg, #00296B 0%, #001535 100%) !important;
    border-left: 8px solid #00D4FF;
}

.energy-saver-tag {
    background: rgba(0, 212, 255, 0.1);
    border: 1px dashed #00D4FF;
    color: #00296B;
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}
.energy-saver-tag i {
    animation: pulse-green 1.5s infinite;
    color: #28a745;
}
@keyframes pulse-green {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.footer .fa-bolt {
    animation: bolt-glow 2s ease-in-out infinite;
}

@keyframes bolt-glow {
    0% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 10px #00D4FF; }
    100% { opacity: 0.5; transform: scale(1); }
}

.footer .rounded-pill.border-secondary {
    border-style: dashed !important; /* Makes it look like a technical 'cut-out' */
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* --- BLOG & COMPARISON SLIDER --- */
.comparison-slider {
    position: relative;
    width: 100%;
    height: 450px; /* Fixed height for consistency */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.comparison-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images don't stretch */
    display: block;
}

.img-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Starting position */
    height: 100%;
    overflow: hidden;
    border-right: 3px solid #00D1FF;
    z-index: 2;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #16243d;
    color: #00D1FF;
    border: 2px solid #00D1FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.slider-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: ew-resize;
    z-index: 4;
}

/* Energy Estimator sidebar focus */
.sticky-sidebar {
    position: sticky;
    top: 100px;
}

.comparison-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
    letter-spacing: 1px;
}

.badge.bg-success {
    background-color: #28a745 !important;
    letter-spacing: 1px;
}

/* Make the labels feel like part of the slider UI */
.bg-light.border {
    border-color: rgba(0, 209, 255, 0.2) !important;
    background-color: #f8f9fa !important;
}

/* The Slider Handle & Border */
.img-after {
    border-left: 3px solid var(--muka-cyan) !important;
}

.slider-handle {
    background: var(--muka-navy) !important;
    color: var(--muka-cyan) !important;
    border: 2px solid var(--muka-cyan) !important;
}

/* The Status Badges */
.bg-danger {
    background-color: var(--muka-danger) !important;
}

.bg-success {
    background-color: var(--muka-success) !important;
}

/* The Comparison Cards (The static ones below the slider) */
.border-danger {
    border-color: var(--muka-danger) !important;
}

.border-success {
    border-color: var(--muka-success) !important;
}

/* Blog Card Enhancements */
.blog-item {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05); /* Soften the card edge */
}

.blog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(22, 36, 61, 0.1) !important;
}

/* Custom Button Hover */
.blog-item .btn-outline-primary {
    border-color: var(--muka-navy);
    color: var(--muka-navy);
    font-weight: 600;
    transition: 0.3s;
}

.blog-item:hover .btn-outline-primary {
    background-color: var(--muka-cyan);
    border-color: var(--muka-cyan);
    color: var(--muka-navy); /* Dark text on bright cyan is very readable */
}

/* Vertical Accent Borders */
.border-cyan { border-left: 5px solid var(--muka-cyan) !important; }
.border-navy { border-left: 5px solid var(--muka-navy) !important; }

/* Case Study Link Hover Effects */
.case-study-list li {
    transition: all 0.3s ease;
}

.case-study-link {
    display: block;
    padding: 5px 0;
    transition: all 0.3s ease;
}

.case-study-link:hover {
    color: var(--muka-cyan) !important; /* Changes text to Cyan */
    padding-left: 10px; /* Subtle slide effect */
}

.case-study-link i {
    transition: transform 0.3s ease;
}

.case-study-link:hover i {
    color: var(--muka-cyan) !important;
    transform: translateX(5px); /* Arrow moves forward */
}

/* Energy Calculator Button Customization */
.btn-secondary {
    background-color: var(--muka-cyan) !important;
    border-color: var(--muka-cyan) !important;
    color: #16243d !important; /* Navy text for readability */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #16243d !important; /* Navy background */
    border-color: #16243d !important;
    color: var(--muka-cyan) !important; /* Cyan text */
    box-shadow: 0 5px 15px rgba(0, 209, 255, 0.3);
    transform: translateY(-2px);
}

/* Fix for the icon inside the button */
.btn-secondary:hover i {
    animation: fa-spin 2s infinite linear;
}

/* Social Link Hover Sync */
.footer-social-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #fff;
    transition: 0.3s;
}

.footer-social-link:hover {
    background: var(--muka-cyan);
    color: var(--muka-navy) !important;
    border-color: var(--muka-cyan);
    transform: translateY(-3px);
}

/* Remove the line-through from social icons */
.footer-social-link, 
.footer-social-link i,
.hightech-link a {
    text-decoration: none !important;
    border-bottom: none !important; /* This removes the line if it's a border */
    box-shadow: none !important;
}

/* Ensure the hover doesn't trigger a line either */
.footer-social-link:hover, 
.hightech-link a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* FINAL RESET FOR SOCIAL ICONS */
.footer-social-link {
    display: flex !important; /* Forces the link to be a box, not text */
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important; /* Kills the underline */
    border-bottom: none !important;   /* Kills any border-line */
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    transition: 0.3s;
}

/* Ensure no underline appears on hover */
.footer-social-link:hover {
    text-decoration: none !important;
    background: var(--muka-cyan);
    border-color: var(--muka-cyan);
    transform: translateY(-3px);
}

/* Specifically target the icon inside to make sure it doesn't have a line */
.footer-social-link i {
    text-decoration: none !important;
    border: none !important;
    color: #fff;
    font-size: 16px;
}

.footer-social-link:hover i {
    color: var(--muka-navy) !important;
}

/* This kills any 'ghost' lines from the template's pseudo-elements */
.footer-social-link::after, 
.footer-social-link::before {
    display: none !important;
    content: "" !important;
}

/* Topbar Link & Icon Reset */
.top-bar a, 
.top-bar a:hover, 
.top-bar small, 
.top-bar i {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

/* If you have social icons in the topbar, make them clean circles too */
.top-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: 0.3s;
}

.top-link:hover {
    color: var(--muka-cyan) !important;
    text-decoration: none !important;
}

/* Ensure the contact info (Phone/Email) doesn't have a line */
.top-bar .text-white-50 {
    text-decoration: none !important;
}

/* Headquarters Icon Styling */
.hq-icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 209, 255, 0.1); /* Light Cyan tint */
    border: 2px solid var(--muka-cyan);
    border-radius: 15px; /* Modern rounded square look */
    color: var(--muka-navy);
    font-size: 24px;
    transition: all 0.3s ease;
    margin-right: 20px;
}

/* Hover effect for the whole contact row */
.hq-contact-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    transition: 0.3s;
    text-decoration: none !important;
}

.hq-contact-item:hover {
    background: #f8f9fa;
    transform: translateX(10px);
}

.hq-contact-item:hover .hq-icon-box {
    background: var(--muka-navy);
    color: var(--muka-cyan);
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 209, 255, 0.3);
}

/* Ensure no underlines on text links */
.hq-contact-item h5, .hq-contact-item p {
    margin-bottom: 0;
    text-decoration: none !important;
}

/* Remove default link highlights */
.hq-contact-item {
    background: transparent !important;
    color: inherit;
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Prevents layout jump on hover */
}

/* Fix for the 'Blue Light' / Focus state */
.hq-contact-item:focus, 
.hq-contact-item:active,
.hq-contact-item:visited {
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
    background: transparent !important;
}

/* Hover State - Synchronized for all 3 */
.hq-contact-item:hover {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(22, 36, 61, 0.08) !important;
    transform: translateX(5px);
    border: 1px solid rgba(0, 209, 255, 0.1);
}

/* Icon Box consistency */
.hq-icon-box {
    width: 55px;
    height: 55px;
    min-width: 55px; /* Prevents squishing */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa; /* Light grey base */
    border: 1px solid #eee;
    border-radius: 12px;
    color: #16243d; /* Navy */
    font-size: 20px;
    margin-right: 20px;
    transition: 0.3s;
}

.hq-contact-item:hover .hq-icon-box {
    background: #16243d;
    color: #00D1FF; /* MukaTech Cyan */
    border-color: #16243d;
}

/* Contact Section Card Styling */
.hq-contact-item {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #ffffff !important; /* Forces cards to stay white */
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.hq-contact-item:hover {
    transform: translateY(-5px);
    border-color: var(--muka-cyan);
    box-shadow: 0 15px 30px rgba(22, 36, 61, 0.1) !important;
}

.hq-icon-box {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16243d;
    color: #00D1FF;
    border-radius: 8px;
    margin-right: 15px;
    font-size: 18px;
}

.hq-contact-item:hover .hq-icon-box {
    background: var(--muka-cyan);
    color: #16243d;
}

/* Make carousel buttons clickable */
.carousel-caption {
    z-index: 10 !important; /* Pushes the whole text box forward */
}

.carousel-caption a, 
.carousel-caption .btn {
    position: relative;
    z-index: 20 !important; /* Specifically forces the button to the front */
    pointer-events: auto !important; /* Ensures the mouse can 'see' it */
}

/* Optional: Shrink the 'next/prev' touch areas so they don't overlap the center */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Reduces the invisible side-bars from 15% to 5% */
}

.carousel-caption .btn {
    transition: all 0.5s ease;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.carousel-caption .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Stop the spinning and fix the look */
.back-to-top {
    position: fixed !important;
    display: flex !important; /* Forces it to show for testing */
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    z-index: 99999 !important;
    background: #00D1FF !important; /* MukaTech Cyan */
    border-radius: 50%;
    transition: all 0.4s ease;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* KILLS THE SPINNING ANIMATION */
.back-to-top i {
    animation: none !important; 
    transform: none !important;
    transition: none !important;
    color: #16243d !important; /* Navy Arrow */
    font-size: 20px;
}

.back-to-top:hover {
    background: #16243d !important;
    transform: translateY(-5px) !important; /* Moves up slightly, doesn't spin */
}

.back-to-top:hover i {
    color: #00D1FF !important;
}




/* KILL global lines on all buttons and standard links */
.btn, 
.carousel-caption a, 
a.btn
 {
    display: inline-flex !important; /* Forces the box model to fix vertical alignment */
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    
}

/* Specifically target the 'Ghost Line' (::after) that creates the strike-through */
.btn::after, 
.btn::before,
.footer a::after,
.footer a::before,
.quick-links a::after,
.quick-links a::before
 {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remove the 'Green/Blue Glow' focus ring from all buttons */
.btn:focus, 
.btn:active, 
.btn-primary:focus, 
.btn-secondary:focus {
    box-shadow: none !important;
    outline: none !important;
}











/* 1. Target the Topbar container and its children specifically */
.topbar, 
.top-info, 
.top-info small, 
.top-info i, 
.top-link a {
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* 2. Target the LinkedIn circle specifically to stop the 'chopping' */
.top-link .btn-sm-square {
    border: 1px solid var(--bs-secondary) !important; /* Restore the border to keep it round */
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}





/* Remove the stray blue box/line from Navbar links */
.navbar-nav .nav-link::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Ensure the 'Resources' dropdown toggle is clean */
.nav-item.dropdown .dropdown-toggle::after {
    display: none !important;
}




/* Restore the LinkedIn and Social Circle shapes */
.topbar .top-link a.btn-sm-square {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important; /* This stops the bottom chop */
}




/* Perfect centering for the Back-to-Top arrow */
.back-to-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important; /* Prevents text-line height from pushing the icon */
}

.back-to-top i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
}



/* 1. Remove the light blue line above the button on hover */
.navbar .navbar-nav .nav-item .nav-link::before,
.navbar .navbar-nav .nav-item:hover .nav-link::before {
    display: none !important;
    content: none !important;
    border-top: none !important; /* Kills the blue line */
    height: 0 !important;
}

.navbar .nav-link.dropdown-toggle::after {
    display: inline-block !important;    
    content: "\f107" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-left: 4px !important; /* Pulls arrow to text */
    padding-right: 15px !important; /* Pushes 'Contact' away */
    vertical-align: 1px !important;
    color: inherit !important; 
    border: none !important;
}

/* 3. Ensure the hover state doesn't bring back the 'before' element */
.navbar .nav-item:hover .nav-link.dropdown-toggle::before {
    display: none !important;
    content: none !important;

    }

    /* 1. Pull the arrow closer to the word 'Resources' */
.navbar .nav-link.dropdown-toggle::after {
    margin-left: 10px !important;  /* Reduced from 8px or 10px */
    padding-right: 0 !important;  /* Ensures no extra space inside the link after the arrow */
    vertical-align: 0px !important;
}

/* 2. Push the 'Contact' menu (and all other menu items) further away */
.navbar .navbar-nav .nav-item {
    margin-right: 15px !important; /* Creates a clear gap between the items */
}

/* 3. Specifically for the Resources dropdown container */
.nav-item.dropdown {
    margin-right: 25px !important; /* Extra breathing room specifically after the arrow */
}

/* 4. Reset padding on the link itself so the arrow doesn't float */
.navbar .navbar-nav .nav-link {
    padding-right: 5px !important; /* Tightens the space after the arrow */
    padding-left: 15px !important; /* Keeps the space before the word */
}



/* Case Study Table Styling */
.table thead.bg-primary {
    background-color: var(--bs-primary) !important;
}

.table-bordered {
    border: 1px solid #dee2e6 !important;
}

.table tbody tr:hover {
    background-color: rgba(38, 212, 140, 0.05) !important; /* Very light Cyan tint on hover */
    transition: 0.3s;
}

.table td.fw-bold {
    color: var(--bs-primary);
    background-color: #f8f9fa;
}



/* Smooth hover effect for benefit cards */
.benefit-card {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.benefit-card:hover {
    transform: translateY(-10px); /* Lifts the card up */
    background-color: #ffffff !important; /* Brightens background on hover */
    box-shadow: 0 15px 30px rgba(0, 41, 102, 0.1); /* Soft shadow for the Navy side */
}

/* Custom glow for the IT Administrator card using MukaTech Cyan */
.admin-card:hover {
    box-shadow: 0 15px 30px rgba(1, 29, 122, 0.979) !important; 
}



html {
    scroll-behavior: smooth;
    
}




.navbar-brand .logo-main {
    height: 80px;    /* Adjust this value to change the logo size */
    width: auto;      /* Keeps the proportions correct */
    display: block;
    max-width: 100%;  /* Ensures it doesn't overflow on small screens */
}

/* Optional: Make it slightly smaller on mobile phones */
@media (max-width: 768px) {
    .navbar-brand .logo-main {
        height: 45px;
    }
}




/*** Blog Start ***/
.blog-item .blog-btn {
    z-index: 2;
}

.blog-btn-icon {
    height: 50px;
    min-width: 140px; /* This ensures it matches the width of the 'Read More' button */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important; /* Adjust horizontal padding for better fit */
}

/* Base state for the social icons */
.blog-btn-icon .blog-icon-2 {
    display: flex;
    position: absolute;
    top: 50%;
    left: -150%; /* Start further back to ensure it's hidden */
    transform: translateY(-50%);
    transition: 0.8s ease-in-out;
    width: 100%;
    justify-content: center;
}

/* Hover state: Slide to perfect center */
.blog-btn-icon:hover .blog-icon-2 {
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

/* Keep icons straight */
.blog-icon-2 a, 
.blog-icon-2 i {
    transform: none !important;
    animation: none !important;
}

/* Base state for the 'Share' text */
.blog-icon-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.8s ease-in-out;
    white-space: nowrap; /* Prevents the text from wrapping to a second line */
    width: 100%;
    text-align: center;
}

/* Hover state: Slide 'Share' text out */
.blog-btn-icon:hover .blog-icon-1 {
    left: 250%; 
}
/*** Blog End ***/





/* Enable Hover for Dropdowns on Desktop */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Remove gap so it doesn't close when moving mouse down */
        animation: fadeIn 0.3s; /* Optional: smooth fade-in */
    }
}

/* Optional: Smooth Fade Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}






/* Quick Links Hover Reaction */
.quick-links a, 
.footer a {
    transition: all 0.3s ease; /* Ensures the movement is smooth, not jumpy */
    display: inline-block; /* Required for transform to work correctly */
}

.quick-links a:hover, 
.footer a:hover {
    padding-left: 8px !important; /* Physically pushes the text to the right */
    color: var(--bs-secondary) !important; /* Keeps your branding color */
    transform: translateX(5px); /* Adds a smooth hardware-accelerated slide */
}

/* Optional: Add a small chevron/arrow that appears on hover */
.quick-links a::before {
    content: '\f105'; /* FontAwesome Chevron Right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: -10px;
    opacity: 0;
    transition: all 0.3s ease;
}

.quick-links a:hover::before {
    margin-right: 8px;
    opacity: 1;
}



/* 2. PROVISION: The Cyan Triangle (Heater Style) */
@media (min-width: 992px) {
    /* Target only the active and hovered links in the top menu */
    .navbar-nav .nav-link {
        position: relative;
        text-decoration: none !important;
    }

    .navbar-nav .nav-link:hover::before {
        content: "" !important;
        position: absolute;
        bottom: -10px; /* Positions it below the text like image_d68e59.jpg */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
   @media (min-width: 992px) {
    .navbar-nav .nav-link {
        position: relative;
        text-decoration: none !important;
    }

    /* Target the triangle indicator */
    .navbar-nav .nav-link:hover::before {
        content: "" !important;
        position: absolute;
        
        /* INCREASED GAP: Move it down so it clears the dropdown edge */
        bottom: -15px; 
        
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #00D4FF; 
        
        /* PRIORITY: Force it to stay visible above the dropdown menu background */
        z-index: 1050 !important; 
        display: block !important;
    }
}     border-right: 7px solid transparent;
        border-bottom: 7px solid #00D4FF; /* MukaTech Cyan */
        display: block !important;
    }
}