/* ===================================
    Crafto - Business
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@100;300;400;500;600;700;800&display=swap');
/* 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;
}
/* ========================================
   NAVBAR STRUCTURE - CRITICAL FIX
======================================== */
/* Force navbar and container to flex */
header .navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
}

header .container-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

header .navbar-brand img {
    max-height: 60px;
    width: auto;
    display: block;
}

header .navbar-brand {
    padding: 0;
    margin-right: 20px;
    flex-shrink: 0;
}

/* MAIN LAYOUT: 3-COLUMN FLEX */
.site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.nav-left {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
}

.nav-center {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    flex-wrap: nowrap !important;
}

.nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
}

/* NAVBAR COMPONENTS */
.cta-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
}

.burger-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.apply-btn--mobile {
    display: none !important;
}

.apply-btn--desktop {
    display: inline-flex !important;
    position: static !important;
    width: auto !important;
    flex-wrap: nowrap !important;
}

.mobile-cta {
    display: none !important;
}

/* NAVBAR COLLAPSE - ALWAYS FLEX */
.navbar-collapse {
    display: flex !important;
    position: static !important;
    width: auto !important;
    flex-direction: row !important;
    background: none !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

.navbar-collapse.show {
    display: flex !important;
}

.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.navbar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.navbar .navbar-nav .nav-link {
    font-size: 17px;
    font-weight: 400;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* HAMBURGER - HIDDEN ON DESKTOP */
.burger-btn {
    display: none !important;
}

/* DESKTOP NAV VISIBLE */
.desktop-nav {
    display: flex !important;
}

/* ========================================
   MOBILE: max-width 991.98px
======================================== */
@media (max-width: 991.98px) {
    /* Stack layout */
    .site-header {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
    
    .nav-left {
        order: 1 !important;
        flex: 1 1 auto !important;
    }
    
    .nav-center {
        order: 3 !important;
        flex: 0 0 100% !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
    
    .nav-right {
        order: 2 !important;
        flex: 0 0 auto !important;
    }
    
    /* Hide desktop CTA group */
    .cta-group {
        display: none !important;
    }
    
    .apply-btn--desktop {
        display: none !important;
    }
    
    /* Show mobile CTA inside nav */
    .mobile-cta {
        display: block !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    .apply-btn--mobile {
        display: block !important;
        width: 100% !important;
    }
    
    /* Mobile navbar collapse */
    .navbar-collapse {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .navbar-collapse.show {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Show hamburger */
    .burger-btn {
        display: flex !important;
    }
}

/* ========================================
   BRAND & STYLING
======================================== */
.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);
}

header .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* 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;
}

/* checkbox styling */
.form-check-input {
    border: 2px solid #999;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    accent-color: var(--base-color);
}

.form-check-input:hover {
    border-color: var(--base-color);
}

.form-check-input:focus {
    border-color: var(--base-color);
    box-shadow: 0 0 0 0.25rem rgba(87, 88, 214, 0.25);
}

.form-check-input:checked {
    background-color: var(--base-color);
    border-color: var(--base-color);
}

/* Custom checkbox styling aligned to brand */
.custom-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 4px;
    margin-right: 0;
    cursor: pointer;
    accent-color: var(--base-color);
    border: 2px solid #d0d5dd;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background: white;
    position: relative;
}

.custom-checkbox input[type="checkbox"]:hover {
    border-color: var(--base-color);
    box-shadow: 0 0 0 3px rgba(87, 88, 214, 0.10);
}

.custom-checkbox input[type="checkbox"]:checked {
    background-color: var(--base-color);
    border-color: var(--base-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 8l4 4 8-8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.custom-checkbox input[type="checkbox"]:checked:hover {
    box-shadow: 0 0 0 3px rgba(87, 88, 214, 0.25);
}

.custom-checkbox input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--base-color);
    box-shadow: 0 0 0 3px rgba(87, 88, 214, 0.15);
}

.custom-checkbox input[type="checkbox"]:disabled {
    background-color: #f0f0f0;
    border-color: #d0d5dd;
    cursor: not-allowed;
    opacity: 0.6;
}

.checkbox-wrapper {
    margin: 0;
}

/* 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: 126px;
}

footer ul li {
    margin-bottom: 0;
}

.footer-dark a:hover {
    color: var(--white);
}

/* model popup */
.mfp-bg {
    background: #000000;
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 1499px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
    } 
}

@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .sticky-wrap.shadow-in {
        left: 35px;
    }
}

@media (max-width: 1300px) {
    .sticky-wrap.shadow-in {
        left: 10px;
    }
}

@media (max-width: 1200px) {
    header .navbar-brand {
        margin-right: 15px;
    }
    .widget-text {
        font-size: 14px !important;
    }
}

@media (max-width: 1024px) {
    header .navbar-brand img {
        max-height: 55px;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 767px) {
    p {
        margin-bottom: 20px;
    }
    .page-title-extra-large h1 {
        font-size: 40px;
        line-height: 46px;
    }
    header .navbar {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    header .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .navbar-brand img {
        max-height: 50px !important;
    }
    .cta-group {
        gap: 8px !important;
    }
    .site-header {
        gap: 8px !important;
    }
}