.topbar {
    background: linear-gradient(135deg, #020617, #0b1220);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13.5px;
    letter-spacing: 0.3px;
}

/* Force all text visible */
.topbar,
.topbar a,
.topbar small,
.topbar span {
    color: #ffffff !important;
}

/* Icons default (white) */
.topbar i {
    color: #ffffff !important;
    transition: all 0.3s ease;
}

/* Divider lines */
.topbar .border-end {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Hover color (same golden/yellow tone as screenshot) */
.topbar a:hover,
.topbar a:hover i {
    color: #fbbf24 !important;
}

/* Smooth underline hover */
.topbar a {
    position: relative;
    text-decoration: none;
}

.topbar a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: #fbbf24;
    transition: width 0.3s ease;
}

.topbar a:hover::after {
    width: 100%;
}

/* Social icons hover */
.topbar .btn:hover i {
    transform: scale(1.15);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

/* Language dropdown text */
.topbar .dropdown-toggle {
    font-weight: 500;
}

/* Dropdown menu */
.topbar .dropdown-menu {
    background-color: #020617;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

/* Dropdown items */
.topbar .dropdown-item {
    color: #060101;
    padding: 10px 18px;
    transition: all 0.25s ease;
}

.topbar .dropdown-item:hover {
    background-color: rgba(6, 4, 1, 0.15);
    color: #fbbf24;
}

/* Neutralize Bootstrap text utilities */
.topbar .text-muted,
.topbar .text-dark {
    color: #ffffff !important;
}

/* =================================
   Language Dropdown – Premium Light
================================= */
/* =================================
   Language Toggle – Hover Gold
================================= */

/* Default color (white) */
.topbar .dropdown-toggle,
.topbar .dropdown-toggle small,
.topbar .dropdown-toggle i {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* Hover gold */
.topbar .dropdown-toggle:hover,
.topbar .dropdown-toggle:hover small,
.topbar .dropdown-toggle:hover i {
    color: #fbbf24 !important;
}

/* Keep gold when dropdown is open */
.topbar .dropdown.show .dropdown-toggle,
.topbar .dropdown.show .dropdown-toggle small,
.topbar .dropdown.show .dropdown-toggle i {
    color: #fbbf24 !important;
}

/* Dropdown container */
.topbar .dropdown-menu {
    background-color: #f3ebeb !important;
    border: none;
    border-radius: 14px;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

/* Language items */
.topbar .dropdown-item {
    color: #0d0101 !important;
    font-weight: 500;
    padding: 12px 22px;
    transition: all 0.25s ease;
}

/* Hover effect – golden yellow */
.topbar .dropdown-item:hover {
    background-color: rgba(244, 242, 237, 0.18);
    color: #110c02 !important;
}

/* Remove Bootstrap active blue */
.topbar .dropdown-item:active {
    background-color: rgba(251, 191, 36, 0.25) !important;
    color: #fbbf24 !important;
}

/* Smooth dropdown animation */
.topbar .dropdown-menu.show {
    animation: dropdownFade 0.25s ease forwards;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =================================
   Language Selector – Interactive Arrow
================================= */

/* Hide Bootstrap default caret */
.topbar .dropdown-toggle::after {
    display: none;
}

/* Add custom arrow */
.topbar .dropdown-toggle {
    position: relative;
    padding-right: 22px;
}

/* Arrow icon */
.topbar .dropdown-toggle::before {
    content: "▾";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 14px;
    color: #ffffff;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Arrow hover */
.topbar .dropdown-toggle:hover::before {
    color: #fbbf24;
}

/* Arrow rotate when open */
.topbar .dropdown.show .dropdown-toggle::before {
    transform: translateY(-50%) rotate(180deg);
    color: #fbbf24;
}

/* ================================
   Navbar – Professional & Premium
================================ */

/* Navbar container */
.nav-bar {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Brand logo sizing */
.navbar-brand img {
    max-height: 42px;
}

/* Nav links */
.navbar .nav-link {
    color: #020617;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0 12px;
    padding: 8px 14px; /* REQUIRED for background hover */
    position: relative;
    border-radius: 10px; /* soft pill */
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover → lavish bright gold background */
.navbar .nav-link:hover {
    color: #020617;
background: linear-gradient(
    135deg,
    rgba(211, 5, 170, 0.35),   /* dark antique gold */
    rgba(218, 165, 32, 0.22)   /* muted royal gold */
);
}

/* Underline animation */
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #fbbf24;
    transition: width 0.3s ease;
}

.navbar .nav-link:hover::after {
    width: calc(100% - 28px);
}

/* Active link */
.navbar .nav-link.active {
    color: #020617;
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.4),
        rgba(251, 191, 36, 0.2)
    );
}

.navbar .nav-link.active::after {
    width: calc(100% - 28px);
}

/* Navbar toggler (mobile) */
.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler .fa-bars {
    color: #020617;
    font-size: 20px;
}

/* ================================
   Navbar Buttons (Sign up / Login)
================================ */

.nav-btn .btn {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Button hover refinement */
.nav-btn .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* =================================
   Hero / Carousel – Professional Text
================================= */

.hero_sec {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Main heading */
.hero_sec h1 {
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: #020617;
}

/* Sub text */
.hero_sec p,
.hero_sec .subc {
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    font-weight: 400;
}


/* ===== HERO ICON ONLY HOVER ===== */

.hero_sec .form_field i {
    transition: transform 0.25s ease, color 0.25s ease;
    color: #b45309; /* gold */
}

/* Hover */
.hero_sec .form_field:hover i {
    color: #92400e;
    transform: scale(1.2);
}

/* Focus (when input is active) */
.hero_sec .form_field:focus-within i {
    color: #78350f;
    transform: scale(1.25);
}




/* service section */
.service .service-item .service-img::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(
        135deg,
        rgba(255, 90, 170, 0.35),
        rgba(255, 140, 200, 0.18),
        rgba(255, 200, 230, 0.12)
    );
    transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}




.service .service-item .service-content::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(
        135deg,
        #050b1e,
        #0b1f4b,
        #123b8a
    );
    transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.bg-new {
    background: linear-gradient(
        135deg,
        #081d60,
        #0d2b6b,
        #153f9b
    );
}

.bg-new h1,
.bg-new p {
    color: #ffffff; /* White */
}

/* Keep the rest unchanged */
.bg-new .h4,
.bg-new .small,
.bg-new span {
    color: #0b0101; /* Black */
}



.bg-new .blog-item:hover {
    box-shadow: 0 25px 60px rgba(11, 31, 75, 0.45);
    transform: translateY(-6px);
}

/* ===== Secure Job Section Background ===== */

.securejob {
    background: linear-gradient(
        135deg,
         rgba(211, 5, 170, 0.35),   /* soft pink */
       rgba(218, 165, 32, 0.22)  /* bluish lavender */
    );
    border-radius: 20px;    
}

/* Optional: better spacing feel */
.securejob .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ===== TESTIMONIAL DARK CARD ===== */

.testimonial-item {
    background-color: #6e031b !important;
}

/* All text white */
.testimonial-item,
.testimonial-item h4,
.testimonial-item h6,
.testimonial-item p,
.testimonial-item strong {
    color: #ffffff !important;
}

/* Golden stars */
.testimonial-item .fa-star {
    color: #facc15 !important;
}


/* ===== DOWNLOAD APP SECTION DARK BACKGROUND ===== */

.download-app {
    background-color: #6958c9 !important; /* dark slate blue */
    background-image: none !important;
}

/* Ensure text stays readable */
.download-app h1,
.download-app p {
    color: #ffffff;
}

/* Optional: slightly dim background shapes */
.download-app .homec-shape img {
    opacity: 0.15;
}

/* ===== FLOATING APP IMAGE ===== */

.download-app__img img {
    animation: floatApp 4s ease-in-out infinite;
}

/* Keyframes */
@keyframes floatApp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-18px);
    }
    100% {
        transform: translateY(0);
    }
}