/* 
    -- Table of Content --

    * 01 - Menu
    * 02 - Responsive Sidebar Menu
    * 03 - Global Color
    * 04 - Header
    * 05 - Section Header
    * 06 - Left Sidebar
    * 07 - Hero Section
    * 08 - Home 3
    * 09 - Home 5
    * 10 - About
    * 11 - Resume
    * 12 - Services
    * 13 - Skills
    * 14 - Portfolio
    * 15 - Testimonial
    * 16 - Client
    * 17 - Pricing Table
    * 18 - Contact
    * 19 - Breadcrumb
    * 20 - Blog items
    * 21 - Blog Style 2
    * 22 - Blog Details
    * 23 - Comment
    * 24 - Comment Form
    * 25 - Footer
    * @Keyframe

*/
:root {
    --primary_color: hsl(206, 86%, 53%);
}
*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    font-size: 16px;
    scroll-behavior: smooth;
    color: #999999;
    background: #1f1f1f;
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
}
.bg-white {
    background: #fff;
}
img {
    max-width: 100%;
}
a {
    text-decoration: none;
}
.text-right {
    text-align: right;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.content-width {
    max-width: 770px;
    width: 100%;
    margin-left: auto;
}
.theme-btn {
    background: var(--primary_color);
    color: #000000;
    display: block;
    text-align: center;
    padding: 11px 58px 10px 58px;
    display: inline-flex;
    align-items: center;
    border-radius: 30px;
    justify-content: center;
    text-transform: uppercase;
    border: none;
    transition: .3s;
    cursor: pointer;
    border: 2px solid var(--primary_color);
}
.theme-btn i {
    font-size: 24px;
    margin-right: 10px;
    display: block;
    margin-bottom: 3px;
}
.theme-btn:hover {
    background: none;
    color: var(--primary_color);
}
.theme-btn.theme-btn-outline-light {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.theme-btn.theme-btn-outline-light:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.theme-btn:focus-visible,
.menu li a:focus-visible,
.menu li .scroll-to:focus-visible,
.responsive-sidebar-menu a:focus-visible {
    outline: 2px solid var(--primary_color);
    outline-offset: 2px;
}
.theme-btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.landing-color-palette {
    position: fixed;
    top: 26px;
    right: 58px;
    z-index: 220;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #565656;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.92);
}
.landing-color-palette .landing-color-swatch,
.mobile-theme-palette .landing-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.landing-color-palette .landing-color-swatch:hover,
.mobile-theme-palette .landing-color-swatch:hover {
    transform: scale(1.1);
}
.landing-color-palette .landing-color-swatch[data-color="#28e98c"], .mobile-theme-palette .landing-color-swatch[data-color="#28e98c"] { background: #28e98c; }
.landing-color-palette .landing-color-swatch[data-color="#e4af12"], .mobile-theme-palette .landing-color-swatch[data-color="#e4af12"] { background: #e4af12; }
.landing-color-palette .landing-color-swatch[data-color="#fe6f1d"], .mobile-theme-palette .landing-color-swatch[data-color="#fe6f1d"] { background: #fe6f1d; }
.landing-color-palette .landing-color-swatch[data-color="#14c5fd"], .mobile-theme-palette .landing-color-swatch[data-color="#14c5fd"] { background: #14c5fd; }
.landing-color-palette .landing-color-swatch[data-color="#c0c0c0"], .mobile-theme-palette .landing-color-swatch[data-color="#c0c0c0"] { background: #c0c0c0; }
.landing-color-palette .landing-color-swatch.is-active,
.mobile-theme-palette .landing-color-swatch.is-active,
.global-color .global-color-option .color-boxed a.clr-active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.landing-color-palette .landing-color-swatch:focus-visible,
.mobile-theme-palette .landing-color-swatch:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.top-auth-icons {
    position: fixed;
    top: 26px;
    right: 148px;
    z-index: 230;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.top-auth-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #565656;
    color: #f3f3f3;
    background: rgba(0, 0, 0, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.top-auth-icon i {
    font-size: 15px;
    line-height: 1;
}
.top-auth-icon:hover,
.top-auth-icon.active {
    border-color: var(--primary_color);
    color: var(--primary_color);
    transform: translateY(-1px);
}
.home6-page:not(.inner-page) .top-auth-icons {
    top: 74px;
    right: 58px;
}
@media (max-width: 768px) {
    .landing-color-palette {
        top: 14px;
        right: 14px;
        padding: 6px 8px;
        gap: 6px;
    }
    .landing-color-palette .landing-color-swatch {
        width: 12px;
        height: 12px;
    }
    .top-auth-icons {
        top: 14px;
        right: 128px;
        gap: 6px;
    }
    .top-auth-icon {
        width: 30px;
        height: 30px;
    }
    .top-auth-icon i {
        font-size: 13px;
    }
    .home6-page:not(.inner-page) .top-auth-icons {
        top: 56px;
        right: 14px;
    }
}

/* Login/Register auth pages: keep existing layout/theme, but use pure black surfaces + white outline controls */
#login-hero,
#register-hero,
#login-form,
#register-form,
#login-form .custom-container,
#register-form .custom-container,
#login-form .contact-content,
#register-form .contact-content {
    background: #000000;
}
#login-form .auth-panel,
#register-form .auth-panel {
    background: #000000;
    border: none;
    box-shadow: none;
}
#login-hero .page-intro .eyebrow,
#register-hero .page-intro .eyebrow,
#login-hero .page-intro h1,
#register-hero .page-intro h1,
#login-hero .page-intro p,
#register-hero .page-intro p,
#login-form .auth-panel h3,
#register-form .auth-panel h3,
#login-form .auth-panel p,
#register-form .auth-panel p,
#login-form .auth-panel .form-label,
#register-form .auth-panel .form-label,
#login-form .auth-panel a,
#register-form .auth-panel a {
    color: #ffffff;
}
#login-form .auth-panel .form-control,
#register-form .auth-panel .form-control {
    background: #000000;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 30px;
    padding: 12px 18px;
}
#login-form .auth-panel .form-control::placeholder,
#register-form .auth-panel .form-control::placeholder {
    color: #cfcfcf;
}
#login-form .auth-panel .form-control:focus,
#register-form .auth-panel .form-control:focus {
    color: #ffffff;
    border-color: #ffffff;
    background: #000000;
    box-shadow: none;
}
#login-form .auth-panel .theme-btn,
#register-form .auth-panel .theme-btn {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
#login-form .auth-panel .theme-btn:hover,
#register-form .auth-panel .theme-btn:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
#register-form .auth-alt-divider span {
    display: inline-block;
    color: #ffffff;
    font-size: 14px;
    opacity: 0.85;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

/* About page: ensure first hero header text is white */
#about-overview .page-intro .eyebrow,
#about-overview .page-intro h1 {
    color: #ffffff;
}
.custom-container {
    max-width: 1130px;
    padding: 0 15px;
    margin: auto;
}
.subtitle {
    font-size: 12px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
    border: 1px solid #565656;
    padding: 9px 20px;
    border-radius: 30px;
    margin-bottom: 53px;
    display: inline-flex;
    align-items: center;
}
.subtitle i {
    margin-bottom: 1px;
    font-size: 14px;
    margin-right: 10px;
}

.page-loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-loader .loader-brand-mark {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.92) 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 10px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: loaderBrandReveal 1.2s ease-out infinite alternate;
}

.page-loader .loader-logo-trace {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    z-index: 2;
    pointer-events: none;
}

.page-loader .loader-logo-trace .trace-stroke {
    fill: none;
    stroke: #ffffff;
    stroke-width: 7.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(20, 197, 253, 0.32));
    stroke-dasharray: 380;
    stroke-dashoffset: 380;
    animation: loaderStrokeDraw 0.95s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.page-loader .loader-logo-trace .trace-stroke-main { animation-delay: 0.04s; }
.page-loader .loader-logo-trace .trace-stroke-left { animation-delay: 0.22s; }
.page-loader .loader-logo-trace .trace-stroke-right { animation-delay: 0.36s; }
.page-loader .loader-logo-trace .trace-stroke-base { animation-delay: 0.5s; }

.page-loader .loader-logo-reveal {
    width: 78px;
    height: 78px;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(1.08) saturate(1.02) drop-shadow(0 0 8px rgba(20, 197, 253, 0.18));
    animation: loaderLogoReveal 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: 0.82s;
    position: relative;
    z-index: 1;
}

@keyframes loaderBrandReveal {
    0% {
        transform: scale(0.96);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 8px 16px rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 1px rgba(20, 197, 253, 0.28) inset, 0 14px 28px rgba(0, 0, 0, 0.62);
    }
}

@keyframes loaderLogoReveal {
    0% {
        opacity: 0;
        transform: scale(0.94);
        clip-path: inset(0 100% 0 0);
    }
    55% {
        opacity: 0.92;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes loaderStrokeDraw {
    0% {
        opacity: 0;
        stroke-dashoffset: 380;
    }
    12% {
        opacity: 1;
    }
    78% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    100% {
        opacity: 0.1;
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader .loader-brand-mark,
    .page-loader .loader-logo-reveal,
    .page-loader .loader-logo-trace .trace-stroke {
        animation: none !important;
    }
}


/* Icon Menu */
.icon-menu {
    position: absolute;
    right: 68px;
    top: 60px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    border: 1px solid #575757;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: .3s;
    background: #1f1f1f;
    z-index: 99;
}
.icon-menu span {
    width: 20px;
    display: block;
    height: 2px;
    background: #fff;
    transition: .3s;
}
.icon-menu:hover {
    border-color: var(--primary_color);
}
.icon-menu:hover span {
    background: var(--primary_color);
}
.icon-menu.consultation-trigger-icon {
    background: #101010;
    border-color: #565656;
    gap: 0;
}
.icon-menu.consultation-trigger-icon span {
    display: none;
}
.icon-menu.consultation-trigger-icon i {
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    transition: color .25s ease;
}
.icon-menu.consultation-trigger-icon:hover {
    border-color: var(--primary_color);
}
.icon-menu.consultation-trigger-icon:hover i {
    color: var(--primary_color);
}


#scroll-section {
    /* overflow-x: hidden !important;
    overflow-y: auto !important; */
    /* width: 100%; */
    /* height: 100%; */
    /* height: 100vh; */
}
.scroll-content {
    /* transform: translate(0) !important; */
}
main.drake-main {
    /* inset: 0px;
    width: 100%;
    height: 100vh;
    position: fixed; */
    /* overflow: hidden; */
    transition: margin-left 0.35s ease;
}
.page-section {
    overflow: hidden;
}

body.has-sidebar-drawer {
    --sidebar-panel-left: 20px;
    --sidebar-panel-width: 485px;
    --sidebar-open-space: calc(var(--sidebar-panel-left) + var(--sidebar-panel-width) + 28px);
    --sidebar-closed-space: 0px;
}
body.has-sidebar-drawer .drake-main {
    margin-left: var(--sidebar-open-space);
}
body.has-sidebar-drawer .content-width {
    margin-left: 0;
}


/* 01 - Menu */
.menu {
    flex-direction: column;
    border: 1px solid #575757;
    border-radius: 30px;
    position: fixed;
    right: 68px;
    top: 322px;
    /* width: 55px; */
    text-align: center;
    gap: 20px;
    padding: 24px 0;
    background: #1f1f1f;
    z-index: 20;
}
.menu li .scroll-to,
.menu li a {
    display: block;
    position: relative;
    /* padding: 10px 10px; */
    width: 55px;
    transition: .3s;
    color: #999999;
    cursor: pointer;
}
.menu li a.active,
.menu li a:hover,
.menu li .scroll-to.active,
.menu li .scroll-to:hover {
    color: var(--primary_color);
}
.menu li .scroll-to:hover span,
.menu li a:hover span {
    opacity: 1;
    visibility: visible;
}
.menu li .scroll-to i,
.menu li a i {
    font-size: 20px;
    display: block;
}
.menu li .scroll-to span,
.menu li a span {
    position: absolute;
    transition: .3s;
    font-size: 12px;
    background: #404042;
    right: 100%;
    color: #fff;
    display: block;
    padding: 3px 8px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
}
.menu li .scroll-to span::before,
.menu li a span::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #404042;
    position: absolute;
    right: -3px;
    top: 50%;
    transform: rotate(54deg) skew(-8deg, -39deg);
    margin-top: -5px;
    z-index: -1;
}

/* 02 - Responsive Sidebar Menu */
.responsive-sidebar-menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
.responsive-sidebar-menu.active {
    opacity: 1;
    visibility: visible;
}
.global-color .inner .overlay,
.responsive-sidebar-menu .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #565656;
    opacity: 0.5;
}
.responsive-sidebar-menu .sidebar-menu-inner {
    max-width: 345px;
    width: 100%;
    margin-left: auto;
    background: #191919;
    height: 100%;
    overflow-x: hidden;
    padding-top: 50px;
    margin-right: -250px;
    transition: .3s;
}
.responsive-sidebar-menu.active .sidebar-menu-inner {
    margin-right: 0;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap {
    width: 46%;
    margin: auto;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap p {
    font-size: 18px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu {
    position: relative;
    right: auto;
    left: 0;
    top: 0;
    transform: translateY(0);
    background: none;
    border-radius: 0;
    border: none;
    margin-bottom: 30px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a:hover span {
    color: #fff;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a i {
    margin-bottom: 2px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a span {
    position: relative;
    right: 0;
    opacity: 1;
    visibility: visible;
    color: #999999;
    background: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a span::before {
    display: none
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a.active span {
    color: #fff;
}
.responsive-sidebar-menu .sidebar-menu-inner .global-color-option,
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social {
    width: 46%;
    margin: auto;
}
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social ul {
    gap: 15px;
}
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social ul li a {
    color: #999999;
    transition: .3s;
    font-size: 16px;
}
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social ul li a:hover {
    color: var(--primary_color);
}

/* Mobile app-like navigation (mobile only) */
.mobile-app-nav,
.mobile-app-nav-overlay,
.mobile-app-nav-sheet,
.mobile-app-tabbar {
    display: none;
}
@media (max-width: 991px) {
    :root {
        --m-space-1: 8px;
        --m-space-2: 12px;
        --m-space-3: 16px;
        --m-space-4: 20px;
        --m-space-5: 24px;
        --m-radius-1: 12px;
        --m-radius-2: 16px;
        --m-radius-3: 20px;
    }
    .top-auth-icons {
        display: none;
    }
    .drake-main .left-sidebar,
    .sidebar-drawer-rail {
        display: none !important;
    }
    .mobile-app-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(max(10px, env(safe-area-inset-top)) + 2px);
        z-index: 420;
        width: auto;
        border: 1px solid #3b3b3f;
        border-radius: var(--m-radius-2);
        background: linear-gradient(160deg, rgba(20, 20, 22, 0.96), rgba(8, 8, 10, 0.98));
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        gap: 12px;
    }
    .mobile-app-nav-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .mobile-app-logo {
        display: inline-flex;
        align-items: center;
    }
    .mobile-app-logo img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }
    .mobile-app-nav-context {
        min-width: 0;
        display: inline-flex;
        flex-direction: column;
        gap: 2px;
    }
    .mobile-app-nav-context span {
        font-size: 10px;
        color: #9b9ca2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1;
    }
    .mobile-app-nav-context strong {
        color: #f5f6f8;
        font-size: 14px;
        line-height: 1.1;
        letter-spacing: 0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
    .mobile-app-nav button {
        border: 1px solid #494a50;
        background: #101114;
        color: #ffffff;
        border-radius: 999px;
        min-height: 42px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        transition: 0.22s ease;
    }
    .mobile-app-nav button i {
        font-size: 18px;
        line-height: 1;
    }
    .mobile-app-nav button:hover {
        color: var(--primary_color);
        background: rgba(20, 197, 253, 0.08);
        border-color: var(--primary_color);
    }
    .mobile-app-nav-toggle {
        color: #ffffff !important;
    }
    .mobile-app-nav-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-app-nav-avatar {
        padding: 0;
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        flex: 0 0 42px;
        overflow: hidden;
    }
    .mobile-app-nav-avatar img {
        width: 42px;
        height: 42px;
        max-width: 42px;
        max-height: 42px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: 999px;
        display: block;
    }
    .mobile-app-nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.52);
        z-index: 418;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .mobile-app-nav-sheet {
        position: fixed;
        inset: 0;
        transform: translateY(100%);
        z-index: 419;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border: none;
        border-radius: 0;
        background: #111214;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.26s ease, transform 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .mobile-app-tabbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 421;
        display: grid;
        gap: 6px;
        padding: 8px;
        border: 1px solid #414349;
        border-radius: var(--m-radius-2);
        background: linear-gradient(170deg, rgba(18, 18, 22, 0.95), rgba(10, 10, 12, 0.98));
        backdrop-filter: blur(10px);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    }
    .mobile-app-tabbar-auth {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .mobile-app-tabbar-guest {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .mobile-app-tab {
        border: 1px solid #34363a;
        border-radius: var(--m-radius-1);
        background: rgba(17, 18, 20, 0.88);
        color: #d8d8d8;
        min-height: 50px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: 0.22s ease;
    }
    .mobile-app-tab i {
        font-size: 16px;
        line-height: 1;
    }
    .mobile-app-tab:hover,
    .mobile-app-tab.is-active {
        border-color: var(--primary_color);
        color: var(--primary_color);
        background: rgba(20, 197, 253, 0.08);
        box-shadow: inset 0 0 0 1px rgba(20, 197, 253, 0.22), 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    .mobile-app-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
        border-bottom: 1px solid #2f2f2f;
        background: radial-gradient(circle at 20% 0%, rgba(32, 32, 38, 0.4), rgba(15, 15, 18, 0.98) 35%), #111214;
    }
    .mobile-app-drawer-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #ffffff;
    }
    .mobile-app-drawer-brand img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }
    .mobile-app-drawer-brand span {
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .mobile-app-drawer-close {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1px solid #4a4a4a;
        background: #0f0f0f;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-app-drawer-close i {
        font-size: 20px;
    }
    .mobile-app-drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }
    .mobile-app-drawer-profile {
        border: 1px solid #3a3b41;
        border-radius: var(--m-radius-2);
        background: linear-gradient(180deg, #14161b, #0e0f12);
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .mobile-app-drawer-profile-photo {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 0 0 2px rgba(20, 197, 253, 0.12);
        flex-shrink: 0;
    }
    .mobile-app-drawer-profile-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .mobile-app-drawer-profile-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .mobile-app-drawer-profile-copy strong {
        color: #f4f6fa;
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: 0.01em;
    }
    .mobile-app-drawer-profile-copy span {
        color: #c6cad2;
        font-size: 12px;
        line-height: 1.3;
    }
    .mobile-app-drawer-profile-copy small {
        color: #8f95a1;
        font-size: 11px;
        line-height: 1.3;
    }
    .mobile-app-drawer-content::-webkit-scrollbar {
        width: 4px;
    }
    .mobile-app-drawer-content::-webkit-scrollbar-thumb {
        background: #3f3f3f;
        border-radius: 999px;
    }
    .mobile-app-drawer-group {
        margin-bottom: 20px;
    }
    .mobile-app-drawer-group:last-child {
        margin-bottom: 0;
    }
    .mobile-app-drawer-group-title {
        color: #d8dbe0;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin: 0 0 12px 4px;
    }
    .mobile-app-drawer-link {
        width: 100%;
        border: 1px solid #3a3b41;
        border-radius: var(--m-radius-1);
        background: linear-gradient(180deg, #111216, #0d0e11);
        padding: 15px 14px;
        color: #eef0f4;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 9px;
        transition: 0.22s ease;
    }
    .mobile-app-drawer-link:last-child {
        margin-bottom: 0;
    }
    .mobile-app-drawer-link-main {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .mobile-app-drawer-link-main i {
        font-size: 18px;
    }
    .mobile-app-drawer-link-main span {
        font-size: 15px;
        line-height: 1.2;
        letter-spacing: 0.01em;
    }
    .mobile-app-drawer-link > i {
        font-size: 16px;
        color: #8d9098;
    }
    .mobile-app-drawer-link:hover,
    .mobile-app-drawer-link.is-active {
        border-color: var(--primary_color);
        color: var(--primary_color);
        background: rgba(20, 197, 253, 0.08);
        transform: translateX(1px);
    }
    .mobile-app-install-btn {
        width: 100%;
        border: 1px solid #3a3b41;
        border-radius: var(--m-radius-1);
        background: linear-gradient(180deg, #111216, #0d0e11);
        padding: 14px 14px;
        color: #eef0f4;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transition: 0.22s ease;
    }
    .mobile-app-install-btn:hover {
        border-color: var(--primary_color);
        color: var(--primary_color);
        background: rgba(20, 197, 253, 0.08);
    }
    .mobile-app-install-btn .mobile-app-drawer-link-main i {
        font-size: 18px;
    }
    .mobile-app-install-btn > i {
        font-size: 16px;
        color: #8d9098;
    }
    .mobile-theme-palette {
        border: 1px solid #3a3b41;
        border-radius: var(--m-radius-1);
        padding: 10px 12px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(180deg, #111216, #0d0e11);
        width: 100%;
    }
    .mobile-theme-palette .landing-color-swatch {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }
    body.mobile-nav-open .mobile-app-nav-overlay,
    body.mobile-nav-open .mobile-app-nav-sheet {
        opacity: 1;
        pointer-events: auto;
    }
    body.mobile-nav-open .mobile-app-tabbar {
        opacity: 0;
        pointer-events: none;
    }
    body.mobile-nav-open .mobile-app-nav-sheet {
        transform: translateY(0);
    }
    body.mobile-nav-open {
        overflow: hidden;
    }
    .hero-section {
        padding-top: 28px;
        padding-bottom: 40px;
    }
    .hero-section .hero-content .page-intro h1 {
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
    }
    .hero-section .hero-content .page-intro p {
        font-size: 15px;
        line-height: 1.55;
        color: #c4c7cf;
        margin-bottom: 14px;
    }
    .mobile-hero-quick-cta {
        display: flex;
        margin: 0 0 10px 0;
    }
    .mobile-hero-quick-cta .theme-btn {
        min-height: 42px;
        padding: 9px 18px;
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }
    .stats-strip.landing-service-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding: 2px 2px 8px 2px;
        margin-top: 14px;
        margin-bottom: 12px;
        scrollbar-width: thin;
        scrollbar-color: #3d3f45 transparent;
    }
    .stats-strip.landing-service-grid::-webkit-scrollbar {
        height: 4px;
    }
    .stats-strip.landing-service-grid::-webkit-scrollbar-thumb {
        background: #3d3f45;
        border-radius: 999px;
    }
    .landing-service-card {
        flex: 0 0 min(84vw, 300px);
        min-height: 252px;
        scroll-snap-align: start;
        text-align: left;
        padding: 18px 16px;
    }
    .landing-service-icon {
        margin: 0 0 10px 0;
    }
    .landing-service-card .landing-service-title {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .landing-service-card .landing-service-desc {
        margin-left: 0;
        margin-right: 0;
        -webkit-line-clamp: 3;
    }
    .landing-service-card .landing-service-meta {
        text-align: left;
        margin-top: 10px;
    }
    .landing-service-inline-cta {
        justify-content: flex-start;
        font-size: 11px;
        margin-top: 12px;
    }
    .newsletter-cta-card {
        margin-top: 10px;
        padding: 16px 14px;
        border-radius: 16px;
    }
    .newsletter-cta-card .newsletter-cta-copy h3 {
        font-size: 26px;
        margin-bottom: 8px;
    }
    .newsletter-cta-card .newsletter-cta-copy p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .newsletter-cta-row {
        gap: 8px;
    }
    .newsletter-cta-row input {
        height: 42px;
        padding: 0 12px;
    }
    .newsletter-cta-row .newsletter-submit-btn {
        min-width: 112px;
        min-height: 42px;
        font-size: 11px;
        padding: 0 14px;
    }
    #user-journey {
        padding-top: 28px;
    }
    #user-journey .section-header h1 {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.14;
        margin-bottom: 10px;
    }
    #user-journey .services-items.landing-two-col-grid {
        gap: 12px;
    }
    #user-journey .services-items.landing-two-col-grid .service-item {
        padding: 18px 16px;
        border-radius: 16px;
    }
    #user-journey .services-items.landing-two-col-grid .service-item h2 {
        font-size: 20px;
        margin-bottom: 8px;
    }
    #user-journey .services-items.landing-two-col-grid .service-item p {
        margin-bottom: 14px;
    }
    .whatsapp-float {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px);
    }
    .drake-main {
        padding-top: calc(80px + env(safe-area-inset-top));
        padding-bottom: calc(118px + env(safe-area-inset-bottom));
    }
}

/* 03 - Global Color */
.global-color {
    position: fixed;
    left: 0;
    top: 50px;
    z-index: 100;
}
.global-color .inner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
.global-color.active .inner {
    opacity: 1;
    visibility: visible;
}
.global-color .setting-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    background: #1f1f1f;
}
.global-color .inner .global-color-option .close-settings {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #fff;
    font-size: 20px;
}
.global-color .inner .global-color-option .global-color-option-inner p {
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 25px;
}
.global-color .inner .global-color-option .global-color-option-inner .themes {
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li {
    margin-right: 80px;
    margin-bottom: 55px;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li a {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    display: block;
    line-height: 1.2;
    position: relative;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li a::before {
    content: '';
    width: 100%;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0;
    transition: .3s;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li a:hover::before,
.global-color .inner .global-color-option .global-color-option-inner .themes li.active a::before {
    opacity: 1;
}
.global-color .inner .global-color-option {
    max-width: 1043px;
    width: 100%;
    margin-left: auto;
    background: #191919;
    height: 100%;
    overflow-x: hidden;
    padding-top: 50px;
    margin-right: -400px;
    transition: .4s;
    padding: 134px;
}
.global-color .inner .global-color-option h2 {
    color: #fff;
    font-weight: 200;
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 80px;
}
.global-color.active .inner .global-color-option {
    margin-right: 0;
}
.global-color .global-color-option .color-boxed {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 105px;
    padding-top: 30px;
}
.global-color .global-color-option .color-boxed a {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    background: #28e98c;
}
.global-color .global-color-option .color-boxed a::before {
    content: '';
    border: 1px solid #fff;
    position: absolute;
    border-radius: 50%;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: .3s;
}
.global-color .global-color-option .color-boxed a::after {
    content: '';
    position: absolute;
    border: none;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
}
.global-color .global-color-option .color-boxed a.clr-active::after,
.global-color .global-color-option .color-boxed a:hover::after,
.global-color .global-color-option .color-boxed a:hover::before,
.global-color .global-color-option .color-boxed a.clr-active::before {
    opacity: 1;
}
.global-color .global-color-option .color-boxed a:nth-child(2) {
    background: #e4af12;
}
.global-color .global-color-option .color-boxed a:nth-child(3) {
    background: #fe6f1d;
}
.global-color .global-color-option .color-boxed a:nth-child(4) {
    background: #14c5fd;
}
.global-color .global-color-option .color-boxed a:nth-child(5) {
    background: #c0c0c0;
}
.global-color .global-color-option .color-boxed a i {
    font-size: 14px;
}


/* 04 - Header */
.header-area {
    background: #1f1f1f;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 25px 0;
}
.header-area .logo {
    display: block;
}
.header-area .logo img {
    display: block;
}
.header-area nav {
    transition: .3s;
}
.header-area nav .nav-menu {
    gap: 25px;
    display: flex;
}
.header-area nav .nav-menu li {
    position: relative;
}
.header-area nav .nav-menu li .toggle-sub-dropdown,
.header-area nav .nav-menu li .toggle-dropdown {
    display: none;
    width: 35px;
    text-align: center;
}
.header-area nav .nav-menu li .dropdown {
    position: absolute;
    left: 0;
    width: 200px;
    background: #000;
    box-shadow: 1px 6px 20px rgb(0 0 0 / 20%);
    transition: .3s;
    opacity: 0;
    visibility: hidden;
    padding: 5px 0;
}
.header-area nav .nav-menu li .dropdown li a {
    padding: 8px 15px;
    line-height: 1.2;
}
.header-area nav .nav-menu li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
}
.header-area nav .nav-menu li .dropdown li .dropdown {
    left: 100%;
    top: 0;
}
.header-area nav .nav-menu li a {
    color: #fff;
    display: block;
    transition: .3s;
    padding: 8px 0;
}
.header-area nav .nav-menu li a:hover {
    color: var(--primary_color);
}
.header-area .header-right .show-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    border: 1px solid rgb(255 255 255 / 30%);
    margin-left: auto;
}
.header-area nav .close-menu {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 25px;
    cursor: pointer;
    color: #fff;
}


/* 05 - Section Header */
.section-header h1 {
    font-size: 48px;
    line-height: 60px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 33px;
}
.section-header h1 span {
    color: var(--primary_color);
}


/* 06 - Left Sidebar */
.left-sidebar {
    max-width: var(--sidebar-panel-width);
    width: var(--sidebar-panel-width);
    border-radius: 30px;
    border: 1px solid #565656;
    position: fixed;
    left: var(--sidebar-panel-left);
    top: 50%;
    transform: translateY(-50%);
    padding: 50px;
    z-index: 10;
    background: #1f1f1f;
    transition: transform 0.35s ease, opacity 0.35s ease;
    height: 88vh;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.drake-main .left-sidebar {
    display: none;
}
body.has-sidebar-drawer .drake-main .left-sidebar {
    display: block;
}
body.has-sidebar-drawer #globalSidebarMenu {
    transform: translate(-120%, -50%);
    opacity: 0;
    pointer-events: none;
}
body.has-sidebar-drawer.sidebar-mode-menu #globalSidebar {
    transform: translate(-120%, -50%);
    opacity: 0;
    pointer-events: none;
}
body.has-sidebar-drawer.sidebar-mode-menu #globalSidebarMenu {
    transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
}
body.has-sidebar-drawer.sidebar-mode-profile #globalSidebar {
    transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
}
.sidebar-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #565656;
    background: #121212;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}
.sidebar-drawer-close:hover {
    border-color: var(--primary_color);
    color: var(--primary_color);
}
.sidebar-drawer-rail {
    position: fixed;
    left: calc(var(--sidebar-panel-left) + var(--sidebar-panel-width) - 21px);
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    min-height: 160px;
    border-radius: 24px;
    border: 1px solid #565656;
    background: #151515;
    color: #ffffff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 12;
    cursor: pointer;
    transition: border-color 0.25s ease;
}
.sidebar-drawer-rail i {
    font-size: 18px;
}
.sidebar-drawer-rail span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.08em;
    font-size: 11px;
    text-transform: uppercase;
}
.sidebar-drawer-rail:hover {
    border-color: var(--primary_color);
}
.menu-sidebar .sidebar-header {
    margin-bottom: 28px;
}
.sidebar-menu-body {
    margin-bottom: 24px;
}
.sidebar-menu-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sidebar-nav-list {
    display: grid;
    gap: 8px;
}
.sidebar-nav-list a {
    width: 100%;
    border: 1px solid #565656;
    border-radius: 14px;
    color: #f0f0f0;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}
.sidebar-nav-list a i {
    font-size: 16px;
}
.sidebar-nav-list a:hover,
.sidebar-nav-list a.active {
    border-color: var(--primary_color);
    color: var(--primary_color);
}
.sidebar-quick-cta {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}
.sidebar-mini-btn {
    width: 100%;
    border: 1px solid #565656;
    border-radius: 14px;
    color: #f0f0f0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: 0.3s;
}
.sidebar-mini-btn i {
    font-size: 14px;
}
.sidebar-mini-btn:hover {
    border-color: var(--primary_color);
    color: var(--primary_color);
}
.left-sidebar .profile-photo-stack {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    display: block;
    margin-bottom: 56px;
}
.left-sidebar .profile-photo-stack > img.me {
    border-radius: 30px;
    display: block;
    width: 100%;
    transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
}
.left-sidebar .profile-photo-stack .me-base {
    filter: grayscale(100%);
}
.left-sidebar .profile-photo-stack .me-color {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.left-sidebar .profile-photo-stack:hover .me-color {
    opacity: 1;
}
.left-sidebar .profile-photo-stack:hover .me-base,
.left-sidebar .profile-photo-stack:hover .me-color {
    transform: scale(1.01);
}
.left-sidebar .sidebar-header {
    margin-bottom: 65px;
}
.left-sidebar .sidebar-header img {
    width: 84px;
    height: 84px;
    object-fit: contain;
}
.left-sidebar .sidebar-header .designation {
    max-width: 110px;
    text-align: right;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}
.left-sidebar h2 {
    font-size: 24px;
    color: #fff;
    text-align: center;
    font-weight: 300;
}
.left-sidebar .address {
    margin-bottom: 30px;
}
.left-sidebar .profile-summary {
    font-size: 13px;
    line-height: 1.5;
    color: #b8b8b8;
    text-align: center;
    max-width: 240px;
    margin: 0 auto 18px auto;
}
.left-sidebar .copyright {
    font-size: 14px;
    text-align: center;
    margin-bottom: 45px;
}
.left-sidebar .social-profile {
    gap: 8px;
    margin-bottom: 24px;
}
.left-sidebar .social-profile li a {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 46px;
    text-align: center;
    border: 2px solid #565656;
    border-radius: 50%;
    color: #999999;
    font-size: 20px;
    transition: .3s;
}
.left-sidebar .social-profile li a:hover {
    color: var(--primary_color);
    border-color: var(--primary_color);
}
.left-sidebar .theme-btn {
    width: 100%;
}
.profile-sidebar {
    height: 90vh;
    max-height: 90vh;
    overflow-y: hidden;
}
.profile-sidebar .sidebar-header {
    margin-bottom: 40px;
}
.profile-sidebar .profile-photo-stack {
    margin-bottom: 34px;
}
.profile-sidebar h2 {
    font-size: 21px;
    line-height: 1.25;
}
.profile-sidebar .address {
    margin-bottom: 8px;
}
.profile-sidebar .profile-summary {
    margin-bottom: 16px;
    max-width: 260px;
}
.profile-sidebar .copyright {
    margin-bottom: 20px;
}
.profile-sidebar .social-profile {
    margin-bottom: 14px;
}
.profile-sidebar .social-profile li a {
    width: 46px;
    height: 46px;
    line-height: 42px;
}
.profile-sidebar .theme-btn {
    width: 88%;
    margin: 0 auto;
    padding: 8px 22px 7px 22px;
    font-size: 15px;
}
.profile-sidebar .theme-btn i {
    font-size: 20px;
    margin-right: 8px;
}



/* 07 - Hero Section */
.hero-section {
    padding: 68px 0;
    position: relative;
    overflow: hidden;
}
.hero-section .hero-content {
    position: relative;
    z-index: 3;
}
.hero-section .hero-content h1 {
    font-size: 78px;
    letter-spacing: -0.2px;
    line-height: 90px;
    margin-bottom: 43px;
    font-weight: 300;
}
.hero-section .hero-content h1 span {
    color: var(--primary_color);
}
.hero-section .hero-content > p {
    max-width: 480px;
    margin-bottom: 31px;
}
.hero-section .hero-content .go-to-project-btn {
    width: 175px;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid #575757;
    position: relative;
    overflow: hidden;
    margin-right: 15px;
}
.hero-section .hero-content .go-to-project-btn img {
    display: block;
    animation: rotating 6s infinite linear;
}
.hero-section .hero-content .go-to-project-btn i {
    position: absolute;
    color: #fff;
    font-size: 40px;
    display: block;
}
.hero-section .hero-content .facts {
    gap: 100px;
    margin-top: 55px;
}
.mobile-hero-quick-cta {
    display: none;
}
.stats-strip.landing-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}
.landing-service-card {
    display: block;
    text-decoration: none;
    min-height: 300px;
    text-align: center;
    transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.landing-service-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #414141;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    color: #9ea2ad;
    background: #060606;
}
.landing-service-icon i {
    font-size: 18px;
}
.landing-service-card .landing-service-title {
    font-size: 21px;
    line-height: 1.22;
    margin-bottom: 10px;
    color: #ffffff;
}
.landing-service-card .landing-service-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}
.landing-service-card .landing-service-meta {
    margin-top: 14px;
    margin-bottom: 12px;
    text-align: center;
}
.landing-service-card .landing-service-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3a3a3f;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cfcfda;
    background: #050505;
}
.landing-service-card:hover,
.landing-service-card:focus-visible {
    border-color: var(--primary_color);
    transform: translateY(-2px);
    background: #050505;
    box-shadow:
      inset 1px 1px 0 rgba(86, 86, 86, 0.65),
      inset -1px -1px 0 rgba(18, 18, 18, 0.9),
      0 12px 30px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(94, 200, 255, 0.18);
}
.landing-service-card:hover .landing-service-icon,
.landing-service-card:focus-visible .landing-service-icon {
    border-color: var(--primary_color);
    color: var(--primary_color);
}
.landing-service-card:focus-visible {
    outline: 3px solid rgba(94, 200, 255, 0.7);
    outline-offset: 3px;
}
.landing-service-inline-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #4a4a4f;
    border-radius: 999px;
    color: #f1f1f1;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 13px;
    background: #060606;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.landing-service-inline-cta i {
    font-size: 14px;
}
.landing-service-card:hover .landing-service-inline-cta,
.landing-service-card:focus-visible .landing-service-inline-cta {
    border-color: var(--primary_color);
    color: var(--primary_color);
    background: rgba(20, 197, 253, 0.08);
}
#featured-services .services-items .service-item {
    text-align: center;
    padding-top: 32px;
}
#featured-services .services-items .service-item i {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
}
#featured-services .services-items .service-item p {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
#featured-services .services-items .service-item .projects {
    display: inline-flex;
    justify-content: center;
}
#featured-services .services-items .service-item .service-inline-cta {
    display: flex;
    justify-content: center;
}
.hero-section .hero-content .facts h1 {
    font-size: 72px;
    color: var(--primary_color);
    line-height: 56px;
    margin-bottom: 38px;
}
.hero-section .hero-content .facts p {
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
}

/* 08 - Home 3 */
.home1-page,
.home5-page,
.home6-page {
    background: #000;
}
.home-3 {
    overflow: hidden;
}
.home-3:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
}
.home1-page .menu,
.home5-page .menu,
.home6-page .menu,

.home1-page .icon-menu,
.home5-page .icon-menu,
.home6-page .icon-menu {
    background: #000000;
}
/* 09 - Home 5 */
body .body-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.home2-page .body-overlay,
.home3-page .body-overlay {
    opacity: 0.1;
}
.home1-page .body-overlay,
.home4-page .body-overlay,
.home5-page .body-overlay {
    opacity: 0.3;
}



/* 10 - About */
.about-area {
    padding-top: 90px;
    padding-bottom: 90px;
}
.about-area .about-content p {
    line-height: 30px;
    max-width: 610px;
}


/* 11 - Resume */
.resume-area {
    padding-top: 90px;
    padding-bottom: 90px;
}
.resume-area .resume-content .resume-timeline .item {
    position: relative;
    padding-left: 74px;
    padding-bottom: 68px;
}
.resume-area .resume-content .resume-timeline .item:last-child {
    padding-bottom: 0;
}
.resume-area .resume-content .resume-timeline .item:last-child::after {
    height: calc(100% - 10px);
}
.resume-area .resume-content .resume-timeline .item::after {
    content: '';
    background: #333333;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 10px;
    z-index: -1;
}
.resume-area .resume-content .resume-timeline .item::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #656565;
    border-radius: 50%;
    left: -6px;
    top: 7px;
    transition: .3s;
}
.resume-area .resume-content .resume-timeline .item .date {
    display: block;
    margin-bottom: 28px;
    transition: .3s;
}
.resume-area .resume-content .resume-timeline .item h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 5px;
    color: #fff;
}
.resume-area .resume-content .resume-timeline .item h2 a {
    color: #fff;
    display: block;
}
.resume-area .resume-content .resume-timeline .item p {
    font-size: 13px;
    color: #999999;
    margin-bottom: 18px;
}
.resume-area .resume-content .resume-timeline .item p:last-child {
    margin-bottom: 0;
}
.resume-area .resume-content .resume-timeline .item:hover::before {
    background: var(--primary_color);
}
.resume-area .resume-content .resume-timeline .item:hover .date {
    color: var(--primary_color);
}



/* 12 - Services */
.services-area {
    padding-top: 90px;
    padding-bottom: 90px;
}
.services-items .service-item {
    border: 1px solid #565656;
    border-radius: 20px;
    transition: .3s;
    position: relative;
    padding: 44px 48px 41px 48px;
    margin-bottom: 10px;
}
.services-items .service-item:last-child {
    margin-bottom: 0;
}
.services-items .service-item h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 8px;
    color: #fff;
}
.services-items .service-item h2 a {
    color: #fff;
    transition: .3s;
}
.services-items .service-item:hover {
    border-color: var(--primary_color);
}
.services-items .service-item:hover h2 a {
    color: var(--primary_color);
}
.services-items .service-item p {
    font-size: 14px;
    color: #999999;
    margin-bottom: 30px;
}
.services-items .service-item .projects {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
}
.services-items .service-item:hover .projects {
    text-decoration: underline;
}
.services-items .service-item i {
    position: absolute;
    font-size: 30px;
    color: var(--primary_color);
    top: 45px;
    right: 50px;
}
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 12px;
}
.hero-cta-group .theme-btn {
    font-size: 12px;
    letter-spacing: 0.05em;
}
.services-items .service-item .service-examples {
    list-style: disc;
    padding-left: 18px;
    margin-bottom: 16px;
}
.services-items .service-item .service-examples li {
    color: #d0d0d0;
    font-size: 13px;
    margin-bottom: 6px;
}
.services-items .service-item .service-examples li:last-child {
    margin-bottom: 0;
}
.services-items.landing-two-col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.services-items.landing-two-col-grid .service-item {
    margin-bottom: 0;
    height: 100%;
}
.service-inline-cta {
    margin-top: 12px;
}
.service-inline-cta .theme-btn {
    font-size: 11px;
    padding: 8px 20px;
}
.service-trust-grid {
    border: 1px solid #565656;
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.service-trust-chip {
    border: 1px solid #565656;
    border-radius: 999px;
    padding: 6px 12px;
    color: #ffffff;
    font-size: 12px;
}
.service-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d8d8d8;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    margin-top: 14px;
    transition: .25s;
}
.service-back-link i {
    font-size: 16px;
}
.service-back-link:hover {
    color: #fff;
    border-bottom-color: #565656;
}
.service-back-arrow-only {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid #565656;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.service-back-arrow-only:hover {
    border-color: var(--primary_color);
    color: var(--primary_color);
    background: rgba(20, 197, 253, 0.08);
}
.conversion-cta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.services-two-col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.services-two-col-grid .service-item {
    margin-bottom: 0;
    height: 100%;
}
.service-item-full-span {
    grid-column: 1 / -1;
}
.services-cards-centered .service-item {
    text-align: center;
    padding-top: 34px;
}
.services-cards-centered .service-item i {
    position: static;
    display: inline-block;
    margin: 0 auto 14px auto;
}
.services-cards-centered .service-item p {
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
}
.services-cards-centered .service-item .service-examples {
    text-align: center;
    list-style: none;
    padding-left: 0;
}
.services-cards-centered .service-item .service-examples li {
    margin-bottom: 8px;
}
.services-cards-centered .service-item .projects {
    display: inline-flex;
    justify-content: center;
}
.services-cards-centered .service-item .service-inline-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
#category-services-list .service-item h2 {
    font-size: 24px;
}
#category-services-list .service-item p {
    font-size: 14px;
}
#category-services-list .service-item .service-examples li {
    font-size: 12px;
}
#category-services-list .service-inline-cta .theme-btn {
    font-size: 10px;
    padding: 7px 14px;
    min-height: 34px;
}
#services-category-hero .hero-cta-group .theme-btn {
    font-size: 10px;
    padding: 8px 16px;
}
#service-categories .services-items.services-two-col-grid,
#featured-services-hub .services-items.services-two-col-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#service-categories .services-items.services-cards-centered .service-item,
#featured-services-hub .services-items.services-cards-centered .service-item {
    text-align: center;
}
#service-categories .services-items.services-cards-centered .service-item h2,
#featured-services-hub .services-items.services-cards-centered .service-item h2,
#service-categories .services-items.services-cards-centered .service-item p,
#featured-services-hub .services-items.services-cards-centered .service-item p {
    margin-left: auto;
    margin-right: auto;
}
#service-cta .conversion-cta-grid .theme-btn {
    min-width: 280px;
}
#service-cta .contact-content {
    border: 1px solid #565656;
    border-radius: 24px;
    padding: 30px 28px;
    background: linear-gradient(160deg, #0d0d0d 0%, #111214 100%);
    text-align: center;
}
#service-cta .section-header h1 {
    margin-bottom: 16px;
}
#service-cta p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
}
#service-cta .conversion-cta-grid {
    justify-content: center;
}
#service-cta .service-cta-actions-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 320px));
    justify-content: center;
    gap: 12px;
}
#service-cta .service-cta-actions-two .theme-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 9px 16px;
}
.mobile-service-sticky-actions {
    display: none;
}
.intake-mobile-step-chip,
.consultation-mobile-step-chip {
    display: none;
}
.newsletter-cta-card {
    margin-top: 22px;
    border: 1px solid #565656;
    border-radius: 20px;
    background: linear-gradient(165deg, #0d0d0d 0%, #121316 100%);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    align-items: center;
    gap: 16px;
}
.newsletter-cta-card .newsletter-cta-copy h3 {
    margin: 0 0 7px 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.2;
}
.newsletter-cta-card .newsletter-cta-copy p {
    margin: 0;
    color: #b8b8b8;
    font-size: 14px;
    line-height: 1.55;
}
.newsletter-cta-form {
    width: 100%;
}
.newsletter-cta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.newsletter-cta-row input {
    width: 100%;
    border: 1px solid #4f4f55;
    background: #080808;
    color: #ffffff;
    border-radius: 999px;
    padding: 11px 14px;
    font-size: 14px;
    outline: none;
}
.newsletter-cta-row input::placeholder {
    color: #9b9b9f;
}
.newsletter-cta-row input:focus {
    border-color: var(--primary_color);
}
.newsletter-cta-row .theme-btn {
    white-space: nowrap;
    min-width: 170px;
    justify-content: center;
}
.newsletter-cta-row .newsletter-submit-btn {
    min-width: 138px;
    padding: 8px 18px 7px 18px;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.newsletter-feedback {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #a8a8a8;
}
.newsletter-feedback.is-success {
    color: #7ce5be;
}
.newsletter-feedback.is-error {
    color: #ff8f8f;
}
.conversion-booking-cta {
    border: 1px solid #565656;
    border-radius: 20px;
    background: linear-gradient(165deg, #0d0d0d 0%, #121316 100%);
    padding: 26px 24px;
    text-align: center;
}
.conversion-booking-cta h1 {
    margin-bottom: 14px;
    font-size: 44px;
    line-height: 1.05;
}
.conversion-booking-cta p {
    max-width: 760px;
    margin: 0 auto 18px auto;
    color: #c8c8cc;
    line-height: 1.55;
    font-size: 16px;
}
.conversion-booking-cta .theme-btn {
    min-width: 200px;
    min-height: 40px;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 8px 16px;
}
.whatsapp-float {
    position: fixed;
    right: 90px;
    bottom: 92px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid #2d2d2d;
    background: #111214;
    color: #25D366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    z-index: 140;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.whatsapp-float:hover {
    transform: translateY(-2px);
    border-color: #25D366;
    background: #0b0f0c;
    color: #25D366;
}
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-accordion .faq-item {
    border: 1px solid #565656;
    border-radius: 20px;
    background: #0f0f0f;
    transition: border-color .25s ease, background .25s ease;
    overflow: hidden;
}
.faq-accordion .faq-item:hover {
    border-color: var(--primary_color);
}
.faq-accordion .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}
.faq-accordion .faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-accordion .faq-item .faq-question {
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 300;
}
.faq-accordion .faq-item .faq-toggle-icon {
    color: var(--primary_color);
    font-size: 24px;
    transition: transform .2s ease;
}
.faq-accordion .faq-item[open] {
    background: #121212;
}
.faq-accordion .faq-item[open] .faq-toggle-icon {
    transform: rotate(45deg);
}
.faq-accordion .faq-item .faq-answer {
    padding: 0 26px 22px;
    border-top: 1px solid rgba(86, 86, 86, .5);
}
.faq-accordion .faq-item .faq-answer p {
    margin: 16px 0 0;
    font-size: 14px;
    color: #b8b8b8;
    line-height: 1.7;
}
body.modal-open {
    overflow: hidden;
}
.consultation-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.consultation-modal[hidden] {
    display: none !important;
}
.consultation-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.consultation-modal-dialog {
    position: relative;
    width: min(760px, 94vw);
    height: min(72vh, 560px);
    height: min(72dvh, 560px);
    border: 1px solid #565656;
    border-radius: 14px;
    background: #050505;
    overflow: hidden;
    transform: translateY(18px) scale(0.985);
    opacity: 0;
    transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.consultation-modal.open .consultation-modal-backdrop {
    opacity: 1;
}
.consultation-modal.open .consultation-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.consultation-modal-header {
    height: 48px;
    border-bottom: 1px solid #353535;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 8px;
    background: #060606;
    flex: none;
}
.consultation-modal-close {
    position: static;
    width: 34px;
    height: 34px;
    border: 1px solid #565656;
    border-radius: 999px;
    background: #080808;
    color: #fff;
    z-index: 2;
    box-shadow: 0 0 0 2px #050505;
}
.consultation-modal-close i {
    font-size: 15px;
}
.consultation-modal-frame {
    width: 100%;
    height: calc(100% - 48px);
    flex: 1;
    border: none;
    background: #000;
}
.consultation-embed-body {
    margin: 0;
    background: #000;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}
.consultation-embed-root {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
}
.consultation-embed-body .hero-section {
    padding-top: 34px;
}
.consultation-embed-body #service-consultation-hero .page-intro {
    margin-bottom: 18px;
}
.consultation-embed-body #consultation-booking-section {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
    overflow: hidden;
}
.consultation-embed-body #consultation-booking-section.contact-area {
    padding-bottom: 0;
}
.consultation-embed-body #consultation-booking-section .custom-container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    height: 100%;
}
.consultation-embed-body #consultation-booking-section .contact-content {
    max-width: 100%;
    margin: 0;
    height: 100%;
}
.consultation-embed-body #consultation-booking-section.page-section {
    padding-top: 0;
    padding-bottom: 0;
}
#consultation-booking-section .consultation-shell.consultation-shell-drawer {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 6px 0 0;
    height: 100%;
}
#consultation-booking-section .consultation-calendar-parent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
    border: 1px solid #565656;
    border-radius: 18px;
    overflow: hidden;
    background: #090909;
    min-height: 520px;
    transition: grid-template-columns .3s ease;
}
#consultation-booking-section .consultation-shell-drawer.drawer-child-open .consultation-calendar-parent {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
}
#consultation-booking-section .consultation-shell-drawer.drawer-child-open.drawer-show-form .consultation-calendar-parent {
    grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
}
#consultation-booking-section .consultation-shell-drawer .consultation-calendar-card {
    border: none;
    border-right: 1px solid #565656;
    border-radius: 0;
    background: #0a0a0a;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
#consultation-booking-section .consultation-drawer-child {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #0d0d0d;
    opacity: 0;
    pointer-events: none;
    border-left: 0 solid transparent;
    transition: opacity .25s ease, border-left-color .25s ease;
}
#consultation-booking-section .consultation-shell-drawer.drawer-child-open .consultation-drawer-child {
    opacity: 1;
    pointer-events: auto;
    border-left: 1px solid #565656;
}
#consultation-booking-section .consultation-shell-drawer.drawer-show-form .consultation-calendar-card {
    opacity: 0;
    pointer-events: none;
    padding: 0;
    border-right-color: transparent;
}
#consultation-booking-section .consultation-drawer-track {
    width: 200%;
    height: 100%;
    min-height: 0;
    display: flex;
    transition: transform .33s ease;
}
#consultation-booking-section .consultation-shell-drawer.drawer-show-form .consultation-drawer-track {
    width: 100%;
    transform: none;
}
#consultation-booking-section .consultation-drawer-panel {
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 10px;
}
#consultation-booking-section .consultation-shell-drawer.drawer-show-form .consultation-step-slot {
    display: none;
}
#consultation-booking-section .consultation-shell-drawer.drawer-show-form .consultation-step-form {
    width: 100%;
    flex: 0 0 100%;
}
#consultation-booking-section .consultation-shell-drawer .consultation-step-slot,
#consultation-booking-section .consultation-shell-drawer .consultation-step-form {
    border: 1px solid #484848;
    border-radius: 12px;
    height: 100%;
    background: #0a0a0a;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#consultation-booking-section .consultation-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
#consultation-booking-section .consultation-calendar-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
}
#consultation-booking-section .consultation-nav-btn {
    min-width: 42px;
    width: 42px;
    height: 42px;
    padding: 0;
}
#consultation-booking-section .consultation-nav-btn i {
    margin-right: 0;
}
#consultation-booking-section .consultation-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
    padding: 0 4px;
}
#consultation-booking-section .consultation-weekdays span {
    text-align: center;
    font-size: 11px;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: .06em;
}
#consultation-booking-section .consultation-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, minmax(46px, 1fr));
    flex: 1;
    gap: 6px;
    min-height: 0;
    padding: 0 4px 6px;
    align-items: center;
    justify-items: center;
}
#consultation-booking-section .consultation-day-blank {
    border-radius: 50%;
    background: transparent;
    min-height: 36px;
    width: 36px;
    height: 36px;
}
#consultation-booking-section .consultation-day-btn {
    min-height: 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #454545;
    background: #101010;
    color: #fff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#consultation-booking-section .consultation-day-btn.disabled {
    opacity: .4;
    cursor: not-allowed;
}
#consultation-booking-section .consultation-day-btn.available {
    border-color: var(--primary_color);
}
#consultation-booking-section .consultation-day-btn.available:hover,
#consultation-booking-section .consultation-day-btn.selected {
    background: rgba(94, 200, 255, .16);
}
#consultation-booking-section .consultation-note {
    margin: 12px 0 0;
    color: #aaaaaa;
    font-size: 12px;
}
#consultation-booking-section .consultation-form-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
}
#consultation-booking-section .consultation-form-subtext {
    margin: 0 0 10px;
    color: #b9b9b9;
    font-size: 13px;
}
#consultation-booking-section .consultation-slot-headline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
#consultation-booking-section .consultation-slot-headline-row .consultation-form-subtext {
    margin: 0;
}
#consultation-booking-section .consultation-change-date-btn {
    min-width: auto;
    min-height: 30px;
    padding: 5px 8px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#consultation-booking-section .consultation-time-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
}
#consultation-booking-section .consultation-slot-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}
#consultation-booking-section .consultation-slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
#consultation-booking-section .consultation-slot-list-vertical {
    max-height: none;
    min-height: 0;
    height: 100%;
    flex: 1;
    overflow-y: scroll;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #4b4b4b rgba(20, 20, 20, .75);
}
#consultation-booking-section .consultation-slot-list-vertical::-webkit-scrollbar {
    width: 4px;
}
#consultation-booking-section .consultation-slot-list-vertical::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, .85);
    border-radius: 999px;
}
#consultation-booking-section .consultation-slot-list-vertical::-webkit-scrollbar-thumb {
    background: #4b4b4b;
    border-radius: 999px;
}
#consultation-booking-section .consultation-slot-list-vertical::-webkit-scrollbar-thumb:hover {
    background: #5b5b5b;
}
#consultation-booking-section .consultation-slot-btn {
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 8px;
    text-align: left;
    width: 100%;
}
#consultation-booking-section .consultation-slot-btn.active,
#consultation-booking-section .consultation-slot-btn:hover {
    background: rgba(94, 200, 255, .14);
}
#consultation-booking-section .consultation-inline-confirm {
    display: none;
    min-width: 68px;
    height: 30px;
    padding: 4px 8px;
    font-size: 9px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
}
#consultation-booking-section .consultation-inline-confirm.show {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
}
#consultation-booking-section .consultation-slot-row.is-selected .consultation-inline-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
}
#consultation-booking-section .consultation-selected-summary {
    border: 1px solid #565656;
    border-radius: 12px;
    background: #101010;
    padding: 12px 14px;
    margin-bottom: 16px;
}
#consultation-booking-section .consultation-selected-summary .summary-label {
    margin: 0 0 4px;
    color: #9d9d9d;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#consultation-booking-section .consultation-selected-summary .summary-value {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
#consultation-booking-section .consultation-step-slot .consultation-slot-row {
    border: 1px solid #3c3c3c;
    border-radius: 12px;
    padding: 8px;
    background: #101010;
    min-height: 58px;
}
#consultation-booking-section .consultation-form-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
#consultation-booking-section .consultation-form-header-row h3 {
    margin: 0;
}
#consultation-booking-section .consultation-cancel-btn {
    min-width: 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 14px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#consultation-booking-section .consultation-cancel-btn i {
    margin-right: 0;
}
#consultation-booking-section .contact-form textarea {
    height: 100px;
}
#consultation-booking-section .consultation-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
#consultation-booking-section .consultation-form-card .contact-form .input-group input,
#consultation-booking-section .consultation-form-card .contact-form .input-group textarea,
#consultation-booking-section .consultation-form-card .contact-form .input-group select {
    border: 1px solid #565656;
    border-radius: 14px;
    padding: 14px 14px;
    background: #0f0f0f;
    color: #fff;
    font-size: 15px;
}
#consultation-booking-section .consultation-form-card .contact-form .input-group input:focus,
#consultation-booking-section .consultation-form-card .contact-form .input-group textarea:focus,
#consultation-booking-section .consultation-form-card .contact-form .input-group select:focus {
    border-color: var(--primary_color);
}
#consultation-booking-section .consultation-form-card .contact-form .input-group label {
    color: #ededed;
    margin-bottom: 8px;
    display: inline-block;
}
#consultation-booking-section .consultation-form-card .contact-form .input-group label sup {
    color: #7ce5be;
}
#consultation-booking-section .consultation-step-form .contact-form {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #4b4b4b rgba(20, 20, 20, .75);
}
#consultation-booking-section .consultation-step-form .contact-form::-webkit-scrollbar {
    width: 4px;
}
#consultation-booking-section .consultation-step-form .contact-form::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, .85);
    border-radius: 999px;
}
#consultation-booking-section .consultation-step-form .contact-form::-webkit-scrollbar-thumb {
    background: #4b4b4b;
    border-radius: 999px;
}
#consultation-booking-section .consultation-step-form .contact-form::-webkit-scrollbar-thumb:hover {
    background: #5b5b5b;
}
#consultation-booking-section .consultation-form-card .submit-btn-wrap .theme-btn {
    background: transparent;
    color: #fff;
}
#consultation-booking-section .consultation-form-card .submit-btn-wrap .theme-btn:hover {
    color: #fff;
}
#consultation-booking-section .consultation-form-card .submit-btn-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
#consultation-booking-section .consultation-form-card .submit-btn-wrap .consultation-submit-btn {
    min-width: 188px;
    width: auto;
}
#consultation-booking-section .consultation-success-state {
    height: 100%;
    border: 1px solid #565656;
    border-radius: 14px;
    background: #0c0c0c;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}
#consultation-booking-section .consultation-success-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid var(--primary_color);
    background: rgba(94, 200, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#consultation-booking-section .consultation-success-icon i {
    font-size: 42px;
    color: var(--primary_color);
}
#consultation-booking-section .consultation-success-state h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
}
#consultation-booking-section .consultation-success-copy {
    margin: 0;
    color: #c6c6c6;
    font-size: 15px;
    line-height: 1.6;
    max-width: 560px;
}
#consultation-booking-section .consultation-success-copy strong {
    color: #fff;
}
#consultation-booking-section .consultation-success-actions {
    margin-top: 10px;
}
#consultation-booking-section .submit-btn-wrap .theme-btn {
    min-width: 260px;
}
.consultation-embed-body #consultation-booking-section .consultation-shell {
    border: none;
    border-radius: 0;
    padding: 6px 0 0;
    background: transparent;
}
.consultation-embed-body #consultation-booking-section .consultation-shell-drawer {
    padding-top: 4px;
    height: 100%;
}
.consultation-embed-body #consultation-booking-section .consultation-calendar-parent {
    height: 100%;
    min-height: 0;
    max-height: 100%;
}
.consultation-embed-body #consultation-booking-section .consultation-shell-drawer .consultation-calendar-card {
    padding: 14px 14px 12px;
    min-height: 0;
}
.consultation-embed-body #consultation-booking-section .consultation-drawer-panel {
    padding: 10px;
}
.consultation-embed-body #consultation-booking-section .consultation-form-subtext {
    margin-bottom: 6px;
    color: #c4c4c4;
    font-size: 12px;
}
.consultation-embed-body #consultation-booking-section .consultation-slot-list {
    margin-bottom: 0;
}
.consultation-embed-body #consultation-booking-section .consultation-slot-list-vertical {
    min-height: 0;
    max-height: 100%;
}
.consultation-embed-body #consultation-booking-section .consultation-selected-summary {
    margin-bottom: 10px;
    padding: 8px 10px;
}
.consultation-embed-body #consultation-booking-section .consultation-selected-summary .summary-value {
    font-size: 13px;
}
.consultation-embed-body #consultation-booking-section .consultation-form-header-row {
    margin-bottom: 6px;
}
.consultation-embed-body #consultation-booking-section .consultation-cancel-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
}
.consultation-embed-body #consultation-booking-section .contact-form .input-group {
    margin-bottom: 10px;
}
.consultation-embed-body #consultation-booking-section .consultation-form-card .contact-form .input-group input,
.consultation-embed-body #consultation-booking-section .consultation-form-card .contact-form .input-group textarea,
.consultation-embed-body #consultation-booking-section .consultation-form-card .contact-form .input-group select {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
}
.consultation-embed-body #consultation-booking-section .consultation-form-card .contact-form .input-group input::placeholder,
.consultation-embed-body #consultation-booking-section .consultation-form-card .contact-form .input-group textarea::placeholder {
    color: #8f8f8f;
}
.consultation-embed-body #consultation-booking-section .consultation-form-card .contact-form textarea {
    height: 82px;
}
.consultation-embed-body #consultation-booking-section .submit-btn-wrap .theme-btn {
    min-width: auto;
    padding: 10px 14px;
}
.consultation-embed-body #consultation-booking-section .consultation-form-card .submit-btn-wrap .consultation-submit-btn {
    min-width: 170px !important;
    width: auto;
    padding: 9px 12px;
    margin-left: auto;
}
.consultation-embed-body #consultation-booking-section .consultation-mobile-step-chip {
    display: none !important;
}

#service-checkout-payment .checkout-shell {
    border: 1px solid #565656;
    border-radius: 26px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 24px;
    background: #0a0a0a;
}
#service-checkout-payment .checkout-summary {
    border: 1px solid #565656;
    border-radius: 20px;
    padding: 22px;
    background: #111214;
}
#service-checkout-payment .checkout-summary h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 16px;
}
#service-checkout-payment .checkout-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#service-checkout-payment .checkout-summary-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #2f2f2f;
    padding-bottom: 10px;
}
#service-checkout-payment .checkout-summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
#service-checkout-payment .checkout-summary-row span {
    color: #9a9a9a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#service-checkout-payment .checkout-summary-row strong {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
#service-checkout-payment .checkout-summary-note {
    margin: 16px 0 0 0;
    font-size: 13px;
    color: #c1c1c1;
    line-height: 1.5;
}
#service-checkout-payment .checkout-main {
    border: 1px solid #565656;
    border-radius: 20px;
    padding: 26px 24px;
    background: #090909;
}
#service-checkout-payment .checkout-main .section-header {
    margin-bottom: 16px;
}
#service-checkout-payment .payment-processor-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
#service-checkout-payment .processor-chip {
    border: 1px solid #565656;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d9d9d9;
    background: #111214;
}
#service-checkout-payment .processor-chip i {
    margin-right: 6px;
    font-size: 13px;
}
#service-checkout-payment .processor-chip.processor-chip-primary {
    border-color: var(--primary_color);
    color: #fff;
}
#service-checkout-payment .checkout-disclaimer {
    margin: 10px 0 0 0;
    color: #9d9d9d;
    font-size: 12px;
    line-height: 1.5;
}
#service-intake-form .intake-form-card {
    border: 1px solid #565656;
    border-radius: 24px;
    padding: 28px 28px 20px;
    background: linear-gradient(160deg, #0d0d0d 0%, #111214 100%);
}
#service-intake-form .intake-form-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #2f2f2f;
}
#service-intake-form .intake-form-header h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 8px;
}
#service-intake-form .intake-form-header p {
    margin: 0;
    color: #a5a5a5;
    font-size: 14px;
    line-height: 1.6;
}
#service-intake-form .contact-form .input-group {
    margin-bottom: 28px;
}
#service-intake-form .contact-form .input-group select,
#service-intake-form .contact-form .input-group textarea,
#service-intake-form .contact-form .input-group input {
    border-bottom-color: #4a4a4a;
}
#service-intake-form .contact-form .input-group select:focus,
#service-intake-form .contact-form .input-group textarea:focus,
#service-intake-form .contact-form .input-group input:focus {
    border-bottom-color: var(--primary_color);
}
#service-intake-form .submit-btn-wrap .theme-btn {
    min-width: 280px;
}
.form-feedback {
    font-size: 14px;
    margin-top: 14px !important;
}
.form-feedback.is-loading {
    color: #b8c9ff;
}
.form-feedback.is-success {
    color: #7ce5be;
}
.form-feedback.is-error {
    color: #ff7a7a;
}
.form-feedback.is-warning {
    color: #e8c57d;
}
@media (max-width: 991px) {
    .services-items.landing-two-col-grid {
        grid-template-columns: 1fr;
    }
    .services-two-col-grid {
        grid-template-columns: 1fr;
    }
    #service-categories .services-items.services-two-col-grid,
    #featured-services-hub .services-items.services-two-col-grid {
        grid-template-columns: 1fr;
    }
    #service-cta .contact-content {
        padding: 24px 18px;
    }
    #service-cta p {
        margin-bottom: 18px;
    }
    #service-cta .service-cta-actions-two {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    .newsletter-cta-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .newsletter-cta-form {
        width: 100%;
    }
    .newsletter-cta-row {
        grid-template-columns: 1fr;
    }
    .newsletter-cta-row .theme-btn {
        width: 100%;
    }
    .newsletter-cta-row .newsletter-submit-btn {
        min-width: 0;
        padding: 10px 16px 9px;
        font-size: 12px;
    }
    #services-home {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    #services-home .page-intro h1 {
        font-size: clamp(30px, 9.2vw, 44px);
        line-height: 1.1;
        margin-bottom: 12px;
    }
    #services-home .page-intro p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    #service-detail-hero {
        padding-top: 24px;
        padding-bottom: 20px;
    }
    #service-detail-hero .page-intro h1 {
        font-size: clamp(30px, 9vw, 44px);
        line-height: 1.1;
        margin-bottom: 12px;
    }
    #service-detail-hero .page-intro p {
        font-size: 15px;
        line-height: 1.52;
    }
    #service-detail-hero .service-back-link {
        margin-top: 8px;
    }
    #service-details-body .surface-card,
    #service-commercial .surface-card {
        border-radius: 16px;
        padding: 18px 16px;
    }
    #service-details-body .surface-card h3,
    #service-commercial .surface-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    #service-cta .contact-content {
        margin-bottom: 84px;
    }
    .mobile-service-sticky-actions {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 80px);
        z-index: 422;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 7px;
        border-radius: 14px;
        border: 1px solid rgba(68, 70, 77, 0.7);
        background: linear-gradient(170deg, rgba(14, 15, 18, 0.86), rgba(8, 9, 12, 0.92));
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .mobile-service-sticky-actions .theme-btn {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        font-size: 10px;
        letter-spacing: 0.08em;
        padding: 7px 10px;
    }
    #service-intake-hero {
        padding-top: 24px;
        padding-bottom: 18px;
    }
    .intake-mobile-step-chip {
        display: inline-flex;
        margin: 4px 0 10px 0;
        border: 1px solid #3d4046;
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #ced3dd;
        background: #101116;
    }
    #service-intake-form .intake-form-header h3 {
        font-size: 21px;
    }
    #service-intake-form .contact-form .input-group {
        margin-bottom: 20px;
    }
    #consultation-booking-section .consultation-shell.consultation-shell-drawer {
        border-radius: 16px;
        padding: 12px;
    }
    .consultation-mobile-step-chip {
        display: inline-flex;
        margin-bottom: 10px;
        border: 1px solid #3d4046;
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #ced3dd;
        background: #101116;
    }
    #consultation-booking-section .consultation-calendar-header h3 {
        font-size: 28px;
    }
    .surface-card,
    .services-items .service-item,
    .newsletter-cta-card,
    #service-intake-form .intake-form-card,
    #service-checkout-payment .checkout-shell,
    #service-checkout-payment .checkout-main,
    #service-checkout-payment .checkout-summary,
    #service-cta .contact-content,
    #consultation-booking-section .consultation-shell.consultation-shell-drawer {
        border-color: #3f4248 !important;
        box-shadow:
          0 12px 28px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .whatsapp-float {
        width: 56px;
        height: 56px;
        right: 78px;
        bottom: 82px;
        font-size: 30px;
    }
    .consultation-modal {
        padding: 10px;
    }
    .consultation-modal-dialog {
        width: 100%;
        height: min(86vh, 680px);
        border-radius: 14px;
    }
    .faq-accordion .faq-item summary {
        padding: 18px 18px;
    }
    .faq-accordion .faq-item .faq-question {
        font-size: 18px;
    }
    .faq-accordion .faq-item .faq-toggle-icon {
        font-size: 20px;
    }
    .faq-accordion .faq-item .faq-answer {
        padding: 0 18px 18px;
    }
    #consultation-booking-section .consultation-shell-drawer .consultation-step-slot .consultation-slot-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .consultation-embed-body #consultation-booking-section .consultation-calendar-parent {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
    }
    .consultation-embed-body #consultation-booking-section .consultation-shell-drawer.drawer-child-open .consultation-calendar-parent {
        grid-template-columns: minmax(0, 64%) minmax(0, 36%);
    }
    .consultation-embed-body #consultation-booking-section .consultation-shell-drawer.drawer-child-open.drawer-show-form .consultation-calendar-parent {
        grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
    }
    #service-checkout-payment .checkout-shell {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    #service-checkout-payment .checkout-main,
    #service-checkout-payment .checkout-summary {
        padding: 20px;
    }
    #service-intake-form .intake-form-card {
        padding: 22px 18px 16px;
    }
    #service-intake-form .submit-btn-wrap .theme-btn {
        min-width: 100%;
    }
}

@media (max-width: 680px) {
    .consultation-embed-body #consultation-booking-section .consultation-calendar-parent,
    .consultation-embed-body #consultation-booking-section .consultation-shell-drawer.drawer-child-open .consultation-calendar-parent,
    .consultation-embed-body #consultation-booking-section .consultation-shell-drawer.drawer-child-open.drawer-show-form .consultation-calendar-parent {
        grid-template-columns: 1fr !important;
        min-height: 0;
    }
    #consultation-booking-section .consultation-calendar-parent {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    #consultation-booking-section .consultation-shell-drawer.drawer-child-open .consultation-calendar-parent {
        grid-template-columns: 1fr;
    }
    #consultation-booking-section .consultation-shell-drawer.drawer-child-open.drawer-show-form .consultation-calendar-parent {
        grid-template-columns: 1fr;
    }
    #consultation-booking-section .consultation-shell-drawer .consultation-calendar-card {
        border-right: none;
        border-bottom: 1px solid #565656;
    }
    #consultation-booking-section .consultation-drawer-child {
        min-height: 0;
        border-left: none !important;
    }
    #consultation-booking-section .consultation-shell-drawer.drawer-child-open .consultation-drawer-child {
        min-height: 340px;
        border-top: 1px solid #565656;
    }
    #consultation-booking-section .consultation-shell-drawer.mobile-step-slot .consultation-calendar-card,
    #consultation-booking-section .consultation-shell-drawer.mobile-step-form .consultation-calendar-card {
        display: none;
    }
    #consultation-booking-section .consultation-shell-drawer.mobile-step-slot .consultation-drawer-child,
    #consultation-booking-section .consultation-shell-drawer.mobile-step-form .consultation-drawer-child {
        min-height: calc(min(86vh, 680px) - 120px);
        border-top: none;
        border-left: none !important;
    }
    .consultation-embed-body #consultation-booking-section .consultation-shell-drawer.mobile-step-slot .consultation-drawer-child,
    .consultation-embed-body #consultation-booking-section .consultation-shell-drawer.mobile-step-form .consultation-drawer-child {
        min-height: calc(min(86dvh, 680px) - 112px);
    }
    #consultation-booking-section .consultation-shell-drawer.mobile-step-slot .consultation-step-slot,
    #consultation-booking-section .consultation-shell-drawer.mobile-step-form .consultation-step-form {
        height: 100%;
    }
    #consultation-booking-section .consultation-shell-drawer .consultation-step-slot .consultation-slot-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }
    #consultation-booking-section .consultation-shell-drawer .consultation-inline-confirm {
        width: auto;
        min-width: 64px;
        height: 28px;
        padding: 3px 7px;
        font-size: 8px;
        border-radius: 999px;
    }
    #consultation-booking-section .consultation-shell-drawer .consultation-slot-list-vertical {
        min-height: 220px;
        max-height: calc(min(86vh, 680px) - 230px);
    }
    #consultation-booking-section .consultation-form-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    #consultation-booking-section .consultation-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    #consultation-booking-section .submit-btn-wrap .theme-btn {
        min-width: 100%;
    }
    .mobile-service-sticky-actions {
        grid-template-columns: 1fr;
    }
}



/* 13 - Skills */
.skills-area {
    padding-top: 90px;
    padding-bottom: 40px;
}
.skills .skill {
    margin-bottom: 50px;
}
.skills .skill .skill-inner {
    border: 2px solid #565656;
    border-radius: 85px;
    padding: 54px 0 48px 0;
    margin-bottom: 20px;
    transition: .3s;
}
.skills .skill:hover .skill-inner {
    border-color: var(--primary_color);
}
.skills .skill .skill-inner img {
    display: block;
    margin: auto auto 29px auto;
}
.skills .skill .skill-inner h1 {
    font-size: 30px;
    color: var(--primary_color);
    font-weight: 300;
    margin: 0;
}
.skills .skill p {
    font-size: 14px;
    color: #fff;
    margin: 0;
}



/* 14 - Portfolio */
.portfolio-area {
    padding-top: 90px;
    padding-bottom: 90px;
}
.portfolio-items .portfolio-item {
    margin-bottom: 62px;
}
.portfolio-items > div:last-child .portfolio-item {
    margin-bottom: 0;
}
.portfolio-items .portfolio-item .portfolio-item-inner {
    height: 370px;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    margin-bottom: 30px;
}
.portfolio-items .portfolio-item.portfolio-full .portfolio-item-inner {
    height: 410px;
}
.portfolio-items .portfolio-item .portfolio-item-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-items .portfolio-item .portfolio-item-inner .portfolio-categories {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    bottom: 20px;
    left: 20px;
}
.portfolio-items .portfolio-item .portfolio-item-inner .portfolio-categories li a {
    display: block;
    font-size: 14px;
    background: #fff;
    color: #000;
    padding: 7px 20px;
    border-radius: 19px;
    transition: .3s;
}
.portfolio-items .portfolio-item:hover .portfolio-item-inner .portfolio-categories li a {
    background: #1f1f1f;
    color: #fff;
}
.portfolio-items .portfolio-item h2 {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}
.portfolio-items .portfolio-item h2 a {
    color: #fff;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: .3s;
}
.portfolio-items .portfolio-item:hover h2 a {
    border-color: #ffffff;
}




/* 15 - Testimonial */
.testimonial-item .testimonial-item-inner {
    border: 2px solid #565656;
    border-radius: 30px;
    padding: 50px 50px 43px 50px;
}
.testimonial-item .testimonial-item-inner .author {
    gap: 16px;
    margin-bottom: 45px;
}
.testimonial-item .testimonial-item-inner .author img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonial-item .testimonial-item-inner .author h3 {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 6px;
}
.testimonial-item .testimonial-item-inner .author p {
    color: #999999;
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
}
.testimonial-item .testimonial-item-inner .author p span {
    color: var(--primary_color);
}
.testimonial-item .testimonial-item-inner > p {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    line-height: 36px;
    margin-bottom: 27px;
}
.testimonial-item .testimonial-item-inner .project-btn {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
}

.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav {
    margin-top: 50px;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav {
    gap: 15px;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav button {
    width: 45px;
    height: 45px;
    display: block;
    background: none;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #565656;
    font-size: 18px;
    color: #fff;
    transition: .3s;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav button:hover {
    border-color: var(--primary_color);
    color: var(--primary_color);
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav #testimonial-slide-count {
    font-size: 13px;
    color: #666666;
    font-weight: 300;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav #testimonial-slide-count .left {
    color: #fff;
}

/* 16 - Client */
.clients-logos {
    padding-top: 100px;
}
.clients-logos h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 57px;
}
.clients-logos .col-md-3 {
    margin-bottom: 74px;
}
.clients-logos img {
    display: block;
    opacity: 0.3;
    transition: .3s;
}
.clients-logos img:hover {
    opacity: 1;
}



/* 17 - Pricing Table */
.pricing-area {
    padding-top: 90px;
    padding-bottom: 90px;
}

.pricing-table-items .pricing-table {
    border: 1px solid #565656;
    border-radius: 30px;
    padding: 37px 40px 40px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .3s;
}
.pricing-table-items .pricing-table:hover {
    border-color: var(--primary_color);
}
.pricing-table-items .pricing-table .pricing-table-header {
    border-bottom: 1px solid #555555;
    padding-bottom: 20px;
    margin-bottom: 34px;
}
.pricing-table-items .pricing-table .pricing-table-header .top {
    margin-bottom: 30px;
}
.pricing-table-items .pricing-table .pricing-table-header h4 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header h3 {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header .top p {
    font-size: 13px;
    line-height: 20px;
    color: #999999;
    margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header h1 {
    font-size: 48px;
    color: var(--primary_color);
    font-weight: 300;
    margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header h1 span {
    font-size: 24px;
    color: #999999;
}
.pricing-table-items .pricing-table ul {
    margin-bottom: 80px;
}
.pricing-table-items .pricing-table ul li {
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    font-weight: 300;
    margin-bottom: 10px;
}

.pricing-table-items .pricing-table ul li:last-child {
    margin-bottom: 0;
}
.pricing-table-items .info {
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    margin: 60px 0 0 0;
}
.pricing-table-items .info a {
    color: var(--primary_color);
    text-decoration: underline;
}



/* 18 - Contact */
.contact-area {
    padding-bottom: 50px;
}
.contact-area .contact-content h3 {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 60px;
}
.contact-area .contact-content #required-msg {
    color: #fc4545;
    font-size: 14px;
    margin-bottom: 31px;
    display: none;
}
.contact-area .contact-content #required-msg.show {
    display: block;
}
.contact-area .contact-content .contact-form .input-group {
    margin-bottom: 34px;
}
.contact-area .contact-content .contact-form .input-group label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 2px;
}
.contact-area .contact-content .contact-form .input-group label sup {
    color: #fc4545;
    font-size: 12px;
    top: 0;
}
.contact-area .contact-content .contact-form .input-group label span {
    color: #999999;
    text-transform: none;
}
.contact-area .contact-content .contact-form .input-group select,
.contact-area .contact-content .contact-form .input-group textarea,
.contact-area .contact-content .contact-form .input-group input {
    display: block;
    color: #fff;
    width: 100%;
    border: none;
    background: none;
    font-size: 18px;
    padding: 0;
    transition: .2s;
    padding-bottom: 3px;
    border-bottom: 1px solid #555555;
}
.contact-area .contact-content .contact-form .input-group textarea {
    height: 140px;
    resize: none;
}
.contact-area .contact-content .contact-form .input-group select {
    display: block;
    margin-left: -5px !important;
    font-weight: 300;
}
.contact-area .contact-content .contact-form .input-group select:focus,
.contact-area .contact-content .contact-form .input-group textarea:focus,
.contact-area .contact-content .contact-form .input-group input:focus {
    outline: none;
    box-shadow: none;
    border-color: #555555;
}
.contact-area .contact-content .contact-form .input-group textarea::placeholder,
.contact-area .contact-content .contact-form .input-group input::placeholder {
    color: #666666;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment {
    position: relative;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment label {
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment label i {
    font-size: 18px;
    display: block;
    margin-bottom: 2px;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.contact-area .contact-content .contact-form .input-group.submit-btn-wrap {
    margin-bottom: 0;
    margin-top: 18px;
}



/* 19 - Breadcrumb */
.breadcrumb-area {
    position: relative;
    padding: 50px 0px 50px;
    background: #1f1f1f;
    overflow: hidden;
    z-index: 1;
}
.breadcrumb-area::before,
.breadcrumb-area::after {
    content: '';
    position: absolute;
    left: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgb(255 255 255 / 10%);
    z-index: -1;
    box-shadow: 0px 0px 0 20px rgb(255 255 255 / 5%);
}
.breadcrumb-area::after {
    left: auto;
    right: -50px;
    top: auto;
    bottom: -50px;
}
.breadcrumb-area .breadcrumb-content h1 {
    font-size: 45px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 20px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li {
    text-transform: uppercase;
    color: #d1d1d1;
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li i {
    display: block;
    margin-bottom: 1px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li:last-child::before {
    display: none;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li a {
    font-weight: 500;
    color: #ffffff;
}

/* 20 - Blog items */
.blog-content-area {
    padding-top: 100px;
    padding-bottom: 60px;
}
.blog-content-area .blog-items {
    padding-right: 20px;
}
.blog-item {
    margin-bottom: 40px;
}
.blog-item .blog-thumbnail {
    margin-bottom: 30px;
}
.blog-item .blog-thumbnail img {
    display: block;
    width: 100%;
    border-radius: 6px;
}
.blog-item .meta {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-bottom: 10px;
}
.blog-item .meta li {
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    line-height: 1.2;
}
.blog-item .meta li::before {
    content: '';
    position: absolute;
    right: -21px;
    top: 7px;
    background: #808080;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.blog-item .meta li:last-child::before {
    display: none;
}
.blog-item .meta li a {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: .3s;
    /* opacity: 0.5; */
    color: #fff;
    

    background: linear-gradient(to top right, var(--primary_color) -200%,transparent 300%);
    background-repeat: no-repeat;
    background-size: 0 0.0625em;
    background-position: 0 95%;
    transition: .25s;
}
.blog-item .meta li a:hover {
    background-size: 100% 0.3625em;
}
.blog-item .meta li a i {
    display: block;
    font-size: 18px;
    margin-bottom: 1px;
    color: var(--primary_color);
}
.blog-item .blog-item-content h1 {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.blog-item .blog-item-content h1 a {
    color: #fff;
    display: inline-block;

    background: linear-gradient(to top right,var(--primary_color) -200%,transparent 300%);
    background-repeat: no-repeat;
    background-size: 0 0.0625em;
    background-position: 0 95%;
    transition: .25s;
}
.blog-item .blog-item-content h1 a:hover {
    background-size: 100% 0.3625em;
}
.blog-item p {
    /* color: #686a6f; */
    line-height: 1.8;
    margin-bottom: 15px;
}
.blog-item .blog-item-content .read-more-btn {
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.4px;
    border-bottom: 2px solid var(--primary_color);
    padding: 4px 0;
    transition: .3s;
}
.blog-item .blog-item-content .read-more-btn:hover {
    border-color: #fff;
    color: var(--primary_color);
}

.blog-sidebar .blog-sidebar-item {
    padding: 40px;
    background: #2a2a2a;
    margin-bottom: 40px;
    border-radius: 4px;
}
.blog-sidebar .blog-sidebar-item:last-child {
    margin-bottom: 0;
}
.blog-sidebar .blog-sidebar-item h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}
.blog-sidebar .blog-sidebar-item h3::before {
    content: '';
    width: 50px;
    height: 2px;
    background: var(--primary_color);
    right: -60px;
    position: absolute;
    top: 11px;
}
.blog-sidebar .blog-sidebar-item ul li {
    line-height: 1.6;
    padding: 10px 0;
    border-bottom: 1px solid #686a70;
    margin: 3px 0;
}
.blog-sidebar .blog-sidebar-item ul li:first-child {
    margin-top: 0;
    padding-top: 0;
}
.blog-sidebar .blog-sidebar-item ul li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}
.blog-sidebar .blog-sidebar-item ul li a {
    display: block;
    color: #ffffff;
    font-weight: 300;
    transition: .3s;
}
.blog-sidebar .blog-sidebar-item ul li a:hover {
    color: var(--primary_color);
}
.blog-sidebar .blog-sidebar-item.blog-sidebar-search {
    padding: 0;
    background: none;
}
.search-form {
    display: block;
    position: relative;
}
.search-form input {
    display: block;
    width: 100%;
    line-height: 40px;
    padding: 19px 80px 19px 35px;
    background: #2a2a2a;
    border-radius: 4px;
    border: 1px solid transparent;
    font-weight: 300;
    transition: .3s;
    color: #fff;
}
.search-form input:focus {
    box-shadow: none;
    outline: none;
    border-color: var(--primary_color);
}
.search-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border: none;
    background: none;
    cursor: pointer;
    width: 70px;
    font-size: 25px;
    color: #fff;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul li {
    padding: 0;
    margin: 0;
    border: none;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul li a {
    background: #fff;
    padding: 6px 18px;
    color: #000;
    font-weight: 400;
    border-radius: 30px;
    font-size: 14px;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul li a:hover {
    background: #000;
    color: #fff;
}

/* 21 - Blog Style 2 */
.blog-item2 {
    text-align: center;
}
.blog-item2 .blog-thumbnail {
    height: 255px;
    margin-bottom: 0;
}
.blog-item2 .blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-item2 .blog-item-content {
    position: relative;
    margin-top: -22px;
    padding: 0 20px;
}
.blog-item2 .meta {
    margin: 0;
    background: #2a2a2a;
    padding: 12px 20px;
    border-radius: 4px;
    display: inline-flex;
    box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 5%);
    margin-bottom: 20px;
}
.blog-item2 .meta li {
    font-size: 12px;
}
.blog-item2 .meta li a {
    color: #a0a0a0;
}
.blog-item2 .meta li a:hover {
    color: #fff;
}
.blog-item2 .meta li a,
.blog-item2 .blog-item-content h1 a {
    background: none;
}
.blog-item2 .blog-item-content h1 {
    font-size: 25px;
}
.blog-item2 .blog-item-content h1 a:hover {
    color: var(--primary_color);
}
.blog-item2 .blog-item-content .read-more-btn {
    font-size: 14px;
}

/* 22 - Blog Details */
.blog-details-area {
    padding-top: 100px;
    padding-bottom: 100px;
}
.blog-details-area .blog-details-content .meta {
    margin-bottom: 15px;
}
.blog-details-area .blog-details-content p {
    font-size: 15px;
    color: #999999;
    color: #fff;
    font-weight: 300;
}
.blog-details-area .blog-details-content h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}
.blog-details-area .blog-details-content .lists {
    margin-bottom: 1rem;
}
.blog-details-area .blog-details-content .lists li {
    display: block;
    position: relative;
    font-size: 15px;
    line-height: 32px;
    padding-left: 25px;
}
.blog-details-area .blog-details-content .lists li::before {
    content: '';
    background: #999999;
    width: 10px;
    height: 2px;
    position: absolute;
    top: 15px;
    left: 5px;
}
.blog-details-area .blog-details-content .tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}
.blog-details-area .blog-details-content .tags li a {
    display: block;
    background: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 20px;
    border-radius: 30px;
    transition: .3s;
}
.blog-details-area .blog-details-content .tags li a:hover {
    background: #000000;
    color: #fff;
}

/* 23 - Comment */
.comments-area h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1.2;
}
.comments-area .comments .comments-list .comment-item {
    margin-bottom: 40px;
}
.comments-area .comments .comments-list .comment-item .comment-body {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-avatar {
    flex: none;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content {
    flex: 1;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content h4 {
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.comments-area .comments .comments-list .comment-item .comment-body .comment-content h4 .date {
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-left: 40px;
    /* color: #999999; */
    position: relative;
    text-transform: uppercase;
    color: var(--primary_color);
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content h4 .date::before {
    content: '';
    width: 20px;
    height: 1px;
    position: absolute;
    left: -25px;
    top: 5px;
    /* background: #999999; */
    background: var(--primary_color);
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content p {
    color: #686a6f;
    margin: 0;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content .reply-btn {
    text-transform: uppercase;
    padding: 7px 20px;
    font-size: 12px;
    margin-top: 20px;
}
.comments-area .comments .children {
    padding-left: 60px;
    border-top: 1px solid #686a70;
    padding-top: 40px;
}

/* 24 - Comment Form */
.comment-form {
    padding-top: 20px;
}
.comment-form h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1.2;
}
.comment-form form .input-group {
    margin-bottom: 20px;
}

.comment-form form .input-group input,
.comment-form form .input-group textarea {
    font-size: 14px;

    display: block;
    color: #fff;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    transition: .2s;
    padding-bottom: 3px;
}
.comment-form form .input-group input:focus,
.comment-form form .input-group textarea:focus {
    outline: none;
    box-shadow: none;
}
.comment-form form .input-group textarea {
    height: 180px;
    border-bottom: 1px solid #555555;
    resize: none;
}


/* 25 - Footer */
.footer-area {
    background: #1f1f1f;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 100px;
}
.footer-area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('../images/bg-shape.png') center no-repeat;
    background-size: cover;
    opacity: 0.4;
}
.footer-area .footer-widget-item h3 {
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 20px;
}
.footer-area .footer-widget-item p {
    color: #cccccc;
    font-size: 15px;
}
.footer-area .footer-widget-item .social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
}
.footer-area .footer-widget-item .social-links li a {
    color: #ccc;
    font-size: 18px;
    transition: .3s;
}
.footer-area .footer-widget-item .social-links li a:hover {
    color: #fff;
}
.footer-area .footer-widget-item .social-links li a i {
    display: block;
}
.footer-area .footer-widget-item.footer-links ul li + li {
    margin-top: 15px;
}
.footer-area .footer-widget-item.footer-links ul li a {
    color: #ccc;
    font-size: 15px;
    display: block;
    transition: .3s;
}
.footer-area .footer-widget-item.footer-links ul li a:hover {
    color: #fff;
}
.footer-area .footer-widget-item.footer-contact-widget ul li {
    display: block;
}
.footer-area .footer-widget-item.footer-contact-widget ul li + li {
    margin-top: 15px;
}
.footer-area .footer-widget-item.footer-contact-widget ul li .title {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    position: relative;
    z-index: 1;
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.2;
}
.footer-area .footer-widget-item.footer-contact-widget ul li .sub-title {
    color: #cccccc;
    font-size: 15px;
}




/* @Keyframe */
@keyframes rotating {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*Additional CSS*/

.global-color .setting-toggle {
    border-radius: 5px !important;
}

.global-color .setting-toggle i {
    animation: rotating 3s infinite linear !important;
}