/* ============================================================
   KRAFTS BY OMKAR DESIGNS — Global Custom Stylesheet
   Applies premium, consistent styling across all pages.
   Always loaded AFTER style.css to ensure overrides apply.
   ============================================================ */

/* ---- BRAND COLOR TOKENS ---- */
:root {
    --okd-gold-start: #c89b3c;
    --okd-gold-end: #f5d485;
    --okd-gold-mid: #d4a843;
    --okd-cream: #f8f4ef;
    --okd-cream-dark: #f0e9df;
    --okd-dark: #1a1510;
    --okd-charcoal: #2d2420;
    --okd-text: #4a3f35;
    --okd-gold-gradient: linear-gradient(135deg, #c89b3c, #f5d485, #c89b3c);

    /* Global template overrides */
    --theme-color: #d4a843 !important;
}

/* ============================================================
   1. GLOBAL BODY & TYPOGRAPHY
   ============================================================ */
body {
    background-color: #ffffff;
    color: var(--okd-text);
}

/* Warm cream background for alt-bg sections */
.alt-bg {
    background-color: var(--okd-cream) !important;
}

/* Sub-title gold gradient accent */
.sub-title,
.sub-title.style2,
.sub-title.style3,
.sub-title.style4 {
    color: var(--okd-gold-mid) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    -webkit-text-fill-color: var(--okd-gold-mid) !important;
    text-transform: uppercase;
}

/* Section title refinement */
.sec-title {
    font-family: var(--title-font) !important;
    color: var(--okd-charcoal);
    line-height: 1.15;
}

.sec-title .title1,
.sec-title .title3 {
    font-family: var(--title-font) !important;
    color: var(--okd-gold-mid);
}

.sec-title.style2,
.sec-title.style4 {
    font-family: var(--title-font) !important;
    color: var(--okd-charcoal);
}

/* ============================================================
   2. BREADCRUMB / PAGE BANNER — PREMIUM REDESIGN
   ============================================================ */
.breadcumb-area {
    position: relative;
}

.breadcumb-wrapper {
    position: relative;
    background-color: var(--okd-dark) !important;
    padding: 120px 0 100px !important;
    overflow: hidden;
}

/* Dark overlay on top of background image for legibility */
.breadcumb-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(16, 10, 5, 0.88) 0%,
            rgba(30, 20, 10, 0.75) 50%,
            rgba(16, 10, 5, 0.82) 100%);
    z-index: 1;
}

/* Golden decorative line at bottom of breadcrumb */
.breadcumb-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c89b3c, #f5d485, #c89b3c, transparent);
    z-index: 2;
}

.breadcumb-content {
    position: relative;
    z-index: 3;
}

/* Ensure sub-titles and split-text are ALWAYS visible (prevents stuck animations at opacity 0) */
.text-anime,
.split-text,
.sub-title,
.sub-title *,
.text-anime .word,
.text-anime .char,
.split-text .word,
.split-text .char,
.split-line {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Page title */
.breadcumb-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(200, 155, 60, 0.4);
}

/* Breadcrumb navigation trail */
.breadcumb-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcumb-menu li {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.breadcumb-menu li a {
    color: var(--okd-gold-end);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcumb-menu li a:hover {
    color: #ffffff;
}

.breadcumb-menu li:not(:last-child)::after {
    content: '/';
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.4);
}

/* Shape overlays */
.breadcumb-shape {
    opacity: 0.06;
    z-index: 1;
}

/* ============================================================
   3. BUTTONS — PREMIUM GOLD STYLING
   ============================================================ */
.th-btn {
    background: linear-gradient(135deg, #c89b3c, #d4b060, #c89b3c) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(200, 155, 60, 0.3) !important;
}

.th-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(200, 155, 60, 0.45) !important;
    background: linear-gradient(135deg, #d4a843, #f5d485, #d4a843) !important;
}

.th-btn.style3 {
    background: transparent !important;
    border: 2px solid var(--okd-gold-mid) !important;
    color: var(--okd-gold-mid) !important;
    box-shadow: none !important;
}

.th-btn.style3:hover {
    background: linear-gradient(135deg, #c89b3c, #d4a843) !important;
    color: #ffffff !important;
}

.th-btn::before {
    display: none !important;
}

/* Line-btn (Read More links) */
.line-btn {
    color: var(--okd-gold-mid) !important;
    font-weight: 600;
}

.line-btn::after {
    background: var(--okd-gold-mid) !important;
}

/* ============================================================
   4. NAVIGATION — WARM HOVER STATES
   ============================================================ */
.main-menu>ul>li>a:hover,
.main-menu>ul>li.active>a {
    color: var(--okd-gold-mid) !important;
}

/* Underline indicator on active nav items */
.main-menu>ul>li.active>a::after {
    background-color: var(--okd-gold-mid) !important;
}

/* Header social icons */
.th-social a:hover i {
    color: #ffffff !important;
}

/* ============================================================
   5. ABOUT PAGE — SECTION IMPROVEMENTS
   ============================================================ */

/* About section boxes */
.about-box .box-icon {
    background: linear-gradient(135deg, rgba(200, 155, 60, 0.12), rgba(245, 212, 133, 0.15));
    border-radius: 12px;
    padding: 12px;
}

.about-box .box-title {
    color: var(--okd-charcoal) !important;
    font-weight: 700;
}

/* Counter cards */
.counter-card.style5 .box-number {
    background: var(--okd-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Material items */
.material-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--okd-charcoal) !important;
}

.material-item .box-title {
    color: var(--okd-charcoal) !important;
}

/* ============================================================
   6. SERVICE PAGE — SIDEBAR & CONTENT
   ============================================================ */

/* Service list sidebar */
.process-menu li.active a,
.process-menu li a:hover {
    color: var(--okd-gold-mid) !important;
    background-color: transparent !important;
    border-left-color: var(--okd-gold-mid) !important;
}

/* Service info widget */
.service-info ul li span {
    color: var(--okd-gold-mid) !important;
    font-weight: 600;
}

/* Service overview rating stars */
.service-info .fa-star {
    color: var(--okd-gold-mid) !important;
}

/* Service grid cards */
.service-grid .box-title a {
    color: var(--okd-charcoal) !important;
    font-weight: 700;
}

.service-grid:hover .box-title a {
    color: var(--okd-gold-mid) !important;
}

/* Checklist items */
.checklist.style4 ul li::before,
.checklist.style5 ul li::before {
    color: var(--okd-gold-mid) !important;
    background-color: rgba(200, 155, 60, 0.12) !important;
}

/* ============================================================
   7. TESTIMONIAL PAGE — CARD REFINEMENTS
   ============================================================ */

.testi-card.style3 {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 32px !important;
    border: 1px solid rgba(200, 155, 60, 0.15);
    transition: box-shadow 0.3s, transform 0.3s;
}

.testi-card.style3:hover {
    box-shadow: 0 12px 40px rgba(200, 155, 60, 0.15);
    transform: translateY(-4px);
}

.testi-card .box-rating .review .fa-star {
    color: var(--okd-gold-mid) !important;
}

.testi-card .box-rating .rating {
    color: var(--okd-gold-mid) !important;
    font-weight: 700;
}

.testi-card .box-title {
    color: var(--okd-charcoal) !important;
    font-weight: 700;
}

/* Testimonial image wrappers */
.testi-image_wrapp .box-content {
    background: linear-gradient(135deg, rgba(200, 155, 60, 0.08), rgba(245, 212, 133, 0.12));
    border-radius: 12px;
    padding: 12px 16px;
}

.testi-image_wrapp .box-title {
    color: var(--okd-charcoal) !important;
}

/* ============================================================
   8. GALLERY PAGE — CARD HOVERS & FILTER
   ============================================================ */

/* Gallery cards */
.gallery-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s, transform 0.3s;
}

.gallery-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    transform: translateY(-4px);
}

.gallery-content .box-title {
    color: var(--okd-charcoal);
    font-weight: 600;
    font-size: 15px;
}

/* Filter buttons */
.filter-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.filter-menu .tab-btn {
    border-radius: 50px !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 10px 24px !important;
    transition: all 0.25s;
    border: 1px solid rgba(200, 155, 60, 0.3) !important;
    color: var(--okd-charcoal) !important;
    background: #ffffff !important;
}

/* Hide the diagonal separator slashes from the original template */
.filter-menu .tab-btn:not(:last-child):before {
    display: none !important;
}

.filter-menu .tab-btn.active,
.filter-menu .tab-btn:hover {
    background: linear-gradient(135deg, #c89b3c, #d4a843) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(200, 155, 60, 0.35);
}

/* Gallery icon button (zoom) */
.gallery-card .icon-btn {
    background: linear-gradient(135deg, #c89b3c, #f5d485) !important;
    color: var(--okd-dark) !important;
}

.gallery-card .icon-btn:hover {
    transform: scale(1.1);
}

/* ============================================================
   9. CONTACT PAGE
   ============================================================ */

/* Contact media cards */
.contact-media {
    background: var(--okd-cream);
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid rgba(200, 155, 60, 0.15);
    transition: box-shadow 0.3s, transform 0.3s;
}

.contact-media:hover {
    box-shadow: 0 8px 32px rgba(200, 155, 60, 0.15);
    transform: translateY(-4px);
}

.contact-media .icon-btn {
    background: linear-gradient(135deg, #c89b3c, #d4a843) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(200, 155, 60, 0.3);
}

.contact-media .box-title {
    color: var(--okd-charcoal) !important;
    font-weight: 700;
}

.contact-media .box-text a {
    color: var(--okd-text);
    transition: color 0.2s;
}

.contact-media .box-text a:hover {
    color: var(--okd-gold-mid);
}

/* Contact form section bg */
.contact-area.alt-bg {
    background: var(--okd-cream) !important;
}

/* Form inputs */
.contact-form .form-control,
.widget-form .form-control {
    border-radius: 8px !important;
    border: 1px solid rgba(200, 155, 60, 0.2) !important;
    background: #ffffff !important;
    color: var(--okd-text) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form .form-control:focus,
.widget-form .form-control:focus {
    border-color: var(--okd-gold-mid) !important;
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.12) !important;
    outline: none;
}

/* Nice-select dropdown */
.nice-select {
    border: 1px solid rgba(200, 155, 60, 0.2) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

.nice-select.open,
.nice-select:focus {
    border-color: var(--okd-gold-mid) !important;
}

.nice-select .option:hover,
.nice-select .option.selected {
    color: var(--okd-gold-mid) !important;
}

/* ============================================================
   10. FOOTER — REFINED
   ============================================================ */
.footer-wrapper {
    background-color: #141008 !important;
    border-top: 2px solid rgba(200, 155, 60, 0.25);
}

.footer-wrapper .widget_title {
    color: #ffffff !important;
}

.footer-wrapper .about-text,
.footer-wrapper .footer-info {
    color: rgba(255, 255, 255, 0.6) !important;
}

.footer-wrapper .menu a {
    color: rgba(255, 255, 255, 0.65) !important;
    transition: color 0.2s, transform 0.2s;
}

.footer-wrapper .menu a:hover {
    color: var(--okd-gold-end) !important;
    transform: translateX(6px);
}

.footer-wrapper .th-social a i {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.footer-wrapper .th-social a:hover i {
    color: #ffffff !important;
}

/* Copyright bar */
.copyright-wrap .copyright-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

.copyright-wrap .copyright-text a {
    color: var(--okd-gold-end) !important;
}

/* Footer address — no justify */
.footer-wrapper .footer-info,
.th-widget-about .footer-info {
    text-align: left !important;
}

/* Footer footer-info icons */
.footer-info i {
    color: var(--okd-gold-mid) !important;
    margin-right: 8px;
}

/* Footer thin divider */
.footer-wrapper .widget-area {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   11. FLOATING BUTTONS — PHONE & WHATSAPP
   ============================================================ */
.float-btn.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
}

.float-btn.call {
    background: linear-gradient(135deg, #c89b3c, #d4a843) !important;
    box-shadow: 0 4px 16px rgba(200, 155, 60, 0.4) !important;
}

.float-btn {
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.float-btn:hover {
    transform: scale(1.12) !important;
}

/* ============================================================
   12. SCROLL TO TOP BUTTON
   ============================================================ */
.scroll-top {
    background: linear-gradient(135deg, #c89b3c, #d4a843) !important;
    box-shadow: 0 4px 14px rgba(200, 155, 60, 0.4);
}

/* ============================================================
   13. WIDGET TITLE UNDERLINE ACCENT
   ============================================================ */
.widget_title::after {
    background: linear-gradient(90deg, #c89b3c, #f5d485) !important;
}

/* ============================================================
   14. PROCESS MENU (Service page sidebar)
   ============================================================ */
.process-menu li {
    border-left: 3px solid rgba(200, 155, 60, 0.2);
    transition: border-color 0.2s;
}

.process-menu li:hover,
.process-menu li.active {
    border-left-color: var(--okd-gold-mid) !important;
    background: rgba(200, 155, 60, 0.06) !important;
}

/* Override original orange active state */
.process-menu li.active a {
    background-color: transparent !important;
    color: var(--okd-gold-mid) !important;
    font-weight: 700;
}

.process-menu li a:hover {
    color: var(--okd-gold-mid) !important;
    background-color: transparent !important;
}

.process-menu li.active a::before,
.process-menu li a:hover::before {
    color: var(--okd-gold-mid) !important;
}

/* ============================================================
   15. SECTION DIVIDER LINES
   ============================================================ */
.ser-line,
.line2 {
    border-color: rgba(200, 155, 60, 0.2) !important;
}

/* ============================================================
   16. COUNTER SECTION HEADINGS
   ============================================================ */
.counter-area2 .sec-title {
    font-family: var(--title-font) !important;
    color: var(--okd-charcoal) !important;
}

/* ============================================================
   17. GLOBAL SMOOTH SCROLLING & SELECTION
   ============================================================ */
html {
    scroll-behavior: smooth;
}

::selection {
    background-color: rgba(200, 155, 60, 0.3);
    color: var(--okd-dark);
}

/* ============================================================
   18. PAGE-SPECIFIC — ABOUT PAGE SECTION BACKGROUNDS
   ============================================================ */

/* Alternate sections get warm cream */
.space-top.alt-bg,
.space.alt-bg,
section.alt-bg {
    background-color: var(--okd-cream) !important;
}

/* About section image box */
.img-box5 .img1 img {
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   19. WHY CHOOSE US & WORKFLOW SECTIONS
   ============================================================ */

/* Main Services grid cards */
.service-item {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(200, 155, 60, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-item:hover {
    box-shadow: 0 12px 35px rgba(200, 155, 60, 0.12);
    transform: translateY(-5px);
}

.service-item::before {
    background-color: var(--okd-cream) !important;
}

/* Fix left column right-to-left alignment quirk */
.choose-block.style1 {
    direction: ltr !important;
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.choose-block.style1 .choose-block_img {
    margin-left: 30px;
    margin-right: 0px !important;
}

.choose-block:not(.style1) .choose-block_img {
    margin-right: 30px;
    margin-left: 0px !important;
}

.choose-block_img {
    margin-bottom: 0 !important;
}

.choose-block_img img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(21%) saturate(2811%) hue-rotate(9deg) brightness(88%) contrast(85%);
    transition: all 0.4s ease;
}

.choose-block:hover .choose-block_img img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(43%) saturate(1914%) hue-rotate(1deg) brightness(98%) contrast(92%);
}

.choose-block .box-title {
    font-weight: 700 !important;
    font-size: 28px !important;
    margin-bottom: 15px !important;
}

.choose-block .box-text {
    line-height: 1.6 !important;
    font-size: 16px !important;
}

/* Workflow section items */
.work-item .number {
    color: var(--okd-gold-start) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    opacity: 0.85;
}

.work-item .box-title {
    color: var(--okd-charcoal) !important;
    font-weight: 700 !important;
}

.work-item:hover .number {
    color: var(--okd-gold-mid) !important;
    opacity: 1;
}



/* ============================================================
   19. ICON BUTTONS ON BREADCRUMB SECTION (tour/zoom icons)
   ============================================================ */
.icon-btn {
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.icon-btn:hover {
    transform: scale(1.08) !important;
}

/* ============================================================
   20. RESPONSIVE — MOBILE BREADCRUMB
   ============================================================ */
@media (max-width: 767px) {
    .breadcumb-wrapper {
        padding: 80px 0 70px !important;
    }

    .breadcumb-title {
        font-size: clamp(28px, 7vw, 44px);
    }

    .contact-media {
        padding: 20px 18px;
    }
}

@media (max-width: 575px) {
    .breadcumb-wrapper {
        padding: 64px 0 60px !important;
    }
}

/* ============================================================
   21. PREMIUM PRELOADER — MODERN GLASS STYLE
   ============================================================ */
.loader-wrap {
    background: rgba(5, 5, 5, 0.92) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-wrap-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 25;
}

/* Glassmorphism panel for logo */
.loader-logo-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 35px 50px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loader-wrap .loader-wrap-heading .load-text {
    margin-bottom: 0px;
}

.loader-wrap .loader-wrap-heading .load-text img {
    max-width: 140px !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

/* Sleek loading bar */
.loader-progress-container {
    width: 160px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
}

.loader-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--okd-gold-gradient);
    box-shadow: 0 0 20px rgba(200, 155, 60, 0.6);
}


/* ============================================================
   21. TESTIMONIALS (ABOUT PAGE) — PREMIUM REDESIGN
   ============================================================ */

/* Section background & spacing */
#testi-sec {
    background-color: var(--okd-cream) !important;
    position: relative;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    background-image: radial-gradient(circle at 2px 2px, rgba(200, 155, 60, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
}

/* Title Area Clean-up */
#testi-sec .title-area {
    margin-bottom: 30px !important;
}

#testi-sec .sec-title {
    font-family: var(--title-font) !important;
    font-size: clamp(32px, 4vw, 52px);
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

#testi-sec .sec-title .fs-160 {
    font-family: var(--title-font) !important;
    font-size: clamp(36px, 5vw, 72px) !important;
    line-height: 1;
    color: var(--okd-charcoal);
    opacity: 0.2;
    margin: 0 5px;
    font-weight: 300;
    vertical-align: middle;
}

#testi-sec .sec-title .title3 {
    font-family: var(--title-font) !important;
    display: inline-block;
    color: var(--okd-gold-mid);
    font-weight: 800;
    margin-left: 5px;
}

/* Tab buttons (Thumbnails) */
.testi-box-tab {
    display: flex !important;
    justify-content: center;
    gap: 15px !important;
    margin-top: 20px !important;
    position: relative;
    padding: 20px 0;
}

.testi-box-tab .tab-btn {
    margin-top: 0 !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    max-height: 100px !important;
    border-radius: 50% !important;
    /* Circular thumbs are more modern */
    border: 4px solid #ffffff;
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
    filter: grayscale(100%) opacity(0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.testi-box-tab .tab-btn.active {
    filter: grayscale(0) opacity(1);
    transform: scale(1.1);
    border-color: var(--okd-gold-mid) !important;
    box-shadow: 0 10px 25px rgba(200, 155, 60, 0.3);
}

.testi-box-tab .tab-btn:hover {
    filter: grayscale(0) opacity(1);
    transform: translateY(-5px) scale(1.05);
}

/* Fixed Indicator — Disabled for circular layout simplicity */
.testi-box-tab .indicator {
    display: none !important;
}

/* Navigation controls */
.testi-area .icon-box {
    margin-top: 40px !important;
    justify-content: center !important;
    gap: 20px;
    margin-right: 0 !important;
}

.testi-area .icon-box .slider-arrow {
    width: 60px !important;
    height: 60px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(200, 155, 60, 0.2) !important;
    color: var(--okd-charcoal) !important;
}

.testi-area .icon-box .slider-arrow:hover {
    background: var(--okd-gold-gradient) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Testimonial Box Styling */
.testi-box.light {
    background: #ffffff;
    border-radius: 24px;
    padding: 50px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    position: relative;
    border: 1px solid rgba(200, 155, 60, 0.08);
}

.testi-box.light .box-quote {
    position: absolute;
    top: 30px;
    right: 40px;
    opacity: 0.1;
    width: 60px;
}

.testi-box.light .box-text {
    font-size: 19px !important;
    line-height: 1.8;
    color: var(--okd-text) !important;
    margin-bottom: 35px !important;
    position: relative;
    z-index: 1;
}

.testi-box.light .box-author img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 3px solid var(--okd-cream);
}

.testi-box.light .box-profile .box-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--okd-charcoal) !important;
}

.testi-box.light .box-profile .box-desig {
    font-size: 13px !important;
    color: var(--okd-gold-mid) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

@media (max-width: 991px) {
    .testi-box-tab {
        gap: 15px !important;
    }

    .testi-box-tab .tab-btn {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
    }
}

/* Premium Our Process Section Styling */
.process-area {
    position: relative;
    z-index: 2;
    background-color: #faf8f5 !important;
    /* Elegant off-white */
}

.process-box-wrap {
    position: relative;
    margin-top: 50px;
}

/* Connecting line on desktop */
@media (min-width: 1200px) {
    .process-box-wrap::before {
        content: "";
        position: absolute;
        top: 40%;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--okd-gold-mid), transparent);
        opacity: 0.3;
        z-index: 0;
    }
}

.process-box {
    text-align: center;
    position: relative;
    z-index: 1;
}

.process-box .box-inner {
    padding: 60px 40px;
    background: #ffffff;
    border-radius: 2px;
    /* Sleek minimal edges */
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    border: none;
    position: relative;
    overflow: hidden;
}

.process-box .box-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--okd-gold-gradient);
    transition: all 0.5s ease;
}

.process-box:hover .box-inner {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(181, 149, 101, 0.15);
}

.process-box:hover .box-inner::after {
    width: 100%;
}

.process-box .box-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--title-font);
    color: var(--okd-gold-mid);
    opacity: 0.5;
    letter-spacing: 2px;
}

.process-box .box-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: #fdfaf5;
    color: var(--okd-gold-mid);
    font-size: 32px;
    margin: 0 auto 30px;
    border-radius: 50%;
    transition: all 0.5s ease;
    border: 1px solid rgba(181, 149, 101, 0.1);
}

.process-box:hover .box-icon {
    background: var(--okd-gold-gradient);
    color: #ffffff;
    transform: scale(1.1);
    /* Subtle scale instead of rotation */
}

.process-box .box-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--okd-charcoal);
    font-family: var(--title-font) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.process-box .box-text {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
    color: var(--okd-text);
    opacity: 0.8;
}

/* Signature Box Styling */
.signature-box {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid var(--okd-gold-mid);
}

.signature-box .box-title {
    font-size: 32px;
    font-family: var(--title-font2) !important;
    /* Elegant theme font */
    color: var(--okd-gold-mid) !important;
    margin-bottom: 5px;
    font-weight: 500;
}

.signature-box .box-desig {
    font-size: 14px;
    color: var(--okd-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* CTA Area Refinement */
.cta-area {
    background-color: var(--okd-dark) !important;
    position: relative;
    z-index: 2;
}

.cta-area .sec-title {
    font-family: var(--title-font) !important;
    color: #ffffff !important;
}

.cta-area .sec-title .title1 {
    color: var(--okd-gold-mid) !important;
}

/* Team Member Hover Refinement */
.team-item:before {
    background-color: var(--okd-gold-mid) !important;
}

.team-item:hover .box-title,
.team-item:hover .team-desig {
    color: #ffffff !important;
}

.team-item:hover .box-title a {
    color: #ffffff !important;
}

/* ---------------------------------------------------
   Homepage Enhancements (more professional layout)
   --------------------------------------------------- */

/* Keep base background subtly warm */
body {
    background-color: var(--okd-cream);
}

/* Sticky header with soft blur + clearer links */
.th-header .sticky-wrapper.sticky {
    background-color: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.th-header .main-menu>ul>li>a {
    padding: 24px 0 !important;
}

.th-header .main-menu>ul>li>a:hover,
.th-header .main-menu>ul>li.active>a {
    color: var(--okd-gold-mid) !important;
}

.th-header .main-menu>ul>li>a::after {
    background: var(--okd-gold-mid) !important;
}

/* Hero styling improvements */
#hero.th-hero-wrapper {
    background: linear-gradient(135deg, rgba(248, 244, 239, 0.95), rgba(255, 255, 255, 0.95)) !important;
}

.okd-hero-left {
    max-width: 560px;
}

.okd-hero-heading {
    font-weight: 700;
}

.okd-hero-desc {
    color: rgba(51, 41, 33, 0.85);
}

.okd-hero-chips .okd-hero-chip {
    border: 1px solid rgba(196, 163, 109, 0.45);
    background: rgba(255, 255, 255, 0.7);
}

.okd-hero-mosaic {
    gap: 10px;
}

.okd-mosaic-cell img {
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.okd-hero-badge {
    padding: 14px 18px;
}

.okd-hero-badge .okd-badge-icon {
    width: 44px;
    height: 44px;
}

/* Dark section background for white-text areas (like Instagram) */
.okd-dark-sec {
    background-color: var(--okd-dark) !important;
    position: relative;
    z-index: 1;
}

.okd-hero-badge .okd-badge-text strong {
    font-size: 15px;
}

.okd-scroll-hint {
    opacity: 0.75;
}

.okd-scroll-hint a:hover {
    opacity: 1;
}

/* Improve section spacing for consistency */
.space {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

@media (max-width: 991px) {
    .okd-hero-left {
        padding: 70px 24px 40px 24px;
    }

    .okd-hero-mosaic {
        height: 60vw;
    }

    .okd-hero-badge {
        bottom: 16px;
        left: 16px;
        padding: 12px 14px;
    }
}