/* Custom CSS for Your Landing Page */

/* Import Google Fonts */
body {
    font-family: 'Poppins', sans-serif;
    color: #333; /* Default text color */
}

/* --- Typography & Colors --- */
.hero-title, .section-title {
    color: #212529; /* Darker heading color */
}
.hero-title-1 {
    color: rgba(255, 255, 255, 1);
    font-size: 4rem !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.6);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.hero-subtitle {
    color: #555;
}

.custom-btn-gradient {
    background: linear-gradient(to right, #007bff, #6f42c1); /* Blue to Purple */
    border: none;
    transition: all 0.3s ease;
}

.custom-btn-gradient:hover {
    background: linear-gradient(to right, #6f42c1, #007bff);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-btn-gradient-outline {
    background: transparent;
    border: 2px solid;
    border-image: linear-gradient(to right, #007bff, #6f42c1) 1;
    color: #fff;
    transition: all 0.3s ease;
}

.custom-btn-gradient-outline:hover {
    background: linear-gradient(to right, #007bff, #6f42c1);
    color: #fff;
    border: 2px solid transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-btn-gradient-outline-light {
    background: transparent;
    border: 2px solid;
    border-image: linear-gradient(to right, #ffffff, #ddd) 1; /* White to light gray for outline */
    color: #fff;
    transition: all 0.3s ease;
}

.custom-btn-gradient-outline-light:hover {
    background: #fff;
    color: #007bff; /* Change color on hover */
    border: 2px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-btn-gradient-reverse {
    background: linear-gradient(to right, #6f42c1, #007bff); /* Purple to Blue */
    border: none;
    transition: all 0.3s ease;
}

.custom-btn-gradient-reverse:hover {
    /* background: linear-gradient(to right, #007bff, #6f42c1); */
	background : #4b0082;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* --- Logo Styling --- */
.navbar-logo {
    height: 80px; /* Adjust as needed */
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* Soft shadow for depth */
}

.hero-logo {
    height: 150px; /* Larger for hero section */
    width: auto;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4)); /* More pronounced shadow */
    animation: bounceIn 1s ease-out; /* Simple animation */
}

.footer-logo {
    height: 80px;
    width: auto;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}

.logo-text, .footer-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    /* You can try to apply a gradient here if you want text to match logo */
    /* background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}


/* --- Navigation Bar (UPDATED) --- */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: #ffffff !important;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #333 !important;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #007bff !important; /* Bootstrap primary color */
}

.navbar-brand .logo-text {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); /* Rainbow gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* Dropdown Menu Styling */
.dropdown-menu {
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    background-color: #fff; /* Ensure white background */
}

.dropdown-item {
    font-size: 0.95rem;
    color: #333;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f8f9fa; /* Light gray on hover */
    color: #007bff;
}

/* Multi-level Dropdown Custom CSS */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%; /* Position submenu to the right of parent */
    margin-top: -6px; /* Adjust vertical alignment */
    margin-left: 0.5rem; /* Small space between parent and child menus */
    border-radius: 0.5rem;
    display: none; /* Hidden by default */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow for submenus */
}

/* Show submenu on hover for desktop */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* For multi-level dropdowns in the navbar, ensure they appear on hover */
.navbar .multi-level-dropdown:hover > .dropdown-menu {
    display: block;
}

/* Adjust dropdown toggle arrow direction for submenus */
.dropdown-item.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.15em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid; /* Right-pointing arrow */
}

/* Adjustments for mobile (when navbar collapses) */
@media (max-width: 991.98px) { /* Adjust breakpoint if your navbar-expand- breakpoint is different */
    .dropdown-submenu .dropdown-menu {
        left: 0; /* Stack vertically on mobile */
        margin-left: 1rem; /* Indent sub-sub-menus */
        margin-top: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05); /* Separator */
    }

    /* Override hover for mobile, rely on Bootstrap's click behavior */
    .dropdown-submenu:hover > .dropdown-menu {
        display: none; /* Hide on hover on mobile, will be controlled by Bootstrap's JS click toggle */
    }

    /* Force display for multi-level on click on mobile (Bootstrap default) */
    .dropdown-menu.show + .dropdown-submenu .dropdown-menu {
        display: block; /* Ensure sub-sub-menus open on click */
    }

    /* Ensure dropdowns take full width on mobile */
    .navbar-nav .dropdown-menu {
        width: calc(100% - 2rem); /* Full width minus container padding */
        left: 1rem; /* Align with nav items */
    }
}


/* --- Hero Section --- */
.hero-section {
    min-height: 80vh; /* Make it take up most of the viewport height */
    background: linear-gradient(135deg, #e0f2f7, #c1e7ff); /* Light blue gradient background */
    position: relative;
    overflow: hidden;
    padding: 100px 0; /* Adjust padding for content */
}

/* Adding a subtle background pattern or shape (optional) */
.hero-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}
.hero-section > .container {
    position: relative;
    z-index: 1; /* Ensure content is above pseudo-elements */
}


/* --- Features Section --- */
.feature-box {
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg, #007bff, #6f42c1); /* Gradient for icon background */
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Call to Action Section --- */
.cta-section {
    background: linear-gradient(to right, #007bff, #6f42c1); /* Use your logo's primary colors or a blend */
    padding: 80px 0;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/* --- Footer --- */
.footer {
    background-color: #212529 !important; /* Darker footer */
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo-text {
    /* background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); /* Rainbow gradient */ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: #e1e1e1;
    font-weight: bold;
}

.footer .list-inline-item a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer .list-inline-item a:hover {
    color: #fff;
}


/* --- Animations --- */
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}