/* ===================================
    Crafto - Bisiness
====================================== */
/* font - loaded via Google Fonts link tags in root layout */
/* variable */
:root {     
    --base-color: #5758D6;
    --dark-gray: #262b35;
    --medium-gray:#868d98;
    --primary-font: 'Be Vietnam', sans-serif;
    --alt-font: 'Sora', sans-serif;
}
/* reset */
body { 
    font-size: 17px;
    line-height: 32px;
}
/* header */
header .navbar-brand img {
    max-height: 26px;
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
    font-weight: 400;
}
.sticky .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background:  var(--dark-gray);
}
header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
    color: var(--white);
}
/* accordion style 02 */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    background-color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a{
    opacity: .5;
}
/* bg color */
.bg-gradient-sherpa-blue-black {
    background-image: linear-gradient(to right top, #23248C, #22236D, #232348, #222226, #232323);
}
.bg-gradient-sherpa-black-blue {
    background-image: linear-gradient(to right top, #232323, #222226, #232348, #22236D, #23248C);
} 
/* bg transparent color */
.bg-base-color-transparent {
    background-color: rgba(87, 88, 214,.8);
}
/*  tabs style 05  */
.tab-style-05 .nav-tabs > li.nav-item {
    letter-spacing: -.5px;
}
/* accordion */
.accordion .accordion-item .accordion-header .accordion-title i {
    top: 52%;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 25px}

/*  progress bar style 01  */
.progress-bar-style-01 .progress .progress-bar-title {
    bottom: 15px;
}
/* page title */
.page-title-extra-large h1 {
    font-size: 4.7rem;
    line-height: 4.7rem;
}
/* separator line */
.separator-line-9px {
    height: 9px;
}
/* tag */
.tag-cloud a { 
    padding-top: 5px;
    padding-bottom: 9px;
}
/* blog comment */ 
.blog-comment li .btn-reply {
    padding-top: 5px;
    padding-bottom: 7px;
}
/* number pagination style 01 */
.pagination-style-01 .page-item .page-link {
    line-height: 42px;
}
.pagination-style-01 .page-item.active .page-link {
    background: var(--dark-gray);
    color: var(--white);
}
/* top right bottom left */
.bottom-minus-45px {
    bottom: -45px;
}
.right-minus-45px {
    right: -45px;
}
/* footer */
footer .footer-logo img {
    max-height: 26px;
}
footer ul li {
    margin-bottom: 0;
}
.footer-dark a:hover {
    color: var(--white);
}
/* model popup */
.mfp-bg {
    background: #000000;
    opacity: 0.7;
}
/* media query responsive */
@media (max-width: 1499px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    } 
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 13px;
        padding-right: 13px;
    }
    .sticky-wrap.shadow-in {
        left: 35px;
    }
}
@media (max-width: 1300px) {
    .sticky-wrap.shadow-in {
        left: 10px;
    }
}
@media (max-width: 991px) {
    .header-transparent .header-button .btn {
        color: var(--dark-gray);
        border-color: var(--dark-gray);
    }
    .header-transparent .header-button .btn:hover {
        border-color: var(--dark-gray);
        color: var(--white);
        background:  var(--dark-gray);
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: calc(100% + 30px) !important;
        margin-left: -15px;
        padding: 10px 45px;
        margin-bottom: 0;
        margin-right: -15px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
        padding-bottom: 17px;
    }
}
@media (max-width: 767px) {
    p {
        margin-bottom: 20px;
    }
    .page-title-extra-large h1 {
        font-size: 40px;
        line-height: 46px;
    }
}

/* ===================================
   Page transition (client-side navigation)
====================================== */
.page-transition {
    will-change: opacity, transform;
}
.page-transition-enter {
    opacity: 0;
    transform: translateY(8px);
}
.page-transition-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================================
   Careers page
====================================== */
.careers-page .careers-jobs {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

/* ===================================
   Hiring banner (top of page)
   Banner is fixed so it sticks with the nav on scroll; nav is pushed down.
====================================== */
.hiring-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--base-color);
    color: #fff;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* Push fixed navbar down so it sits below the banner */
body:has(.hiring-banner) header .navbar {
    top: 44px;
}
/* Keep header/nav transparent over hero until sticky-active (scroll); theme applies white only when .sticky-active */
body:has(.hiring-banner) header:not(.sticky-active) .navbar,
body:has(.hiring-banner) header:not(.sticky-active) {
    background-color: transparent !important;
    background: transparent !important;
}
/* Reserve space so content is not hidden under the fixed banner + nav */
body:has(.hiring-banner) {
    padding-top: 44px;
}
/* Home: no body padding so hero section starts at 0 and slider fills viewport behind banner+nav (no grey strip) */
body.page-home:has(.hiring-banner) {
    padding-top: 0 !important;
}
body.page-home:has(.hiring-banner) .section-dark.bg-dark-gray .full-screen.ipad-top-space-margin {
    height: 100vh !important;
    min-height: 100vh !important;
}
/* Hero starts below banner (no top margin) so its background extends behind the nav.
   The hiring banner is always present in the layout, so we set this unconditionally
   to prevent a layout shift (margin-top:76px from responsive.css flashing before :has() evaluates). */
.ipad-top-space-margin {
    margin-top: 0 !important;
}
/* page-title hero sections need padding so content clears the fixed nav + banner */
section.ipad-top-space-margin.page-title-big-typography {
    padding-top: 92px;
}
body:has(.hiring-banner) .full-screen.ipad-top-space-margin {
    height: calc(100vh - 44px);
    min-height: calc(100vh - 44px);
}
.hiring-banner-text {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}
.hiring-banner-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    padding-bottom: 1px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.hiring-banner-link:hover {
    color: #fff;
    opacity: 0.95;
    border-bottom-color: #fff;
}

/* ===================================
   Mobile: same as desktop when nav is transparent (light text/logo until scroll)
====================================== */
@media (max-width: 991px) {
    /* Transparent state: keep nav transparent, light logo and light text (override theme’s forced white bar + dark text) */
    body:has(.hiring-banner) header:not(.sticky-active) .navbar.bg-transparent {
        background-color: transparent !important;
        background: transparent !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar-brand .default-logo {
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar-brand .alt-logo,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar-brand .mobile-logo {
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-nav .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-nav .nav-item.active .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-nav .nav-item.active .dropdown-toggle,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-nav .nav-item.active:hover .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-nav .nav-item:hover .nav-link {
        color: #fff !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-nav .nav-item .dropdown-toggle {
        color: #fff !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-toggler-line {
        background-color: #fff !important;
    }
    /* When mobile menu is open, switch to dark text on white background */
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-collapse.show .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-collapse.show .nav-item.active .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-collapse.show .nav-item.active .dropdown-toggle,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-collapse.show .nav-item.active:hover .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-collapse.show .nav-item:hover .nav-link,
    body:has(.hiring-banner) header:not(.sticky-active) .navbar .navbar-collapse.show .nav-item .dropdown-toggle {
        color: var(--dark-gray, #232323) !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar:has(.navbar-collapse.show) {
        background-color: #fff !important;
        background: #fff !important;
    }
    body:has(.hiring-banner) header:not(.sticky-active) .navbar:has(.navbar-collapse.show) .navbar-toggler-line {
        background-color: var(--dark-gray, #232323) !important;
    }
}