:root {
    --bs-dropdown-link-active-color: #fff !important;
    --bs-dropdown-link-active-bg: #198754 !important;
    /* Bootstrap green */
}

/* Hero Styling */

#heroCarousel .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000080;
}

#heroCarousel h5 {
    text-transform: capitalize;
    background: #62626233;
    width: fit-content;
    padding: 12px 42px;
}

#heroCarousel h1 {
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    margin: 15px 0 20px;
    margin-bottom: 80px;
}

/* CTA Button Styles with left alignment */

#heroCarousel .discover-cta {
    /* Background & Text */
    background: #27b297;
    color: white;
    /* Sizing & Spacing */
    width: 250px;
    height: 65px;
    flex-shrink: 0;
    min-height: 61px;
    box-sizing: border-box;
    /* Typography */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    /* Center text within button */
    /* Positioning */
    display: inline-flex;
    /* Allows for better alignment control */
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    /* Borders & Effects */
    border: none;
    border-radius: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Alignment */
    margin-left: 0;
    /* Explicitly remove any left margin */
    align-self: flex-start;
    /* Align to start of flex container */
    /* Browser Prefixes */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 20px;
}

/* If the parent uses flexbox, ensure proper alignment */

#heroCarousel .content.container.mx-auto,
#heroCarousel .carousel-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align children to the left */
}

/* Hover & Focus States */

#heroCarousel .discover-cta:hover {
    background: #1f9c84;
    transform: translateY(-2px);
}

#heroCarousel .discover-cta:focus {
    outline: 2px solid rgba(39, 178, 151, 0.5);
    outline-offset: 2px;
}

/* If this is a button or anchor, add hover states */

#heroCarousel .discover-cta:hover {
    background: #1f9c84;
    /* Slightly darker shade for hover */
}

/* Focus state for accessibility */

#heroCarousel .discover-cta:focus {
    outline: 2px solid rgba(39, 178, 151, 0.5);
    outline-offset: 2px;
}

#heroCarousel .carousel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5rem;
    /* Adjust this to control vertical position */
    display: grid;
    place-items: center;
    /* Centers both horizontally and vertically */
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}

#heroCarousel i.fa-solid {
    background: #d9d9d940;
    padding: 10px 12px;
    border-radius: 100%;
    font-size: 11px;
}

#heroCarousel .carousel-control-next,
#heroCarousel .carousel-control-prev {
    font-size: 11px;
}

#heroCarousel img {
    min-height: 50vh;
}

#heroCarousel .content.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    right: 0;
}

/* --- Styles for Mobile Screens (up to 767px wide) --- */
@media (max-width: 767px) {
    #heroCarousel .carousel-caption {
        /* Vertical Positioning (to move it down) */
        bottom: 5rem; /* Adjust this value as needed to lower it further on mobile */

        /* Horizontal Positioning (to center it for mobile) */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Specific width for mobile */
        text-align: center; /* Center the text content */
        padding: 0 1rem; /* Horizontal padding */
    }
}

/* --- Your existing Media Query for Tablet/Desktop (768px and wider) --- */
@media (min-width: 768px) {
    #heroCarousel h1 {
        font-size: 40px;
        line-height: 50px;
        text-align: left;
    }
    #heroCarousel .carousel-caption {
        justify-items: left;
        width: 60%;
        left: 1.5rem;
        /* Reset mobile-specific styles for desktop */
        transform: none; /* Remove the mobile centering transform */
        text-align: left; /* Revert text alignment */
        padding: 0; /* Remove horizontal padding */

        /* --- FIX FOR DESKTOP POSITIONING: Set a specific 'top' for desktop --- */
        top: 35%; /* Adjust this value (e.g., 30%, 40%, etc.) to lower/raise the caption on desktop */
        bottom: auto; /* Ensure 'bottom' doesn't conflict with 'top' */
    }
    #heroCarousel .carousel-control-prev {
        left: unset;
        right: 40px;
    }
    #heroCarousel .carousel-control-next,
    #heroCarousel .carousel-control-prev {
        width: fit-content;
    }
    .nav-holder {
        position: absolute;
        top: 0;
        right: 1.5rem;
        bottom: 0;
    }
}

/* --- Your other existing Media Queries for Larger Desktops --- */

@media (min-width: 1300px) {
    .nav-holder {
        left: 0;
    }
    /* You might want to adjust caption 'top' here if needed for very large screens */
    /* Example: #heroCarousel .carousel-caption { top: 30%; } */
}

@media (min-width: 1440px) {
    #heroCarousel h1 {
        font-size: 60px;
        line-height: 75px;
    }
    #heroCarousel img {
        max-height: 80vh;
    }
    #heroCarousel .discover-cta {
        font-size: 20px;
    }
    #heroCarousel .carousel-caption {
        width: 55%;
        top: 20%;
        /* You might want to adjust caption 'top' here if needed for very large screens */
        /* Example: top: 28%; */
    }
}

/* --- Your existing Media Query for Very Small Mobile Screens --- */
@media (max-width: 320px) {
    #heroCarousel h5 {
        font-size: 14px;
    }
    #heroCarousel h1 {
        font-size: 20px;
        line-height: 30px;
    }
    #heroCarousel i.fa-solid {
        padding: 8px 10px;
        font-size: 8px;
    }
    #heroCarousel .carousel-caption {
        bottom: 2.5rem; /* Adjust for very smallest screens if needed */
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        text-align: center;
        padding: 0 0.5rem;
    }
}

/* About Sec Styling */

#our-services-charter h5,
#our-people h5,
#services h5,
.events h5 {
    color: #137ac0;
    text-transform: uppercase;
    font-size: 14px;
}

#our-services-charter h2,
#services h2 {
    font-size: 22px;
    font-weight: 500;
    text-align: left;
    margin: 10px 0;
}

#our-services-charter p,
#services p {
    font-size: 18px;
    margin: 20px 0;
    text-align: center;
}

#our-services-charter .col-md-6 {
    justify-items: center;
}

#our-services-charter ul {
    margin-bottom: 25px;
}

#our-services-charter a.charter {
    background: #137ac0;
    color: #ffffff;
    width: 197px;
    height: 58px;
    flex-shrink: 0; /* Increased vertical and horizontal padding */
    font-size: 20px; /* Increased font size for the text */
    /* display: inline-block; */
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-align: center;
}

#our-services-charter a.charter:hover {
    background: #0a6eb1;
    transform: translateX(5px);
}

#our-services-charter ul {
    margin-bottom: 25px;
}

#our-services-charter ul li {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

#our-services-charter ul li i {
    color: #137ac0;
}

@media (max-width: 767px) {
    #our-services-charter .col-md-6 {
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    #our-services-charter .col-md-6 {
        justify-items: left;
    }
    #our-services-charter p {
        text-align: left;
    }
}

@media (min-width: 1440px) {
    #our-services-charter h2,
    #services h2,
    .events h2,
    .news h2 {
        font-size: 40px;
    }
    #our-services-charter p,
    #services p {
        font-size: 20px;
    }
    #our-services-charter ul li {
        font-size: 18px;
    }
    #our-services-charter ul li:before {
        top: 8px;
    }
    #our-services-charter a.charter {
        width: 197px;
        height: 58px;
        flex-shrink: 0;
        font-size: 16px;
    }
}

/* Our Services */

.service-card {
    display: flex;
    height: 100%;
    overflow: hidden;
    box-shadow: 2px -0.2rem 1rem rgba(0, 0, 0, 0.1);
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    padding: 25px;
}

.service-body {
    flex: 1;
    padding: 30px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* .service-body a.read-more { */
/* position: relative; */
/* padding-left: 2.5rem; */
/* } */

/* Styles for the ::before (arrow and line) - make sure it's always visible */
.service-body a.read-more::before {
    content: "";
    background-image: url("/assets/svg/Arrow-black.svg");
    display: block; /* Keep as block to control width/height */
    height: 15px;
    width: 25px; /* Adjust width to make space for both arrow and line */
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 4px;
    border-right: 1px solid #000000; /* This is your vertical line */

    /* Ensure it's always visible */
    opacity: 1; /* Explicitly set to 1, just in case */
    transform: translateX(0); /* Ensure it doesn't move with the text */
    transition: transform 0.3s ease-out; /* Add transition for potential arrow shift on hover */
}

/* Styles for the main 'read-more' link (container for text and ::before) */
.service-body a.read-more {
    position: relative; /* Essential for positioning the ::before */
    display: inline-flex; /* Use flex to align ::before and text */
    align-items: center; /* Vertically center them */
    padding-left: 2.5rem; /* Make space for the ::before (width + a bit more) */
    text-decoration: none; /* Remove default link underline */
    /* Remove any opacity or transform properties from here that would hide the ::before */

    /* The 'read-more' link itself acts as the hoverable area.
       It should not be hidden, so we remove the previous opacity/transform from here. */
}

/* Styles for the "Read More" TEXT ONLY - this is what animates */
.service-body a.read-more .read-more-text {
    opacity: 0; /* Hidden by default */
    transform: translateX(-20px); /* Start off-screen to the left */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth animation for both */
}

/* Hover state for the entire link (.read-more) */
.service-body a.read-more:hover .read-more-text {
    opacity: 1; /* Make text visible */
    transform: translateX(0); /* Slide text into place */
}

/* Optional: Make the arrow shift slightly to the right on hover */
.service-body a.read-more:hover::before {
    transform: translateX(5px); /* Shifts arrow and line right */
}

.service-card h3 {
    font-family: "AvenirHeader";
    font-weight: 500;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -0.011em;
    /* Converted from percentage to em */
    vertical-align: middle;
    text-transform: capitalize;
}

#services h2 {
    text-align: center;
}

#services .row p {
    text-align: left;
}

@media (min-width: 768px) {
    .service-body p {
        font-size: 20px;
    }
    #services p {
        max-width: 60rem;
        margin: auto;
    }
    .service-card h3 {
        font-size: 25px;
    }
}

section[id="start-up-tribe"] {
    background: rgba(97, 85, 85, 0.13);
    margin-bottom: 5.8vw;

    @media (max-width: 1050px) {
        flex-direction: column;
    }

    h2 {
        font-size: 1.875rem;
        font-weight: 500;
        text-align: left;
        line-height: 1;
    }

    img {
        max-height: 460px;
    }

    .startup-logo {
        object-fit: contain;
    }

    .wrapper {
        background-color: #941116;
        color: #ffffff;
    }

    .w-30 {
        width: 30% !important;
    }

    .w-20 {
        width: 20% !important;
    }

    .illustraion {
        object-fit: cover;
    }

    .btn-slide::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background-color: #000;
        z-index: 0;
        transition: width 0.4s ease;
    }

    .btn-slide:hover::before {
        width: 100%;
    }

    @media (max-width: 1050px) {
        img,
        .wrapper,
        .w-20 {
            width: 100% !important;
        }

        img {
            max-height: 400px;
            object-fit: cover;
        }
    }
}

/* Custom CSS for the new sliding button effect with green hover */

.btn-slide-custom-green {
    /* These styles make it behave like a button container for the slide effect */
    display: inline-flex; /* Allows padding and keeps it inline with text flow */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Hides the sliding part until it moves into view */
    /* Add any other base button styles you want here if not covered by Tailwind */
}

.btn-slide-custom-green::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #0a6eb1; /* The desired green color for the slide */
    transform: translateX(-100%); /* Starts off-screen to the left */
    transition: transform 0.3s ease-in-out; /* Smooth slide animation */
    z-index: 0; /* Ensures the pseudo-element is behind the text */
}

.btn-slide-custom-green:hover::before {
    transform: translateX(0); /* Slides into view on hover */
}

/* Ensure the text is above the sliding background */
.btn-slide-custom-green > * {
    /* Targets immediate children like the <span> */
    position: relative;
    z-index: 10;
}