:root {
    --neutral-light: #dee3e6;
    --neutral-extra-light: #f1f4f6;
    --neutral: #807d7d;
    --neutral-dark: #505050;
    --white: #ffffff;
    --primary-light: #e9f7be;
    --primary-extralight: #f7fbea;
    --primary-dark: #0f2d00;
    --primary: #82bc00;
    --secondary-light: #d4e0f9;
    --secondary: #093342;
    --error-light: #e05a42;
    --error-extralight: #ffd4cc;
    --error-dark: #c7341a;
    --error: #c7341a;
    --info-light: #76bcf8;
    --info-extralight: #d0effd;
    --info-dark: #013252;
    --info: #2196f3;
    --warning-light: #ffbe58;
    --warning-extralight: #fff2de;
    --warning-dark: #ff9800;
    --warning: #ff9800;
    --success-light: #e9f7be;
    --success-extralight: #f7fbea;
    --success-dark: #0f2d00;
    --success: #82bc00;
  }


.gap-1 {
    gap: 10px;
}
.w-0 {
    width: 0;
}
.w-90{
    width: 90% !important;
  }
.hdvw-20{
    height: 20dvw !important;
}
.hdvw-50{
    height: 50dvw !important;
}
.hdvw-80{
    height: 80dvw !important;
}
.min-hdvh-50 {
    min-height: 50dvh;
}

.hdvh-75 {
    height: 75dvh;
}
.my-7{
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
}
.flex-1{
    flex: 1;
}
.rounded-tl-br-4{
    border-radius: var(--bs-border-radius-xl) 0 var(--bs-border-radius-xl) 0 !important;
}
body {
    background-color: #fff;
    position: relative;
    width: 100%;
    height: 100%;
}
* {
    margin: 0px;
    padding: 0px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
}

p {
    margin-bottom: 15px;
    color: inherit;
    &.primary {
        color: var(--primary);
    }
    &.secondary {
        color: var(--secondary);
    }
    &.neutral {
        color: var(--neutral);
    }
    &.black {
        color: var(--black);
    }
    &.white {
        color: var(--white);
    }

}

h1,
h4 {
    font-family: "Bricolage Grotesque", "Raleway", Times, serif;
    margin-bottom: 45px;
    font-weight: bold;
    &.primary {
        color: var(--primary);
    }
    &.secondary {
        color: var(--secondary);
    }
    &.black {
        color: var(--black);
    }
    &.white {
        color: var(--white);
    }
    &.grey {
        color: var(--neutral);
    }
}
h2 {
    font-family: "Bricolage Grotesque", "Raleway", Times, serif;
    color: #ffffff;
    font-size: 80px;
    font-weight: bold;
    &.primary {
        color: var(--primary);
    }
    &.secondary {
        color: var(--secondary);
    }
    &.black {
        color: var(--black);
    }
    &.white {
        color: var(--white);
    }
    &.neutral {
        color: var(--neutral);
    }
}

h3 {
    font-family: "Bricolage Grotesque", "Raleway", Times, serif;
    color: #5a5a5a;
    font-size: 40px;
    font-weight: bold;

    &.secondary {
        color: var(--secondary);
    }

    &.black {
        color: var(--black);
    }
    &.white {
        color: var(--white);
    }

    &.primary {
        color: var(--primary);
    }
}
.claim{
    font-family: "Roboto", serif;
}
h4 {
    font-family: "Bricolage Grotesque", "Raleway", Times, serif;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
    &.secondary {
        color: var(--secondary);
    }

    &.black {
        color: var(--black);
    }
    &.white {
        color: var(--white);
    }

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

/* ul {
    list-style-type: none;
} */

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}
a:hover {
    color: inherit;
    text-decoration: underline;
}
.socials a:hover {
    color: inherit;
    text-decoration: none;
}
.gap-2 {
    gap: 10px;
}
.scrollXContainer {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
.scrollXContainer::-webkit-scrollbar {
    opacity: 0;
}
.scrollYContainer {
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.scrollYContainer::-webkit-scrollbar {
    opacity: 0;
}
.btn {
    font-family: "Roboto", sans-serif;
    padding: 4px 8px;
    line-height: 0.8rem;
    font-size: 0.8rem;
    height: 37px;
    align-items: center;
    display: flex;
}
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary);
    --bs-gradient: none;
    &.current{
        --bs-btn-color: white;
        --bs-btn-bg: var( --bs-btn-active-bg);
    }
}
.btn-outline-secondary {
    --bs-btn-color: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--secondary);
    --bs-btn-active-border-color: var(--secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--secondary);
    --bs-gradient: none;
    &.current{
        --bs-btn-color: white;
        --bs-btn-bg: var( --bs-btn-active-bg);
    }
}

.btn-outline-black {
    --bs-btn-color: var(--black);
    --bs-btn-border-color: var(--black);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--black);
    --bs-btn-hover-border-color: var(--black);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--black);
    --bs-btn-active-border-color: var(--black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--black);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--black);
    --bs-gradient: none;
    &.current{
        --bs-btn-color: white;
        --bs-btn-bg: var( --bs-btn-active-bg);
    }
}


.flex-1 {
    flex: 1;
}
.bg-black {
    --bs-bg-opacity: 1;
    background-color: var(--black) !important;
}

.bg-black-light{
    --bs-bg-opacity: 1;
    background-color: var(--black-light) !important;
}



.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--primary) !important;
}
.bg-primary-light {
    background-color: var(--primary-light) !important;
}
.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: var(--secondary) !important;
}
.bg-secondary-light {
    background-color: var(--secondary-light) !important;
}
.border-neutral {
    --bs-border-opacity: 1;
    border-color: var(--neutral) !important;
}
.color-white {
    color: var(--white)!important;
}

.text-secondary {
    color: var(--secondary)!important;
}
.text-success {
    --bs-text-opacity: 1;
    color: var(--success)!important;
}
.text-primary {
    color: var(--primary)!important;
}
.text-yellow {
    color: var(--primary)!important;
}

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

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

.btnKd {
    position: relative;
    height: 34px;
    color: white;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: fit-content;
    text-decoration: none;
    .bg {
        height: 30px;
        width: 30px;
        border-radius: 40px;
        background-color: var(--white);
        position: absolute;
        top: 2px;
        left: 2px;
        transition: width 0.5s ease;
    }
    .icon {
        height: 30px;
        width: 30px;
        color: var(--black);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        &.primary {
            color: var(--primary);
        }
        &.secondary {
            color: var(--secondary);
        }
        &.black {
            color: var(--black);
        }
        &.white {
            color: var(--white);
        }
        &.neutral {
            color: var(--neutral);
        }
        
    }
    .text {
        line-height: 30px;
        font-size: 16px;
        color: var(--white);
        z-index: 10;
    }
    &:hover {
        text-decoration: none;
        .bg {
            width: calc(100% + 14px);
        }
        .text {
            &.primary {
                color: var(--primary);
            }
            &.secondary {
                color: var(--secondary);
            }
            &.neutral {
                color: var(--neutral);
            }
            &.black {
                color: var(--black);
            }
          
            
        }
    }
}

.slick-dots {
    list-style: none !important;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 0;
    display: flex;
    gap: 4px;
    li {
        button {
            font-size: 0px;
            height: 7px;
            width: 30px;
            border-radius: 5px;
            background-color: var(--white);
        }
        &.slick-active {
            button {
                border: 1px solid var(--black);
                background-color: var(--black);
            }
        }
    }
}


.scroll.pink::-webkit-scrollbar {
    width: 6px;
    
  }
  .scroll.primary::-webkit-scrollbar-track {
    background: var(--primary);
    border-radius: 10px;
    width: 3px;
    margin:  auto;
  }
  .scroll.primary::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
  }
/* up SM */
@media (min-width: 576px) {


}
/* up MD */
@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important;
    }
    .w-md-50 {
        width: 50% !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
    .w-md-auto {
        width: auto !important;
    }
    .w-md-fit {
        width: fit-content !important;
    }
    .h-md-fit {
        height: fit-content !important;
    }
    .hdvw-md-20{
        height: 20dvw !important;
    }
    .hdvw-md-50{
        height: 50dvw !important;
    }
    .hdvw-md-80{
        height: 80dvw !important;
    }
}
/* up LG */
@media (min-width: 992px) {
    * {
        margin: 0px;
        padding: 0px;
        font-family: "Roboto", sans-serif;
        font-size: 18px;
    }
    .btn {
        font-family: "Roboto", sans-serif;
        padding: 4px 8px;
        line-height: 1rem;
        font-size: 1rem;
        height: 37px;
        align-items: center;
        display: flex;
    }
    .hdvw-lg-20{
        height: 20dvw !important;
    }
    .hdvw-lg-50{
        height: 50dvw !important;
    }
    .hdvw-lg-80{
        height: 80dvw !important;
    }
}
/* up xl */
@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important;
    }
    .w-xl-50 {
        width: 50% !important;
    }
    .w-xl-75 {
        width: 75% !important;
    }
    .hdvw-xl-20{
        height: 20dvw !important;
    }
    .hdvw-xl-50{
        height: 50dvw !important;
    }
    .hdvw-xl-80{
        height: 80dvw !important;
    }
}
/* up xxl */
@media (min-width: 1400px) {
    .hdvw-xxl-20{
        height: 20dvw !important;
    }
    .hdvw-xxl-50{
        height: 50dvw !important;
    }
    .hdvw-xxl-80{
        height: 80dvw !important;
    }
}
/* up xxxl */
@media (min-width: 1600px) {
    .w-xxxl-35{
        width: 35% !important;
    }
    .w-xxxl-50{
        width: 50% !important;
    }
    .w-xxxl-65{
        width: 65% !important;
    }
  
}