/* ============================================================== 
   FabNinjas Brand Colors (from Brand Guidelines PDF)
   Palette: #282643 dark | #776482 purple | #e99d75 orange | #f2e1ca cream | #baa9b8 lavender
=================================================================== */

:root {
	--dark: #282643;
	--dark-secondary: #1f1d35;
	--dark-optional: #282643;
	--color-primary: #776482;
	--color-secondary: #282643;
	--color-style-two: #776482;
	--color-accent: #e99d75;
	--color-muted: #baa9b8;
	--color-cream: #f2e1ca;
	--color-heading: #282643;
	--color-paragraph: #5c5868;
	--white-secondary: #f2e1ca;
	--bg-gray: #faf6f0;
	--bg-gray-secondary: #f5efe6;
	--bg-gradient: linear-gradient(45deg, #776482 0%, #282643 100%);
	--box-shadow-secondary: 0 10px 30px 0 rgba(40, 38, 67, 0.2);
	--box-shadow-regular: 0px 2px 12px 0px rgba(40, 38, 67, 0.08);
}

/* Orange accent on primary theme buttons only */
.color-style-two .bg-theme.btn:hover,
.color-style-two .btn-style-one:not(.btn-border):hover,
.color-style-two a.btn-standard:hover,
.color-style-two .card-style-two:hover {
	background-color: var(--color-accent) !important;
}

.color-style-two .navbar-nav > li > a:hover,
.color-style-two .attr-nav .call a:hover {
	color: var(--color-accent);
}

/* Subtle lavender for section dividers / light accents */
.color-style-two .sub-title::before {
	background: var(--color-muted) !important;
}

/* ============================================================== 
   FabNinjas Elegant Lighter Typography Overrides
   - Keeps original Hanken Grotesk and Manrope fonts.
   - Refines all bold/heavy headings, menus, and copy to 
     premium, light, and sleek weights.
=================================================================== */

/* 1. Global Light Font Weights for Sleek Look */
body, 
body.font-style-two, 
p, 
span:not(.fa):not(.fab):not([class*="icon"]):not(.sub-title),
li, 
div:not([class*="fa"]):not([class*="icon"]):not([class*="validicon"]):not(.site-heading):not(.sub-title) {
    font-weight: 300 !important; /* Premium light weight */
}

/* 2. Elegant Light Headings (Manrope & Hanken) */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300 !important; /* Razor-thin, luxurious header styling */
    letter-spacing: -0.02em !important;
}

/* Specific heavy text/banners */
.banner-one-content-left h2,
.site-heading .title,
.site-heading h2 {
    font-weight: 300 !important;
}

/* 3. Lighter Navigation and Menu Links */
.validnavs ul.navbar-nav > li > a,
.validnavs ul.navbar-nav li a,
.attr-nav ul li a {
    font-weight: 400 !important; /* Lighter clean menu weights */
    letter-spacing: 0.05em !important;
}

/* Sub-headings and subtitles */
.sub-title {
    font-weight: 600 !important; /* Keep slight definition for sub-badges */
    letter-spacing: 0.15em !important;
}

/* Buttons retain clear definition with comfortable medium weight */
.btn-style-two, 
.btn-style-one, 
.btn, 
button {
    font-weight: 500 !important;
}

/* Lighter Marquee Text */
.text-scroll-animation h2 {
    font-weight: 300 !important;
}

/* 4. Team Card Height and Proportions Adjustment */
.team-style-one-item {
    height: 380px !important; /* Make cards shorter and beautifully compact */
    border-radius: 15px !important; /* Keep modern rounded card styling */
}

.team-style-one-item .thumb,
.team-style-one-item .thumb img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

/* Hide non-functional header search */
.top-search {
    display: none !important;
}

/* Lazy-load below-fold images */
img[loading="lazy"] {
    content-visibility: auto;
}

/* ==============================================================
   Technology Index grid (override theme defaults)
=================================================================== */
.technology-index-area .small-tech-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.technology-index-area .small-tech-grid .tech-index-one-item {
    width: 100%;
    margin: 0;
}

.technology-index-area .small-tech-grid .tech-index-one-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px 12px !important;
    min-height: 112px !important;
    text-decoration: none !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px;
    transition: transform 0.25s ease, background 0.25s ease;
    position: relative;
    z-index: 1;
}

.technology-index-area .small-tech-grid .tech-index-one-item a::after {
    border-radius: 8px;
}

.technology-index-area .small-tech-grid .tech-index-one-item a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-4px);
}

.technology-index-area .small-tech-grid .tech-index-one-item .icon {
    display: block !important;
    margin: 0 0 10px 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

.technology-index-area .small-tech-grid .tech-index-one-item span {
    display: block !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.25 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 991px) {
    .technology-index-area .small-tech-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .technology-index-area .small-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .technology-index-area .small-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==============================================================
   Projects carousel cards
=================================================================== */
.project-style-one-area .swiper-slide {
    height: auto;
    display: flex;
}

.project-style-one-area .project-style-one {
    width: 100%;
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    grid-template-columns: unset !important;
    background: #ffffff;
    min-height: 360px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(40, 38, 67, 0.08);
}

.project-style-one-area .project-style-one .thumb {
    width: 45%;
    flex-shrink: 0;
    position: relative;
    min-height: 320px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5efe6;
    padding: 16px;
    box-sizing: border-box;
}

.project-style-one-area .project-style-one .thumb img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
}

.project-style-one-area .project-style-one .thumb span {
    position: absolute;
    right: 0;
    top: 0;
    background: #776482;
    color: #ffffff;
    padding: 15px 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
}

.project-style-one-area .project-style-one .info {
    width: 55%;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.project-style-one-area .project-style-one .info > span {
    font-size: 48px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px #776482;
    margin-bottom: 12px;
    line-height: 1;
    display: block;
}

.project-style-one-area .project-style-one .info h3 {
    font-size: 22px;
    font-weight: 700 !important;
    margin-bottom: 14px;
    line-height: 1.3;
}

.project-style-one-area .project-style-one .info p {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 20px;
    flex: 1;
    min-height: 4.5em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-style-one-area .project-style-one .info .btn-simple {
    font-weight: 700 !important;
    font-size: 13px;
    text-transform: uppercase;
    color: #282643;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
}

@media (max-width: 767px) {
    .project-style-one-area .project-style-one {
        flex-direction: column;
        min-height: 0;
    }

    .project-style-one-area .project-style-one .thumb,
    .project-style-one-area .project-style-one .info {
        width: 100%;
    }

    .project-style-one-area .project-style-one .thumb {
        min-height: 220px;
    }
}

/* ==============================================================
   Footer — white text on dark background
=================================================================== */
footer.footer-style-three,
footer.footer-style-three .footer-top-style-three,
footer.footer-style-three .footer-style-three-bottom {
    color: #ffffff !important;
}

footer.footer-style-three p,
footer.footer-style-three li,
footer.footer-style-three h4,
footer.footer-style-three h5,
footer.footer-style-three .widget-title,
footer.footer-style-three .title-badge,
footer.footer-style-three .newsletter-style-three-card h4,
footer.footer-style-three ul.useful-link a,
footer.footer-style-three ul.contact-list a,
footer.footer-style-three ul.contact-list h5,
footer.footer-style-three-bottom p,
footer.footer-style-three-bottom a,
footer.footer-style-three .footer-top-style-three p {
    color: #ffffff !important;
}

footer.footer-style-three ul.useful-link a:hover,
footer.footer-style-three ul.contact-list a:hover,
footer.footer-style-three-bottom a:hover {
    color: var(--color-cream) !important;
    opacity: 1;
}

footer.footer-style-three .social-style-three a {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25);
}

footer.footer-style-three .social-style-three a:hover {
    color: #ffffff !important;
    background: var(--color-primary);
}