/* =========================================================
   GLOBAL CSS FRAMEWORK
   HELLO ELEMENTOR CHILD THEME
   ELEMENTOR CONTAINER BASED
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    /* COLORS */

    --color-primary: #1A1A1A;
    --color-secondary: #555555;
    --color-accent: #C89B3C;

    --color-heading: #1A1A1A;
    --color-text: #555555;
    --color-link: #1A1A1A;

    --color-background: #FFFFFF;
    --color-background-light: #F7F7F7;
    --color-background-dark: #1A1A1A;

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-border: #E5E5E5;

    --color-success: #2E7D32;
    --color-warning: #ED6C02;
    --color-error: #C62828;


    /* TYPOGRAPHY */

    --font-primary: "Inter", sans-serif;
    --font-heading: "Inter", sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* CONTAINERS */

    --container-width: 1200px;
    --container-wide: 1400px;
    --container-narrow: 900px;


    /* SECTION SPACING */

    --section-padding: 80px;
    --section-padding-lg: 100px;
    --section-padding-xl: 120px;

    --section-padding-sm: 60px;
    --section-padding-xs: 40px;


    /* SPACING */

    --space-5: 5px;
    --space-10: 10px;
    --space-20: 20px;
    --space-30: 30px;
    --space-40: 40px;
    --space-60: 60px;
    --space-80: 80px;
    --space-100: 100px;


    /* BORDER */

    --border-width: 1px;
    --border-color: #E5E5E5;


    /* RADIUS */

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 999px;


    /* SHADOW */

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);


    /* TRANSITION */

    --transition: all 0.3s ease;
}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    color: var(--color-text);
    background: var(--color-background);
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font-family: inherit;
}


/* =========================================================
   03. ELEMENTOR CONTAINER BASE
   ========================================================= */

/*
   Basic container helper classes.
   Apply these through:
   Elementor → Container → Advanced → CSS Classes
*/


.container {
    width: 100%;
    max-width: var(--container-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   04. SECTION SPACING
   ========================================================= */

.section {
    padding-top: var(--section-padding) !important;
    padding-bottom: var(--section-padding) !important;
}

.section-lg {
    padding-top: var(--section-padding-lg) !important;
    padding-bottom: var(--section-padding-lg) !important;
}

.section-xl {
    padding-top: var(--section-padding-xl) !important;
    padding-bottom: var(--section-padding-xl) !important;
}

.section-sm {
    padding-top: var(--section-padding-sm) !important;
    padding-bottom: var(--section-padding-sm) !important;
}

.section-xs {
    padding-top: var(--section-padding-xs) !important;
    padding-bottom: var(--section-padding-xs) !important;
}


/* =========================================================
   05. HORIZONTAL PADDING
   ELEMENTOR CONTAINER SAFE
   ========================================================= */

/*
   IMPORTANT:
   These classes are designed specifically for Elementor
   containers.

   Desktop:
   padding-x     = 40px
   padding-x-sm  = 20px
   padding-x-lg  = 60px
*/


.elementor-element.padding-x {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.elementor-element.padding-x-sm {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.elementor-element.padding-x-lg {
    padding-left: 60px !important;
    padding-right: 60px !important;
}


/* =========================================================
   06. VERTICAL PADDING
   ========================================================= */

.elementor-element.padding-y {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.elementor-element.padding-y-sm {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.elementor-element.padding-y-lg {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}


/* =========================================================
   07. FULL PADDING
   ========================================================= */

.elementor-element.p-0 {
    padding: 0 !important;
}

.elementor-element.p-5 {
    padding: 5px !important;
}

.elementor-element.p-10 {
    padding: 10px !important;
}

.elementor-element.p-20 {
    padding: 20px !important;
}

.elementor-element.p-30 {
    padding: 30px !important;
}

.elementor-element.p-40 {
    padding: 40px !important;
}

.elementor-element.p-60 {
    padding: 60px !important;
}

.elementor-element.p-80 {
    padding: 80px !important;
}


/* =========================================================
   08. MARGIN
   ========================================================= */

.mt-0 {
    margin-top: 0 !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-60 {
    margin-top: 60px !important;
}


.mb-0 {
    margin-bottom: 0 !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}


.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   09. GAP
   ========================================================= */

.gap-10 {
    gap: 10px !important;
}

.gap-20 {
    gap: 20px !important;
}

.gap-30 {
    gap: 30px !important;
}

.gap-40 {
    gap: 40px !important;
}

.gap-60 {
    gap: 60px !important;
}


/* =========================================================
   10. FLEX
   ========================================================= */

.flex {
    display: flex !important;
}

.flex-column {
    display: flex !important;
    flex-direction: column !important;
}

.flex-row {
    display: flex !important;
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}


.align-center {
    align-items: center !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}


.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}


/* =========================================================
   11. TEXT ALIGNMENT
   ========================================================= */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}


/* =========================================================
   12. TEXT COLORS
   ========================================================= */

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-black {
    color: var(--color-black) !important;
}


/* =========================================================
   13. BACKGROUNDS
   ========================================================= */

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-light {
    background-color: var(--color-background-light) !important;
}

.bg-dark {
    background-color: var(--color-background-dark) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}


/* =========================================================
   14. BORDERS
   ========================================================= */

.border {
    border: 1px solid var(--color-border) !important;
}

.border-top {
    border-top: 1px solid var(--color-border) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--color-border) !important;
}

.border-left {
    border-left: 1px solid var(--color-border) !important;
}

.border-right {
    border-right: 1px solid var(--color-border) !important;
}

.border-none {
    border: none !important;
}


/* =========================================================
   15. BORDER WIDTH
   ========================================================= */

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}


/* =========================================================
   16. BORDER COLORS
   ========================================================= */

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-accent {
    border-color: var(--color-accent) !important;
}

.border-light {
    border-color: var(--color-border) !important;
}

.border-white {
    border-color: var(--color-white) !important;
}


/* =========================================================
   17. BORDER RADIUS
   ========================================================= */

.radius-sm {
    border-radius: var(--radius-sm) !important;
}

.radius-md {
    border-radius: var(--radius-md) !important;
}

.radius-lg {
    border-radius: var(--radius-lg) !important;
}

.radius-xl {
    border-radius: var(--radius-xl) !important;
}

.radius-full {
    border-radius: var(--radius-full) !important;
}


/* =========================================================
   18. SHADOWS
   ========================================================= */

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-none {
    box-shadow: none !important;
}


/* =========================================================
   19. CARDS
   ========================================================= */

.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}


/* =========================================================
   20. BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 24px;

    border: 1px solid transparent;
    border-radius: var(--radius-md);

    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    cursor: pointer;

    transition: var(--transition);
}


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

.btn-primary:hover {
    opacity: 0.9;
}


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


.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
}


.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}


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


.btn-full {
    width: 100%;
}


/* =========================================================
   21. IMAGES
   ========================================================= */

.img-full {
    width: 100% !important;
    height: auto !important;
}

.img-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.img-contain {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.img-rounded {
    border-radius: var(--radius-md);
}


/* =========================================================
   22. WIDTH
   ========================================================= */

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.max-600 {
    max-width: 600px !important;
}

.max-800 {
    max-width: 800px !important;
}

.max-1000 {
    max-width: 1000px !important;
}

.max-1200 {
    max-width: 1200px !important;
}


/* =========================================================
   23. OVERFLOW
   ========================================================= */

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}


/* =========================================================
   24. TYPOGRAPHY
   ========================================================= */

.font-light {
    font-weight: var(--font-weight-light) !important;
}

.font-regular {
    font-weight: var(--font-weight-regular) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}


.heading {
    color: var(--color-heading);
    font-family: var(--font-heading);
}


.body-text {
    color: var(--color-text);
    font-family: var(--font-primary);
}


/* =========================================================
   25. LINKS
   ========================================================= */

.link {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--transition);
}

.link:hover {
    color: var(--color-accent);
}


/* =========================================================
   26. FORMS
   ========================================================= */

.form-control {
    width: 100%;
    padding: 12px 15px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    outline: none;

    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--color-primary);
}


/* =========================================================
   27. ICONS
   ========================================================= */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-md {
    width: 30px;
    height: 30px;
}

.icon-lg {
    width: 40px;
    height: 40px;
}


/* =========================================================
   28. DIVIDERS
   ========================================================= */

.divider {
    width: 100%;
    height: 1px;
    background: var(--color-border);
}

.divider-dark {
    background: var(--color-primary);
}

.divider-accent {
    background: var(--color-accent);
}


/* =========================================================
   29. HOVER EFFECTS
   ========================================================= */

.hover-opacity {
    transition: var(--transition);
}

.hover-opacity:hover {
    opacity: 0.8;
}


.hover-scale {
    transition: var(--transition);
}

.hover-scale:hover {
    transform: scale(1.03);
}


.hover-shadow {
    transition: var(--transition);
}

.hover-shadow:hover {
    box-shadow: var(--shadow-md);
}


/* =========================================================
   30. VISIBILITY
   ========================================================= */

.hide {
    display: none !important;
}

.show {
    display: block !important;
}


/* =========================================================
   31. ELEMENTOR HELPERS
   ========================================================= */

.elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

.elementor-button {
    transition: var(--transition);
}

.elementor img {
    max-width: 100%;
}


/* =========================================================
   32. ACCESSIBILITY
   ========================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   33. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-lg {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .section-xl {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }


    /* HORIZONTAL PADDING */

    .elementor-element.padding-x {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .elementor-element.padding-x-sm {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-element.padding-x-lg {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }


    /* VERTICAL PADDING */

    .elementor-element.padding-y {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .elementor-element.padding-y-sm {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .elementor-element.padding-y-lg {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }


    /* CARDS */

    .card {
        padding: 25px;
    }
}


/* =========================================================
   34. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-lg {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-xl {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }


    /* HORIZONTAL PADDING */

    .elementor-element.padding-x {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-element.padding-x-sm {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elementor-element.padding-x-lg {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }


    /* VERTICAL PADDING */

    .elementor-element.padding-y {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .elementor-element.padding-y-sm {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .elementor-element.padding-y-lg {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }


    /* FULL PADDING */

    .elementor-element.p-40 {
        padding: 30px !important;
    }

    .elementor-element.p-60 {
        padding: 40px !important;
    }

    .elementor-element.p-80 {
        padding: 50px !important;
    }


    /* GAP */

    .gap-30 {
        gap: 20px !important;
    }

    .gap-40 {
        gap: 25px !important;
    }

    .gap-60 {
        gap: 30px !important;
    }


    /* CARD */

    .card {
        padding: 20px;
    }


    /* BUTTON */

    .btn {
        padding: 12px 20px;
    }
}


/* =========================================================
   35. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}