/* 
    * Theme Name: Techu Mayur 
    * Theme URI: https://www.techumayur.in/
    * Author: Techu Mayur 
    * Author URI: https://www.techumayur.in/
    * (C) 2024 Techu Mayur is distributed under the terms of the GNU GPL.
    */
    /* ==============================
    Root Variables (Fluid Defaults)
    ================================= */
    :root {
        --theme-color: #0B666A;
        --primary-color: #F58725;
        --body-color: #F8FAFC;
        --white-color: #fff;
        --black-color: #000;
        --gray-bg: #fafafa;
        --border-color: #e8e8e8;
        --heading-color: #001219;
        --para-color: #495057;
        --folder: #F3E9CB;
        --folder-inner: #BEB393;
        --white-color-lines: #BBC1E1;
        --white-color-behind: #E1E6F9;
        --pencil-top: #275EFE;
        --pencil-bottom: #5C86FF;
        --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        --card-shadow-hover: 0 10px 30px rgba(255, 107, 53, 0.15);
        --banner-font: 700 clamp(2rem, 1rem + 3vw, 3.125rem)/1 "DM Sans", sans-serif;
        --heading-font: 700 clamp(1.8rem, 0.9rem + 2vw, 2.5rem)/1.3 "DM Sans", sans-serif;
        --sub-heading-font: 600 clamp(1.2rem, 0.8rem + 1.5vw, 1.875rem)/1.2 "DM Sans", sans-serif;
        --small-heading-font: 600 clamp(1.2rem, 0.8rem + 1.5vw, 1.5rem)/1.6 "DM Sans", sans-serif;
        --para-font: 400 clamp(1rem, 0.9rem + 0.5vw, 1.125rem)/1.5 "DM Sans", sans-serif;
        --body-font: 400 clamp(1rem, 0.9rem + 0.5vw, 1rem)/1.3 "DM Sans", sans-serif;
        --btn-font: 500 clamp(0.8rem, 0.8rem + 0.5vw, 1rem)/1rem "DM Sans", sans-serif;
        --small-btn-font: 500 clamp(0.5rem, 0.6rem + 0.5vw, 0.8rem)/0.8rem "DM Sans", sans-serif;
        --input-font: 400 clamp(0.9rem, 0.8rem + 0.5vw, 1rem)/1.4 "DM Sans", sans-serif;
        --nav-font: 600 clamp(0.9rem, 0.9rem + 0.5vw, 0.9rem)/1.5 "DM Sans", sans-serif;
        --footer-font: 400 clamp(0.9rem, 0.8rem + 0.5vw, 1rem)/1.5 "DM Sans", sans-serif;
        --badge-font: 500 clamp(0.5rem, 0.5rem + 0.5vw, 0.75rem)/1.5 "DM Sans", sans-serif;
        --small-badge-font: 600 clamp(0.5rem, 0.5rem + 0.5vw, 0.5rem)/1.5 "DM Sans", sans-serif;
    }

    #home-skills-store[data-theme="dark"] {
        --body-color: #0a0e1a;
        --white-color: #000;
        --gray-bg: #151929;
        --border-color: #252b42;
        --heading-color: #e8eaf6;
        --para-color: #b0b8d4;
        --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
        --card-shadow-hover: 0 10px 30px rgba(245, 135, 37, 0.3);
    }

    /* ==============================
    Reset & Global Defaults
    ================================= */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--body-color);
        font: var(--body-font);
        color: var(--para-color);
        font-display: swap;
    }

    /* ==============================
    Typography
    ================================= */
    h1 {
        font: var(--banner-font);
        color: var(--heading-color);
        font-display: swap;
    }

    h2 {
        font: var(--heading-font);
        color: var(--heading-color);
        font-display: swap;
    }

    h3 {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        font-display: swap;
    }

    p {
        font: var(--para-font);
        color: var(--para-color);
        font-display: swap;
    }

    a {
        font: var(--body-font);
        text-decoration: none;
        color: var(--heading-color);
        font-display: swap;
    }

    a:hover {
        color: var(--heading-color);
    }

    /* ==============================
    Forms & Buttons
    ================================= */
    .form-control,
    .form-select,
    button {
        transition: 0.3s ease-in-out;
        background: none;
        box-shadow: none;
        outline: 0;
    }

    .form-control:focus,
    .form-select:focus,
    button:focus {
        border: 0;
    }

    /* ==============================
    Scrollbar & Selection
    ================================= */
    ::-webkit-scrollbar {
        width: 0.35rem;
    }

    ::-webkit-scrollbar-track {
        background: var(--theme-color);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

    ::selection {
        color: var(--white-color);
        background: var(--theme-color);
    }

    /* ==============================
    Button
    ================================= */
    /****************************** 
    Primary & Secondary Button Style 
    *****************************/
    .primary-btn {
        font: var(--btn-font);
        text-decoration: none;
        display: inline-flex;
        border: none;
        cursor: pointer;
        align-items: center;
        gap: 0.75rem;
        background-color: var(--primary-color);
        color: var(--white-color);
        border-radius: 10rem;
        padding: 0.75rem 1.5rem;
        padding-left: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color 0.3s;
        width: fit-content;
    }

    .primary-btn-icon {
        flex-shrink: 0;
        width: 25px;
        height: 25px;
        position: relative;
        color: var(--primary-color);
        background-color: var(--white-color);
        border-radius: 50%;
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .primary-btn:hover {
        background-color: var(--theme-color);
        color: var(--white-color);
    }

    .primary-btn:hover .primary-btn-icon-after {
        color: var(--theme-color);
    }

    .primary-btn-svg-before {
        position: absolute;
        transform: translate(-150%, -100%);
    }

    .primary-btn:hover .primary-btn-svg-after:first-child {
        transition: transform 0.3s ease-in-out;
        transform: translate(150%, 100%);
    }

    .primary-btn:hover .primary-btn-svg-before {
        transition: transform 0.3s ease-in-out 0.1s;
        transform: translate(0);
    }

    .primary-btn-svg-after path {
        fill: var(--primary-color);
    }

    .primary-btn-svg-before path {
        fill: var(--theme-color);
    }

    .secondary-btn {
        position: relative;
        margin: auto;
        padding: 12px 18px;
        transition: all 0.2s ease;
        border: none;
        background: none;
        cursor: pointer;
        text-decoration: none;
        max-width: fit-content;
        margin-left: 0;
    }

    .secondary-btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 50px;
        background: color-mix(in srgb, var(--theme-color) 20%, transparent);
        width: 45px;
        height: 45px;
        transition: all 0.3s ease;
    }

    .secondary-btn span {
        position: relative;
        font: var(--btn-font);
        color: var(--theme-color);
    }

    .secondary-btn svg {
        position: relative;
        top: 1px;
        margin-left: 10px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: var(--theme-color);
        stroke-width: 2;
        transform: translateX(-5px);
        transition: all 0.3s ease;
    }

    .secondary-btn:hover:before {
        width: 100%;
        background: color-mix(in srgb, var(--theme-color) 90%, transparent);
    }

    .secondary-btn:hover svg {
        transform: translateX(0);
    }

    .secondary-btn:active {
        transform: scale(0.95);
    }

    .secondary-btn:hover span {
        color: var(--white-color);
    }

    .secondary-btn:hover svg {
        stroke: var(--white-color);
    }

    /****************************** 
    Hire Me Button Style 
    *****************************/
    .hire-btn {
        border: 0;
        outline: none;
        cursor: pointer;
        position: relative;
        border-radius: 3px;
        font: var(--btn-font);
        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        padding: 15px 30px 15px 70px;
        transition: background 0.3s;
        color: var(--white-color);
        background: var(--bg, var(--theme-color));
        margin-left: 20px;
        text-transform: uppercase;
    }

    .hire-btn>div {
        top: 0;
        left: 0;
        bottom: 0;
        width: 53px;
        position: absolute;
        overflow: hidden;
        border: 0;
        border-radius: 3px 0 0 3px;
        background: var(--primary-color);
        ;
    }

    .hire-btn:hover div {
        background: var(--theme-color);
    }

    .hire-btn>div .folder {
        width: 23px;
        height: 27px;
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .hire-btn>div .folder .top {
        left: 0;
        top: 0;
        z-index: 2;
        position: absolute;
        transform: translateX(var(--fx, 0));
        transition: transform 0.4s ease var(--fd, 0.3s);
    }

    .hire-btn>div .folder .top svg {
        width: 24px;
        height: 27px;
        display: block;
        fill: var(--folder);
        transform-origin: 0 50%;
        transition: transform 0.3s ease var(--fds, 0.45s);
        transform: perspective(120px) rotateY(var(--fr, 0deg));
    }

    .hire-btn>div .folder:before,
    .hire-btn>div .folder:after,
    .hire-btn>div .folder .paper {
        content: "";
        position: absolute;
        left: var(--l, 0);
        top: var(--t, 0);
        width: var(--w, 100%);
        height: var(--h, 100%);
        border-radius: 1px;
        background: var(--b, var(--folder-inner));
    }

    .hire-btn>div .folder:before {
        transform: translateX(var(--fx, 0));
        transition: transform 0.4s ease var(--fd, 0.3s);
    }

    .hire-btn>div .folder:after,
    .hire-btn>div .folder .paper {
        --l: 1px;
        --t: 1px;
        --w: 21px;
        --h: 25px;
        --b: var(--white-color-behind);
    }

    .hire-btn>div .folder:after {
        transform: translate(var(--pbx, 0), var(--pby, 0));
        transition: transform 0.4s ease var(--pbd, 0s);
    }

    .hire-btn>div .folder .paper {
        z-index: 1;
        --b: var(--white-color);
    }

    .hire-btn>div .folder .paper:before,
    .hire-btn>div .folder .paper:after {
        content: "";
        width: var(--wp, 14px);
        height: 2px;
        border-radius: 1px;
        transform: scaleY(0.5);
        left: 3px;
        top: var(--tp, 3px);
        position: absolute;
        background: var(--white-color-lines);
        box-shadow: 0 12px 0 0 var(--white-color-lines), 0 24px 0 0 var(--white-color-lines);
    }

    .hire-btn>div .folder .paper:after {
        --tp: 6px;
        --wp: 10px;
    }

    .hire-btn>div .pencil {
        height: 2px;
        width: 3px;
        border-radius: 1px 1px 0 0;
        top: 8px;
        left: 105%;
        position: absolute;
        z-index: 3;
        transform-origin: 50% 19px;
        background: var(--white-color);
        transform: translateX(var(--pex, 0)) rotate(35deg);
        transition: transform 0.4s ease var(--pbd, 0s);
    }

    .hire-btn>div .pencil:before,
    .hire-btn>div .pencil:after {
        content: "";
        position: absolute;
        display: block;
        background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--white-color) 55.1%, var(--white-color) 60%, var(--pencil-bottom) 60.1%));
        width: var(--w, 5px);
        height: var(--h, 20px);
        border-radius: var(--br, 2px 2px 0 0);
        top: var(--t, 2px);
        left: var(--l, -1px);
    }

    .hire-btn>div .pencil:before {
        -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
        clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
    }

    .hire-btn>div .pencil:after {
        --b: none;
        --w: 3px;
        --h: 6px;
        --br: 0 2px 1px 0;
        --t: 3px;
        --l: 3px;
        border-top: 1px solid var(--pencil-top);
        border-right: 1px solid var(--pencil-top);
    }

    .hire-btn:before,
    .hire-btn:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: var(--color);
        transform-origin: 9px 1px;
        transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
        top: 21px;
        right: 16px;
        transition: transform 0.3s;
    }

    .hire-btn:after {
        --r: 45deg;
    }

    .hire-btn:hover {
        --cx: 2px;
        --bg: var(--primary-color);
        --fx: -40px;
        --fr: -60deg;
        --fd: .15s;
        --fds: 0s;
        --pbx: 3px;
        --pby: -3px;
        --pbd: .15s;
        --pex: -24px;
        color: var(--white-color);
    }

    /* ==============================
    Utilities
    ================================= */
    .section-spacing {
        padding: 3rem 0;
    }

    .highlight {
        color: var(--primary-color);
    }

    .container-fluid {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    picture {
        display: block;
    }

    .sub-heading-tag-1 {
        display: inline-flex;
        padding: 10px 20px;
        background: color-mix(in srgb, var(--primary-color) 10%, transparent);
        color: var(--primary-color);
        border-radius: 30px;
        font: var(--badge-font);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 20px;
        gap: 1rem;
        align-items: center;
    }

    .sub-heading-tag-2 {
        display: inline-flex;
        padding: 10px 20px;
        background: color-mix(in srgb, var(--theme-color) 10%, transparent);
        color: var(--theme-color);
        border-radius: 30px;
        font: var(--badge-font);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 20px;
        gap: 1rem;
        align-items: center;
    }

    .section-title-center {
        text-align: center;
        margin-bottom: 70px;
    }

    .section-title h2 {
        margin-bottom: 15px;
    }

    .section-title h2 .highlight {
        color: var(--primary-color);
        position: relative;
        display: inline-block;
    }

    .section-title h2 .highlight::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary-color);
        border-radius: 2px;
    }

    .section-para-center {
        max-width: 60%;
        margin: 1.5rem auto 0;
    }

    .section-para-left {
        max-width: 80%;
        margin: 1.5rem 0 0;
    }

    /* ==============================
    Hover Effects
    ================================= */
    .zoom-hover picture {
        position: relative;
        overflow: hidden;
        display: block;
    }

    .zoom-hover picture img {
        transition: 1.5s cubic-bezier(0, 0, 0.2, 1);
    }

    .zoom-hover:hover picture img {
        transform: scale(1.1);
    }

    /* ==============================
    Loader
    ================================= */
    .loader {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        background: var(--white-color) url("../images/logo.svg") 50% 50% no-repeat;
    }

    /* ==============================
    Swiper Slider
    ================================= */
    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: var(--primary-color);
        width: 45px;
        height: 45px;
        background: white;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 18px;
        font-weight: 700;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 6px 16px rgba(255, 122, 0, 0.4);
    }

    .swiper-button-active {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 6px 16px rgba(255, 122, 0, 0.4);
    }

    .swiper-pagination-bullet {
        background: var(--theme-color);
        opacity: 0.6;
    }

    .swiper-pagination-bullet-active {
        background: var(--primary-color);
        opacity: 1;
    }

    /* ==============================
    Navbar
    ================================= */
    #navigation_bar {
        position: fixed;
        transition: top .6s ease-in-out;
        background: var(--white-color);
        width: 100%;
        top: 0;
        left: 0;
        z-index: 999;
    }

    #navigation_bar.nav-down {
        background: var(--white-color);
        transition: top 0.6s ease-in-out;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        top: 0
    }

    #navigation_bar.nav-up {
        top: -140px
    }

    #navigation_bar .navbar .navbar-brand {
        aspect-ratio: 200 / 67;
        display: inline-block;
    }

    #navigation_bar .navbar .navbar-brand picture {
        width: 200px;
        height: auto;
        display: inline-block;
    }

    #navigation_bar .navbar-nav {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }

    #navigation_bar .navbar .nav-link {
        position: relative;
        font: var(--nav-font);
        color: var(--black-color);
        text-transform: uppercase;
        transition: color 0.3s ease;
        padding-bottom: 0px;
    }

    #navigation_bar .navbar .nav-link::before,
    #navigation_bar .navbar .nav-link::after {
        position: absolute;
        opacity: 0;
        transition: all 0.3s ease;
        font-size: 1.1rem;
        color: var(--primary-color);
    }

    #navigation_bar .navbar .nav-link::before {
        content: "</";
        left: -0.7rem;
        transform: translateX(-5px);
        top: 0.4rem;
    }

    #navigation_bar .navbar .nav-link::after {
        content: ">";
        right: -0.2rem;
        transform: translateX(5px);
        top: 0.4rem;
    }

    #navigation_bar .navbar .nav-link:hover::before,
    #navigation_bar .navbar .nav-link:hover::after,
    #navigation_bar .navbar .nav-link.active::before,
    #navigation_bar .navbar .nav-link.active::after {
        opacity: 1;
        transform: translateX(0);
        color: var(--primary-color);
    }

    #navigation_bar .navbar .nav-link:hover,
    #navigation_bar .navbar .nav-link.active {
        color: var(--theme-color);
        border-bottom: 2px solid var(--primary-color);
    }

    #navigation_bar .dropdown-toggle::after {
        border: 0;
    }

    #navigation_bar .nav-item.dropdown::after {
        content: "";
        margin-left: 0.2rem;
        background: url("../images/dropdown-arrow.svg") no-repeat;
        transition: color 0.3s ease;
        position: absolute;
        top: 8px;
        right: -10px;
        height: 20px;
        width: 20px;
        display: block;
        background-size: contain;
    }

    .navbar .dropdown-menu {
        margin: 0;
        border-radius: 0.25rem;
        border: 1px solid #ddd;
    }

    #navigation_bar .navbar .dropdown .nav-link::before,
    #navigation_bar .navbar .dropdown .nav-link::after {
        display: none;
    }

    #navigation_bar .navbar .dropdown .nav-link:hover,
    #navigation_bar .navbar .dropdown .nav-link.active {
        border-bottom: none;
    }

    #navigation_bar .navbar-expand-xl .navbar-nav .dropdown-menu {
        top: 3.5rem;
        border-radius: 0;
        width: 850px;
        left: 0;
        transform: translateX(-35%);
        max-width: calc(100vw - 20px);
        padding: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        right: 0;
        margin: auto;
    }

    #navigation_bar .dropdown-menu.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    #navigation_bar .mega-menu-container {
        display: flex;
        height: 100vh;
        justify-content: center;
        border-top: 4px solid var(--primary-color);
    }

    #navigation_bar .mega-nav {
        width: 50%;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-right: 1px solid #e5e7eb;
        height: 85vh;
    }

    #navigation_bar .mega-nav-item {
        padding: 10px 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        background: transparent;
        border: none;
        border-left: 0px solid transparent;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
    }

    #navigation_bar .mega-nav-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--primary-color);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }

    #navigation_bar .mega-nav-item:hover {
        background: var(--white-color);
    }

    #navigation_bar .mega-nav-item.active {
        background: var(--white-color);
        border-left-color: transparent;
    }

    #navigation_bar .mega-nav-item.active::before {
        transform: scaleY(1);
    }

    #navigation_bar .mega-nav-icon {
        width: 50px;
        height: 50px;
        min-width: 5s0px;
        background: #e5e7eb;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #374151;
        transition: all 0.3s ease;
    }

    #navigation_bar .mega-nav-item.active .mega-nav-icon {
        background: var(--primary-color);
    }

    #navigation_bar .mega-nav-item.active .mega-nav-icon img,
    #navigation_bar .mega-nav-icon:hover img {
        filter: brightness(0) invert(1);
    }

    #navigation_bar .mega-nav-content {
        flex: 1;
        line-height: normal;
    }

    #navigation_bar .mega-nav-title {
        font: var(--para-font);
        font-weight: 600;
        margin-bottom: 0;
    }

    #navigation_bar .mega-nav-desc {
        font: var(--body-font);
        color: var(--para-color);
    }

    #navigation_bar .mega-nav-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--theme-color);
        color: var(--white-color);
        padding: 4px 10px;
        border-radius: 6px;
        font: var(--small-badge-font);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #navigation_bar .mega-nav-badge.orange {
        background: var(--primary-color);
    }

    #navigation_bar .mega-content {
        padding: 0;
        position: relative;
        width: 50%;
        background: var(--white-color);
    }

    #navigation_bar .content-panel {
        position: absolute;
        inset: 32px;
        opacity: 0;
        transform: translateX(30px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    #navigation_bar .content-panel.active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    #navigation_bar .content-card {
        height: auto;
        background: var(--white-color);
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
    }

    #navigation_bar .content-card:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
        transform: translateY(-4px);
    }

    #navigation_bar .content-image {
        height: 200px;
        overflow: hidden;
        position: relative;
    }

    #navigation_bar .content-image picture {
        height: 100%;
    }

    #navigation_bar .content-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    #navigation_bar .content-card:hover .content-image img {
        transform: scale(1.08);
    }

    #navigation_bar .content-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        color: var(--primary-color);
        padding: 8px 16px;
        border-radius: 8px;
        font: var(--badge-font);
        border: 1px solid var(--primary-color);
        z-index: 2;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #navigation_bar .content-body {
        padding: 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #navigation_bar .content-title {
        font: var(--sub-heading-font);
        margin-bottom: 12px;
        line-height: 1.2;
        color: var(--heading-color);
    }

    #navigation_bar .content-desc {
        line-height: normal;
        margin-bottom: 20px;
        flex: 1;
        font: var(--body-font);
        color: var(--para-color);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
    }

    #navigation_bar .content-features {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }

    #navigation_bar .feature-tag {
        padding: 5px 10px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        color: #374151;
        font: var(--badge-font);
        transition: all 0.3s ease;
    }

    #navigation_bar .feature-tag:hover {
        background: #fef3c7;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    #navigation_bar .content-actions {
        display: flex;
        gap: 12px;
    }

    #navigation_bar .primary-btn {
        padding: 10px 15px;
    }

    #navigation_bar .primary-btn,
    #navigation_bar .secondary-btn span {
        font: var(--small-btn-font);
    }

    #navigation_bar .primary-btn-icon {
        width: 20px;
        height: 20px;
    }

    .popular-ai-tool {
        padding: 5rem 2rem 0;
    }

    .popular-ai-tool-grid {
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin: 1rem 0;
    }

    .popular-ai-tool h4 {
        font: var(--small-heading-font);
    }

    .popular-ai-tool-grid span {
        font: var(--body-font);
        padding-top: 0.5rem;
        display: block;
        font-weight: 500;
    }

    #navigation_bar .navbar-expand-xl .navbar-nav .resources-menu .dropdown-menu {
        transform: translateX(-60%);
    }

    #navigation_bar .navbar-expand-xl .navbar-nav .tech-menu .dropdown-menu {
        transform: translateX(-75%);
    }

    /* Footer */
    #newsletter {
        overflow: hidden;
        position: relative;
    }

    #newsletter .newsletter-wrapper {
        position: relative;
        z-index: 2;
    }

    #newsletter .newsletter-container {
        background: var(--white-color);
        border-radius: 24px;
        padding: 60px 40px;
        box-shadow: 0 4px 20px rgba(11, 102, 106, 0.08);
        position: relative;
        overflow: hidden;
    }

    #newsletter .newsletter-decorative {
        position: absolute;
        top: -50px;
        right: -50px;
        width: 300px;
        height: 300px;
        border: 30px solid var(--theme-color);
        border-radius: 50%;
        opacity: 0.05;
    }

    #newsletter .newsletter-decorative-2 {
        position: absolute;
        bottom: -30px;
        left: -30px;
        width: 200px;
        height: 200px;
        border: 20px solid var(--primary-color);
        border-radius: 50%;
        opacity: 0.05;
    }

    #newsletter .newsletter-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--theme-color);
        color: var(--white-color);
        padding: 8px 20px;
        border-radius: 50px;
        font: var(--badge-font);
        margin-bottom: 24px;
        animation: fadeInUp 0.6s ease;
    }

    #newsletter .newsletter-badge i {
        font-size: 16px;
    }

    #newsletter .newsletter-content {
        text-align: center;
        max-width: 700px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    #newsletter .newsletter-title {
        font: var(--heading-font);
        color: var(--heading-color);
        margin-bottom: 16px;
        animation: fadeInUp 0.6s ease 0.2s backwards;
    }

    #newsletter .newsletter-title span {
        color: var(--primary-color);
        position: relative;
        display: inline-block;
    }

    #newsletter .newsletter-title span::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-color);
        border-radius: 2px;
    }

    #newsletter .newsletter-description {
        font: var(--para-font);
        color: var(--para-color);
        margin-bottom: 40px;
        animation: fadeInUp 0.6s ease 0.4s backwards;
    }

    #newsletter .newsletter-form-wrapper {
        animation: fadeInUp 0.6s ease 0.6s backwards;
    }

    #newsletter .newsletter-form {
        display: flex;
        gap: 12px;
        max-width: 600px;
        margin: 0 auto 24px;
        padding: 8px;
        background: var(--gray-bg);
        border-radius: 60px;
        border: 2px solid var(--border-color);
        transition: all 0.3s ease;
    }

    #newsletter .newsletter-form:focus-within {
        border-color: var(--theme-color);
        box-shadow: 0 0 0 4px rgba(11, 102, 106, 0.1);
    }

    #newsletter .newsletter-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 16px 24px;
        font: var(--input-font);
        color: var(--heading-color);
        outline: none;
    }

    #newsletter .newsletter-input::placeholder {
        color: var(--para-color);
        opacity: 0.7;
    }

    #newsletter .newsletter-submit-btn {
        background: var(--theme-color);
        color: var(--white-color);
        border: none;
        padding: 16px 40px;
        border-radius: 50px;
        font: var(--btn-font);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    #newsletter .newsletter-submit-btn:hover {
        background: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 135, 37, 0.3);
    }

    #newsletter .newsletter-submit-btn i {
        transition: transform 0.3s ease;
    }

    #newsletter .newsletter-submit-btn:hover i {
        transform: translateX(4px);
    }

    #newsletter .newsletter-privacy {
        font: var(--footer-font);
        color: var(--para-color);
        font-size: 14px;
    }

    #newsletter .newsletter-privacy a {
        color: var(--theme-color);
        text-decoration: none;
        font-weight: 500;
    }

    #newsletter .newsletter-privacy a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

    #newsletter .newsletter-stats {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin-top: 40px;
        padding-top: 40px;
        border-top: 1px solid var(--border-color);
    }

    #newsletter .stat-item {
        text-align: center;
        animation: fadeInUp 0.6s ease 0.8s backwards;
    }

    #newsletter .stat-number {
        font: var(--sub-heading-font);
        color: var(--theme-color);
        display: block;
        margin-bottom: 4px;
    }

    #newsletter .stat-label {
        font: var(--footer-font);
        color: var(--para-color);
        font-size: 14px;
    }

    #newsletter .newsletter-features {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 32px;
        flex-wrap: wrap;
    }

    #newsletter .feature-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font: var(--footer-font);
        color: var(--para-color);
        animation: fadeInUp 0.6s ease 1s backwards;
    }

    #newsletter .feature-item i {
        color: var(--theme-color);
        font-size: 18px;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Success Message */
    #newsletter .success-message {
        display: none;
        background: #d4edda;
        color: #155724;
        padding: 16px 24px;
        border-radius: 12px;
        margin-top: 20px;
        border: 1px solid #c3e6cb;
        font: var(--body-font);
        animation: fadeInUp 0.4s ease;
    }

    #newsletter .success-message.show {
        display: block;
    }

    #footer {
        background: var(--theme-color);
        position: relative;
        overflow: hidden;
        padding-bottom: 0;
    }



    #footer .footer-main {
        padding: 80px 0 0;
        position: relative;
    }

    #footer .footer-brand {
        margin-bottom: 30px;
    }

    #footer .footer-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: var(--primary-color);
        color: var(--white-color);
        font: var(--sub-heading-font);
        border-radius: 16px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
        box-shadow: var(--card-shadow);
    }

    #footer .footer-logo:hover {
        transform: translateY(-5px);
        box-shadow: var(--card-shadow-hover);
    }

    #footer .footer-description {
        font: var(--footer-font);
        color: var(--white-color);
        margin-bottom: 0;
        max-width: 320px;
    }

    #footer .footer-title {
        font: var(--small-heading-font);
        color: var(--white-color);
        margin-bottom: 24px;
        position: relative;
        padding-bottom: 12px;
    }

    #footer .footer-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px;
        height: 3px;
        background: var(--primary-color);
        border-radius: 2px;
    }

    #footer .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #footer .footer-links li {
        margin-bottom: 14px;
    }

    #footer .footer-links a {
        font: var(--footer-font);
        color: var(--white-color);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.3s ease;
        position: relative;
        padding-left: 20px;
    }

    #footer .footer-links a::before {
        content: '';
        position: absolute;
        left: 0;
        width: 12px;
        height: 2px;
        background: var(--primary-color);
        transition: all 0.3s ease;
        opacity: 0;
    }

    #footer .footer-links a:hover {
        color: var(--primary-color);
        padding-left: 25px;
    }

    #footer .footer-links a:hover::before {
        opacity: 1;
        width: 16px;
    }

    #footer .contact-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    #footer .contact-icon {
        width: 40px;
        height: 40px;
        background: var(--body-color);
        border: 2px solid var(--border-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    #footer .contact-icon i {
        color: var(--theme-color);
        font-size: 18px;
    }

    #footer .contact-item:hover .contact-icon {
        background: var(--primary-color);
        border-color: var(--primary-color);
        transform: scale(1.1);
    }

    #footer .contact-item:hover .contact-icon i {
        color: var(--white-color);
    }

    #footer .contact-text {
        font: var(--footer-font);
        color: var(--white-color);
        margin: 0;
        flex: 1;
    }

    #footer .contact-text a {
        color: var(--white-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    #footer .contact-text a:hover {
        color: var(--primary-color);
    }

    #footer .social-links {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    #footer .social-link {
        width: 44px;
        height: 44px;
        background: var(--body-color);
        border: 2px solid var(--border-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        text-decoration: none;
        transition: all 0.3s ease;
        font-size: 18px;
    }

    #footer .social-link:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--white-color);
        transform: translateY(-3px);
    }

    #footer .footer-bottom {
        border-top: 2px solid var(--border-color);
        padding: 30px 0;
        margin-top: 50px;
    }

    #footer .footer-bottom-links {
        display: flex;
        gap: 30px;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    #footer .footer-bottom-links li {
        position: relative;
    }

    #footer .footer-bottom-links li:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        background: var(--border-color);
        border-radius: 50%;
    }

    #footer .footer-bottom-links a {
        font: var(--footer-font);
        color: var(--white-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    #footer .footer-bottom-links a:hover {
        color: var(--primary-color);
    }

    #footer .copyright-text {
        font: var(--footer-font);
        color: var(--white-color);
        margin: 0;
    }

    #footer .designer-credit {
        font: var(--footer-font);
        color: var(--white-color);
        margin: 0;
    }

    #footer .designer-credit a {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    #footer .designer-credit a:hover {
        color: var(--primary-color);
    }

    #footer .back-to-top {
        width: 50px;
        height: 50px;
        background: var(--primary-color);
        color: var(--white-color);
        border: none;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 20px;
        box-shadow: var(--card-shadow);
    }

    #footer .back-to-top:hover {
        background: var(--primary-color);
        transform: translateY(-5px);
        box-shadow: var(--card-shadow-hover);
    }

    #footer .decorative-shape {
        position: absolute;
        z-index: 0;
        opacity: 0.05;
    }

    #footer .shape-1 {
        top: 50px;
        right: 100px;
        width: 150px;
        height: 150px;
        border: 20px solid var(--white-color);
        border-radius: 30px;
        transform: rotate(15deg);
    }

    #footer .shape-2 {
        bottom: 80px;
        left: 50px;
        width: 100px;
        height: 100px;
        background: var(--white-color);
        border-radius: 50%;
    }

    /* ==============================
    Home Page Styles
    ================================= */
    /* ==============================
 Home Banner Section
    ================================= */
    #home-banner .HomeBannerSwiper {
        margin-top: var(--header-height, 80px);
    }

    #home-banner .HomeBannerSwiper,
    #home-banner .HomeBannerSwiper .swiper-slide {
        display: flex;
        align-items: center;
        flex-direction: column;
        overflow: hidden;
    }

    #home-banner .home-banner-content-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--gray-bg);
        color: var(--primary-color);
        padding: 8px 18px;
        border-radius: 25px;
        margin-bottom: 10px;
        border: 1px solid var(--border-color);
        font: var(--badge-font);
        letter-spacing: normal;
    }

    #home-banner.banner-section h1,
    #home-banner.banner-section h2 {
        font: var(--banner-font);
        color: var(--heading-color);
        margin-bottom: 1rem;
    }

    #home-banner.banner-section p {
        font: var(--para-font);
        color: var(--para-color);
        margin-bottom: 2rem;
    }

    #home-banner .home-banner-stats-list {
        display: flex;
        gap: 2rem;
        margin: 0 0 2rem;
        flex-wrap: wrap;
    }

    #home-banner .home-banner-stat-box {
        background: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 10px;
        text-align: center;
        flex: 1;
        transition: all 0.3s;
    }

    #home-banner .home-banner-stat-box:hover {
        border-color: var(--primary-color);
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    #home-banner .home-banner-number {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        display: block;
    }

    #home-banner .home-banner-label {
        font: var(--para-font);
        color: var(--para-color);
    }

    #home-banner .btn-group-hero {
        display: flex;
        align-items: center;
        gap: 2rem;
        max-width: fit-content;
    }

    #home-banner .HomeBannerSwiper,
    #home-banner .HomeBannerSwiper .swiper-wrapper {
        position: unset !important;
        padding-top: 0;
    }

    #home-banner .comparison-wrapper {
        width: 90%;
        position: relative;
        padding-top: 0.5rem;
        margin: auto;
    }

    #home-banner .comparison-container {
        position: relative;
        width: 100%;
        height: 450px;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        transform: translateY(-5px);
        box-shadow:
            0 0 20px rgba(0, 0, 0, 0.08),
            0 0 40px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        user-select: none;
    }

    #home-banner .editor-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--white-color);
        display: flex;
        flex-direction: column;
    }

    #home-banner .window-controls {
        position: absolute;
        top: 20px;
        left: 25px;
        display: flex;
        gap: 8px;
        z-index: 10;
    }

    #home-banner .control-btn {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    #home-banner .control-red {
        background: #FF5F56;
    }

    #home-banner .control-yellow {
        background: #FFBD2E;
    }

    #home-banner .control-green {
        background: #27C93F;
    }

    #home-banner .editor-tabs {
        background: var(--white-color);
        border-bottom: 2px solid var(--border-color);
        display: flex;
        padding: 0;
        padding-top: 50px;
    }

    #home-banner .tab-btn {
        padding: 12px 24px;
        border: none;
        background: transparent;
        color: var(--para-color);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border-right: 1px solid var(--border-color);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
    }

    #home-banner .tab-btn:hover {
        background: #f8f9fa;
    }

    #home-banner .tab-btn.active {
        background: var(--white-color);
        color: var(--theme-color);
        border-bottom: 3px solid var(--theme-color);
    }

    #home-banner .tab-icon {
        width: 18px;
        height: 18px;
    }

    #home-banner .icon-html {
        color: #E34C26;
    }

    #home-banner .icon-css {
        color: #264de4;
    }

    #home-banner .icon-js {
        color: #F0DB4F;
    }

    #home-banner .editor-content {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    #home-banner .tab-content {
        display: none;
        height: 100%;
    }

    #home-banner .tab-content.active {
        display: block;
    }

    #home-banner .code-editor {
        width: 100%;
        height: 100%;
        padding: 20px 30px;
        border: none;
        outline: none;
        white-space: pre;
        background-color: #fafafa;
        color: var(--heading-color);
        caret-color: var(--theme-color);
        tab-size: 4;
        overflow: auto;
        font-size: 14px;
        line-height: 1.8;
        resize: none;
        background: #fafafa;
        color: var(--heading-color);
        text-indent: 0 !important;
        direction: ltr;
        padding-left: 20px;
    }

    #home-banner .code-editor::first-line {
        text-indent: 0;
    }

    #home-banner .preview-side {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: var(--white-color);
        clip-path: inset(0 0 0 50%);
        transition: clip-path 0.05s ease-out;
    }

    #home-banner .preview-frame {
        width: 100%;
        height: 100%;
        border: none;
        background: var(--white-color);
    }

    #home-banner .slider-handle {
        position: absolute;
        top: 0;
        left: 50%;
        width: 60px;
        height: 100%;
        cursor: ew-resize;
        z-index: 100;
        transform: translateX(-50%);
        transition: left 0.05s ease-out;
    }

    #home-banner .slider-line {
        position: absolute;
        top: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        background: var(--theme-color);
        transform: translateX(-50%);
        pointer-events: none;
    }

    #home-banner .slider-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: var(--white-color);
        border: 4px solid var(--theme-color);
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: ew-resize;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    #home-banner .slider-handle:hover .slider-button {
        background: var(--theme-color);
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow: 0 6px 25px rgba(11, 102, 106, 0.4);
    }

    #home-banner .slider-handle:hover .slider-arrows {
        color: var(--white-color);
    }

    #home-banner .slider-handle:hover .slider-line {
        width: 6px;
        background: var(--primary-color);
    }

    #home-banner .slider-arrows {
        font-size: 24px;
        color: var(--theme-color);
        font-weight: bold;
        transition: color 0.3s ease;
    }

    #home-banner .comparison-container.dragging {
        cursor: ew-resize;
    }

    #home-banner .comparison-container.dragging .slider-button {
        background: var(--theme-color);
        transform: translate(-50%, -50%) scale(1.15);
    }

    #home-banner .comparison-container.dragging .slider-arrows {
        color: var(--white-color);
    }

    #home-banner .comparison-container.dragging .slider-line {
        width: 6px;
        background: var(--primary-color);
    }

    #home-banner .mockup-container-staged {
        position: relative;
        height: 500px;
        display: block;
    }

    #home-banner .device-frame {
        /* background: #212529; */
        position: absolute;
        overflow: hidden;
        border-radius: 20px;
    }

    #home-banner .device-screen {
        border: none;
        width: 100%;
        height: 100%;
        display: block;
        overflow-y: scroll;
    }

    #home-banner .desktop-frame {
        width: 420px;
        z-index: 10;
        border-radius: 12px;
        top: 16%;
        left: 45%;
        transform: translateX(-50%);
        background-size: contain;
        background-position: top left;
        background-repeat: no-repeat;
    }

    #home-banner .desktop-screen {
        border-radius: 4px;
    }

    #home-banner .tablet-frame {
        width: 210px;
        height: 250px;
        z-index: 15;
        background: url(../images/home/ipad.png);
        background-size: contain;
        background-position: top left;
        background-repeat: no-repeat;
        border-radius: 15px;
        bottom: 60px;
        transform: translateX(20%) rotate(5deg);
        right: 60px;
    }

    #home-banner .tablet-screen {
        border-radius: 8px;
    }

    #home-banner .mobile-frame {
        width: 125px;
        height: 210px;
        z-index: 20;
        border: 5px solid #212529;
        border-radius: 30px;
        left: 50px;
        bottom: 60px;
        transform: translateX(-20%) rotate(-5deg);
    }

    #home-banner .mobile-screen {
        border-radius: 25px;
    }

    #home-banner .desktop-frame iframe {
        width: 1225px;
        height: 700px;
        transform: scale(0.33);
        transform-origin: top left;
        margin: 0.7rem 0.5rem;
    }

    #home-banner .tablet-frame iframe {
        width: 718px;
        height: 990px;
        transform: scale(0.25);
        transform-origin: top left;
        padding: 2.5rem 2.5rem;
    }

    #home-banner .mobile-frame iframe {
        width: 400px;
        height: 667px;
        transform: scale(0.3);
        transform-origin: top left;
    }

    #home-banner .visual-container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        justify-items: end;
        align-items: center;
        height: auto;
        padding: 20px;
    }

    #home-banner .creative-card {
        background: var(--white-color);
        border-radius: 20px;
        padding: 20px;
        width: 100%;
        max-width: 260px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        border: 2px solid transparent;
        color: var(--para-color);
    }

    #home-banner .creative-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
        border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    }

    #home-banner .card-icon-wrapper {
        width: 40px;
        height: 40px;
        background: var(--primary-color);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        box-shadow: 0 5px 12px color-mix(in srgb, var(--primary-color) 25%, transparent);
        transition: all 0.3s ease;
    }

    #home-banner .card-icon-wrapper.alt {
        background: var(--theme-color);
        box-shadow: 0 5px 12px color-mix(in srgb, var(--theme-color) 25%, transparent);
    }

    #home-banner .card-icon-wrapper svg {
        width: 26px;
        height: 26px;
        fill: var(--white-color);
    }

    #home-banner .card-title {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin-bottom: 8px;
    }

    #home-banner.banner-section .card-description {
        font: var(--body-font);
        color: var(--para-color);
        margin-bottom: 10px;
    }

    #home-banner .card-badge {
        display: inline-block;
        background: color-mix(in srgb, var(--primary-color) 8%, transparent);
        color: var(--primary-color);
        padding: 4px 10px;
        border-radius: 20px;
        font: var(--small-badge-font);
        text-transform: uppercase;
    }

    #home-banner .stats-container {
        display: flex;
        gap: 1rem;
        margin: 0 0 2rem;
        flex-wrap: wrap;
    }

    #home-banner .stat-card {
        background: var(--white-color);
        padding: 20px 30px;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
        border: 2px solid transparent;
        transition: all 0.3s ease;
        flex: 1;
        min-width: 140px;
        text-align: center;
    }

    #home-banner .stat-card:hover {
        border-color: var(--primary-color);
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(255, 140, 66, 0.15);
    }

    #home-banner .stat-number {
        font: var(--sub-heading-font);
        color: var(--primary-color);
        display: block;
        margin-bottom: 5px;
    }

    #home-banner .stat-label {
        font: var(--body-font);
        color: var(--para-color);
        letter-spacing: 1px;
    }

    #home-banner .feature-pills {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 2rem;
        max-width: 70%;
    }

    #home-banner .pill {
        background: var(--white-color);
        padding: 15px 30px;
        border-radius: 50px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        display: inline-flex;
        align-items: center;
        gap: 15px;
        font: var(--badge-font);
        color: var(--heading-color);
        transition: all 0.3s;
    }

    #home-banner .pill:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    #home-banner .visual-area {
        position: relative;
        height: 500px;
    }

    #home-banner .workspace-scene {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #home-banner .ui-card {
        position: absolute;
        background: var(--white-color);
        padding: 20px;
        border-radius: 16px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
        animation: float-ui 5s infinite ease-in-out;
    }

    @keyframes float-ui {

        0%,
        100% {
            transform: translateY(0) rotate(0deg);
        }

        50% {
            transform: translateY(-20px) rotate(2deg);
        }
    }

    #home-banner .card-top-left {
        top: 10%;
        left: 0;
        width: 140px;
        animation-delay: 0s;
    }

    #home-banner .card-top-right {
        top: 10%;
        right: 0;
        width: 150px;
        animation-delay: 1.5s;
    }

    #home-banner .card-bottom-right {
        bottom: 10%;
        right: 5%;
        width: 130px;
        animation-delay: 3s;
    }

    #home-banner .card-icon-circle {
        width: 50px;
        height: 50px;
        background: var(--theme-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    #home-banner .card-icon-circle.orange {
        background: var(--primary-color);
    }

    #home-banner .card-heading {
        font: var(--body-font);
        color: var(--heading-color);
        margin-bottom: 0;
        font-weight: 600;
    }

    #home-banner .card-subtext {
        font: var(--badge-font);
        color: var(--para-color);
    }

    #home-banner .desk-surface {
        padding-top: 3rem;
        text-align: center;
        max-width: 90%;
    }

    /* ==============================
Home Skills Section
   ============================== */
    #home-skills {
        position: relative;
        overflow: hidden;
        padding: 3rem 0;
    }

    #home-skills .skills-bg {
        background-color: var(--primary-color);
        padding: 1rem 0;
    }

    #home-skills .skills-bg:before {
        content: "";
        background-color: var(--theme-color);
        display: block;
        width: 110%;
        height: 40px;
        position: absolute;
        z-index: -1;
        left: -5%;
        overflow: hidden;
        transform: rotate(-3deg);
        top: 60px;
    }

    #home-skills .skills-slider .swiper-wrapper {
        align-items: center;
        transition-timing-function: linear !important;
    }

    #home-skills .skills-slider .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        flex: 0 0 auto;
        text-align: left;
        position: relative;
    }

    #home-skills .skills-slider .swiper-slide span {
        font: var(--body-font);
        color: var(--white-color);
        font-weight: 600;
        white-space: nowrap;
    }

    #home-skills .skills-slider .swiper-slide picture {
        display: block;
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    #home-skills .skills-slider .swiper-slide img {
        filter: brightness(0) invert(1);
    }

    /* ==============================
   Home About Us Section
   ============================== */
    #home-about-us .profile-content h2 {
        color: var(--theme-color);
    }

    #home-about-us .profile-content h2,
    #home-about-us .profile-content p {
        margin-bottom: 0;
    }

    #home-about-us .about-us-btn-group {
        margin-top: 1.5rem;
        max-width: fit-content;
        display: flex;
        gap: 1.5rem;
    }

    #home-about-us .profile-image {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: var(--gray-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid var(--primary-color);
        flex-shrink: 0;
    }

    #home-about-us .profile-info {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-bottom: 1rem;
    }

    #home-about-us .about-us-content p {
        margin: 1rem 0 2rem;
    }

    #home-about-us .feature-card {
        background: var(--white-color);
        border-radius: 20px;
        padding: 20px 10px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        border: 2px solid #e8e8e8;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #home-about-us .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--theme-color);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    #home-about-us .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(11, 102, 106, 0.15);
        border-color: var(--theme-color);
    }

    #home-about-us .feature-card:hover::before {
        opacity: 0.03;
    }

    #home-about-us .feature-card.card-1 .icon-wrapper {
        background: rgba(11, 102, 106, 0.1);
    }

    #home-about-us .feature-card.card-2 .icon-wrapper {
        background: rgba(245, 135, 37, 0.1);
    }

    #home-about-us .feature-card.card-3 .icon-wrapper {
        background: rgba(11, 102, 106, 0.1);
    }

    #home-about-us .icon-wrapper {
        width: 50px;
        height: 50px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        transition: all 0.4s ease;
        position: relative;
        z-index: 1;
    }

    #home-about-us .feature-card:hover .icon-wrapper {
        transform: scale(1.1) rotate(5deg);
    }

    #home-about-us .feature-card.card-1:hover .icon-wrapper {
        background: rgba(11, 102, 106, 0.15);
    }

    #home-about-us .feature-card.card-2:hover .icon-wrapper {
        background: rgba(245, 135, 37, 0.15);
    }

    #home-about-us .feature-card.card-3:hover .icon-wrapper {
        background: rgba(11, 102, 106, 0.15);
    }

    #home-about-us .card-title {
        font: var(--body-font);
        color: var(--heading-color);
        margin-bottom: 0;
        letter-spacing: -0.5px;
        position: relative;
        z-index: 1;
    }

    #home-about-us .feature-card:nth-child(1) {
        animation-delay: 0s;
    }

    #home-about-us .feature-card:nth-child(2) {
        animation-delay: 0.15s;
    }

    #home-about-us .feature-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    #home-about-us .terminal-window {
        background: var(--heading-color);
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        height: calc(100vh - 2rem);
        max-height: 700px;
        max-width: 90%;
        display: flex;
        flex-direction: column;
        transition: background 0.3s ease;
    }

    #home-about-us .terminal-window.light-mode {
        background: var(--white-color);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }

    #home-about-us .terminal-header {
        background: linear-gradient(to bottom, var(--black-color), var(--heading-color));
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-color);
        opacity: 0.9;
        transition: background 0.3s ease;
    }

    #home-about-us .terminal-window.light-mode .terminal-header {
        background: linear-gradient(to bottom, var(--white-color-behind), var(--gray-bg));
        opacity: 1;
    }

    #home-about-us .terminal-buttons {
        display: flex;
        gap: 0.5rem;
    }

    #home-about-us .terminal-btn {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    #home-about-us .terminal-btn:hover {
        opacity: 0.8;
    }

    #home-about-us .btn-close-terminal {
        background: #ff5f56;
    }

    #home-about-us .btn-minimize {
        background: #ffbd2e;
    }

    #home-about-us .btn-maximize {
        background: #27c93f;
    }

    #home-about-us .terminal-title {
        font: var(--btn-font);
        color: var(--white-color);
        opacity: 0.8;
        transition: color 0.3s ease;
    }

    #home-about-us .terminal-window.light-mode .terminal-title {
        color: var(--heading-color);
    }

    #home-about-us .terminal-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    #home-about-us .terminal-action-btn {
        background: var(--white-color);
        border: none;
        color: var(--black-color);
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font: var(--small-btn-font);
        cursor: pointer;
        transition: all 0.2s;
    }

    #home-about-us .terminal-action-btn:hover {
        background: var(--primary-color);
        color: var(--white-color);
    }

    #home-about-us .mode-toggle {
        position: relative;
        width: 60px;
        height: 30px;
        background: var(--primary-color);
        border-radius: 30px;
        cursor: pointer;
        transition: background 0.3s ease;
        border: 2px solid var(--border-color);
        padding: 0;
    }

    #home-about-us .mode-toggle.active {
        background: var(--theme-color);
    }

    #home-about-us .mode-toggle-slider {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        background: var(--white-color);
        border-radius: 50%;
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    #home-about-us .mode-toggle.active .mode-toggle-slider {
        transform: translateX(30px);
    }

    #home-about-us .mode-toggle svg {
        width: 14px;
        height: 14px;
        fill: var(--heading-color);
        transition: fill 0.3s ease;
    }

    #home-about-us .mode-toggle.active svg {
        fill: var(--primary-color);
    }

    #home-about-us .terminal-body {
        padding: 1.5rem;
        flex: 1;
        overflow-y: auto;
        font-family: 'Courier New', monospace;
        font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
        line-height: 1.6;
    }

    #home-about-us .terminal-body::-webkit-scrollbar {
        width: 8px;
    }

    #home-about-us .terminal-body::-webkit-scrollbar-track {
        background: var(--theme-color);
    }

    #home-about-us .terminal-body::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }

    #home-about-us .terminal-line {
        margin-bottom: 0;
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #home-about-us .terminal-prompt {
        color: var(--primary-color);
        font-weight: 600;
    }

    #home-about-us .terminal-command {
        color: var(--white-color);
        transition: color 0.3s ease;
    }

    #home-about-us .terminal-window.light-mode .terminal-command {
        color: var(--theme-color);
    }

    #home-about-us .terminal-output {
        color: var(--primary-color);
        padding-left: 1rem;
        margin-bottom: 1.5rem;
    }

    #home-about-us .terminal-error {
        color: var(--primary-color);
        padding-left: 1rem;
    }

    #home-about-us .terminal-info {
        color: var(--white-color);
        opacity: 0.8;
        transition: color 0.3s ease;
    }

    #home-about-us .terminal-window.light-mode .terminal-info {
        color: var(--para-color);
    }

    #home-about-us .terminal-input-line {
        display: flex;
        align-items: center;
        margin-top: 1rem;
    }

    #home-about-us .terminal-input {
        flex: 1;
        background: transparent;
        border: none;
        color: var(--white-color);
        font-family: 'Courier New', monospace;
        font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
        outline: none;
        padding: 0;
        margin-left: 0.5rem;
        transition: color 0.3s ease;
    }

    #home-about-us .terminal-window.light-mode .terminal-input {
        color: var(--heading-color);
    }

    #home-about-us .terminal-input::placeholder {
        color: var(--white-color);
        opacity: 0.5;
    }

    #home-about-us .terminal-window.light-mode .terminal-input::placeholder {
        color: var(--para-color);
    }

    #home-about-us .cursor {
        display: inline-block;
        width: 8px;
        height: 1em;
        background: var(--primary-color);
        margin-left: 2px;
        animation: blink 1s infinite;
    }

    @keyframes blink {

        0%,
        50% {
            opacity: 1;
        }

        51%,
        100% {
            opacity: 0;
        }
    }

    /* ==============================
  Home stats Section 
   ============================== */
    #home-stats {
        position: relative;
        overflow: hidden;
    }

    #home-stats::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--theme-color) 3%, transparent);
        top: 0;
        right: -200px;
        z-index: 0;
    }

    #home-stats::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--primary-color) 3%, transparent);
        bottom: 20px;
        left: -150px;
        z-index: 0;
    }

    #home-stats .container {
        position: relative;
        z-index: 1;
    }

    #home-stats .stats-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        margin-top: 50px;
    }

    #home-stats .stat-box {
        position: relative;
        padding: 30px 15px;
        text-align: center;
        background: var(--white-color);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid var(--border-color);
    }

    #home-stats .stat-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--theme-color);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

    #home-stats .stat-box:nth-child(2)::before,
    #home-stats .stat-box:nth-child(4)::before {
        background: var(--primary-color);
    }

    #home-stats .stat-box:hover::before {
        transform: scaleX(1);
    }

    #home-stats .stat-box:hover {
        transform: translateY(-15px);
        box-shadow: 0 20px 60px color-mix(in srgb, var(--black-color) 15%, transparent);
        border-color: transparent;
    }

    #home-stats .icon-wrapper {
        position: relative;
        width: 70px;
        height: 70px;
        margin: 1.5rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #home-stats .icon-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        transform: rotate(45deg);
        transition: all 0.5s ease;
    }

    #home-stats .stat-box:nth-child(odd) .icon-bg {
        background: color-mix(in srgb, var(--theme-color) 10%, transparent);
    }

    #home-stats .stat-box:nth-child(even) .icon-bg {
        background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    }

    #home-stats .stat-box:hover .icon-bg {
        transform: rotate(90deg) scale(1.1);
    }

    #home-stats .stat-box:nth-child(odd):hover .icon-bg {
        background: var(--theme-color);
    }

    #home-stats .stat-box:nth-child(even):hover .icon-bg {
        background: var(--primary-color);
    }

    #home-stats .icon-wrapper img {
        position: relative;
        z-index: 1;
        transition: all 0.5s ease;
    }

    #home-stats .stat-box:hover .icon-wrapper img {
        filter: brightness(0) invert(1);
        transform: scale(1.1);
    }

    #home-stats .stat-content {
        position: relative;
        z-index: 1;
        margin: 3rem 0 0;
    }

    #home-stats .stat-number-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    #home-stats .stat-number {
        font: var(--heading-font);
        color: var(--heading-color);
        line-height: 1;
    }

    #home-stats .stat-plus {
        font: var(--sub-heading-font);
        margin-left: 5px;
    }

    #home-stats .stat-box:nth-child(odd) .stat-plus {
        color: var(--theme-color);
    }

    #home-stats .stat-box:nth-child(even) .stat-plus {
        color: var(--primary-color);
    }

    #home-stats .stat-title {
        font: var(--para-font);
        color: var(--heading-color);
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 600;
    }

    #home-stats .stat-description {
        font: var(--body-font);
        color: var(--para-color);
    }

    #home-stats .pulse-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border: 2px solid;
        border-radius: 20px;
        opacity: 0;
        transform-origin: center;
    }

    #home-stats .stat-box:nth-child(odd) .pulse-ring {
        border-color: var(--theme-color);
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1.5) rotate(45deg);
    }

    #home-stats .stat-box:nth-child(even) .pulse-ring {
        border-color: var(--primary-color);
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1.5) rotate(45deg);
    }

    #home-stats .stat-box:hover .pulse-ring {
        transform: rotate(90deg) scale(1.1);
        top: -10px;
        left: -10px;
        height: 90px;
        width: 90px;
    }

    @keyframes pulse {
        0% {
            transform: translate(-50%, -50%) scale(1) rotate(45deg);
            opacity: 0.8;
        }

        100% {
            transform: translate(-50%, -50%) scale(1.5) rotate(45deg);
            opacity: 0;
        }
    }

    /* ==============================
   Resume CTA Section (Scoped)
================================= */
    #home-resume .cta-container {
        background: var(--white-color);
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        padding: 0;
    }

    #home-resume .cta-row {
        min-height: 500px;
    }

    #home-resume .cta-left {
        background: var(--primary-color);
        padding: 60px 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        height: 100%;
    }

    #home-resume .cta-left::before,
    #home-resume .cta-left::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    #home-resume .cta-left::before {
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        transform: translate(50%, -50%);
    }

    #home-resume .cta-left::after {
        bottom: 0;
        left: 0;
        width: 150px;
        height: 150px;
        transform: translate(-50%, 50%);
    }

    #home-resume .cta-badge {
        background: rgba(255, 255, 255, 0.2);
        display: inline-flex;
        padding: 10px 20px;
        color: var(--white-color);
        border-radius: 30px;
        font: var(--badge-font);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 20px;
        gap: 1rem;
        align-items: center;
        width: fit-content;
    }

    #home-resume .cta-title {
        font: var(--banner-font);
        color: var(--white-color);
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    #home-resume .cta-subtitle {
        font: var(--para-font);
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 30px;
        position: relative;
        z-index: 1;
    }

    #home-resume .cta-stats {
        display: flex;
        gap: 50px;
        margin-top: 20px;
        position: relative;
        z-index: 1;
    }

    #home-resume .stat-item {
        text-align: left;
    }

    #home-resume .stat-number {
        font: var(--heading-font);
        color: var(--white-color);
        margin-bottom: 5px;
    }

    #home-resume .stat-label {
        font: var(--badge-font);
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    #home-resume .cta-right {
        background: var(--white-color);
        padding: 60px 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 100%;
    }

    #home-resume .cta-icon-box {
        width: 70px;
        height: 70px;
        background: var(--primary-color);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        transition: all 0.3s ease;
    }

    #home-resume .cta-container:hover .cta-icon-box {
        transform: scale(1.1) rotate(-5deg);
        background: var(--primary-color);
        color: var(--white-color);
    }

    /* Headings & Text */
    #home-resume .cta-heading {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 15px;
    }

    #home-resume .cta-text {
        font: var(--para-font);
        color: var(--para-color);
        line-height: 1.7;
        margin-bottom: 10px;
    }

    #home-resume .resume-btn-group {
        display: flex;
        gap: 30px;
    }

    #home-resume .btn-secondary-cta:hover {
        background: var(--body-color);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    #home-resume .cta-features {
        display: flex;
        gap: 15px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    #home-resume .feature-tag {
        display: flex;
        align-items: center;
        gap: 8px;
        font: var(--badge-font);
        color: var(--para-color);
    }

    /* ==============================
  Home Portfolio Section 
   ============================== */
    #home-portfolio .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50px;
    }

    #home-portfolio .header-left {
        flex: 1;
    }

    /* TWO COLUMN LAYOUT */
    #home-portfolio .portfolio-content {
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 50px;
        align-items: start;
        overflow: hidden;
    }

    /* LEFT COLUMN - Filter */
    #home-portfolio .filter-column {
        position: sticky;
        top: 30px;
    }

    /* RIGHT COLUMN - Projects */
    #home-portfolio .projects-column {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Modern Tab-Style Filter */
    #home-portfolio .filter-container {
        background: var(--white-color);
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    #home-portfolio .filter-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 2px solid var(--border-color);
    }

    #home-portfolio .filter-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #ff9f4a 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
    }

    #home-portfolio .filter-icon svg {
        width: 22px;
        height: 22px;
    }

    #home-portfolio .filter-title {
        flex: 1;
    }

    #home-portfolio .filter-title h3 {
        font: var(--para-font);
        font-weight: 700;
        color: var(--heading-color);
        margin: 0;
    }

    #home-portfolio .filter-title p {
        font: var(--small-badge-font);
        color: var(--para-color);
        margin: 0;
    }

    #home-portfolio .filter-count {
        background: var(--theme-color);
        color: var(--white-color);
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font: var(--badge-font);
        font-weight: 800;
    }

    #home-portfolio .filter-tabs {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #home-portfolio .filter-tab {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 16px 18px;
        background: var(--gray-bg);
        border: 2px solid transparent;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    #home-portfolio .filter-tab:hover {
        background: #f0f9fa;
        border-color: rgba(11, 102, 106, 0.2);
        transform: translateX(5px);
    }

    #home-portfolio .filter-tab.active {
        background: var(--theme-color);
        border-color: var(--theme-color);
        box-shadow: 0 4px 16px rgba(11, 102, 106, 0.25);
    }

    #home-portfolio .filter-tab-icon {
        width: 45px;
        height: 45px;
        background: var(--white-color);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    #home-portfolio .filter-tab-icon svg {
        width: 24px;
        height: 24px;
        color: var(--theme-color);
        transition: all 0.3s ease;
    }

    #home-portfolio .filter-tab.active .filter-tab-icon {
        background: rgba(255, 255, 255, 0.2);
    }

    #home-portfolio .filter-tab.active .filter-tab-icon svg {
        color: var(--white-color);
    }

    #home-portfolio .filter-tab-content {
        flex: 1;
    }

    #home-portfolio .filter-tab-label {
        font: var(--para-font);
        font-weight: 700;
        color: var(--heading-color);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    #home-portfolio .filter-tab-desc {
        font: var(--badge-font);
        color: var(--para-color);
        transition: color 0.3s ease;
    }

    #home-portfolio .filter-tab.active .filter-tab-label,
    #home-portfolio .filter-tab.active .filter-tab-desc {
        color: var(--white-color);
    }

    #home-portfolio .filter-tab-count {
        width: 32px;
        height: 32px;
        background: var(--primary-color);
        color: var(--white-color);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font: var(--badge-font);
        font-weight: 800;
        transition: all 0.3s ease;
    }

    #home-portfolio .filter-tab:hover .filter-tab-count {
        transform: scale(1.1);
    }

    #home-portfolio .filter-tab.active .filter-tab-count {
        background: var(--white-color);
        color: var(--theme-color);
    }

    #home-portfolio .project-card {
        background: var(--white-color);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 2rem;
        transform: translateY(20px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    #home-portfolio .project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }

    #home-portfolio .project-image-wrapper {
        position: relative;
        padding: 30px 30px 20px 30px;
        background: var(--white-color);
        overflow: hidden;
    }

    #home-portfolio .project-image {
        width: 100%;
        height: 320px;
        object-fit: cover;
        border-radius: 12px;
        transition: transform 0.5s ease;
    }

    #home-portfolio .project-card:hover .project-image {
        transform: scale(1.05);
    }

    #home-portfolio .project-content {
        padding: 25px 30px 30px 30px;
    }

    #home-portfolio .project-tags {
        display: flex;
        gap: 8px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    #home-portfolio .tag {
        background: var(--primary-color);
        color: var(--white-color);
        padding: 6px 16px;
        border-radius: 6px;
        font: var(--badge-font);
        text-transform: capitalize;
    }

    #home-portfolio .project-info-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
    }

    #home-portfolio .project-title {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin: 0;
        flex: 1;
        line-height: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    /* ==============================
  Home Skills Store Section 
   ============================== */
    #home-skills-store .sky-background {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        transition: background 0.8s ease;
    }

    #home-skills-store .sky-background.light {
        background: linear-gradient(to bottom,
                #87ceeb 0%,
                #b0e0e6 40%,
                #f0f8ff 100%);
    }

    #home-skills-store .sky-background.dark {
        background: linear-gradient(to bottom,
                #0a0e1a 0%,
                #1a1f35 50%,
                #0f1419 100%);
    }

    #home-skills-store .sun {
        position: absolute;
        top: 60px;
        right: 100px;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, #ffd700 0%, #ffa500 100%);
        border-radius: 50%;
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.8),
            0 0 100px rgba(255, 165, 0, 0.5);
        animation: sunGlow 4s ease-in-out infinite;
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    #home-skills-store .sun.visible {
        opacity: 1;
        transform: scale(1);
    }

    @keyframes sunGlow {

        0%,
        100% {
            box-shadow: 0 0 60px rgba(255, 215, 0, 0.8),
                0 0 100px rgba(255, 165, 0, 0.5);
        }

        50% {
            box-shadow: 0 0 80px rgba(255, 215, 0, 1),
                0 0 120px rgba(255, 165, 0, 0.7);
        }
    }

    #home-skills-store .sun::before {
        content: "";
        position: absolute;
        inset: -20px;
        animation: sunRotate 20s linear infinite;
    }

    @keyframes sunRotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #home-skills-store .cloud {
        position: absolute;
        background: var(--white-color);
        border-radius: 100px;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    #home-skills-store .cloud.visible {
        opacity: 1;
        animation: cloudFloat 40s linear infinite;
    }

    #home-skills-store .cloud::before,
    #home-skills-store .cloud::after {
        content: "";
        position: absolute;
        background: var(--white-color);
        border-radius: 100px;
    }

    #home-skills-store .cloud-1 {
        width: 120px;
        height: 40px;
        top: 100px;
        left: -150px;
        animation-delay: 0s;
    }

    #home-skills-store .cloud-1::before {
        width: 50px;
        height: 50px;
        top: -25px;
        left: 20px;
    }

    #home-skills-store .cloud-1::after {
        width: 60px;
        height: 40px;
        top: -15px;
        right: 20px;
    }

    #home-skills-store .cloud-2 {
        width: 100px;
        height: 35px;
        top: 200px;
        left: -200px;
        animation-delay: 12s;
    }

    #home-skills-store .cloud-2::before {
        width: 40px;
        height: 40px;
        top: -22px;
        left: 15px;
    }

    #home-skills-store .cloud-2::after {
        width: 50px;
        height: 35px;
        top: -12px;
        right: 15px;
    }

    #home-skills-store .cloud-3 {
        width: 140px;
        height: 45px;
        top: 300px;
        left: -180px;
        animation-delay: 24s;
    }

    #home-skills-store .cloud-3::before {
        width: 55px;
        height: 55px;
        top: -28px;
        left: 25px;
    }

    #home-skills-store .cloud-3::after {
        width: 65px;
        height: 45px;
        top: -18px;
        right: 25px;
    }

    @keyframes cloudFloat {
        from {
            left: -200px;
        }

        to {
            left: calc(100% + 200px);
        }
    }

    #home-skills-store .moon {
        position: absolute;
        top: 60px;
        right: 100px;
        width: 90px;
        height: 90px;
        background: #f4f4f4;
        border-radius: 50%;
        box-shadow: 0 0 50px rgba(244, 244, 244, 0.8),
            0 0 80px rgba(244, 244, 244, 0.4),
            inset -10px -10px 20px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    #home-skills-store .moon.visible {
        opacity: 1;
        transform: scale(1);
        animation: moonGlow 5s ease-in-out infinite;
    }

    @keyframes moonGlow {

        0%,
        100% {
            box-shadow: 0 0 50px rgba(244, 244, 244, 0.8),
                0 0 80px rgba(244, 244, 244, 0.4),
                inset -10px -10px 20px rgba(0, 0, 0, 0.1);
        }

        50% {
            box-shadow: 0 0 70px rgba(244, 244, 244, 1),
                0 0 100px rgba(244, 244, 244, 0.6),
                inset -10px -10px 20px rgba(0, 0, 0, 0.1);
        }
    }

    #home-skills-store .moon::before {
        content: "";
        position: absolute;
        top: 15px;
        right: 20px;
        width: 12px;
        height: 12px;
        background: rgba(200, 200, 200, 0.4);
        border-radius: 50%;
        box-shadow: -5px 15px 0 -2px rgba(200, 200, 200, 0.3),
            20px 25px 0 -4px rgba(200, 200, 200, 0.3);
    }

    #home-skills-store .stars-container {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    #home-skills-store .stars-container.visible {
        opacity: 1;
    }

    #home-skills-store .star {
        position: absolute;
        background: var(--heading-color);
        border-radius: 50%;
        animation: twinkle 3s ease-in-out infinite;
    }

    @keyframes twinkle {

        0%,
        100% {
            opacity: 0.5;
            transform: scale(1);
        }

        50% {
            opacity: 1.2;
            transform: scale(1.3);
        }
    }

    #home-skills-store .star:nth-child(1) {
        width: 5px;
        height: 5px;
        top: 8%;
        left: 12%;
        animation-delay: 0s;
    }

    #home-skills-store .star:nth-child(2) {
        width: 3px;
        height: 3px;
        top: 15%;
        left: 25%;
        animation-delay: 0.5s;
    }

    #home-skills-store .star:nth-child(3) {
        width: 5px;
        height: 5px;
        top: 12%;
        left: 45%;
        animation-delay: 1s;
    }

    #home-skills-store .star:nth-child(4) {
        width: 3px;
        height: 3px;
        top: 20%;
        left: 65%;
        animation-delay: 1.5s;
    }

    #home-skills-store .star:nth-child(5) {
        width: 5px;
        height: 5px;
        top: 25%;
        left: 80%;
        animation-delay: 2s;
    }

    #home-skills-store .star:nth-child(6) {
        width: 3px;
        height: 3px;
        top: 35%;
        left: 15%;
        animation-delay: 2.5s;
    }

    #home-skills-store .star:nth-child(7) {
        width: 5px;
        height: 5px;
        top: 40%;
        left: 35%;
        animation-delay: 0.3s;
    }

    #home-skills-store .star:nth-child(8) {
        width: 3px;
        height: 3px;
        top: 45%;
        left: 55%;
        animation-delay: 0.8s;
    }

    #home-skills-store .star:nth-child(9) {
        width: 5px;
        height: 5px;
        top: 50%;
        left: 75%;
        animation-delay: 1.3s;
    }

    #home-skills-store .star:nth-child(10) {
        width: 1px;
        height: 1px;
        top: 55%;
        left: 90%;
        animation-delay: 1.8s;
    }

    #home-skills-store .star:nth-child(11) {
        width: 5px;
        height: 5px;
        top: 60%;
        left: 20%;
        animation-delay: 2.3s;
    }

    #home-skills-store .star:nth-child(12) {
        width: 3px;
        height: 3px;
        top: 65%;
        left: 40%;
        animation-delay: 0.6s;
    }

    #home-skills-store .star:nth-child(13) {
        width: 5px;
        height: 5px;
        top: 70%;
        left: 60%;
        animation-delay: 1.1s;
    }

    #home-skills-store .star:nth-child(14) {
        width: 3px;
        height: 3px;
        top: 75%;
        left: 85%;
        animation-delay: 1.6s;
    }

    #home-skills-store .star:nth-child(15) {
        width: 2px;
        height: 2px;
        top: 10%;
        left: 70%;
        animation-delay: 2.1s;
    }

    #home-skills-store .star:nth-child(16) {
        width: 3px;
        height: 3px;
        top: 18%;
        left: 50%;
        animation-delay: 0.4s;
    }

    #home-skills-store .star:nth-child(17) {
        width: 5px;
        height: 5px;
        top: 30%;
        left: 30%;
        animation-delay: 0.9s;
    }

    #home-skills-store .star:nth-child(18) {
        width: 3px;
        height: 3px;
        top: 38%;
        left: 70%;
        animation-delay: 1.4s;
    }

    #home-skills-store .star:nth-child(19) {
        width: 5px;
        height: 5px;
        top: 48%;
        left: 10%;
        animation-delay: 1.9s;
    }

    #home-skills-store .star:nth-child(20) {
        width: 3px;
        height: 3px;
        top: 58%;
        left: 50%;
        animation-delay: 2.4s;
    }

    #home-skills-store .star:nth-child(21) {
        width: 5px;
        height: 5px;
        top: 68%;
        left: 25%;
        animation-delay: 0.2s;
    }

    #home-skills-store .star:nth-child(22) {
        width: 3px;
        height: 3px;
        top: 78%;
        left: 45%;
        animation-delay: 0.7s;
    }

    #home-skills-store .star:nth-child(23) {
        width: 5px;
        height: 5px;
        top: 5%;
        left: 88%;
        animation-delay: 1.2s;
    }

    #home-skills-store .star:nth-child(24) {
        width: 3px;
        height: 3px;
        top: 22%;
        left: 8%;
        animation-delay: 1.7s;
    }

    #home-skills-store .star:nth-child(25) {
        width: 5px;
        height: 5px;
        top: 42%;
        left: 92%;
        animation-delay: 2.2s;
    }

    #home-skills-store .skill-store-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2.5rem 1.25rem;
        position: relative;
        z-index: 1;
    }

    #home-skills-store .store-header {
        text-align: center;
        margin-bottom: 2.25rem;
    }

    #home-skills-store .store-title {
        font: var(--banner-font);
        color: var(--heading-color);
        margin-bottom: 0.5rem;
        letter-spacing: -0.5px;
    }

    #home-skills-store .store-subtitle {
        font: var(--para-font);
        color: var(--para-color);
    }

    #home-skills-store .main-container {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 1.5rem;
        background: var(--white-color);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--card-shadow);
        border: 1px solid var(--border-color);
        min-height: 700px;
        transition: all 0.5s ease;
    }

    #home-skills-store[data-theme="dark"] .category-item.active {
        background: var(--primary-color);
        color: var(--heading-color);
    }

    #home-skills-store[data-theme="dark"] .sub-heading-tag-2 {
        background: color-mix(in srgb, var(--heading-color) 15%, #00000000);
        color: var(--heading-color);
    }

    [data-theme="dark"] .main-container,
    [data-theme="dark"] .featured-skill-card,
    [data-theme="dark"] .skill-list-item,
    [data-theme="dark"] .profile-card,
    [data-theme="dark"] .search-input,
    [data-theme="dark"] .content-area,
    [data-theme="dark"] .sidebar {
        background: #1e293b !important;
        border-color: var(--border-light) !important;
    }

    [data-theme="dark"] .featured-skill-card,
    [data-theme="dark"] .skill-list-item {
        background: #334155 !important;
    }

    #home-skills-store .sidebar {
        background: var(--gray-bg);
        padding: 1.5rem;
        border-right: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        transition: all 0.5s ease;
        overflow-y: auto;
    }

    #home-skills-store .search-container {
        position: relative;
        margin-bottom: 1.25rem;
    }

    #home-skills-store .search-input {
        width: 100%;
        padding: 0.75rem 0.9375rem 0.75rem 2.625rem;
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        background: var(--white-color);
        font: var(--body-font);
        color: var(--para-color);
        transition: all 0.3s ease;
    }

    #home-skills-store .search-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(245, 135, 37, 0.1);
    }

    #home-skills-store .search-icon {
        position: absolute;
        left: 0.9375rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--para-color);
        pointer-events: none;
    }

    #home-skills-store .categories-header {
        font: var(--badge-font);
        text-transform: uppercase;
        color: var(--para-color);
        font-weight: 700;
        letter-spacing: 1.2px;
        margin-bottom: 0.75rem;
        padding-left: 0.3125rem;
    }

    #home-skills-store .category-list {
        list-style: none;
        padding: 0;
        margin: 0 0 auto;
    }

    #home-skills-store .category-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.9375rem;
        margin-bottom: 0.25rem;
        border-radius: 0.625rem;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
        color: var(--heading-color);
        font: var(--body-font);
    }

    #home-skills-store .category-item:hover {
        background: rgba(245, 135, 37, 0.1);
        color: var(--primary-color);
    }

    #home-skills-store .category-item.active {
        background: rgba(245, 135, 37, 0.15);
        color: var(--primary-color);
        font-weight: 600;
    }

    #home-skills-store .profile-section {
        margin-top: 1.25rem;
        position: relative;
    }

    #home-skills-store .profile-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.9375rem;
        background: var(--white-color);
        border-radius: 0.75rem;
        border: 1px solid var(--border-color);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #home-skills-store .profile-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

    #home-skills-store .profile-avatar {
        width: 2.8125rem;
        height: 2.8125rem;
        border-radius: 50%;
        background: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
        font-weight: 700;
        font: var(--body-font);
        flex-shrink: 0;
    }

    #home-skills-store .profile-info {
        flex: 1;
    }

    #home-skills-store .profile-name {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin-bottom: 0.125rem;
        font: var(--body-font);
        font-weight: 700;
    }

    #home-skills-store .profile-role {
        font: var(--badge-font);
        color: var(--para-color);
    }

    #home-skills-store .profile-dropdown {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        margin-bottom: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 10;
    }

    #home-skills-store .profile-dropdown.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #home-skills-store .dropdown-item {
        padding: 0.75rem 0.9375rem;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        color: var(--heading-color);
        font: var(--body-font);
        cursor: pointer;
        transition: background 0.2s ease;
    }

    #home-skills-store .dropdown-item:hover {
        background: rgba(245, 135, 37, 0.08);
    }

    #home-skills-store .theme-toggle {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.75rem 0.9375rem;
        font: var(--body-font);
        color: var(--heading-color);
        border-top: 1px solid var(--border-color);
    }

    #home-skills-store .switch {
        position: relative;
        display: inline-block;
        width: 2.875rem;
        height: 1.5rem;
        margin-left: auto;
    }

    #home-skills-store .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    #home-skills-store .slider {
        position: absolute;
        inset: 0;
        background-color: #ccc;
        border-radius: 999px;
        transition: background 0.3s ease;
    }

    #home-skills-store .slider::before {
        content: "";
        position: absolute;
        height: 1.125rem;
        width: 1.125rem;
        left: 0.1875rem;
        bottom: 0.1875rem;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    #home-skills-store .switch input:checked+.slider {
        background: var(--primary-color);
    }

    #home-skills-store .switch input:checked+.slider::before {
        transform: translateX(1.375rem);
    }

    #home-skills-store .content-area {
        padding: 2.1875rem;
        overflow-y: auto;
        background: var(--white-color);
        transition: all 0.5s ease;
    }

    #home-skills-store .content-header {
        margin-bottom: 1.875rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--border-color);
    }

    #home-skills-store .content-title {
        font: var(--heading-font);
        color: var(--heading-color);
        margin-bottom: 0.5rem;
    }

    #home-skills-store .content-description {
        font: var(--para-font);
        color: var(--para-color);
    }

    #home-skills-store .featured-section {
        margin-bottom: 2.5rem;
    }

    #home-skills-store .featured-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    #home-skills-store .featured-skill-card {
        background: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        padding: 1.5625rem;
        transition: all 0.3s ease;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

    #home-skills-store .featured-skill-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-color);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    #home-skills-store .featured-skill-card:hover::before {
        transform: scaleX(1);
    }

    #home-skills-store .featured-skill-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-5px);
        border-color: var(--primary-color);
    }

    #home-skills-store .skill-badge {
        display: inline-block;
        font: var(--badge-font);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.8px;
        margin-bottom: 0.625rem;
        padding: 0.25rem 0.625rem;
        border-radius: 0.375rem;
        background: rgba(245, 135, 37, 0.1);
        color: var(--primary-color);
    }

    #home-skills-store .featured-skill-title {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 0.625rem;
    }

    #home-skills-store .featured-skill-desc {
        font: var(--body-font);
        color: var(--para-color);
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    #home-skills-store .featured-icon-container {
        width: 100%;
        height: 10rem;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font: var(--heading-font);
        color: var(--white-color);
        background: var(--primary-color);
        transition: transform 0.3s ease;
    }

    #home-skills-store .featured-skill-card:hover .featured-icon-container {
        transform: scale(1.05);
    }

    #home-skills-store .skills-section-title {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 1rem;
    }

    #home-skills-store .skills-list-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.125rem;
    }

    #home-skills-store .skill-list-item {
        display: flex;
        align-items: flex-start;
        gap: 0.9375rem;
        padding: 1.25rem;
        background: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 0.875rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    #home-skills-store .skill-list-item:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-3px);
        border-color: var(--primary-color);
    }

    #home-skills-store .skill-icon-box {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font: var(--sub-heading-font);
        flex-shrink: 0;
        background: rgba(245, 135, 37, 0.1);
        color: var(--primary-color);
        transition: transform 0.3s ease;
    }

    #home-skills-store .skill-list-item:hover .skill-icon-box {
        transform: scale(1.1);
    }

    #home-skills-store .skill-content h4 {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin-bottom: 0.3125rem;
    }

    #home-skills-store .skill-content p {
        font: var(--body-font);
        color: var(--para-color);
        margin: 0;
        line-height: 1.5;
    }

    #home-skills-store .no-results {
        text-align: center;
        padding: 3.75rem 1.25rem;
        color: var(--para-color);
    }

    #home-skills-store .no-results i {
        font: var(--small-heading-font);
        color: var(--border-color);
        margin-bottom: 0.9375rem;
    }

    #home-skills-store .mySkillsSwiper {
        padding: 1rem 0 4rem;
    }

    /* Hide dropdown on large screens */
    #home-skills-store .category-dropdown-wrapper {
        display: none;
    }

    /* ==============================
  Home CTA 1 Section 
   ============================== */
    #home-cta-1 {
        background: var(--body-color);
        padding: 80px 0;
    }

    #home-cta-1 .cta-card {
        background: var(--theme-color);
        border-radius: 30px;
        padding: 60px;
        color: var(--white-color);
        position: relative;
        overflow: hidden;
        box-shadow: var(--card-shadow-hover);
    }

    /* Floating background circles */
    #home-cta-1 .float-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        animation: float-up-down 6s ease-in-out infinite;
    }

    .circle-1 {
        width: 120px;
        height: 120px;
        top: -40px;
        right: 10%;
    }

    .circle-2 {
        width: 80px;
        height: 80px;
        bottom: 20px;
        left: 5%;
        animation-delay: 1s;
    }

    @keyframes float-up-down {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-25px);
        }
    }

    /* Text styles */
    #home-cta-1 .badge {
        background: rgba(255, 255, 255, 0.15);
        color: var(--white-color);
        font: var(--badge-font);
        padding: 8px 20px;
        border-radius: 50px;
        display: inline-flex;
        backdrop-filter: blur(10px);
        gap: 1rem;
    }

    #home-cta-1 .main-heading {
        font: var(--heading-font);
        color: var(--white-color);
        line-height: normal;
        margin-bottom: 20px;
    }

    #home-cta-1 .sub-text {
        font: var(--para-font);
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 0;
        max-width: 600px;
    }

    #home-cta-1 .cta-1-btn-group {
        display: flex;
        gap: 30px;
        max-width: fit-content;
    }

    #home-cta-1 .cta-1-btn-group .primary-btn:hover {
        background: var(--white-color);
        color: var(--theme-color);
    }

    #home-cta-1 .cta-1-btn-group .primary-btn:hover .primary-btn-icon {
        background: var(--theme-color);
    }

    #home-cta-1 .cta-1-btn-group .primary-btn-svg-before path {
        fill: var(--white-color);
    }

    #home-cta-1 .cta-1-btn-group .secondary-btn span {
        color: var(--white-color);
    }

    #home-cta-1 .cta-1-btn-group .secondary-btn svg {
        stroke: var(--white-color);
    }

    #home-cta-1 .cta-1-btn-group .secondary-btn:before {
        background: color-mix(in srgb, var(--white-color) 20%, transparent);
    }

    /* Illustration */
    #home-cta-1 .illustration-container {
        background: var(--white-color);
        border-radius: 20px;
        padding: 40px;
        box-shadow: var(--card-shadow-hover);
    }

    #home-cta-1 .monitor-screen {
        background: var(--body-color);
        border-radius: 10px;
        padding: 20px;
    }

    #home-cta-1 .browser-bar {
        display: flex;
        gap: 6px;
        margin-bottom: 15px;
    }

    #home-cta-1 .browser-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    #home-cta-1 .dot-red {
        background: #ff5f56;
    }

    #home-cta-1 .dot-yellow {
        background: #ffbd2e;
    }

    #home-cta-1 .dot-green {
        background: #27c93f;
    }

    /* Stats */
    #home-cta-1 .stats-badges .stat-badge {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 15px 50px;
        color: var(--white-color);
    }

    #home-cta-1 .stat-number {
        font-size: 1.8rem;
        font-weight: 800;
        display: block;
    }

    #home-cta-1 .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    /* ==============================
  Home Blog Section 
   ============================== */
    #home-blog .featured-card {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--card-shadow);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #home-blog .featured-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--card-shadow-hover);
    }

    #home-blog .featured-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.95;
    }

    #home-blog .featured-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px;
        background: linear-gradient(to top, rgba(0, 18, 25, 0.95), rgba(0, 18, 25, 0.5), transparent);
    }

    #home-blog .featured-badge,
    #home-blog .large-badge {
        display: inline-block;
        background: var(--primary-color);
        color: var(--white-color);
        padding: 6px 16px;
        border-radius: 20px;
        font: var(--small-badge-font);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    #home-blog .featured-title,
    #home-blog .large-title {
        color: var(--white-color);
        font: var(--small-heading-font);
        line-height: normal;
        margin: 1rem 0;
    }

    #home-blog .featured-meta {
        display: flex;
        gap: 20px;
        color: rgba(255, 255, 255, 0.8);
        font: var(--badge-font);
    }

    #home-blog .featured-meta i {
        color: var(--primary-color);
        margin-right: 5px;
    }

    #home-blog .small-blog-card {
        border-radius: 16px;
        border: 1px solid var(--border-color);
        box-shadow: var(--card-shadow);
        transition: all 0.3s;
    }

    #home-blog .small-blog-card:hover {
        transform: translateX(5px);
        border-color: var(--primary-color);
        box-shadow: var(--card-shadow-hover);
    }

    #home-blog .small-icon {
        width: 130px;
        height: 130px;
        border-radius: 16px;
        overflow: hidden;
        flex-shrink: 0;
    }

    #home-blog .small-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #home-blog .small-category {
        color: var(--theme-color);
        text-transform: uppercase;
        font: var(--badge-font);
    }

    #home-blog .small-title {
        font: var(--body-font);
        font-weight: 500;
        color: var(--heading-color);
        margin: 5px 0;
    }

    #home-blog .small-date {
        color: var(--para-color);
        font: var(--badge-font);
    }

    #home-blog .large-blog-card {
        border-radius: 24px;
        overflow: hidden;
        position: relative;
        box-shadow: var(--card-shadow);
        transition: 0.3s ease;
    }

    #home-blog .large-blog-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--card-shadow-hover);
    }

    #home-blog .large-card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 25px;
        background: linear-gradient(to top, rgba(0, 18, 25, 0.9), rgba(0, 18, 25, 0.3), transparent);
    }

    #home-blog [data-animate] {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    #home-blog .primary-btn {
        margin-top: 2rem;
    }

    /* ==============================
  Home Tips and Tricks Section 
   ============================== */
    #home-tips-tricks .tip-card-badge {
        display: inline-block;
        background: var(--primary-color);
        color: var(--white-color);
        padding: 6px 16px;
        border-radius: 20px;
        font: var(--small-badge-font);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
        position: absolute;
        right: 10px;
        top: 15px;
    }

    #home-tips-tricks .card-img-overlay {
        top: unset;
        bottom: 0;
        padding: 3rem;
        background: linear-gradient(180deg, transparent 0%, rgba(0, 18, 25, 0.95) 60%);
        border-radius: 20px;
    }

    #home-tips-tricks .card {
        height: 100%;
        /* min-height: 500px; */
        border-radius: 20px;
        transition: all 0.3s;
    }

    #home-tips-tricks .card-image {
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: 20px;
    }

    #home-tips-tricks .card-img-overlay h3 {
        font: var(--sub-heading-font);
        color: var(--white-color);
        margin-bottom: 10px;
    }

    #home-tips-tricks .card-img-overlay p {
        font: var(--body-font);
        color: var(--white-color);
        margin-bottom: 20px;
    }

    #home-tips-tricks .card-image img {
        min-width: 100%;
        max-height: 100%;
        min-height: 100%;
        object-fit: cover;
    }

    #home-tips-tricks span.tip-card-number {
        background-color: var(--primary-color);
        display: inline-flex;
        margin-bottom: 20px;
        font: var(--small-heading-font);
        color: var(--white-color);
        width: 50px;
        height: 50px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    #home-tips-tricks .card-body p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    #home-tips-tricks .right-column .tip-card-number {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    #home-tips-tricks .right-column .card-image {
        border-radius: 20px 0 0 20px;
    }

    #home-tips-tricks .card-body {
        height: 100%;
        padding: 2rem 1.5rem;
    }

    #home-tips-tricks .card-body h3 {
        font: var(--small-heading-font);
        line-height: normal;
    }

    #home-tips-tricks .card-body p {
        font: var(--body-font);
    }

    #home-tips-tricks article {
        height: 100%;
    }

    #home-tips-tricks .card:hover {
        transform: translateX(5px);
    }

    #home-tips-tricks .right-column .card:hover {
        border-color: var(--primary-color);
        box-shadow: var(--card-shadow-hover);
    }

    /* ==============================
  Home Tutorials Section 
   ============================== */
    #home-tutorials .section-title {
        background: var(--white-color);
        padding: 50px 40px;
        border-radius: 32px;
        box-shadow: 0 10px 40px rgba(245, 135, 37, 0.1);
        position: relative;
        overflow: hidden;
    }

    #home-tutorials .section-title::before {
        content: '';
        position: absolute;
        top: 20px;
        right: 20px;
        width: 150px;
        height: 150px;
        background: var(--primary-color);
        opacity: 0.1;
        border-radius: 50%;
    }

    #home-tutorials .sidebar-card {
        background: var(--white-color);
        border-radius: 24px;
        padding: 35px;
        box-shadow: 0 8px 30px rgba(245, 135, 37, 0.12);
        margin-bottom: 30px;
        transition: all 0.4s ease;
        flex: 1;
    }

    #home-tutorials .sidebar-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(245, 135, 37, 0.2);
    }

    #home-tutorials .sidebar-title {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #home-tutorials .stat-item {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px;
        background: linear-gradient(135deg, var(--body-color) 0%, rgba(245, 135, 37, 0.05) 100%);
        border-radius: 16px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
    }

    #home-tutorials .stat-item {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px;
        background: linear-gradient(135deg, var(--body-color) 0%, rgba(245, 135, 37, 0.05) 100%);
        border-radius: 16px;
        margin-bottom: 0;
        transition: all 0.3s ease;
    }

    #home-tutorials .stat-item:hover {
        transform: translateX(8px);
        background: linear-gradient(135deg, rgba(245, 135, 37, 0.1) 0%, rgba(245, 135, 37, 0.15) 100%);
    }

    #home-tutorials .stat-icon {
        width: 60px;
        height: 60px;
        background: var(--primary-color);
        color: var(--white-color);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        flex-shrink: 0;
    }

    #home-tutorials .stat-content {
        flex: 1;
    }

    #home-tutorials .stat-value {
        font-size: clamp(1.5rem, 2vw, 2rem);
        font-weight: 800;
        color: var(--heading-color);
        margin-bottom: 4px;
    }

    #home-tutorials .stat-label {
        font: var(--body-font);
        color: var(--para-color);
        font-size: 14px;
        font-weight: 600;
    }

    #home-tutorials .sidebar-card-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        margin: 2rem auto;
    }

    #home-tutorials .filter-tabs-container ul {
        background: var(--white-color);
        padding: 15px 30px;
        border-radius: 100px;
        display: inline-flex;
        gap: 8px;
        box-shadow: 0 5px 25px rgba(245, 135, 37, 0.15);
    }

    #home-tutorials .nav-pills .nav-item.show .nav-link,
    #home-tutorials .nav-pills .nav-link.active,
    #home-tutorials .nav-pills .nav-link:hover {
        background: var(--primary-color);
        color: var(--white-color);
        transform: scale(1.05);
    }

    #home-tutorials .nav-pills .nav-link {
        padding: 16px 36px;
        background: transparent;
        border: none;
        border-radius: 100px;
        font: var(--btn-font);
        font-weight: 600;
        color: var(--para-color);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
    }

    #home-tutorials .filter-tabs-container {
        margin: 6rem auto 3rem;
        text-align: center;
    }

    #home-tutorials .video-item {
        background: var(--white-color);
        border-radius: 24px;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        cursor: pointer;
        box-shadow: 0 5px 20px rgba(11, 102, 106, 0.08);
        margin-bottom: 30px;
    }

    #home-tutorials .video-item:hover {
        transform: translateY(-12px);
        box-shadow: 0 15px 50px rgba(11, 102, 106, 0.2);
    }

    #home-tutorials .video-thumb-wrapper {
        position: relative;
        height: 220px;
        overflow: hidden;
        background: var(--heading-color);
    }

    #home-tutorials .video-thumb-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.6s ease;
        filter: grayscale(0.2);
    }

    #home-tutorials .video-item:hover .video-thumb-wrapper img {
        transform: scale(1.2) rotate(2deg);
        filter: grayscale(0);
    }

    #home-tutorials .video-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.4s ease;
    }

    #home-tutorials .video-item:hover .video-overlay {
        opacity: 1;
    }

    #home-tutorials .play-btn-large {
        width: 70px;
        height: 70px;
        background: var(--white-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        font-size: 28px;
        transform: scale(0.6);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #home-tutorials .video-item:hover .play-btn-large {
        transform: scale(1) rotate(90deg);
        background: var(--primary-color);
        color: var(--white-color);
    }

    #home-tutorials .platform-label {
        position: absolute;
        top: 15px;
        left: 15px;
        padding: 8px 18px;
        border-radius: 100px;
        font: var(--badge-font);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--white-color);
        backdrop-filter: blur(20px);
    }

    #home-tutorials .platform-label.youtube {
        background: rgba(255, 0, 0, 0.95);
    }

    #home-tutorials .platform-label.shorts {
        background: rgba(0, 0, 0, 0.95);
    }

    #home-tutorials .platform-label.reels {
        background: rgba(228, 64, 95, 0.95);
    }

    #home-tutorials .time-badge {
        position: absolute;
        bottom: 15px;
        right: 15px;
        background: rgba(0, 0, 0, 0.9);
        color: var(--white-color);
        padding: 6px 12px;
        border-radius: 8px;
        font: var(--badge-font);
        font-weight: 700;
        backdrop-filter: blur(10px);
    }

    #home-tutorials .video-info {
        padding: 25px;
    }

    #home-tutorials .video-category {
        display: inline-block;
        padding: 6px 14px;
        background: var(--theme-color);
        color: var(--white-color);
        border-radius: 8px;
        font: var(--badge-font);
        font-weight: 700;
        margin-bottom: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 11px;
    }

    #home-tutorials .video-heading {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 55px;
        font-weight: 700;
        font-size: 1.1rem;
        line-height: 1.4;
    }

    #home-tutorials .video-text {
        font: var(--body-font);
        color: var(--para-color);
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.6;
        font-size: 14px;
    }

    #home-tutorials .video-metrics {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-top: 10px;
        margin-bottom: 30px;
    }

    #home-tutorials .metric {
        display: flex;
        align-items: center;
        gap: 6px;
        font: var(--body-font);
        color: var(--para-color);
        font-weight: 600;
        font-size: 13px;
    }

    #home-tutorials .metric i {
        color: var(--primary-color);
        font-size: 16px;
    }

    #home-tutorials .video-buttons {
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    #home-tutorials .btn-watch {
        flex: 1;
        padding: 14px 24px;
        background: var(--primary-color);
        color: var(--white-color);
        border: none;
        border-radius: 100px;
        font: var(--btn-font);
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 13px;
    }

    #home-tutorials .btn-watch:hover {
        background: var(--theme-color);
        transform: translateY(-2px);
    }

    #home-tutorials .btn-share {
        width: 50px;
        height: 50px;
        background: var(--theme-color);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #home-tutorials .btn-share:hover {
        background: var(--theme-color);
        color: var(--white-color);
        transform: translateY(-2px) rotate(15deg);
    }

    #home-tutorials .modal-content {
        background: var(--white-color);
        padding: 70px 40px;
        border-radius: 32px;
        max-width: 500px;
        width: 100%;
        position: relative;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    #home-tutorials .share-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: var(--theme-color);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: var(--heading-color);
        opacity: 1;
        background-size: 20px;
    }

    #home-tutorials .share-close:hover {
        background: var(--primary-color);
        color: var(--white-color);
        transform: rotate(90deg);
    }

    #home-tutorials .share-title {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 30px;
        text-align: center;
    }

    #home-tutorials .social-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    #home-tutorials .social-btn {
        padding: 20px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: var(--body-color);
        text-decoration: none;
    }

    #home-tutorials .social-btn:hover {
        transform: translateY(-8px);
    }

    #home-tutorials .social-btn i {
        font-size: 32px;
        transition: all 0.3s ease;
    }

    #home-tutorials .social-btn span {
        font: var(--body-font);
        font-weight: 600;
        color: var(--heading-color);
    }

    #home-tutorials .social-btn.facebook:hover {
        background: #1877F2;
    }

    #home-tutorials .social-btn.facebook:hover i,
    #home-tutorials .social-btn.facebook:hover span {
        color: var(--white-color);
    }

    #home-tutorials .social-btn.facebook i {
        color: #1877F2;
    }

    #home-tutorials .social-btn.twitter:hover {
        background: #1DA1F2;
    }

    #home-tutorials .social-btn.twitter:hover i,
    #home-tutorials .social-btn.twitter:hover span {
        color: var(--white-color);
    }

    #home-tutorials .social-btn.twitter i {
        color: #1DA1F2;
    }

    #home-tutorials .social-btn.linkedin:hover {
        background: #0A66C2;
    }

    #home-tutorials .social-btn.linkedin:hover i,
    #home-tutorials .social-btn.linkedin:hover span {
        color: var(--white-color);
    }

    #home-tutorials .social-btn.linkedin i {
        color: #0A66C2;
    }

    #home-tutorials .social-btn.whatsapp:hover {
        background: #25D366;
    }

    #home-tutorials .social-btn.whatsapp:hover i,
    #home-tutorials .social-btn.whatsapp:hover span {
        color: var(--white-color);
    }

    #home-tutorials .social-btn.whatsapp i {
        color: #25D366;
    }

    #home-tutorials .social-btn.telegram:hover {
        background: #0088cc;
    }

    #home-tutorials .social-btn.telegram:hover i,
    #home-tutorials .social-btn.telegram:hover span {
        color: var(--white-color);
    }

    #home-tutorials .social-btn.telegram i {
        color: #0088cc;
    }

    #home-tutorials .social-btn.email:hover {
        background: var(--primary-color);
    }

    #home-tutorials .social-btn.email:hover i,
    #home-tutorials .social-btn.email:hover span {
        color: var(--white-color);
    }

    #home-tutorials .social-btn.email i {
        color: var(--primary-color);
    }

    #home-tutorials .copy-link-section {
        margin-top: 24px;
        padding-top: 24px;
    }

    #home-tutorials .copy-link-wrapper {
        display: flex;
        gap: 12px;
    }

    #home-tutorials .copy-link-input {
        flex: 1;
        padding: 16px 20px;
        border: 2px solid var(--body-color);
        border-radius: 100px;
        font: var(--body-font);
        background: var(--body-color);
    }

    #home-tutorials .copy-link-btn {
        padding: 16px 32px;
        background: var(--theme-color);
        color: var(--white-color);
        border: none;
        border-radius: 100px;
        font: var(--btn-font);
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #home-tutorials .copy-link-btn:hover {
        background: var(--primary-color);
        transform: translateY(-2px);
    }

    #home-tutorials .cta-section {
        text-align: center;
        margin-top: 40px;
    }

    #home-tutorials .btn-explore {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 24px 60px;
        background: var(--theme-color);
        color: var(--white-color);
        border: none;
        border-radius: 100px;
        font: var(--btn-font);
        font-weight: 800;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        text-transform: uppercase;
        letter-spacing: 2px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(11, 102, 106, 0.3);
    }

    #home-tutorials .btn-explore::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--primary-color);
        transition: all 0.4s ease;
    }

    #home-tutorials .btn-explore:hover::before {
        left: 0;
    }

    #home-tutorials .btn-explore:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 40px rgba(11, 102, 106, 0.4);
    }

    #home-tutorials .btn-explore span,
    #home-tutorials .btn-explore i {
        position: relative;
        z-index: 1;
    }

    #home-tutorials .btn-explore i {
        font-size: 26px;
        transition: all 0.4s ease;
    }

    #home-tutorials .btn-explore:hover i {
        transform: translateX(10px) rotate(45deg);
    }

    #home-tutorials .floating-shape {
        position: absolute;
        border-radius: 20px;
        opacity: 0.08;
        z-index: 0;
        animation: float 20s infinite ease-in-out;
    }

    #home-tutorials .shape-1 {
        width: 300px;
        height: 300px;
        background: var(--primary-color);
        top: 10%;
        left: 4%;
        transform: rotate(45deg);
        animation-delay: 0s;
    }

    #home-tutorials .shape-2 {
        width: 200px;
        height: 200px;
        background: var(--theme-color);
        bottom: 15%;
        left: 3%;
        transform: rotate(-30deg);
        animation-delay: 5s;
    }

    #home-tutorials .shape-3 {
        width: 150px;
        height: 150px;
        background: var(--primary-color);
        top: 60%;
        right: 3%;
        transform: rotate(60deg);
        animation-delay: 10s;
        z-index: -1;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0) rotate(45deg);
        }

        50% {
            transform: translateY(-30px) rotate(55deg);
        }
    }

    #videoAccordion {
        display: none;
    }

    #home-tutorials .video-buttons .primary-btn {
        width: 80%;
    }

    /* ==============================
  Home Source Code Section 
   ============================== */
    /* Bento Grid Layout */
    #home-source-code .bento-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 30px;
        margin-bottom: 40px;
    }

    /* Bento Card Base */
    #home-source-code .bento-card {
        background: var(--white-color);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--card-shadow);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid var(--border-color);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #home-source-code .bento-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-8px);
        border-color: rgba(245, 135, 37, 0.2);
    }

    /* Bento Card Sizes */
    #home-source-code .bento-large {
        grid-column: span 8;
    }

    #home-source-code .bento-medium {
        grid-column: span 4;
    }

    #home-source-code .bento-small {
        grid-column: span 6;
    }

    /* Image Section */
    #home-source-code .bento-image {
        position: relative;
        overflow: hidden;
        background: var(--gray-bg);
        height: 320px;
        flex-shrink: 0;
    }

    #home-source-code .bento-large .bento-image {
        height: 380px;
    }

    #home-source-code .bento-medium .bento-image {
        height: 260px;
    }

    #home-source-code .bento-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(11, 102, 106, 0.08) 0%, rgba(245, 135, 37, 0.08) 100%);
        z-index: 1;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    #home-source-code .bento-card:hover .bento-image::before {
        opacity: 1;
    }

    #home-source-code .bento-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    #home-source-code .bento-card:hover .bento-image img {
        transform: scale(1.08);
    }

    /* Content Section */
    #home-source-code .bento-content {
        padding: 32px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    #home-source-code .bento-large .bento-content {
        padding: 40px;
    }

    #home-source-code .code-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }

    #home-source-code .code-badge {
        font: var(--badge-font);
        padding: 7px 16px;
        border-radius: 18px;
        display: inline-block;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    #home-source-code .badge-tech {
        background-color: rgba(11, 102, 106, 0.12);
        color: var(--theme-color);
    }

    #home-source-code .badge-level {
        background-color: rgba(245, 135, 37, 0.12);
        color: var(--primary-color);
    }

    #home-source-code .bento-content h3 {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin-bottom: 16px;
        transition: color 0.3s ease;
        line-height: 1.4;
    }

    #home-source-code .bento-card:hover .bento-content h3 {
        color: var(--theme-color);
    }

    #home-source-code .bento-content p {
        font: var(--para-font);
        color: var(--para-color);
        margin-bottom: 24px;
        line-height: 1.75;
        flex-grow: 1;
    }

    /* Action Buttons */
    #home-source-code .bento-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        margin-top: auto;
        border-top: 1px solid var(--border-color);
    }

    #home-source-code .bento-actions {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    #home-source-code .icon-btn {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 18px;
        text-decoration: none;
    }

    #home-source-code .btn-view {
        background-color: var(--theme-color);
        color: var(--white-color);
    }

    #home-source-code .btn-view:hover {
        background-color: #094d50;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(11, 102, 106, 0.35);
    }

    #home-source-code .btn-download {
        background-color: var(--primary-color);
        color: var(--white-color);
    }

    #home-source-code .btn-download:hover {
        background-color: #d97320;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(245, 135, 37, 0.35);
    }

    /* Stats Badge */
    #home-source-code .code-stats {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    #home-source-code .stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font: var(--small-btn-font);
        color: var(--para-color);
    }

    #home-source-code .stat-item i {
        color: var(--primary-color);
        font-size: 14px;
    }

    /* Feature Tag */
    #home-source-code .feature-tag {
        position: absolute;
        top: 24px;
        right: 24px;
        background-color: var(--primary-color);
        color: var(--white-color);
        padding: 8px 18px;
        border-radius: 24px;
        font: var(--badge-font);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        z-index: 2;
        box-shadow: 0 6px 16px rgba(245, 135, 37, 0.4);
    }

    /* Decorative Elements */
    #home-source-code .decorative-circle {
        position: absolute;
        border-radius: 50%;
        opacity: 0.04;
        pointer-events: none;
    }

    #home-source-code .circle-1 {
        width: 400px;
        height: 400px;
        background-color: var(--theme-color);
        top: -150px;
        right: -150px;
    }

    #home-source-code .circle-2 {
        width: 350px;
        height: 350px;
        background-color: var(--primary-color);
        bottom: -120px;
        left: -120px;
    }

    /* CTA Card Styles */
    #home-source-code .cta-card {
        background: var(--white-color);
        border-radius: 32px;
        padding: 0;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        margin-bottom: 60px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--border-color);
    }

    #home-source-code .cta-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.03;
        pointer-events: none;
        background-image:
            repeating-linear-gradient(45deg, var(--theme-color) 0, var(--theme-color) 1px, transparent 0, transparent 50%),
            repeating-linear-gradient(-45deg, var(--primary-color) 0, var(--primary-color) 1px, transparent 0, transparent 50%);
        background-size: 20px 20px;
    }

    #home-source-code .cta-content-wrapper {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        align-items: center;
        gap: 80px;
        padding: 70px;
        position: relative;
        z-index: 1;
    }

    #home-source-code .cta-left {
        position: relative;
    }

    #home-source-code .cta-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--body-color);
        padding: 10px 22px;
        border-radius: 50px;
        font: var(--badge-font);
        font-weight: 700;
        color: var(--theme-color);
        margin-bottom: 28px;
        border: 2px solid var(--border-color);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #home-source-code .cta-badge i {
        font-size: 14px;
        color: var(--primary-color);
    }

    #home-source-code .cta-card h3 {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 20px;
        line-height: 1.3;
    }

    #home-source-code .cta-highlight {
        color: var(--primary-color);
        position: relative;
        display: inline-block;
    }

    #home-source-code .cta-highlight::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        height: 12px;
        background: var(--primary-color);
        opacity: 0.15;
        z-index: -1;
    }

    #home-source-code .cta-card p {
        font: var(--para-font);
        color: var(--para-color);
        margin-bottom: 35px;
        line-height: 1.8;
    }

    #home-source-code .cta-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
    }

    #home-source-code .cta-stat-box {
        background: var(--body-color);
        padding: 20px;
        border-radius: 16px;
        text-align: center;
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;
    }

    #home-source-code .cta-stat-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        border-color: var(--primary-color);
    }

    #home-source-code .cta-stat-box strong {
        display: block;
        font-size: clamp(1.5rem, 2vw, 2rem);
        font-weight: 700;
        color: var(--theme-color);
        margin-bottom: 8px;
    }

    #home-source-code .cta-stat-box span {
        font: var(--small-btn-font);
        color: var(--para-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #home-source-code .cta-right {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }

    #home-source-code .cta-visual-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        width: 100%;
        max-width: 380px;
    }

    #home-source-code .cta-visual-card {
        background: var(--body-color);
        border-radius: 20px;
        padding: 28px;
        border: 2px solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
    }

    #home-source-code .cta-visual-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

    #home-source-code .cta-visual-card:nth-child(1) {
        grid-column: span 2;
        background: var(--theme-color);
        border-color: var(--theme-color);
    }

    #home-source-code .cta-visual-card:nth-child(1):hover {
        background: #094d50;
        border-color: #094d50;
    }

    #home-source-code .cta-visual-icon {
        width: 70px;
        height: 70px;
        background: var(--white-color);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: var(--theme-color);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    #home-source-code .cta-visual-card:nth-child(1) .cta-visual-icon {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white-color);
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    #home-source-code .cta-visual-text {
        text-align: center;
    }

    #home-source-code .cta-visual-text strong {
        display: block;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--heading-color);
        margin-bottom: 6px;
    }

    #home-source-code .cta-visual-card:nth-child(1) .cta-visual-text strong {
        color: var(--white-color);
        font-size: 1.5rem;
    }

    #home-source-code .cta-visual-text span {
        font: var(--small-btn-font);
        color: var(--para-color);
    }

    #home-source-code .cta-visual-card:nth-child(1) .cta-visual-text span {
        color: rgba(255, 255, 255, 0.9);
    }

    #home-source-code .cta-visual-card:nth-child(2),
    #home-source-code .cta-visual-card:nth-child(3) {
        min-height: 180px;
    }

    #home-source-code .cta-visual-card:nth-child(2) .cta-visual-icon {
        color: var(--primary-color);
    }

    #home-source-code .cta-visual-card:nth-child(3) .cta-visual-icon {
        color: #5C86FF;
    }

    /* ==============================
  Home FAQ Section 
   ============================== */
    #home-faq .faq-accordion-wrapper {
        max-width: 1200px;
        margin: 0 auto 70px;
    }

    #home-faq .accordion-item {
        background: var(--white-color);
        border: 2px solid var(--border-color);
        border-radius: 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    #home-faq .accordion-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 0;
        background: var(--theme-color);
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    #home-faq .accordion-item:hover {
        transform: translateX(8px);
        box-shadow: var(--card-shadow-hover);
        border-color: var(--theme-color);
    }

    #home-faq .accordion-item:hover::before {
        height: 100%;
    }

    #home-faq .accordion-header {
        position: relative;
    }

    #home-faq .accordion-button {
        padding: 28px 32px;
        /* background: var(--white-color); */
        border: none;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        gap: 20px;
        font: var(--small-heading-font);
        color: var(--heading-color);
        transition: all 0.3s ease;
        position: relative;
        line-height: normal;
    }

    #home-faq .accordion-button:not(.collapsed) {
        /* background: var(--white-color); */
        color: var(--theme-color);
    }

    #home-faq .accordion-button::after {
        display: none;
    }

    #home-faq .faq-icon-box {
        width: 56px;
        height: 56px;
        background: var(--body-color);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.4s ease;
        border: 2px solid var(--border-color);
    }

    #home-faq .accordion-button:not(.collapsed) .faq-icon-box,
    #home-faq .accordion-item:hover .faq-icon-box {
        background: var(--theme-color);
        border-color: var(--theme-color);
        transform: rotate(5deg) scale(1.05);
    }

    #home-faq .faq-icon-box i {
        font-size: 26px;
        color: var(--theme-color);
        transition: all 0.4s ease;
    }

    #home-faq .accordion-button:not(.collapsed) .faq-icon-box i,
    #home-faq .accordion-item:hover .faq-icon-box i {
        color: var(--white-color);
        transform: scale(1.1);
    }

    #home-faq .faq-number {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: var(--body-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font: 600 0.875rem/1 "DM Sans", sans-serif;
        color: var(--theme-color);
        transition: all 0.3s ease;
        z-index: 2;
    }

    #home-faq .accordion-item.accordion-open .faq-number,
    #home-faq .accordion-button:not(.collapsed)~.faq-number,
    #home-faq .accordion-item:hover .faq-number {
        background: var(--primary-color);
        color: var(--white-color);
        transform: scale(1.1);
    }

    #home-faq .accordion-collapse {
        border: none;
    }

    #home-faq .accordion-body {
        padding: 0 32px 28px 108px;
        font: var(--para-font);
        color: var(--para-color);
        line-height: 1.8;
    }

    #home-faq .accordion-button span {
        max-width: 80%;
        display: block;
    }

    #home-faq .accordion-body p {
        font: var(--para-font);
        color: var(--para-color);
        line-height: normal;
    }

    /* New CTA Design - Modern Card Style */
    #home-cta {
        padding-top: 0;
    }

    #home-cta .home-cta-wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }

    #home-cta .home-cta-container {
        background: var(--white-color);
        border-radius: 32px;
        padding: 60px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        position: relative;
        overflow: hidden;
        border: 2px solid var(--border-color);
    }

    #home-cta .home-cta-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background: var(--primary-color);
    }

    #home-cta .home-cta-content {
        text-align: center;
        margin-bottom: 40px;
    }

    #home-cta .home-cta-icon-wrapper {
        width: 80px;
        height: 80px;
        background: var(--body-color);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        border: 3px solid var(--theme-color);
    }

    #home-cta .home-cta-icon-wrapper i {
        font-size: 36px;
        color: var(--theme-color);
    }

    #home-cta .home-cta-title {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 16px;
    }

    #home-cta .home-cta-text {
        font: var(--para-font);
        color: var(--para-color);
        max-width: 600px;
        margin: 0 auto 0;
        line-height: 1.7;
    }

    #home-cta .home-cta-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin: 2rem auto;
        max-width: fit-content;
    }

    #home-cta .home-cta-info {
        margin-top: 32px;
        padding-top: 32px;
        border-top: 2px solid var(--border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap;
    }

    #home-cta .home-cta-info-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #home-cta .home-cta-info-icon {
        width: 44px;
        height: 44px;
        background: var(--body-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #home-cta .home-cta-info-icon i {
        font-size: 20px;
        color: var(--primary-color);
    }

    #home-cta .home-cta-info-text {
        text-align: left;
    }

    #home-cta .home-cta-info-label {
        font: 500 0.875rem/1.2 "DM Sans", sans-serif;
        color: var(--para-color);
        display: block;
    }

    #home-cta .home-cta-info-value {
        font: 600 1rem/1.2 "DM Sans", sans-serif;
        color: var(--heading-color);
        display: block;
    }

    #home-cta .accordion-item.accordion-open::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: var(--theme-color);
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    /* Contact Us */
    #home-contact .contact-wrapper {
        background-color: var(--white-color);
        border-radius: 24px;
        box-shadow: var(--card-shadow-hover);
        overflow: hidden;
        border: 1px solid var(--border-color);
    }

    /* Left Side - Contact Form */
    #home-contact .contact-form-side {
        padding: 60px 50px;
        background-color: var(--white-color);
    }

    #home-contact .form-header {
        margin-bottom: 40px;
    }

    #home-contact .form-title {
        font: var(--sub-heading-font);
        color: var(--heading-color);
        margin-bottom: 10px;
    }

    #home-contact .form-subtitle {
        font: var(--para-font);
        color: var(--para-color);
    }

    /* Form Group Styles */
    #home-contact .form-group {
        margin-bottom: 24px;
    }

    #home-contact .form-label {
        font: var(--body-font);
        font-weight: 600;
        color: var(--heading-color);
        margin-bottom: 10px;
        display: block;
    }

    #home-contact .form-control {
        font: var(--input-font);
        padding: 16px 20px;
        border: 2px solid var(--border-color);
        border-radius: 12px;
        background-color: var(--white-color);
        color: var(--heading-color);
        transition: all 0.3s ease;
        width: 100%;
    }

    #home-contact .form-control:focus {
        border-color: var(--theme-color);
        box-shadow: 0 0 0 4px rgba(11, 102, 106, 0.08);
        outline: none;
    }

    #home-contact .form-control::placeholder {
        color: #adb5bd;
    }

    #home-contact textarea.form-control {
        min-height: 150px;
        resize: vertical;
    }

    /* Custom Phone Input with Country Dropdown */
    #home-contact .phone-wrapper {
        display: flex;
        gap: 12px;
        align-items: stretch;
    }

    /* Custom Country Selector */
    #home-contact .country-selector {
        position: relative;
        flex: 0 0 140px;
    }

    #home-contact .country-selected {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 16px;
        border: 2px solid var(--border-color);
        border-radius: 12px;
        background-color: var(--white-color);
        cursor: pointer;
        transition: all 0.3s ease;
        height: 100%;
    }

    #home-contact .country-selected:hover {
        border-color: var(--theme-color);
    }

    #home-contact .country-selected.active {
        border-color: var(--theme-color);
        box-shadow: 0 0 0 4px rgba(11, 102, 106, 0.08);
    }

    #home-contact .country-flag {
        font-size: 24px;
        line-height: 1;
    }

    #home-contact .country-code {
        font: var(--input-font);
        color: var(--heading-color);
        flex: 1;
    }

    #home-contact .country-arrow {
        font-size: 12px;
        color: var(--para-color);
        transition: transform 0.3s ease;
    }

    #home-contact .country-selected.active .country-arrow {
        transform: rotate(180deg);
    }

    /* Country Dropdown */
    #home-contact .country-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background-color: var(--white-color);
        border: 2px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        max-height: 320px;
        overflow: hidden;
        z-index: 1000;
        display: none;
        width: 500px;
    }

    #home-contact .country-dropdown.show {
        display: block;
        animation: dropdownSlide 0.3s ease;
    }

    @keyframes dropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #home-contact .country-search {
        padding: 12px 16px;
        border-bottom: 2px solid var(--border-color);
        position: sticky;
        top: 0;
        background-color: var(--white-color);
        z-index: 1;
    }

    #home-contact .country-search input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font: var(--input-font);
        outline: none;
    }

    #home-contact .country-search input:focus {
        border-color: var(--theme-color);
    }

    #home-contact .country-list {
        max-height: 240px;
        overflow-y: auto;
        padding: 8px;
    }

    #home-contact .country-list::-webkit-scrollbar {
        width: 6px;
    }

    #home-contact .country-list::-webkit-scrollbar-track {
        background: var(--gray-bg);
        border-radius: 4px;
    }

    #home-contact .country-list::-webkit-scrollbar-thumb {
        background: var(--theme-color);
        border-radius: 4px;
    }

    #home-contact .country-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    #home-contact .country-item:hover {
        background-color: rgba(11, 102, 106, 0.05);
    }

    #home-contact .country-item.selected {
        background-color: rgba(11, 102, 106, 0.1);
    }

    #home-contact .country-item-flag {
        font-size: 24px;
        line-height: 1;
    }

    #home-contact .country-item-info {
        flex: 1;
        min-width: 0;
    }

    #home-contact .country-item-name {
        font: var(--body-font);
        color: var(--heading-color);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #home-contact .country-item-code {
        font: var(--input-font);
        color: var(--para-color);
        font-size: 0.9rem;
    }

    #home-contact .phone-input {
        flex: 1;
    }

    /* Submit Button */
    #home-contact .submit-btn {
        font: var(--btn-font);
        padding: 16px 40px;
        background-color: var(--primary-color);
        color: var(--white-color);
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
    }

    #home-contact .submit-btn:hover {
        background-color: #e67a1f;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(245, 135, 37, 0.35);
    }

    #home-contact .submit-btn:active {
        transform: translateY(0);
    }

    #home-contact .submit-btn i {
        font-size: 18px;
    }

    /* Right Side - Contact Information */
    #home-contact .contact-info-side {
        padding: 60px 50px;
        background-color: var(--theme-color);
        color: var(--white-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    #home-contact .info-header {
        margin-bottom: 40px;
    }

    #home-contact .info-title {
        font: var(--sub-heading-font);
        color: var(--white-color);
        margin-bottom: 12px;
    }

    #home-contact .info-subtitle {
        font: var(--para-font);
        color: rgba(255, 255, 255, 0.85);
    }

    /* Contact Info Items */
    #home-contact .contact-info-item {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 32px;
        padding: 24px;
        background-color: rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    #home-contact .contact-info-item:hover {
        background-color: rgba(255, 255, 255, 0.12);
        transform: translateX(8px);
        border-color: rgba(255, 255, 255, 0.2);
    }

    #home-contact .info-icon {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        background-color: var(--primary-color);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--white-color);
    }

    #home-contact .info-content h4 {
        font: var(--small-heading-font);
        color: var(--white-color);
        margin-bottom: 6px;
        font-size: 1.1rem;
    }

    #home-contact .info-content p,
    #home-contact .info-content a {
        font: var(--body-font);
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    #home-contact .info-content a:hover {
        color: var(--primary-color);
    }

    /* Social Links */
    #home-contact .social-section {
        margin-top: 20px;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    #home-contact .social-title {
        font: var(--body-font);
        font-weight: 600;
        color: var(--white-color);
        margin-bottom: 20px;
        font-size: 1.1rem;
    }

    #home-contact .social-links {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    #home-contact .social-link {
        width: 48px;
        height: 48px;
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
        font-size: 20px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    #home-contact .social-link:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(245, 135, 37, 0.35);
    }

    /* Success Message */
    #home-contact .success-message {
        display: none;
        padding: 16px 20px;
        background-color: rgba(11, 102, 106, 0.1);
        border-left: 4px solid var(--theme-color);
        border-radius: 12px;
        margin-bottom: 24px;
        font: var(--body-font);
        color: var(--theme-color);
        align-items: center;
        gap: 12px;
    }

    #home-contact .success-message.show {
        display: flex;
        animation: slideDown 0.3s ease;
    }

    #home-contact .success-message i {
        font-size: 20px;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #home-cta-2 {
        position: relative;
        overflow: hidden;
        background-color: var(--body-color);
    }

    #home-cta-2 .section-title-center {
        margin-bottom: 2rem;
    }

    /* Geometric Background Elements */
    #home-cta-2 .cta-bg-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
    }

    #home-cta-2 .cta-bg-shape {
        position: absolute;
        opacity: 0.06;
    }

    #home-cta-2 .bg-shape-1 {
        top: 0;
        right: -100px;
        width: 400px;
        height: 400px;
        border: 40px solid var(--theme-color);
        border-radius: 50%;
        animation: rotate 20s linear infinite;
    }

    #home-cta-2 .bg-shape-2 {
        bottom: -80px;
        left: -80px;
        width: 300px;
        height: 300px;
        border: 30px solid var(--primary-color);
        transform: rotate(45deg);
        animation: rotate 15s linear infinite reverse;
    }

    #home-cta-2 .bg-shape-3 {
        top: 50%;
        left: 10%;
        width: 150px;
        height: 150px;
        background-color: var(--theme-color);
        border-radius: 30px;
        transform: translateY(-50%) rotate(15deg);
        animation: float 8s ease-in-out infinite;
    }

    #home-cta-2 .bg-shape-4 {
        bottom: 20%;
        right: 15%;
        width: 120px;
        height: 120px;
        background-color: var(--primary-color);
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        animation: float 6s ease-in-out infinite;
    }

    #home-cta-2 .bg-dots-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle, var(--theme-color) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.04;
    }

    #home-cta-2 .bg-lines-pattern {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-image:
            linear-gradient(90deg, var(--border-color) 1px, transparent 1px),
            linear-gradient(0deg, var(--border-color) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0.3;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0) rotate(15deg);
        }

        50% {
            transform: translateY(-30px) rotate(25deg);
        }
    }

    /* Main CTA Container */
    #home-cta-2 .cta-main-container {
        position: relative;
        z-index: 10;
        background-color: var(--white-color);
        border-radius: 30px;
        padding: 80px 60px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--border-color);
    }

    /* Decorative Corner Elements */
    #home-cta-2 .corner-decoration {
        position: absolute;
        width: 60px;
        height: 60px;
        border: 3px solid var(--primary-color);
    }

    #home-cta-2 .corner-top-left {
        top: 20px;
        left: 20px;
        border-right: none;
        border-bottom: none;
        border-radius: 15px 0 0 0;
    }

    #home-cta-2 .corner-bottom-right {
        bottom: 20px;
        right: 20px;
        border-left: none;
        border-top: none;
        border-radius: 0 0 15px 0;
    }

    /* Content Styles */
    #home-cta-2 .cta-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        background-color: rgba(245, 135, 37, 0.1);
        border-left: 4px solid var(--primary-color);
        border-radius: 0 50px 50px 0;
        font: var(--btn-font);
        color: var(--primary-color);
        margin-bottom: 25px;
        font-weight: 600;
    }

    #home-cta-2 .cta-eyebrow i {
        font-size: 16px;
        animation: bounce 2s ease-in-out infinite;
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-5px);
        }
    }

    /* Feature Stats */
    #home-cta-2 .cta-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        margin-bottom: 50px;
        padding: 40px 0;
        border-top: 2px dashed var(--border-color);
        border-bottom: 2px dashed var(--border-color);
    }

    #home-cta-2 .cta-stat-item {
        text-align: center;
        position: relative;
    }

    #home-cta-2 .cta-stat-item::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 60%;
        background-color: var(--border-color);
    }

    #home-cta-2 .cta-stat-item:last-child::after {
        display: none;
    }

    #home-cta-2 .cta-stat-icon {
        width: 70px;
        height: 70px;
        background-color: rgba(11, 102, 106, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 28px;
        color: var(--theme-color);
        transition: all 0.4s ease;
        border: 3px solid transparent;
    }

    #home-cta-2 .cta-stat-item:nth-child(2) .cta-stat-icon {
        background-color: rgba(245, 135, 37, 0.08);
        color: var(--primary-color);
    }

    #home-cta-2 .cta-stat-item:hover .cta-stat-icon {
        transform: scale(1.1) rotateY(360deg);
        border-color: currentColor;
    }

    #home-cta-2 .cta-stat-title {
        font: var(--small-heading-font);
        color: var(--heading-color);
        margin-bottom: 8px;
        font-size: 1.1rem;
    }

    #home-cta-2 .cta-stat-text {
        font: var(--para-font);
        color: var(--para-color);
        font-size: 0.9rem;
    }

    /* SEO Links */
    #home-cta-2 .cta-seo-section {
        text-align: center;
    }

    #home-cta-2 .cta-seo-title {
        font: var(--btn-font);
        color: var(--para-color);
        margin-bottom: 15px;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #home-cta-2 .cta-seo-links {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }

    #home-cta-2 .cta-seo-link {
        padding: 12px 24px;
        background-color: var(--body-color);
        border: 2px solid var(--border-color);
        border-radius: 8px;
        color: var(--theme-color);
        text-decoration: none;
        font: var(--btn-font);
        font-size: 0.9rem;
        transition: all 0.3s ease;
        position: relative;
    }

    #home-cta-2 .cta-seo-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: var(--theme-color);
        transition: width 0.3s ease;
    }

    #home-cta-2 .cta-seo-link:hover::before {
        width: 80%;
    }

    #home-cta-2 .cta-seo-link:hover {
        background-color: var(--theme-color);
        color: var(--white-color);
        border-color: var(--theme-color);
        transform: translateY(-3px);
    }

    #home-cta-2 .cta-2-actions {
        gap: 2rem;
        display: flex;
        justify-content: center;
        margin: 0 auto 3rem;
        width: fit-content;
        flex-wrap: nowrap;
    }