/*
|--------------------------------------------------------------------------
| Bali Indo Tour
| Global Design System
|--------------------------------------------------------------------------
*/

:root {

    /* ==========================================================
       Brand
    ========================================================== */

    --primary: #0F766E;
    --primary-dark: #115E59;
    --primary-light: #ECFDF5;

    --secondary: #F59E0B;
    --secondary-dark: #D97706;
    --secondary-light: #FEF3C7;

    /* ==========================================================
       Neutral
    ========================================================== */

    --white: #FFFFFF;

    --background: #F8FAFC;

    --surface: #FFFFFF;

    --surface-secondary: #F1F5F9;

    --border: #E2E8F0;

    --border-dark: #CBD5E1;

    --text: #0F172A;

    --text-light: #475569;

    --text-muted: #64748B;

    --danger: #DC2626;

    --success: #16A34A;

    --warning: #F59E0B;

    --info: #0284C7;

    /* ==========================================================
       Typography
    ========================================================== */

    --font-family: "Plus Jakarta Sans", sans-serif;

    --font-xs: .75rem;
    --font-sm: .875rem;
    --font-base: 1rem;
    --font-md: 1.0625rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.75rem;
    --font-4xl: 2rem;
    --font-5xl: 2.5rem;
    --font-6xl: 3rem;

    /* ==========================================================
       Font Weight
    ========================================================== */

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;

    /* ==========================================================
       Line Height
    ========================================================== */

    --lh-sm: 1.3;
    --lh-md: 1.6;
    --lh-lg: 1.8;

    /* ==========================================================
       Letter Spacing
    ========================================================== */

    --ls-tight: -.02em;
    --ls-normal: 0;
    --ls-wide: .02em;

    /* ==========================================================
       Radius
    ========================================================== */

    --radius-xs: .375rem;
    --radius-sm: .5rem;
    --radius: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-pill: 999px;

    /* ==========================================================
       Shadow
    ========================================================== */

    --shadow-none: none;

    --shadow-xs: 0 1px 3px rgba(15, 23, 42, .04);

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);

    --shadow: 0 10px 30px rgba(15, 23, 42, .08);

    --shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);

    /* ==========================================================
       Glass
    ========================================================== */

    --glass-bg: rgba(255, 255, 255, .72);

    --glass-bg-light: rgba(255, 255, 255, .55);

    --glass-border: rgba(255, 255, 255, .45);

    --glass-blur: 24px;

    /* ==========================================================
       Border
    ========================================================== */

    --border-thin: 1px;

    --border-medium: 2px;

    /* ==========================================================
       Transition
    ========================================================== */

    --transition-fast: .2s ease;

    --transition: .3s ease;

    --transition-slow: .45s ease;

    /* ==========================================================
       Container
    ========================================================== */

    --container-sm: 720px;

    --container-md: 960px;

    --container-lg: 1140px;

    --container: 1320px;

    /* ==========================================================
       Header
    ========================================================== */

    --header-height: 80px;

    /* ==========================================================
       Z Index
    ========================================================== */

    --z-dropdown: 1000;

    --z-sticky: 1020;

    --z-fixed: 1030;

    --z-backdrop: 1040;

    --z-modal: 1050;

    --z-tooltip: 1060;

    /* ==========================================================
       Spacing
    ========================================================== */

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: .75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
    --space-5xl: 5rem;
    --space-6xl: 6rem;
    --space-7xl: 7.5rem;
}

/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}

/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

body {

    font-family: var(--font-family);

    font-size: var(--font-base);

    font-weight: var(--fw-normal);

    color: var(--text);

    background: var(--background);

    overflow-x: hidden;

}

img {

    display: block;

    max-width: 100%;

    height: auto;

}

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}

ul,
ol {

    list-style: none;

}

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0;

}

p {

    margin: 0;

}

small {

    font-size: var(--font-sm);

}

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/

input,
textarea,
select,
button {

    font: inherit;

}

button {

    border: 0;

    background: none;

    cursor: pointer;

}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.container {

    max-width: var(--container);

}

.section {

    padding: 5rem 0;

}

/*
|--------------------------------------------------------------------------
| Selection
|--------------------------------------------------------------------------
*/

::selection {

    background: var(--primary);

    color: var(--white);

}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: var(--background);

}

::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: var(--radius-pill);

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary-dark);

}

/*
|--------------------------------------------------------------------------
| Divider
|--------------------------------------------------------------------------
*/

hr {

    margin: 0;

    border: 0;

    border-top: 1px solid var(--border);

}

/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

:focus-visible {

    outline: 3px solid rgba(15, 118, 110, .2);

    outline-offset: 3px;

}

/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

.fade-in {

    animation: fadeIn .4s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:991.98px) {

    :root {

        --header-height: 72px;

    }

    .section {

        padding: 4rem 0;

    }

}

@media (max-width:767.98px) {

    .section {

        padding: 3rem 0;

    }

}