/* -------------------------------------------------------

    Theme Name: Key Design&Art Main Theme
    Theme URL: https://keydesignart.com/
    Description: Main CSS theme file.
    Author: Key Design&Art
    Copyright(c) 2026 keydesignart.com
    Version: 1.0.0

------------------------------------------------------- */

/* ===================================
    Table of Contents
    01. Google Fonts
    02. Root Variables (Colors, Fonts, Spacing)
    03. Reset & Base Styles
    04. Typography (Headings, Paragraphs)
    05. Typography Utilities (Weights, Sizes, Alignments)
    06. Global Layout & Structure (Sections)
    07. Grid System (Containers, Rows)
    08. Text Colors & Hover Utilities
    09. Text Decoration, Spacing & Icons
    10. Separator Lines
    11. Opacity & Background Utilities
    12. Position & Z-Index Utilities
    13. Advanced Layout, Motion & Interaction
    14. Filters, Shadows & Glass Effects
    15. Directional Shadows
    16. Form Elements & Inputs
    17. [Reserved]
    18. Advanced Form Elements & Hover Overlays
    19. Video Elements & Global Animations
    20. Global Keyframe Animations
    21. Parallax & Shape Masks
    22. Javascript Library Helpers & Browser Hacks
    23. Background Image & Border Utilities
    24. Border Radius Utilities
    25. Parallax & Dimension Utilities
    26. Width Utilities
    27. Height Utilities
    28. Screen Heights & Decorative Elements
    29. Spacing Utilities (Padding & Margin)
    30. Positioning Utilities (Top, Bottom, Left, Right)
    31. Font Weights & Typography Helpers
    32. Min-Height Utilities
    33. Grid System (Responsive Columns)
    34. Buttons & Action Elements
    35. Footer & Copyright Area
    36. Advanced Typography Extras
    37. Modern Tables & Data Visualization
    38. Object Fit & Aspect Ratio Utilities
    39. Custom Scrollbar Styling
    40. Base Header Structure
    41. Interaction & Cursor Utilities
    42. Display, Flexbox & Grid Utilities
    43. Print Styles
====================================== */

/* ===================================
    01. Google Fonts
====================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap");

/* ===================================
    02. Root Variables
====================================== */
:root {
    --base-color: #fdbb5b;
    --base-color-rgb: 253, 187, 91;
    --blue: var(--base-color);
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;

    --red: #dc3131;
    --light-red: #feedec;
    --green: #2ebb79;
    --yellow: #ffea23;

    --dark-gray: #232323;
    --dark-gray-rgb: 35, 35, 35;
    --medium-gray: #717580;
    --extra-medium-gray: #e4e4e4;
    --light-gray: #a8a8a8;
    --very-light-gray: #f7f7f7;
    --light-medium-gray: #eaeaeb;

    --charcoal-blue: #202329;
    --slate-blue: #262b35;
    --medium-slate-blue: #374162;
    --extra-medium-slate-blue: #23262d;
    --dark-slate-blue: #1f232c;
    --extra-dark-slate-blue: #121418;
    --extra-very-slate-blue: #161620;

    --tussock-yellow: #BC8947;
    --aluminium-gray: #80858F;
    --solitude-blue: #f0f4fd;
    --golden-yellow: #fd961e;
    --selago: #eaedff;
    --white-ice: #d8f5ef;
    --cornflower-blue: #445fed;
    --jade: #00AF6B;
    --orange: #ef991f;
    --majorelle-blue: #724ade;
    --light-majorelle-blue: #f2edfe;
    --spring-wood: #f9f6f3;
    --tropical-blue: #1ea3b1;
    --camarone: #20642b;
    --seal-brown: #010101;
    --wasabi: #8ea63a;

    --primary-font: "Poppins", sans-serif;
    --secondary-font: "Poppins", sans-serif;
    --base-font: var(--primary-font);
    --kd-serif-font: var(--secondary-font);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --radius-2: 2px;
    --radius-3: 3px;
    --radius-4: 4px;
    --radius-5: 5px;
    --radius-6: 6px;
    --radius-7: 7px;
    --radius-8: 8px;
    --radius-9: 9px;
    --radius-10: 10px;
}

/* ===================================
    03. Reset & Base Styles
====================================== */
*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--primary-font);
    background-color: var(--white);
    color: var(--medium-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: break-word;
}

img,picture,video,canvas {
    display: block;
    max-width: 100%;
}

svg {
    max-width: 100%;
}

img {
    height: auto;
}

video {
    background-size: cover;
    width: 100%;
}

:focus-visible {
    outline: 2px solid var(--base-color);
    outline-offset: 2px;
}

/* ===================================
    04. Typography
====================================== */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--secondary-font);
    color: var(--charcoal-blue);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-md);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 25px;
    color: var(--medium-gray);
}

.kd-last-paragraph-no-margin p:last-of-type {
    margin-bottom: 0;
}

a {
    color: var(--medium-gray);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

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

ul,ol {
    padding-left: 1.25rem;
    margin-bottom: 25px;
}

ul ul,ul ol,ol ul,ol ol {
    margin-bottom: 0;
}

.kd-list-reset {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kd-list-reset li {
    list-style: none !important;
}

/* ===================================
    05. Typography Utilities
====================================== */
.kd-font-style-italic {
    font-style: italic;
}

.kd-text-transform-none {
    text-transform: none !important;
}

.kd-text-uppercase-inherit {
    text-transform: inherit !important;
}

.kd-word-break-normal {
    word-break: normal;
}

.kd-text-white-space-nowrap {
    white-space: nowrap;
}

.kd-text-white-space-normal {
    white-space: normal;
}

.kd-vertical-align-top {
    vertical-align: top;
}

.kd-hover-text {
    display: none;
}

.kd-alt-font {
    font-family: var(--secondary-font);
}

.kd-primary-font {
    font-family: var(--primary-font) !important;
}

.kd-text-start { text-align: left !important; }
.kd-text-end { text-align: right !important; }
.kd-text-center { text-align: center !important; }
.kd-text-justify { text-align: justify !important; }

@media (min-width: 576px) {
    .kd-text-sm-start { text-align: left !important; }
    .kd-text-sm-center { text-align: center !important; }
    .kd-text-sm-end { text-align: right !important; }
}

@media (min-width: 768px) {
    .kd-text-md-start { text-align: left !important; }
    .kd-text-md-center { text-align: center !important; }
    .kd-text-md-end { text-align: right !important; }
}

@media (min-width: 992px) {
    .kd-text-lg-start { text-align: left !important; }
    .kd-text-lg-center { text-align: center !important; }
    .kd-text-lg-end { text-align: right !important; }
}

@media (min-width: 1200px) {
    .kd-text-xl-start { text-align: left !important; }
    .kd-text-xl-center { text-align: center !important; }
    .kd-text-xl-end { text-align: right !important; }
}

b,strong {
    font-weight: 700;
}

.kd-fs-0 { font-size: 0; }
.kd-fs-9 { font-size: 9px; }
.kd-fs-10 { font-size: 10px; }
.kd-fs-11 { font-size: 11px; }
.kd-fs-12 { font-size: 12px; }
.kd-fs-13 { font-size: 13px; }
.kd-fs-14 { font-size: 14px; }
.kd-fs-15 { font-size: 15px; }
.kd-fs-16 { font-size: 16px; }
.kd-fs-17 { font-size: 17px; }
.kd-fs-18 { font-size: 18px; }
.kd-fs-19 { font-size: 19px; }
.kd-fs-20 { font-size: 20px; }
.kd-fs-22 { font-size: 22px; }
.kd-fs-24 { font-size: 24px; line-height: 32px; }
.kd-fs-26 { font-size: 26px; line-height: 38px; }
.kd-fs-28 { font-size: 1.75rem; line-height: 2.6rem; }
.kd-fs-30 { font-size: 1.875rem; line-height: 2.8rem; }
.kd-fs-32 { font-size: 2rem; line-height: 2.5rem; }
.kd-fs-34 { font-size: 2.125rem; line-height: 2.125rem; }
.kd-fs-40 { font-size: 2.5rem; line-height: 2.5rem; }
.kd-fs-45 { font-size: 2.813rem; line-height: 3rem; }
.kd-fs-50 { font-size: 3.125rem; line-height: 3.25rem; }
.kd-fs-55 { font-size: 3.438rem; line-height: 3.5rem; }
.kd-fs-60 { font-size: 3.75rem; line-height: 3.75rem; }
.kd-fs-65 { font-size: 4.063rem; line-height: 4.688rem; }
.kd-fs-70 { font-size: 4.375rem; line-height: 4.375rem; }
.kd-fs-75 { font-size: 4.668rem; line-height: 4.668rem; }
.kd-fs-80 { font-size: 5rem; line-height: 5rem; }
.kd-fs-85 { font-size: 5.313rem; line-height: 5.313rem; }
.kd-fs-90 { font-size: 5.625rem; line-height: 5.625rem; }
.kd-fs-95 { font-size: 5.938rem; line-height: 5.938rem; }
.kd-fs-100 { font-size: 6.25rem; line-height: 6.25rem; }
.kd-fs-110 { font-size: 6.875rem; line-height: 6.875rem; }
.kd-fs-120 { font-size: 7.5rem; line-height: 7.5rem; }
.kd-fs-130 { font-size: 8.125rem; line-height: 8.125rem; }
.kd-fs-140 { font-size: 8.75rem; line-height: 8.75rem; }
.kd-fs-150 { font-size: 9.375rem; line-height: 9.375rem; }
.kd-fs-160 { font-size: 10rem; line-height: 10rem; }
.kd-fs-170 { font-size: 10.625rem; line-height: 10.625rem; }
.kd-fs-180 { font-size: 11.25rem; line-height: 11.25rem; }
.kd-fs-190 { font-size: 11.875rem; line-height: 11.875rem; }
.kd-fs-200 { font-size: 12.5rem; line-height: 12.5rem; }
.kd-fs-225 { font-size: 14.063rem; line-height: 14.063rem; }
.kd-fs-250 { font-size: 15.625rem; line-height: 15.625rem; }
.kd-fs-275 { font-size: 17.188rem; line-height: 17.188rem; }
.kd-fs-300 { font-size: 18.75rem; line-height: 18.75rem; }
.kd-fs-350 { font-size: 21.875rem; line-height: 21.875rem; }
.kd-fs-400 { font-size: 25rem; line-height: 25rem; }

.kd-lh-0 { line-height: 0; }
.kd-lh-0px { line-height: 0px; }
.kd-lh-normal { line-height: normal; }
.kd-lh-initial { line-height: initial; }
.kd-lh-inherit { line-height: inherit; }
.kd-lh-10 { line-height: 10px; }
.kd-lh-12 { line-height: 12px; }
.kd-lh-14 { line-height: 14px; }
.kd-lh-16 { line-height: 16px; }
.kd-lh-18 { line-height: 18px; }
.kd-lh-20 { line-height: 20px; }
.kd-lh-22 { line-height: 22px; }
.kd-lh-24 { line-height: 24px; }
.kd-lh-26 { line-height: 26px; }
.kd-lh-28 { line-height: 28px; }
.kd-lh-30 { line-height: 30px; }
.kd-lh-32 { line-height: 2rem; }
.kd-lh-34 { line-height: 2.125rem; }
.kd-lh-36 { line-height: 2.25rem; }
.kd-lh-38 { line-height: 2.375rem; }
.kd-lh-40 { line-height: 2.5rem; }
.kd-lh-42 { line-height: 2.625rem; }
.kd-lh-44 { line-height: 2.75rem; }
.kd-lh-46 { line-height: 2.875rem; }
.kd-lh-48 { line-height: 3rem; }
.kd-lh-50 { line-height: 3.125rem; }
.kd-lh-55 { line-height: 3.438rem; }
.kd-lh-60 { line-height: 3.75rem; }
.kd-lh-65 { line-height: 4.063rem; }
.kd-lh-70 { line-height: 4.375rem; }
.kd-lh-75 { line-height: 4.688rem; }
.kd-lh-80 { line-height: 5rem; }
.kd-lh-85 { line-height: 5.313rem; }
.kd-lh-90 { line-height: 5.625rem; }
.kd-lh-95 { line-height: 5.938rem; }
.kd-lh-100 { line-height: 6.25rem; }
.kd-lh-110 { line-height: 6.875rem; }
.kd-lh-120 { line-height: 7.5rem; }

/* ===================================
    06. Global Layout & Structure
====================================== */
section {
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
}

section.kd-half-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

section.kd-big-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

section.kd-extra-big-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

[class*=line-icon],[class*=" line-icon"],[class*=bi-],[class*=feather],[class*=ti-] {
    display: inline-block;
    vertical-align: middle;
}

.kd-form-control,.kd-form-control.kd-is-invalid,.kd-was-validated .kd-form-control:invalid {
    background-position: right 20px center !important;
}

.kd-form-control.kd-is-invalid,.kd-was-validated .kd-form-control:invalid {
    border-color: var(--red) !important;
}

.g-recaptcha.kd-is-invalid iframe {
    border: 1px solid var(--red) !important;
}

/* ===================================
    07. Grid System
====================================== */
.kd-container,.kd-container-fluid,.kd-container-lg,.kd-container-md,.kd-container-sm,.kd-container-xl,.kd-container-xxl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .kd-container-sm, .kd-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .kd-container-md, .kd-container-sm, .kd-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .kd-container-lg, .kd-container-md, .kd-container-sm, .kd-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .kd-container-xl, .kd-container-lg, .kd-container-md, .kd-container-sm, .kd-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .kd-container-xxl, .kd-container-xl, .kd-container-lg, .kd-container-md, .kd-container-sm, .kd-container {
        max-width: 1320px;
    }
}

.kd-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.kd-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.kd-row.kd-g-0 {
    margin-right: 0;
    margin-left: 0;
}

.kd-row.kd-g-0 > * {
    padding-right: 0;
    padding-left: 0;
}

.kd-row.kd-gutter-very-small {
    margin-left: -5px;
    margin-right: -5px;
}

.kd-row.kd-gutter-very-small > * {
    padding-right: 5px;
    padding-left: 5px;
}

.kd-row.kd-gutter-small {
    margin-left: -10px;
    margin-right: -10px;
}

.kd-row.kd-gutter-small > * {
    padding-right: 10px;
    padding-left: 10px;
}

/* ===================================
    08. Text Colors & Hover Utilities
====================================== */
.kd-text-base-color,.kd-btn-link.kd-text-base-color,a.kd-text-base-color-hover:hover {
    color: var(--base-color);
}

.kd-text-white,.kd-btn-link.kd-text-white,a.kd-text-white-hover:hover {
    color: var(--white);
}

.kd-text-black,.kd-btn-link.kd-text-black,a.kd-text-black-hover:hover {
    color: var(--black);
}

.kd-text-dark-gray,.kd-btn-link.kd-text-dark-gray,a.kd-text-dark-gray-hover:hover {
    color: var(--dark-gray);
}

.kd-text-medium-gray,.kd-btn-link.kd-text-medium-gray,a.kd-text-medium-gray-hover:hover {
    color: var(--medium-gray);
}

.kd-text-light-gray,.kd-btn-link.kd-text-light-gray,a.kd-text-light-gray-hover:hover {
    color: var(--light-gray);
}

.kd-text-very-light-gray,.kd-btn-link.kd-text-very-light-gray,a.kd-text-very-light-gray-hover:hover {
    color: var(--very-light-gray);
}

.kd-text-charcoal-blue,.kd-btn-link.kd-text-charcoal-blue,a.kd-text-charcoal-blue-hover:hover {
    color: var(--charcoal-blue);
}

.kd-text-slate-blue,.kd-btn-link.kd-text-slate-blue,a.kd-text-slate-blue-hover:hover {
    color: var(--slate-blue);
}

.kd-text-dark-slate-blue,.kd-btn-link.kd-text-dark-slate-blue,a.kd-text-dark-slate-blue-hover:hover {
    color: var(--dark-slate-blue);
}

.kd-text-extra-dark-slate-blue,.kd-btn-link.kd-text-extra-dark-slate-blue,a.kd-text-extra-dark-slate-blue-hover:hover {
    color: var(--extra-dark-slate-blue);
}

.kd-text-red,.kd-btn-link.kd-text-red,a.kd-text-red-hover:hover {
    color: var(--red);
}

.kd-text-green,.kd-btn-link.kd-text-green,a.kd-text-green-hover:hover {
    color: var(--green);
}

.kd-text-yellow,.kd-btn-link.kd-text-yellow,a.kd-text-yellow-hover:hover {
    color: var(--yellow);
}

.kd-text-orange,.kd-btn-link.kd-text-orange,a.kd-text-orange-hover:hover {
    color: var(--orange);
}

.kd-text-base-color-hover:hover { color: var(--base-color) !important; }
.kd-text-white-hover:hover { color: var(--white) !important; }
.kd-text-black-hover:hover { color: var(--black) !important; }
.kd-text-dark-gray-hover:hover { color: var(--dark-gray) !important; }

/* ===================================
    09. Text Decoration, Spacing & Icons
====================================== */
.kd-text-shadow-large {
    text-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

.kd-text-shadow-extra-large {
    text-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}

.kd-text-shadow-double-large {
    text-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
}

.kd-text-decoration-line-bottom {
    border-bottom: 1px solid;
}

.kd-text-decoration-line-bottom-medium {
    border-bottom: 2px solid;
}

.kd-text-decoration-line-bottom-thick {
    border-bottom: 3px solid;
}

.kd-text-decoration-line-through {
    text-decoration: line-through;
}

.kd-text-outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--white);
}

.kd-text-outline-width-1px { -webkit-text-stroke-width: 1px; }
.kd-text-outline-width-2px { -webkit-text-stroke-width: 2px; }
.kd-text-outline-width-3px { -webkit-text-stroke-width: 3px; }
.kd-text-outline-width-4px { -webkit-text-stroke-width: 4px; }
.kd-text-outline-width-5px { -webkit-text-stroke-width: 5px; }

.kd-text-outline-color-black { -webkit-text-stroke-color: var(--black); }
.kd-text-outline-color-base-color { -webkit-text-stroke-color: var(--base-color); }
.kd-text-outline-color-red { -webkit-text-stroke-color: var(--red); }
.kd-text-outline-color-dark-gray { -webkit-text-stroke-color: var(--dark-gray); }
.kd-text-outline-color-medium-gray { -webkit-text-stroke-color: var(--medium-gray); }
.kd-text-outline-color-extra-medium-gray { -webkit-text-stroke-color: var(--extra-medium-gray); }

.kd-ls-0px { letter-spacing: 0px !important; }
.kd-ls-05px { letter-spacing: 0.5px !important; }
.kd-ls-1px { letter-spacing: 1px !important; }
.kd-ls-2px { letter-spacing: 2px !important; }
.kd-ls-3px { letter-spacing: 3px !important; }
.kd-ls-4px { letter-spacing: 4px !important; }
.kd-ls-5px { letter-spacing: 5px !important; }
.kd-ls-6px { letter-spacing: 6px !important; }
.kd-ls-7px { letter-spacing: 7px !important; }
.kd-ls-8px { letter-spacing: 8px !important; }
.kd-ls-9px { letter-spacing: 9px !important; }
.kd-ls-10px { letter-spacing: 10px !important; }

.kd-ls-minus-05px { letter-spacing: -0.5px !important; }
.kd-ls-minus-1px { letter-spacing: -1px !important; }
.kd-ls-minus-2px { letter-spacing: -2px !important; }
.kd-ls-minus-3px { letter-spacing: -3px !important; }
.kd-ls-minus-4px { letter-spacing: -4px !important; }
.kd-ls-minus-5px { letter-spacing: -5px !important; }

.kd-icon-extra-double-large { font-size: 80px; }
.kd-icon-double-large { font-size: 60px; }
.kd-icon-extra-large { font-size: 50px; }
.kd-icon-large { font-size: 42px; }
.kd-icon-medium { font-size: 34px; }
.kd-icon-very-medium { font-size: 28px; }
.kd-icon-extra-medium { font-size: 24px; }
.kd-icon-small { font-size: 18px; }
.kd-icon-very-small { font-size: 14px; }

/* ===================================
    10. Separator Lines
====================================== */
.kd-separator-line-1px { height: 1px; }
.kd-separator-line-2px { height: 2px; }
.kd-separator-line-3px { height: 3px; }
.kd-separator-line-4px { height: 4px; }
.kd-separator-line-5px { height: 5px; }

.kd-separator-line-vertical {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.kd-separator-line-small {
    width: 35px;
    height: 1px;
    display: inline-block;
    margin-right: 7px;
}

.kd-separator-line-extra-small {
    width: 18px;
    height: 1px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.kd-separator-line-very-small {
    width: 12px;
    height: 1px;
    display: inline-block;
    margin-right: 9px;
    vertical-align: middle;
}

/* ===================================
    11. Opacity & Background Utilities
====================================== */
.kd-opacity-0 { opacity: 0; }
.kd-opacity-1 { opacity: 0.1; }
.kd-opacity-2 { opacity: 0.2; }
.kd-opacity-3 { opacity: 0.3; }
.kd-opacity-4 { opacity: 0.4; }
.kd-opacity-5 { opacity: 0.5; }
.kd-opacity-6 { opacity: 0.6; }
.kd-opacity-7 { opacity: 0.7; }
.kd-opacity-8 { opacity: 0.8; }
.kd-opacity-9 { opacity: 0.9; }
.kd-opacity-10 { opacity: 1; }

.kd-opacity-1-hover:hover { opacity: 0.1; }
.kd-opacity-2-hover:hover { opacity: 0.2; }
.kd-opacity-3-hover:hover { opacity: 0.3; }
.kd-opacity-4-hover:hover { opacity: 0.4; }
.kd-opacity-5-hover:hover { opacity: 0.5; }
.kd-opacity-6-hover:hover { opacity: 0.6; }
.kd-opacity-7-hover:hover { opacity: 0.7; }
.kd-opacity-8-hover:hover { opacity: 0.8; }
.kd-opacity-9-hover:hover { opacity: 0.9; }
.kd-opacity-10-hover:hover { opacity: 1; }

.kd-bg-transparent { background-color: transparent; }
.kd-bg-white { background-color: var(--white); }
.kd-bg-black { background-color: var(--black); }
.kd-bg-base-color { background-color: var(--base-color); }
.kd-bg-dark-gray { background-color: var(--dark-gray); }
.kd-bg-medium-gray { background-color: var(--medium-gray); }
.kd-bg-light-gray { background-color: var(--light-gray); }
.kd-bg-very-light-gray { background-color: var(--very-light-gray); }
.kd-bg-extra-medium-gray { background-color: var(--extra-medium-gray); }
.kd-bg-light-medium-gray { background-color: var(--light-medium-gray); }

.kd-bg-charcoal-blue { background-color: var(--charcoal-blue); }
.kd-bg-slate-blue { background-color: var(--slate-blue); }
.kd-bg-dark-slate-blue { background-color: var(--dark-slate-blue); }
.kd-bg-extra-dark-slate-blue { background-color: var(--extra-dark-slate-blue); }
.kd-bg-solitude-blue { background-color: var(--solitude-blue); }
.kd-bg-majorelle-blue { background-color: var(--majorelle-blue); }
.kd-bg-cornflower-blue { background-color: var(--cornflower-blue); }

.kd-bg-red { background-color: var(--red); }
.kd-bg-light-red { background-color: var(--light-red); }
.kd-bg-green { background-color: var(--green); }
.kd-bg-yellow { background-color: var(--yellow); }
.kd-bg-golden-yellow { background-color: var(--golden-yellow); }
.kd-bg-orange { background-color: var(--orange); }
.kd-bg-spring-wood { background-color: var(--spring-wood); }

/* ===================================
    12. Position & Z-Index Utilities
====================================== */
.kd-position-relative { position: relative; }
.kd-position-absolute { position: absolute; }
.kd-position-fixed { position: fixed; }
.kd-position-static { position: static; }
.kd-position-sticky { position: sticky; }

.kd-top-auto { top: auto; }
.kd-bottom-auto { bottom: auto; }
.kd-left-auto { left: auto; }
.kd-right-auto { right: auto; }

.kd-top-50 { top: 50%; }
.kd-top-100 { top: 100%; }
.kd-bottom-100 { bottom: 100%; }
.kd-left-50 { left: 50%; }
.kd-left-100 { left: 100%; }
.kd-right-100 { right: 100%; }

.kd-absolute-middle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.kd-absolute-middle-left {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.kd-absolute-middle-right {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.kd-z-index-0 { z-index: 0; }
.kd-z-index-1 { z-index: 1; }
.kd-z-index-minus-1 { z-index: -1; }
.kd-z-index-5 { z-index: 5; }
.kd-z-index-9 { z-index: 9; }
.kd-z-index-111 { z-index: 111; }
.kd-z-index-999 { z-index: 999; }
.kd-z-index-1111 { z-index: 1111; }

.kd-overflow-hidden { overflow: hidden !important; }
.kd-overflow-visible { overflow: visible !important; }
.kd-overflow-auto { overflow: auto !important; }
.kd-overflow-x-hidden { overflow-x: hidden !important; }
.kd-overflow-y-hidden { overflow-y: hidden !important; }

/* ===================================
    13. Advanced Layout, Motion & Interaction
====================================== */
.kd-transform-origin-right { transform-origin: right; }
.kd-transform-origin-left { transform-origin: left; }

.kd-btn.kd-btn-none-transform,.kd-btn.kd-btn-none-transform:hover {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.kd-transition {
    -webkit-transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-transition-inner-all * {
    -webkit-transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-no-transition {
    -webkit-transition: 0s;
    transition: 0s;
}

.kd-overlap-section { position: relative; }
.kd-overlap-height { transition: 0.3s height; }

.kd-sticky-wrap {
    position: fixed;
    top: 50%;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transform: rotate(-90deg) translate(-50%, 50%);
    transform: rotate(-90deg) translate(-50%, 50%);
    transform-origin: 0 50%;
    transition: 1s cubic-bezier(0.7, 0, 0.3, 1) !important;
}

.kd-sticky-wrap.kd-shadow-in {
    left: 50px;
    opacity: 1;
    box-shadow: none !important;
}

.kd-sticky-wrap.kd-sticky-hidden {
    left: 0;
    opacity: 0;
}

.kd-sticky-wrap a,.kd-sticky-wrap a:hover,.kd-sticky-wrap div,.kd-sticky-wrap span,.kd-sticky-wrap p {
    color: var(--dark-gray) !important;
}

.kd-sticky-wrap .kd-social-icon-style-10 ul li a:hover {
    color: var(--dark-gray) !important;
}

.kd-sticky-wrap.kd-sticky-highlight a,.kd-sticky-wrap.kd-sticky-highlight a:hover,.kd-sticky-wrap.kd-sticky-highlight div,.kd-sticky-wrap.kd-sticky-highlight span,.kd-sticky-wrap.kd-sticky-highlight p {
    color: var(--white) !important;
}

.kd-sticky-wrap.kd-sticky-highlight .kd-separator-line-1px {
    background-color: var(--white) !important;
}

.kd-sticky-wrap.kd-sticky-highlight .kd-social-icon-style-10 ul li a:hover {
    color: var(--white) !important;
}

.kd-sticky-wrap-right {
    position: fixed;
    top: 50%;
    right: 110px;
    z-index: 1;
    -webkit-transform: rotate(-90deg) translate(50%, 100%);
    transform: rotate(-90deg) translate(50%, 100%);
    transform-origin: 100% 0%;
}

.kd-outside-box-top-15 { margin-top: -15vw; }
.kd-outside-box-top-18 { margin-top: -18vw; }
.kd-outside-box-left-1 { margin-left: -1vw; }
.kd-outside-box-left-2 { margin-left: -2vw; }
.kd-outside-box-left-5 { margin-left: -5vw; }
.kd-outside-box-left-7 { margin-left: -7vw; }
.kd-outside-box-left-8 { margin-left: -8vw; }
.kd-outside-box-left-10 { margin-left: -10vw; }
.kd-outside-box-left-15 { margin-left: -15vw; }
.kd-outside-box-left-20 { margin-left: -20vw; }
.kd-outside-box-left-25 { margin-left: -25vw; }
.kd-outside-box-left-30 { margin-left: -30vw; }
.kd-outside-box-left-35 { margin-left: -35vw; }
.kd-outside-box-left-40 { margin-left: -40vw; }
.kd-outside-box-left-50 { margin-left: -50vw; }
.kd-outside-box-left-60 { margin-left: -60vw; }
.kd-outside-box-left-65 { margin-left: -65vw; }
.kd-outside-box-right-1 { margin-right: -1vw; }
.kd-outside-box-right-2 { margin-right: -2vw; }
.kd-outside-box-right-5 { margin-right: -5vw; }
.kd-outside-box-right-7 { margin-right: -7vw; }
.kd-outside-box-right-10 { margin-right: -10vw; }
.kd-outside-box-right-15 { margin-right: -15vw; }
.kd-outside-box-right-20 { margin-right: -20vw; }
.kd-outside-box-right-25 { margin-right: -25vw; }
.kd-outside-box-right-30 { margin-right: -30vw; }
.kd-outside-box-right-35 { margin-right: -35vw; }
.kd-outside-box-right-40 { margin-right: -40vw; }
.kd-outside-box-right-45 { margin-right: -45vw; }
.kd-outside-box-right-50 { margin-right: -50vw; }
.kd-outside-box-right-60 { margin-right: -60vw; }
.kd-outside-box-right-65 { margin-right: -65vw; }

/* ===================================
    14. Filters, Shadows & Glass Effects
====================================== */
.kd-filter-grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.kd-filter-grayscale-0 { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.kd-filter-sepia { -webkit-filter: sepia(100%); filter: sepia(100%); }
.kd-filter-blur { -webkit-filter: blur(5px); filter: blur(5px); }
.kd-filter-contrast { -webkit-filter: contrast(150%); filter: contrast(150%); }
.kd-filter-brightness { -webkit-filter: brightness(120%); filter: brightness(120%); }
.kd-filter-invert { -webkit-filter: invert(100%); filter: invert(100%); }

.kd-glass-effect-light {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.kd-glass-effect-dark {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.kd-box-shadow,.kd-box-shadow-hover:hover {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    -webkit-transition: 350ms ease-in-out;
    transition: 350ms ease-in-out;
}

.kd-box-shadow-small,.kd-box-shadow-small-hover:hover {
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-medium,.kd-box-shadow-medium-hover:hover {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-medium-bottom,.kd-box-shadow-medium-bottom-hover:hover {
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-large,.kd-box-shadow-large-hover:hover {
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-extra-large,.kd-box-shadow-extra-large-hover:hover {
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-double-large,.kd-box-shadow-double-large-hover:hover {
    -webkit-box-shadow: 0 0 45px rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.09);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-triple-large,.kd-box-shadow-triple-large-hover:hover {
    -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-quadruple-large,.kd-box-shadow-quadruple-large-hover:hover {
    -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.kd-box-shadow-hover:hover,.kd-box-shadow-large-hover:hover,.kd-box-shadow-extra-large-hover:hover,.kd-box-shadow-medium-hover:hover,.kd-box-shadow-small-hover:hover,.kd-box-shadow-double-large-hover:hover,.kd-box-shadow-quadruple-large-hover:hover {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
}

/* ===================================
    15. Directional Shadows
====================================== */
.kd-box-shadow-bottom {
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
}

.kd-box-shadow-top {
    -webkit-box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.05);
}

.kd-box-shadow-right {
    -webkit-box-shadow: 10px 0px 15px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 10px 0px 15px 0px rgba(0, 0, 0, 0.05);
}

.kd-box-shadow-left {
    -webkit-box-shadow: -10px 0px 15px 0px rgba(0, 0, 0, 0.05);
    box-shadow: -10px 0px 15px 0px rgba(0, 0, 0, 0.05);
}

/* ===================================
    16. Form Elements & Inputs
====================================== */
input,select,textarea,.kd-form-control,.kd-form-select {
    padding: 12px 20px;
    width: 100%;
    max-width: 100%;
    resize: none;
    outline: none;
    font-size: 16px;
    border: 1px solid var(--extra-medium-gray);
    border-radius: var(--radius-4);
    color: var(--dark-gray);
    line-height: inherit;
    word-break: normal;
    background-color: var(--white);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:hover,select:hover,textarea:hover,.kd-form-control:hover,.kd-form-select:hover {
    border-color: var(--light-gray);
}

input:focus,select:focus,textarea:focus,.kd-form-control:focus {
    border-color: var(--base-color);
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

::-webkit-input-placeholder { color: var(--medium-gray) !important; text-overflow: ellipsis; }
::-moz-placeholder { color: var(--medium-gray) !important; text-overflow: ellipsis; opacity: 1; }
:-ms-input-placeholder { color: var(--medium-gray) !important; text-overflow: ellipsis; opacity: 1; }

.kd-placeholder-light::-webkit-input-placeholder { color: var(--white) !important; text-overflow: ellipsis; }
.kd-placeholder-light::-moz-placeholder { color: var(--white) !important; text-overflow: ellipsis; opacity: 1; }
.kd-placeholder-light:-ms-input-placeholder { color: var(--white) !important; text-overflow: ellipsis; opacity: 1; }

.kd-search-error { border-color: var(--red) !important; }

.kd-select { position: relative; }
.kd-select:after {
    content: "";
    font-family: "bootstrap-icons" !important;
    right: 20px;
    top: 50%;
    height: 34px;
    position: absolute;
    pointer-events: none;
    font-size: 16px;
    line-height: 34px;
    margin-top: -17px;
    color: var(--dark-gray);
    transition: color 0.3s ease;
}
.kd-select:hover:after { color: var(--base-color); }

.kd-date-time { position: relative; }
.kd-date-icon { position: relative; }
.kd-date-icon input[type=date]::-webkit-inner-spin-button,.kd-date-icon input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none; opacity: 0; -moz-appearance: none; appearance: none; z-index: 1;
    position: absolute; right: 0; top: 0; width: 100%; height: 100%; cursor: pointer;
}
.kd-date-icon:after {
    content: "";
    font-family: "bootstrap-icons" !important;
    right: 20px;
    top: 50%;
    height: 34px;
    position: absolute;
    pointer-events: none;
    font-size: 16px;
    line-height: 34px;
    margin-top: -17px;
    color: var(--dark-gray);
    transition: color 0.3s ease;
}
.kd-date-icon:hover:after { color: var(--base-color); }
.kd-date-icon input[type=date]::-webkit-date-and-time-value { text-align: left !important; }

/* ===================================
    18. Advanced Form Elements & Hover Overlays
====================================== */
.kd-time-icon { position: relative; }
.kd-time-icon input[type=time]::-webkit-inner-spin-button,.kd-time-icon input[type=time]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none; opacity: 0; -moz-appearance: none; appearance: none;
}
.kd-time-icon:after {
    content: "";
    font-family: "bootstrap-icons" !important;
    right: 20px;
    top: 50%;
    height: 34px;
    position: absolute;
    pointer-events: none;
    font-size: 18px;
    line-height: 34px;
    margin-top: -17px;
    color: var(--dark-gray);
    transition: color 0.3s ease;
}
.kd-time-icon:hover:after { color: var(--base-color); }

.kd-input-small,.kd-textarea-small,.kd-select-small { padding: 7px 15px; font-size: 12px; }
.kd-input-medium,.kd-textarea-medium,.kd-select-medium { padding: 14px 28px; }
.kd-input-large { padding: 16px 32px; }
.kd-form-control.kd-is-invalid:focus { box-shadow: none; }

.kd-box-overlay {
    position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;
    visibility: hidden; -webkit-transition: all 400ms cubic-bezier(0.5, 1, 0.89, 1);
    transition: all 400ms cubic-bezier(0.5, 1, 0.89, 1);
}
.kd-hover-box { z-index: 1; position: relative; }
.kd-hover-box * {
    -webkit-transition: all 500ms cubic-bezier(0.5, 1, 0.89, 1);
    transition: all 500ms cubic-bezier(0.5, 1, 0.89, 1); will-change: transform;
}
.kd-hover-box:hover .kd-box-overlay { opacity: 1; visibility: visible; }

.kd-hover-box.kd-dark-hover .kd-border-dark-opacity { border-color: rgba(35, 35, 35, 0.15) !important; }
.kd-hover-box.kd-dark-hover:hover a,.kd-hover-box.kd-dark-hover:hover p,.kd-hover-box.kd-dark-hover:hover span,.kd-hover-box.kd-dark-hover:hover .kd-btn,.kd-hover-box.kd-dark-hover:hover i,.kd-hover-box.kd-dark-hover:hover b,.kd-hover-box.kd-dark-hover:hover u,.kd-hover-box.kd-dark-hover:hover h1,.kd-hover-box.kd-dark-hover:hover h2,.kd-hover-box.kd-dark-hover:hover h3,.kd-hover-box.kd-dark-hover:hover h4,.kd-hover-box.kd-dark-hover:hover h5,.kd-hover-box.kd-dark-hover:hover h6 {
    color: var(--white) !important; -webkit-text-stroke-color: var(--white);
}
.kd-hover-box.kd-dark-hover:hover [class*=kd-separator-line] { background-color: var(--white); }
.kd-hover-box.kd-dark-hover:hover [class*=kd-btn-link-gradient] span { background: var(--white); background-image: none; }
.kd-hover-box.kd-dark-hover:hover [class*=kd-btn-transparent] {
    background-color: var(--white); border-color: var(--white); color: var(--dark-gray) !important;
}
.kd-hover-box.kd-dark-hover:hover .kd-text-light-opacity { opacity: 0.7; }
.kd-hover-box.kd-dark-hover:hover .kd-text-medium-opacity { opacity: 0.5; }
.kd-hover-box.kd-dark-hover:hover .kd-border-dark-opacity { border-color: rgba(255, 255, 255, 0.3) !important; }
.kd-hover-box.kd-dark-hover:hover .kd-content-slide-up .kd-text-light-opacity { opacity: 0.7; }
.kd-hover-box.kd-dark-hover:hover .kd-btn-link { border-color: var(--white); }

/* ===================================
    19. Video Elements & Global Animations
====================================== */
@-webkit-keyframes kd-video-icon-sonar {
    0% { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); }
    100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); }
}
@keyframes kd-video-icon-sonar {
    0% { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); }
    100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); }
}

.kd-video-icon-box { z-index: 5; position: relative; display: inline-block; }
.kd-video-icon-box > span {
    display: -webkit-inline-box; display: inline-flex; -webkit-box-orient: horizontal;
    -webkit-box-direction: normal; flex-flow: row wrap; -webkit-box-align: center;
    align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}

.kd-video-icon {
    position: relative; display: -webkit-inline-box; display: inline-flex;
    -webkit-box-align: center; align-items: center; -webkit-box-pack: center;
    justify-content: center; border-radius: 50%; background-color: var(--white);
    color: var(--base-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.kd-video-icon:hover { transform: scale(1.1); color: var(--dark-slate-blue); }
.kd-video-icon i { margin-left: 3px; }

.kd-video-icon .kd-video-icon-sonar {
    position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0;
    z-index: -1; pointer-events: none;
}
.kd-video-icon .kd-video-icon-sonar .kd-video-icon-sonar-bfr,.kd-video-icon .kd-video-icon-sonar .kd-video-icon-sonar-afr {
    content: ""; position: absolute; border-radius: 50%; top: 0; left: 0;
    width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6);
    z-index: -1; -webkit-animation: kd-video-icon-sonar 2s linear infinite;
    animation: kd-video-icon-sonar 2s linear infinite;
}
.kd-video-icon .kd-video-icon-sonar .kd-video-icon-sonar-afr { animation-delay: 0.5s; }

.kd-video-icon-small .kd-video-icon { width: 50px; height: 50px; font-size: 16px; }
.kd-video-icon-medium .kd-video-icon { width: 70px; height: 70px; font-size: 20px; }
.kd-video-icon-large .kd-video-icon { width: 100px; height: 100px; font-size: 30px; }
.kd-video-icon-extra-large .kd-video-icon { width: 130px; height: 130px; font-size: 40px; }

.kd-html-video-play .kd-video-icon .kd-play-icon,.kd-html-video-play .kd-video-icon .kd-pause-icon {
    position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); transition: all 0.4s cubic-bezier(0.5, 1, 0.89, 1);
}
.kd-html-video-play .kd-video-icon .kd-play-icon { opacity: 1; visibility: visible; margin-left: 2px; }
.kd-html-video-play .kd-video-icon .kd-pause-icon { opacity: 0; visibility: hidden; transform: translate(-50%, 50%); }
.kd-html-video-play[playing=true] .kd-video-icon .kd-play-icon { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
.kd-html-video-play[playing=true] .kd-video-icon .kd-pause-icon { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.kd-video-play-icon.kd-remove-play-icon + .kd-html-video-play { opacity: 0 !important; transition: opacity 0.3s ease; }
.kd-video-play-icon.kd-remove-play-icon + .kd-html-video-play:hover,.kd-video-play-icon.kd-remove-play-icon:hover + .kd-html-video-play { opacity: 1 !important; }

/* ===================================
    20. Global Keyframe Animations
====================================== */
.kd-animation-rotation {
    -webkit-animation: kd-rotation 10s infinite linear; animation: kd-rotation 10s infinite linear;
}
@-webkit-keyframes kd-rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes kd-rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }

.kd-animation-float { animation: kd-float 3s ease-in-out infinite alternate; }
@keyframes kd-float { 0% { transform: translateY(0px); } 100% { transform: translateY(-20px); } }

.kd-animation-float-small { animation: kd-float-small 3s ease-in-out infinite alternate; }
@keyframes kd-float-small { 0% { transform: translateY(0px); } 100% { transform: translateY(-10px); } }

.kd-animation-zoom { animation: kd-zoom-pulse 3s ease-in-out infinite alternate; }
@keyframes kd-zoom-pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }

.kd-will-change-transform { will-change: transform; }

/* ===================================
    21. Parallax & Shape Masks
====================================== */
[data-shadow-animation] {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
[data-shadow-animation].kd-shadow-in { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }
[data-shadow-animation] img { opacity: 0; transition: opacity 0.65s cubic-bezier(0.5, 1, 0.5, 1); }
[data-shadow-animation].kd-shadow-in img { opacity: 1; transition-delay: 0.2s; }

[data-parallax-liquid] { overflow: hidden; will-change: transform; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
[data-parallax-liquid] .kd-liquid-parallax {
    will-change: transform; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(0px) scale(1.1); width: 100%;
}

.kd-masked-image {
    position: absolute; top: -100px; right: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
}
.kd-masked-image svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }

.kd-shape-image-animation { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; }
.kd-shape-image-animation svg { width: 100%; height: auto; display: block; }

.kd-page-divider-wrapper { position: relative; width: 100%; line-height: 0; direction: ltr; overflow: hidden; }
.kd-page-divider-wrapper svg {
    display: block; width: calc(100% + 1.3px); position: relative; left: 50%; transform: translateX(-50%); height: auto;
}

/* ===================================
    22. Javascript Library Helpers & Browser Hacks
====================================== */
[data-anime] { opacity: 0; will-change: transform, opacity; transition: none; }
[data-anime].kd-appear { opacity: 1; }
[data-anime].kd-btn { transition: none; }
[data-anime].kd-btn.kd-anime-complete { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }

.atropos-shadow { background-color: transparent !important; filter: inherit; }
.atropos-highlight { background-image: inherit !important; }

@media not all and (min-resolution: 0.001dpcm) {
    [data-anime] [class*=kd-text-shadow-], [data-anime][class*=kd-text-shadow-],
    [data-fancy-text] [class*=kd-text-shadow-], [data-fancy-text][class*=kd-text-shadow-] { text-shadow: none !important; }
    .kd-review-star-icon i { display: inline-block; }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .kd-text-white a[href^=tel] { color: var(--white); }
    .kd-text-dark-gray a[href^=tel] { color: var(--dark-gray); }
}

/* ===================================
    23. Background Image & Border Utilities
====================================== */
.kd-contain-background { background-size: contain; background-repeat: no-repeat; background-position: center; }
.kd-cover-background { background-repeat: no-repeat !important; background-size: cover; overflow: hidden; position: relative; background-position: center; }
.kd-fix-background {
    position: relative; background-size: cover !important; overflow: hidden;
    background-position: center; background-repeat: no-repeat !important; background-attachment: fixed !important;
}
.kd-background-size-inherit { background-size: inherit !important; }
.kd-background-attachment-inherit { background-attachment: inherit !important; }

.kd-background-position-left { background-position: left center !important; }
.kd-background-position-left-bottom { background-position: left bottom !important; }
.kd-background-position-left-top { background-position: left top !important; }
.kd-background-position-right { background-position: right center !important; }
.kd-background-position-right-bottom { background-position: right bottom !important; }
.kd-background-position-right-top { background-position: right top !important; }
.kd-background-position-center { background-position: center !important; }
.kd-background-position-center-top { background-position: center top !important; }
.kd-background-position-center-bottom { background-position: center bottom !important; }

.kd-background-repeat { background-repeat: repeat; }
.kd-background-no-repeat { background-repeat: no-repeat; }
.kd-background-no-repeat-y { background-repeat: repeat no-repeat; }
.kd-background-no-repeat-x { background-repeat: no-repeat repeat; }
.kd-background-repeat-y { background-repeat: no-repeat repeat; }

.kd-background-size-100 { background-size: 100% !important; }
.kd-background-size-auto-100 { background-size: auto 100% !important; }
.kd-background-size-contain { background-size: contain !important; }

.kd-border-6 { border-width: 6px !important; }
.kd-border-7 { border-width: 7px !important; }
.kd-border-8 { border-width: 8px !important; }
.kd-border-9 { border-width: 9px !important; }
.kd-border-10 { border-width: 10px !important; }

.kd-border-dotted { border-style: dotted !important; }
.kd-border-dashed { border-style: dashed !important; }
.kd-border-solid { border-style: solid !important; }
.kd-border-double { border-style: double !important; }
.kd-border-groove { border-style: groove !important; }
.kd-border-ridge { border-style: ridge !important; }
.kd-border-inset { border-style: inset !important; }
.kd-border-outset { border-style: outset !important; }
.kd-border-none { border-style: none !important; }
.kd-border-hidden { border-style: hidden !important; }

.kd-border-color-base-color { border-color: var(--base-color) !important; }
.kd-border-color-white { border-color: var(--white) !important; }
.kd-border-color-black { border-color: var(--black) !important; }
.kd-border-color-dark-gray { border-color: var(--dark-gray) !important; }
.kd-border-color-medium-gray { border-color: var(--medium-gray) !important; }
.kd-border-color-extra-medium-gray { border-color: var(--extra-medium-gray) !important; }
.kd-border-color-light-medium-gray { border-color: var(--light-medium-gray) !important; }
.kd-border-color-light-gray { border-color: var(--light-gray) !important; }
.kd-border-color-very-light-gray { border-color: var(--very-light-gray) !important; }
.kd-border-color-yellow { border-color: var(--yellow) !important; }
.kd-border-color-orange { border-color: var(--orange) !important; }
.kd-border-color-red { border-color: var(--red) !important; }
.kd-border-color-green { border-color: var(--green) !important; }

.kd-border-color-transparent { border-color: transparent !important; }
.kd-border-color-transparent-on-hover:hover { border-color: transparent !important; }
.kd-border-color-transparent-dark-very-light { border-color: rgba(35, 35, 35, 0.1) !important; }
.kd-border-color-transparent-dark-light { border-color: rgba(35, 35, 35, 0.2) !important; }
.kd-border-color-transparent-white-very-light { border-color: rgba(255, 255, 255, 0.1) !important; }
.kd-border-color-transparent-white-light { border-color: rgba(255, 255, 255, 0.3) !important; }
.kd-border-color-transparent-white-medium { border-color: rgba(255, 255, 255, 0.6) !important; }

/* ===================================
    24. Border Radius Utilities
====================================== */
.kd-border-radius-0px { border-radius: 0px !important; }
.kd-border-radius-1px { border-radius: 1px !important; }
.kd-border-radius-2px { border-radius: 2px !important; }
.kd-border-radius-3px { border-radius: 3px !important; }
.kd-border-radius-4px { border-radius: 4px !important; }
.kd-border-radius-5px { border-radius: 5px !important; }
.kd-border-radius-6px { border-radius: 6px !important; }
.kd-border-radius-7px { border-radius: 7px !important; }
.kd-border-radius-8px { border-radius: 8px !important; }
.kd-border-radius-9px { border-radius: 9px !important; }
.kd-border-radius-10px { border-radius: 10px !important; }
.kd-border-radius-15px { border-radius: 15px !important; }
.kd-border-radius-18px { border-radius: 18px !important; }
.kd-border-radius-20px { border-radius: 20px !important; }
.kd-border-radius-22px { border-radius: 22px !important; }
.kd-border-radius-24px { border-radius: 24px !important; }
.kd-border-radius-25px { border-radius: 25px !important; }
.kd-border-radius-26px { border-radius: 26px !important; }
.kd-border-radius-30px { border-radius: 30px !important; }
.kd-border-radius-35px { border-radius: 35px !important; }
.kd-border-radius-40px { border-radius: 40px !important; }
.kd-border-radius-50px { border-radius: 50px !important; }
.kd-border-radius-100px { border-radius: 100px !important; }
.kd-border-radius-50 { border-radius: 50% !important; }
.kd-border-radius-100 { border-radius: 100% !important; }
.kd-no-border-radius { border-radius: 0 !important; }

.kd-border-radius-top { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; }
.kd-border-radius-bottom { border-bottom-left-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.kd-border-radius-left { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.kd-border-radius-right { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.kd-border-radius-top-left { border-top-left-radius: 6px !important; }
.kd-border-radius-top-right { border-top-right-radius: 6px !important; }
.kd-border-radius-bottom-left { border-bottom-left-radius: 6px !important; }
.kd-border-radius-bottom-right { border-bottom-right-radius: 6px !important; }

/* ===================================
    25. Parallax & Dimension Utilities
====================================== */
.kd-parallax {
    position: relative !important; background-size: cover !important; background-attachment: fixed !important;
    background-position: center center !important; overflow: hidden; will-change: transform;
    -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    -webkit-transition: none; transition: none;
}

/* ===================================
    26. Width Utilities
====================================== */
.kd-w-1px { width: 1px !important; }
.kd-w-2px { width: 2px !important; }
.kd-w-3px { width: 3px !important; }
.kd-w-4px { width: 4px !important; }
.kd-w-5px { width: 5px !important; }
.kd-w-10px { width: 10px !important; }
.kd-w-15px { width: 15px !important; }
.kd-w-20px { width: 20px !important; }
.kd-w-25px { width: 25px !important; }
.kd-w-30px { width: 30px !important; }
.kd-w-35px { width: 35px !important; }
.kd-w-40px { width: 40px !important; }
.kd-w-45px { width: 45px !important; }
.kd-w-50px { width: 50px !important; }
.kd-w-55px { width: 55px !important; }
.kd-w-60px { width: 60px !important; }
.kd-w-65px { width: 65px !important; }
.kd-w-70px { width: 70px !important; }
.kd-w-75px { width: 75px !important; }
.kd-w-80px { width: 80px !important; }
.kd-w-85px { width: 85px !important; }
.kd-w-90px { width: 90px !important; }
.kd-w-95px { width: 95px !important; }
.kd-w-100px { width: 100px !important; }
.kd-w-150px { width: 150px !important; }
.kd-w-200px { width: 200px !important; }
.kd-w-250px { width: 250px !important; }
.kd-w-300px { width: 300px !important; }
.kd-w-350px { width: 350px !important; }
.kd-w-400px { width: 400px !important; }
.kd-w-450px { width: 450px !important; }
.kd-w-500px { width: 500px !important; }
.kd-w-550px { width: 550px !important; }
.kd-w-600px { width: 600px !important; }
.kd-w-650px { width: 650px !important; }
.kd-w-700px { width: 700px !important; }
.kd-w-750px { width: 750px !important; }
.kd-w-800px { width: 800px !important; }
.kd-w-850px { width: 850px !important; }
.kd-w-900px { width: 900px !important; }
.kd-w-950px { width: 950px !important; }
.kd-w-1000px { width: 1000px !important; }

.kd-w-10 { width: 10% !important; }
.kd-w-15 { width: 15% !important; }
.kd-w-20 { width: 20% !important; }
.kd-w-25 { width: 25% !important; }
.kd-w-30 { width: 30% !important; }
.kd-w-35 { width: 35% !important; }
.kd-w-40 { width: 40% !important; }
.kd-w-45 { width: 45% !important; }
.kd-w-50 { width: 50% !important; }
.kd-w-55 { width: 55% !important; }
.kd-w-60 { width: 60% !important; }
.kd-w-65 { width: 65% !important; }
.kd-w-70 { width: 70% !important; }
.kd-w-75 { width: 75% !important; }
.kd-w-80 { width: 80% !important; }
.kd-w-85 { width: 85% !important; }
.kd-w-90 { width: 90% !important; }
.kd-w-95 { width: 95% !important; }
.kd-w-100 { width: 100% !important; }
.kd-w-auto { width: auto !important; }

.kd-max-w-75ch { max-width: 75ch !important; }
.kd-max-w-none { max-width: none !important; }

.kd-w-100vw { width: 100vw !important; }
.kd-min-w-100vw { min-width: 100vw !important; }

/* ===================================
    27. Height Utilities
====================================== */
.kd-h-1px { height: 1px !important; }
.kd-h-2px { height: 2px !important; }
.kd-h-3px { height: 3px !important; }
.kd-h-4px { height: 4px !important; }
.kd-h-5px { height: 5px !important; }
.kd-h-10px { height: 10px !important; }
.kd-h-15px { height: 15px !important; }
.kd-h-20px { height: 20px !important; }
.kd-h-25px { height: 25px !important; }
.kd-h-30px { height: 30px !important; }
.kd-h-35px { height: 35px !important; }
.kd-h-40px { height: 40px !important; }
.kd-h-45px { height: 45px !important; }
.kd-h-50px { height: 50px !important; }
.kd-h-55px { height: 55px !important; }
.kd-h-60px { height: 60px !important; }
.kd-h-65px { height: 65px !important; }
.kd-h-70px { height: 70px !important; }
.kd-h-75px { height: 75px !important; }
.kd-h-80px { height: 80px !important; }
.kd-h-85px { height: 85px !important; }
.kd-h-90px { height: 90px !important; }
.kd-h-95px { height: 95px !important; }
.kd-h-100px { height: 100px !important; }
.kd-h-150px { height: 150px !important; }
.kd-h-200px { height: 200px !important; }
.kd-h-250px { height: 250px !important; }
.kd-h-300px { height: 300px !important; }
.kd-h-350px { height: 350px !important; }
.kd-h-400px { height: 400px !important; }
.kd-h-450px { height: 450px !important; }
.kd-h-500px { height: 500px !important; }
.kd-h-550px { height: 550px !important; }
.kd-h-600px { height: 600px !important; }
.kd-h-650px { height: 650px !important; }
.kd-h-700px { height: 700px !important; }
.kd-h-750px { height: 750px !important; }
.kd-h-800px { height: 800px !important; }
.kd-h-850px { height: 850px !important; }
.kd-h-auto { height: auto !important; }

.kd-h-25 { height: 25% !important; }
.kd-h-50 { height: 50% !important; }
.kd-h-75 { height: 75% !important; }
.kd-h-100 { height: 100% !important; }
.kd-h-100vh { height: 100vh !important; }
.kd-min-h-100vh { min-height: 100vh !important; }
.kd-min-h-auto { min-height: auto !important; }

/* ===================================
    28. Screen Heights & Decorative Elements
====================================== */
.kd-extra-very-small-screen { height: 250px !important; }
.kd-extra-small-screen { height: 300px !important; }
.kd-small-screen { height: 400px !important; }
.kd-one-half-screen { height: 600px !important; }
.kd-one-third-screen { height: 700px !important; }
.kd-one-fourth-screen { height: 800px !important; }
.kd-one-fifth-screen { height: 900px !important; }
.kd-one-sixth-screen { height: 1000px !important; }
.kd-one-seventh-screen { height: 1200px !important; }

.kd-direction-ltr { direction: ltr; }
.kd-direction-rtl { direction: rtl; }

.kd-lr-container-line { position: relative; overflow: hidden; }
.kd-lr-container-line::after,.kd-lr-container-line::before {
    position: absolute; top: 0; margin-top: -150px; width: 1px; height: 180px; opacity: 0.5;
    content: ""; background: linear-gradient(180deg, transparent 0%, var(--base-color) 100%);
    z-index: 0; pointer-events: none;
}
.kd-lr-container-line::before { left: 0; -webkit-animation: kd-scroll1 15s ease-out infinite; animation: kd-scroll1 15s ease-out infinite; }
.kd-lr-container-line::after { right: 0; -webkit-animation: kd-scroll1 20s ease-out infinite; animation: kd-scroll1 20s ease-out infinite; }

@-webkit-keyframes kd-scroll1 { 0% { top: -10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes kd-scroll1 { 0% { top: -10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .kd-lr-container-line::before, .kd-lr-container-line::after { animation: none; } }

/* ===================================
    29. Spacing Utilities (Padding & Margin)
====================================== */
.kd-p-0px { padding: 0px !important; } .kd-p-5px { padding: 5px !important; } .kd-p-10px { padding: 10px !important; } .kd-p-15px { padding: 15px !important; } .kd-p-20px { padding: 20px !important; } .kd-p-25px { padding: 25px !important; } .kd-p-30px { padding: 30px !important; } .kd-p-35px { padding: 35px !important; } .kd-p-40px { padding: 40px !important; } .kd-p-45px { padding: 45px !important; } .kd-p-50px { padding: 50px !important; } .kd-p-55px { padding: 55px !important; } .kd-p-60px { padding: 60px !important; } .kd-p-65px { padding: 65px !important; } .kd-p-70px { padding: 70px !important; } .kd-p-80px { padding: 80px !important; } .kd-p-90px { padding: 90px !important; } .kd-p-100px { padding: 100px !important; }
.kd-p-1 { padding: 1% !important; } .kd-p-2 { padding: 2% !important; } .kd-p-3 { padding: 3% !important; } .kd-p-4 { padding: 4% !important; } .kd-p-5 { padding: 5% !important; } .kd-p-10 { padding: 10% !important; }

.kd-pt-0px { padding-top: 0px !important; } .kd-pt-5px { padding-top: 5px !important; } .kd-pt-10px { padding-top: 10px !important; } .kd-pt-15px { padding-top: 15px !important; } .kd-pt-20px { padding-top: 20px !important; } .kd-pt-25px { padding-top: 25px !important; } .kd-pt-30px { padding-top: 30px !important; } .kd-pt-35px { padding-top: 35px !important; } .kd-pt-40px { padding-top: 40px !important; } .kd-pt-45px { padding-top: 45px !important; } .kd-pt-50px { padding-top: 50px !important; } .kd-pt-60px { padding-top: 60px !important; } .kd-pt-70px { padding-top: 70px !important; } .kd-pt-80px { padding-top: 80px !important; } .kd-pt-90px { padding-top: 90px !important; } .kd-pt-100px { padding-top: 100px !important; } .kd-pt-120px { padding-top: 120px !important; } .kd-pt-150px { padding-top: 150px !important; }

.kd-pb-0px { padding-bottom: 0px !important; } .kd-pb-5px { padding-bottom: 5px !important; } .kd-pb-10px { padding-bottom: 10px !important; } .kd-pb-15px { padding-bottom: 15px !important; } .kd-pb-20px { padding-bottom: 20px !important; } .kd-pb-25px { padding-bottom: 25px !important; } .kd-pb-30px { padding-bottom: 30px !important; } .kd-pb-35px { padding-bottom: 35px !important; } .kd-pb-40px { padding-bottom: 40px !important; } .kd-pb-45px { padding-bottom: 45px !important; } .kd-pb-50px { padding-bottom: 50px !important; } .kd-pb-60px { padding-bottom: 60px !important; } .kd-pb-70px { padding-bottom: 70px !important; } .kd-pb-80px { padding-bottom: 80px !important; } .kd-pb-90px { padding-bottom: 90px !important; } .kd-pb-100px { padding-bottom: 100px !important; } .kd-pb-120px { padding-bottom: 120px !important; } .kd-pb-150px { padding-bottom: 150px !important; }

.kd-ps-0px { padding-left: 0px !important; } .kd-ps-5px { padding-left: 5px !important; } .kd-ps-10px { padding-left: 10px !important; } .kd-ps-15px { padding-left: 15px !important; } .kd-ps-20px { padding-left: 20px !important; } .kd-ps-25px { padding-left: 25px !important; } .kd-ps-30px { padding-left: 30px !important; } .kd-ps-40px { padding-left: 40px !important; } .kd-ps-50px { padding-left: 50px !important; }

.kd-pe-0px { padding-right: 0px !important; } .kd-pe-5px { padding-right: 5px !important; } .kd-pe-10px { padding-right: 10px !important; } .kd-pe-15px { padding-right: 15px !important; } .kd-pe-20px { padding-right: 20px !important; } .kd-pe-25px { padding-right: 25px !important; } .kd-pe-30px { padding-right: 30px !important; } .kd-pe-40px { padding-right: 40px !important; } .kd-pe-50px { padding-right: 50px !important; }

.kd-m-0px { margin: 0px !important; } .kd-m-5px { margin: 5px !important; } .kd-m-10px { margin: 10px !important; } .kd-m-15px { margin: 15px !important; } .kd-m-20px { margin: 20px !important; } .kd-m-25px { margin: 25px !important; } .kd-m-30px { margin: 30px !important; } .kd-m-40px { margin: 40px !important; } .kd-m-50px { margin: 50px !important; } .kd-m-auto { margin: auto !important; }

.kd-mt-0px { margin-top: 0px !important; } .kd-mt-5px { margin-top: 5px !important; } .kd-mt-10px { margin-top: 10px !important; } .kd-mt-15px { margin-top: 15px !important; } .kd-mt-20px { margin-top: 20px !important; } .kd-mt-25px { margin-top: 25px !important; } .kd-mt-30px { margin-top: 30px !important; } .kd-mt-35px { margin-top: 35px !important; } .kd-mt-40px { margin-top: 40px !important; } .kd-mt-45px { margin-top: 45px !important; } .kd-mt-50px { margin-top: 50px !important; } .kd-mt-60px { margin-top: 60px !important; } .kd-mt-70px { margin-top: 70px !important; } .kd-mt-80px { margin-top: 80px !important; } .kd-mt-90px { margin-top: 90px !important; } .kd-mt-100px { margin-top: 100px !important; }

.kd-mb-0px { margin-bottom: 0px !important; } .kd-mb-5px { margin-bottom: 5px !important; } .kd-mb-10px { margin-bottom: 10px !important; } .kd-mb-15px { margin-bottom: 15px !important; } .kd-mb-20px { margin-bottom: 20px !important; } .kd-mb-25px { margin-bottom: 25px !important; } .kd-mb-30px { margin-bottom: 30px !important; } .kd-mb-35px { margin-bottom: 35px !important; } .kd-mb-40px { margin-bottom: 40px !important; } .kd-mb-45px { margin-bottom: 45px !important; } .kd-mb-50px { margin-bottom: 50px !important; } .kd-mb-60px { margin-bottom: 60px !important; } .kd-mb-70px { margin-bottom: 70px !important; } .kd-mb-80px { margin-bottom: 80px !important; } .kd-mb-90px { margin-bottom: 90px !important; } .kd-mb-100px { margin-bottom: 100px !important; }

.kd-ms-0px { margin-left: 0px !important; } .kd-ms-5px { margin-left: 5px !important; } .kd-ms-10px { margin-left: 10px !important; } .kd-ms-15px { margin-left: 15px !important; } .kd-ms-20px { margin-left: 20px !important; } .kd-ms-30px { margin-left: 30px !important; } .kd-ms-40px { margin-left: 40px !important; } .kd-ms-auto { margin-left: auto !important; }

.kd-me-0px { margin-right: 0px !important; } .kd-me-5px { margin-right: 5px !important; } .kd-me-10px { margin-right: 10px !important; } .kd-me-15px { margin-right: 15px !important; } .kd-me-20px { margin-right: 20px !important; } .kd-me-30px { margin-right: 30px !important; } .kd-me-40px { margin-right: 40px !important; } .kd-me-auto { margin-right: auto !important; }

/* ===================================
    30. Positioning Utilities
====================================== */
.kd-top-0px { top: 0px; } .kd-top-1px { top: 1px; } .kd-top-5px { top: 5px; } .kd-top-10px { top: 10px; } .kd-top-15px { top: 15px; } .kd-top-20px { top: 20px; } .kd-top-25px { top: 25px; } .kd-top-30px { top: 30px; } .kd-top-40px { top: 40px; } .kd-top-50px { top: 50px; } .kd-top-60px { top: 60px; } .kd-top-70px { top: 70px; } .kd-top-80px { top: 80px; } .kd-top-90px { top: 90px; } .kd-top-100px { top: 100px; } .kd-top-150px { top: 150px; }

.kd-bottom-0px { bottom: 0px; } .kd-bottom-5px { bottom: 5px; } .kd-bottom-10px { bottom: 10px; } .kd-bottom-15px { bottom: 15px; } .kd-bottom-20px { bottom: 20px; } .kd-bottom-25px { bottom: 25px; } .kd-bottom-30px { bottom: 30px; } .kd-bottom-40px { bottom: 40px; } .kd-bottom-50px { bottom: 50px; } .kd-bottom-100px { bottom: 100px; }

.kd-left-0px { left: 0px; } .kd-left-5px { left: 5px; } .kd-left-10px { left: 10px; } .kd-left-15px { left: 15px; } .kd-left-20px { left: 20px; } .kd-left-30px { left: 30px; } .kd-left-40px { left: 40px; } .kd-left-50px { left: 50px; } .kd-left-100px { left: 100px; }

.kd-right-0px { right: 0px; } .kd-right-5px { right: 5px; } .kd-right-10px { right: 10px; } .kd-right-15px { right: 15px; } .kd-right-20px { right: 20px; } .kd-right-30px { right: 30px; } .kd-right-40px { right: 40px; } .kd-right-50px { right: 50px; } .kd-right-100px { right: 100px; }

.kd-top-minus-5px { top: -5px; } .kd-top-minus-10px { top: -10px; } .kd-top-minus-15px { top: -15px; } .kd-top-minus-20px { top: -20px; } .kd-top-minus-30px { top: -30px; } .kd-top-minus-40px { top: -40px; } .kd-top-minus-50px { top: -50px; }
.kd-bottom-minus-5px { bottom: -5px; } .kd-bottom-minus-10px { bottom: -10px; } .kd-bottom-minus-20px { bottom: -20px; } .kd-bottom-minus-30px { bottom: -30px; } .kd-bottom-minus-40px { bottom: -40px; } .kd-bottom-minus-50px { bottom: -50px; }
.kd-left-minus-5px { left: -5px; } .kd-left-minus-10px { left: -10px; } .kd-left-minus-20px { left: -20px; } .kd-left-minus-30px { left: -30px; } .kd-left-minus-40px { left: -40px; } .kd-left-minus-50px { left: -50px; }
.kd-right-minus-5px { right: -5px; } .kd-right-minus-10px { right: -10px; } .kd-right-minus-20px { right: -20px; } .kd-right-minus-30px { right: -30px; } .kd-right-minus-40px { right: -40px; } .kd-right-minus-50px { right: -50px; }

/* ===================================
    31. Font Weights & Typography Helpers
====================================== */
.kd-fw-100 { font-weight: 100 !important; } .kd-fw-200 { font-weight: 200 !important; } .kd-fw-300 { font-weight: 300 !important; } .kd-fw-400 { font-weight: 400 !important; } .kd-fw-500 { font-weight: 500 !important; } .kd-fw-600 { font-weight: 600 !important; } .kd-fw-700 { font-weight: 700 !important; } .kd-fw-800 { font-weight: 800 !important; } .kd-fw-900 { font-weight: 900 !important; }

/* ===================================
    32. Min-Height Utilities
====================================== */
.kd-min-h-100px { min-height: 100px !important; } .kd-min-h-150px { min-height: 150px !important; } .kd-min-h-200px { min-height: 200px !important; } .kd-min-h-250px { min-height: 250px !important; } .kd-min-h-300px { min-height: 300px !important; } .kd-min-h-350px { min-height: 350px !important; } .kd-min-h-400px { min-height: 400px !important; } .kd-min-h-450px { min-height: 450px !important; } .kd-min-h-500px { min-height: 500px !important; } .kd-min-h-550px { min-height: 550px !important; } .kd-min-h-600px { min-height: 600px !important; } .kd-min-h-650px { min-height: 650px !important; } .kd-min-h-700px { min-height: 700px !important; } .kd-min-h-750px { min-height: 750px !important; } .kd-min-h-800px { min-height: 800px !important; } .kd-min-h-850px { min-height: 850px !important; } .kd-min-h-900px { min-height: 900px !important; } .kd-min-h-950px { min-height: 950px !important; } .kd-min-h-1000px { min-height: 1000px !important; }

/* ===================================
    33. Grid System (Columns)
====================================== */

/* ===================================
    33. Grid System (Responsive Columns)
====================================== */

/* Base Column Structure */
[class*="kd-col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Mobile First - Default (XS: <576px) */
.kd-col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.kd-col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.kd-col-1 { flex: 0 0 auto; width: 8.333333%; }
.kd-col-2 { flex: 0 0 auto; width: 16.666667%; }
.kd-col-3 { flex: 0 0 auto; width: 25%; }
.kd-col-4 { flex: 0 0 auto; width: 33.333333%; }
.kd-col-5 { flex: 0 0 auto; width: 41.666667%; }
.kd-col-6 { flex: 0 0 auto; width: 50%; }
.kd-col-7 { flex: 0 0 auto; width: 58.333333%; }
.kd-col-8 { flex: 0 0 auto; width: 66.666667%; }
.kd-col-9 { flex: 0 0 auto; width: 75%; }
.kd-col-10 { flex: 0 0 auto; width: 83.333333%; }
.kd-col-11 { flex: 0 0 auto; width: 91.666667%; }
.kd-col-12 { flex: 0 0 auto; width: 100%; }

/* Offset Classes - Default */
.kd-offset-1 { margin-left: 8.333333%; }
.kd-offset-2 { margin-left: 16.666667%; }
.kd-offset-3 { margin-left: 25%; }
.kd-offset-4 { margin-left: 33.333333%; }
.kd-offset-5 { margin-left: 41.666667%; }
.kd-offset-6 { margin-left: 50%; }
.kd-offset-7 { margin-left: 58.333333%; }
.kd-offset-8 { margin-left: 66.666667%; }
.kd-offset-9 { margin-left: 75%; }
.kd-offset-10 { margin-left: 83.333333%; }
.kd-offset-11 { margin-left: 91.666667%; }

/* Order Classes - Default */
.kd-order-first { order: -1; }
.kd-order-last { order: 13; }
.kd-order-0 { order: 0; }
.kd-order-1 { order: 1; }
.kd-order-2 { order: 2; }
.kd-order-3 { order: 3; }
.kd-order-4 { order: 4; }
.kd-order-5 { order: 5; }
.kd-order-6 { order: 6; }

/* Small devices (SM: ≥576px) */
@media (min-width: 576px) {
    .kd-col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .kd-col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .kd-col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
    .kd-col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .kd-col-sm-3 { flex: 0 0 auto; width: 25%; }
    .kd-col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .kd-col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .kd-col-sm-6 { flex: 0 0 auto; width: 50%; }
    .kd-col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .kd-col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .kd-col-sm-9 { flex: 0 0 auto; width: 75%; }
    .kd-col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .kd-col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .kd-col-sm-12 { flex: 0 0 auto; width: 100%; }

    .kd-offset-sm-0 { margin-left: 0; }
    .kd-offset-sm-1 { margin-left: 8.333333%; }
    .kd-offset-sm-2 { margin-left: 16.666667%; }
    .kd-offset-sm-3 { margin-left: 25%; }
    .kd-offset-sm-4 { margin-left: 33.333333%; }
    .kd-offset-sm-5 { margin-left: 41.666667%; }
    .kd-offset-sm-6 { margin-left: 50%; }
    .kd-offset-sm-7 { margin-left: 58.333333%; }
    .kd-offset-sm-8 { margin-left: 66.666667%; }
    .kd-offset-sm-9 { margin-left: 75%; }
    .kd-offset-sm-10 { margin-left: 83.333333%; }
    .kd-offset-sm-11 { margin-left: 91.666667%; }

    .kd-order-sm-first { order: -1; }
    .kd-order-sm-last { order: 13; }
    .kd-order-sm-0 { order: 0; }
    .kd-order-sm-1 { order: 1; }
    .kd-order-sm-2 { order: 2; }
    .kd-order-sm-3 { order: 3; }
    .kd-order-sm-4 { order: 4; }
    .kd-order-sm-5 { order: 5; }
    .kd-order-sm-6 { order: 6; }
}

/* Medium devices (MD: ≥768px) */
@media (min-width: 768px) {
    .kd-col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .kd-col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .kd-col-md-1 { flex: 0 0 auto; width: 8.333333%; }
    .kd-col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .kd-col-md-3 { flex: 0 0 auto; width: 25%; }
    .kd-col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .kd-col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .kd-col-md-6 { flex: 0 0 auto; width: 50%; }
    .kd-col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .kd-col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .kd-col-md-9 { flex: 0 0 auto; width: 75%; }
    .kd-col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .kd-col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .kd-col-md-12 { flex: 0 0 auto; width: 100%; }

    .kd-offset-md-0 { margin-left: 0; }
    .kd-offset-md-1 { margin-left: 8.333333%; }
    .kd-offset-md-2 { margin-left: 16.666667%; }
    .kd-offset-md-3 { margin-left: 25%; }
    .kd-offset-md-4 { margin-left: 33.333333%; }
    .kd-offset-md-5 { margin-left: 41.666667%; }
    .kd-offset-md-6 { margin-left: 50%; }
    .kd-offset-md-7 { margin-left: 58.333333%; }
    .kd-offset-md-8 { margin-left: 66.666667%; }
    .kd-offset-md-9 { margin-left: 75%; }
    .kd-offset-md-10 { margin-left: 83.333333%; }
    .kd-offset-md-11 { margin-left: 91.666667%; }

    .kd-order-md-first { order: -1; }
    .kd-order-md-last { order: 13; }
    .kd-order-md-0 { order: 0; }
    .kd-order-md-1 { order: 1; }
    .kd-order-md-2 { order: 2; }
    .kd-order-md-3 { order: 3; }
    .kd-order-md-4 { order: 4; }
    .kd-order-md-5 { order: 5; }
    .kd-order-md-6 { order: 6; }
}

/* Large devices (LG: ≥992px) */
@media (min-width: 992px) {
    .kd-col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .kd-col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .kd-col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .kd-col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .kd-col-lg-3 { flex: 0 0 auto; width: 25%; }
    .kd-col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .kd-col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .kd-col-lg-6 { flex: 0 0 auto; width: 50%; }
    .kd-col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .kd-col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .kd-col-lg-9 { flex: 0 0 auto; width: 75%; }
    .kd-col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .kd-col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .kd-col-lg-12 { flex: 0 0 auto; width: 100%; }

    .kd-offset-lg-0 { margin-left: 0; }
    .kd-offset-lg-1 { margin-left: 8.333333%; }
    .kd-offset-lg-2 { margin-left: 16.666667%; }
    .kd-offset-lg-3 { margin-left: 25%; }
    .kd-offset-lg-4 { margin-left: 33.333333%; }
    .kd-offset-lg-5 { margin-left: 41.666667%; }
    .kd-offset-lg-6 { margin-left: 50%; }
    .kd-offset-lg-7 { margin-left: 58.333333%; }
    .kd-offset-lg-8 { margin-left: 66.666667%; }
    .kd-offset-lg-9 { margin-left: 75%; }
    .kd-offset-lg-10 { margin-left: 83.333333%; }
    .kd-offset-lg-11 { margin-left: 91.666667%; }

    .kd-order-lg-first { order: -1; }
    .kd-order-lg-last { order: 13; }
    .kd-order-lg-0 { order: 0; }
    .kd-order-lg-1 { order: 1; }
    .kd-order-lg-2 { order: 2; }
    .kd-order-lg-3 { order: 3; }
    .kd-order-lg-4 { order: 4; }
    .kd-order-lg-5 { order: 5; }
    .kd-order-lg-6 { order: 6; }
}

/* Extra large devices (XL: ≥1200px) */
@media (min-width: 1200px) {
    .kd-col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .kd-col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .kd-col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
    .kd-col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .kd-col-xl-3 { flex: 0 0 auto; width: 25%; }
    .kd-col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .kd-col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .kd-col-xl-6 { flex: 0 0 auto; width: 50%; }
    .kd-col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .kd-col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .kd-col-xl-9 { flex: 0 0 auto; width: 75%; }
    .kd-col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .kd-col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .kd-col-xl-12 { flex: 0 0 auto; width: 100%; }

    .kd-offset-xl-0 { margin-left: 0; }
    .kd-offset-xl-1 { margin-left: 8.333333%; }
    .kd-offset-xl-2 { margin-left: 16.666667%; }
    .kd-offset-xl-3 { margin-left: 25%; }
    .kd-offset-xl-4 { margin-left: 33.333333%; }
    .kd-offset-xl-5 { margin-left: 41.666667%; }
    .kd-offset-xl-6 { margin-left: 50%; }
    .kd-offset-xl-7 { margin-left: 58.333333%; }
    .kd-offset-xl-8 { margin-left: 66.666667%; }
    .kd-offset-xl-9 { margin-left: 75%; }
    .kd-offset-xl-10 { margin-left: 83.333333%; }
    .kd-offset-xl-11 { margin-left: 91.666667%; }

    .kd-order-xl-first { order: -1; }
    .kd-order-xl-last { order: 13; }
    .kd-order-xl-0 { order: 0; }
    .kd-order-xl-1 { order: 1; }
    .kd-order-xl-2 { order: 2; }
    .kd-order-xl-3 { order: 3; }
    .kd-order-xl-4 { order: 4; }
    .kd-order-xl-5 { order: 5; }
    .kd-order-xl-6 { order: 6; }
}

/* Extra extra large devices (XXL: ≥1400px) */
@media (min-width: 1400px) {
    .kd-col-xxl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .kd-col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .kd-col-xxl-1 { flex: 0 0 auto; width: 8.333333%; }
    .kd-col-xxl-2 { flex: 0 0 auto; width: 16.666667%; }
    .kd-col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .kd-col-xxl-4 { flex: 0 0 auto; width: 33.333333%; }
    .kd-col-xxl-5 { flex: 0 0 auto; width: 41.666667%; }
    .kd-col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .kd-col-xxl-7 { flex: 0 0 auto; width: 58.333333%; }
    .kd-col-xxl-8 { flex: 0 0 auto; width: 66.666667%; }
    .kd-col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .kd-col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
    .kd-col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
    .kd-col-xxl-12 { flex: 0 0 auto; width: 100%; }

    .kd-offset-xxl-0 { margin-left: 0; }
    .kd-offset-xxl-1 { margin-left: 8.333333%; }
    .kd-offset-xxl-2 { margin-left: 16.666667%; }
    .kd-offset-xxl-3 { margin-left: 25%; }
    .kd-offset-xxl-4 { margin-left: 33.333333%; }
    .kd-offset-xxl-5 { margin-left: 41.666667%; }
    .kd-offset-xxl-6 { margin-left: 50%; }
    .kd-offset-xxl-7 { margin-left: 58.333333%; }
    .kd-offset-xxl-8 { margin-left: 66.666667%; }
    .kd-offset-xxl-9 { margin-left: 75%; }
    .kd-offset-xxl-10 { margin-left: 83.333333%; }
    .kd-offset-xxl-11 { margin-left: 91.666667%; }

    .kd-order-xxl-first { order: -1; }
    .kd-order-xxl-last { order: 13; }
    .kd-order-xxl-0 { order: 0; }
    .kd-order-xxl-1 { order: 1; }
    .kd-order-xxl-2 { order: 2; }
    .kd-order-xxl-3 { order: 3; }
    .kd-order-xxl-4 { order: 4; }
    .kd-order-xxl-5 { order: 5; }
    .kd-order-xxl-6 { order: 6; }
}

/* ===================================
    Usage Examples:
    
    Basic 2-column layout:
    <div class="kd-row">
        <div class="kd-col-6">Half width</div>
        <div class="kd-col-6">Half width</div>
    </div>
    
    Responsive layout:
    <div class="kd-row">
        <div class="kd-col-12 kd-col-md-6 kd-col-lg-4">
            Mobile: 100%, Tablet: 50%, Desktop: 33.33%
        </div>
    </div>
    
    With offset:
    <div class="kd-row">
        <div class="kd-col-6 kd-offset-3">Centered 50% width</div>
    </div>
    
    With order:
    <div class="kd-row">
        <div class="kd-col-6 kd-order-2">Second on mobile</div>
        <div class="kd-col-6 kd-order-1">First on mobile</div>
    </div>
    
    Auto width:
    <div class="kd-row">
        <div class="kd-col-auto">Auto width based on content</div>
        <div class="kd-col">Fill remaining space</div>
    </div>
====================================== */

/* ===================================
    34. Buttons & Action Elements
====================================== */
.kd-btn {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--radius-4); padding: 12px 28px;
    font-size: 14px; font-family: var(--secondary-font); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; line-height: 1.5; position: relative; overflow: hidden; z-index: 1;
    text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.kd-btn:focus,.kd-btn:active { outline: none; box-shadow: none; }
.kd-btn i { font-size: 1.1em; line-height: 0; }
.kd-btn.kd-btn-icon-right i { margin-left: 8px; }
.kd-btn.kd-btn-icon-left i { margin-right: 8px; }

.kd-btn.kd-btn-very-small { padding: 6px 18px; font-size: 11px; }
.kd-btn.kd-btn-small { padding: 9px 24px; font-size: 12px; }
.kd-btn.kd-btn-medium { padding: 12px 32px; font-size: 14px; }
.kd-btn.kd-btn-large { padding: 16px 40px; font-size: 16px; }
.kd-btn.kd-btn-extra-large { padding: 20px 50px; font-size: 18px; }

.kd-btn.kd-btn-rounded { border-radius: 50px !important; }
.kd-btn.kd-btn-sharp { border-radius: 0px !important; }
.kd-btn.kd-btn-round-edge { border-radius: 8px !important; }

.kd-btn.kd-btn-base-color { background-color: var(--base-color); color: var(--white); border-color: var(--base-color); }
.kd-btn.kd-btn-base-color:hover { background-color: var(--dark-gray); border-color: var(--dark-gray); color: var(--white); }

.kd-btn.kd-btn-dark-gray { background-color: var(--dark-gray); color: var(--white); border-color: var(--dark-gray); }
.kd-btn.kd-btn-dark-gray:hover { background-color: var(--base-color); border-color: var(--base-color); color: var(--white); }

.kd-btn.kd-btn-white { background-color: var(--white); color: var(--dark-gray); border-color: var(--white); }
.kd-btn.kd-btn-white:hover { background-color: var(--dark-gray); border-color: var(--dark-gray); color: var(--white); }

.kd-btn.kd-btn-black { background-color: var(--black); color: var(--white); border-color: var(--black); }
.kd-btn.kd-btn-black:hover { background-color: var(--base-color); border-color: var(--base-color); color: var(--white); }

.kd-btn.kd-btn-outline-base-color { background-color: transparent; color: var(--base-color); border-color: var(--base-color); }
.kd-btn.kd-btn-outline-base-color:hover { background-color: var(--base-color); color: var(--white); }

.kd-btn.kd-btn-outline-dark-gray { background-color: transparent; color: var(--dark-gray); border-color: var(--dark-gray); }
.kd-btn.kd-btn-outline-dark-gray:hover { background-color: var(--dark-gray); color: var(--white); }

.kd-btn.kd-btn-outline-white { background-color: transparent; color: var(--white); border-color: var(--white); }
.kd-btn.kd-btn-outline-white:hover { background-color: var(--white); color: var(--dark-gray); }

.kd-btn.kd-btn-transparent-base-color { background: transparent; border-color: transparent; color: var(--base-color); padding-left: 0; padding-right: 0; }
.kd-btn.kd-btn-transparent-base-color:hover { color: var(--dark-gray); }

.kd-btn.kd-btn-transparent-dark-gray { background: transparent; border-color: transparent; color: var(--dark-gray); padding-left: 0; padding-right: 0; }
.kd-btn.kd-btn-transparent-dark-gray:hover { color: var(--base-color); }

.kd-btn.kd-btn-gradient-base { background-image: linear-gradient(to right, var(--base-color), var(--slate-blue), var(--base-color)); background-size: 200% auto; color: var(--white); border: none; }
.kd-btn.kd-btn-gradient-base:hover { background-position: right center; }

.kd-btn.kd-btn-gradient-purple-pink { background-image: linear-gradient(to right, #8b14b1, #d53d6e, #8b14b1); background-size: 200% auto; color: var(--white); border: none; }
.kd-btn.kd-btn-gradient-purple-pink:hover { background-position: right center; }

.kd-btn.kd-btn-gradient-sky-blue-pink { background-image: linear-gradient(to right, #5758df, #f77991, #5758df); background-size: 200% auto; color: var(--white); border: none; }
.kd-btn.kd-btn-gradient-sky-blue-pink:hover { background-position: right center; }

.kd-btn.kd-btn-glass {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white);
}
.kd-btn.kd-btn-glass:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); }

.kd-btn.kd-btn-box-shadow { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }
.kd-btn.kd-btn-box-shadow:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); transform: translateY(-2px); }

.kd-btn.kd-btn-switch-text { padding: 0; }
.kd-btn.kd-btn-switch-text > span {
    display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;
    padding: 12px 28px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kd-btn.kd-btn-switch-text:before {
    content: attr(data-back); position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; background-color: var(--dark-gray);
    color: var(--white); transition: top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kd-btn.kd-btn-switch-text:hover > span { transform: translateY(-100%); }
.kd-btn.kd-btn-switch-text:hover:before { top: 0; }

.kd-btn.kd-btn-link-gradient {
    padding: 0 0 4px; border-radius: 0; border: none; background: transparent; color: var(--dark-gray); justify-content: flex-start;
}
.kd-btn.kd-btn-link-gradient:after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px;
    background-color: var(--base-color); transition: width 0.3s ease;
}
.kd-btn.kd-btn-link-gradient:hover:after { width: 100%; }
.kd-btn.kd-btn-link-gradient:hover { color: var(--base-color); }

.kd-btn.kd-btn-expand-ltr { background-color: transparent; border-color: var(--dark-gray); color: var(--dark-gray); transition: color 0.4s ease; }
.kd-btn.kd-btn-expand-ltr:before {
    content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: var(--dark-gray); z-index: -1; transition: width 0.4s ease;
}
.kd-btn.kd-btn-expand-ltr:hover { color: var(--white); border-color: var(--dark-gray); }
.kd-btn.kd-btn-expand-ltr:hover:before { width: 100%; }

.kd-btn.kd-with-rounded { padding-right: 55px; position: relative; }
.kd-btn.kd-with-rounded > span {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
    background-color: var(--white); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: var(--base-color); box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease;
}
.kd-btn.kd-with-rounded:hover > span { background-color: var(--base-color); color: var(--white); right: 8px; }

.kd-btn-dual { display: flex; align-items: center; gap: 15px; }
@media (max-width: 575px) { .kd-btn-dual { flex-direction: column; width: 100%; } .kd-btn-dual .kd-btn { width: 100%; } }

/* ===================================
    35. Footer & Copyright Area
====================================== */
footer {
    padding-top: 110px; padding-bottom: 110px; background-color: var(--white);
    position: relative; z-index: 1; font-size: 15px; line-height: 28px;
}
footer.kd-half-footer { padding-top: 70px; padding-bottom: 70px; }
footer.kd-big-footer { padding-top: 140px; padding-bottom: 140px; }

footer .kd-footer-logo { margin-bottom: 30px; display: block; }
footer .kd-footer-logo img { max-height: 80px; width: auto; }

footer ul { padding: 0; list-style: none; margin: 0; }
footer ul li { margin-bottom: 8px; position: relative; }
footer ul li:last-child { margin-bottom: 0; }
footer ul li a { color: var(--medium-gray); display: inline-block; transition: all 0.3s ease-in-out; }
footer ul li a:hover { color: var(--base-color); transform: translateX(5px); }

footer .kd-elements-social ul { display: flex; flex-wrap: wrap; align-items: center; }
footer .kd-elements-social.kd-social-icon-style-01 li,footer .kd-elements-social.kd-social-icon-style-02 li,footer .kd-elements-social.kd-social-icon-style-05 li,footer .kd-elements-social.kd-social-icon-style-08 li {
    margin: 0 15px 0 0; padding: 0;
}
footer .kd-elements-social li:last-child { margin-right: 0 !important; }
footer .kd-elements-social li a { width: auto; height: auto; display: inline-block; color: var(--medium-gray); font-size: 16px; }
footer .kd-elements-social li a:hover { color: var(--base-color); transform: none; }

footer .kd-elements-social.kd-social-icon-style-02 li a {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background-color: var(--very-light-gray); border-radius: 100%;
}
footer .kd-elements-social.kd-social-icon-style-02 li a:hover { background-color: var(--base-color); color: var(--white); }

footer .kd-newsletter-style-05 { position: relative; margin-top: 10px; }
footer .kd-newsletter-style-05 form { position: relative; }
footer .kd-newsletter-style-05 .kd-input-small {
    font-size: 14px; padding-right: 50px; background-color: var(--very-light-gray);
    border-color: transparent; border-radius: var(--radius-4); height: 46px;
}
footer .kd-newsletter-style-05 .kd-input-small:focus { background-color: var(--white); border-color: var(--extra-medium-gray); }
footer .kd-newsletter-style-05 .kd-btn-submit {
    position: absolute; right: 0; top: 0; height: 100%; width: 50px; background: transparent;
    border: none; color: var(--dark-gray); cursor: pointer; transition: color 0.3s;
    font-size: 18px; display: flex; align-items: center; justify-content: center;
}
footer .kd-newsletter-style-05 .kd-btn-submit:hover { color: var(--base-color); }

footer .kd-footer-navbar { display: flex; flex-wrap: wrap; gap: 20px; }
footer .kd-footer-navbar li { display: inline-block; margin-bottom: 0; }
footer .kd-footer-navbar .kd-nav-link { color: var(--medium-gray); padding: 0; font-weight: 500; }
footer .kd-footer-navbar .kd-nav-link:hover,footer .kd-footer-navbar .kd-nav-link:focus { color: var(--base-color); }
footer .kd-footer-navbar li:first-child a { padding-left: 0; }
footer .kd-footer-navbar li:last-child a { padding-right: 0; }

.kd-footer-dark { background-color: var(--dark-slate-blue); color: var(--aluminium-gray); }
.kd-footer-dark h1,.kd-footer-dark h2,.kd-footer-dark h3,.kd-footer-dark h4,.kd-footer-dark h5,.kd-footer-dark h6 { color: var(--white); }
.kd-footer-dark p,.kd-footer-dark a,.kd-footer-dark .kd-nav-link { color: var(--aluminium-gray); }
.kd-footer-dark a:hover,.kd-footer-dark .kd-nav-link:hover { color: var(--white); }
.kd-footer-dark .kd-newsletter-style-05 .kd-input-small { background-color: rgba(255, 255, 255, 0.05); color: var(--white); }
.kd-footer-dark .kd-newsletter-style-05 .kd-input-small:focus { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); }
.kd-footer-dark .kd-newsletter-style-05 .kd-btn-submit { color: var(--white); }
.kd-footer-dark .kd-elements-social li a { color: var(--aluminium-gray); }
.kd-footer-dark .kd-elements-social li a:hover { color: var(--white); }
.kd-footer-dark .kd-footer-bottom { border-top-color: rgba(255, 255, 255, 0.05); }

.kd-footer-light { background-color: var(--white); color: var(--medium-gray); }
.kd-footer-light a:hover { color: var(--base-color); }
.kd-footer-light .kd-footer-bottom { border-top-color: var(--extra-medium-gray); }

.kd-main-content {
    position: relative; z-index: 2; background-color: var(--white); width: 100%;
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); min-height: 100vh;
}
.kd-footer-sticky { position: -webkit-sticky; position: sticky; bottom: 0; left: 0; width: 100%; z-index: 0; }

@media (max-width: 991px) {
    footer, footer.kd-big-footer, footer.kd-half-footer { padding-top: 60px; padding-bottom: 60px; }
    footer .kd-footer-logo { margin-bottom: 20px; }
    .kd-footer-navbar { justify-content: center; margin-top: 15px; }
    .kd-footer-bottom { text-align: center; }
}

/* ===================================
    36. Advanced Typography Extras
====================================== */
::selection { background-color: var(--base-color); color: var(--white); text-shadow: none; }
::-moz-selection { background-color: var(--base-color); color: var(--white); text-shadow: none; }

mark,.kd-mark { padding: 0.2em; background-color: rgba(255, 234, 35, 0.4); color: inherit; border-radius: var(--radius-2); }

blockquote {
    padding: 40px; margin: 0 0 40px; background-color: var(--very-light-gray);
    border-left: 4px solid var(--base-color); border-radius: 0 var(--radius-6) var(--radius-6) 0; position: relative; z-index: 1;
}
blockquote::before {
    content: "“"; font-family: serif; font-size: 120px; line-height: 1; color: rgba(0, 0, 0, 0.05); position: absolute; top: -10px; left: 20px; z-index: -1;
}
blockquote p { font-size: 18px; font-style: italic; color: var(--dark-gray); margin-bottom: 0; line-height: 1.6; }
blockquote cite { display: block; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--base-color); text-transform: uppercase; letter-spacing: 1px; }

.kd-dropcap::first-letter { float: left; font-size: 50px; line-height: 0.8; margin-right: 15px; margin-top: 5px; color: var(--base-color); font-weight: 700; }
.kd-dropcap-boxed::first-letter {
    float: left; font-size: 30px; line-height: 1; padding: 15px; margin-right: 15px; margin-top: 5px;
    background-color: var(--base-color); color: var(--white); border-radius: var(--radius-4); font-weight: 700;
}

pre {
    display: block; padding: 20px; margin: 0 0 30px; font-size: 14px; line-height: 1.6; color: #abb2bf;
    background-color: #282c34; border-radius: var(--radius-6); overflow-x: auto;
    font-family: "Fira Code", "Courier New", monospace; position: relative;
}
pre::before { content: "• • •"; color: rgba(255,255,255,0.2); font-size: 24px; position: absolute; top: -12px; right: 15px; letter-spacing: 2px; }
code {
    font-family: "Fira Code", "Courier New", monospace; color: var(--base-color);
    background-color: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
}
pre code { background-color: transparent; color: inherit; padding: 0; border-radius: 0; }

ul.kd-list-style-check { list-style: none; padding: 0; }
ul.kd-list-style-check li { position: relative; padding-left: 30px; margin-bottom: 10px; }
ul.kd-list-style-check li::before {
    content: ""; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 2px; color: var(--green); font-size: 18px; font-weight: bold;
}

ol.kd-list-style-number-modern { list-style: none; counter-reset: my-counter; padding: 0; }
ol.kd-list-style-number-modern li { counter-increment: my-counter; position: relative; padding-left: 40px; margin-bottom: 15px; }
ol.kd-list-style-number-modern li::before {
    content: counter(my-counter); position: absolute; left: 0; top: 0; width: 28px; height: 28px;
    background-color: var(--base-color); color: var(--white); border-radius: 50%;
    text-align: center; line-height: 28px; font-size: 12px; font-weight: 600;
}

/* ===================================
    37. Modern Tables & Data Visualization
====================================== */
.kd-table-wrapper {
    overflow-x: auto; border-radius: var(--radius-6); box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px; background-color: var(--white);
}
.kd-table { width: 100%; margin-bottom: 0; color: var(--medium-gray); vertical-align: middle; border-collapse: collapse; }
.kd-table th {
    font-family: var(--secondary-font); font-weight: 600; text-transform: uppercase; font-size: 13px;
    letter-spacing: 0.5px; color: var(--dark-gray); background-color: var(--very-light-gray);
    padding: 15px 20px; border-bottom: 2px solid var(--extra-medium-gray); white-space: nowrap;
}
.kd-table td { padding: 15px 20px; border-bottom: 1px solid var(--extra-medium-gray); font-size: 15px; }
.kd-table tr:last-child td { border-bottom: none; }
.kd-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.02); }
.kd-table-hover tbody tr { transition: background-color 0.2s ease; }
.kd-table-hover tbody tr:hover { background-color: rgba(var(--base-color-rgb), 0.05); }

/* ===================================
    38. Object Fit & Aspect Ratio Utilities
====================================== */
.kd-object-fit-cover { width: 100%; height: 100%; object-fit: cover; }
.kd-object-fit-contain { width: 100%; height: 100%; object-fit: contain; }

.kd-ratio { position: relative; width: 100%; }
.kd-ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.kd-ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.kd-ratio-1x1 { --bs-aspect-ratio: 100%; }
.kd-ratio-4x3 { --bs-aspect-ratio: 75%; }
.kd-ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.kd-ratio-21x9 { --bs-aspect-ratio: 42.8571428571%; }
.kd-ratio-3x4 { --bs-aspect-ratio: 133.33%; }

/* ===================================
    39. Custom Scrollbar Styling
====================================== */
* { scrollbar-width: thin; scrollbar-color: var(--medium-gray) var(--very-light-gray); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--very-light-gray); }
::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 10px; border: 2px solid var(--very-light-gray); }
::-webkit-scrollbar-thumb:hover { background-color: var(--base-color); }

/* ===================================
    40. Base Header Structure
====================================== */
header { position: relative; z-index: 1000; width: 100%; background-color: transparent; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.kd-navbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20px 0; transition: padding 0.3s ease; }

header.kd-sticky {
    position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 5px 30px rgba(0,0,0,0.05);
    padding-top: 0; padding-bottom: 0; animation: kd-headerSlideDown 0.5s ease;
}
header.kd-sticky .kd-navbar { padding: 15px 0; }

header.kd-header-absolute { position: absolute; top: 0; left: 0; width: 100%; }
header.kd-header-dark { background-color: var(--dark-gray); }
header.kd-header-dark.kd-sticky { background-color: rgba(35, 35, 35, 0.95); border-bottom: 1px solid rgba(255,255,255,0.05); }

.kd-navbar-toggler { border: none; background: transparent; padding: 0; width: 30px; height: 20px; position: relative; cursor: pointer; display: none; }
.kd-navbar-toggler span { display: block; width: 100%; height: 2px; background-color: var(--dark-gray); position: absolute; left: 0; transition: all 0.3s ease; }
.kd-navbar-toggler span:nth-child(1) { top: 0; }
.kd-navbar-toggler span:nth-child(2) { top: 9px; }
.kd-navbar-toggler span:nth-child(3) { top: 18px; }
.kd-navbar-toggler.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.kd-navbar-toggler.active span:nth-child(2) { opacity: 0; }
.kd-navbar-toggler.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

@media (max-width: 991px) { .kd-navbar-toggler { display: block; } }
@keyframes kd-headerSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ===================================
    41. Interaction & Cursor Utilities
====================================== */
.kd-cursor-pointer { cursor: pointer !important; }
.kd-cursor-default { cursor: default !important; }
.kd-cursor-move { cursor: move !important; }
.kd-cursor-not-allowed { cursor: not-allowed !important; }
.kd-cursor-wait { cursor: wait !important; }
.kd-cursor-zoom-in { cursor: zoom-in !important; }
.kd-cursor-zoom-out { cursor: zoom-out !important; }

.kd-user-select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.kd-user-select-all { -webkit-user-select: all; user-select: all; }

.kd-pointer-events-none { pointer-events: none !important; }
.kd-pointer-events-auto { pointer-events: auto !important; }
.kd-pointer-events-all { pointer-events: auto !important; }

/* ===================================
    42. Display, Flexbox & Grid Utilities
====================================== */
.kd-d-none { display: none !important; }
.kd-d-inline { display: inline !important; }
.kd-d-inline-block { display: inline-block !important; }
.kd-d-block { display: block !important; }
.kd-d-flex { display: flex !important; }
.kd-d-inline-flex { display: inline-flex !important; }
.kd-d-grid { display: grid !important; }

.kd-flex-row { flex-direction: row !important; }
.kd-flex-column { flex-direction: column !important; }
.kd-flex-wrap { flex-wrap: wrap !important; }
.kd-flex-nowrap { flex-wrap: nowrap !important; }

.kd-justify-content-start { justify-content: flex-start !important; }
.kd-justify-content-end { justify-content: flex-end !important; }
.kd-justify-content-center { justify-content: center !important; }
.kd-justify-content-between { justify-content: space-between !important; }
.kd-justify-content-around { justify-content: space-around !important; }

.kd-align-items-start { align-items: flex-start !important; }
.kd-align-items-end { align-items: flex-end !important; }
.kd-align-items-center { align-items: center !important; }
.kd-align-items-baseline { align-items: baseline !important; }
.kd-align-items-stretch { align-items: stretch !important; }

.kd-gap-0 { gap: 0 !important; }
.kd-gap-1 { gap: 0.25rem !important; }
.kd-gap-2 { gap: 0.5rem !important; }
.kd-gap-3 { gap: 1rem !important; }
.kd-gap-4 { gap: 1.5rem !important; }
.kd-gap-5 { gap: 3rem !important; }

@media (min-width: 576px) {
    .kd-d-sm-none { display: none !important; }
    .kd-d-sm-block { display: block !important; }
    .kd-d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .kd-d-md-none { display: none !important; }
    .kd-d-md-block { display: block !important; }
    .kd-d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .kd-d-lg-none { display: none !important; }
    .kd-d-lg-block { display: block !important; }
    .kd-d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
    .kd-d-xl-none { display: none !important; }
    .kd-d-xl-block { display: block !important; }
    .kd-d-xl-flex { display: flex !important; }
}

/* ===================================
    43. Print Styles
====================================== */
@media print {
    .kd-no-print { display: none !important; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
    header, footer, .kd-video-icon-box { display: none; }
}