/* ==========================================================
   HEADER + FOOTER — brand color overrides on top of Bootstrap 5
   ========================================================== */

/* Full-page loading state */
.site-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff7fa 0%, #fff4e9 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

.site-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__inner {
    display: grid;
    justify-items: center;
    gap: 22px;
}

.site-loader__inner img {
    width: min(190px, 55vw);
    max-height: 70px;
    object-fit: contain;
}

.site-loader__ring {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(245, 56, 109, .2);
    border-top-color: #f5386d;
    border-right-color: #ff8a1e;
    border-radius: 50%;
    animation: site-loader-spin .8s linear infinite;
}

@keyframes site-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion:reduce) {
    .site-loader {
        transition: none;
    }

    .site-loader__ring {
        animation: none;
    }
}

/* Topbar */
/* .topbar{background:var(#fff);}
.social-icon{
  width:26px;height:26px;border-radius:50%;
  background:rgba(177, 81, 81, 0.08);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;color:#f56f81;
} */

.social-icon:hover {
    background: var(--gradient);
}

.topbar {
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* Email & Phone */
.topbar a {
    color: #f56f81;
    font-size: 13px;
    /* border: 1px solid pink; */
    font-weight: 500;
    text-decoration: none;
    transition: .3s;
}

.social-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Equal shadow all around */
    box-shadow: 0 0 12px rgba(0, 0, 0, .10);
}

/* Same Icon Style */
.topbar .fa-envelope,
.topbar .fa-phone {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff3f6;
    color: #f55f8d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: .3s;
}

/* Space between icon & text */
.topbar .fa-envelope,
.topbar .fa-phone {
    margin-right: 8px;
}

/* Social Icons */
.social-icon {
    text-decoration: none;
}

.social-icon:hover,
.topbar .fa-envelope:hover,
.topbar .fa-phone:hover {
    background: linear-gradient(90deg, #f5386d 0%, #ff8a1e 100%);
    color: #fff;
}

/* Logo */
.logo {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--dark);
    line-height: 1;
}

.logo span {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo small {
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--gray);
    margin-top: 2px;
}

/* Offcanvas mobile sidebar */
.offcanvas {
    width: 280px !important;
}

.offcanvas .dropdown-menu {
    position: static !important;
    box-shadow: none;
    transform: none !important;
    background: var(--light-bg);
    border-radius: 8px;
    margin: 4px 0 8px;
    padding: 6px;
}

/* Navbar container becomes the reliable positioning anchor for mega-menus */
.navbar>.container {
    position: relative;
}

/* Mega menu (Services / Solutions / Resources / About Us dropdowns) */
/* .mega-menu{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:100% !important;
  transform:translateX(-50%) !important;
  inset:auto !important;
  margin:16px 0 0 !important;
  width:min(1140px, 94vw);
  max-width:94vw;
  max-height:80vh;
  overflow-y:auto;
  border:none;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(245,56,109,.18);
} */


/* Navbar */
.navbar {
    position: relative;
    overflow: visible;
}

.navbar>.container,
.navbar>.container-fluid {
    position: relative;
}

/* Center Mega Menu */
.mega-menu {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 14px) !important;
    transform: translateX(-50%) !important;
    width: 1180px;
    max-width: calc(100vw - 40px);
    margin: 0 !important;
    padding: 24px !important;

    border: 0;
    border-radius: 18px;
    /* background: #fff;

    box-shadow: 0 20px 60px rgba(0,0,0,.12); */

    background: linear-gradient(135deg,
            #FFEAF1 0%,
            #FFF5E9 100%);

    border: 1px solid #FFD7E3;

    box-shadow:
        0 10px 25px rgba(245, 56, 109, .16),
        0 5px 12px rgba(255, 138, 30, .10),
        inset 0 1px 0 rgba(255, 255, 255, .8);
    z-index: 9999;
}

/* dropdown open */
.navbar .dropdown {
    position: static;
}

.navbar .dropdown-menu.show {
    display: block;
}

/* Resources layout */
/* .mega-menu .row{
    margin:0;
}

.mega-menu .col-md-4{
    padding:0;
} */

/* cards */
.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border-radius: 0;
    background: #fff;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    box-shadow: none;
}

.mega-item:hover {
    background: #fff7fa;
    transform: none;
}

/* last row */
.mega-menu .mega-item:nth-last-child(-n+3) {
    border-bottom: 0;
}

/* last column */
.mega-menu .col-md-4:last-child .mega-item {
    border-right: 0;
}

/* bottom support box */
.mega-cta-light {
    margin-top: 20px;
    border-radius: 16px;
    padding: 20px 25px !important;
    background: linear-gradient(90deg, #fff4f7, #fff);
    border: 1px solid #f2e5ea;
}


/* responsive */
@media(max-width:1199px) {

    .mega-menu {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        max-width: 100%;
        box-shadow: none;
        border-radius: 12px;
    }

}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Mobile version of mega menu inside offcanvas */
.mega-menu-mobile {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 6px 0 10px !important;
}

.mega-divider {
    width: 50px;
    height: 3px;
    background: var(--gradient);
    border-radius: 3px;
}

/* Each mega-menu row becomes a proper card with pink-tinted shadow all around */
.mega-item {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 20px rgba(245, 56, 109, .12);
    border: 1px solid rgba(245, 56, 109, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.mega-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(245, 56, 109, .2);
}

.mega-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

.mega-icon img {
    width: 80px;
    height: auto;
    display: block;
}

.mega-icon.bg-pink {
    background: var(--gradient);
}

.mega-icon.bg-purple {
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
}

.mega-icon.bg-orange {
    background: linear-gradient(135deg, #ff8a1e, #ffb347);
}

.mega-item .fa-arrow-right {
    color: var(--pink);
    margin-left: 4px;
}

.mega-industry-list li {
    margin-bottom: 10px;
}

.mega-industry-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--dark);
    text-decoration: none;
    background: #fff;
    box-shadow: 0 4px 14px rgba(245, 56, 109, .1);
    border: 1px solid rgba(245, 56, 109, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.mega-industry-list li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(245, 56, 109, .18);
    color: var(--pink);
}

.mega-industry-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--light-bg);
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.mega-cta {
    background: var(--gradient);
    border-radius: 14px;
}

.mega-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Outline style icon (About Us cards) */
.mega-icon-outline {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--pink);
    background: var(--light-bg);
}

.text-pink-brand {
    color: var(--pink);
    font-size: 22px;
}

/* Light CTA banner (Resources) */
.mega-cta-light {
    background: var(--light-bg);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(245, 56, 109, .1);
}

.mega-cta-icon-light {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245, 56, 109, .15);
}

/* Navbar links */
.navbar .nav-link {
    color: var(--dark);
    white-space: nowrap;
    position: relative;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--pink);
}

/* .navbar .nav-link.active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-14px;
  margin:0 auto;
  width:100%;
  height:3px;
  background:var(--pink);
  border-radius:3px;
} */

/* Pink active state + underline when a mega-menu dropdown is open */
.navbar .nav-item.dropdown>.nav-link {
    position: relative;
}

/* .navbar .nav-item.dropdown.show > .nav-link{color:var(--pink);}
.navbar .nav-item.dropdown.show > .nav-link::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-14px;
  margin:0 auto;
  width:100%;
  height:3px;
  background:var(--pink);
  border-radius:3px;
} */

.navbar .nav-item.dropdown.active-dropdown>.nav-link {
    color: var(--pink) !important;
}

/* .navbar .nav-item.dropdown.active-dropdown > .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-14px;
    width:100%;
    height:3px;
    margin:auto;
    background:var(--gradient);
    border-radius:20px;
} */

/* Arrow animation only */
/* .navbar .dropdown-toggle::after{
    transition: transform .3s ease;
}

.navbar .nav-item.dropdown.active-dropdown > .dropdown-toggle::after{
    transform: rotate(180deg);
} */



/* ==========================================================
   NAV — hover underline (via ::before, so it never fights
   with Bootstrap's dropdown-toggle::after arrow) + arrow rotate
   ========================================================== */

/* Underline element */
.navbar .nav-link {
    position: relative;
}

.navbar .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    margin: 0 auto;
    width: 0;
    height: 3px;
    background: var(--gradient);
    border-radius: 3px;
    transition: width .25s ease;
}

/* Hover -> underline + pink color (plain links AND dropdown toggles) */
.navbar .nav-link:hover {
    color: var(--pink);
}

.navbar .nav-link:hover::before {
    width: 100%;
}

/* Dropdown open (active-dropdown class via JS) -> same underline + color */
.navbar .nav-item.dropdown.active-dropdown>.nav-link {
    color: var(--pink) !important;
}

.navbar .nav-item.dropdown.active-dropdown>.nav-link::before {
    width: 100%;
}

/* Active page link -> pink color + underline by default */
.navbar .nav-link.active {
    color: var(--pink);
}

.navbar .nav-link.active::before {
    width: 100%;
}

/* While ANY nav item is hovered (navbar gets .nav-hovering class from JS),
   hide active page highlight UNLESS the active link itself is being hovered */
.navbar.nav-hovering .nav-link.active:not(:hover) {
    color: var(--dark);
}

.navbar.nav-hovering .nav-link.active:not(:hover)::before {
    width: 0;
}

/* ---------- Arrow (Bootstrap's own ::after caret) rotation ---------- */

/* Base transition already present in your file:
   .navbar .dropdown-toggle::after{ transition: transform .3s ease; }
   Keep that as-is. Now rotate it on hover directly (pure CSS, instant) */
.navbar .nav-item.dropdown:hover>.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Keep rotated while JS-driven dropdown is open too */
.navbar .nav-item.dropdown.active-dropdown>.dropdown-toggle::after {
    transform: rotate(180deg);
}


/* Prevent navbar items from wrapping onto multiple lines on tighter desktop widths */
.navbar {
    overflow: visible;
}

.navbar>.container {
    flex-wrap: nowrap;
}

.navbar-brand.logo {
    flex-shrink: 0;
}

.navbar-brand.logo img {
    max-height: 64px;
    width: auto;
}

.navbar-nav.flex-row {
    flex-wrap: nowrap;
}

.navbar .nav-link {
    padding-left: .65rem;
    padding-right: .65rem;
    flex-shrink: 0;
}

.navbar .btn-gradient {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (min-width:1200px) and (max-width:1300px) {
    .navbar .nav-link {
        font-size: 14px;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .navbar-nav.flex-row {
        gap: .35rem !important;
    }
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--light-bg);
    color: var(--pink);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
    border-radius: 10px;
}

/* Gradient CTA button (shared with rest of page too) */
.btn-gradient {
    z-index: 9999;
    position: relative;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 22px;
    box-shadow: 0 6px 18px rgba(245, 56, 109, .3);
    transition: transform .25s ease, box-shadow .25s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(245, 56, 109, .4);
    color: #fff;
}

/* Footer */
.site-footer {
    background: linear-gradient(120deg, #f5386d 0%, #ff8a1e 100%);
}

.footer-logo {
    font-size: 24px;
}

.footer-logo span {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.footer-link {
    color: #fff;
    opacity: .9;
    text-decoration: none;
}

.footer-link:hover {
    opacity: 1;
    text-decoration: underline;
    color: #fff;
}

.social-icon-light {
    background: rgba(255, 255, 255, .15);
}

.social-icon-light:hover {
    background: #fff;
    color: var(--pink);
}

.newsletter-form input::placeholder {
    color: #777;
}

.text-primary-brand {
    color: var(--pink);
}

.site-footer {
    background: linear-gradient(120deg, #f5386d 0%, #ff8a1e 100%);
}

/* Logo Image Responsive */
.footer-logo img {
    max-width: 180px;
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:768px) {
    .footer-logo img {
        max-width: 150px;
        margin: 0 auto;
    }
}

.footer-logo {
    font-size: 24px;
}

.footer-logo span {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.footer-link {
    color: #fff;
    opacity: .9;
    text-decoration: none;
}

.footer-link:hover {
    opacity: 1;
    text-decoration: underline;
    color: #fff;
}

/* Social Icons */
.social-icon-light {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    /* Normal icon color white */
    transition: .3s ease;
}

.social-icon-light i {
    color: #fff;
    /* Force icon white */
    font-size: 18px;
}

.social-icon-light:hover {
    background: #fff;
    color: #f5386d;
}

.social-icon-light:hover i {
    color: #f5386d;
}

.newsletter-form input::placeholder {
    color: #777;
}

.text-primary-brand {
    color: var(--pink);
}

/* =====================================================
   BREADCRUMB
===================================================== */

.breadcrumb {
    padding: 15px 0;
    margin: 0;
    border-top: 1px solid #f4eeee;
    border-bottom: 1px solid #f4e8e8;
}

.breadcrumb-list {
    display: flex;
    align-items: center;

    gap: 12px;

    font-size: 13px;
}

.breadcrumb-list a {
    color: #555;

    text-decoration: none;
}

.breadcrumb-list i {
    color: #aaa;

    font-size: 7px;
}

.breadcrumb-list span {
    color: var(--pink);

    font-weight: 600;
}


.mega-menu h4 {
    color: #1a1a2e;
}

.mega-menu a {
    text-decoration: none;
}