@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    // max-width: 1920px;
    margin: auto;
    overflow: hidden;
    position: fixed;
}

.ul-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ul-app__content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;

    >main {
        flex: 1 0 auto;
    }
}

main.ul-page--stretch {
    display: flex;
    flex-direction: column;
    min-height: 100%;

    >* {
        width: 100%;
    }
}

.ul-page--stretch__body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;

    >* {
        flex: 1 0 auto;
    }
}

a,
button,
img,
svg path {
    transition: 0.4s ease;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;

    &:hover {
        color: var(--ul-primary);
    }
}

p {
    line-height: 1.75;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none inside;
}

input {
    background-color: transparent;

    &:focus,
    &:focus-visible,
    &:focus-within {
        outline: none;
    }
}

[data-sal] {
    transition-duration: 1s;
    transition-delay: 0.2s;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

// radio button style
input[type=radio]:checked+span::after {
    opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    color: var(--black) !important;
    -webkit-text-fill-color: var(--black) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


// input:-internal-autofill-selected {
//     appearance: menulist-button;
//     background-image: none !important;
//     background-color: light-dark(rgba(232, 240, 254, 0), rgba(70, 90, 126, 0)) !important;
//     color: fieldtext !important;
//     appearance: none;
//     background-image: none !important;
//     background-color: red !important;
//     color: #000 !important;
// }


button {
    background: none;
    border: none;
}

.ul-container {
    // margin: 0 clamp(15px, 3.15vw, 60px);

    --container-space-x: 30px;
    max-width: calc(clamp(1100px, 93.80vw, 1785px) + var(--container-space-x));
    padding-left: calc(var(--container-space-x) / 2);
    padding-right: calc(var(--container-space-x) / 2);
    margin: auto;
    // overflow: hidden;
}

.ul-inner-container {
    margin: 0 clamp(15px, 10.25vw, 195px);

    @include xxl {
        margin: 0 clamp(15px, 7.88vw, 150px);
    }

    @include xl {
        margin: 0 clamp(15px, 2.88vw, 150px);
    }
}

.row-cols-xxs-1 {
    @include xxs {
        >* {
            width: 100%;
        }
    }
}

@media (min-width: 1600px) {
    .col-xxxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
}

@media (min-width: 1600px) {
    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}


.logo {
    // width: clamp(115px, 7.09vw, 135px);
    width: clamp(115px, 8.93vw, 170px);
}

.ul-bs-row {
    --bs-gutter-x: clamp(15px, 1.58vw, 30px);
    --bs-gutter-y: clamp(15px, 1.58vw, 30px);
}

.ul-inner-page-container {
    margin: clamp(40px, 4.20vw, 80px) auto;
    --container-space-x: 30px;
    max-width: calc(clamp(1100px, 73.31vw, 1395px) + var(--container-space-x));
    padding-left: calc(var(--container-space-x) / 2);
    padding-right: calc(var(--container-space-x) / 2);

    @include xl {
        margin: clamp(40px, 4.20vw, 80px) auto;
    }

    @include lg {
        margin: clamp(40px, 4.20vw, 80px) auto;
    }
}
