/* 
* 20250312 / KSODESIGN Style Guide
* rgba(20, 51, 255, 1)  blue
* rgba(234, 0, 44, 1)  sub
* rgba(255, 122, 0, 1)  main
* rgba(239, 48, 48, 1) red
* rgba(255, 158, 69, 1) orange / opacity-700
* rgba(255, 244, 235, 1)    opacity-100
*
* rgba(68, 68, 68, 1)   gray-700
* rgba(85, 85, 85, 1)   gray-600
* rgba(118, 118, 118, 1)    gray-500
* rgba(153, 153, 153, 1)    gray-400
* rgba(173, 173, 173, 1)    gray-300
* rgba(243, 243, 243, 1)    gray-200
*
* display-4 .fs-56 3.5rem - section header
*
* display-2 .fs-72 4.5rem - sub header
* fs-20 1.25rem - sub summary / content
* display-5 .fs-48 3rem - page header
*
* etc
* style="--bs-link-hover-color-rgb: 25, 135, 84;"
*/
:root {
    --main-rgb: 106, 127, 218;
    --sub-rgb: 255, 122, 0;
    --red-rgb: 255, 84, 55;
    --blue-rgb: 18, 168, 255;
    --green-rgb: 10, 207, 131;
    --yellow-rgb: 255, 204, 0;
    --orange-rgb: 255, 143, 46;
    --purple-rgb: 111, 66, 193;
    --pink-rgb: 255, 55, 95;
    --cyan-rgb: 0, 188, 212;
    --teal-rgb: 32, 201, 151;
    --light-rgb: 255, 255, 255;
    --dark-rgb: 0, 0, 0;
    --header-rgb: 34, 34, 34;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --opacity: 1;
    --text-opacity: 1;
    --bg-opacity: 1;
    --border-opacity: 1;
}

/***************************************************
*
* color scheme
*
****************************************************/
.text-main {
    --text-opacity: 1;
    color: rgba(var(--main-rgb), var(--text-opacity)) !important;
}

.text-sub {
    --text-opacity: 1;
    color: rgba(var(--sub-rgb), var(--text-opacity)) !important;
}

.text-red {
    --text-opacity: 1;
    color: rgba(var(--red-rgb), var(--text-opacity)) !important;
}

.text-blue {
    --text-opacity: 1;
    color: rgba(var(--blue-rgb), var(--text-opacity)) !important;
}

.text-green {
    --text-opacity: 1;
    color: rgba(var(--green-rgb), var(--text-opacity)) !important;
}

.text-yellow {
    --text-opacity: 1;
    color: rgba(var(--yellow-rgb), var(--text-opacity)) !important;
}

.text-orange {
    --text-opacity: 1;
    color: rgba(var(--orange-rgb), var(--text-opacity)) !important;
}

.text-purple {
    --text-opacity: 1;
    color: rgba(var(--purple-rgb), var(--text-opacity)) !important;
}
.text-pink {
    --text-opacity: 1;
    color: rgba(var(--pink-rgb), var(--text-opacity)) !important;
}
.text-cyan {
    --text-opacity: 1;
    color: rgba(var(--cyan-rgb), var(--text-opacity)) !important;
}
.text-teal {
    --text-opacity: 1;
    color: rgba(var(--teal-rgb), var(--text-opacity)) !important;
}
.text-black {
    --text-opacity: 1;
    color: rgba(var(--dark-rgb), var(--text-opacity)) !important;
}

.text-white {
    --text-opacity: 1;
    color: rgba(var(--light-rgb), var(--text-opacity)) !important;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
h1,h2,h3,h4,h5,h6,
.fs-1,.fs-2,.fs-3,.fs-4,.fs-5,.fs-6 {
    --text-opacity: 1;
    color: rgba(var(--header-rgb), var(--text-opacity));
}
/* =================== gray =================== */
.text-gray-100 {
    color: var(--gray-100) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =================== bg color =================== */
.bg-main {
    --bg-opacity: 1;
    background-color: rgba(var(--main-rgb), var(--bg-opacity)) !important;
}

.bg-sub {
    --bg-opacity: 1;
    background-color: rgba(var(--sub-rgb), var(--bg-opacity)) !important;
}

.bg-red {
    --bg-opacity: 1;
    background-color: rgba(var(--red-rgb), var(--bg-opacity)) !important;
}

.bg-blue {
    --bg-opacity: 1;
    background-color: rgba(var(--blue-rgb), var(--bg-opacity)) !important;
}

.bg-green {
    --bg-opacity: 1;
    background-color: rgba(var(--green-rgb), var(--bg-opacity)) !important;
}

.bg-yellow {
    --bg-opacity: 1;
    background-color: rgba(var(--yellow-rgb), var(--bg-opacity)) !important;
}

.bg-orange {
    --bg-opacity: 1;
    background-color: rgba(var(--orange-rgb), var(--bg-opacity)) !important;
}

.bg-purple {
    --bg-opacity: 1;
    background-color: rgba(var(--purple-rgb), var(--bg-opacity)) !important;
}
.bg-pink {
    --bg-opacity: 1;
    background-color: rgba(var(--pink-rgb), var(--bg-opacity)) !important;
}
.bg-cyan {
    --bg-opacity: 1;
    background-color: rgba(var(--cyan-rgb), var(--bg-opacity)) !important;
}
.bg-teal {
    --bg-opacity: 1;
    background-color: rgba(var(--teal-rgb), var(--bg-opacity)) !important;
}
.bg-light {
    --bg-opacity: 1;
    background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important;
}
.bg-dark {
    --bg-opacity: 1;
    background-color: rgba(var(--dark-rgb), var(--bg-opacity)) !important;
}
/* =================== border color =================== */
.border-main {
    --border-opacity: 1;
    border-color: rgba(var(--main-rgb), var(--border-opacity)) !important;
}
.border-sub {
    --border-opacity: 1;
    border-color: rgba(var(--sub-rgb), var(--border-opacity)) !important;
}
.border-light {
    --border-opacity: 1;
    border-color: rgba(var(--light-rgb), var(--border-opacity)) !important;
}
.border-dark {
    --border-opacity: 1;
    border-color: rgba(var(--dark-rgb), var(--border-opacity)) !important;
}
/* =================== text opacity =================== */
.text-opacity-90 {
    --text-opacity: 0.9;
}

.text-opacity-80 {
    --text-opacity: 0.8;
}

.text-opacity-70 {
    --text-opacity: 0.7;
}

.text-opacity-60 {
    --text-opacity: 0.6;
}

.text-opacity-50 {
    --text-opacity: 0.5;
}

.text-opacity-40 {
    --text-opacity: 0.4;
}

.text-opacity-30 {
    --text-opacity: 0.3;
}

.text-opacity-20 {
    --text-opacity: 0.2;
}

.text-opacity-10 {
    --text-opacity: 0.1;
}

/* =================== bg opacity =================== */
.bg-opacity-100 {
    --bg-opacity: 1;
}

.bg-opacity-90 {
    --bg-opacity: 0.9;
}

.bg-opacity-80 {
    --bg-opacity: 0.8;
}

.bg-opacity-70 {
    --bg-opacity: 0.7;
}

.bg-opacity-60 {
    --bg-opacity: 0.6;
}

.bg-opacity-50 {
    --bg-opacity: 0.5;
}

.bg-opacity-40 {
    --bg-opacity: 0.4;
}

.bg-opacity-30 {
    --bg-opacity: 0.3;
}

.bg-opacity-20 {
    --bg-opacity: 0.2;
}

.bg-opacity-10 {
    --bg-opacity: 0.1;
}
/* =================== border opacity =================== */
.border-opacity-90 {
    --border-opacity: 0.9;
}

.border-opacity-80 {
    --border-opacity: 0.8;
}

.border-opacity-70 {
    --border-opacity: 0.7;
}

.border-opacity-60 {
    --border-opacity: 0.6;
}

.border-opacity-50 {
    --border-opacity: 0.5;
}

.border-opacity-40 {
    --border-opacity: 0.4;
}

.border-opacity-30 {
    --border-opacity: 0.3;
}

.border-opacity-20 {
    --border-opacity: 0.2;
}

.border-opacity-10 {
    --border-opacity: 0.1;
}
/***************************************************/
.opacity-95{
    --opacity: 0.95;
    opacity: var(--opacity);
}
.opacity-90 {
    --opacity: 0.9;
    opacity: var(--opacity);
}
.opacity-85{
    --opacity: 0.85;
    opacity: var(--opacity);
}
.opacity-80 {
    --opacity: 0.8;
    opacity: var(--opacity);
}
.opacity-75{
    --opacity: 0.75;
    opacity: var(--opacity);
}
.opacity-70 {
    --opacity: 0.7;
    opacity: var(--opacity);
}
.opacity-65{
    --opacity: 0.65;
    opacity: var(--opacity);
}
.opacity-60 {
    --opacity: 0.6;
    opacity: var(--opacity);
}
.opacity-55{
    --opacity: 0.55;
    opacity: var(--opacity);
}
.opacity-50 {
    --opacity: 0.5;
    opacity: var(--opacity);
}
.opacity-45{
    --opacity: 0.45;
    opacity: var(--opacity);
}
.opacity-40 {
    --opacity: 0.4;
    opacity: var(--opacity);
}
.opacity-35{
    --opacity: 0.35;
    opacity: var(--opacity);
}
.opacity-30 {
    --opacity: 0.3;
    opacity: var(--opacity);
}
.opacity-25{
    --opacity: 0.25;
    opacity: var(--opacity);
}
.opacity-20 {
    --opacity: 0.2;
    opacity: var(--opacity);
}
.opacity-15{
    --opacity: 0.15;
    opacity: var(--opacity);
}
.opacity-10 {
    --opacity: 0.1;
    opacity: var(--opacity);
}

/***************************************************
*
* ETC
*
****************************************************/
.lh-md {
    line-height: 1.8 !important;
}
.lh-xl {
    line-height: 2.2 !important;
}
.lh-xxl {
    line-height: 2.5 !important;
}
.shadow-md {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05) !important;
}
/***************************************************
*
* font size scheme 
* 
* display-1 .fs-80 5rem
* display-2 .fs-72 4.5rem
* display-3 .fs-64 4rem
* display-4 .fs-56 3.5rem
* display-5 .fs-48 3rem
* display-6 .fs-40 2.5rem
* h1 .fs-1 .fs-40 2.5rem
* h2 .fs-2 .fs-32 2rem
* h3 .fs-3 .fs-28 1.75rem
* h4 .fs-4 .fs-24 1.5rem
* h5 .fs-5 .fs-20 1.25rem
* h6 .fs-6 .fs-16 1rem
* small .fs-12 .875rem
*
****************************************************/
.fs-12 {
    font-size: 0.75rem;
}

.fs-13 {
    font-size: 0.8125rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-15 {
    font-size: 0.9375rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-17 {
    font-size: 1.0625rem;
}

.fs-18 {
    font-size: calc(1.07rem + .04vw);
}

.fs-19 {
    font-size: calc(1.1rem + .04vw);
}

.fs-20 {
    font-size: calc(1.1rem + .06vw);
}

.fs-21 {
    font-size: calc(1.260rem + .08vw);
}

.fs-22 {
    font-size: calc(1.265rem + .1vw);
}

.fs-23 {
    font-size: calc(1.275rem + .1vw);
}

.fs-24 {
    font-size: calc(1.28rem + .2vw);
}

.fs-25 {
    font-size: calc(1.285rem + .3vw);
}

.fs-26 {
    font-size: calc(1.29rem + .4vw);
}

.fs-27 {
    font-size: calc(1.295rem + .5vw);
}

.fs-28 {
    font-size: calc(1.3rem + .6vw);
}

.fs-29 {
    font-size: calc(1.305rem + .6vw);
}

.fs-30 {
    font-size: calc(1.31rem + .7vw);
}

.fs-31 {
    font-size: calc(1.315rem + .8vw);
}

.fs-32 {
    font-size: calc(1.325rem + .9vw);
}

.fs-33 {
    font-size: calc(1.33rem + 1vw);
}

.fs-34 {
    font-size: calc(1.335rem + 1vw);
}

.fs-35 {
    font-size: calc(1.34rem + 1.1vw);
}

.fs-36 {
    font-size: calc(1.345rem + 1.2vw);
}

.fs-37 {
    font-size: calc(1.35rem + 1.3vw);
}

.fs-38 {
    font-size: calc(1.355rem + 1.4vw);
}

.fs-39 {
    font-size: calc(1.36rem + 1.5vw);
}

.fs-40 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
    .fs-18 {
        font-size: 1.125rem;
    }
    
    .fs-19 {
        font-size: 1.1875rem;
    }
    
    .fs-20 {
        font-size: 1.25rem;
    }

    .fs-21 {
        font-size: 1.3125rem;
    }

    .fs-22 {
        font-size: 1.375rem;
    }

    .fs-23 {
        font-size: 1.4375rem;
    }

    .fs-24 {
        font-size: 1.5rem;
    }

    .fs-25 {
        font-size: 1.5625rem;
    }

    .fs-26 {
        font-size: 1.625rem;
    }

    .fs-27 {
        font-size: 1.6875rem;
    }

    .fs-28 {
        font-size: 1.75rem;
    }

    .fs-29 {
        font-size: 1.8125rem;
    }

    .fs-30 {
        font-size: 1.875rem;
    }

    .fs-31 {
        font-size: 1.9375rem;
    }

    .fs-32 {
        font-size: 2rem;
    }

    .fs-33 {
        font-size: 2.0625rem;
    }

    .fs-34 {
        font-size: 2.125rem;
    }

    .fs-35 {
        font-size: 2.1875rem;
    }

    .fs-36 {
        font-size: 2.25rem;
    }

    .fs-37 {
        font-size: 2.3125rem;
    }

    .fs-38 {
        font-size: 2.375rem;
    }

    .fs-39 {
        font-size: 2.4375rem;
    }

    .fs-40 {
        font-size: 2.5rem;
    }
}

/***************************************************
*
* spacing scheme
*
****************************************************/
@media (min-width: 992px) {

    .mt-lg-6,
    .my-lg-6 {
        margin-top: 4.5rem !important;
    }

    .mt-lg-7,
    .my-lg-7 {
        margin-top: 6rem !important;
    }

    .mt-lg-8,
    .my-lg-8 {
        margin-top: 7.5rem !important;
    }

    .mt-lg-9,
    .my-lg-9 {
        margin-top: 9rem !important;
    }

    .mt-lg-10,
    .my-lg-10 {
        margin-top: 10rem !important;
    }

    .mb-lg-6,
    .my-lg-6 {
        margin-bottom: 4.5rem !important;
    }

    .mb-lg-7,
    .my-lg-7 {
        margin-bottom: 6rem !important;
    }

    .mb-lg-8,
    .my-lg-8 {
        margin-bottom: 7.5rem !important;
    }

    .mb-lg-9,
    .my-lg-9 {
        margin-bottom: 9rem !important;
    }

    .mb-lg-10,
    .my-lg-10 {
        margin-bottom: 10rem !important;
    }

    .pt-lg-6,
    .py-lg-6 {
        padding-top: 4.5rem !important;
    }

    .pt-lg-7,
    .py-lg-7 {
        padding-top: 6rem !important;
    }

    .pt-lg-8,
    .py-lg-8 {
        padding-top: 7.5rem !important;
    }

    .pt-lg-9,
    .py-lg-9 {
        padding-top: 9rem !important;
    }

    .pt-lg-10,
    .py-lg-10 {
        padding-top: 10rem !important;
    }

    .pb-lg-6,
    .py-lg-6 {
        padding-bottom: 4.5rem !important;
    }

    .pb-lg-7,
    .py-lg-7 {
        padding-bottom: 6rem !important;
    }

    .pb-lg-8,
    .py-lg-8 {
        padding-bottom: 7.5rem !important;
    }

    .pb-lg-9,
    .py-lg-9 {
        padding-bottom: 9rem !important;
    }

    .pb-lg-10,
    .py-lg-10 {
        padding-bottom: 10rem !important;
    }

    @-webkit-keyframes fadeInUpSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,20%,0);
            transform: translate3d(0,20%,0);
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
    
    @keyframes fadeInUpSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,20%,0);
            transform: translate3d(0,20%,0);
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
    
    .animate__fadeInUpSmall {
        -webkit-animation-name: fadeInUpSmall;
        animation-name: fadeInUpSmall
    }

    @-webkit-keyframes fadeInLeftSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3rem,0,0);
            transform: translate3d(-3rem,0,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
    
    @keyframes fadeInLeftSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3rem,0,0);
            transform: translate3d(-3rem,0,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
    
    .animate__fadeInLeftSmall {
        -webkit-animation-name: fadeInLeftSmall;
        animation-name: fadeInLeftSmall
    }

    @-webkit-keyframes fadeInRightSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(3rem,0,0);
            transform: translate3d(3rem,0,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
    
    @keyframes fadeInRightSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(3rem,0,0);
            transform: translate3d(3rem,0,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
    
    .animate__fadeInRightSmall {
        -webkit-animation-name: fadeInRightSmall;
        animation-name: fadeInRightSmall
    }
}

@media (min-width: 1200px) {

    .mt-xl-6,
    .my-xl-6 {
        margin-top: 4.5rem !important;
    }

    .mt-xl-7,
    .my-xl-7 {
        margin-top: 6rem !important;
    }

    .mt-xl-8,
    .my-xl-8 {
        margin-top: 7.5rem !important;
    }

    .mt-xl-9,
    .my-xl-9 {
        margin-top: 9rem !important;
    }

    .mt-xl-10,
    .my-xl-10 {
        margin-top: 10rem !important;
    }

    .mb-xl-6,
    .my-xl-6 {
        margin-bottom: 4.5rem !important;
    }

    .mb-xl-7,
    .my-xl-7 {
        margin-bottom: 6rem !important;
    }

    .mb-xl-8,
    .my-xl-8 {
        margin-bottom: 7.5rem !important;
    }

    .mb-xl-9,
    .my-xl-9 {
        margin-bottom: 9rem !important;
    }

    .mb-xl-10,
    .my-xl-10 {
        margin-bottom: 10rem !important;
    }

    .pt-xl-6,
    .py-xl-6 {
        padding-top: 4.5rem !important;
    }

    .pt-xl-7,
    .py-xl-7 {
        padding-top: 6rem !important;
    }

    .pt-xl-8,
    .py-xl-8 {
        padding-top: 7.5rem !important;
    }

    .pt-xl-9,
    .py-xl-9 {
        padding-top: 9rem !important;
    }

    .pt-xl-10,
    .py-xl-10 {
        padding-top: 10rem !important;
    }

    .pb-xl-6,
    .py-xl-6 {
        padding-bottom: 4.5rem !important;
    }

    .pb-xl-7,
    .py-xl-7 {
        padding-bottom: 6rem !important;
    }

    .pb-xl-8,
    .py-xl-8 {
        padding-bottom: 7.5rem !important;
    }

    .pb-xl-9,
    .py-xl-9 {
        padding-bottom: 9rem !important;
    }

    .pb-xl-10,
    .py-xl-10 {
        padding-bottom: 10rem !important;
    }
}