/* Theme customization for Nexlotech */

/* Global */
body {
    font-family: 'Lato', sans-serif;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.text-primary {
    color: #1a3c87 !important;
}

.btn-primary {
    background-color: #1a3c87;
    border-color: #1a3c87;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #132d66;
    border-color: #132d66;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 60, 135, 0.2);
}

/* Navbar Customization */
.navbar-nav .nav-link {
    color: #1e1e1e !important;
    font-size: 0.95rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: #1a3c87 !important;
}

/* Dropdown specific styling */
.dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 10px;
    /* Spacing from parent */
    min-width: 220px;
}

.dropdown-item {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    color: #4a4a4a;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f8f9fa;
    color: #1a3c87;
    padding-left: 1.8rem;
    /* Subtle slide effect */
}

/* Multi-level Dropdown Support (Desktop) */
/* Fix Dropdown Arrows globally */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: middle;
    /* Better align with text */
    content: "\f107";
    /* Font Awesome Chevron Down (light) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    border: none !important;
    /* Remove Bootstrap triangle */
    font-size: 0.75rem;
    /* Smaller, cleaner size */
}

/* Multi-level Dropdown Support and Fixes */
@media (min-width: 992px) {

    /* Top level hover */
    .navbar-nav>.dropdown:hover>.dropdown-menu {
        display: block;
        animation: slideUp 0.15s ease-out;
        margin-top: 0;
        /* Attach to navbar */
    }

    /* Nested Dropdown hover */
    .dropdown-menu .dropend:hover>.dropdown-menu {
        display: block;
        top: 0;
        left: 100%;
        margin-left: 0;
        /* Close gap */
        animation: fadeIn 0.15s ease-out;
    }

    /* Rotation for nested arrow */
    .dropdown-menu .dropdown-toggle::after {
        content: "\f105";
        /* Font Awesome Chevron Right */
        transform: none;
        /* Reset the rotate since we changed the icon */
        float: right;
        /* Push to right edge if flex */
        content: "\f105";
        font-family: "Font Awesome 6 Free";
    }

    .dropdown-menu .dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        /* Ensure full width for Flexbox spread */
    }
}

/* Mobile/Tablet Multi-level Fixes */
@media (max-width: 991.98px) {

    /* Reset dropend positioning to stack vertically */
    .dropdown-menu .dropend .dropdown-menu {
        position: static !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        /* Integrate with parent */
        border: none !important;
        box-shadow: none !important;
        padding-left: 20px;
        /* Indent nested items */
        padding-top: 0;
        display: none;
        /* Hidden by default, toggled via JS/Bootstrap standard */
    }

    /* Force display when parent is open/active */
    .dropdown-menu .dropend.show>.dropdown-menu {
        display: block !important;
    }

    /* Remove right arrow for nested items on mobile, use down arrow */
    .dropdown-menu .dropdown-toggle::after {
        content: "\f107" !important;
        /* Font Awesome Chevron Down */
        float: right;
    }

    /* Ensure links wrap properly */
    .navbar-nav .dropdown-menu {
        border: none;
        padding-top: 0;
    }
}

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* WhatsApp Icon Pulse */
.whatsapp-icon {
    transition: transform 0.3s ease;
}

.whatsapp-icon:hover {
    transform: scale(1.1);
}

/* === Existing Theme Styles (Hero, Cards, etc) === */

/* Hover effects */
.transform-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.transform-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

/* Destination Cards */
.destination-card img {
    transition: transform 0.5s ease;
}

.destination-card:hover img {
    transform: scale(1.1);
}

/* Service Cards */
.service-card {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.service-card .icon-box {
    transition: all 0.3s ease;
}

.service-card:hover .icon-box {
    background-color: #1a3c87 !important;
    /* Update variable usage for existing elements too */
    color: white !important;
}

/* Grayscale Partners */
.grayscale-logos img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.grayscale-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Testimonials */
.testimonials-section blockquote {
    font-size: 1.25rem;
}

/* Academy Section */
.academy-section .badge {
    font-weight: 500;
    font-size: 1rem;
}

/* CTA Redesign */
.cta-card {
    border-radius: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.cta-image {
    max-height: 350px;
}

@media (min-width: 992px) {
    .cta-image {
        margin-top: -80px;
        transform: scale(1.1);
        transform-origin: bottom;
        /* Optional: make it slightly larger to pop */
    }
}

@media (max-width: 991.98px) {
    .cta-card {
        text-align: center;
        padding-right: 1.5rem !important;
        /* Reset padding for mobile */
    }

    .cta-image {
        max-height: 250px;
        margin-top: 2rem;
    }
}