/* 
Color Scheme for NexOrb Website

--deep-ocean-blue: #0A4A6D (Main background and header/footer color, conveys trust)
--teal-green: #2AB27B (Button and highlight color, inviting and refreshing)
--sky-blue: #4DC6FF (Hover effects and secondary highlights, creates clarity)
--light-gray: #F2F4F6 (Background for content sections, makes the site clean and modern)
--dark-charcoal: #2D2D2D (Text color for readability)
--pale-blue: #E0F7FF (Subtle background in the hero section to make the content stand out)

--ocean-green: #38B6A5;  Vibrant green reflecting freshness
--gradient-blue: #2D8EFF;  Bright blue inspired by water and sky
--soft-teal: #A7E9AF;  Calming green for subtle accents
--light-aqua: #E0F7FF;  Slightly deeper blue for better readability
--dark-charcoal: #1F1F1F;  Darker gray for improved contrast
--gray-light: #888888bb;  Slightly darker gray for inactive text
--gray-dark: #444444cc;  Darker gray for borders and subtle backgrounds
--hero-text: #444444dd;  Darker gray for hero section headers
--background-dark: #0D0D0D;  Darker background
*/



/* Define custom variables for gradient and text color */
:root {
--bg-body: #E0F7FF;  /* Light blue background */
--color-body: #2D2D2D;  /* Dark gray text */
--bg-header-footer: linear-gradient(135deg, #38B6A5, #2D8EFF); /* Gradient from green to blue */
--bg-menu:#E0F7FF;  /* Slightly deeper blue for better readability*/
--color-header-footer: white; 
--menu-active: #F2F4F6; /* light gray */
}

/* Header and Footer Styling */
.header, .footer {
    background: var(--bg-header-footer);
    color: var(--color-header-footer);
}

/* Prevent content from hiding behind fixed header */
body {
    padding-top: 70px;
    background-color: var(--bg-body);
}

/* Chat button styling */
.chat-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3000;
}

.chat-button img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Optional: Hover effect */
.chat-button:hover img {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* Ensure carousel images span the full width */
.carousel-inner,
.carousel-item {
    width: 100vw; /* Full viewport width */
    max-width: 100vw;
    height: auto;
}

/* Center the carousel */
.carousel-inner {
    margin-left: calc(-50vw + 50%);
}

/* Footer spans full width */
.footer {
    width: 100vw; /* Full viewport width */
    margin-left: calc(-50vw + 50%); /* Center the footer */
    padding: 1em 0; /* Adjust padding if needed */
    background: var(--bg-header-footer); /* Ensure background matches the header */
    color: var(--color-header-footer); /* Match text color */
}

/* Style for Carousel Previous and Next Buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 50px; /* Increase size */
    height: 50px; /* Increase size */
    background-color: rgba(0, 0, 0, 0.5); /* Add semi-transparent background */
    border-radius: 50%; /* Make it circular */
    color: white;
}

.carousel-control-prev-icon:after,
.carousel-control-next-icon:after {
    font-size: 2rem; /* Make icon larger */
    color: white; /* Set icon color to white for contrast */
}

    /* Style for Coming Soon items */
.coming-soon {
    color: gray;
    pointer-events: none; /* Makes it non-clickable */
    font-style: italic;
}


/* Dropdown background color to match the main menu */
.navbar .dropdown-menu {
    background-color: var(--bg-menu); /* Same color as the main menu */
    color: white; /* Optional: Adjust text color for contrast */
}

/* Optional: Dropdown item hover effect */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #38B6A5; /* Slightly different shade for hover */
    color: white;
}




.nav-link.active {
    font-weight: bold;
    color: var(--menu-active); /* Choose any color */
}

.carousel-caption {
    width: 100%; /* Make the caption span the entire width of the carousel */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    bottom: 0; /* Position at the bottom of the carousel image */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a semi-transparent background */
    padding: 10px; /* Optional: Adjust padding for better spacing */
    text-align: center; /* Center the text within the caption */
}