﻿
/* - Hamburger + corporate icon next to each other */
.nav-item.d-lg-none.d-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Corporate icon size in mobile */
.nav-item.d-lg-none .corporate-member {
    max-height: 50px;
    display: block;
}

/* guess- dont need -LinkedIn bubble inside mobile menu */
.mobile-menu-icons .linkedin-bubble img {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

    .mobile-menu-icons .linkedin-bubble img:hover {
        transform: scale(1.1);
    }

/*NAVIGATION & MOBILE STYLES*/
.navbar-collapse {
    flex-wrap: wrap;
    row-gap: 10px;
}
    /* all nav links in mobile have same font size */
    .navbar-collapse .navbar-nav .nav-link {
        font-size: 0.95rem !important; /* same as desktop links */
        padding: 0.5rem 1rem !important;
        text-align: left;
    }


.navbar-nav {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /*made it from flex-end-to flex-start- so can move the linkidin and coporate to the left a lil more*/
}

.nav-link {
    display: block;
    padding: 0 1rem !important;
}

/* Navbar last child (CTA button) */
.navbar-nav .nav-item:last-child {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

    .navbar-nav .nav-item:last-child .nav-link {
        border: 2px solid #000;
        padding: 5px 16px;
        border-radius: 12px;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: normal;
        margin-top: 0;
        font-size: 0.95rem;
        transform: translateY(-3px);
    }

        .navbar-nav .nav-item:last-child .nav-link:hover {
            background-color: var(--GC-Aspire);
            color: var(--GC-White);
            border-color: var(--GC-Aspire);
            transform: scale(1.0);
            box-shadow: 0 0 8px rgba(214,0,86,0.6), 0 0 15px rgba(214,0,86,0.4);
        }

/* Mobile-specific grid for nav items */
.nav-item.d-lg-none {
    display: grid !important;
    grid-template-columns: auto auto !important;
    gap: 2px !important;
    padding: 0 1rem;
}

.nav-mobile-grid {
    display: grid !important;
    grid-template-columns: auto auto;
    gap: 2px;
}

.mobile_brand {
    margin: 0;
}

/* Border left for social logos */
.border-left-socials {
    /* border-left: 1px solid grey;*/
    /* padding-left: 8px;*/
    /*padding-right: 6px;*/
    border-left: 1px solid grey;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px; /* same box height for both */
    padding: 0 25px; /* consistent margin left/right */
}

    .border-left-socials img {
        height: 36px;
        width: auto;
    }

/* Show only on small screens */
.show-for-small {
    display: none;
}

/* NAV RIGHT CONTENT */
.nav-right-content {
    /* margin-left: 20px;*/
    /* gap: 5px;*/
    display: flex;
    align-items: center;
    /* padding-right: 15px;*/

    margin-left: 40px; /* increase/decrease to control spacing */
    padding-right: 15px; /* remove extra right padding */
    gap: 5px; /* add some breathing room between LinkedIn and Corporate */
}

    .nav-right-content img {
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
    }

        .nav-right-content img.corporate-member {
            border-radius: 8px;
            max-height: 45px !important;
        }

        .nav-right-content img:hover {
            transform: scale(1.1);
        }

    .nav-right-content .border-left-socials:nth-last-child(2) {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

.nav-right-content {
    padding-right: 0 !important; /* optional: tighten the whole block */
}

/*HEADER BACKGROUND & LOGOS*/
.AspireBg {
    position: relative;
    overflow: hidden;
    height: 150px;
}

    .AspireBg .headerBg {
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
    }

.MainHeader .AspireBg img {
    width: 100%;
}

.headerContent {
    position: relative;
    z-index: 10;
}

.MainHeader .headerContent .headerGCColumn {
    padding-top: 10px;
    display: flex;
}

    .MainHeader .headerContent .headerGCColumn img {
        max-height: 45px;
        max-width: min-content;
    }

.MainHeader .headerContent .headerSocialColumn {
    top: 40px;
    height: 40px;
    visibility: visible;
}

.socialCol {
    padding: 22px 0 20px 0;
    text-align: right;
}

.headerAColumn {
    padding-top: 10px;
}

    .headerAColumn img {
        max-height: 77px;
        max-width: min-content;
        float: right;
    }

.MainHeader .HeaderText {
    white-space: nowrap;
    min-height: 63.5px;
}

    .MainHeader .HeaderText h6 {
        font-weight: bold;
        color: #002856;
    }

.MainHeader .contactColumn {
    text-align: right;
}
/* Make LinkedIn + Corporate align neatly */
/* .nav-right-content .border-left-socials {*/
/*    display: flex;*/
/*   align-items: center; /* vertical centering */
/*   justify-content: center;*/
/*min-height: 35px;  consistent height box */
/*  min-height: 35px; /* match the taller corporate logo */
/*  padding-left: 12px; consistent left spacing */
/* padding-left: 12px;  consistent left spacing */
/*padding-left: 12px;  consistent left spacing */
/*  padding-right: 12px;*/
/*}*/

/* LinkedIn desktop */
.border-left-socials img.img-circle {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
/* LinkedIn circle (desktop) */
/*  .nav-right-content .border-left-socials img.img-circle {*/
/*     width: 28px;*/
/*    height: 28px;*/
/*   object-fit: cover;*/
/*    display:block;*/
/* }*/

/* Corporate logo desktop */
.border-left-socials img.corporate-member {
    max-height: 75px;
    border-radius: 8px;
    display: block;
}
/* Corporate logo */
/* .nav-right-content .border-left-socials img.corporate-member {*/
/*  max-height: 70px; /* match LinkedIn visually */
/* display: block;*/

/*  }*/
/* LinkedIn smaller only on desktop */
@media (min-width: 992px) {
    .nav-right-content .border-left-socials img.img-circle {
        width: 28px; /* adjust size */
        height: 28px; /* keep aspect */
    }
}


/* Responsive */
@media screen and (max-width: 768px) {
    /* Contact Us becomes normal link in mobile */
    .navbar-nav .nav-item:last-child .nav-link {
        font-size: 0.95rem !important; /* match the rest of the menu */
        padding: 0.5rem 1rem !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        border: none !important;
        transform: none !important;
        justify-content: flex-start;
        width: 100%;
    }
    /* Hamburger menu aligned left as slide-in */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 250px;
        height: 100%;
        background-color: #fff;
        z-index: 1050;
        overflow-y: auto;
        transition: left 0.3s ease-in-out;
        padding: 20px;
        flex-direction: column !important;
        gap: 10px;
    }

        .navbar-collapse.show {
            left: 0;
        }
    /* Center nav items inside mobile menu */
    .navbar-nav {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }
    /* LinkedIn bubble in center */
    .nav-right-content .show-for-small {
        display: flex !important;
        justify-content: center;
        align-items: center;
        border: 2px solid #000;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: 15px auto;
        padding: 5px;
        background-color: #fff;
        box-shadow: 0 0 6px rgba(0,0,0,0.1);
    }

        .nav-right-content .show-for-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    /* Corporate logo visible in mobile */
    .nav-right-content .corporate-member {
        display: block !important;
        margin: 10px auto;
        max-height: 75px;
        border-radius: 8px; /*maybe dont need this*/
    }
    /* Navbar last child adjustments */
    .navbar-nav .nav-item:last-child {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
    }

        .navbar-nav .nav-item:last-child .nav-link {
            padding: 6px 12px;
            font-size: 0.85rem;
            border-radius: 20px;
            margin-top: 0;
            width: 100%;
        }
}

/* Mobile LinkedIn bubble-need to work - make it more center */
@media screen and (max-width: 768px) {
    .show-for-small {
        /*margin: 15px auto 15px 0 !important;*/ /* push it left-not exactly left but it will be left and not covering the userway */
        margin: 15px 0 15px auto !important; /* push it right */
        display: flex !important;
        justify-content: center;
        align-items: center;
        border: 2px solid #000;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: 15px auto;
        padding: 5px;
        background-color: #fff;
        box-shadow: 0 0 6px rgba(0,0,0,0.1);
    }

        .show-for-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    /* Corporate logo in mobile */
    .nav-right-content .corporate-member {
        display: block !important;
        margin: 10px auto;
        max-height: 75px;
    }

   
}