@import"https://api.fontshare.com/v2/css?f[]=supreme@200,300,400,500,700&f[]=switzer@300,400,500,600,700&display=swap";

:root {
    --font-family: "Switzer", sans-serif;
    --font-family1: "Supreme", sans-serif;
    --color1: #09636e;
    --color2: #faa73d;
    --color3: #f6f2e9;
    --color4: #d9e9eb;
    --color5: #d14f50;
    --color6: #28cf8c;
    --highlight: #09636e;
    --white: light-dark(#ffffff, #0f0f0f);
    --lightGray: light-dark(#f8f8f8, #272727);
    --borderGray: light-dark(#e5eaf1, #242323);
    --visibleGray: light-dark(#c4c7c5, #2c2b2b);
    --textGray: light-dark(#a3a3a4, #898989);
    --gray: light-dark(#5d5e5f, #454545);
    --darkGray: light-dark(#23262F, #b5b7be);
    --black: light-dark(#19191a, #fafafa);
    --red: #ec4c4c;
    --green: #3cc274;
    --blue: #546bd4;
    --yellow: #f5a905;
    --inputColor: light-dark(#09636e, #c7f5d4);
    --inputColor1: color-mix(in srgb, var(--inputColor), var(--bg-color) 95%);
    --inputColor2: color-mix(in srgb, var(--inputColor), var(--bg-color) 90%);
    --inputColor3: color-mix(in srgb, var(--inputColor), var(--bg-color) 70%);
    --inputColor4: color-mix(in srgb, var(--inputColor), var(--bg-color) 50%);
    --inputColor5: color-mix(in srgb, var(--inputColor), var(--bg-color) 30%);
    --input-size: .75rem;
    --gradient1: radial-gradient(at 98.6% 68.3%, #ecffd4 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #f2f5ff 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #bdd4ff 0px, transparent 50%), radial-gradient(at 21% 80.7%, #c9dcff 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #eaffe6 0px, transparent 50%);
    --gradient2: linear-gradient(to right top, #111118, #13151a, #15181c, #181b1e, #1b1e20, #1c1f21, #1d1f22, #1e2023, #1d1f23, #1c1e22, #1b1c22, #1b1b21);
    --gradient3: linear-gradient(to right top, #eff3ff, #edf2ff, #ecf0ff, #eaefff, #e8eeff, #e6ecff, #e3ebff, #e1e9ff, #dee7ff, #dbe4ff, #d8e2ff, #d5dfff);
    --radius: 15px;
    --inputRadius: 8px;
    --btnRadius: 15px;
    --transition1: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition2: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    --transition3: 0.7s cubic-bezier(0.37, 0, 0.63, 1);
    --shadow-1: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --shadow-2: rgba(0, 0, 0, 0.075) 0px 3px 6px, rgba(0, 0, 0, 0.116) 0px 3px 6px;
    --shadow-3: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    --text-color: light-dark(#070707, #e0e0e0);
    --bg-color: light-dark(#ffffff, #121212);
    --shade-1: color-mix(in srgb, var(--bg-color), #fdfdfd 80%);
    --shade-2: color-mix(in srgb, var(--bg-color), #ecf0ef 70%);
    --shade-3: color-mix(in srgb, var(--bg-color), #d9dfde 50%);
    --shade-4: color-mix(in srgb, var(--bg-color), #b0b6b1 40%);
    --shade-5: color-mix(in srgb, var(--bg-color), #8a8e8b 20%);
    --section-space-x: clamp(1rem, 4vw, 4rem);
    --section-space-y: clamp(1.5rem, 3vw, 2.5rem);
    --section-max-width: 1300px;
    --container-max-width: 100%
}

.section {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.sectionLeft,
.section-left {
    clear: both;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.sectionRight,
.section-right {
    clear: both;
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.innerSection {
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto
}

.sectionPadding {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.sectionPaddingTop {
    padding-top: var(--section-space-y)
}

.sectionPaddingBottom {
    padding-bottom: var(--section-space-y)
}

.btnDiv {
    margin-top: .7075rem;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 1.5vw, 20px)
}

a,
button,
[type=button] {
    display: inline-flex;
    font-family: inherit;
    background-color: rgba(0, 0, 0, 0);
    -webkit-writing-mode: horizontal-tb;
    text-rendering: auto;
    list-style: 1;
    cursor: pointer
}

a:disabled,
button:disabled,
[type=button]:disabled {
    font-weight: 500;
    color: var(--gray);
    background-color: var(--borderGray);
    border: 1px solid var(--borderGray);
    box-shadow: none;
    opacity: .8;
    pointer-events: none;
    cursor: not-allowed
}

a img,
button img,
[type=button] img {
    width: 15px;
    margin: 0
}

a *,
button *,
[type=button] * {
    transition: var(--transition1);
    cursor: pointer
}

.loader {
    display: none;
    width: 15px;
    height: 15px
}

.loader::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid inherit;
    border-top: 2px solid rgba(0, 0, 0, 0);
    border-radius: 100%;
    animation: loader1 .5s ease-in-out infinite
}

@keyframes loader1 {
    0% {
        transform: translate(0%, 0%) rotate(0deg)
    }

    100% {
        transform: translate(0%, 0%) rotate(360deg)
    }
}

.courseManagmentSection .videoSection .content .controllTabPanel .arrowBtn,
.heroSection form button,
.inputTable td button,
.inputTable td [rowGeneratorCallback],
.inputTable td [row_generator_callback],
.addonModules .addonModuleCard td button,
.addonModules .addonModuleCard td [rowGeneratorCallback],
.addonModules .addonModuleCard td [row_generator_callback],
.addonModules .addonModulesBtnDiv .addModuleBtn,
.fileWrapper .uploadedFilesContainer .deleteFileButton,
.btn-white-stroke,
.btnWhiteStroke,
.linkBtn,
.textBtn,
.outlinedBtn,
.btn2,
.filledTonalBtn,
.filledBtn,
.btn1,
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
    border-radius: var(--btnRadius);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: .5px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.filledBtn,
.btn1 {
    color: var(--white);
    font-weight: 500;
    filter: brightness(100%);
    background-color: var(--color1);
    border: 1px solid var(--color1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2)
}

.filledBtn:hover,
.btn1:hover {
    color: var(--white);
    filter: brightness(110%);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.filledBtn:active,
.btn1:active {
    filter: brightness(105%)
}

.filledBtn:visited,
.btn1:visited {
    filter: brightness(90%)
}

.filledBtn.secondary,
.btn1.secondary {
    background-color: var(--color2);
    border: 1px solid var(--color2)
}

.filledBtn.tertiary,
.btn1.tertiary {
    background-color: var(--color3);
    border: 1px solid var(--color3)
}

.filledBtn.black,
.btn1.black {
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--darkGray)
}

.filledBtn.white,
.btn1.white {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--borderGray)
}

.filledBtn.red,
.btn1.red {
    color: var(--white);
    background-color: var(--red);
    border: 1px solid var(--red)
}

.filledBtn.green,
.btn1.green {
    color: var(--white);
    background-color: var(--green);
    border: 1px solid var(--green)
}

.filledBtn.blue,
.btn1.blue {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue)
}

.filledBtn.elevated,
.btn1.elevated {
    box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .048), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.filledBtn.elevated:hover,
.btn1.elevated:hover {
    box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.filledBtn .loader::before,
.btn1 .loader::before {
    border: 2px solid var(--white)
}

.filledTonalBtn {
    color: var(--color1);
    background-color: var(--color1)
}

.outlinedBtn,
.btn2 {
    font-weight: 500;
    color: var(--color1);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--color1)
}

.outlinedBtn:hover,
.btn2:hover {
    opacity: .8
}

.outlinedBtn.secondary,
.btn2.secondary {
    border: 1px solid var(--color2)
}

.outlinedBtn.tertiary,
.btn2.tertiary {
    border: 1px solid var(--color3)
}

.outlinedBtn.black,
.btn2.black {
    color: var(--black);
    border: 1px solid var(--black)
}

.outlinedBtn.white,
.btn2.white {
    color: var(--white);
    border: 1px solid var(--white)
}

.outlinedBtn.gray,
.btn2.gray {
    color: var(--textGray);
    border: 1px solid var(--textGray)
}

.outlinedBtn.red,
.btn2.red {
    color: var(--red);
    border: 1px solid var(--red)
}

.outlinedBtn.green,
.btn2.green {
    color: var(--green);
    border: 1px solid var(--green)
}

.outlinedBtn.blue,
.btn2.blue {
    color: var(--blue);
    border: 1px solid var(--blue)
}

.textBtn {
    color: var(--color1);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0
}

.textBtn:disabled {
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.textBtn:hover {
    color: var(--white)
}

.textBtn.secondary {
    color: var(--color2)
}

.textBtn.tertiary {
    color: var(--color3)
}

.textBtn.black {
    color: var(--black)
}

.textBtn.white {
    color: var(--white)
}

.textBtn.red {
    color: var(--red)
}

.textBtn.green {
    color: var(--green)
}

.textBtn.blue {
    color: var(--blue)
}

.linkBtn:disabled {
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.linkBtn:hover {
    color: var(--white)
}

.btn-white-stroke,
.btnWhiteStroke {
    color: var(--white);
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--white)
}

.btn-white-stroke:hover,
.btnWhiteStroke:hover {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--white)
}

.btn-white-stroke i,
.btnWhiteStroke i {
    color: var(--gray)
}

.btn-white-stroke .loader::before,
.btnWhiteStroke .loader::before {
    border: 2px solid var(--gray)
}

.xxsBtn {
    height: clamp(20px, 5vw, 24px);
    font-size: .878rem;
    padding: 0 8px
}

.xxsIcon {
    height: clamp(20px, 5vw, 24px);
    width: clamp(20px, 5vw, 24px);
    font-size: .878rem
}

.xsBtn {
    height: clamp(25px, 5.5vw, 28px);
    font-size: .937rem;
    padding: 0 16px
}

.xsIcon {
    height: clamp(25px, 5.5vw, 28px);
    height: clamp(25px, 5.5vw, 28px);
    font-size: .937rem
}

.smBtn,
.fileWrapper .uploadedFilesContainer .deleteFileButton {
    height: clamp(29px, 6vw, 32px);
    font-size: .878rem;
    padding: 0 20px
}

.smIcon {
    height: clamp(29px, 6vw, 32px);
    width: clamp(29px, 6vw, 32px);
    font-size: .878rem
}

.mdBtn {
    height: clamp(32px, 6vw, 40px);
    font-size: .878rem;
    padding: 0 16px
}

.mdIcon {
    height: clamp(32px, 6vw, 40px);
    width: clamp(32px, 6vw, 40px);
    font-size: .878rem
}

.lgBtn,
.inputTable td button,
.inputTable td [rowGeneratorCallback],
.inputTable td [row_generator_callback],
.addonModules .addonModuleCard td button,
.addonModules .addonModuleCard td [rowGeneratorCallback],
.addonModules .addonModuleCard td [row_generator_callback],
.addonModules .addonModulesBtnDiv .addModuleBtn {
    height: clamp(45px, 6vw, 48px);
    font-size: .937rem;
    padding: 0 20px
}

.lgIcon {
    height: clamp(45px, 6vw, 48px);
    width: clamp(45px, 6vw, 48px);
    font-size: .937rem
}

.xlBtn {
    height: clamp(53px, 6.5vw, 56px);
    font-size: 1rem;
    padding: 0 24px
}

.xlIcon {
    height: clamp(53px, 6.5vw, 56px);
    width: clamp(53px, 6.5vw, 56px);
    font-size: 1rem
}

.xxlBtn {
    height: clamp(61px, 7vw, 64px);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    padding: 0 28px
}

.xxlIcon {
    height: clamp(61px, 7vw, 64px);
    width: clamp(61px, 7vw, 64px);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

.xsCard {
    width: 24.5%;
    min-width: 100px;
    margin-right: .75%;
    margin-left: .75%
}

.smCard {
    width: 49.5%;
    min-width: 100px
}

@media(min-width: 1024px) {
    .smCard {
        width: 32.5%
    }
}

.mdCard {
    width: 100%
}

@media(min-width: 1024px) {
    .mdCard {
        width: 49.5%
    }
}

.xxlCard {
    width: 100%
}

.xlDiv {
    width: 100%;
    min-width: 100%
}

.lgDiv {
    width: 100%;
    min-width: 100%
}

@media(min-width: 768px) {
    .lgDiv {
        width: 49%;
        min-width: 49%
    }
}

@media(min-width: 1024px) {
    .lgDiv {
        width: 74%;
        min-width: 74%
    }
}

.mdDiv {
    width: 100%;
    min-width: 100%
}

@media(min-width: 768px) {
    .mdDiv {
        width: 49%;
        min-width: 49%
    }
}

.smDiv {
    width: 49%;
    min-width: 49%
}

@media(min-width: 768px) {
    .smDiv {
        width: 31.3%;
        min-width: 31.3%
    }
}

.xsDiv {
    width: 49%;
    min-width: 49%
}

@media(min-width: 768px) {
    .xsDiv {
        width: 24%;
        min-width: 24%
    }
}

.xxsDiv {
    width: 18%;
    min-width: 100px
}

::selection {
    color: var(--white);
    background-color: var(--highlight)
}

[mode] .messageBox {
    padding: .5rem 0
}

[mode] .messageBox:empty {
    display: none
}

[mode] .messageBox::before {
    display: none;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: .937rem;
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    line-height: 1
}

[mode=alert] textarea,
[mode=alert] input:not([type=checkbox]):not([type=radio]) {
    border-color: #e78971;
    box-shadow: #fddad4 0px 0px 0px 1px
}

[mode=alert] .messageBox {
    background-color: #fff1e7;
    color: #ce6122
}

[mode=alert] .messageBox::before {
    content: "";
    color: #dd573f
}

[mode=error] textarea,
[mode=error] input:not([type=checkbox]):not([type=radio]) {
    border-color: #ffb0b0;
    box-shadow: #ffe1e1 0px 0px 0px 1px
}

[mode=error] .messageBox {
    background-color: #ffe7e7;
    color: #ce2222
}

[mode=error] .messageBox::before {
    content: "";
    color: #dd3f3f
}

[mode=success] textarea,
[mode=success] input:not([type=checkbox]):not([type=radio]) {
    border-color: #81d781;
    box-shadow: #cbffcb 0px 0px 0px 1px
}

[mode=success] .messageBox {
    background-color: #e8ffe7;
    color: #169c04
}

[mode=success] .messageBox::before {
    content: "";
    color: #3fdd3f
}

[mode=warning] textarea,
[mode=warning] input:not([type=checkbox]):not([type=radio]) {
    border-color: #d7af81;
    box-shadow: #ffe7cb 0px 0px 0px 1px
}

[mode=warning] .messageBox {
    background-color: #fffbe7;
    color: #9c8004
}

[mode=warning] .messageBox::before {
    content: "";
    color: #dd713f
}

[mode=info] .messageBox::before {
    content: "";
    color: #d4d4d4
}

[mode=note] .messageBox::before {
    content: "";
    color: #dfdfdf
}

.messageBox {
    width: 100%;
    min-width: 100%;
    margin-top: 10px;
    color: var(--black);
    font-size: .733rem;
    font-weight: 500;
    border-radius: var(--inputRadius)
}

.messageBox::first-letter {
    text-transform: uppercase
}

.messageBox:empty {
    padding: 0;
    margin-top: 0
}

.formDiv {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2%
}

form {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2%
}

label {
    display: flex;
    align-items: center;
    color: var(--gray);
    font-family: var(--font-family);
    font-size: .878rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: .25rem;
    transition: var(--transition1)
}

input,
textarea,
select,
datalist,
selected,
item {
    width: 100%;
    padding: var(--input-size);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.3;
    letter-spacing: 0;
    transition: var(--transition1)
}

input::placeholder,
textarea::placeholder,
select::placeholder,
datalist::placeholder,
selected::placeholder,
item::placeholder {
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    opacity: .65
}

[country-code]::before {
    content: attr(country-code);
    position: absolute;
    top: 32px;
    left: var(--input-size);
    z-index: 1;
    padding-right: .5rem;
    font-weight: 500;
    border-right: 1px solid var(--inputColor3)
}

[country-code] label {
    left: 60px
}

[country-code] input {
    padding-left: 60px
}

select {
    background-color: rgba(0, 0, 0, 0);
    appearance: auto
}

textarea {
    min-height: 100px;
    min-width: 100%;
    max-width: 100%;
    vertical-align: top;
    overflow: auto;
    resize: none
}

datalist {
    appearance: none
}

datalist ::-webkit-calendar-picker-indicator {
    display: none;
    background-color: inherit;
    opacity: 0
}

[type=radio],
[type=checkbox],
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    width: 100%
}

::-webkit-calendar-picker-indicator {
    opacity: .6;
    filter: invert(0.8)
}

[type=date],
[type=datetime],
[type=time],
[type=datetime-local] {
    text-transform: uppercase
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
    outline: 0 none;
    background: ˇ;
    -webkit-text-fill-color: rgba(0, 0, 0, 0) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset;
    transition: background-color 5000s ease-in-out 0s
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=file] {
    text-indent: 11%;
    text-align: center;
    color: var(--black);
    border: 2px dashed var(--inputColor2) !important
}

input[type=file]:hover,
input[type=file]:focus {
    box-shadow: none !important
}

input[type=file]:invalid {
    text-indent: 0
}

input[type=file]:valid {
    text-indent: 12%;
    color: var(--inputColor)
}

input[type=file]:valid::before {
    opacity: 0
}

input[type=file]::file-selector-button {
    opacity: 0;
    width: 0;
    margin: 0
}

input[type=file]::before {
    content: "Upload File";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 20% center;
    background-size: contain;
    pointer-events: none;
    background-color: var(--white);
    text-align: center;
    text-indent: 15px
}

.range-slider .irs {
    width: 100%
}

.range-slider .irs-to,
.range-slider .irs-from {
    background-color: var(--darkGray)
}

.range-slider .irs-single {
    background-color: var(--darkGray)
}

.range-slider .irs--round .irs-bar {
    background-color: var(--inputColor3)
}

.range-slider .irs--round .irs-handle {
    border: 4px solid var(--inputColor4)
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {

    input[type=checkbox],
    input[type=radio] {
        --active: var(--inputColor5);
        --active-inner: #fff;
        --focus: 2px var(--inputColor4);
        --border: var(--borderGray);
        --border-hover: var(--inputColor3);
        --background: var(--white);
        --disabled: var(--inputColor1);
        --disabled-inner: var(--inputColor1);
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        padding: .5rem;
        margin-right: 10px;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: var(--transition1)
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: -1px;
        top: -1px;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s)
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
    }

    input[type=checkbox]:checked+label,
    input[type=radio]:checked+label {
        color: var(--black) !important
    }

    input[type=checkbox]:checked+label::before,
    input[type=radio]:checked+label::before {
        border: 3px solid var(--color4) !important;
        box-shadow: 2px 4px 16px rgba(0, 0, 0, .16) !important
    }

    input[type=checkbox]:checked+label span,
    input[type=radio]:checked+label span {
        text-shadow: none
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border)
    }

    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        cursor: not-allowed
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover)
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus)
    }

    input[type=checkbox]:not(.switch),
    input[type=radio]:not(.switch) {
        width: 20px;
        min-width: 20px;
        height: 20px
    }

    input[type=checkbox]:not(.switch):after,
    input[type=radio]:not(.switch):after {
        opacity: var(--o, 0)
    }

    input[type=checkbox]:not(.switch):checked,
    input[type=radio]:not(.switch):checked {
        --o: 1
    }

    input[type=checkbox]+label,
    input[type=radio]+label {
        font-size: .733rem;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: .5rem
    }

    input[type=checkbox]:not(.switch) {
        border-radius: var(--inputRadius)
    }

    input[type=checkbox]:not(.switch):after {
        width: 4px;
        height: 8px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 5px;
        top: 2px;
        transform: rotate(var(--r, 20deg))
    }

    input[type=checkbox]:not(.switch):checked {
        --r: 43deg
    }

    input[type=checkbox].switch {
        width: 38px !important;
        border-radius: 11px;
        background: var(--b, var(--background)) !important;
        transition-delay: unset !important
    }

    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0))
    }

    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px
    }

    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: .6
    }

    input[type=radio] {
        border-radius: 50%
    }

    input[type=radio]:after {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7))
    }

    input[type=radio]:checked {
        --s: .5
    }
}

input:not([type=radio]):not([type=checkbox]),
textarea,
select,
datalist,
selector selected,
#noteInputElement,
.searchBar,
.dateRange,
.contactSummaryNote {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    border-radius: var(--inputRadius);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0);
    transition: border .35s, box-shadow .5s !important
}

input:not([type=radio]):not([type=checkbox]):hover,
textarea:hover,
select:hover,
datalist:hover,
selector selected:hover,
#noteInputElement:hover,
.searchBar:hover,
.dateRange:hover,
.contactSummaryNote:hover {
    border: 1px solid var(--inputColor2)
}

input:not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
select:focus,
datalist:focus,
selector selected:focus,
#noteInputElement:focus,
.searchBar:focus,
.dateRange:focus,
.contactSummaryNote:focus {
    outline: 0;
    background-color: var(--white);
    border: 1px solid var(--inputColor3);
    box-shadow: 0 0 0 2.5px var(--inputColor3)
}

input:not([type=radio]):not([type=checkbox]):active,
textarea:active,
select:active,
datalist:active,
selector selected:active,
#noteInputElement:active,
.searchBar:active,
.dateRange:active,
.contactSummaryNote:active {
    background-color: var(--white);
    border: 1px solid var(--inputColor4)
}

input:not([type=radio]):not([type=checkbox]):visited,
textarea:visited,
select:visited,
datalist:visited,
selector selected:visited,
#noteInputElement:visited,
.searchBar:visited,
.dateRange:visited,
.contactSummaryNote:visited {
    background-color: var(--white);
    border: 1px solid var(--inputColor1)
}

.uploadInput,
.floatingLabel,
.inputDiv {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 1.413rem
}

.uploadInput .inputBox [type=search],
.floatingLabel .inputBox [type=search],
.inputDiv .inputBox [type=search] {
    padding-right: 46px !important
}

.uploadInput .inputBox button,
.floatingLabel .inputBox button,
.inputDiv .inputBox button {
    height: clamp(32px, 6vw, 40px);
    font-size: .878rem;
    padding: 0 16px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--inputRadius);
    cursor: pointer;
    transition: var(--transition1)
}

.uploadInput .inputBox button:hover i,
.floatingLabel .inputBox button:hover i,
.inputDiv .inputBox button:hover i {
    color: var(--color2)
}

.uploadInput .inputBox button i,
.floatingLabel .inputBox button i,
.inputDiv .inputBox button i {
    color: var(--color3);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    cursor: pointer;
    transition: var(--transition1)
}

.uploadInput selector,
.floatingLabel selector,
.inputDiv selector {
    width: 100%
}

.uploadInput .lgIcon,
.floatingLabel .lgIcon,
.inputDiv .lgIcon {
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 5;
    transform: translateY(-50%);
    border-radius: var(--inputRadius)
}

.inputDiv label {
    margin-bottom: 10px
}

.inputDiv input:not([type=radio]):not([type=checkbox]):-webkit-autofill,
.inputDiv textarea:-webkit-autofill,
.inputDiv select:-webkit-autofill,
.inputDiv datalist:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--inputColor1) inset !important;
    -webkit-text-fill-color: var(--black) !important
}

.inputDiv:has(.inputIcon) .inputIcon {
    position: absolute;
    top: 30px;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1;
    border-radius: inherit;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit
}

.inputDiv:has(.inputIcon) label:not(:has(input)) {
    position: absolute;
    top: 6px;
    left: 50px;
    font-size: 14px;
    z-index: 1;
    color: inherit
}

.inputDiv:has(.inputIcon) input:not([type=radio]):not([type=checkbox]),
.inputDiv:has(.inputIcon) textarea,
.inputDiv:has(.inputIcon) select,
.inputDiv:has(.inputIcon) datalist,
.inputDiv:has(.inputIcon) selector selected,
.inputDiv:has(.inputIcon) select {
    padding-top: 27px;
    padding-left: 50px;
    padding-bottom: 7px
}

.floatingLabel {
    display: flex;
    flex-direction: column
}

.floatingLabel label {
    position: absolute;
    top: 20px;
    left: 6px;
    padding: .25rem .5rem;
    pointer-events: none;
    display: block;
    z-index: 2
}

.floatingLabel input,
.floatingLabel textarea,
.floatingLabel select {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0)
}

.floatingLabel input::placeholder,
.floatingLabel textarea::placeholder,
.floatingLabel select::placeholder {
    opacity: 0
}

.floatingLabel input:focus,
.floatingLabel input:valid,
.floatingLabel textarea:focus,
.floatingLabel textarea:valid,
.floatingLabel select:focus,
.floatingLabel select:valid {
    color: var(--black)
}

.floatingLabel input:focus::placeholder,
.floatingLabel input:valid::placeholder,
.floatingLabel textarea:focus::placeholder,
.floatingLabel textarea:valid::placeholder,
.floatingLabel select:focus::placeholder,
.floatingLabel select:valid::placeholder {
    opacity: 1
}

.floatingLabel input:focus~label,
.floatingLabel input:valid~label,
.floatingLabel textarea:focus~label,
.floatingLabel textarea:valid~label,
.floatingLabel select:focus~label,
.floatingLabel select:valid~label {
    top: -5px;
    color: var(--inputColor5);
    font-weight: 500;
    background-color: var(--white)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title,
.titleInput,
.smartInput {
    margin-bottom: 1rem
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input,
.titleInput input,
.smartInput input {
    color: var(--black);
    padding: .5rem 0;
    border: none;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid var(--borderGray);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0
}

@media(min-width: 768px) {

    .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input,
    .titleInput input,
    .smartInput input {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:is(:hover, :focus, :active, :visited, :valid),
.titleInput input:is(:hover, :focus, :active, :visited, :valid),
.smartInput input:is(:hover, :focus, :active, :visited, :valid) {
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none
}

.titleInput:has(input:valid) label {
    display: none
}

.titleInput {
    width: 100%
}

.titleInput label {
    color: var(--highlight);
    display: block;
    margin-bottom: 0m
}

.titleInput input:not([type=radio]):not([type=checkbox]) {
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px);
    font-weight: 500;
    padding-left: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    caret-color: var(--inputColor5);
    box-shadow: none;
    text-transform: capitalize
}

@media(min-width: 1024px) {
    .titleInput input:not([type=radio]):not([type=checkbox]) {
        font-size: clamp(25.62890625px, 22.5902871711px + 0.0063304564*100vw, 35.2512px)
    }
}

@media(min-width: 1800px) {
    .titleInput input:not([type=radio]):not([type=checkbox]) {
        font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px)
    }
}

.titleInput input:not([type=radio]):not([type=checkbox]):focus+.messageBox::after {
    display: none
}

.titleInput input:not([type=radio]):not([type=checkbox]):valid+.messageBox:after {
    display: none
}

.titleInput input:not([type=radio]):not([type=checkbox])::placeholder {
    font-size: inherit;
    font-weight: 500;
    transition: var(--transition1)
}

.titleInput .messageBox:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: var(--inputColor5);
    left: 0;
    top: -5px;
    transform: translateY(-130%);
    animation-name: blink;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    opacity: 1
}

@keyframes blink {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.horizontalInput,
.horizontalInputDiv .inputDiv {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: .75rem
}

@media(min-width: 568px) {

    .horizontalInput,
    .horizontalInputDiv .inputDiv {
        flex-direction: row;
        align-items: center
    }
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])),
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])) {
    position: absolute;
    top: 8px;
    left: var(--input-size);
    z-index: 1
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch]),
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch]) {
    min-width: auto;
    margin-bottom: 0;
    overflow: unset
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch])::after,
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch])::after {
    content: ""
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox]),
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox]) {
    --active: var(--green) !important;
    transform: scale(1.25);
    margin-right: 0
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox])::before,
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100%;
    transform: translate(-50%, -50%) scale(2)
}

@media(min-width: 568px) {

    .horizontalInput label:not(:has([type=radio], [type=checkbox])),
    .horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])) {
        position: relative;
        top: unset;
        left: unset;
        width: auto;
        min-width: 200px;
        margin: 0;
        margin-top: 10px;
        font-size: 1rem
    }
}

@media(min-width: 768px) {

    .horizontalInput label:not(:has([type=radio], [type=checkbox])),
    .horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])) {
        font-size: .937rem
    }
}

@media(min-width: 568px) {

    .horizontalInput label:not(:has([type=radio], [type=checkbox]))::after,
    .horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox]))::after {
        content: ":";
        color: var(--textGray);
        margin-left: auto;
        margin-right: 1rem;
        margin-bottom: 3px
    }
}

.horizontalInput input,
.horizontalInputDiv .inputDiv input,
.horizontalInput select,
.horizontalInputDiv .inputDiv select,
.horizontalInput textarea,
.horizontalInputDiv .inputDiv textarea,
.horizontalInput selector selected item,
.horizontalInputDiv .inputDiv selector selected item,
.horizontalInput .inputBox,
.horizontalInputDiv .inputDiv .inputBox,
.horizontalInput .optionList,
.horizontalInputDiv .inputDiv .optionList {
    padding-top: 30px;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

@media(min-width: 568px) {

    .horizontalInput input,
    .horizontalInputDiv .inputDiv input,
    .horizontalInput select,
    .horizontalInputDiv .inputDiv select,
    .horizontalInput textarea,
    .horizontalInputDiv .inputDiv textarea,
    .horizontalInput selector selected item,
    .horizontalInputDiv .inputDiv selector selected item,
    .horizontalInput .inputBox,
    .horizontalInputDiv .inputDiv .inputBox,
    .horizontalInput .optionList,
    .horizontalInputDiv .inputDiv .optionList {
        padding-top: .7rem;
        font-size: 1rem
    }
}

.horizontalInput input:not([type=radio]):not([type=checkbox]),
.horizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]),
.horizontalInput select,
.horizontalInputDiv .inputDiv select,
.horizontalInput textarea,
.horizontalInputDiv .inputDiv textarea,
.horizontalInput selector,
.horizontalInputDiv .inputDiv selector,
.horizontalInput .optionList,
.horizontalInputDiv .inputDiv .optionList {
    width: 100%
}

@media(min-width: 568px) {

    .horizontalInput input:not([type=radio]):not([type=checkbox]),
    .horizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]),
    .horizontalInput select,
    .horizontalInputDiv .inputDiv select,
    .horizontalInput textarea,
    .horizontalInputDiv .inputDiv textarea,
    .horizontalInput selector,
    .horizontalInputDiv .inputDiv selector,
    .horizontalInput .optionList,
    .horizontalInputDiv .inputDiv .optionList {
        width: auto !important;
        flex: 1 !important
    }
}

.horizontalInput .optionList,
.horizontalInputDiv .inputDiv .optionList {
    justify-content: flex-start
}

.horizontalInput textarea,
.horizontalInputDiv .inputDiv textarea {
    min-width: auto
}

@media(min-width: 568px) {

    .horizontalInput input:not([type=date]),
    .horizontalInputDiv .inputDiv input:not([type=date]) {
        flex: 1
    }
}

.horizontalInput select,
.horizontalInputDiv .inputDiv select {
    width: auto;
    min-width: auto;
    border: none
}

.horizontalInput .messageBox,
.horizontalInputDiv .inputDiv .messageBox {
    width: 100%
}

.minimalHorizontalInputDiv .inputDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .75rem
}

.minimalHorizontalInputDiv .inputDiv label {
    width: auto;
    min-width: 200px;
    margin: 0;
    font-size: 1rem
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) {
    min-width: auto;
    margin-bottom: 0;
    overflow: unset
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch])::after {
    content: ""
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) input:not([type=radio]):not([type=checkbox]) {
    --active: var(--green) !important;
    transform: scale(1.25);
    margin-right: 0
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) input:not([type=radio]):not([type=checkbox])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100%;
    transform: translate(-50%, -50%) scale(2)
}

@media(min-width: 768px) {
    .minimalHorizontalInputDiv .inputDiv label {
        font-size: .937rem
    }
}

.minimalHorizontalInputDiv .inputDiv label::after {
    content: ":";
    color: var(--textGray);
    margin-left: auto;
    margin-right: 1rem;
    margin-bottom: 3px
}

.minimalHorizontalInputDiv .inputDiv input,
.minimalHorizontalInputDiv .inputDiv select,
.minimalHorizontalInputDiv .inputDiv textarea,
.minimalHorizontalInputDiv .inputDiv selector selected item {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

@media(min-width: 568px) {

    .minimalHorizontalInputDiv .inputDiv input,
    .minimalHorizontalInputDiv .inputDiv select,
    .minimalHorizontalInputDiv .inputDiv textarea,
    .minimalHorizontalInputDiv .inputDiv selector selected item {
        font-size: 1rem
    }
}

.minimalHorizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]),
.minimalHorizontalInputDiv .inputDiv select,
.minimalHorizontalInputDiv .inputDiv textarea,
.minimalHorizontalInputDiv .inputDiv selector {
    width: auto !important;
    flex: 1 !important
}

.minimalHorizontalInputDiv .inputDiv textarea {
    min-width: auto
}

.minimalHorizontalInputDiv .inputDiv input:not([type=date]) {
    flex: 1
}

.minimalHorizontalInputDiv .inputDiv select {
    width: auto;
    min-width: auto;
    border: none
}

.minimalHorizontalInputDiv .inputDiv .messageBox {
    width: 100%
}

.actionInput selected {
    background-color: rgba(0, 0, 0, 0);
    border: none !important;
    padding: 0
}

.actionInput selected items {
    padding: 0
}

.actionInput selected item:not([value]) {
    min-height: 45px;
    border: 1px dashed var(--inputColor2);
    border-radius: var(--btnRadius);
    padding: 5px .7075rem
}

.inputBox {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.passwordShowIconDiv {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 35px;
    height: 35px;
    padding: 5px;
    border-radius: 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.passwordShowIconDiv:hover {
    background-color: var(--lightGray)
}

.passwordShowIconDiv .hide {
    display: none
}

.passwordShowIconDiv .showIcon {
    display: block !important
}

.passwordShowIconDiv i {
    top: 3px;
    left: 5px;
    color: var(--textGray);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    display: none;
    cursor: pointer;
    transition: var(--transition1)
}

.passwordShowIconDiv i:hover {
    color: var(--color3)
}

.dateRange {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dateRange i {
    color: var(--visibleGray);
    cursor: pointer
}

.dateRange .value {
    margin: 0 .5rem;
    margin-right: auto;
    cursor: pointer
}

.checkboxList input::before,
.radioList input::before {
    content: attr(data-label);
    color: var(--black);
    font-size: .878rem;
    margin-left: .7075rem
}

.checkBoxGridDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 2%;
    justify-content: flex-start
}

.checkBoxGridDiv label {
    width: 48%;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    border-radius: var(--inputRadius)
}

@media(min-width: 768px) {
    .checkBoxGridDiv label {
        width: 32%
    }
}

@media(min-width: 1024px) {
    .checkBoxGridDiv label {
        width: 23%
    }
}

.checkBoxGridDiv label i {
    color: var(--textGray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    pointer-events: none
}

.checkBoxGridDiv label .title {
    font-size: .937rem;
    pointer-events: none
}

.checkBoxGridDiv label .text {
    font-size: .733rem;
    pointer-events: none
}

.checkBoxGridDiv label input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--inputRadius) !important;
    background-color: rgba(0, 0, 0, 0)
}

.checkBoxGridDiv label input::after {
    display: none
}

.inputCounter input[type=date]::placeholder,
.inputCounter input[type=datetime-local]::placeholder,
.inputCounter input[type=email]::placeholder,
.inputCounter input[type=file]::placeholder,
.inputCounter input[type=hidden]::placeholder,
.inputCounter input[type=month]::placeholder,
.inputCounter input[type=number]::placeholder,
.inputCounter input[type=password]::placeholder,
.inputCounter input[type=range]::placeholder,
.inputCounter input[type=search]::placeholder,
.inputCounter input[type=tel]::placeholder,
.inputCounter input[type=text]::placeholder,
.inputCounter input[type=time]::placeholder,
.inputCounter input[type=url]::placeholder,
.inputCounter input[type=week]::placeholder,
.inputCounter textarea::placeholder,
.inputCounter select::placeholder,
.inputCounter datalist::placeholder {
    opacity: 1
}

.inputCounter .inputBox:has(button) input {
    text-align: center
}

.inputCounter .inputBox button {
    position: absolute;
    right: 0;
    z-index: 1;
    border-left: 1px solid var(--borderGray);
    padding: .75rem .5rem
}

.inputCounter .inputBox button:hover {
    background-color: var(--black)
}

.inputCounter .inputBox button:hover i {
    color: var(--textGray)
}

.inputCounter .inputBox button:nth-child(1) {
    left: 0;
    right: unset;
    border: none;
    border-right: 1px solid var(--borderGray)
}

.inputCounter .inputBox button i {
    color: var(--gray)
}

.optionList {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px
}

.optionList label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.optionList label:has(:checked) {
    color: var(--inputColor)
}

.optionList label input[type=radio],
.optionList label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media(min-width: 768px) {

    .optionList label input[type=radio],
    .optionList label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.optionList label input[type=radio]:hover,
.optionList label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.optionList label input[type=radio]:hover::after,
.optionList label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.optionList label input[type=radio]::after,
.optionList label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.optionList label input[type=radio]:focus,
.optionList label input[type=radio]:active,
.optionList label input[type=checkbox]:focus,
.optionList label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.optionList label input[type=radio]:focus::after,
.optionList label input[type=radio]:active::after,
.optionList label input[type=checkbox]:focus::after,
.optionList label input[type=checkbox]:active::after {
    color: var(--black)
}

.optionList label input[type=radio]:checked,
.optionList label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.optionList label input[type=radio]:checked::after,
.optionList label input[type=checkbox]:checked::after {
    color: var(--black)
}

.optionForm {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center
}

.optionForm label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.optionForm label:has(:checked) {
    color: var(--inputColor)
}

.optionForm label input[type=radio],
.optionForm label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media(min-width: 768px) {

    .optionForm label input[type=radio],
    .optionForm label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.optionForm label input[type=radio]:hover,
.optionForm label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.optionForm label input[type=radio]:hover::after,
.optionForm label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.optionForm label input[type=radio]::after,
.optionForm label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.optionForm label input[type=radio]:focus,
.optionForm label input[type=radio]:active,
.optionForm label input[type=checkbox]:focus,
.optionForm label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.optionForm label input[type=radio]:focus::after,
.optionForm label input[type=radio]:active::after,
.optionForm label input[type=checkbox]:focus::after,
.optionForm label input[type=checkbox]:active::after {
    color: var(--black)
}

.optionForm label input[type=radio]:checked,
.optionForm label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.optionForm label input[type=radio]:checked::after,
.optionForm label input[type=checkbox]:checked::after {
    color: var(--black)
}

.optionForm label {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem
}

.optionForm .options {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px
}

.optionForm .options input[type=radio] {
    margin: 0;
    margin-bottom: 10px
}

.optionForm .options input[type=radio]:checked+.formDiv {
    order: 10;
    display: flex
}

.optionForm .options .formDiv {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 1rem;
    text-align: center
}

.optionForm .options .formDiv:empty {
    margin-top: 0
}

.optionForm .options .formDiv label {
    width: auto;
    text-align: left;
    margin-bottom: .5rem
}

.gridOptionInput {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
    margin-top: 0
}

.gridOptionInput label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.gridOptionInput label:has(:checked) {
    color: var(--inputColor)
}

.gridOptionInput label input[type=radio],
.gridOptionInput label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media(min-width: 768px) {

    .gridOptionInput label input[type=radio],
    .gridOptionInput label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.gridOptionInput label input[type=radio]:hover,
.gridOptionInput label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.gridOptionInput label input[type=radio]:hover::after,
.gridOptionInput label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.gridOptionInput label input[type=radio]::after,
.gridOptionInput label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.gridOptionInput label input[type=radio]:focus,
.gridOptionInput label input[type=radio]:active,
.gridOptionInput label input[type=checkbox]:focus,
.gridOptionInput label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.gridOptionInput label input[type=radio]:focus::after,
.gridOptionInput label input[type=radio]:active::after,
.gridOptionInput label input[type=checkbox]:focus::after,
.gridOptionInput label input[type=checkbox]:active::after {
    color: var(--black)
}

.gridOptionInput label input[type=radio]:checked,
.gridOptionInput label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.gridOptionInput label input[type=radio]:checked::after,
.gridOptionInput label input[type=checkbox]:checked::after {
    color: var(--black)
}

.gridOptionInput label {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem
}

.gridOptionInput .options {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px
}

.gridOptionInput .options input[type=radio] {
    margin: 0;
    margin-bottom: 10px
}

.gridOptionInput .options input[type=radio]:checked+.formDiv {
    order: 10;
    display: flex
}

.gridOptionInput .options .formDiv {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 1rem;
    text-align: center
}

.gridOptionInput .options .formDiv:empty {
    margin-top: 0
}

.gridOptionInput .options .formDiv label {
    width: auto;
    text-align: left;
    margin-bottom: .5rem
}

.gridOptionInput .options {
    display: flex;
    gap: 0 2%;
    justify-content: center;
    margin-top: 1rem
}

.gridOptionInput .options label {
    min-height: 150px;
    width: 48%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--black)
}

@media(min-width: 568px) {
    .gridOptionInput .options label {
        width: 31%;
        margin-bottom: 1rem
    }
}

.gridOptionInput .options label i,
.gridOptionInput .options label img {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    border-radius: var(--radius);
    pointer-events: none;
    transition: var(--transition1)
}

.gridOptionInput .options label * {
    z-index: 10
}

.gridOptionInput .options label .text {
    margin-top: 1rem
}

.gridOptionInput .options label input {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    margin: 0;
    transform: translate(-50%, -50%) scale(0.97);
    z-index: 1
}

.gridOptionInput .options label input::after {
    height: auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.gridOptionInput .options label input:checked {
    background-color: var(--white);
    box-shadow: var(--inputColor3) 0px 0px 0px 2px
}

.gridOptionInput .options label input:checked::after {
    color: var(--black)
}

.gridOptionInput .options label input:checked+i {
    color: var(--gray);
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray)
}

.gridListOptionInput {
    margin-top: 0
}

.gridListOptionInput .options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    justify-content: flex-start;
    margin-top: 1rem
}

.gridListOptionInput .options label {
    width: auto;
    min-height: 55px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

@media(min-width: 568px) {
    .gridListOptionInput .options label {
        margin-bottom: 1rem
    }
}

.gridListOptionInput .options label i,
.gridListOptionInput .options label img {
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-size: 1rem;
    padding: 10px;
    background-color: var(--lightGray);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--radius);
    z-index: 10;
    pointer-events: none;
    transition: var(--transition1)
}

.gridListOptionInput .options label input {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    margin: 0;
    padding-left: 55px;
    cursor: pointer
}

.gridListOptionInput .options label input::after {
    content: attr(data-label);
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: none;
    cursor: pointer
}

.gridListOptionInput .options label input:checked {
    background-color: var(--white);
    box-shadow: var(--inputColor3) 0px 0px 0px 2px
}

.gridListOptionInput .options label input:checked::after {
    color: var(--black)
}

.gridListOptionInput .options label input:checked+i {
    color: var(--gray);
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray)
}

.uploadInput:hover .inputBox {
    border: 1px dashed var(--inputColor4)
}

.uploadInput:hover .inputBox label {
    color: var(--inputColor4)
}

.uploadInput .inputBox {
    min-height: 200px;
    background-color: var(--lightGray);
    border: 1px dashed var(--inputColor3);
    border-radius: var(--inputRadius);
    overflow: hidden;
    transition: var(--transition1)
}

.uploadInput .inputBox label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inputColor5);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    pointer-events: none;
    cursor: pointer;
    transition: var(--transition1)
}

.uploadInput .inputBox label i {
    margin-right: .5rem;
    transition: var(--transition1)
}

.uploadInput .inputBox input {
    opacity: 0;
    z-index: 1;
    cursor: pointer
}

.inputEditor {
    padding-top: 0
}

.inputEditor .ql-container.ql-snow {
    border: 1px solid var(--inputBorder) !important;
    border-radius: var(--inputRadius)
}

.inputEditor .ql-toolbar.ql-snow {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    border: none;
    border-top: 1px solid var(--borderGray);
    border-radius: .25rem
}

.inputEditor textarea {
    height: 200px;
    border: 1px solid var(--inputBorder) !important;
    padding-bottom: 2.83rem !important
}

.taskListForm {
    display: flex;
    flex-direction: column;
    gap: 0
}

.taskListForm .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.taskListForm .inputDiv {
    margin: 0;
    width: 100%;
    align-items: unset;
    border-bottom: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
    .taskListForm .inputDiv {
        flex-direction: row
    }
}

.taskListForm .inputDiv:nth-child(even) {
    background: var(--inputColor1)
}

.taskListForm .inputDiv :is(h2, h3, h4, h5, p) {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    margin: 0;
    font-weight: 400;
    display: flex;
    align-items: center
}

@media(min-width: 1024px) {
    .taskListForm .inputDiv :is(h2, h3, h4, h5, p) {
        border-right: 1px solid var(--borderGray)
    }
}

.taskListForm .inputDiv .inputBox {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center
}

.taskListForm .inputDiv .inputBox label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.taskListForm .inputDiv .inputBox label:has(:checked) {
    color: var(--inputColor)
}

.taskListForm .inputDiv .inputBox label input[type=radio],
.taskListForm .inputDiv .inputBox label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media(min-width: 768px) {

    .taskListForm .inputDiv .inputBox label input[type=radio],
    .taskListForm .inputDiv .inputBox label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.taskListForm .inputDiv .inputBox label input[type=radio]:hover,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.taskListForm .inputDiv .inputBox label input[type=radio]:hover::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.taskListForm .inputDiv .inputBox label input[type=radio]::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:focus,
.taskListForm .inputDiv .inputBox label input[type=radio]:active,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:focus,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:focus::after,
.taskListForm .inputDiv .inputBox label input[type=radio]:active::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:focus::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:active::after {
    color: var(--black)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:checked,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.taskListForm .inputDiv .inputBox label input[type=radio]:checked::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:checked::after {
    color: var(--black)
}

@media(min-width: 1024px) {
    .taskListForm .inputDiv .inputBox {
        width: 335px;
        text-align: center
    }
}

.taskListForm .inputDiv .inputBox [type=file] {
    width: 100%
}

.taskListForm .btnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    justify-content: flex-end
}

[drag_scroll] {
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;
    scroll-behavior: smooth
}

[drag_scroll].active {
    cursor: grabbing
}

[data-tooltip] {
    overflow: initial
}

[data-tooltip]:not([data-tooltip]):before {
    display: none
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip]:focus {
    z-index: 999
}

[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    [data-tooltip]:hover {
        z-index: 999
    }

    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-top] {
    overflow: initial
}

[data-tooltip-top]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-top]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-top]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-top]:focus {
    z-index: 999
}

[data-tooltip-top]:focus::before,
[data-tooltip-top]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    [data-tooltip-top]:hover {
        z-index: 999
    }

    [data-tooltip-top]:hover::before,
    [data-tooltip-top]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-top]::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

[data-tooltip-top]::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

[data-tooltip-bottom] {
    overflow: initial
}

[data-tooltip-bottom]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-bottom]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-bottom]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-bottom]:focus {
    z-index: 999
}

[data-tooltip-bottom]:focus::before,
[data-tooltip-bottom]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    [data-tooltip-bottom]:hover {
        z-index: 999
    }

    [data-tooltip-bottom]:hover::before,
    [data-tooltip-bottom]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-bottom]::before {
    bottom: unset;
    right: unset;
    top: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

[data-tooltip-bottom]::after {
    top: unset;
    right: unset;
    bottom: 0;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

[data-tooltip-left] {
    overflow: initial
}

[data-tooltip-left]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-left]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-left]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-left]:focus {
    z-index: 999
}

[data-tooltip-left]:focus::before,
[data-tooltip-left]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    [data-tooltip-left]:hover {
        z-index: 999
    }

    [data-tooltip-left]:hover::before,
    [data-tooltip-left]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-left]::before {
    top: unset;
    left: unset;
    bottom: 50%;
    right: 100%;
    transform: none;
    transform: translateY(50%)
}

[data-tooltip-left]::after {
    top: unset;
    right: unset;
    bottom: 50%;
    left: -3px;
    transform: none;
    transform: translateY(50%) rotate(90deg)
}

[data-tooltip-right] {
    overflow: initial
}

[data-tooltip-right]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-right]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-right]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-right]:focus {
    z-index: 999
}

[data-tooltip-right]:focus::before,
[data-tooltip-right]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    [data-tooltip-right]:hover {
        z-index: 999
    }

    [data-tooltip-right]:hover::before,
    [data-tooltip-right]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-right]::before {
    top: unset;
    right: unset;
    bottom: 50%;
    left: 100%;
    transform: none;
    transform: translateY(50%)
}

[data-tooltip-right]::after {
    top: unset;
    left: unset;
    bottom: 50%;
    right: -3px;
    transform: none;
    transform: translateY(50%) rotate(-90deg)
}

.moreBtn {
    display: flex;
    align-items: center;
    padding: .25rem;
    cursor: pointer
}

.moreBtn:hover .moreIcon {
    opacity: .5
}

.moreBtn:hover .btnMenuDiv {
    display: block;
    transform: none;
    opacity: 1;
    pointer-events: all
}

.moreBtn .moreIcon {
    display: flex;
    align-items: center;
    color: var(--gray);
    font-size: .733rem;
    z-index: 1;
    cursor: pointer;
    transition: var(--transition1)
}

.moreBtn .btnMenuDiv {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    padding-top: 2rem;
    transform: scale(0.8);
    transition: var(--transition1)
}

.moreBtn .btnMenuDiv:hover {
    display: block;
    transform: none;
    opacity: 1;
    pointer-events: all
}

.moreBtn .btnMenuDiv .btnMenu {
    width: 100%;
    display: block;
    background-color: var(--shade-1);
    border-radius: var(--radius);
    border: 1px solid var(--shade-1);
    text-align: left;
    box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px;
    overflow: hidden
}

.moreBtn .btnMenuDiv .btnMenu .changeStatusBtn::before {
    display: none
}

.moreBtn .btnMenuDiv .btnMenu label input {
    margin-right: 1rem;
    transform: none
}

.moreBtn .btnMenuDiv .btnMenu label input::before {
    display: none
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    margin: 0;
    color: var(--text-color);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 400;
    white-space: nowrap;
    z-index: 1;
    cursor: pointer;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    .moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3) {
        font-size: 1rem;
        padding: 1rem .7075rem
    }
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--shade-2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):hover {
    color: var(--text-color)
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):hover::before {
    opacity: 1
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):nth-child(1) {
    padding-top: 1.413rem
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):nth-last-child(1) {
    padding-bottom: 1.413rem
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3) i {
    font-size: .733rem;
    line-height: 1
}

.moreBtn .btnMenuDiv .btnMenu .filledBtn,
.moreBtn .btnMenuDiv .btnMenu .outlinedBtn,
.moreBtn .btnMenuDiv .btnMenu .btn1,
.moreBtn .btnMenuDiv .btnMenu .btn2,
.moreBtn .btnMenuDiv .btnMenu .btn3,
.moreBtn .btnMenuDiv .btnMenu .btn3 {
    width: calc(100% - 20px);
    margin: 10px;
    padding: .75rem .8rem !important;
    font-size: 1rem
}

.tabMenuNav {
    width: auto;
    overflow-x: auto;
    background-color: var(--white);
    --tab-width-mobile: 100px;
    --tab-width-web: 100px
}

.tabMenuNav .tabMenuDiv {
    width: 100%;
    display: flex;
    text-align: center;
    width: auto;
    margin: 0 auto
}

.tabMenuNav .tabMenuDiv:hover .tabMenu::before {
    background-color: rgba(0, 0, 0, 0)
}

.tabMenuNav .tabMenuDiv:hover .tabMenuBorder {
    background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenu {
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--textGray);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    white-space: nowrap;
    padding: 1rem .5rem;
    border-radius: .7075rem;
    cursor: pointer;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    .tabMenuNav .tabMenuDiv .tabMenu {
        font-size: 1rem;
        padding: .7075rem 1rem;
        width: var(--tab-width-web);
        min-width: var(--tab-width-web)
    }
}

.tabMenuNav .tabMenuDiv .tabMenu::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

.tabMenuNav .tabMenuDiv .tabMenu:hover {
    color: var(--color1)
}

.tabMenuNav .tabMenuDiv .tabMenu:hover~.tabMenuBorder {
    background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenu:active~.tabMenuBorder {
    background-color: var(--highlight);
    opacity: .5;
    transition: all 250ms ease-out
}

.tabMenuNav .tabMenuDiv .tabMenu img {
    width: 25px
}

.tabMenuNav .tabMenuDiv .tabMenu i {
    top: 1px;
    font-size: .878rem
}

.tabMenuNav .tabMenuDiv .tabMenu i,
.tabMenuNav .tabMenuDiv .tabMenu img {
    margin-right: 10px
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1).active~.tabMenuBorder {
    transform: translateX(0%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):active~.active~.tabMenuBorder {
    transform: translateX(0%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2).active~.tabMenuBorder {
    transform: translateX(100%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):active~.active~.tabMenuBorder {
    transform: translateX(100%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3).active~.tabMenuBorder {
    transform: translateX(200%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):active~.active~.tabMenuBorder {
    transform: translateX(200%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4).active~.tabMenuBorder {
    transform: translateX(300%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):active~.active~.tabMenuBorder {
    transform: translateX(300%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5).active~.tabMenuBorder {
    transform: translateX(400%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):active~.active~.tabMenuBorder {
    transform: translateX(400%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6).active~.tabMenuBorder {
    transform: translateX(500%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):active~.active~.tabMenuBorder {
    transform: translateX(500%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7).active~.tabMenuBorder {
    transform: translateX(600%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):active~.active~.tabMenuBorder {
    transform: translateX(600%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8).active~.tabMenuBorder {
    transform: translateX(700%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):active~.active~.tabMenuBorder {
    transform: translateX(700%)
}

.tabMenuNav .tabMenuDiv .activeTabMenu {
    color: var(--black);
    font-weight: 500
}

.tabMenuNav .tabMenuDiv .activeTabMenu::before {
    background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenuBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    margin: 0;
    border: 0;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
    transition: all 375ms ease-out;
    will-change: transform, background
}

@media(min-width: 768px) {
    .tabMenuNav .tabMenuDiv .tabMenuBorder {
        width: var(--tab-width-web);
        min-width: var(--tab-width-web)
    }
}

.tabBarWrapper {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    left: 0;
    transition: var(--transition2)
}

.tabBarWrapper .tabBarSlide {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 0
}

.tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto
}

.dropDownDiv,
.dropSection {
    width: 100%;
    margin: 0 auto
}

.dropDownDiv .dropList,
.dropSection .dropList {
    display: block
}

.dropDownDiv .dropList .dropBox,
.dropSection .dropList .dropBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    transition: var(--transition1);
    cursor: pointer
}

.dropDownDiv .dropList .dropBox .moreBtn,
.dropSection .dropList .dropBox .moreBtn {
    margin-left: auto;
    padding: 1rem
}

.dropDownDiv .dropList .dropBox div,
.dropSection .dropList .dropBox div {
    cursor: pointer;
    transition: var(--transition1)
}

.dropDownDiv .dropList .dropBox div i,
.dropSection .dropList .dropBox div i {
    color: inherit;
    font-size: .878rem;
    cursor: pointer;
    transition: var(--transition1)
}

.dropDownDiv .dropList .dropBox div .dropRemove,
.dropSection .dropList .dropBox div .dropRemove {
    display: none
}

.dropDownDiv .dropList .dropContent,
.dropSection .dropList .dropContent {
    display: none;
    width: 100%
}

.dropDownDiv .dropList .dropContent p:nth-child(1),
.dropSection .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.multiStepForm {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    counter-reset: form-steps
}

.multiStepForm .multiStepSummary {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: var(--bgShadeWeb)
}

@media(min-width: 1280px) {
    .multiStepForm .multiStepSummary {
        position: fixed;
        top: 0;
        left: var(--menuBarWidth);
        min-height: 100vh;
        width: 400px;
        max-width: 400px
    }
}

@media(min-width: 1800px) {
    .multiStepForm .multiStepSummary {
        padding: 5.65rem;
        width: 500px;
        max-width: 500px
    }
}

.multiStepForm .multiStepSummary .headingDiv {
    text-align: center;
    margin-bottom: 2rem
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary .headingDiv {
        text-align: left;
        margin-bottom: 50px
    }
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb {
    margin-bottom: 10px
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a {
    color: var(--black);
    font-size: .878rem;
    padding-right: 15px;
    cursor: pointer;
    transition: var(--transition1)
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:hover {
    color: var(--highlight)
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    content: "";
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    opacity: .7
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:nth-last-child(1) {
    padding-right: 0;
    color: var(--highlight);
    pointer-events: none
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:nth-last-child(1)::after {
    display: none
}

.multiStepForm .multiStepSummary .headingDiv .heading {
    margin: 0;
    font-weight: 400
}

.multiStepForm .multiStepSummary .headingDiv p {
    opacity: .8
}

.multiStepForm .multiStepSummary ul {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 100%;
    margin-bottom: auto;
    display: flex
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary ul {
        position: relative;
        left: unset;
        bottom: unset;
        transform: none;
        flex-direction: column
    }
}

.multiStepForm .multiStepSummary ul .tabMenu {
    flex: 1;
    min-height: 40px;
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f
}

.multiStepForm .multiStepSummary ul .tabMenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu {
        flex: none;
        width: 100%;
        padding-left: 60px;
        margin-bottom: .7075rem
    }
}

.multiStepForm .multiStepSummary ul .tabMenu::before {
    counter-increment: form-steps;
    content: counter(form-steps);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    background-color: rgba(251, 255, 250, .3568627451);
    border: 1px solid var(--highlight);
    border-radius: 100%;
    transition: var(--transition2)
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu::before {
        left: 0;
        transform: translateY(-50%)
    }
}

.multiStepForm .multiStepSummary ul .tabMenu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 51%;
    width: 91%;
    height: 1px;
    border-bottom: 2px dashed var(--borderGray);
    transition: var(--transition2)
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu::after {
        top: 20px;
        left: 20px;
        width: 1px;
        height: 75%;
        border: none;
        border-left: 2px dashed var(--borderGray)
    }
}

.multiStepForm .multiStepSummary ul .tabMenu:nth-last-child(1)::after {
    display: none
}

.multiStepForm .multiStepSummary ul .tabMenu .title {
    display: none;
    margin: 0;
    color: var(--textGray);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 400
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu .title {
        display: block;
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.multiStepForm .multiStepSummary ul .tabMenu p {
    display: none;
    margin-top: 5px;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu p {
        display: block;
        font-size: .937rem
    }
}

.multiStepForm .multiStepSummary ul .activeTabMenu::before {
    background-color: var(--highlight);
    border: 1px solid rgba(0, 0, 0, 0);
    color: var(--white);
    box-shadow: rgba(255, 255, 255, .1) 0px 1px 1px 0px inset, rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
}

.multiStepForm .multiStepSummary ul .activeTabMenu::after {
    border-left: 2px dashed var(--inputColor2)
}

.multiStepForm .multiStepSummary ul .activeTabMenu .title {
    color: var(--black);
    font-weight: 500
}

.multiStepForm .multiStepSummary dotlottie-player {
    display: none
}

@media(min-width: 1024px) {
    .multiStepForm .multiStepSummary dotlottie-player {
        display: block
    }
}

.multiStepForm .formWrapper {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--white)
}

@media(min-width: 1024px) {
    .multiStepForm .formWrapper {
        width: calc(100% - 400px);
        margin-left: auto
    }
}

@media(min-width: 1800px) {
    .multiStepForm .formWrapper {
        width: calc(100% - 500px)
    }
}

.multiStepForm .formWrapper .heading {
    margin: 0;
    display: block;
    width: 100%;
    margin-bottom: .7075rem
}

.multiStepForm .formWrapper .dropDownDiv {
    width: 100%;
    overflow: hidden;
    background-color: var(--white);
    border-radius: .7075rem
}

.multiStepForm .formWrapper .multiStepWrapper {
    width: 100%;
    display: flex;
    align-items: flex-start
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    min-width: 100%;
    height: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2%
}

@media(min-width: 1024px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer {
        padding-left: 5.65rem;
        padding-right: 5.65rem
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer:nth-child(1) {
    height: auto;
    opacity: 1
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title {
    width: 100%;
    margin: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px);
    padding-left: 5px;
    caret-color: var(--inputColor5);
    text-transform: capitalize
}

@media(min-width: 1024px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
        font-size: clamp(25.62890625px, 22.5902871711px + 0.0063304564*100vw, 35.2512px)
    }
}

@media(min-width: 1800px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
        font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px)
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 60%;
    background-color: var(--inputColor5);
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:focus+.messageBox::after {
    display: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:valid+.messageBox:after {
    display: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::placeholder {
    font-size: inherit;
    transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title .messageBox:after {
    content: "";
    display: block !important;
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: var(--inputColor5);
    left: 0;
    top: 0;
    transform: translateY(-130%);
    animation-name: blink;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    opacity: 1
}

@keyframes blink {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .text {
    max-width: 600px;
    line-height: 1.3;
    font-size: 1rem;
    font-weight: 400
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .detailsBox {
    padding: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    gap: 0 2%
}

@media(min-width: 1024px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
        width: calc(100% - 400px - var(--menuBarWidth));
        padding: .7075rem 2rem
    }
}

@media(min-width: 1800px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
        width: calc(100% - 500px - var(--menuBarWidth))
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 150%;
    background: #fff;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv a,
.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv button {
    flex: 1
}

@media(min-width: 768px) {

    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv a,
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv button {
        max-width: 200px
    }
}

.multiStepForm .formWrapper .gridOptionInput,
.multiStepForm .formWrapper .optionForm {
    text-align: left
}

.multiStepForm .formWrapper .gridOptionInput label,
.multiStepForm .formWrapper .optionForm label {
    margin: 0
}

.multiStepForm .formWrapper .gridOptionInput .options,
.multiStepForm .formWrapper .optionForm .options {
    margin-top: 1rem;
    justify-content: flex-start
}

.multiStepForm .formWrapper .gridOptionInput .formDiv,
.multiStepForm .formWrapper .optionForm .formDiv {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--white)
}

.multiStepForm .formWrapper .gridOptionInput .formDiv label,
.multiStepForm .formWrapper .optionForm .formDiv label {
    margin-bottom: 10px
}

.multiStepForm .formWrapper .checkboxList,
.multiStepForm .formWrapper .radioList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--lightGray)
}

.multiStepForm .formWrapper .checkboxList label,
.multiStepForm .formWrapper .radioList label {
    width: 100%;
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem
}

@media(min-width: 568px) {

    .multiStepForm .formWrapper .checkboxList label,
    .multiStepForm .formWrapper .radioList label {
        width: 50%
    }
}

@media(min-width: 568px) {

    .multiStepForm .formWrapper .checkboxList label:nth-child(odd),
    .multiStepForm .formWrapper .radioList label:nth-child(odd) {
        padding-right: 1rem
    }
}

.multiStepForm .formWrapper .checkboxList label:nth-last-child(1),
.multiStepForm .formWrapper .radioList label:nth-last-child(1) {
    margin-bottom: 0
}

@media(min-width: 568px) {

    .multiStepForm .formWrapper .checkboxList label:nth-last-child(2),
    .multiStepForm .formWrapper .radioList label:nth-last-child(2) {
        margin-bottom: 0
    }
}

.inputTable {
    width: 100%;
    background-color: var(--standard-bg-color);
    border-collapse: collapse;
    margin: 1rem 0
}

.inputTable [border=left] {
    border-left: 1px solid var(--borderGray)
}

.inputTable [border=right] {
    border-right: 1px solid var(--borderGray)
}

.inputTable th {
    padding: 10px 20px;
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 1px
}

@media(min-width: 1024px) {
    .inputTable th {
        padding: 10px .7075rem
    }
}

.inputTable .rowTitle {
    background-color: var(--inputColor1)
}

.inputTable tr {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    text-align: left
}

.inputTable tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0)
}

.inputTable tr:nth-last-child(1) .deleteFieldBtn,
.inputTable tr:nth-last-child(1) [rowGeneratorDeleteRowButton],
.inputTable tr:nth-last-child(1) [row_generator_delete_row_button] {
    display: none !important
}

.inputTable tr:nth-last-child(1) .addFieldBtn,
.inputTable tr:nth-last-child(1) [rowGeneratorAddRowButton],
.inputTable tr:nth-last-child(1) [row_generator_add_row_button] {
    display: flex
}

.inputTable tr .deleteFieldBtn,
.inputTable tr [rowGeneratorDeleteRowButton],
.inputTable tr [row_generator_delete_row_button] {
    display: flex
}

.inputTable tr .addFieldBtn,
.inputTable tr [rowGeneratorAddRowButton],
.inputTable tr [row_generator_add_row_button] {
    display: none
}

.inputTable td {
    border-bottom: 1px solid var(--borderGray)
}

.inputTable td button,
.inputTable td [rowGeneratorCallback],
.inputTable td [row_generator_callback] {
    overflow: initial;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.inputTable td button:not([data-tooltip]):before,
.inputTable td [rowGeneratorCallback]:not([data-tooltip]):before,
.inputTable td [row_generator_callback]:not([data-tooltip]):before {
    display: none
}

.inputTable td button:before,
.inputTable td [rowGeneratorCallback]:before,
.inputTable td [row_generator_callback]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.inputTable td button::after,
.inputTable td [rowGeneratorCallback]::after,
.inputTable td [row_generator_callback]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.inputTable td button:focus,
.inputTable td [rowGeneratorCallback]:focus,
.inputTable td [row_generator_callback]:focus {
    z-index: 999
}

.inputTable td button:focus::before,
.inputTable td button:focus::after,
.inputTable td [rowGeneratorCallback]:focus::before,
.inputTable td [rowGeneratorCallback]:focus::after,
.inputTable td [row_generator_callback]:focus::before,
.inputTable td [row_generator_callback]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {

    .inputTable td button:hover,
    .inputTable td [rowGeneratorCallback]:hover,
    .inputTable td [row_generator_callback]:hover {
        z-index: 999
    }

    .inputTable td button:hover::before,
    .inputTable td button:hover::after,
    .inputTable td [rowGeneratorCallback]:hover::before,
    .inputTable td [rowGeneratorCallback]:hover::after,
    .inputTable td [row_generator_callback]:hover::before,
    .inputTable td [row_generator_callback]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.inputTable td button::before,
.inputTable td [rowGeneratorCallback]::before,
.inputTable td [row_generator_callback]::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.inputTable td button::after,
.inputTable td [rowGeneratorCallback]::after,
.inputTable td [row_generator_callback]::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

.inputTable td button:hover,
.inputTable td [rowGeneratorCallback]:hover,
.inputTable td [row_generator_callback]:hover {
    background-color: var(--inputColor1);
    color: var(--inputColor4)
}

.inputTable td button i,
.inputTable td [rowGeneratorCallback] i,
.inputTable td [row_generator_callback] i {
    margin: auto;
    transition: var(--transition1)
}

.checkboxDropDownGroup {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    z-index: 1
}

.checkboxDropDownGroup .heading {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: .7075rem;
    border-left: 3px solid var(--highlight);
    padding-left: 10px;
    color: var(--black);
    font-weight: 500
}

.checkboxDropDownGroup .checkboxListDiv {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 3%
}

.checkboxDropDownGroup .checkboxListDiv .dropList {
    display: block
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    transition: var(--transition1);
    cursor: pointer
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .moreBtn {
    margin-left: auto;
    padding: 1rem
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div {
    cursor: pointer;
    transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div i {
    color: inherit;
    font-size: .878rem;
    cursor: pointer;
    transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div .dropRemove {
    display: none
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent {
    display: none;
    width: 100%
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.checkboxDropDownGroup .checkboxListDiv .dropList {
    margin-bottom: 1.3333rem;
    transition: var(--transition2)
}

@media(min-width: 360px) {
    .checkboxDropDownGroup .checkboxListDiv .dropList {
        width: 48.5%
    }
}

@media(min-width: 768px) {
    .checkboxDropDownGroup .checkboxListDiv .dropList {
        width: 31%
    }
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox {
    padding: 10px;
    padding-left: 1rem;
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor2);
    border-radius: var(--inputRadius);
    box-shadow: var(--inputColor2) 0px 0px 0px 0px
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .title {
    margin-top: 0
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--inputColor1);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn .dropRemove::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

@media(min-width: 568px) {
    .checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn .dropRemove::after {
        display: none
    }
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 2;
    display: none;
    padding: 10px 0;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-top: none;
    border-radius: var(--radius);
    box-shadow: rgba(22, 23, 26, .103) 0px 15px 25px, rgba(0, 0, 0, .05) 0px 5px 10px
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent label {
    padding: 10px 0;
    padding-left: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--lightGray);
    cursor: pointer
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent label:nth-last-child(1) {
    border-bottom: none
}

.addonModules {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0
}

.addonModules .title {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 1rem;
    border-left: 3px solid var(--highlight);
    padding-left: 5px;
    color: var(--black);
    font-weight: 500
}

.addonModules .title::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: 1rem;
    background-color: var(--inputBorder)
}

.addonModules .addonModuleCard {
    width: 100%;
    background-color: var(--standard-bg-color);
    border-collapse: collapse;
    margin: 1rem 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    padding: 1.413rem;
    border: 1px solid var(--lightGray);
    border-radius: .7075rem;
    box-shadow: rgba(0, 0, 0, .058) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px;
    margin-bottom: .7075rem
}

.addonModules .addonModuleCard [border=left] {
    border-left: 1px solid var(--borderGray)
}

.addonModules .addonModuleCard [border=right] {
    border-right: 1px solid var(--borderGray)
}

.addonModules .addonModuleCard th {
    padding: 10px 20px;
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 1px
}

@media(min-width: 1024px) {
    .addonModules .addonModuleCard th {
        padding: 10px .7075rem
    }
}

.addonModules .addonModuleCard .rowTitle {
    background-color: var(--inputColor1)
}

.addonModules .addonModuleCard tr {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    text-align: left
}

.addonModules .addonModuleCard tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0)
}

.addonModules .addonModuleCard tr:nth-last-child(1) .deleteFieldBtn,
.addonModules .addonModuleCard tr:nth-last-child(1) [rowGeneratorDeleteRowButton],
.addonModules .addonModuleCard tr:nth-last-child(1) [row_generator_delete_row_button] {
    display: none !important
}

.addonModules .addonModuleCard tr:nth-last-child(1) .addFieldBtn,
.addonModules .addonModuleCard tr:nth-last-child(1) [rowGeneratorAddRowButton],
.addonModules .addonModuleCard tr:nth-last-child(1) [row_generator_add_row_button] {
    display: flex
}

.addonModules .addonModuleCard tr .deleteFieldBtn,
.addonModules .addonModuleCard tr [rowGeneratorDeleteRowButton],
.addonModules .addonModuleCard tr [row_generator_delete_row_button] {
    display: flex
}

.addonModules .addonModuleCard tr .addFieldBtn,
.addonModules .addonModuleCard tr [rowGeneratorAddRowButton],
.addonModules .addonModuleCard tr [row_generator_add_row_button] {
    display: none
}

.addonModules .addonModuleCard td {
    border-bottom: 1px solid var(--borderGray)
}

.addonModules .addonModuleCard td button,
.addonModules .addonModuleCard td [rowGeneratorCallback],
.addonModules .addonModuleCard td [row_generator_callback] {
    overflow: initial;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.addonModules .addonModuleCard td button:not([data-tooltip]):before,
.addonModules .addonModuleCard td [rowGeneratorCallback]:not([data-tooltip]):before,
.addonModules .addonModuleCard td [row_generator_callback]:not([data-tooltip]):before {
    display: none
}

.addonModules .addonModuleCard td button:before,
.addonModules .addonModuleCard td [rowGeneratorCallback]:before,
.addonModules .addonModuleCard td [row_generator_callback]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.addonModules .addonModuleCard td button::after,
.addonModules .addonModuleCard td [rowGeneratorCallback]::after,
.addonModules .addonModuleCard td [row_generator_callback]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.addonModules .addonModuleCard td button:focus,
.addonModules .addonModuleCard td [rowGeneratorCallback]:focus,
.addonModules .addonModuleCard td [row_generator_callback]:focus {
    z-index: 999
}

.addonModules .addonModuleCard td button:focus::before,
.addonModules .addonModuleCard td button:focus::after,
.addonModules .addonModuleCard td [rowGeneratorCallback]:focus::before,
.addonModules .addonModuleCard td [rowGeneratorCallback]:focus::after,
.addonModules .addonModuleCard td [row_generator_callback]:focus::before,
.addonModules .addonModuleCard td [row_generator_callback]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {

    .addonModules .addonModuleCard td button:hover,
    .addonModules .addonModuleCard td [rowGeneratorCallback]:hover,
    .addonModules .addonModuleCard td [row_generator_callback]:hover {
        z-index: 999
    }

    .addonModules .addonModuleCard td button:hover::before,
    .addonModules .addonModuleCard td button:hover::after,
    .addonModules .addonModuleCard td [rowGeneratorCallback]:hover::before,
    .addonModules .addonModuleCard td [rowGeneratorCallback]:hover::after,
    .addonModules .addonModuleCard td [row_generator_callback]:hover::before,
    .addonModules .addonModuleCard td [row_generator_callback]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.addonModules .addonModuleCard td button::before,
.addonModules .addonModuleCard td [rowGeneratorCallback]::before,
.addonModules .addonModuleCard td [row_generator_callback]::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.addonModules .addonModuleCard td button::after,
.addonModules .addonModuleCard td [rowGeneratorCallback]::after,
.addonModules .addonModuleCard td [row_generator_callback]::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

.addonModules .addonModuleCard td button:hover,
.addonModules .addonModuleCard td [rowGeneratorCallback]:hover,
.addonModules .addonModuleCard td [row_generator_callback]:hover {
    background-color: var(--inputColor1);
    color: var(--inputColor4)
}

.addonModules .addonModuleCard td button i,
.addonModules .addonModuleCard td [rowGeneratorCallback] i,
.addonModules .addonModuleCard td [row_generator_callback] i {
    margin: auto;
    transition: var(--transition1)
}

.addonModules .addonModulesBtnDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem
}

.addonModules .addonModulesBtnDiv .addModuleBtn {
    color: var(--borderGray);
    font-weight: 500;
    background-color: var(--black);
    border: 1px solid var(--borderGray);
    border-radius: 3rem
}

.detailsBox {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 5px;
    margin: 0
}

.detailsBox .title {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 1rem;
    border-left: 3px solid var(--highlight);
    padding-left: 5px;
    color: var(--black);
    font-weight: 500
}

.detailsBox .title::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: 1rem;
    background-color: var(--shade-5)
}

.detailsBox .inputDiv label {
    color: var(--text-color);
    font-size: .878rem;
    margin-bottom: 5px;
    opacity: .7
}

.fileWrapper {
    width: 100%
}

.fileWrapper .fileContainer {
    width: 100%;
    border: 2px dashed var(--inputColor2);
    background-color: var(--inputColor1);
    padding: 2rem;
    border-radius: var(--radius);
    transition: var(--transition1);
    cursor: pointer
}

.fileWrapper .fileContainer:hover {
    border: 2px dashed var(--inputColor3)
}

.fileWrapper .fileContainer:hover:before {
    color: var(--inputColor5)
}

.fileWrapper .fileContainer:before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gray);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 500;
    transition: var(--transition1);
    cursor: pointer
}

.fileWrapper .fileContainer input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.fileWrapper .uploadedFilesContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--inputColor1);
    padding: 1rem;
    border-radius: var(--radius);
    margin-top: 10px
}

.fileWrapper .uploadedFilesContainer .uploadedFile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7075rem 1rem;
    padding-right: 50px;
    border: 1px solid var(--lightGray);
    border-radius: var(--radius);
    background-color: var(--white);
    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, .05) 0px 1px 2px 0px
}

.fileWrapper .uploadedFilesContainer .uploadedFile:hover {
    box-shadow: rgba(33, 35, 38, .1) 0px 10px 10px -10px
}

.fileWrapper .uploadedFilesContainer .uploadedFile:nth-child(1) {
    margin-top: 0
}

.fileWrapper .uploadedFilesContainer .deleteFileButton {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50px;
    margin-left: 1rem;
    color: var(--black);
    border-radius: 0;
    border-left: 1px solid var(--borderGray);
    background-color: rgba(0, 0, 0, 0)
}

.fileWrapper .uploadedFilesContainer .deleteFileButton:hover {
    color: var(--red)
}

.fileWrapper .uploadedFilesContainer .deleteFileButton i {
    transform: none
}

.fileWrapper .uploadedFilesContainer .noFileLabel {
    width: 100%;
    text-align: center;
    color: var(--gray);
    font-weight: 400
}

.tableDiv {
    width: 100%
}

table {
    width: 100%;
    display: table;
    border-spacing: 0;
    border-collapse: collapse
}

table tr {
    display: table-row;
    transition: var(--transition1)
}

table th,
table td {
    border-collapse: collapse;
    background-clip: padding-box;
    text-align: left;
    padding: .25rem .75rem
}

table th:has(input, select, textarea, selector selected item),
table td:has(input, select, textarea, selector selected item) {
    padding: 0
}

table th:has(textarea),
table td:has(textarea) {
    min-width: 250px
}

table th:has(input, textarea),
table td:has(input, textarea) {
    padding-top: 0;
    padding-bottom: 0;
    z-index: 3 !important
}

table th:has(selector),
table td:has(selector) {
    z-index: 4 !important;
    padding: 0
}

table th:has(selector) selected item,
table td:has(selector) selected item {
    padding-top: 0;
    padding-bottom: 0
}

table th input:not([type=checkbox], [type=radio]),
table th select,
table th textarea,
table th selector selected item,
table td input:not([type=checkbox], [type=radio]),
table td select,
table td textarea,
table td selector selected item {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    padding: .65rem 20px;
    border: none !important;
    border-radius: 0;
    background: rgba(0, 0, 0, 0) !important;
    border-color: rgba(0, 0, 0, 0) !important
}

@media(min-width: 1024px) {

    table th input:not([type=checkbox], [type=radio]),
    table th select,
    table th textarea,
    table th selector selected item,
    table td input:not([type=checkbox], [type=radio]),
    table td select,
    table td textarea,
    table td selector selected item {
        padding: .65rem .7075rem
    }
}

table th input:not([type=checkbox], [type=radio]):focus,
table th input:not([type=checkbox], [type=radio]):active,
table th select:focus,
table th select:active,
table th textarea:focus,
table th textarea:active,
table th selector selected item:focus,
table th selector selected item:active,
table td input:not([type=checkbox], [type=radio]):focus,
table td input:not([type=checkbox], [type=radio]):active,
table td select:focus,
table td select:active,
table td textarea:focus,
table td textarea:active,
table td selector selected item:focus,
table td selector selected item:active {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important
}

table th p,
table td p {
    margin: 0
}

table th selector,
table td selector {
    width: 100%;
    height: 100%
}

table th selector selected,
table td selector selected {
    width: inherit;
    height: inherit;
    background: inherit !important;
    border-color: rgba(0, 0, 0, 0) !important;
    border-radius: 0
}

table th selector selected items,
table td selector selected items {
    background: inherit !important;
    border-color: rgba(0, 0, 0, 0) !important
}

table th textarea,
table td textarea {
    height: 70px;
    min-height: 70px
}

table th textarea::placeholder,
table td textarea::placeholder {
    transform: translateY(50%);
    transition: var(--transition1)
}

table th textarea:focus::placeholder,
table td textarea:focus::placeholder {
    opacity: 0
}

table th input[type=time],
table td input[type=time] {
    font-size: clamp(25.62890625px, 22.5902871711px + 0.0063304564*100vw, 35.2512px)
}

table td {
    border-bottom: 1px solid rgba(255, 255, 255, .5411764706);
    transition: var(--transition1);
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap
}

table td .xlIcon,
table td .lgIcon {
    overflow: initial
}

table td .xlIcon:not([data-tooltip]):before,
table td .lgIcon:not([data-tooltip]):before {
    display: none
}

table td .xlIcon:before,
table td .lgIcon:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

table td .xlIcon::after,
table td .lgIcon::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

table td .xlIcon:focus,
table td .lgIcon:focus {
    z-index: 999
}

table td .xlIcon:focus::before,
table td .xlIcon:focus::after,
table td .lgIcon:focus::before,
table td .lgIcon:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media(min-width: 768px) {

    table td .xlIcon:hover,
    table td .lgIcon:hover {
        z-index: 999
    }

    table td .xlIcon:hover::before,
    table td .xlIcon:hover::after,
    table td .lgIcon:hover::before,
    table td .lgIcon:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

table td .xlIcon::before,
table td .lgIcon::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

table td .xlIcon::after,
table td .lgIcon::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

[width=xxs] {
    width: 45px;
    min-width: 45px
}

[width=xs] {
    width: 75px;
    min-width: 75px
}

[width=sm] {
    width: 100px;
    min-width: 100px
}

[width=md] {
    width: 150px;
    min-width: 150px
}

[width=lg] {
    width: 200px;
    min-width: 200px
}

[width=xl] {
    width: 250px;
    min-width: 250px
}

[width=xxl] {
    width: 300px;
    min-width: 300px
}

[width=xxxl] {
    width: 350px;
    min-width: 350px
}

[align=left] {
    text-align: left
}

[align=center] {
    text-align: center !important
}

[align=center] * {
    margin: 0 auto;
    text-align: center
}

[align=right] {
    text-align: right
}

[align=justify] {
    text-align: justify
}

.textLimit {
    overflow: hidden
}

.name {
    color: var(--text-color);
    margin: 0;
    font-weight: 500;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.price {
    color: var(--text-color);
    margin: 0;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 500;
    white-space: noWrap;
    pointer-events: none;
    z-index: 2
}

.price:empty {
    display: none
}

.price span {
    font-weight: 400
}

.cost {
    display: inline-block
}

.cost span {
    color: var(--text-color);
    text-align: right;
    display: block;
    font-weight: 400
}

.cost span:nth-child(1) {
    font-size: .878rem;
    font-weight: 500
}

.cost span:nth-child(2) {
    margin-top: .5rem;
    font-size: .667rem;
    font-weight: 400;
    padding-left: .25rem
}

.cost span:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 11px;
    background-color: var(--green);
    border-radius: var(--radius)
}

.datePeriod {
    color: var(--text-color)
}

.datePeriod span,
.datePeriod p {
    display: block;
    font-weight: 400;
    padding-left: .7rem
}

.datePeriod span::after,
.datePeriod p::after {
    content: "";
    position: absolute;
    top: 3px;
    left: -1.5px;
    width: 5px;
    height: 5px;
    z-index: 1;
    border-radius: var(--radius)
}

.datePeriod span::before,
.datePeriod p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--borderGray)
}

.datePeriod span:nth-child(1)::after,
.datePeriod p:nth-child(1)::after {
    background-color: #81c376
}

.datePeriod span:nth-child(2),
.datePeriod p:nth-child(2) {
    margin-top: .25rem
}

.datePeriod span:nth-child(2)::after,
.datePeriod p:nth-child(2)::after {
    background-color: #e57575
}

.contactActionList {
    margin-top: .5rem
}

.contactActionList .contactList {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: .25rem 0;
    z-index: 2
}

.contactActionList .contactList:hover .contactCopy {
    opacity: 1;
    transform: scale(1.1)
}

.contactActionList .contactList:hover .contactCopy i {
    opacity: .5
}

.contactActionList .contactList:nth-last-child(1) {
    border-bottom: none
}

.contactActionList .contactList .phone,
.contactActionList .contactList .email,
.contactActionList .contactList .whatsapp {
    padding: .25rem 0
}

.contactActionList .contactList .contactCopy {
    opacity: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    margin-left: .5rem;
    border-radius: var(--inputRadius);
    background-color: var(--inputColor1);
    cursor: pointer;
    transition: var(--transition1)
}

.contactActionList .contactList .contactCopy:hover i {
    opacity: 1;
    color: var(--text-color)
}

.contactActionList .contactList .contactCopy:focus,
.contactActionList .contactList .contactCopy:active {
    color: var(--standard-bg-color);
    background-color: var(--text-color)
}

.contactActionList .contactList .contactCopy i {
    color: var(--text-color);
    cursor: pointer
}

.email,
.whatsapp,
.phone,
.idText,
.dateText,
.timeText,
.subSourceText,
.sourceText,
.departmentText,
.addressText,
.locationText,
.userText {
    color: var(--text-color);
    display: inline-block;
    font-size: .937rem;
    font-weight: 500;
    white-space: noWrap;
    transition: var(--transition1)
}

.email:empty,
.whatsapp:empty,
.phone:empty,
.idText:empty,
.dateText:empty,
.timeText:empty,
.subSourceText:empty,
.sourceText:empty,
.departmentText:empty,
.addressText:empty,
.locationText:empty,
.userText:empty {
    margin: 0 !important
}

.email:empty::before,
.whatsapp:empty::before,
.phone:empty::before,
.idText:empty::before,
.dateText:empty::before,
.timeText:empty::before,
.subSourceText:empty::before,
.sourceText:empty::before,
.departmentText:empty::before,
.addressText:empty::before,
.locationText:empty::before,
.userText:empty::before {
    display: none !important
}

.email::before,
.whatsapp::before,
.phone::before,
.idText::before,
.dateText::before,
.timeText::before,
.subSourceText::before,
.sourceText::before,
.departmentText::before,
.addressText::before,
.locationText::before,
.userText::before {
    top: 2px;
    margin-right: .5rem;
    color: inherit;
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transform: translateY(2px);
    opacity: .7
}

.userText {
    font-weight: 600;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.userText::before {
    content: ""
}

.addressText,
.locationText {
    font-size: .937rem;
    text-transform: capitalize;
    z-index: 2
}

.addressText::before,
.locationText::before {
    content: ""
}

.departmentText {
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.departmentText::before {
    content: ""
}

.sourceText {
    font-weight: 400;
    text-transform: capitalize;
    pointer-events: none;
    pointer-events: none;
    z-index: 2
}

.sourceText::before {
    content: ""
}

.subSourceText {
    font-size: .733rem;
    text-transform: capitalize;
    font-weight: 400;
    margin-top: .5rem;
    pointer-events: none;
    pointer-events: none;
    z-index: 2
}

.subSourceText::before {
    display: none;
    opacity: 0;
    content: ""
}

.timeText {
    pointer-events: none;
    z-index: 2
}

.timeText::before {
    content: ""
}

.dateText {
    font-size: .878rem;
    pointer-events: none;
    opacity: .7;
    pointer-events: none;
    z-index: 2
}

.dateText::before {
    content: ""
}

.idText {
    font-size: .878rem;
    opacity: .7;
    pointer-events: none;
    z-index: 2
}

.idText::before {
    content: "#"
}

.phone {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.phone:hover {
    color: #293db1
}

.phone::before {
    content: ""
}

.whatsapp {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.whatsapp:hover {
    color: #293db1
}

.whatsapp::before {
    content: ""
}

.email {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.email:hover {
    color: #293db1
}

.email::before {
    content: ""
}

.messageText {
    z-index: 2
}

.messageText:hover .label {
    color: var(--color1)
}

.messageText:hover .message {
    display: block;
    z-index: 101
}

.messageText .label {
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-size: .733rem;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer
}

.messageText .label i {
    font-size: .733rem;
    color: inherit;
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px solid var(--inputColor3)
}

.messageText .message {
    color: var(--text-color);
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    width: 300px;
    font-size: .937rem;
    font-weight: 400;
    line-height: 1.5 !important;
    white-space: wrap;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1rem
}

@media(min-width: 768px) {
    .messageText .message {
        width: 500px
    }
}

.sText {
    color: var(--text-color);
    display: block;
    font-size: .878rem;
    font-weight: 400;
    margin-bottom: .5rem;
    pointer-events: none;
    z-index: 2
}

.bText {
    color: var(--text-color);
    display: block;
    font-size: .937rem;
    margin: 0;
    pointer-events: none;
    z-index: 2
}

[reminder=active] {
    border: 1px solid #b6f3b6
}

[reminder=done] {
    background-color: #ecffef
}

[reminder=done] .btn {
    display: none
}

[reminder=cancel] {
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray);
    opacity: .5
}

[reminder=cancel] .btn {
    display: none
}

[label] {
    height: 24px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: .733rem;
    font-weight: 500;
    padding: 5px;
    border-radius: 3px 0 0 3px
}

[label]:empty {
    padding: 0
}

[label]:empty:before {
    display: none
}

[label]::after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px;
    height: 0;
    display: inline-block;
    border: 12px solid #e8e9ee;
    border-right: 10px inset rgba(0, 0, 0, 0) !important
}

[label=red] {
    color: var(--white);
    background-color: #ff5b5b
}

[label=red]::after {
    border-color: #ff5b5b rgba(0, 0, 0, 0) #ff5b5b #ff5b5b
}

[label=orange] {
    color: var(--white);
    background-color: #ff8146
}

[label=orange]::after {
    border-color: #ff8146 rgba(0, 0, 0, 0) #ff8146 #ff8146
}

[label=yellow] {
    color: var(--darkGray);
    background-color: #fff75b
}

[label=yellow]::after {
    border-color: #fff75b rgba(0, 0, 0, 0) #fff75b #fff75b
}

[label=green] {
    color: var(--white);
    background-color: #36bb22
}

[label=green]::after {
    border-color: #36bb22 rgba(0, 0, 0, 0) #36bb22 #36bb22
}

[label=blue] {
    color: var(--white);
    background-color: #5b69ff
}

[label=blue]::after {
    border-color: #5b69ff rgba(0, 0, 0, 0) #5b69ff #5b69ff
}

[label=gray] {
    color: var(--darkGray);
    background-color: #e8e9ee
}

[label=gray]::after {
    border-color: #e8e9ee rgba(0, 0, 0, 0) #e8e9ee #e8e9ee
}

.timeShow {
    display: block
}

.popupWindow,
.centerPopupDiv,
.alertPopupDiv,
.messageDiv {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    transition: var(--transition1)
}

.popupWindow .icon,
.centerPopupDiv .icon,
.alertPopupDiv .icon,
.messageDiv .icon {
    width: 100px;
    margin: 0 auto;
    font-size: clamp(25.62890625px, 22.5902871711px + 0.0063304564*100vw, 35.2512px)
}

.popupWindow .image,
.centerPopupDiv .image,
.alertPopupDiv .image,
.messageDiv .image {
    width: 100%;
    max-width: 300px;
    margin: 0 auto
}

.popupWindow .subTitle,
.centerPopupDiv .subTitle,
.alertPopupDiv .subTitle,
.messageDiv .subTitle {
    color: var(--color1)
}

.popupWindow .name,
.popupWindow .subHeading,
.centerPopupDiv .name,
.centerPopupDiv .subHeading,
.alertPopupDiv .name,
.alertPopupDiv .subHeading,
.messageDiv .name,
.messageDiv .subHeading {
    display: block;
    margin-bottom: 0
}

.popupWindow .heading,
.popupWindow .title,
.centerPopupDiv .heading,
.centerPopupDiv .title,
.alertPopupDiv .heading,
.alertPopupDiv .title,
.messageDiv .heading,
.messageDiv .title {
    margin: 0;
    margin-bottom: 1rem
}

.popupWindow .heading,
.centerPopupDiv .heading,
.alertPopupDiv .heading,
.messageDiv .heading {
    display: block;
    color: var(--black);
    font-weight: 600
}

.popupWindow .text,
.centerPopupDiv .text,
.alertPopupDiv .text,
.messageDiv .text {
    font-size: .937rem
}

.popupWindow *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty,
.centerPopupDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty,
.alertPopupDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty,
.messageDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty {
    display: none
}

.popupWindow p,
.centerPopupDiv p,
.alertPopupDiv p,
.messageDiv p {
    line-height: 1.3
}

.popupWindow .listDiv,
.centerPopupDiv .listDiv,
.alertPopupDiv .listDiv,
.messageDiv .listDiv {
    margin-top: 1rem
}

.popupWindow .listDiv li,
.centerPopupDiv .listDiv li,
.alertPopupDiv .listDiv li,
.messageDiv .listDiv li {
    color: var(--darkGray);
    font-size: .878rem;
    margin-bottom: 1rem;
    padding-left: 1rem
}

.popupWindow .listDiv li .sText,
.centerPopupDiv .listDiv li .sText,
.alertPopupDiv .listDiv li .sText,
.messageDiv .listDiv li .sText {
    margin-top: .25rem
}

.popupWindow .listDiv li::before,
.centerPopupDiv .listDiv li::before,
.alertPopupDiv .listDiv li::before,
.messageDiv .listDiv li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 5px;
    height: 5px;
    background-color: var(--color3);
    border-radius: var(--radius)
}

.popupWindow .tableList,
.centerPopupDiv .tableList,
.alertPopupDiv .tableList,
.messageDiv .tableList {
    width: 100%;
    margin-top: 1rem
}

.popupWindow .tableList li,
.centerPopupDiv .tableList li,
.alertPopupDiv .tableList li,
.messageDiv .tableList li {
    display: flex;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.popupWindow .tableList li label,
.centerPopupDiv .tableList li label,
.alertPopupDiv .tableList li label,
.messageDiv .tableList li label {
    position: relative;
    top: 0;
    left: 0;
    flex: 1;
    margin: 0;
    color: var(--textGray);
    font-size: .878rem;
    font-weight: 400;
    padding: 0;
    line-height: 1.6
}

.popupWindow .tableList li p,
.centerPopupDiv .tableList li p,
.alertPopupDiv .tableList li p,
.messageDiv .tableList li p {
    flex: 2;
    margin: 0;
    color: var(--darkGray);
    font-size: .878rem;
    font-weight: 500;
    line-height: 1.6
}

.popupWindow .tableList li span,
.centerPopupDiv .tableList li span,
.alertPopupDiv .tableList li span,
.messageDiv .tableList li span {
    color: var(--textGray);
    margin: 0 .5rem
}

.popupWindow .editDetailsBtn,
.centerPopupDiv .editDetailsBtn,
.alertPopupDiv .editDetailsBtn,
.messageDiv .editDetailsBtn {
    margin: 0;
    border-radius: var(--inputRadius);
    margin-left: auto
}

.popupWindow .tabMenuNav,
.centerPopupDiv .tabMenuNav,
.alertPopupDiv .tabMenuNav,
.messageDiv .tabMenuNav {
    padding: 1rem;
    padding-bottom: 0
}

.popupWindow #tabWrapper .tabBarSlide,
.centerPopupDiv #tabWrapper .tabBarSlide,
.alertPopupDiv #tabWrapper .tabBarSlide,
.messageDiv #tabWrapper .tabBarSlide {
    padding: 1rem
}

.popupWindow .popupCloseBg,
.centerPopupDiv .popupCloseBg,
.alertPopupDiv .popupCloseBg,
.messageDiv .popupCloseBg {
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .253);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in
}

.popupWindow .btnDiv,
.popupWindow .btnSection,
.centerPopupDiv .btnDiv,
.centerPopupDiv .btnSection,
.alertPopupDiv .btnDiv,
.alertPopupDiv .btnSection,
.messageDiv .btnDiv,
.messageDiv .btnSection {
    gap: 20px;
    margin-top: 2rem
}

.popupWindow .btnDiv a,
.popupWindow .btnDiv button,
.popupWindow .btnSection a,
.popupWindow .btnSection button,
.centerPopupDiv .btnDiv a,
.centerPopupDiv .btnDiv button,
.centerPopupDiv .btnSection a,
.centerPopupDiv .btnSection button,
.alertPopupDiv .btnDiv a,
.alertPopupDiv .btnDiv button,
.alertPopupDiv .btnSection a,
.alertPopupDiv .btnSection button,
.messageDiv .btnDiv a,
.messageDiv .btnDiv button,
.messageDiv .btnSection a,
.messageDiv .btnSection button {
    min-width: 150px;
    padding: 1rem;
    font-size: 1rem
}

.popupPadding {
    padding-left: 1rem;
    padding-right: 1rem
}

@media(min-width: 768px) {
    .popupPadding {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.infoMessagePopup,
.warningMessagePopup,
.successMessagePopup,
.errorMessagePopup,
.timeOutPopup,
.commonPopup,
.centerPopup,
[side-popup],
.sidePopup,
.infoAlertPopup,
.infoPopup,
.warningAlertPopup,
.warningPopup,
.successAlertPopup,
.successPopup,
.errorAlertPopup,
.alertPopup,
.alertPopup {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 305;
    width: 100%;
    height: 100vh;
    transition: var(--transition1)
}

.infoAlertPopup,
.infoPopup,
.warningAlertPopup,
.warningPopup,
.successAlertPopup,
.successPopup,
.errorAlertPopup,
.alertPopup {
    display: flex;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity .5s ease-in-out;
    overflow: auto;
    padding: 1rem;
    z-index: 380
}

.infoAlertPopup .alertPopupDiv,
.infoPopup .alertPopupDiv,
.warningAlertPopup .alertPopupDiv,
.warningPopup .alertPopupDiv,
.successAlertPopup .alertPopupDiv,
.successPopup .alertPopupDiv,
.errorAlertPopup .alertPopupDiv,
.alertPopup .alertPopupDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    max-width: 450px;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
    border-radius: var(--radius);
    text-align: center;
    overflow: hidden;
    z-index: 115
}

.infoAlertPopup .alertPopupDiv .alertIcon,
.infoPopup .alertPopupDiv .alertIcon,
.warningAlertPopup .alertPopupDiv .alertIcon,
.warningPopup .alertPopupDiv .alertIcon,
.successAlertPopup .alertPopupDiv .alertIcon,
.successPopup .alertPopupDiv .alertIcon,
.errorAlertPopup .alertPopupDiv .alertIcon,
.alertPopup .alertPopupDiv .alertIcon {
    font-size: 1.413rem;
    margin-bottom: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px)
}

.infoAlertPopup .alertPopupDiv .heading,
.infoPopup .alertPopupDiv .heading,
.warningAlertPopup .alertPopupDiv .heading,
.warningPopup .alertPopupDiv .heading,
.successAlertPopup .alertPopupDiv .heading,
.successPopup .alertPopupDiv .heading,
.errorAlertPopup .alertPopupDiv .heading,
.alertPopup .alertPopupDiv .heading {
    color: var(--darkGray);
    font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px);
    font-weight: 500;
    margin: 0;
    line-height: 1
}

.infoAlertPopup .alertPopupDiv .text,
.infoPopup .alertPopupDiv .text,
.warningAlertPopup .alertPopupDiv .text,
.warningPopup .alertPopupDiv .text,
.successAlertPopup .alertPopupDiv .text,
.successPopup .alertPopupDiv .text,
.errorAlertPopup .alertPopupDiv .text,
.alertPopup .alertPopupDiv .text {
    font-size: 1rem;
    text-transform: capitalize
}

.infoAlertPopup .popupCloseIcon,
.infoPopup .popupCloseIcon,
.warningAlertPopup .popupCloseIcon,
.warningPopup .popupCloseIcon,
.successAlertPopup .popupCloseIcon,
.successPopup .popupCloseIcon,
.errorAlertPopup .popupCloseIcon,
.alertPopup .popupCloseIcon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem;
    background-color: var(--lightGray);
    border-radius: var(--inputRadius);
    border: 1px solid var(--lightGray);
    cursor: pointer;
    transition: var(--transition1)
}

.infoAlertPopup .popupCloseIcon:hover,
.infoPopup .popupCloseIcon:hover,
.warningAlertPopup .popupCloseIcon:hover,
.warningPopup .popupCloseIcon:hover,
.successAlertPopup .popupCloseIcon:hover,
.successPopup .popupCloseIcon:hover,
.errorAlertPopup .popupCloseIcon:hover,
.alertPopup .popupCloseIcon:hover {
    background-color: var(--borderGray)
}

.infoAlertPopup .popupCloseIcon i,
.infoPopup .popupCloseIcon i,
.warningAlertPopup .popupCloseIcon i,
.warningPopup .popupCloseIcon i,
.successAlertPopup .popupCloseIcon i,
.successPopup .popupCloseIcon i,
.errorAlertPopup .popupCloseIcon i,
.alertPopup .popupCloseIcon i {
    color: var(--black);
    font-size: .667rem;
    cursor: pointer;
    transition: var(--transition1)
}

.infoAlertPopup .popupCloseBg,
.infoPopup .popupCloseBg,
.warningAlertPopup .popupCloseBg,
.warningPopup .popupCloseBg,
.successAlertPopup .popupCloseBg,
.successPopup .popupCloseBg,
.errorAlertPopup .popupCloseBg,
.alertPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    background-color: rgba(0, 9, 27, .089);
    cursor: pointer;
    transition: opacity .3s !important
}

.errorAlertPopup .alertIcon,
.alertPopup .alertIcon {
    color: var(--red)
}

.successAlertPopup .alertIcon,
.successPopup .alertIcon {
    color: var(--green)
}

.warningAlertPopup .alertIcon,
.warningPopup .alertIcon {
    color: #f3d571
}

.infoAlertPopup .alertIcon,
.infoPopup .alertIcon {
    color: var(--textGray)
}

[side-popup],
.sidePopup {
    min-height: 100vh;
    text-align: left;
    background-color: var(--white);
    border-left: 1px solid var(--borderGray);
    box-shadow: rgba(50, 50, 93, .25) 0px 100px 10px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
    transform: translateX(120%);
    overflow: auto
}

@media(min-width: 768px) {

    [side-popup],
    .sidePopup {
        max-width: 500px;
        transform: translateX(800px)
    }
}

[side-popup] .popupCloseIcon,
.sidePopup .popupCloseIcon {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    padding: 1rem;
    background-color: var(--color2);
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition1)
}

[side-popup] .popupCloseIcon:hover,
.sidePopup .popupCloseIcon:hover {
    background-color: var(--color3)
}

[side-popup] .popupCloseIcon:hover i,
.sidePopup .popupCloseIcon:hover i {
    color: var(--white)
}

[side-popup] .popupCloseIcon i,
.sidePopup .popupCloseIcon i {
    color: var(--white);
    cursor: pointer;
    transition: var(--transition1)
}

[side-popup] .sidePopupSection,
.sidePopup .sidePopupSection {
    z-index: 1;
    height: 100vh;
    background-color: var(--white)
}

[side-popup] .sidePopupSection .btnSection,
.sidePopup .sidePopupSection .btnSection {
    margin-top: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px)
}

[side-popup] .sidePopupSection .btnSection .btn,
.sidePopup .sidePopupSection .btnSection .btn {
    margin: 0;
    margin-right: 1rem !important
}

.commonPopup,
[center-popup],
.centerPopup {
    display: flex;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity .5s ease-in-out;
    overflow: auto;
    padding: 1rem
}

.commonPopup .centerPopupDiv,
[center-popup] .centerPopupDiv,
.centerPopup .centerPopupDiv {
    margin: auto;
    width: 100%;
    max-width: 500px;
    height: auto;
    min-height: 300px;
    padding: 2rem;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
    border-radius: var(--radius);
    text-align: center;
    overflow: hidden;
    z-index: 115
}

.commonPopup .popupCloseIcon,
[center-popup] .popupCloseIcon,
.centerPopup .popupCloseIcon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem;
    background-color: var(--lightGray);
    border-radius: var(--inputRadius);
    border: 1px solid var(--lightGray);
    cursor: pointer;
    transition: var(--transition1)
}

.commonPopup .popupCloseIcon:hover,
[center-popup] .popupCloseIcon:hover,
.centerPopup .popupCloseIcon:hover {
    background-color: var(--borderGray)
}

.commonPopup .popupCloseIcon:hover i,
[center-popup] .popupCloseIcon:hover i,
.centerPopup .popupCloseIcon:hover i {
    color: var(--color1)
}

.commonPopup .popupCloseIcon i,
[center-popup] .popupCloseIcon i,
.centerPopup .popupCloseIcon i {
    color: var(--color2);
    font-size: .667rem;
    cursor: pointer;
    transition: var(--transition1)
}

.commonPopup .popupCloseBg,
[center-popup] .popupCloseBg,
.centerPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    background-color: rgba(0, 9, 27, .089);
    cursor: pointer;
    transition: opacity .3s !important
}

.commonPopup {
    z-index: 380
}

.timeOutPopup {
    display: none;
    width: 100%;
    transform: translateY(-100%) !important;
    transition: opacity .5s ease-in-out;
    overflow: auto;
    animation: timeOutPopup 2.5s ease-out
}

@keyframes timeOutPopup {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    1% {
        transform: none;
        opacity: 1
    }

    80% {
        opacity: 1
    }

    90% {
        transform: none
    }

    100% {
        opacity: 0;
        transform: translateY(-100%)
    }
}

.timeOutPopup .timeOutPopupDiv {
    margin: 0 auto;
    margin-top: 5%;
    width: 100%;
    max-width: 500px;
    height: auto;
    min-height: 200px;
    display: flex;
    justify-self: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .034) 0px 50px 200px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    text-align: center;
    overflow: hidden;
    z-index: 115
}

.timeOutPopup .timeOutPopupDiv .btnSection {
    margin-top: 2rem
}

.timeOutPopup .timeOutPopupDiv .btnSection .btn {
    margin: 0 .5rem
}

.timeOutPopup .popupCloseIcon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    padding: 1rem;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition1)
}

.timeOutPopup .popupCloseIcon:hover {
    background-color: var(--borderGray)
}

.timeOutPopup .popupCloseIcon:hover i {
    color: var(--color2)
}

.timeOutPopup .popupCloseIcon i {
    color: var(--color2);
    cursor: pointer;
    transition: var(--transition1)
}

.timeOutPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    background-color: rgba(0, 9, 27, .24);
    cursor: pointer;
    transition: var(--transition1)
}

.infoMessagePopup,
.warningMessagePopup,
.successMessagePopup,
.errorMessagePopup {
    position: fixed;
    top: unset;
    bottom: 2rem;
    right: 2rem;
    z-index: 110;
    width: 100%;
    height: auto;
    max-width: 400px;
    margin-left: auto;
    display: none;
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    transition: var(--transition1);
    box-shadow: rgba(17, 12, 46, .062) 0px 48px 100px 0px;
    transform: translateY(150%);
    overflow: hidden
}

.infoMessagePopup .messageDiv,
.warningMessagePopup .messageDiv,
.successMessagePopup .messageDiv,
.errorMessagePopup .messageDiv {
    padding: 1rem;
    padding-left: calc(70px + 1rem)
}

.infoMessagePopup .messageDiv .iconDiv,
.warningMessagePopup .messageDiv .iconDiv,
.successMessagePopup .messageDiv .iconDiv,
.errorMessagePopup .messageDiv .iconDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    display: flex;
    align-items: center
}

.infoMessagePopup .messageDiv .iconDiv i,
.warningMessagePopup .messageDiv .iconDiv i,
.successMessagePopup .messageDiv .iconDiv i,
.errorMessagePopup .messageDiv .iconDiv i {
    margin: auto;
    font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px)
}

.infoMessagePopup .messageDiv .title,
.warningMessagePopup .messageDiv .title,
.successMessagePopup .messageDiv .title,
.errorMessagePopup .messageDiv .title {
    margin: 0
}

.infoMessagePopup .messageDiv p,
.warningMessagePopup .messageDiv p,
.successMessagePopup .messageDiv p,
.errorMessagePopup .messageDiv p {
    margin-top: .5rem;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400;
    line-height: 1.4
}

.infoMessagePopup .popupClose,
.warningMessagePopup .popupClose,
.successMessagePopup .popupClose,
.errorMessagePopup .popupClose {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.infoMessagePopup .popupClose:hover,
.warningMessagePopup .popupClose:hover,
.successMessagePopup .popupClose:hover,
.errorMessagePopup .popupClose:hover {
    opacity: .5
}

.infoMessagePopup .popupClose i,
.warningMessagePopup .popupClose i,
.successMessagePopup .popupClose i,
.errorMessagePopup .popupClose i {
    font-size: .878rem;
    cursor: pointer
}

.errorMessagePopup .iconDiv {
    background-color: #ffd5d5;
    color: var(--red)
}

.successMessagePopup .iconDiv {
    background-color: #e9ffe9;
    color: #309130
}

.warningMessagePopup .iconDiv {
    background-color: #fff0c1;
    color: var(--white)
}

.infoMessagePopup .iconDiv {
    background-color: var(--lightGray);
    color: var(--gray)
}

.rightFloatingPopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.rightFloatingPopup.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.rightFloatingPopup .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.rightFloatingPopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media(min-width: 1024px) {
    .rightFloatingPopup .popupWindow::before {
        display: none
    }
}

.rightFloatingPopup .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--black);
    border: 1px solid var(--black);
    border-top: 1px solid var(--darkGray);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    .rightFloatingPopup .popupWindow::after {
        display: none
    }
}

.rightFloatingPopup .popupWindowClose,
.rightFloatingPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media(min-width: 1024px) {
    .rightFloatingPopup.popupIntro {
        transform: none
    }
}

.rightFloatingPopup .popupWindow {
    padding: 2rem 0;
    justify-content: flex-start
}

@media(min-width: 1024px) {
    .rightFloatingPopup .popupWindow {
        left: unset;
        right: 0;
        width: clamp(500px, 40vw, 600px);
        height: 100vh;
        max-height: 100vh;
        align-items: flex-start;
        border-radius: 0;
        transform: none;
        transform: translateX(100%);
        box-shadow: rgba(0, 0, 0, .1) 10px 0 15px -3px, rgba(0, 0, 0, .05) 4px 0 6px -2px;
        overflow-y: auto
    }
}

.rightFloatingPopup .popupWindow .popupCloseIcon {
    display: none;
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    cursor: pointer
}

@media(min-width: 1024px) {
    .rightFloatingPopup .popupWindow .popupCloseIcon {
        display: flex
    }
}

.rightFloatingPopup .popupWindow .popupCloseIcon i {
    margin: auto;
    cursor: pointer
}

.rightFloatingPopup .popupWindow .heading {
    margin: 0;
    margin-bottom: .7075rem;
    width: 100%;
    text-align: center
}

.rightFloatingPopup .popupWindow .formDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.rightFloatingPopup .popupWindow .btnDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.rightFloatingPopup .popupWindow .btnDiv a,
.rightFloatingPopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

@media(min-width: 1024px) {
    .rightFloatingPopup .popupWindowClose {
        opacity: 0
    }
}

.moreOptionPopup:hover .moreIcon {
    opacity: .8
}

.moreOptionPopup .partialDataUpdatePopup,
.moreOptionPopup .moreOptionView {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.moreOptionPopup .partialDataUpdatePopup.popupIntro .popupWindow,
.moreOptionPopup .moreOptionView.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow,
.moreOptionPopup .moreOptionView .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow::before,
.moreOptionPopup .moreOptionView .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media(min-width: 1024px) {

    .moreOptionPopup .partialDataUpdatePopup .popupWindow::before,
    .moreOptionPopup .moreOptionView .popupWindow::before {
        display: none
    }
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow::after,
.moreOptionPopup .moreOptionView .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--black);
    border: 1px solid var(--black);
    border-top: 1px solid var(--darkGray);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media(min-width: 1024px) {

    .moreOptionPopup .partialDataUpdatePopup .popupWindow::after,
    .moreOptionPopup .moreOptionView .popupWindow::after {
        display: none
    }
}

.moreOptionPopup .partialDataUpdatePopup .popupWindowClose,
.moreOptionPopup .partialDataUpdatePopup .popupCloseBg,
.moreOptionPopup .moreOptionView .popupWindowClose,
.moreOptionPopup .moreOptionView .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media(min-width: 768px) {

    .moreOptionPopup .partialDataUpdatePopup,
    .moreOptionPopup .moreOptionView {
        position: absolute;
        top: 100%;
        width: max-content;
        height: max-content;
        display: none;
        transform: scale(0.8);
        padding: .7075rem;
        overflow: unset;
        pointer-events: none
    }
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow,
.moreOptionPopup .moreOptionView .popupWindow {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    padding-right: 0;
    padding-left: 0
}

@media(min-width: 768px) {

    .moreOptionPopup .partialDataUpdatePopup .popupWindow,
    .moreOptionPopup .moreOptionView .popupWindow {
        position: relative;
        min-width: 230px;
        min-height: auto;
        background-color: var(--shade-1);
        border-radius: var(--radius);
        border: 1px solid var(--shade-1);
        padding: 0;
        opacity: 0;
        transform: none;
        box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px !important
    }
}

@media(min-width: 768px) {

    .moreOptionPopup .partialDataUpdatePopup .popupWindow:before,
    .moreOptionPopup .partialDataUpdatePopup .popupWindow:after,
    .moreOptionPopup .moreOptionView .popupWindow:before,
    .moreOptionPopup .moreOptionView .popupWindow:after {
        display: none
    }
}

@media(min-width: 768px) {

    .moreOptionPopup .partialDataUpdatePopup .popupWindowClose,
    .moreOptionPopup .moreOptionView .popupWindowClose {
        opacity: 0
    }
}

@media(min-width: 768px) {
    .moreOptionPopup .popupIntro {
        display: block;
        transform: none;
        right: 0;
        opacity: 1;
        pointer-events: all
    }
}

.moreOptionPopup .popupIntro .popupWindow {
    min-height: min-content
}

@media(min-width: 768px) {
    .moreOptionPopup .popupIntro .popupWindow {
        opacity: 1
    }
}

.moreOptionPopup .popupIntro .popupWindow a {
    flex: unset
}

.moreOptionPopup .popupIntro .popupWindow a:not(.filledBtn, .outlinedBtn, .tonedBtn, .textBtn) {
    justify-content: center
}

@media(min-width: 768px) {
    .moreOptionPopup .popupIntro .popupWindow a:not(.filledBtn, .outlinedBtn, .tonedBtn, .textBtn) {
        justify-content: flex-start
    }
}

.changeUserPopup,
.changeStatusPopup,
.partialDataUpdatePopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.changeUserPopup.popupIntro .popupWindow,
.changeStatusPopup.popupIntro .popupWindow,
.partialDataUpdatePopup.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.changeUserPopup .popupWindow,
.changeStatusPopup .popupWindow,
.partialDataUpdatePopup .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.changeUserPopup .popupWindow::before,
.changeStatusPopup .popupWindow::before,
.partialDataUpdatePopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindow::before,
    .changeStatusPopup .popupWindow::before,
    .partialDataUpdatePopup .popupWindow::before {
        display: none
    }
}

.changeUserPopup .popupWindow::after,
.changeStatusPopup .popupWindow::after,
.partialDataUpdatePopup .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--black);
    border: 1px solid var(--black);
    border-top: 1px solid var(--darkGray);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindow::after,
    .changeStatusPopup .popupWindow::after,
    .partialDataUpdatePopup .popupWindow::after {
        display: none
    }
}

.changeUserPopup .popupWindowClose,
.changeUserPopup .popupCloseBg,
.changeStatusPopup .popupWindowClose,
.changeStatusPopup .popupCloseBg,
.partialDataUpdatePopup .popupWindowClose,
.partialDataUpdatePopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media(min-width: 1024px) {

    .changeUserPopup,
    .changeStatusPopup,
    .partialDataUpdatePopup {
        position: fixed;
        bottom: 0;
        right: 100%;
        z-index: 380;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        overflow: hidden
    }

    .changeUserPopup .popupWindow,
    .changeStatusPopup .popupWindow,
    .partialDataUpdatePopup .popupWindow {
        position: relative;
        bottom: unset;
        left: unset;
        width: 100%;
        max-width: 450px;
        min-height: 350px;
        max-height: 650px;
        padding: 2rem;
        background-color: var(--white);
        border-radius: var(--radius);
        box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
        z-index: 2;
        transition: all 375ms ease-out;
        transform: translateY(110%) scale(0.95)
    }

    .changeUserPopup .popupWindow::before,
    .changeStatusPopup .popupWindow::before,
    .partialDataUpdatePopup .popupWindow::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 50px;
        height: 5px;
        border-radius: var(--radius);
        background-color: var(--borderGray);
        z-index: 1;
        transform: translateX(-50%);
        pointer-events: none
    }
}

@media(min-width: 1024px)and (min-width: 1024px) {

    .changeUserPopup .popupWindow::before,
    .changeStatusPopup .popupWindow::before,
    .partialDataUpdatePopup .popupWindow::before {
        display: none
    }
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindow::after,
    .changeStatusPopup .popupWindow::after,
    .partialDataUpdatePopup .popupWindow::after {
        content: "";
        position: absolute;
        top: -50px;
        left: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--borderGray);
        font-family: var(--icon-style) !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        padding: 5px;
        border-radius: 100%;
        background-color: var(--black);
        border: 1px solid var(--gray);
        opacity: 0;
        z-index: 1;
        transform: translateX(-50%);
        pointer-events: none;
        transition: var(--transition1)
    }
}

@media(min-width: 1024px)and (min-width: 1024px) {

    .changeUserPopup .popupWindow::after,
    .changeStatusPopup .popupWindow::after,
    .partialDataUpdatePopup .popupWindow::after {
        display: none
    }
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindowClose,
    .changeStatusPopup .popupWindowClose,
    .partialDataUpdatePopup .popupWindowClose {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0);
        transition: all 375ms ease-out;
        cursor: pointer
    }
}

.changeUserPopup .popupWindow,
.changeStatusPopup .popupWindow,
.partialDataUpdatePopup .popupWindow {
    padding-top: 2rem
}

.changeUserPopup .popupWindow .heading,
.changeStatusPopup .popupWindow .heading,
.partialDataUpdatePopup .popupWindow .heading {
    margin: 0;
    margin-bottom: .7075rem;
    width: 100%;
    text-align: center
}

.changeUserPopup .popupWindow .popupCloseIcon,
.changeStatusPopup .popupWindow .popupCloseIcon,
.partialDataUpdatePopup .popupWindow .popupCloseIcon {
    display: none;
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    cursor: pointer
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindow .popupCloseIcon,
    .changeStatusPopup .popupWindow .popupCloseIcon,
    .partialDataUpdatePopup .popupWindow .popupCloseIcon {
        display: flex
    }
}

.changeUserPopup .popupWindow .popupCloseIcon i,
.changeStatusPopup .popupWindow .popupCloseIcon i,
.partialDataUpdatePopup .popupWindow .popupCloseIcon i {
    margin: auto;
    cursor: pointer
}

.changeUserPopup .popupWindow .btnDiv,
.changeStatusPopup .popupWindow .btnDiv,
.partialDataUpdatePopup .popupWindow .btnDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.changeUserPopup .popupWindow .btnDiv a,
.changeUserPopup .popupWindow .btnDiv button,
.changeStatusPopup .popupWindow .btnDiv a,
.changeStatusPopup .popupWindow .btnDiv button,
.partialDataUpdatePopup .popupWindow .btnDiv a,
.partialDataUpdatePopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

.changeUserPopup .popupWindow,
.changeStatusPopup .popupWindow,
.partialDataUpdatePopup .popupWindow {
    min-height: 400px;
    padding: 0
}

.changeUserPopup .popupWindow .heading,
.changeStatusPopup .popupWindow .heading,
.partialDataUpdatePopup .popupWindow .heading {
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 1rem
}

.changeUserPopup .popupWindow .heading::before,
.changeStatusPopup .popupWindow .heading::before,
.partialDataUpdatePopup .popupWindow .heading::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    border-radius: 1rem;
    background: var(--highlight)
}

.changeUserPopup .popupWindow .titleDiv,
.changeStatusPopup .popupWindow .titleDiv,
.partialDataUpdatePopup .popupWindow .titleDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: 2.83rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin: 0 !important
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindow .titleDiv,
    .changeStatusPopup .popupWindow .titleDiv,
    .partialDataUpdatePopup .popupWindow .titleDiv {
        padding-top: 2rem
    }
}

.changeUserPopup .popupWindow .titleDiv .label,
.changeStatusPopup .popupWindow .titleDiv .label,
.partialDataUpdatePopup .popupWindow .titleDiv .label {
    margin: 0;
    color: var(--textGray);
    font-size: .878rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.changeUserPopup .popupWindow .scrollFormDiv,
.changeStatusPopup .popupWindow .scrollFormDiv,
.partialDataUpdatePopup .popupWindow .scrollFormDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    overflow-y: auto;
    max-height: 60vh;
    padding-bottom: 100px
}

@media(min-width: 1024px) {

    .changeUserPopup .popupWindow .scrollFormDiv,
    .changeStatusPopup .popupWindow .scrollFormDiv,
    .partialDataUpdatePopup .popupWindow .scrollFormDiv {
        max-height: 500px
    }
}

.changeUserPopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1),
.changeStatusPopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1),
.partialDataUpdatePopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1) {
    margin-bottom: 0
}

.changeUserPopup .popupWindow .formDiv,
.changeStatusPopup .popupWindow .formDiv,
.partialDataUpdatePopup .popupWindow .formDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: 100px
}

.changeUserPopup .popupWindow .formDiv .inputDiv:nth-last-child(1),
.changeStatusPopup .popupWindow .formDiv .inputDiv:nth-last-child(1),
.partialDataUpdatePopup .popupWindow .formDiv .inputDiv:nth-last-child(1) {
    margin-bottom: 0
}

.changeUserPopup .popupWindow selector,
.changeStatusPopup .popupWindow selector,
.partialDataUpdatePopup .popupWindow selector {
    width: 100%
}

.changeUserPopup .popupWindow selector item,
.changeStatusPopup .popupWindow selector item,
.partialDataUpdatePopup .popupWindow selector item {
    width: 100%;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    padding: 1rem .7075rem
}

.changeUserPopup .popupWindow selector selected,
.changeStatusPopup .popupWindow selector selected,
.partialDataUpdatePopup .popupWindow selector selected {
    width: inherit;
    border-radius: var(--radius)
}

.changeUserPopup .popupWindow .profileInput item,
.changeStatusPopup .popupWindow .profileInput item,
.partialDataUpdatePopup .popupWindow .profileInput item {
    min-height: 60px;
    padding: 5px .7075rem
}

.changeUserPopup .popupWindow .profileInput item img,
.changeStatusPopup .popupWindow .profileInput item img,
.partialDataUpdatePopup .popupWindow .profileInput item img {
    width: 50px;
    min-width: 50px;
    height: 50px
}

.changeUserPopup .popupWindow [multi] selected item,
.changeStatusPopup .popupWindow [multi] selected item,
.partialDataUpdatePopup .popupWindow [multi] selected item {
    padding: 5px
}

.changeUserPopup .popupWindow [multi] selected item img,
.changeStatusPopup .popupWindow [multi] selected item img,
.partialDataUpdatePopup .popupWindow [multi] selected item img {
    width: 40px;
    min-width: 40px;
    height: 40px
}

.changeUserPopup .popupWindow .avatarCenterView,
.changeStatusPopup .popupWindow .avatarCenterView,
.partialDataUpdatePopup .popupWindow .avatarCenterView {
    min-width: 260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: var(--inputColor1);
    border-radius: 2rem;
    margin-bottom: 1rem;
    overflow: hidden
}

.changeUserPopup .popupWindow .avatarCenterView::before,
.changeStatusPopup .popupWindow .avatarCenterView::before,
.partialDataUpdatePopup .popupWindow .avatarCenterView::before {
    position: absolute;
    top: 10px;
    left: calc(56px + 1rem);
    content: attr(data-label);
    display: block;
    color: var(--inputColor5);
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px
}

.changeUserPopup .popupWindow .avatarCenterView .avatar,
.changeStatusPopup .popupWindow .avatarCenterView .avatar,
.partialDataUpdatePopup .popupWindow .avatarCenterView .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    object-fit: cover;
    object-position: top;
    overflow: hidden;
    margin: 6px;
    margin-right: 1rem
}

.changeUserPopup .popupWindow .avatarCenterView [src=""],
.changeStatusPopup .popupWindow .avatarCenterView [src=""],
.partialDataUpdatePopup .popupWindow .avatarCenterView [src=""] {
    display: none
}

.changeUserPopup .popupWindow .avatarCenterView .name,
.changeStatusPopup .popupWindow .avatarCenterView .name,
.partialDataUpdatePopup .popupWindow .avatarCenterView .name {
    margin: 0;
    margin-top: 17px;
    padding-right: .7075rem
}

.changeUserPopup .popupWindow .avatarCenterView .name:empty,
.changeStatusPopup .popupWindow .avatarCenterView .name:empty,
.partialDataUpdatePopup .popupWindow .avatarCenterView .name:empty {
    margin: 0;
    padding: 0
}

.changeUserPopup .popupWindow [type=date],
.changeUserPopup .popupWindow [type=datetime-local],
.changeStatusPopup .popupWindow [type=date],
.changeStatusPopup .popupWindow [type=datetime-local],
.partialDataUpdatePopup .popupWindow [type=date],
.partialDataUpdatePopup .popupWindow [type=datetime-local] {
    text-transform: uppercase
}

.changeUserPopup .popupWindow .btnSection,
.changeUserPopup .popupWindow .btnDiv,
.changeStatusPopup .popupWindow .btnSection,
.changeStatusPopup .popupWindow .btnDiv,
.partialDataUpdatePopup .popupWindow .btnSection,
.partialDataUpdatePopup .popupWindow .btnDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    justify-content: space-between;
    gap: 0 2%;
    border-radius: inherit;
    background: inherit
}

.changeUserPopup .popupWindow .btnSection a,
.changeUserPopup .popupWindow .btnSection button,
.changeUserPopup .popupWindow .btnDiv a,
.changeUserPopup .popupWindow .btnDiv button,
.changeStatusPopup .popupWindow .btnSection a,
.changeStatusPopup .popupWindow .btnSection button,
.changeStatusPopup .popupWindow .btnDiv a,
.changeStatusPopup .popupWindow .btnDiv button,
.partialDataUpdatePopup .popupWindow .btnSection a,
.partialDataUpdatePopup .popupWindow .btnSection button,
.partialDataUpdatePopup .popupWindow .btnDiv a,
.partialDataUpdatePopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

@media(min-width: 1024px) {
    .changeStatusPopup .popupWindow {
        overflow: hidden
    }
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--inputColor2)
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList .label {
    margin: 0;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400;
    margin-bottom: 10px
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList .partialDataUpdateUserName {
    margin: 0;
    font-weight: 500
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList [status] {
    font-size: 1rem
}

.changeStatusPopup .popupWindow .changeStatusModule {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-top: auto
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons {
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    width: 100%;
    min-width: 100%;
    overflow-y: auto
}

@media(min-width: 768px) {

    .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer,
    .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer {
        max-height: 400px
    }
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer:empty,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer:empty {
    display: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons:hover .activeStatus::after,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons:hover [active_status]::after {
    opacity: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList {
    width: 100%;
    justify-content: flex-start;
    order: 2;
    color: var(--black);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 500;
    clear: both;
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: 3.9975rem;
    margin: 0;
    padding-top: 1.413rem;
    padding-bottom: 1.413rem;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid var(--lightGray);
    transition: var(--transition2);
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList * {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: var(--transition2);
    pointer-events: none;
    opacity: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList::before {
    content: "";
    position: absolute;
    top: 38%;
    left: 2rem;
    width: 10px;
    height: 10px;
    border-radius: .7075rem;
    z-index: 1;
    transition: var(--transition2)
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100%;
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input:focus {
    box-shadow: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status] {
    order: 1;
    pointer-events: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus::after,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status]::after {
    opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus::before,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status]::before {
    animation: status-pulse 2s infinite
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus input::before,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status] input::before {
    content: "Current Status";
    position: absolute;
    top: 50%;
    right: .7075rem;
    transform: translateY(-50%);
    color: var(--textGray);
    font-size: .667rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    padding: 5px 10px
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons {
    justify-content: flex-end
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--black);
    padding: 0 1rem;
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid var(--lightGray);
    transition: var(--transition2);
    white-space: pre-line;
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList:nth-last-of-type(1) {
    border-bottom: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList* {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition1);
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList:hover input::after {
    opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    border: none;
    border-left: 5px solid rgba(0, 0, 0, 0);
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input::after {
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--borderGray) 0%, rgba(0, 42, 51, 0) 100%);
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    transform: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:focus {
    box-shadow: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked {
    border-left: 5px solid var(--inputColor5);
    background: linear-gradient(90deg, var(--inputColor1) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked::after {
    opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked+.title {
    color: var(--inputColor5)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList .title {
    margin: 0;
    display: block;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 500
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList p {
    font-weight: 500;
    margin-top: 5px;
    display: block;
    line-height: 1.3;
    opacity: .6
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList p:empty {
    display: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv {
    width: 100%;
    margin: 0;
    margin-top: .7075rem;
    padding-top: .7075rem;
    border-top: 1px solid var(--borderGray)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input::placeholder,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea::placeholder {
    opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding-top: .7075rem;
    background-color: var(--white)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv a.button {
    margin: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv .backBtn i {
    top: 1px;
    margin: 0;
    transform: translateX(-50%)
}

.changeStatusPopup .popupWindow .formDiv {
    overflow: unset
}

.popupShow {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important
}

.popupShow .popupCloseBg {
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: all !important;
    cursor: pointer !important
}

.mobilePopupIntro,
.popupIntro {
    right: 0 !important
}

.mobilePopupIntro .popupWindow,
.popupIntro .popupWindow {
    transform: none !important;
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12) !important;
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.mobilePopupIntro .popupWindow::after,
.popupIntro .popupWindow::after {
    opacity: .85 !important
}

.mobilePopupIntro .popupWindowClose,
.mobilePopupIntro .popupCloseBg,
.popupIntro .popupWindowClose,
.popupIntro .popupCloseBg {
    display: block;
    background-color: rgba(0, 0, 0, .72) !important;
    transition: opacity .4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transition-delay: .375ms !important;
    pointer-events: all !important
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    position: relative;
    outline-style: none;
    -webkit-text-size-adjust: 100%;
    cursor: context-menu
}

*:before,
* :after {
    font-family: inherit
}

html:has(#dark:checked) {
    color-scheme: dark
}

@media(prefers-color-scheme: dark) {
    html:has(#dark:checked) .dashboardMainContainer .dashboardSection::before {
        color-scheme: dark;
        --bgShadeMobile: var(--bgShadeMobileDark) !important;
        background: var(--bgShadewebDark) !important
    }
}

html {
    color-scheme: light;
    width: 100vw;
    max-width: 100%;
    display: block;
    color: var(--text-color);
    background: var(--bg-color);
    scroll-behavior: smooth;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
    font-size: 16px
}

@media screen and (min-width: 300px) {
    html {
        font-size: calc(0.0588235294vw + 15.8235294118px)
    }
}

@media screen and (min-width: 2000px) {
    html {
        font-size: 17px
    }
}

.bodyIntro {
    height: 100vh !important;
    overflow: hidden !important
}

body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    color: inherit;
    background: inherit;
    font-family: var(--font-family);
    line-height: 1.3;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
    scrollbar-width: thin;
    scrollbar-color: var(--shade-3) var(--bg-color);
    overflow-y: auto
}

.bodyIntro {
    height: 100vh;
    overflow: hidden
}

.scrollTopIntro {
    top: -100% !important;
    transition: all 575ms ease-out !important
}

.scrollBottomIntro {
    bottom: -100% !important;
    transition: all 575ms ease-in !important
}

.m0 {
    margin: 0 !important
}

.p0 {
    padding: 0 !important
}

img {
    width: 100%;
    display: block;
    height: intrinsic;
    image-rendering: -webkit-optimize-contrast
}

.bgCover {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

a {
    text-decoration: none;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    text-underline-offset: .1em !important;
    text-decoration-thickness: .07em !important;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.bText {
    font-weight: 500
}

.nText {
    font-weight: 400
}

.lText {
    font-weight: 300
}

i {
    line-height: .6
}

button:focus,
[type=button]:focus {
    outline: 0
}

li {
    list-style-type: none
}

:is(h1, h2) {
    line-height: 1.2
}

p {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 500
}

h1 {
    font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px)
}

h2 {
    font-size: clamp(25.62890625px, 22.5902871711px + 0.0063304564*100vw, 35.2512px)
}

h3 {
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px);
    line-height: 1.3
}

h4 {
    font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px);
    line-height: 1.35
}

h5 {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    line-height: 1.3
}

.errorPage {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    text-align: center
}

.errorPage .innerSection {
    min-height: 100vh;
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center
}

.errorPage .innerSection dotlottie-player {
    max-width: 500px
}

.errorPage .innerSection .content {
    z-index: 1;
    margin: auto
}

.errorPage .innerSection .code {
    position: absolute;
    top: -20vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30vh;
    font-weight: 900;
    background: var(--borderGray);
    background: -webkit-linear-gradient(to bottom, var(--borderGray), rgba(255, 255, 255, 0));
    background: linear-gradient(to bottom, var(--borderGray), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0, 0, 0, 0)
}

.errorPage .innerSection .code:empty {
    display: none
}

.errorPage .innerSection .title {
    font-size: clamp(18px, 5vh, 60px) !important;
    line-height: 1.1
}

.errorPage .innerSection p {
    margin: 0 auto;
    margin-top: 1rem;
    max-width: 600px;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    line-height: 1.3
}

.errorPage .innerSection .btnDiv {
    justify-content: center
}

.errorLogSection {
    list-style: none;
    padding: 0;
    margin: 0
}

.errorLogSection ul {
    padding: 5.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 50px;
    counter-increment: titleCounter 1;
    border-bottom: 1px solid var(--borderGray)
}

.errorLogSection ul:nth-child(even) {
    background-color: var(--lightGray)
}

.errorLogSection ul::before {
    padding: 5.65rem 0;
    content: counter(titleCounter) ". ";
    position: absolute;
    top: -2px;
    left: 1rem;
    color: var(--black);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

.errorLogSection ul li {
    order: 10;
    width: 100%
}

.errorLogSection ul li:nth-child(1) {
    order: 1;
    width: auto
}

.errorLogSection ul li:nth-child(2) {
    order: 2;
    width: auto
}

.errorLogSection ul li:nth-child(2) p {
    color: #3b5fff
}

.errorLogSection ul li:nth-child(3) {
    order: 6
}

.errorLogSection ul li:nth-child(3) p {
    display: inline-block;
    color: #ff3b58
}

.errorLogSection ul li:nth-child(5) {
    order: 4;
    width: auto
}

.errorLogSection ul li:nth-child(9) {
    order: 5;
    width: auto
}

.errorLogSection ul li:nth-child(10) {
    order: 5;
    width: auto
}

.errorLogSection ul li .label,
.errorLogSection ul li h5 {
    margin: 0;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px
}

.errorLogSection ul li p {
    color: var(--black);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 500;
    margin: 0;
    white-space: pre-line;
    line-height: 1.4
}

.mainLabel {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 3px;
    color: var(--black);
    font-size: .937rem;
    font-weight: 300;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px
}

@media(min-width: 568px) {
    .mainLabel {
        gap: 5px;
        font-size: 1rem
    }
}

.mainLabel::before,
.mainLabel::after {
    content: "";
    width: 10px;
    height: 10px;
    max-height: 10px;
    border-radius: var(--radius)
}

.mainLabel::before {
    order: 2;
    background: var(--color2)
}

.mainLabel::after {
    order: 1;
    background: var(--color1);
    margin-right: 3px
}

h1,
h2 {
    font-weight: 500
}

.heroBannerSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    margin-top: 80px
}

@media(min-width: 1024px) {
    .heroBannerSection {
        margin-top: 130px
    }
}

.heroBannerSection .banner {
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    border-radius: 5vh
}

.heroBannerSection .banner .main {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.heroBannerSection .banner .main::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5vh 5vh 0 0;
    background: var(--color1);
    background: radial-gradient(circle, rgb(9, 99, 110) 0%, rgb(4, 64, 71) 100%)
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main::before {
        height: 80%
    }
}

.heroBannerSection .banner .main .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    color: var(--white);
    text-align: center
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main .content {
        width: 50%;
        text-align: left
    }
}

.heroBannerSection .banner .main .content .title {
    font-weight: 300
}

.heroBannerSection .banner .main .content h5 {
    margin-top: .35375rem;
    font-weight: 300
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main .content h5 {
        margin-top: 1.413rem;
        font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px)
    }
}

.heroBannerSection .banner .main .content .filledBtn {
    margin-top: 1.413rem;
    font-weight: 400
}

.heroBannerSection .banner .main .content .highlights {
    margin-top: 1.413rem;
    display: flex;
    justify-content: center
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main .content .highlights {
        justify-content: flex-start
    }
}

.heroBannerSection .banner .main .content .highlights li:nth-child(1) {
    margin-right: .7075rem;
    padding-right: .7075rem;
    border-right: 1px solid rgba(255, 255, 255, .1921568627)
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main .content .highlights li:nth-child(1) {
        margin-right: 1.413rem;
        padding-right: 1.413rem
    }
}

.heroBannerSection .banner .main .content .highlights li .value {
    font-size: clamp(36.4911575317px, 28.7786577207px + 0.0160677079*100vw, 60.9140736px);
    font-weight: 300;
    line-height: 1
}

.heroBannerSection .banner .main .content .highlights li .label {
    margin: 0;
    font-weight: 300
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main .content .highlights li .label {
        font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px)
    }
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .main .media {
        width: 50%
    }
}

.heroBannerSection .banner .subBanner {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    background: #ebf1f0;
    text-align: center;
    overflow: hidden
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .subBanner {
        text-align: left
    }
}

.heroBannerSection .banner .subBanner .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    align-items: center;
    margin-bottom: .7075rem
}

@media(min-width: 568px) {
    .heroBannerSection .banner .subBanner .title {
        flex-direction: row
    }
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .subBanner .title {
        justify-content: flex-start
    }
}

.heroBannerSection .banner .subBanner .title img {
    width: 200px
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .subBanner .title img {
        width: 300px
    }
}

.heroBannerSection .banner .subBanner p {
    margin: 0;
    font-weight: 400
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .subBanner p {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.heroBannerSection .banner .subBanner .filledBtn {
    margin-top: 1.413rem
}

.heroBannerSection .banner .subBanner .object {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 150px;
    opacity: .2
}

@media(min-width: 1024px) {
    .heroBannerSection .banner .subBanner .object {
        opacity: 1;
        width: 200px
    }
}

.heroSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    margin-top: 80px
}

@media(min-width: 1024px) {
    .heroSection {
        margin-top: 130px
    }
}

.heroSection .banner {
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    width: 100%;
    background: var(--color1);
    background: radial-gradient(circle, rgb(9, 99, 110) 0%, rgb(4, 64, 71) 100%);
    overflow: hidden;
    border-radius: var(--radius)
}

.heroSection .banner .content:has(.title:empty)::before {
    display: none
}

.heroSection .banner .content {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-left: .7075rem;
    padding-right: .7075rem
}

@media(min-width: 568px) {
    .heroSection .banner .content {
        padding-left: 1.413rem;
        padding-right: 1.413rem
    }
}

.heroSection .banner .content::before,
.heroSection .banner .content::after {
    content: "";
    position: absolute;
    width: 20vw;
    height: 20vw;
    background-image: url("/assets/images/home/elements/element1.png");
    background-size: contain;
    background-repeat: no-repeat
}

@media(min-width: 1024px) {

    .heroSection .banner .content::before,
    .heroSection .banner .content::after {
        width: 15vw;
        height: 15vw
    }
}

.heroSection .banner .content::after {
    bottom: 0;
    right: 0;
    transform: scaleX(-1)
}

.heroSection .banner .content::before {
    bottom: 0;
    left: 0
}

.heroSection .banner .content div {
    max-width: 1000px
}

.heroSection .banner .content .mainLabel {
    color: var(--white);
    margin-bottom: 10px
}

.heroSection .banner .content .title {
    line-height: 1
}

.heroSection .banner .content .text {
    margin-top: 10px;
    max-width: 660px;
    font-weight: 300
}

.heroSection .banner .content .highlights {
    margin-top: 1.413rem;
    width: 100%;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
    color: var(--white);
    border-radius: var(--radius)
}

.heroSection .banner .content .highlights li {
    width: 100%;
    padding: .5rem .35375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

@media(min-width: 568px) {
    .heroSection .banner .content .highlights li {
        flex: 1;
        width: auto;
        padding: .5rem 1.413rem
    }
}

.heroSection .banner .content .highlights li:nth-last-of-type(1)::before {
    display: none
}

.heroSection .banner .content .highlights li::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 1px;
    height: 100%;
    background: #fff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2357317927) 37%, rgba(0, 0, 0, 0) 100%)
}

.heroSection .banner .content .highlights li .value {
    font-family: var(--font-family1);
    font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px);
    font-weight: 400;
    line-height: 1
}

.heroSection .banner .content .highlights li .label {
    margin: 0;
    opacity: .5;
    font-weight: 400;
    line-height: 1
}

.heroSection .banner .media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.heroSection .banner .media .object {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100px
}

.heroSection .banner .media .bg,
.heroSection .banner .media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.heroSection .banner .media .bg source,
.heroSection .banner .media video source {
    width: 100%;
    height: 100%
}

.heroSection .banner .scrollDIv {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 1;
    width: 200px
}

.heroSection .banner .scrollDIv img {
    width: 100%
}

.heroSection form {
    flex-direction: column;
    align-items: unset;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    background: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--btnRadius);
    border-radius: calc(var(--btnRadius) - 15px);
    gap: 0 3px;
    padding: 2px;
    box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
    transform: translateY(-1.413rem)
}

@media(min-width: 568px) {
    .heroSection form {
        flex-direction: row;
        border-radius: var(--btnRadius);
        transform: translateY(-50%)
    }
}

.heroSection form .inputDiv {
    flex: 1;
    margin: 0
}

.heroSection form .inputDiv label {
    position: absolute;
    top: .5rem;
    left: 25px;
    z-index: 1;
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

.heroSection form .inputDiv select,
.heroSection form .inputDiv input {
    padding: 1.413rem;
    padding-bottom: .7075rem;
    border-radius: var(--btnRadius)
}

.heroSection form button {
    color: var(--white);
    font-weight: 500;
    filter: brightness(100%);
    background-color: var(--color1);
    border: 1px solid var(--color1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    padding: 1rem
}

.heroSection form button:hover {
    color: var(--white);
    filter: brightness(110%);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.heroSection form button:active {
    filter: brightness(105%)
}

.heroSection form button:visited {
    filter: brightness(90%)
}

.heroSection form button.secondary {
    background-color: var(--color2);
    border: 1px solid var(--color2)
}

.heroSection form button.tertiary {
    background-color: var(--color3);
    border: 1px solid var(--color3)
}

.heroSection form button.black {
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--darkGray)
}

.heroSection form button.white {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--borderGray)
}

.heroSection form button.red {
    color: var(--white);
    background-color: var(--red);
    border: 1px solid var(--red)
}

.heroSection form button.green {
    color: var(--white);
    background-color: var(--green);
    border: 1px solid var(--green)
}

.heroSection form button.blue {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue)
}

.heroSection form button.elevated {
    box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .048), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.heroSection form button.elevated:hover {
    box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.heroSection form button .loader::before {
    border: 2px solid var(--white)
}

.offerBanner {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.offerBanner .card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: rgba(50, 93, 89, .062) 0px 13px 27px -5px, rgba(0, 0, 0, .041) 0px 8px 16px -8px
}

@media(min-width: 768px) {
    .offerBanner .card {
        flex-wrap: nowrap
    }
}

.offerBanner .card .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--section-space-y)
}

@media(min-width: 768px) {
    .offerBanner .card .content {
        width: calc(100% - 350px)
    }
}

.offerBanner .card .content .title {
    max-width: 700px;
    font-weight: 600
}

.offerBanner .card .media {
    margin-left: auto;
    display: flex;
    padding: .7075rem;
    padding-bottom: 0
}

.offerBanner .card .media .object {
    position: absolute;
    bottom: 0;
    right: .7075rem;
    width: 80%;
    object-fit: contain;
    z-index: 1
}

.offerBanner .card .media .image {
    margin-left: auto;
    max-width: 350px;
    z-index: 2
}

.aboutBannerSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    margin: 0 auto
}

.aboutBannerSection .object {
    position: absolute;
    top: 10px;
    right: 10%;
    width: 200px;
    display: none
}

@media(min-width: 1024px) {
    .aboutBannerSection .object {
        display: block
    }
}

@media(min-width: 1280px) {
    .aboutBannerSection .object {
        top: 0;
        right: unset;
        left: 10%;
        width: 150px
    }
}

@media(min-width: 1800px) {
    .aboutBannerSection .object {
        width: 200px
    }
}

.aboutBannerSection .banner {
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 5vh
}

.aboutBannerSection .banner::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5vh 5vh 0 0;
    background: #01536a
}

@media(min-width: 1280px) {
    .aboutBannerSection .banner::before {
        height: 80%
    }
}

.aboutBannerSection .banner .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    color: var(--white);
    text-align: center
}

@media(min-width: 1024px) {
    .aboutBannerSection .banner .content {
        width: 60%;
        text-align: left
    }
}

.aboutBannerSection .banner .content .title {
    font-weight: 300
}

.aboutBannerSection .banner .content h5 {
    margin-top: 1.413rem;
    font-weight: 300
}

@media(min-width: 1024px) {
    .aboutBannerSection .banner .content h5 {
        font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px)
    }
}

.aboutBannerSection .banner .content p {
    opacity: .7
}

.aboutBannerSection .banner .content .filledBtn {
    margin-top: 1.413rem;
    font-weight: 400
}

.aboutBannerSection .banner .content .highlights {
    margin-top: 1.413rem;
    display: flex;
    justify-content: center
}

@media(min-width: 1024px) {
    .aboutBannerSection .banner .content .highlights {
        justify-content: flex-start
    }
}

.aboutBannerSection .banner .content .highlights li {
    color: #ff0
}

.aboutBannerSection .banner .content .highlights li:nth-child(1) {
    margin-right: .7075rem;
    padding-right: .7075rem;
    border-right: 1px solid rgba(255, 255, 255, .1921568627)
}

@media(min-width: 1024px) {
    .aboutBannerSection .banner .content .highlights li:nth-child(1) {
        margin-right: 1.413rem;
        padding-right: 1.413rem
    }
}

.aboutBannerSection .banner .content .highlights li .value {
    font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px);
    font-weight: 500;
    line-height: 1
}

.aboutBannerSection .banner .content .highlights li .label {
    margin: 0;
    font-weight: 300
}

.aboutBannerSection .banner .media {
    padding-top: 1.413rem;
    width: 100%
}

@media(min-width: 1024px) {
    .aboutBannerSection .banner .media {
        width: 40%
    }
}

@media(min-width: 1280px) {
    .aboutBannerSection .banner .media {
        padding-top: 0
    }
}

.aboutBannerSection .banner .media img {
    margin: 0 auto;
    max-width: 350px
}

@media(min-width: 1024px) {
    .aboutBannerSection .banner .media img {
        max-width: 100%
    }
}

.profileCarouselSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-top: var(--section-space-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 20px;
    overflow: hidden;
    background: var(--white);
    color: var(--black)
}

@media(min-width: 768px) {
    .profileCarouselSection {
        flex-direction: row;
        justify-content: space-between
    }
}

.profileCarouselSection .bgText {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    transform: translateX(-50%);
    line-height: 1;
    margin: 0 auto;
    padding: 0 .75vw;
    color: inherit;
    font-size: 10vw;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.3vw;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .05
}

.profileCarouselSection .titleDiv {
    color: inherit
}

.profileCarouselSection .titleDiv .title {
    color: var(--color1);
    font-weight: 400
}

.profileCarouselSection .titleDiv p {
    margin-top: 5px;
    color: var(--color1);
    font-weight: 400;
    opacity: .8
}

.profileCarouselSection .rating {
    width: 150px;
    opacity: .8
}

.profileCarouselSection .profileWrapper {
    padding-top: var(--section-space-y);
    width: 100%;
    display: flex;
    align-items: center;
    background: inherit;
    margin-top: .7075rem;
    overflow: hidden
}

.profileCarouselSection .profileWrapper::before,
.profileCarouselSection .profileWrapper::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 4;
    width: 50px;
    height: 100%;
    background: inherit
}

.profileCarouselSection .profileWrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%)
}

.profileCarouselSection .profileWrapper::after {
    content: "";
    right: 0;
    background: linear-gradient(-90deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%)
}

.profileCarouselSection .profileWrapper .profileSlide {
    background: inherit
}

.profileCarouselSection .profileWrapper .profileSlide .profile {
    z-index: 3;
    text-align: left;
    background: linear-gradient(0deg, var(--white) 50%, var(--lightGray) 100%);
    padding-top: .7075rem;
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition1)
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(1) {
    background: #d1e8c6
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(2) {
    background: #a1d2df
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(3) {
    background: #a687b3
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(4) {
    background: #f1ef9a
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(5) {
    background: #fedbbc
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(6) {
    background: #bed7dd
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(7) {
    background: #c0e7b6
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(8) {
    background: #bbe6e1
}

.profileCarouselSection .profileWrapper .profileSlide .profile:nth-child(9) {
    background: #defff7
}

.profileCarouselSection .profileWrapper .profileSlide .profile .profileImage {
    margin: 0 auto;
    max-width: 200px;
    border-radius: 100%;
    background: var(--white)
}

.profileCarouselSection .profileWrapper .profileSlide .profile .name {
    margin-top: 10px;
    text-align: center;
    color: var(--black);
    font-size: .937rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 5px;
    margin-bottom: 5px;
    line-height: 1.1
}

.profileCarouselSection .profileWrapper .profileSlide .profile .logo {
    margin-top: 10px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .878rem;
    font-family: var(--font-family1);
    background: #ebf1f0;
    padding: .5rem
}

.profileCarouselSection .profileWrapper .profileSlide .profile .logo img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    object-fit: contain
}

.profileCarouselSection .profileSlide {
    width: calc(100% + 100px);
    height: calc(350px + var(--section-space-y));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.profileCarouselSection .profileSlide:hover .profile {
    animation-play-state: paused !important
}

@keyframes profileSlide {
    0% {
        transform: translateX(2500px)
    }

    100% {
        transform: translateX(-250px)
    }
}

.profileCarouselSection .profileSlide .profile {
    position: absolute;
    top: 5px;
    left: 0;
    width: 250px;
    height: 350px;
    margin-right: 0
}

.profileCarouselSection .profileSlide .profile:nth-of-type(1) {
    transform: translateX(0px);
    animation: profileSlide 60s -354s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(2) {
    transform: translateX(250px);
    animation: profileSlide 60s -348s linear infinite
}

.profileCarouselSection .profileSlide .profile:nth-of-type(3) {
    transform: translateX(500px);
    animation: profileSlide 60s -342s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(4) {
    transform: translateX(750px);
    animation: profileSlide 60s -336s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(5) {
    transform: translateX(1000px);
    animation: profileSlide 60s -330s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(6) {
    transform: translateX(1250px);
    animation: profileSlide 60s -324s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(7) {
    transform: translateX(1500px);
    animation: profileSlide 60s -318s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(8) {
    transform: translateX(1750px);
    animation: profileSlide 60s -312s linear infinite
}



.profileCarouselSection .profileSlide .profile:nth-of-type(9) {
    transform: translateX(2000px);
    animation: profileSlide 60s -306s linear infinite
}


.profileCarouselSection .profileSlide .profile:nth-of-type(10) {
    transform: translateX(2250px);
    animation: profileSlide 60s -300s linear infinite
}

.profileCarouselSection .profileSlide .profile:nth-of-type(11) {
    transform: translateX(2500px);
    animation: profileSlide 60s -294s linear infinite
}

.profileCarouselSection .profileSlide .profile:nth-of-type(12) {
    transform: translateX(2750px);
    animation: profileSlide 60s -288s linear infinite
}

.serviceBannerSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 1.2%
}

@media(min-width: 1024px) {
    .serviceBannerSection {
        padding-bottom: 0
    }
}

.serviceBannerSection .bannerCard {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transition1);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(5px)
}

@media(min-width: 568px) {
    .serviceBannerSection .bannerCard {
        width: 49%
    }
}

@media(min-width: 1024px) {
    .serviceBannerSection .bannerCard {
        width: 24%;
        bottom: var(--section-space-y)
    }
}

.serviceBannerSection .bannerCard:nth-child(1):hover .content {
    background: var(--color1)
}

.serviceBannerSection .bannerCard:nth-child(1) .content {
    color: var(--white);
    background: rgba(18, 33, 93, .5254901961)
}

.serviceBannerSection .bannerCard:nth-child(2):hover .content {
    background: var(--color2)
}

.serviceBannerSection .bannerCard:nth-child(2) .content {
    color: var(--white);
    background: rgba(0, 184, 194, .2549019608)
}

.serviceBannerSection .bannerCard:nth-child(3):hover .content {
    background: var(--color3)
}

.serviceBannerSection .bannerCard:nth-child(3) .content {
    color: var(--white);
    background: rgba(255, 110, 97, .2196078431)
}

.serviceBannerSection .bannerCard:nth-child(4) .content {
    color: var(--white);
    background: var(--black)
}

.serviceBannerSection .bannerCard:hover {
    box-shadow: rgba(0, 0, 0, .1) 0px 20px 25px -5px, rgba(0, 0, 0, .04) 0px 10px 10px -5px;
    transform: scale(1.025) translateY(-5px)
}

.serviceBannerSection .bannerCard:hover .media::before {
    opacity: .8
}

.serviceBannerSection .bannerCard:hover .media .arrow {
    color: var(--color1);
    background-color: var(--white);
    transform: scale(1.3)
}

.serviceBannerSection .bannerCard:hover .media .arrow::before {
    opacity: 0
}

.serviceBannerSection .bannerCard:hover .content {
    bottom: 0
}

.serviceBannerSection .bannerCard:hover .content .textBtn {
    opacity: 1
}

.serviceBannerSection .bannerCard * {
    cursor: inherit;
    transition: inherit
}

.serviceBannerSection .bannerCard .media {
    width: 100%;
    padding-top: 56.25%;
    border-radius: inherit;
    overflow: hidden;
    z-index: 2
}

@media(min-width: 1024px) {
    .serviceBannerSection .bannerCard .media {
        padding-top: 100%
    }
}

.serviceBannerSection .bannerCard .media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.373) 13%, rgba(255, 255, 255, 0) 100%);
    opacity: .7;
    transition: var(--transition1)
}

.serviceBannerSection .bannerCard .media img {
    position: absolute;
    bottom: -80px;
    left: -50px;
    width: 80%;
    object-fit: contain;
    object-position: center;
    will-change: transform;
    transition: var(--transition2);
    opacity: .025
}

.serviceBannerSection .bannerCard .media .arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    border-radius: 100%;
    will-change: transform;
    transform: rotate(-45deg)
}

.serviceBannerSection .bannerCard .media .arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .0509803922);
    border-top: 1px solid rgba(241, 246, 255, .2392156863);
    border-bottom: 1px solid rgba(252, 253, 255, .0901960784);
    box-shadow: inset 0 3px 25px -0.5px rgba(246, 250, 255, .0588235294);
    border-radius: 100%;
    transition: var(--transition1)
}

.serviceBannerSection .bannerCard .media .arrow i {
    display: flex;
    margin: auto;
    color: inherit;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

.serviceBannerSection .bannerCard .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.413rem;
    transition: var(--transition1);
    z-index: 1
}

.serviceBannerSection .bannerCard .content .title {
    font-family: var(--fontFamily1);
    color: inherit;
    font-weight: 300;
    line-height: 1.1;
    transition: var(--transition1)
}

.serviceBannerSection .bannerCard .content .textBtn {
    opacity: 0;
    margin-top: 1rem;
    color: inherit;
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: 2px
}

.boxCardBannerSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    gap: 20px 2%
}

.boxCardBannerSection .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 75%;
    overflow: hidden;
    z-index: -1
}

.boxCardBannerSection .bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .96);
    opacity: .5
}

.boxCardBannerSection .bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.boxCardBannerSection .content {
    padding-bottom: var(--section-space-y);
    width: 100%;
    color: var(--white);
    text-align: center
}

.boxCardBannerSection .content .mainLabel {
    font-family: var(--font-family1);
    color: var(--white);
    margin-bottom: 1rem
}

.boxCardBannerSection .content .title {
    margin: 0 auto;
    font-weight: 400;
    max-width: 650px;
    line-height: 1
}

.boxCardBannerSection .content p {
    margin: 0 auto;
    margin-top: .7075rem;
    max-width: 700px;
    line-height: 1.3
}

.boxCardBannerSection .content .filledBtn {
    margin-top: 1.413rem
}

.boxCardBannerSection .boxCard {
    width: 100%;
    background-color: var(--white);
    border-radius: var(--radius);
    padding: 1.413rem
}

@media(min-width: 1024px) {
    .boxCardBannerSection .boxCard {
        width: 48%;
        padding: 2rem
    }
}

.boxCardBannerSection .boxCard::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 10px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(20px);
    opacity: .75;
    border-radius: inherit
}

.boxCardBannerSection .boxCard:nth-of-type(3)::before {
    background: #ffd7c7
}

.boxCardBannerSection .boxCard:nth-of-type(3) .label {
    color: var(--color2)
}

.boxCardBannerSection .boxCard:nth-of-type(4)::before {
    background: #d4fcfa
}

.boxCardBannerSection .boxCard:nth-of-type(4) .label {
    color: var(--color1)
}

.boxCardBannerSection .boxCard .label {
    font-size: .878rem;
    font-weight: 600;
    font-family: var(--font-family1);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: .35375rem
}

.boxCardBannerSection .boxCard .title {
    color: var(--black);
    line-height: 1
}

.boxCardBannerSection .boxCard p {
    color: var(--black)
}

.boxCardBannerSection .boxCard p span {
    font-weight: 500
}

.cardSliderSection:has(.instaCard) .cardSlider {
    flex-wrap: nowrap;
    gap: 20px
}

.cardSliderSection {
    padding-bottom: var(--section-space-y);
    overflow: hidden
}

.cardSliderSection.online {
    background-color: #ebf1f0
}

.cardSliderSection .titleDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-top: var(--section-space-y);
    text-align: center
}

@media(min-width: 1024px) {
    .cardSliderSection .titleDiv {
        text-align: left
    }
}

.cardSliderSection .titleDiv .title {
    color: var(--gray)
}

.cardSliderSection .titleDiv p {
    color: var(--gray);
    font-weight: 400
}

@media(min-width: 1024px) {
    .cardSliderSection .titleDiv p {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.cardSliderSection .cardSlider {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    gap: 0 20px;
    justify-content: space-between
}

.cardSliderSection .cardSlider .card {
    width: 100%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    padding: 1.413rem;
    color: var(--black);
    background: #ebf1f0;
    border-radius: var(--radius);
    padding: .7075rem
}

@media(min-width: 568px) {
    .cardSliderSection .cardSlider .card {
        width: 48%;
        min-width: 48%
    }
}

@media(min-width: 1024px) {
    .cardSliderSection .cardSlider .card {
        width: 32%;
        min-width: 32%
    }
}

.cardSliderSection .cardSlider .card.upcoming {
    color: var(--black);
    background: #faf7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color2)
}

.cardSliderSection .cardSlider .card.upcoming .content {
    justify-content: center;
    text-align: center
}

.cardSliderSection .cardSlider .card.upcoming .content .title {
    color: var(--color2);
    border: none
}

.cardSliderSection .cardSlider .card .media {
    aspect-ratio: 16/9;
    border-radius: calc(var(--radius) - .7075rem);
    overflow: hidden
}

.cardSliderSection .cardSlider .card .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .7075rem
}

.cardSliderSection .cardSlider .card .title {
    color: var(--white);
    font-weight: 600;
    border-bottom: 1px solid var(--borderGray);
    padding-bottom: .7075rem
}

.cardSliderSection .cardSlider .card ul {
    width: 100%;
    margin-top: .7075rem;
    margin-bottom: 1.413rem;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 5px 0
}

.cardSliderSection .cardSlider .card ul li {
    list-style-type: disc;
    list-style-position: outside
}

.cardSliderSection .cardSlider .card ul li::marker {
    color: var(--color1)
}

.cardSliderSection .cardSlider .card .btnDiv {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0
}

.cardSliderSection .cardSlider .card .btnDiv a {
    flex: 1;
    padding: .7075rem
}

.cardSliderSection .cardSlider .card .btnDiv .outlinedBtn {
    border: 1px solid rgba(0, 0, 0, 0)
}

.cardSliderSection .cardSlider .instaCard {
    width: 240px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    transition: var(--transition1);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
    overflow: hidden
}

@media(min-width: 1024px) {
    .cardSliderSection .cardSlider .instaCard {
        width: 350px;
        min-width: 350px
    }
}

.cardSliderSection .cardSlider .instaCard:hover {
    box-shadow: rgba(0, 0, 0, .1) 0px 20px 25px -5px, rgba(0, 0, 0, .04) 0px 10px 10px -5px
}

.cardSliderSection .cardSlider .instaCard:hover .imageDiv::before {
    opacity: .8
}

.cardSliderSection .cardSlider .instaCard:hover .imageDiv img {
    filter: unset;
    transform: scale(1.1)
}

.cardSliderSection .cardSlider .instaCard:hover .imageDiv .arrow {
    background-color: var(--color1);
    transform: scale(1.3)
}

.cardSliderSection .cardSlider .instaCard:hover .imageDiv .arrow::before {
    opacity: 0
}

.cardSliderSection .cardSlider .instaCard:hover .content .textBtn {
    opacity: 1
}

.cardSliderSection .cardSlider .instaCard * {
    cursor: inherit;
    transition: inherit
}

.cardSliderSection .cardSlider .instaCard .imageDiv {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden
}

.cardSliderSection .cardSlider .instaCard .imageDiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 70%;
    background: linear-gradient(0deg, rgba(0, 10, 28, 0) 13%, var(--color1) 100%);
    opacity: .7;
    transition: var(--transition1)
}

.cardSliderSection .cardSlider .instaCard .imageDiv img,
.cardSliderSection .cardSlider .instaCard .imageDiv blockquote,
.cardSliderSection .cardSlider .instaCard .imageDiv iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    transition: var(--transition2);
    transform: scale(1.45)
}

.cardSliderSection .cardSlider .instaCard .imageDiv .arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    border-radius: 100%;
    will-change: transform;
    transform: rotate(-45deg)
}

.cardSliderSection .cardSlider .instaCard .imageDiv .arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .0509803922);
    border-top: 1px solid rgba(241, 246, 255, .2392156863);
    border-bottom: 1px solid rgba(252, 253, 255, .0901960784);
    box-shadow: inset 0 3px 25px -0.5px rgba(246, 250, 255, .0588235294);
    border-radius: 100%;
    transition: var(--transition1)
}

.cardSliderSection .cardSlider .instaCard .imageDiv .arrow i {
    display: flex;
    margin: auto;
    color: inherit;
    font-size: .7075rem
}

.cardSliderSection .cardSlider .instaCard .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.413rem;
    transition: var(--transition1);
    z-index: 1;
    text-align: left;
    pointer-events: none
}

.cardSliderSection .cardSlider .instaCard .content .title {
    font-family: var(--font-family1);
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: var(--transition1)
}

.cardSliderSection .cardSlider .instaCard .content .textBtn {
    opacity: 0;
    font-size: .878rem
}

.cardSliderSection .slideControler {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    gap: 10px;
    display: flex;
    justify-content: center;
    text-align: center
}

.cardSliderSection .slideControler div {
    background: var(--white);
    border: 1px solid var(--color1);
    color: var(--black)
}

.cardSliderSection .slideControler div:hover {
    border: 1px solid var(--color1)
}

.cardSliderSection .slideControler div i {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

.cardSliderSection .slideControler {
    width: 100%;
    display: flex;
    gap: 0 10px
}

.cardSliderSection .slideControler:hover div:nth-child(2) {
    border: 1px solid var(--borderGray)
}

.cardSliderSection .slideControler div {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color1);
    background-color: var(--white);
    border: 1px solid var(--color1);
    cursor: pointer;
    transition: var(--transition1)
}

.cardSliderSection .slideControler div:hover {
    background-color: var(--color1);
    color: var(--white)
}

.cardSliderSection .slideControler div * {
    cursor: pointer
}

.cardSliderSection .slideControler div i {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

.specialitiesSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    background: var(--lightGray)
}

.specialitiesSection .bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: var(--gradient2)
}

.specialitiesSection .innerSection {
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 2%
}

@media(min-width: 768px) {
    .specialitiesSection .innerSection {
        gap: 30px 2%
    }
}

.specialitiesSection .innerSection .titleDiv {
    width: 100%;
    text-align: center
}

.specialitiesSection .innerSection .mainLabel {
    margin: 0;
    color: var(--color1);
    font-weight: 500
}

.specialitiesSection .innerSection .title {
    margin: 0;
    width: 100%;
    font-family: var(--fontFamily1);
    color: var(--black);
    margin-bottom: .7075rem
}

.specialitiesSection .innerSection .card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius);
    border: 1px solid var(--white);
    color: var(--black);
    background: var(--white);
    overflow: hidden
}

@media(min-width: 568px) {
    .specialitiesSection .innerSection .card {
        width: 49%
    }
}

@media(min-width: 1024px) {
    .specialitiesSection .innerSection .card {
        width: 32%
    }
}

.specialitiesSection .innerSection .card:hover .arrowBtn {
    color: var(--white)
}

.specialitiesSection .innerSection .card:hover .arrowBtn::before {
    content: "";
    text-indent: 15px;
    width: 100%;
    color: var(--color2);
    background-color: var(--color1);
    justify-content: flex-start
}

.specialitiesSection .innerSection .card .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.413rem;
    text-align: center
}

.specialitiesSection .innerSection .card .content .icon {
    width: 70px;
    margin-bottom: .7075rem
}

.specialitiesSection .innerSection .card .content span {
    color: var(--color3);
    font-size: .878rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.specialitiesSection .innerSection .card .content .cardTitle {
    font-family: var(--font-family1);
    font-weight: 500;
    line-height: 1.1;
    padding-bottom: .7075rem;
    border-bottom: 1px solid var(--borderGray);
    text-transform: uppercase
}

.specialitiesSection .innerSection .card .content p {
    line-height: 1.5;
    font-weight: 400;
    opacity: .8
}

.specialitiesSection .innerSection .card .content .btnDiv {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
    .specialitiesSection .innerSection .card .content .btnDiv {
        justify-content: flex-start
    }
}

.specialitiesSection .innerSection .card .content .btnDiv .arrowBtn {
    font-size: .878rem
}

.specialitiesSection .innerSection .card .media {
    display: none;
    width: 100%;
    min-height: 200px;
    border-radius: 0 30% 0 0;
    overflow: hidden
}

.specialitiesSection .innerSection .card .media img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover
}

.featureCardSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    background: var(--white);
    display: flex;
    flex-wrap: wrap
}

.featureCardSection .bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: var(--gradient2)
}

.featureCardSection .titleDiv {
    width: 100%;
    height: 100%;
    padding-bottom: var(--section-space-y);
    text-align: center
}

@media(min-width: 1024px) {
    .featureCardSection .titleDiv {
        text-align: left
    }
}

.featureCardSection .titleDiv .mainLabel {
    margin: 0;
    color: var(--black);
    font-weight: 500
}

.featureCardSection .titleDiv .title {
    margin: 0;
    color: var(--gray)
}

.featureCardSection .titleDiv p {
    margin-top: 5px;
    color: var(--gray);
    font-weight: 400;
    opacity: .7
}

@media(min-width: 1024px) {
    .featureCardSection .titleDiv p {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.featureCardSection .titleDiv .btnDiv {
    justify-content: center
}

@media(min-width: 1024px) {
    .featureCardSection .titleDiv .btnDiv {
        justify-content: flex-start
    }
}

.featureCardSection .cardDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 1%
}

.featureCardSection .cardDiv .card {
    width: 100%;
    color: var(--black);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 1.413rem
}

@media(min-width: 768px) {
    .featureCardSection .cardDiv .card {
        width: 49%
    }
}

@media(min-width: 1024px) {
    .featureCardSection .cardDiv .card {
        width: 24%
    }
}

.featureCardSection .cardDiv .card:nth-child(1) {
    background: #a1d2df
}

.featureCardSection .cardDiv .card:nth-child(2) {
    background: #ffe3e2
}

.featureCardSection .cardDiv .card:nth-child(3) {
    background: #d1e8c6
}

.featureCardSection .cardDiv .card:nth-child(4) {
    background: #e5d9f0
}

.featureCardSection .cardDiv .card .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: .7075rem;
    margin-top: .7075rem
}

.featureCardSection .cardDiv .card .content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background: var(--color1)
}

.featureCardSection .cardDiv .card .content span {
    color: var(--color3);
    font-size: .878rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.featureCardSection .cardDiv .card .content .cardTitle {
    color: var(--gray);
    font-weight: 600;
    line-height: 1.1
}

.featureCardSection .cardDiv .card .content p {
    max-width: 350px;
    margin-top: 5px;
    line-height: 1.5;
    font-weight: 400;
    opacity: .8
}

.featureCardSection .cardDiv .card .content .btnDiv {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
    .featureCardSection .cardDiv .card .content .btnDiv {
        justify-content: flex-start
    }
}

.featureCardSection .cardDiv .card .content .btnDiv .arrowBtn {
    font-size: .878rem
}

.featureCardSection .cardDiv .card .media {
    width: 60px;
    border-radius: var(--btnRadius);
    overflow: hidden
}

@media(min-width: 1024px) {
    .featureCardSection .cardDiv .card .media {
        width: 80px
    }
}

.mediaSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    margin: 0 auto;
    overflow: hidden
}

.mediaSection .titleDiv {
    padding-bottom: var(--section-space-y)
}

.mediaSection .mediaWrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.mediaSection .mediaWrapper .mediaDiv {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

@media(min-width: 1024px) {
    .mediaSection .mediaWrapper .mediaDiv {
        width: calc(49% - 5px)
    }
}

.mediaSection .mediaWrapper .mediaFile {
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition1);
    overflow: hidden;
    border-radius: var(--radius)
}

.mediaSection .mediaWrapper .mediaFile:nth-child(1) {
    width: 100%
}

.mediaSection .mediaWrapper .mediaFile:nth-child(2) {
    width: calc(49% - 5px)
}

.mediaSection .mediaWrapper .mediaFile:nth-child(3) {
    width: calc(49% - 5px)
}

.mediaSection .mediaWrapper .mediaFile:hover img {
    transform: scale(1.015)
}

.mediaSection .mediaWrapper .mediaFile img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    cursor: pointer;
    transition: all 1s linear
}

.mediaSection .arrowDiv {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-25px)
}

@media(min-width: 1024px) {
    .mediaSection .arrowDiv {
        position: relative;
        top: unset;
        display: none;
        transform: none
    }
}

.mediaSection .arrowDiv .leftArrow {
    left: 0;
    border-radius: 0 2.83rem 2.83rem 0
}

.mediaSection .arrowDiv .rightArrow {
    right: 0;
    border-radius: 2.83rem 0 0 2.83rem
}

.mediaSection .arrowDiv .arrow {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    color: var(--white);
    background-color: rgba(0, 0, 0, .3921568627);
    pointer-events: all;
    cursor: pointer;
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    .mediaSection .arrowDiv .arrow {
        position: fixed;
        bottom: 50%;
        z-index: 999;
        transform: translateY(25px)
    }
}

.mediaSection .arrowDiv .arrow:hover img,
.mediaSection .arrowDiv .arrow:hover i {
    opacity: 1;
    transform: scale(1.3)
}

.mediaSection .arrowDiv .arrow i {
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection .arrowDiv .arrow img {
    width: 20px;
    opacity: .1;
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection .popupClose {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: rgba(26, 26, 26, .356);
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection .popupClose:hover {
    background-color: rgba(255, 255, 255, .329)
}

.mediaSection .popupClose:hover i {
    color: var(--color1)
}

.mediaSection .popupClose i {
    top: 2px;
    color: var(--white);
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection.mediaPoupIntro {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    background-color: var(--black)
}

@media(min-width: 1024px) {
    .mediaSection.mediaPoupIntro {
        padding: 2rem
    }
}

.mediaSection.mediaPoupIntro .mediaWrapper {
    margin: auto;
    max-width: 600px;
    display: flex;
    gap: 0 20px
}

.mediaSection.mediaPoupIntro .mediaWrapper .mediaFile {
    display: block;
    width: 100%;
    min-width: 100%;
    padding: 0;
    object-fit: contain;
    border-radius: 0
}

.mediaSection.mediaPoupIntro .mediaWrapper .mediaFile img {
    position: relative;
    object-fit: contain
}

.mediaSection.mediaPoupIntro .popupClose {
    display: flex
}

.mediaSection.mediaPoupIntro .arrowDiv {
    display: flex
}

.mediaSection1 {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    margin: 0 auto;
    overflow: hidden
}

.mediaSection1 .titleDiv {
    padding-bottom: var(--section-space-y)
}

.mediaSection1 .mediaWrapper {
    width: 100%;
    display: flex
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper {
        display: grid;
        grid-template-columns: 50% auto auto;
        gap: 10px;
        padding: 0
    }
}

.mediaSection1 .mediaWrapper .mediaFile {
    width: 100%;
    min-width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition1);
    overflow: hidden
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile {
        padding-top: 83.3333333333%;
        min-width: auto;
        margin: 0
    }
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile:nth-child(1) {
        width: 100%;
        grid-row-start: 1;
        grid-row-end: 3;
        border-radius: var(--radius)
    }
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile:nth-child(2) {
        border-radius: var(--radius) var(--radius) 0 0
    }
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile:nth-child(3) {
        border-radius: var(--radius) var(--radius) var(--radius) 0
    }
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile:nth-child(4) {
        border-radius: 0 0 var(--radius) var(--radius)
    }
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile:nth-child(5) {
        border-radius: 0 var(--radius) var(--radius) var(--radius)
    }
}

@media(min-width: 1024px) {
    .mediaSection1 .mediaWrapper .mediaFile:nth-child(n+6) {
        display: none
    }
}

.mediaSection1 .mediaWrapper .mediaFile:hover img {
    transform: scale(1.015)
}

.mediaSection1 .mediaWrapper .mediaFile img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: all 1s linear
}

.mediaSection1 .arrowDiv {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-25px)
}

@media(min-width: 1024px) {
    .mediaSection1 .arrowDiv {
        position: relative;
        top: unset;
        display: none;
        transform: none
    }
}

.mediaSection1 .arrowDiv .leftArrow {
    left: 0;
    border-radius: 0 2.83rem 2.83rem 0
}

.mediaSection1 .arrowDiv .rightArrow {
    right: 0;
    border-radius: 2.83rem 0 0 2.83rem
}

.mediaSection1 .arrowDiv .arrow {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    color: var(--white);
    background-color: rgba(0, 0, 0, .3921568627);
    pointer-events: all;
    cursor: pointer;
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    .mediaSection1 .arrowDiv .arrow {
        position: fixed;
        bottom: 50%;
        z-index: 999;
        transform: translateY(25px)
    }
}

.mediaSection1 .arrowDiv .arrow:hover img,
.mediaSection1 .arrowDiv .arrow:hover i {
    opacity: 1;
    transform: scale(1.3)
}

.mediaSection1 .arrowDiv .arrow i {
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection1 .arrowDiv .arrow img {
    width: 20px;
    opacity: .1;
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection1 .popupClose {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: rgba(26, 26, 26, .356);
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection1 .popupClose:hover {
    background-color: rgba(255, 255, 255, .329)
}

.mediaSection1 .popupClose:hover i {
    color: var(--color1)
}

.mediaSection1 .popupClose i {
    top: 2px;
    color: var(--white);
    cursor: pointer;
    transition: var(--transition1)
}

.mediaSection1.mediaPoupIntro {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    background-color: var(--black)
}

@media(min-width: 1024px) {
    .mediaSection1.mediaPoupIntro {
        padding: 2rem
    }
}

.mediaSection1.mediaPoupIntro .mediaWrapper {
    margin: auto;
    max-width: 600px;
    display: flex;
    gap: 0 20px
}

.mediaSection1.mediaPoupIntro .mediaWrapper .mediaFile {
    display: block;
    width: 100%;
    min-width: 100%;
    padding: 0;
    object-fit: contain;
    border-radius: 0
}

.mediaSection1.mediaPoupIntro .mediaWrapper .mediaFile img {
    position: relative;
    object-fit: contain
}

.mediaSection1.mediaPoupIntro .popupClose {
    display: flex
}

.mediaSection1.mediaPoupIntro .arrowDiv {
    display: flex
}

.highlightSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-top: var(--section-space-y)
}

.highlightSection .highlights {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: var(--text-color);
    border-radius: var(--radius)
}

.highlightSection .highlights li {
    width: 100%;
    padding: 1.413rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

@media(min-width: 568px) {
    .highlightSection .highlights li {
        flex: 1;
        width: auto
    }
}

.highlightSection .highlights li:nth-last-of-type(1)::before {
    display: none
}

.highlightSection .highlights li::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 1px;
    background: #fff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(202, 202, 202, 0.089) 32%, rgba(0, 0, 0, 0) 100%)
}

@media(min-width: 568px) {
    .highlightSection .highlights li::before {
        width: 1px;
        height: 100%;
        background: #fff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2357317927) 37%, rgba(0, 0, 0, 0) 100%)
    }
}

.highlightSection .highlights li .value {
    font-family: var(--font-family1);
    font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px);
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(138deg, rgba(185, 185, 185, 0.062745098), var(--black) 30%, var(--textGray) 72%, rgba(177, 177, 177, 0) 90%);
    -webkit-background-clip: text;
    background-clip: text
}

.highlightSection .highlights li .label {
    margin: 0;
    opacity: .5;
    font-weight: 400
}

.faqSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    background: var(--white)
}

.faqSection .titleDiv .title {
    color: var(--black);
    text-align: center
}

.faqSection .dropDownDiv {
    margin: 0 auto;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    gap: 10px 0;
    margin-top: .7075rem;
    text-align: left
}

.faqSection .dropDownDiv .dropList {
    color: var(--black);
    overflow: hidden
}

.faqSection .dropDownDiv .dropList:hover .dropBox .dropIcon i {
    color: var(--darkGray)
}

.faqSection .dropDownDiv .dropList .dropBox {
    padding: .7075rem 1.413rem;
    background: var(--lightGray);
    border-radius: var(--btnRadius)
}

.faqSection .dropDownDiv .dropList .dropBox .title {
    font-size: 1rem;
    font-weight: 500
}

.faqSection .dropDownDiv .dropList .dropBox .dropIcon {
    padding: 5px 10px;
    border-radius: var(--radius)
}

.faqSection .dropDownDiv .dropList .dropContent {
    padding: .7075rem 1.413rem;
    background: var(--lightGray);
    border-radius: var(--radius);
    margin-top: 5px
}

.faqSection .dropDownDiv .dropList .dropContent p {
    font-weight: 400
}

.faqSection .dropDownDiv .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.serciceCardBoxSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    flex-direction: column;
    gap: .7075rem
}

.serciceCardBoxSection .innerSection {
    display: flex;
    flex-direction: column;
    gap: .7075rem
}

.serciceCardBoxSection .card {
    border-radius: var(--btnRadius);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card {
        gap: 10px
    }
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card:nth-child(odd) .content {
        order: 1
    }
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card:nth-child(odd) .media {
        order: 2
    }
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card:nth-child(even) .content {
        order: 2
    }
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card:nth-child(even) .media {
        order: 1
    }
}

.serciceCardBoxSection .card:nth-child(1) .content {
    color: var(--white);
    background: var(--color1);
    border: 1px solid var(--color1)
}

.serciceCardBoxSection .card:nth-child(1) .content .title,
.serciceCardBoxSection .card:nth-child(1) .content ul li::marker {
    color: var(--white)
}

.serciceCardBoxSection .card:nth-child(2) .content {
    background: #edf3ff;
    border: 1px solid #dff0ff
}

.serciceCardBoxSection .card:nth-child(2) .content .title,
.serciceCardBoxSection .card:nth-child(2) .content ul li::marker {
    color: #1b3468
}

.serciceCardBoxSection .card:nth-child(3) .content {
    background: #eaf0e8;
    border: 1px solid #dfffe3
}

.serciceCardBoxSection .card:nth-child(3) .content .title,
.serciceCardBoxSection .card:nth-child(3) .content ul li::marker {
    color: #1b681b
}

.serciceCardBoxSection .card .content {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    order: 2;
    border-radius: inherit
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card .content {
        width: calc(100% - 410px)
    }
}

.serciceCardBoxSection .card .content .title {
    font-family: var(--fontFamily1);
    font-weight: 200;
    line-height: 1
}

.serciceCardBoxSection .card .content .subTitle {
    margin-top: .7075rem
}

.serciceCardBoxSection .card .content ul {
    padding-left: .7075rem;
    margin-top: .5rem
}

.serciceCardBoxSection .card .content ul li {
    list-style-type: disc;
    list-style-position: outside
}

.serciceCardBoxSection .card .content ul li::marker {
    color: var(--color1)
}

.serciceCardBoxSection .card .content .note {
    font-size: .878rem;
    border-top: 1px solid rgba(255, 255, 255, .5411764706);
    padding-top: 10px;
    margin-top: .7075rem
}

.serciceCardBoxSection .card .media {
    order: 1;
    width: 100%;
    min-height: 200px;
    border-radius: inherit;
    overflow: hidden
}

@media(min-width: 1024px) {
    .serciceCardBoxSection .card .media {
        width: 400px
    }
}

.serciceCardBoxSection .card .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16/9
}

.homeCardBoxSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    flex-direction: column;
    gap: .7075rem
}

.homeCardBoxSection .homeImage {
    aspect-ratio: 16/6;
    object-fit: cover;
    object-position: center;
    overflow: hidden
}

.homeCardBoxSection .card {
    border-radius: var(--btnRadius);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: hidden
}

@media(min-width: 1024px) {
    .homeCardBoxSection .card {
        gap: 10px
    }
}

.homeCardBoxSection .card .content {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    order: 2;
    border-radius: inherit;
    color: var(--white);
    background: var(--black);
    border: 1px solid var(--color1)
}

@media(min-width: 1024px) {
    .homeCardBoxSection .card .content {
        width: calc(100% - 410px)
    }
}

.homeCardBoxSection .card .content .mainLabel {
    color: var(--white)
}

.homeCardBoxSection .card .content .title {
    font-family: var(--fontFamily1);
    font-weight: 200;
    line-height: 1.3
}

.homeCardBoxSection .card .content p {
    font-weight: 200;
    opacity: .9
}

.homeCardBoxSection .card .content .subTitle {
    margin-top: .7075rem
}

.homeCardBoxSection .card .content ul {
    padding-left: .7075rem;
    margin-top: .5rem
}

.homeCardBoxSection .card .content ul li {
    list-style-type: disc;
    list-style-position: outside
}

.homeCardBoxSection .card .content ul li::marker {
    color: var(--color1)
}

.homeCardBoxSection .card .content .note {
    font-size: .878rem;
    border-top: 1px solid rgba(255, 255, 255, .5411764706);
    padding-top: 10px;
    margin-top: .7075rem
}

.homeCardBoxSection .card .media {
    order: 1;
    width: 100%;
    min-height: 200px;
    border-radius: inherit;
    overflow: hidden
}

@media(min-width: 1024px) {
    .homeCardBoxSection .card .media {
        width: 400px
    }
}

.homeCardBoxSection .card .media::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: .9;
    width: 100%;
    height: 80%;
    background: #000;
    background: linear-gradient(0deg, #111111 0%, rgba(0, 0, 0, 0) 100%)
}

.homeCardBoxSection .card .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 2/3
}

.homeCardBoxSection .card .media .textDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.413rem;
    z-index: 2
}

.homeCardBoxSection .card .media .textDiv .title {
    margin: 0;
    font-family: var(--font-family1);
    font-weight: 400;
    opacity: 1
}

.homeCardBoxSection .card .media .textDiv p {
    margin: 0
}

.textSlider {
    --textSlide--colour: var(--white);
    --textSlide--bg: var(--color1);
    --textSlide--repeat-count: 4;
    height: 100%;
    display: flex;
    align-content: center;
    flex-direction: column;
    gap: 5vw;
    overflow: hidden;
    background: var(--textSlide--bg)
}

.textSlider .bg {
    mix-blend-mode: screen;
    background: var(--textSlide--colour)
}

.textSlider .textSliderWrapper {
    padding-top: .7075rem;
    padding-bottom: .7075rem;
    overflow: hidden;
    width: 110%;
    margin-left: -5%;
    color: rgba(255, 255, 255, .2196078431);
    --textSlide--direction: -1;
    background: var(--textSlide--bg)
}

.textSlider .textSliderWrapper div {
    margin: 0;
    display: flex;
    gap: .5em;
    font-family: var(--font-family1);
    font-size: clamp(5rem, 5vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.2vw;
    text-transform: uppercase;
    line-height: 1.1
}

.textSlider .textSliderWrapper div::after {
    content: "*";
    color: var(--color2);
    transform: translateY(0.175em);
    opacity: 1
}

.textSlider .textSliderWrapper div::before {
    content: ""
}

.textSlider .textDiv {
    --textSlide--base-duration: 1s;
    --textSlide--repeat-size: calc(100% / var(--textSlide--repeat-count));
    --textSlide--double-size: calc(var(--textSlide--repeat-size) * 2);
    --textSlide--duration: calc(var(--textSlide--base-duration) * var(--text-slider-speed, 20));
    width: max-content;
    display: flex
}

@media(prefers-reduced-motion: no-preference) {
    .textSlider .textDiv {
        animation: textSlide var(--textSlide--duration) infinite linear, reduce-textSlide var(--textSlide--duration) infinite linear paused;
        animation-composition: add
    }

    .textSlider .textDiv:hover {
        animation-play-state: running
    }
}

@keyframes textSlide {
    from {
        transform: translateX(calc(-1 * var(--textSlide--double-size) - var(--textSlide--double-size) * var(--textSlide--direction, 1)))
    }

    to {
        transform: translateX(calc(var(--textSlide--double-size) * -1))
    }
}

@keyframes reduce-textSlide {
    from {
        transform: translateX(calc(var(--textSlide--repeat-size) * var(--textSlide--direction, 1)))
    }

    to {
        transfrom: translateX(calc(var(--textSlide--double-size) * -1))
    }
}

.contentSection {
    padding-top: var(--section-space-y);
    background-color: #f2efeb;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat
}

.contentSection::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 1;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url("/assets/images/home/icon/demo-travel-agency-slider-07.webp")
}

@media(min-width: 1024px) {
    .contentSection {
        width: 100%;
        height: auto;
        clear: both;
        margin: 0 auto;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-bottom: var(--section-space-y);
        padding-top: var(--section-space-y)
    }
}

.contentSection .innerSection {
    padding-top: var(--section-space-y);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

@media(min-width: 1024px) {
    .contentSection .innerSection {
        padding-bottom: var(--section-space-y);
        padding-top: var(--section-space-y)
    }
}

.contentSection .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    width: 100%;
    padding-left: .7075rem;
    padding-left: 50px
}

@media(min-width: 1024px) {
    .contentSection .content {
        padding: 0;
        clear: both;
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-left: 70px;
        width: 60%
    }
}

.contentSection .content .label {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    white-space: nowrap;
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: var(--textGray);
    font-family: var(--fontFamily1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 10px;
    opacity: .6
}

@media(min-width: 1024px) {
    .contentSection .content .label {
        width: 70px
    }
}

.contentSection .content .title {
    max-width: 550px;
    font-family: var(--fontFamily1);
    font-weight: 500;
    line-height: 1
}

.contentSection .content p {
    color: var(--gray);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .5px
}

.contentSection .content .milestones {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem
}

.contentSection .content .milestones li {
    padding: 0 8px;
    border-right: 1px solid #e6e6e6
}

@media(min-width: 568px) {
    .contentSection .content .milestones li {
        padding: 0 .7075rem
    }
}

@media(min-width: 1024px) {
    .contentSection .content .milestones li {
        padding: 0 2rem
    }
}

.contentSection .content .milestones li:nth-child(1) {
    padding-left: 0
}

.contentSection .content .milestones li:nth-last-child(1) {
    border: none
}

.contentSection .content .milestones li .label {
    margin: 0;
    margin-bottom: 5px;
    font-size: .667rem;
    font-weight: 500;
    color: var(--textGray);
    text-transform: uppercase;
    letter-spacing: 3px
}

@media(min-width: 568px) {
    .contentSection .content .milestones li .label {
        font-size: .733rem
    }
}

.contentSection .content .milestones li .value {
    margin: 0;
    color: var(--black);
    font-family: var(--fontFamily1);
    font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px);
    line-height: 1;
    letter-spacing: -1px
}

@media(min-width: 1024px) {
    .contentSection .content .milestones li .value {
        font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px)
    }
}

.contentSection .content .milestones li .text {
    max-width: 150px;
    margin-top: 5px;
    color: var(--gray);
    font-family: var(--fontFamily1);
    font-size: .878rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase
}

.contentSection .content .btnDiv {
    margin-top: 2rem
}

.contentSection .media {
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border: 1px solid var(--lightGray)
}

@media(min-width: 1024px) {
    .contentSection .media {
        margin: 0 auto;
        width: 400px;
        padding-top: 400px;
        border-radius: var(--radius);
        box-shadow: rgba(0, 0, 0, .1) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px
    }
}

.contentSection .media .label {
    position: absolute;
    top: -2px;
    left: -2px;
    color: var(--color1);
    font-family: var(--fontFamily1);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: var(--white);
    padding: .7075rem 2rem;
    z-index: 1;
    border-radius: 0 0 2rem 0;
    box-shadow: rgba(0, 0, 0, .04) 0px 3px 5px
}

.contentSection .media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center
}

.reviewCarouselSection {
    padding-top: var(--section-space-y);
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
    background: var(--white);
    color: var(--black)
}

.reviewCarouselSection .bgText {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    transform: translateX(-50%);
    line-height: 1;
    margin: 0 auto;
    padding: 0 .75vw;
    color: inherit;
    font-size: 10vw;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.3vw;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .05
}

.reviewCarouselSection .titleDiv {
    color: inherit
}

.reviewCarouselSection .titleDiv .title {
    color: var(--black)
}

.reviewCarouselSection .titleDiv p {
    margin-top: 5px;
    color: inherit;
    opacity: .8
}

.reviewCarouselSection .reviewWrapper {
    width: 100%;
    display: flex;
    align-items: center;
    background: inherit;
    margin-top: .7075rem
}

.reviewCarouselSection .reviewWrapper::before,
.reviewCarouselSection .reviewWrapper::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 4;
    width: 50px;
    height: 100%;
    background: inherit
}

.reviewCarouselSection .reviewWrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%)
}

.reviewCarouselSection .reviewWrapper::after {
    content: "";
    right: 0;
    background: linear-gradient(-90deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%)
}

.reviewCarouselSection .reviewWrapper .reviewSlide {
    background: inherit
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review {
    z-index: 3;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    padding: 1.413rem;
    transition: var(--transition1);
    box-shadow: rgba(0, 0, 0, .055) 0px 4px 12px
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:hover {
    top: 0;
    box-shadow: rgba(50, 50, 93, .11) 0px 50px 100px -20px, rgba(0, 0, 0, .089) 0px 30px 60px -30px
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(1) .profile .avatar::before {
    background-color: #ff4500
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(2) .profile .avatar::before {
    background-color: #435761
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(3) .profile .avatar::before {
    background-color: #bf360c
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(4) .profile .avatar::before {
    background-color: #3583c5
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(5) .profile .avatar::before {
    background-color: #9c40ec
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(6) .profile .avatar::before {
    background-color: purple
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(7) .profile .avatar::before {
    background-color: #3f9b28
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(8) .profile .avatar::before {
    background-color: #008577
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(9) .profile .avatar::before {
    background-color: #0d4638
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(10) .profile .avatar::before {
    background-color: #3f9b28
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(11) .profile .avatar::before {
    background-color: #008577
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review:nth-child(12) .profile .avatar::before {
    background-color: #0d4638
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .content .caption {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .content p {
    font-size: .937rem;
    font-weight: 400;
    opacity: .85;
    line-height: 1.5
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .content p:nth-of-type(1) {
    margin: 0
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .content p:nth-last-of-type(1) {
    margin-bottom: .7075rem
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile {
    margin-top: auto;
    width: max-content;
    justify-self: flex-end;
    display: flex;
    flex-direction: column;
    padding-left: 48px;
    text-align: left
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile .avatar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(129, 129, 129, .1215686275);
    border-radius: 100%;
    margin-bottom: 10px
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile .avatar::before {
    content: attr(data-avatar);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: inherit;
    color: var(--white);
    background-color: #ff4500
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile .avatar img[src=""] {
    display: none
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile .avatar:has(img[src=""])::before {
    display: flex
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile .name {
    margin: 0;
    display: inline-block;
    font-size: .937rem;
    font-weight: 500
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .profile .subText {
    margin-top: 3px;
    margin-bottom: 0 !important;
    display: inline-block;
    font-size: .878rem;
    opacity: .8;
    line-height: 1
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .rating {
    display: flex;
    align-items: center;
    margin-top: 7px;
    font-size: .878rem;
    font-weight: 500
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .rating img {
    width: 70px;
    margin-right: 10px
}

.reviewCarouselSection .reviewWrapper .reviewSlide .review .rating span {
    opacity: .5
}

.reviewCarouselSection .reviewSlide {
    width: calc(100% + 100px);
    height: calc(400px + var(--section-space-y));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.reviewCarouselSection .reviewSlide:hover .review {
    animation-play-state: paused !important
}

@keyframes loop1 {
    0% {
        transform: translateX(1800px)
    }

    100% {
        transform: translateX(-360px)
    }
}

.reviewCarouselSection .reviewSlide .review {
    position: absolute;
    top: 5px;
    left: 0;
    width: 360px;
    height: 400px;
    margin-right: 0
}

.reviewCarouselSection .reviewSlide .review:nth-of-type(1) {
    transform: translateX(0px);
    animation: loop1 50s -490s linear infinite
}

@keyframes loop1 {
    0% {
        transform: translateX(1800px)
    }

    100% {
        transform: translateX(-360px)
    }
}

.reviewCarouselSection .reviewSlide .review {
    position: absolute;
    top: 5px;
    left: 0;
    width: 360px;
    height: 400px;
    margin-right: 0
}

.reviewCarouselSection .reviewSlide .review:nth-of-type(2) {
    transform: translateX(360px);
    animation: loop1 50s -480s linear infinite
}

@keyframes loop1 {
    0% {
        transform: translateX(1800px)
    }

    100% {
        transform: translateX(-360px)
    }
}

.reviewCarouselSection .reviewSlide .review {
    position: absolute;
    top: 5px;
    left: 0;
    width: 360px;
    height: 400px;
    margin-right: 0
}

.reviewCarouselSection .reviewSlide .review:nth-of-type(3) {
    transform: translateX(720px);
    animation: loop1 50s -470s linear infinite
}

@keyframes loop1 {
    0% {
        transform: translateX(1800px)
    }

    100% {
        transform: translateX(-360px)
    }
}

.reviewCarouselSection .reviewSlide .review {
    position: absolute;
    top: 5px;
    left: 0;
    width: 360px;
    height: 400px;
    margin-right: 0
}

.reviewCarouselSection .reviewSlide .review:nth-of-type(4) {
    transform: translateX(1080px);
    animation: loop1 50s -460s linear infinite
}

@keyframes loop1 {
    0% {
        transform: translateX(1800px)
    }

    100% {
        transform: translateX(-360px)
    }
}

.reviewCarouselSection .reviewSlide .review {
    position: absolute;
    top: 5px;
    left: 0;
    width: 360px;
    height: 400px;
    margin-right: 0
}

.reviewCarouselSection .reviewSlide .review:nth-of-type(5) {
    transform: translateX(1440px);
    animation: loop1 50s -450s linear infinite
}

.contactWallSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    background: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--black)
}

.contactWallSection .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.contactWallSection .innerSection {
    z-index: 2;
    display: flex;
    flex-wrap: wrap
}

.contactWallSection .innerSection .titleDiv {
    width: 100%;
    border-bottom: 1px solid var(--borderGray);
    padding-bottom: .7075rem
}

.contactWallSection .innerSection .titleDiv .label {
    color: var(--color1);
    font-family: var(--font-family1);
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.contactWallSection .innerSection .titleDiv .title {
    max-width: 850px;
    font-family: var(--font-family1);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05rem;
    -webkit-text-fill-color: unset
}

.contactWallSection .innerSection .titleDiv .title span {
    font-weight: 600
}

.contactWallSection .innerSection .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    border-bottom: 1px solid var(--borderGray);
    padding: .7075rem 0
}

@media(min-width: 1024px) {
    .contactWallSection .innerSection .content {
        width: 35%;
        flex: 1;
        margin: 0;
        padding: 2rem;
        padding-right: 0;
        border-left: 1px solid var(--borderGray)
    }
}

.contactWallSection .innerSection .content .details .label {
    margin: 0;
    margin-bottom: 5px;
    color: var(--color1);
    font-family: var(--font-family1);
    font-size: .878rem;
    font-weight: 600;
    letter-spacing: 1px
}

.contactWallSection .innerSection .content .details p,
.contactWallSection .innerSection .content .details a {
    margin: 0;
    font-weight: 500;
    line-height: 1.5
}

.contactWallSection .innerSection .content .details a {
    transition: var(--transition1)
}

.contactWallSection .innerSection .content .details a:hover {
    color: var(--color1)
}

.contactWallSection .innerSection .content .listDiv {
    margin: 0 auto;
    margin-top: .7075rem;
    padding-left: .7075rem;
    max-width: 380px;
    text-align: left
}

@media(min-width: 1024px) {
    .contactWallSection .innerSection .content .listDiv {
        margin: 0;
        margin-top: 2rem;
        list-style-position: outside
    }
}

.contactWallSection .innerSection .content .listDiv li {
    padding: .25rem 0;
    font-weight: 500;
    list-style: circle
}

@media(min-width: 568px) {
    .contactWallSection .innerSection .content .listDiv li {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

@media(min-width: 768px) {
    .contactWallSection .innerSection .content .listDiv li {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.contactWallSection .innerSection .content .listDiv li::marker {
    color: var(--color1)
}

.contactWallSection .innerSection .content .listDiv li img {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, .231372549);
    border-radius: 5px;
    padding: 4px;
    margin-right: 10px
}

.contactWallSection .innerSection #contactForm {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    border-bottom: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
    .contactWallSection .innerSection #contactForm {
        width: 55%;
        padding-right: 5%
    }
}

.contactWallSection .innerSection #contactForm .formDiv {
    padding: 2rem 0
}

.contactWallSection .innerSection #contactForm .formDiv .heading {
    margin: 0;
    width: 100%;
    color: var(--color1);
    font-family: var(--font-family1);
    font-weight: 600;
    margin-bottom: .7075rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px
}

.contactWallSection .innerSection #contactForm .formDiv input,
.contactWallSection .innerSection #contactForm .formDiv select,
.contactWallSection .innerSection #contactForm .formDiv textarea {
    color: var(--black);
    font-family: var(--font-family1);
    font-weight: 500;
    background: var(--white);
    border-color: var(--black);
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none
}

.contactWallSection .innerSection #contactForm .formDiv input::placeholder,
.contactWallSection .innerSection #contactForm .formDiv select::placeholder,
.contactWallSection .innerSection #contactForm .formDiv textarea::placeholder {
    opacity: 1;
    font-size: .878rem;
    font-weight: 500;
    text-transform: uppercase
}

.contactWallSection .innerSection #contactForm .formDiv #contactSubmitButton {
    margin-left: auto;
    min-width: 250px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-family1);
    font-weight: 600
}

.aboutWallSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    flex-wrap: wrap;
    color: var(--black);
    background: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 150px;
    z-index: 2
}

.aboutWallSection .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.aboutWallSection .titleDiv {
    width: 100%;
    border-bottom: 1px solid var(--borderGray)
}

.aboutWallSection .titleDiv .label {
    color: var(--color1);
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.aboutWallSection .titleDiv .title {
    max-width: 850px;
    color: var(--textGray);
    font-weight: 500;
    line-height: 1;
    -webkit-text-fill-color: unset;
    padding-bottom: 1.413rem
}

.aboutWallSection .titleDiv .title span {
    color: var(--color1)
}

.aboutWallSection .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
    border-bottom: 1px solid var(--borderGray);
    padding: .7075rem 0
}

@media(min-width: 1024px) {
    .aboutWallSection .content {
        width: 300px;
        margin: 0;
        flex-direction: column;
        padding: 2rem;
        padding-right: 0;
        border-left: 1px solid var(--borderGray)
    }
}

.aboutWallSection .content .details {
    width: auto
}

.aboutWallSection .content .details .label {
    margin: 0;
    margin-bottom: 0;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase
}

.aboutWallSection .content .details p,
.aboutWallSection .content .details a {
    margin: 0;
    font-weight: 400;
    line-height: 1
}

.aboutWallSection .content .details .value {
    margin: 0;
    font-family: var(--font-family1);
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px)
}

@media(min-width: 1024px) {
    .aboutWallSection .content .details .value {
        font-size: clamp(28.8325195313px, 24.5791762253px + 0.0088611319*100vw, 42.30144px)
    }
}

.aboutWallSection .content .details a {
    transition: var(--transition1)
}

.aboutWallSection .content .details a:hover {
    color: var(--color1)
}

.aboutWallSection .content .listDiv {
    margin: 0 auto;
    margin-top: .7075rem;
    padding-left: .7075rem;
    max-width: 380px;
    text-align: left
}

@media(min-width: 1024px) {
    .aboutWallSection .content .listDiv {
        margin: 0;
        margin-top: 2rem;
        list-style-position: outside
    }
}

.aboutWallSection .content .listDiv li {
    padding: .25rem 0;
    font-weight: 500;
    list-style: circle
}

@media(min-width: 568px) {
    .aboutWallSection .content .listDiv li {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

@media(min-width: 768px) {
    .aboutWallSection .content .listDiv li {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.aboutWallSection .content .listDiv li::marker {
    color: var(--color1)
}

.aboutWallSection .content .listDiv li img {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, .231372549);
    border-radius: 5px;
    padding: 4px;
    margin-right: 10px
}

.aboutWallSection .mainContent {
    width: 100%;
    border-bottom: 1px solid var(--borderGray);
    padding: .7075rem 0
}

@media(min-width: 1024px) {
    .aboutWallSection .mainContent {
        width: calc(100% - 300px);
        padding: 2rem 0;
        padding-right: 5%
    }
}

.aboutWallSection .mainContent p {
    color: var(--gray);
    font-weight: 300;
    line-height: 1.6
}

.aboutWallSection .mainContent p:nth-child(1) {
    margin: 0
}

@media(min-width: 1024px) {
    .aboutWallSection .mainContent p {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
    }
}

.aboutWallSection .mainContent p span {
    font-weight: 500
}

.wallSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    background-color: var(--white);
    padding-top: 80px
}

.wallSection::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: radial-gradient(at 98.6% 68.3%, rgba(0, 26, 73, 0.1019607843) 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, rgba(2, 41, 119, 0.4745098039) 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, rgba(0, 31, 92, 0.3294117647) 0px, transparent 50%), radial-gradient(at 21% 80.7%, rgba(0, 81, 180, 0.3215686275) 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, rgba(0, 124, 114, 0.5764705882) 0px, transparent 50%);
    opacity: .5
}

.wallSection .innerSection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 2;
    gap: 20px 0
}

.wallSection .titleDiv {
    width: 100%
}

@media(min-width: 1024px) {
    .wallSection .titleDiv {
        width: 50%
    }
}

.wallSection .titleDiv .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.wallSection .titleDiv .breadcrumb a {
    color: var(--textGray);
    display: inline-block;
    font-size: 14px;
    padding-right: 10px;
    margin-right: 10px;
    transition: var(--transition1)
}

.wallSection .titleDiv .breadcrumb a.activeBreadcrumb {
    color: var(--black)
}

.wallSection .titleDiv .breadcrumb a:nth-last-child(1) {
    margin-right: 0;
    padding-right: 0
}

.wallSection .titleDiv .breadcrumb a:nth-last-child(1)::before {
    display: none
}

.wallSection .titleDiv .breadcrumb a:empty {
    display: none
}

.wallSection .titleDiv .breadcrumb a:hover {
    color: var(--color1)
}

.wallSection .titleDiv .breadcrumb a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: var(--borderGray);
    transform: rotate(10deg)
}

.wallSection .titleDiv .title {
    margin: 0 auto;
    font-family: var(--font-family1);
    font-weight: 500;
    color: var(--color1);
    line-height: 1
}

.wallSection .titleDiv .title br {
    display: none
}

@media(min-width: 568px) {
    .wallSection .titleDiv .title br {
        display: block
    }
}

.wallSection .ctaDiv {
    margin: auto 0;
    width: 100%;
    display: flex;
    gap: 10px
}

@media(min-width: 1024px) {
    .wallSection .ctaDiv {
        clear: both;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        width: 50%
    }
}

.wallSection .ctaDiv a {
    margin: 0
}

.wallSection .ctaDiv .outlinedBtn {
    color: var(--black);
    border: 1px solid var(--black)
}

.wallSection .content {
    width: 100%;
    display: flex;
    flex-direction: column
}

@media(min-width: 1024px) {
    .wallSection .content {
        clear: both;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        width: 50%
    }
}

.wallSection .content p {
    margin: 0;
    font-size: .878rem;
    font-weight: 200;
    line-height: 1.8
}

.wallSection .content .ctaBanner {
    margin-top: .7075rem;
    display: flex;
    background: var(--color3);
    border: 1px solid rgba(0, 128, 0, .0666666667);
    padding: .7075rem;
    border-radius: var(--radius);
    overflow: hidden
}

@media(min-width: 1024px) {
    .wallSection .content .ctaBanner {
        padding: 1.413rem
    }
}

.wallSection .content .ctaBanner .ctaContent {
    z-index: 1
}

.wallSection .content .ctaBanner .ctaContent .title {
    font-weight: 600;
    line-height: 1.1
}

.wallSection .content .ctaBanner .ctaContent p {
    margin-top: 5px;
    opacity: .7;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2
}

.wallSection .content .ctaBanner .ctaContent ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: .7075rem
}

.wallSection .content .ctaBanner .ctaContent ul li {
    font-size: 14px;
    font-weight: 600
}

.wallSection .content .ctaBanner .ctaContent ul li::before {
    content: "✓";
    color: var(--color1);
    margin-right: 8px;
    font-weight: 800
}

.wallSection .content .ctaBanner .ctaMedia {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end
}

.wallSection .content .ctaBanner .ctaMedia img {
    height: 110%;
    width: auto;
    object-fit: contain;
    object-position: bottom right
}

.wallSection .media {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    padding-top: 56.25%
}

@media(min-width: 1024px) {
    .wallSection .media {
        width: 50%;
        padding-top: 0
    }
}

.wallSection .media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.locationDetailsSection {
    background-color: var(--color3)
}

.locationDetailsSection .innerSection {
    display: flex;
    flex-wrap: wrap
}

.locationDetailsSection .innerSection .map {
    width: 100%;
    overflow: hidden;
    min-height: 400px
}

@media(min-width: 1024px) {
    .locationDetailsSection .innerSection .map {
        width: 40%
    }
}

.locationDetailsSection .innerSection .map iframe {
    width: 100%;
    height: 100%
}

.locationDetailsSection .innerSection .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%
}

@media(min-width: 1024px) {
    .locationDetailsSection .innerSection .content {
        width: 60%
    }
}

.locationDetailsSection .innerSection .content .dropDownDiv .dropList {
    border-bottom: 1px solid rgba(0, 0, 0, .1725490196)
}

.locationDetailsSection .innerSection .content .dropDownDiv .dropList:nth-last-child(1) {
    border-bottom: none
}

.locationDetailsSection .innerSection .content .dropDownDiv .dropList .dropBox .title {
    font-weight: 600
}

.locationDetailsSection .innerSection .content .dropDownDiv .dropList .dropContent p {
    margin: 0
}

.serviceCTASection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.serviceCTASection .innerSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--color3);
    border-radius: var(--radius)
}

@media(min-width: 1024px) {
    .serviceCTASection .innerSection {
        flex-direction: row
    }
}

.serviceCTASection .innerSection .content {
    padding: .7075rem;
    width: 100%;
    z-index: 2;
    text-align: center
}

@media(min-width: 1024px) {
    .serviceCTASection .innerSection .content {
        padding: 1.413rem;
        width: calc(100% - 350px);
        text-align: left
    }
}

.serviceCTASection .innerSection .content .mainLabel {
    margin-bottom: 10px;
    color: var(--black)
}

.serviceCTASection .innerSection .content .title {
    font-family: var(--font-family1);
    font-weight: 500;
    color: var(--black);
    line-height: 1.3
}

.serviceCTASection .innerSection .content .title span {
    font-weight: 700
}

.serviceCTASection .innerSection .content p {
    max-width: 700px
}

.serviceCTASection .innerSection .content ul {
    margin: 0 auto;
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 5px 0;
    text-align: left;
    margin-top: .7075rem;
    padding-left: 0
}

@media(min-width: 1024px) {
    .serviceCTASection .innerSection .content ul {
        margin: 0;
        margin-top: .7075rem
    }
}

.serviceCTASection .innerSection .content ul li {
    font-weight: 600
}

.serviceCTASection .innerSection .content ul li::before {
    content: "✓";
    color: var(--color1);
    margin-right: 8px;
    font-weight: 800
}

.serviceCTASection .innerSection .content .btnDiv {
    flex-wrap: nowrap
}

.serviceCTASection .innerSection .content .btnDiv .outlinedBtn {
    color: var(--black)
}

.serviceCTASection .innerSection .media {
    width: 100%;
    display: flex;
    align-items: center
}

@media(min-width: 1024px) {
    .serviceCTASection .innerSection .media {
        width: 350px
    }
}

.serviceCTASection .innerSection .media::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 80%;
    background: #fff;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)
}

.serviceCTASection .innerSection .media::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35vh;
    height: 35vh;
    border-radius: 20% 30% 40% 50%;
    background-color: var(--lightGray);
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)
}

.serviceCTASection .innerSection .media img {
    margin: auto;
    margin-top: auto;
    object-fit: contain
}

.loactionMainDetailsSection {
    padding-top: 1.413rem
}

.loactionMainDetailsSection .innerSection {
    display: flex;
    flex-wrap: wrap
}

.loactionMainDetailsSection .navListDiv {
    padding-top: 1rem;
    position: sticky;
    top: 80px;
    width: 100%;
    display: flex;
    z-index: 100;
    background: var(--white);
    margin-bottom: 1rem
}

@media(min-width: 1024px) {
    .loactionMainDetailsSection .navListDiv {
        width: 100%;
        height: auto;
        clear: both;
        margin: 0 auto;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
    }
}

.loactionMainDetailsSection .navListDiv .navList {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    margin: 0 auto;
    display: flex;
    gap: 0 5px;
    width: max-content;
    padding-bottom: 1rem;
    overflow: auto
}

@media(min-width: 1024px) {
    .loactionMainDetailsSection .navListDiv .navList {
        padding-left: 0;
        padding-right: 0
    }
}

.loactionMainDetailsSection .navListDiv a {
    color: var(--gray);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 10px 15px;
    background: var(--lightGray);
    border: 1px solid var(--lightGray);
    border-radius: var(--radius);
    white-space: noWrap;
    transition: var(--transition1)
}

.loactionMainDetailsSection .navListDiv a:hover {
    color: var(--black);
    background: var(--lightGray);
    border: 1px solid var(--black)
}

.loactionMainDetailsSection .navListDiv .activeMenu {
    color: var(--white);
    background: var(--black)
}

.loactionMainDetailsSection .locationDetailsWrapper {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    display: none;
    flex-wrap: wrap
}

@media(min-width: 1024px) {
    .loactionMainDetailsSection .locationDetailsWrapper {
        padding: 0;
        padding-bottom: var(--section-space-y)
    }
}

.loactionMainDetailsSection .locationDetailsWrapper:nth-of-type(1) {
    display: flex
}

.loactionMainDetailsSection aside {
    display: none;
    flex-direction: column;
    height: max-content;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    padding: 10px 0
}

@media(min-width: 1024px) {
    .loactionMainDetailsSection aside {
        width: 350px;
        min-width: 350px;
        position: sticky;
        top: 180px;
        display: flex
    }
}

.loactionMainDetailsSection aside .scrollLink {
    font-size: .937rem;
    font-weight: 500;
    padding: 10px .7075rem;
    padding-left: 1.413rem;
    cursor: pointer;
    transition: var(--transition1)
}

.loactionMainDetailsSection aside .scrollLink.activeScroll {
    color: var(--color1)
}

.loactionMainDetailsSection aside .scrollLink::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 15px;
    width: 5px;
    height: 5px;
    background-color: var(--color1);
    border-radius: var(--radius)
}

.loactionMainDetailsSection aside .scrollLink:hover {
    color: var(--color1)
}

.loactionMainDetailsSection main {
    width: 100%;
    color: var(--black);
    background: var(--white)
}

@media(min-width: 1024px) {
    .loactionMainDetailsSection main {
        clear: both;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        width: calc(100% - 350px)
    }
}

.loactionMainDetailsSection main article {
    z-index: 1;
    border-bottom: 1px solid var(--borderGray);
    padding-bottom: 2rem;
    margin-bottom: 2rem
}

.loactionMainDetailsSection main article .title {
    margin: 0;
    width: 100%
}

.loactionMainDetailsSection main article h3 {
    color: var(--darkGray);
    margin-top: 1.413rem;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 5px
}

.loactionMainDetailsSection main article h3::before,
.loactionMainDetailsSection main article h3::after {
    content: "";
    width: 10px;
    height: 10px;
    max-height: 10px;
    margin-top: 17px;
    max-height: 10px;
    border-radius: var(--radius)
}

.loactionMainDetailsSection main article h3::before {
    order: 2;
    background: var(--color2)
}

.loactionMainDetailsSection main article h3::after {
    order: 1;
    background: var(--color1);
    margin-right: 3px
}

.loactionMainDetailsSection main article p {
    opacity: .9;
    font-size: 14px;
    line-height: 1.8
}

.loactionMainDetailsSection main article p span {
    font-weight: 500
}

.loactionMainDetailsSection main article strong {
    font-weight: 600
}

.loactionMainDetailsSection main article ul {
    margin: .7075rem 0;
    padding-left: .7075rem;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.loactionMainDetailsSection main article ul li {
    list-style-type: disc;
    font-weight: 500
}

.loactionMainDetailsSection main article ul li::marker {
    color: var(--gray)
}

.loactionMainDetailsSection main article ul li ul {
    margin: 0;
    margin-top: 10px
}

.loactionMainDetailsSection main article ul li ul li {
    font-size: 14px;
    font-weight: 400
}

.loactionMainDetailsSection main article ul li ul li::marker {
    color: var(--gray)
}

.loactionMainDetailsSection main .locationCardSlider {
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: .7075rem 0
}

.loactionMainDetailsSection main .locationCardSlider .slideControler {
    position: absolute;
    top: 150px;
    width: 100%;
    padding: .7075rem 0
}

@media(min-width: 1024px) {
    .loactionMainDetailsSection main .locationCardSlider .slideControler {
        top: 280px
    }
}

.loactionMainDetailsSection main .locationCardSlider .slideControler div {
    position: sticky;
    top: 80vh;
    width: 60px;
    height: 60px;
    display: inline-flex;
    border-radius: 0 var(--btnRadius) var(--btnRadius) 0;
    color: var(--white);
    background: var(--black);
    border: 2px solid var(--color1);
    transition: var(--transition1)
}

.loactionMainDetailsSection main .locationCardSlider .slideControler div:nth-child(1) {
    border-left: none
}

.loactionMainDetailsSection main .locationCardSlider .slideControler div:nth-child(2) {
    float: right;
    border-right: none;
    border-radius: var(--btnRadius) 0 0 var(--btnRadius)
}

.loactionMainDetailsSection main .locationCardSlider .slideControler div:hover {
    background-color: var(--color1)
}

.loactionMainDetailsSection main .locationCardSlider .slideControler div i {
    margin: auto;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px)
}

.loactionMainDetailsSection main .locationCardSlider .slideContainer {
    overflow: hidden
}

.loactionMainDetailsSection main .locationCardSlider .slideWrapper {
    width: 100%;
    display: flex
}

@media(min-width: 1280px) {
    .loactionMainDetailsSection main .locationCardSlider .slideWrapper {
        padding: 0
    }
}

.loactionMainDetailsSection main .locationCardSlider .locationCard {
    width: 100%;
    min-width: 100%;
    padding: 5px;
    border-radius: var(--radius);
    background: var(--color3)
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .media {
    border-radius: calc(var(--radius) - 5px);
    overflow: hidden
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .media::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
    background: #010101;
    background: linear-gradient(0deg, rgb(1, 1, 1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: .8
}

.loactionMainDetailsSection main .locationCardSlider .locationCard img {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16/9
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content {
    padding: 1rem;
    padding-top: 0
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content .cardTitle {
    position: absolute;
    top: 0;
    transform: translateY(-150%);
    z-index: 2;
    color: var(--white);
    margin: 0;
    border: none
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content p {
    margin: 0;
    font-weight: 500
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content .dropDownDiv {
    margin: 0;
    padding: 0
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content .dropDownDiv .dropList {
    border-bottom: 1px solid rgba(0, 0, 0, .0823529412)
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content .dropDownDiv .dropList:nth-last-child(1) {
    border-bottom: none
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content .dropDownDiv .dropList .dropContent {
    background-color: rgba(14, 14, 14, .0745098039);
    padding: 1rem;
    border-radius: calc(var(--radius) - 1rem)
}

.loactionMainDetailsSection main .locationCardSlider .locationCard .content .dropDownDiv .dropList .dropContent p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5
}

.conclusionSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    background: var(--color3)
}

.conclusionSection .innerSection {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 1%
}

.conclusionSection .innerSection .title {
    width: 100%;
    color: var(--color1);
    text-align: center;
    margin-bottom: .7075rem
}

.conclusionSection .innerSection p {
    line-height: 1.5
}

.conclusionSection .innerSection .card {
    width: 100%;
    padding: .7075rem;
    border-radius: var(--radius);
    background-color: var(--white);
    border: 1px solid var(--color1)
}

@media(min-width: 768px) {
    .conclusionSection .innerSection .card {
        width: 49%;
        padding: 1rem
    }
}

.conclusionSection .innerSection .card .cardTitle {
    font-weight: 500
}

.otherZonesSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    background: var(--lightGray)
}

.otherZonesSection .innerSection .title {
    width: 100%;
    text-align: center
}

.otherZonesSection .innerSection menu {
    display: flex;
    flex-wrap: wrap;
    padding: .7075rem;
    border-bottom: 1px solid var(--borderGray)
}

.otherZonesSection .innerSection menu:nth-last-child(1) {
    border: none;
    padding-bottom: 0
}

.otherZonesSection .innerSection menu .menuTitle {
    margin: 0;
    width: 100%;
    margin-bottom: .35375rem;
    padding-left: 10px;
    line-height: 1;
    border-left: 3px solid var(--color1)
}

.otherZonesSection .innerSection menu a {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    padding: 5px 0;
    transition: var(--transition1)
}

@media(min-width: 360px) {
    .otherZonesSection .innerSection menu a {
        width: 50%
    }
}

@media(min-width: 568px) {
    .otherZonesSection .innerSection menu a {
        width: 33.33%
    }
}

@media(min-width: 768px) {
    .otherZonesSection .innerSection menu a {
        width: 25%
    }
}

@media(min-width: 1024px) {
    .otherZonesSection .innerSection menu a {
        width: 20%
    }
}

@media(min-width: 1280px) {
    .otherZonesSection .innerSection menu a {
        width: 12%
    }
}

.otherZonesSection .innerSection menu a:hover {
    color: var(--color1)
}

.sideFormContainer {
    --form-width: 350px;
    margin: 0 auto;
    width: 100%;
    max-width: var(--container-max-width);
    display: flex;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden
}

@media(min-width: 1024px) {
    .sideFormContainer {
        overflow: unset
    }
}

.sideFormContainer .wallImage {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max-width);
    height: 80vh;
    max-height: 700px;
    object-fit: cover;
    object-position: center;
    overflow: hidden
}

.sideFormContainer .border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    max-height: 700px
}

.sideFormContainer .border::after {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white)
}

.sideFormContainer .border::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(0, 3, 8) 90%)
}

.sideFormContainer .border img {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
    width: 100%
}

.pageBannerSection {
    padding-bottom: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    min-height: 350px;
    padding-top: 130px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top
}

@media(min-width: 1024px) {
    .pageBannerSection {
        padding-top: 150px
    }
}

.pageBannerSection::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    z-index: 1;
    background: #fff;
    background: linear-gradient(195deg, rgba(255, 255, 255, 0) 0%, rgb(0, 39, 44) 100%)
}

.pageBannerSection .content {
    z-index: 1
}

.pageBannerSection .title,
.pageBannerSection .mainLabel,
.pageBannerSection p {
    color: var(--white);
    max-width: 800px
}

.pageBannerSection .title {
    font-family: var(--font-family1);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    z-index: 1;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding: 10px 0;
    color: var(--white)
}

.pageBannerSection .title img {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin-right: 10px
}

.pageBannerSection p:not(.mainLabel) {
    opacity: .8
}

.detailsSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    background-color: var(--white);
    z-index: 1
}

@media(min-width: 1024px) {
    .detailsSection {
        padding-right: calc(var(--form-width) + var(--section-space-x) + var(--section-space-x))
    }
}

.detailsSection .titleDiv {
    text-align: center
}

.detailsSection .titleDiv .title {
    font-weight: 700;
    font-family: var(--font-family1);
    text-transform: uppercase
}

.detailsSection .titleDiv .subTitle {
    color: var(--color3);
    font-weight: 400
}

.detailsSection .titleDiv .subTitle span {
    font-weight: 600
}

.detailsSection .details {
    padding-bottom: var(--section-space-y)
}

.detailsSection .details h2,
.detailsSection .details h3,
.detailsSection .details h4,
.detailsSection .details h5 {
    margin-top: .7075rem;
    border-left: 3px solid var(--color1);
    padding-left: 10px;
    font-weight: 600;
    line-height: 1
}

.detailsSection .details h2+p,
.detailsSection .details h3+p,
.detailsSection .details h4+p,
.detailsSection .details h5+p {
    margin-top: 10px
}

.detailsSection .details p {
    font-weight: 500;
    line-height: 1.5
}

.detailsSection .details ul {
    min-width: 300px;
    display: inline-block;
    margin-top: .7075rem;
    padding: .7075rem;
    padding-left: 2rem;
    border-radius: var(--radius);
    background: var(--lightGray);
    border: 1px solid var(--borderGray)
}

.detailsSection .details ul li {
    font-weight: 600;
    list-style-position: outside;
    list-style-type: disc
}

.detailsSection .details ul li::marker {
    color: var(--color1)
}

.detailsSection .shortItinerary {
    margin-top: .7075rem;
    background: var(--color5);
    border-radius: var(--radius);
    border: 1px solid var(--color2)
}

.detailsSection .shortItinerary li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 10px 1rem;
    border-bottom: 1px dashed var(--color2)
}

.detailsSection .shortItinerary li:nth-last-child(1) {
    border-bottom: none
}

.detailsSection .shortItinerary li .date {
    margin: 0;
    color: var(--color1);
    font-family: var(--font-family1);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    padding-right: 10px;
    border-right: 1px solid var(--color2);
    white-space: noWrap
}

.detailsSection .shortItinerary li .date span {
    color: var(--color3);
    font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px);
    font-weight: 800;
    display: block
}

.detailsSection .shortItinerary li .plan {
    margin: 0;
    font-weight: 500
}

.detailsSection .tableDiv {
    width: 100%;
    margin-top: .7075rem;
    border-collapse: separate;
    overflow-x: auto
}

.detailsSection .tableDiv table tr {
    border-bottom: 1px solid var(--borderGray)
}

.detailsSection .tableDiv table tr:nth-child(even) {
    background: var(--lightGray)
}

.detailsSection .tableDiv table tr:nth-last-child(1) {
    text-align: right !important
}

.detailsSection .tableDiv table tr th {
    font-family: var(--font-family1)
}

.detailsSection .tableDiv table tr td,
.detailsSection .tableDiv table tr th {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 500
}

.detailsSection .tableDiv table tr td:nth-child(1),
.detailsSection .tableDiv table tr th:nth-child(1) {
    clear: both;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.detailsSection .tableDiv table tr td:nth-last-child(1),
.detailsSection .tableDiv table tr th:nth-last-child(1) {
    clear: both;
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.detailsSection .tourInclusionDiv .tabMenuNav .tabMenuDiv .tabMenu {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 600
}

.detailsSection .tourInclusionDiv .tabMenu1 {
    margin: 0 auto;
    width: max-content;
    display: flex;
    gap: 0 3px;
    overflow-x: auto
}

.detailsSection .tourInclusionDiv .tabMenu1 .tabMenu {
    display: inline-block;
    font-weight: 600;
    padding: 12px 1rem;
    background-color: var(--lightGray);
    border-radius: var(--btnRadius);
    transition: var(--transition1)
}

.detailsSection .tourInclusionDiv .tabMenu1 .activeTabMenu {
    color: var(--white);
    background: var(--black);
    font-weight: 300;
    transition: var(--transition2)
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide {
    height: 0;
    overflow: hidden;
    padding: .7075rem;
    background-color: var(--color5);
    border-radius: var(--radius);
    opacity: 0
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto;
    opacity: 1
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide p {
    font-size: .937rem;
    font-weight: 500;
    line-height: 1.5;
    opacity: .9
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide p:nth-child(1) {
    margin-top: 0
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .list {
    padding-left: .7075rem
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .list li {
    list-style-position: outside;
    list-style-type: circle;
    padding: 5px 0;
    font-weight: 500
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .list li::marker {
    color: var(--color1)
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 2%
}

@media(min-width: 568px) {
    .detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList {
        gap: 15px
    }
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList li {
    width: 48%;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--white);
    text-align: center
}

@media(min-width: 568px) {
    .detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList li {
        width: 160px
    }
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList li img {
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 50px
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList li h5 {
    color: var(--color1);
    font-weight: 700;
    margin-bottom: 5px
}

.detailsSection .tourInclusionDiv .tabBarWrapper .tabBarSlide .cardList li p {
    margin: 0;
    font-weight: 600;
    line-height: 1.1
}

.detailsSection .ItinerarySection {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    background-color: var(--white);
    display: flex;
    flex-wrap: wrap
}

.detailsSection .ItinerarySection .heading {
    width: 100%;
    color: var(--black);
    font-family: var(--font-family1);
    font-weight: 400;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1;
    z-index: 1;
    text-align: center;
    letter-spacing: -0.05rem
}

@media(min-width: 768px) {
    .detailsSection .ItinerarySection .heading {
        letter-spacing: -0.1rem
    }
}

.detailsSection .ItinerarySection .heading span {
    font-weight: 600
}

.detailsSection .ItinerarySection .heading span img {
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    z-index: -1;
    filter: hue-rotate(131deg)
}

.detailsSection .ItinerarySection .listContainer {
    width: 100%;
    max-width: 700px
}

.detailsSection .ItinerarySection .listContainer .dropList {
    width: 100%;
    border-bottom: 1px solid var(--borderGray)
}

.detailsSection .ItinerarySection .listContainer .dropList:hover .title {
    color: var(--color1)
}

.detailsSection .ItinerarySection .listContainer .dropList .dropBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: .7075rem 0;
    cursor: pointer
}

.detailsSection .ItinerarySection .listContainer .dropList .dropBox * {
    cursor: pointer
}

.detailsSection .ItinerarySection .listContainer .dropList .dropBox .title {
    display: flex;
    align-items: center;
    color: var(--color3);
    font-weight: 600;
    text-transform: uppercase
}

.detailsSection .ItinerarySection .listContainer .dropList .dropBox .title span {
    color: var(--black);
    font-weight: 800;
    margin-left: 10px
}

.detailsSection .ItinerarySection .listContainer .dropList .dropBox .title img {
    width: 25px;
    margin-right: 10px
}

.detailsSection .ItinerarySection .listContainer .dropList .dropBox .dropIcon .dropRemove {
    display: none
}

.detailsSection .ItinerarySection .listContainer .dropList .dropContent {
    display: none;
    padding: 1rem;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    margin-bottom: 1rem
}

.detailsSection .ItinerarySection .listContainer .dropList .dropContent p {
    font-weight: 500;
    opacity: .9;
    line-height: 1.5
}

.detailsSection .ItinerarySection .listContainer .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.detailsSection .ItinerarySection .listContainer .dropList .dropContent h5 {
    margin-top: 1rem
}

.termsSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.termsSection .innerSection {
    padding-top: 100px
}

@media(min-width: 1024px) {
    .termsSection .innerSection {
        padding: 0 .7075rem;
        padding-top: 100px
    }
}

.termsSection .innerSection h1 {
    color: var(--color1);
    font-weight: 300;
    padding: 2.83rem 0;
    border-bottom: 1px solid var(--borderGray)
}

.termsSection .innerSection p {
    font-size: .937rem
}

.termsSection .innerSection h4 {
    margin-top: .7075rem
}

.termsSection .innerSection h5 {
    border-left: 3px solid var(--color1);
    padding-left: 10px;
    margin-top: 2rem;
    margin-bottom: 1rem
}

.termsSection .innerSection ul {
    margin-top: 10px;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px 0
}

.termsSection .innerSection ul li {
    font-weight: 500;
    list-style-type: decimal;
    list-style-position: outside
}

.termsSection .innerSection ul li strong {
    font-weight: 500
}

.termsSection .innerSection ul li::marker {
    color: var(--textGray);
    font-weight: 400
}

.termsSection .innerSection ul li ul {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px 0;
    padding-left: 1rem;
    list-style-position: outside
}

.termsSection .innerSection ul li ul li {
    margin: 0;
    font-weight: 300;
    list-style-type: disc;
    list-style-position: outside
}

.termsSection .innerSection ul li ul li::marker {
    color: var(--textGray)
}

.termsSection .innerSection address {
    font-style: normal;
    margin: 1rem 0;
    font-weight: 400
}

.boxContentSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.boxContentSection .innerSection {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 2%
}

.boxContentSection .innerSection .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px 0;
    padding: .7075rem;
    border-radius: var(--radius)
}

@media(min-width: 1024px) {
    .boxContentSection .innerSection .content {
        width: 49%
    }
}

@media(min-width: 1800px) {
    .boxContentSection .innerSection .content {
        padding: 2rem
    }
}

.boxContentSection .innerSection .content:nth-child(1) {
    background-color: #fbf4ff
}

.boxContentSection .innerSection .content:nth-child(2) {
    background-color: var(--color3)
}

.boxContentSection .innerSection p {
    margin: 0
}

.boxContentSection .innerSection .title {
    line-height: 1
}

.boxContentSection .innerSection ul {
    padding-left: .7075rem
}

.boxContentSection .innerSection ul li {
    list-style-type: disc;
    list-style-position: outside
}

.boxContentSection .innerSection ul li::marker {
    color: var(--color2)
}

.faqPageSection {
    padding-top: var(--section-space-y);
    text-align: center;
    overflow: hidden
}

.faqPageSection .searchSection {
    padding-top: 100px;
    background-size: cover;
    background-image: radial-gradient(at 98.6% 68.3%, #fff8e7 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #f8fafe 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #e7efff 0px, transparent 50%), radial-gradient(at 21% 80.7%, #ffe9ed 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #fceded 0px, transparent 50%)
}

.faqPageSection .content {
    z-index: 2;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    color: var(--black)
}

.faqPageSection .content .label {
    margin: 0;
    color: var(--color1);
    font-size: .937rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0
}

.faqPageSection .content .title {
    font-weight: 500;
    line-height: 1
}

.faqPageSection .content .text {
    margin-top: 5px;
    font-weight: 400
}

.faqPageSection .faqForm .formDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    margin: 0 auto;
    margin-top: .7075rem;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-radius: var(--btnRadius) var(--btnRadius) 0 0;
    transform: translateY(150%);
    background: var(--white);
    transition: var(--transition2);
    box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px 20px, rgba(0, 0, 0, .3) 0px 30px 60px 30px
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .formDiv {
        position: relative;
        bottom: unset;
        left: unset;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0;
        border-radius: var(--btnRadius);
        transform: none;
        box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
    }
}

.faqPageSection .faqForm .formDiv::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .formDiv::before {
        display: none
    }
}

.faqPageSection .faqForm .formDiv::after {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: uicons-regular-rounded !important;
    font-style: normal;
    font-size: 25px;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--black);
    border: 1px solid var(--black);
    border-top: 1px solid var(--darkGray);
    opacity: 0;
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none;
    transition: var(--transition1);
    opacity: .7
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .formDiv::after {
        display: none
    }
}

.faqPageSection .faqForm:has(.mainFilter input:focus) .formDiv {
    background: var(--visibleGray)
}

.faqPageSection .faqForm .item {
    width: 100%;
    border-bottom: 1px solid var(--borderGray)
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .item {
        flex: 1;
        width: auto;
        border: none
    }
}

.faqPageSection .faqForm .item:hover::before,
.faqPageSection .faqForm .item:hover:after {
    opacity: 0
}

@media(min-width: 768px) {

    .faqPageSection .faqForm .item:nth-child(2)::before,
    .faqPageSection .faqForm .item:nth-child(3)::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 2;
        transform: translateY(-50%);
        width: 1px;
        height: 100%;
        background: #fff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--borderGray) 50%, rgba(255, 255, 255, 0) 100%);
        transition: var(--transition1)
    }
}

.faqPageSection .faqForm .item:nth-child(2) {
    width: 50%
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .item:nth-child(2) {
        max-width: 150px
    }
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .item:nth-child(2)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 2;
        transform: translateY(-50%);
        width: 1px;
        height: 100%;
        background: #fff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--borderGray) 50%, rgba(255, 255, 255, 0) 100%);
        transition: var(--transition1)
    }
}

.faqPageSection .faqForm .item:nth-child(3) {
    max-width: 150px
}

.faqPageSection .faqForm .item .mainFilter {
    margin: 0
}

.faqPageSection .faqForm .item .mainFilter label {
    position: absolute;
    top: 12px;
    left: 21px;
    z-index: 2;
    color: var(--black);
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    opacity: 1
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]),
.faqPageSection .faqForm .item .mainFilter textarea,
.faqPageSection .faqForm .item .mainFilter select {
    padding: 28px 20px;
    padding-bottom: 13px
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]),
.faqPageSection .faqForm .item .mainFilter textarea,
.faqPageSection .faqForm .item .mainFilter select,
.faqPageSection .faqForm .item .mainFilter datalist,
.faqPageSection .faqForm .item .mainFilter selector selected,
.faqPageSection .faqForm .item .mainFilter .dateRange {
    font-size: 14px;
    background: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius);
    border-color: rgba(0, 0, 0, 0);
    transition: var(--transition1);
    box-shadow: none
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox])::placeholder,
.faqPageSection .faqForm .item .mainFilter textarea::placeholder,
.faqPageSection .faqForm .item .mainFilter select::placeholder,
.faqPageSection .faqForm .item .mainFilter datalist::placeholder,
.faqPageSection .faqForm .item .mainFilter selector selected::placeholder,
.faqPageSection .faqForm .item .mainFilter .dateRange::placeholder {
    opacity: .5
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]):hover,
.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]):focus,
.faqPageSection .faqForm .item .mainFilter textarea:hover,
.faqPageSection .faqForm .item .mainFilter textarea:focus,
.faqPageSection .faqForm .item .mainFilter select:hover,
.faqPageSection .faqForm .item .mainFilter select:focus,
.faqPageSection .faqForm .item .mainFilter datalist:hover,
.faqPageSection .faqForm .item .mainFilter datalist:focus,
.faqPageSection .faqForm .item .mainFilter selector selected:hover,
.faqPageSection .faqForm .item .mainFilter selector selected:focus,
.faqPageSection .faqForm .item .mainFilter .dateRange:hover,
.faqPageSection .faqForm .item .mainFilter .dateRange:focus {
    z-index: 1
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]):hover,
.faqPageSection .faqForm .item .mainFilter textarea:hover,
.faqPageSection .faqForm .item .mainFilter select:hover,
.faqPageSection .faqForm .item .mainFilter datalist:hover,
.faqPageSection .faqForm .item .mainFilter selector selected:hover,
.faqPageSection .faqForm .item .mainFilter .dateRange:hover {
    background: var(--borderGray)
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]):focus,
.faqPageSection .faqForm .item .mainFilter textarea:focus,
.faqPageSection .faqForm .item .mainFilter select:focus,
.faqPageSection .faqForm .item .mainFilter datalist:focus,
.faqPageSection .faqForm .item .mainFilter selector selected:focus,
.faqPageSection .faqForm .item .mainFilter .dateRange:focus {
    border-color: var(--borderGray);
    background: var(--white);
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .15)
}

.faqPageSection .faqForm .item .mainFilter input:not([type=radio]):not([type=checkbox]):focus::placeholder,
.faqPageSection .faqForm .item .mainFilter textarea:focus::placeholder,
.faqPageSection .faqForm .item .mainFilter select:focus::placeholder,
.faqPageSection .faqForm .item .mainFilter datalist:focus::placeholder,
.faqPageSection .faqForm .item .mainFilter selector selected:focus::placeholder,
.faqPageSection .faqForm .item .mainFilter .dateRange:focus::placeholder {
    opacity: 1
}

.faqPageSection .faqForm .item .subFilter {
    position: absolute;
    bottom: 120%;
    left: 0;
    z-index: 10;
    width: 100%;
    min-width: max-content;
    display: none
}

@media(min-width: 1024px) {
    .faqPageSection .faqForm .item .subFilter {
        bottom: unset;
        top: 120%
    }
}

.faqPageSection .faqForm .item .subFilter .subFilterClose {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    opacity: .3
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .item .subFilter .subFilterClose {
        opacity: 0
    }
}

.faqPageSection .faqForm .item .subFilter .filterContent {
    z-index: 11;
    display: flex;
    flex-direction: column;
    padding: .7075rem;
    color: var(--black);
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
}

@media(min-width: 1024px) {
    .faqPageSection .faqForm .item .subFilter .filterContent {
        padding: 1rem
    }
}

.faqPageSection .faqForm .item .subFilterIntro {
    display: flex
}

.faqPageSection .faqForm .item .guestCount {
    text-align: left
}

@media(min-width: 1024px) {
    .faqPageSection .faqForm .item .guestCount {
        min-width: 400px
    }
}

.faqPageSection .faqForm .item .guestCount li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 10px;
    border-bottom: 1px solid var(--borderGray);
    padding: 20px 0
}

.faqPageSection .faqForm .item .guestCount li:nth-child(1) {
    padding-top: 0
}

.faqPageSection .faqForm .item .guestCount li:nth-last-child(1) {
    padding-bottom: 0;
    border: none
}

.faqPageSection .faqForm .item .guestCount li .textDiv .type {
    margin: 0;
    font-size: 16px;
    font-weight: 500
}

.faqPageSection .faqForm .item .guestCount li .textDiv .text {
    margin-top: 3px;
    font-size: 13px;
    opacity: .8
}

.faqPageSection .faqForm .item .guestCount li .inputDiv {
    width: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0
}

.faqPageSection .faqForm .item .guestCount li .inputDiv input {
    width: 50px;
    text-align: center;
    background: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    font-weight: 500;
    pointer-events: none
}

.faqPageSection .faqForm .item .guestCount li .inputDiv input::placeholder {
    color: var(--black);
    font-weight: inherit;
    opacity: 1
}

.faqPageSection .faqForm .item .guestCount li .inputDiv button {
    display: flex;
    width: 30px;
    height: 30px;
    color: var(--textGray);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius)
}

.faqPageSection .faqForm .item .guestCount li .inputDiv button i {
    font-size: 22px;
    margin: auto
}

.faqPageSection .faqForm .searchBtn {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
    padding: 0 1rem;
    font-weight: 600;
    margin-top: .7075rem;
    z-index: 5
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .searchBtn {
        margin: 0;
        width: 50px;
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        max-width: 50px;
        font-size: 25px
    }
}

@media(min-width: 768px) {
    .faqPageSection .faqForm .searchBtn span {
        display: none
    }
}

.faqPageSection .faqForm .tabMenu {
    margin-top: .7075rem;
    display: flex;
    justify-content: center;
    gap: 20px
}

.faqPageSection .faqForm .tabMenu a {
    font-size: .878rem;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--visibleGray);
    cursor: pointer;
    transition: var(--transition1)
}

.faqPageSection .faqForm .tabMenu a:hover {
    color: var(--color1);
    background-color: var(--white);
    border: 1px solid var(--color1)
}

.faqPageSection .faqListContainer {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.faqPageSection .faqListContainer .faqListDiv {
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    text-align: left
}

.faqPageSection .faqListContainer .faqListDiv .dropList {
    display: block
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    transition: var(--transition1);
    cursor: pointer
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropBox .moreBtn {
    margin-left: auto;
    padding: 1rem
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropBox div {
    cursor: pointer;
    transition: var(--transition1)
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropBox div i {
    color: inherit;
    font-size: .878rem;
    cursor: pointer;
    transition: var(--transition1)
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropBox div .dropRemove {
    display: none
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropContent {
    display: none;
    width: 100%
}

.faqPageSection .faqListContainer .faqListDiv .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.faqPageSection .faqListContainer .faqListDiv .dropBox {
    padding: 0 .7075rem !important;
    background-color: var(--lightGray);
    border-radius: var(--btnRadius)
}

.faqPageSection .faqListContainer .faqListDiv .dropBox .title {
    margin: 0;
    font-weight: 500;
    padding: 1rem 0
}

.faqPageSection .faqListContainer .faqListDiv .dropBox .dropIcon {
    background-color: var(--white);
    border-radius: var(--btnRadius);
    min-width: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.faqPageSection .faqListContainer .faqListDiv .dropContent {
    background-color: var(--lightGray);
    border-radius: var(--radius);
    padding: 1rem .7075rem !important;
    margin-top: 1rem
}

.courseDetailsMainContainer .detailsWallSection {
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    background: var(--white);
    color: var(--white);
    overflow: unset;
    z-index: 1;
    padding-top: 100px
}

@media(min-width: 1024px) {
    .courseDetailsMainContainer .detailsWallSection {
        padding-top: 150px
    }
}

.courseDetailsMainContainer .detailsWallSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: var(--color1)
}

.courseDetailsMainContainer .detailsWallSection .content {
    width: 100%
}

@media(min-width: 1024px) {
    .courseDetailsMainContainer .detailsWallSection .content {
        max-width: calc(100% - 500px)
    }
}

.courseDetailsMainContainer .detailsWallSection .titleDiv {
    border-bottom: 1px solid rgba(255, 255, 255, .1921568627);
    padding-bottom: .7075rem
}

.courseDetailsMainContainer .detailsWallSection .logo {
    width: auto;
    height: 50px;
    margin-bottom: 5px
}

.courseDetailsMainContainer .detailsWallSection .title {
    margin: 0;
    font-weight: 500
}

.courseDetailsMainContainer .detailsWallSection .subTitle {
    border-left: 2px solid var(--color2);
    padding-left: 5px;
    line-height: 1
}

.courseDetailsMainContainer .detailsWallSection .btnDiv .filledBtn {
    background: rgba(0, 0, 0, 0);
    border: 2px solid var(--color2)
}

.courseDetailsMainContainer .detailsWallSection .btnDiv .textBtn {
    padding-left: 0;
    padding-right: 0;
    gap: 10px
}

.courseDetailsMainContainer .detailsWallSection .highlightDiv {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.413rem;
    color: var(--black);
    background: var(--white);
    border: 1px solid var(--lightGray);
    border-radius: var(--radius);
    box-shadow: rgba(0, 0, 0, .055) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px;
    overflow: hidden
}

@media(min-width: 1024px) {
    .courseDetailsMainContainer .detailsWallSection .highlightDiv {
        margin-top: var(--section-space-y)
    }
}

.courseDetailsMainContainer .detailsWallSection .highlightDiv .highlight {
    width: 100%;
    padding: .7075rem;
    border-right: 1px solid var(--borderGray);
    border-bottom: 1px solid var(--borderGray)
}

@media(min-width: 568px) {
    .courseDetailsMainContainer .detailsWallSection .highlightDiv .highlight {
        width: 50%
    }
}

@media(min-width: 1024px) {
    .courseDetailsMainContainer .detailsWallSection .highlightDiv .highlight {
        width: auto;
        flex: 1;
        padding: 1.413rem;
        border-bottom: none
    }
}

.courseDetailsMainContainer .detailsWallSection .highlightDiv .highlight p {
    margin: 0
}

.courseDetailsMainContainer .detailsWallSection .highlightDiv .highlight .label {
    color: var(--gray);
    text-transform: uppercase;
    font-size: .878rem;
    font-weight: 500;
    letter-spacing: 1px
}

.courseDetailsMainContainer .detailsWallSection .highlightDiv .highlight .value {
    font-weight: 500;
    line-height: 1.1
}

.courseDetailsMainContainer .additionalInfoSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    background: var(--white);
    overflow: unset
}

.courseDetailsMainContainer .additionalInfoSection form {
    width: 100%;
    background: var(--white);
    border-radius: var(--radius);
    padding: .7075rem;
    border: 2px solid var(--color2)
}

@media(min-width: 1024px) {
    .courseDetailsMainContainer .additionalInfoSection form {
        order: 2;
        position: sticky;
        top: 100px;
        width: 400px;
        padding: 1.413rem
    }
}

@media(min-width: 1280px) {
    .courseDetailsMainContainer .additionalInfoSection form {
        width: 500px
    }
}

.courseDetailsMainContainer .additionalInfoSection form .title {
    width: 100%;
    text-align: center;
    margin-bottom: .7075rem
}

.courseDetailsMainContainer .additionalInfoSection form .note {
    font-size: .667rem
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo {
    width: 100%;
    margin-bottom: 1.413rem
}

@media(min-width: 1024px) {
    .courseDetailsMainContainer .additionalInfoSection .additionalInfo {
        order: 1;
        width: calc(100% - 400px);
        padding-right: var(--section-space-x)
    }
}

@media(min-width: 1280px) {
    .courseDetailsMainContainer .additionalInfoSection .additionalInfo {
        width: calc(100% - 500px)
    }
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabMenuSection {
    width: 100%;
    overflow: auto;
    margin: 0 auto
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabMenuSection .tabMneuDiv {
    padding-bottom: var(--section-space-y);
    display: flex;
    gap: 5px;
    min-width: max-content
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabMenuSection .tabMneuDiv .tabMenu {
    font-weight: 500;
    padding: .7075rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition1)
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabMenuSection .tabMneuDiv .tabMenu:hover {
    background: var(--color4)
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper {
    flex-direction: column
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide {
    height: auto;
    border-bottom: 1px solid var(--borderGray);
    padding-bottom: calc(var(--section-space-y)/2);
    margin-bottom: calc(var(--section-space-y)/2)
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide .title {
    margin-bottom: .5rem
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide ul {
    padding-left: 1rem;
    margin-top: .5rem
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide ul li {
    list-style-type: disc;
    list-style-position: outside;
    padding: 5px 0
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide ul li::marker {
    color: var(--color2)
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide ul li,
.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide p {
    width: 100%;
    font-weight: 400;
    opacity: .9;
    line-height: 1.5;
    word-break: break-all
}

.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide ul li span,
.courseDetailsMainContainer .additionalInfoSection .additionalInfo .tabBarWrapper .tabBarSlide p span {
    word-break: break-all
}

.courseManagmentSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    align-items: flex-start;
    padding-top: 70px;
    background: var(--lightGray)
}

@media(min-width: 1024px) {
    .courseManagmentSection {
        padding-top: 150px
    }
}

.courseManagmentSection .courseNavigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: var(--white);
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: transform .7s cubic-bezier(0.77, 0, 0.175, 1);
    scroll-behavior: auto;
    transition-delay: .3s;
    box-shadow: rgba(0, 0, 0, .034) 0px 20px 25px -5px, rgba(0, 0, 0, .014) 0px 10px 10px -5px;
    overflow: auto
}

@media(min-width: 1024px) {
    .courseManagmentSection .courseNavigation {
        width: 350px;
        height: auto;
        position: sticky;
        top: 150px;
        z-index: 1;
        transform: none;
        border-radius: var(--radius)
    }
}

.courseManagmentSection .courseNavigation.courseNavigationIntro {
    transform: translateZ(0);
    transition-delay: 0ms
}

.courseManagmentSection .courseNavigation .courseNavigationClose {
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 10;
    width: 50px;
    height: 50px;
    font-size: 1rem;
    color: var(--white);
    background: rgba(0, 0, 0, .2392156863);
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius);
    transition: var(--transition1);
    cursor: pointer
}

@media(min-width: 1024px) {
    .courseManagmentSection .courseNavigation .courseNavigationClose {
        display: none
    }
}

.courseManagmentSection .courseNavigation .courseNavigationClose i {
    opacity: 1;
    margin: auto
}

.courseManagmentSection .courseNavigation .details {
    padding: 1.413rem;
    padding-bottom: 2rem;
    color: var(--white);
    background: var(--color1)
}

@media(min-width: 1024px) {
    .courseManagmentSection .courseNavigation .details {
        border-radius: var(--radius) var(--radius) 0 0
    }
}

.courseManagmentSection .courseNavigation .details::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 5px;
    background: #09636e;
    background: linear-gradient(80deg, rgb(9, 99, 110) 1%, rgb(8, 174, 196) 57%, rgb(250, 167, 61) 97%)
}

.courseManagmentSection .courseNavigation .details .title {
    margin: 0
}

.courseManagmentSection .courseNavigation .details .duration {
    border-left: 2px solid var(--color2);
    padding-left: 5px;
    line-height: 1
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList {
    border-bottom: 1px solid var(--borderGray);
    pointer-events: none
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.active {
    pointer-events: all
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.active .dropBox {
    border-left: 5px solid var(--color1)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.active .dropBox .title {
    color: var(--color1)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.active .dropBox .dropIcon {
    display: flex
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.completed {
    pointer-events: all
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.completed .dropBox .title {
    color: var(--black)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.completed .dropBox .dropIcon {
    display: flex
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList.completed .dropBox .dropIcon::before {
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .733rem;
    border-radius: var(--radius);
    border: 3px solid #baf7f2;
    background: var(--green);
    color: var(--white)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropBox {
    padding: .7075rem 1.413rem;
    border-left: 5px solid rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropBox .title {
    color: var(--gray);
    font-size: 1rem
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropBox .title span {
    display: block;
    color: var(--gray);
    font-size: .733rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropBox .dropIcon {
    display: none;
    width: 35px;
    min-width: 35px;
    height: 35px;
    border: 1px solid var(--borderGray);
    border-radius: var(--radius)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropBox .dropIcon i {
    margin: auto
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropContent {
    margin: 10px auto;
    margin-bottom: 20px;
    width: calc(100% - 20px);
    background: var(--lightGray);
    border-radius: var(--radius);
    overflow: hidden;
    padding: .5rem 0
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropContent a {
    width: 100%;
    padding: .5rem 1.413rem;
    border-bottom: 1px solid var(--borderGray);
    cursor: pointer;
    transition: var(--transition1)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropContent a.active {
    color: var(--white);
    background: var(--color1)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropContent a.active:hover {
    color: var(--white);
    background: var(--color1)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropContent a:hover {
    color: var(--color1);
    background: var(--borderGray)
}

.courseManagmentSection .courseNavigation .dropDownDiv .dropList .dropContent a:nth-last-child(1) {
    border: none
}

.courseManagmentSection .courseContainer {
    width: 100%
}

@media(min-width: 1024px) {
    .courseManagmentSection .courseContainer {
        width: calc(100% - 350px);
        padding-left: var(--section-space-x)
    }
}

.courseManagmentSection .videoSection {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius)
}

.courseManagmentSection .videoSection .media {
    border: 8px solid var(--white);
    border-radius: var(--radius)
}

.courseManagmentSection .videoSection .media video,
.courseManagmentSection .videoSection .media iframe,
.courseManagmentSection .videoSection .media img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16/9;
    border-radius: calc(var(--radius) - 9px);
    overflow: hidden
}

.courseManagmentSection .videoSection .content {
    padding: 1.413rem;
    padding-top: .7075rem
}

.courseManagmentSection .videoSection .content .controllTabPanel {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 998;
    width: 100%;
    max-width: max-content;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: var(--btnRadius);
    padding: 5px;
    box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
    border: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
    .courseManagmentSection .videoSection .content .controllTabPanel {
        width: 100%;
        max-width: 100%;
        position: relative;
        bottom: unset;
        left: unset;
        transform: none;
        padding-bottom: 1.413rem;
        margin-bottom: 1.413rem;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--borderGray);
        box-shadow: none
    }
}

.courseManagmentSection .videoSection .content .controllTabPanel .filledBtn {
    gap: 15px
}

@media(min-width: 1024px) {
    .courseManagmentSection .videoSection .content .controllTabPanel .openModulesBtn {
        display: none
    }
}

.courseManagmentSection .videoSection .content .controllTabPanel .arrowBtn {
    height: 100%;
    padding: .7075rem;
    background: var(--white);
    border: 1px solid var(--borderGray)
}

.courseManagmentSection .videoSection .content .controllTabPanel .arrowBtn:nth-child(1) {
    margin-right: auto
}

.courseManagmentSection .videoSection .content .controllTabPanel .arrowBtn:nth-child(4) {
    margin-left: auto
}

.courseManagmentSection .videoSection .content .controllTabPanel .arrowBtn span {
    display: none
}

@media(min-width: 1024px) {
    .courseManagmentSection .videoSection .content .controllTabPanel .arrowBtn span {
        display: block
    }
}

.courseManagmentSection .videoSection .content .title {
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px)
}

.courseManagmentSection .additionalInfoSection {
    gap: 10px;
    margin-top: 10px
}

.courseManagmentSection .additionalInfoSection .tabMenuSection {
    width: 100%;
    overflow: auto;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius)
}

.courseManagmentSection .additionalInfoSection .tabMenuSection .tabMneuDiv {
    padding: 1.413rem;
    display: flex;
    gap: 5px;
    min-width: max-content
}

.courseManagmentSection .additionalInfoSection .tabMenuSection .tabMneuDiv .tabMenu {
    font-weight: 500;
    padding: .7075rem 1rem;
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer
}

.courseManagmentSection .additionalInfoSection .tabMenuSection .tabMneuDiv .tabMenu.activeTabMenu {
    color: var(--color1);
    background: var(--color4)
}

.courseManagmentSection .additionalInfoSection .tabBarWrapper {
    margin-top: 10px;
    background: var(--white);
    border-radius: var(--radius)
}

.courseManagmentSection .additionalInfoSection .tabBarWrapper .tabBarSlide {
    padding: 1.413rem
}

.courseManagmentSection .additionalInfoSection .tabBarWrapper .tabBarSlide ul {
    padding-left: 1rem;
    margin-top: .5rem
}

.courseManagmentSection .additionalInfoSection .tabBarWrapper .tabBarSlide ul li {
    list-style-type: disc;
    list-style-position: outside;
    padding: 5px 0
}

.courseManagmentSection .additionalInfoSection .tabBarWrapper .tabBarSlide ul li::marker {
    color: var(--color2)
}

.examForm {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;
    width: 100%;
    height: 100vh;
    display: flex;
    z-index: 999;
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: transform .7s cubic-bezier(0.77, 0, 0.175, 1);
    scroll-behavior: auto;
    transition-delay: .3s
}

.examForm.examFormIntro {
    transform: translateZ(0);
    transition-delay: 0ms
}

.examForm.examFormCloseIntro {
    transition: var(--transition2)
}

.examForm .examFormClose {
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 10;
    width: 50px;
    height: 50px;
    background: var(--lightGray);
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius);
    transition: var(--transition1);
    cursor: pointer
}

.examForm .examFormClose i {
    color: inherit;
    margin: auto;
    cursor: pointer
}

.examForm .logo {
    margin: 0 auto;
    margin-bottom: .7075rem
}

.examForm .formDiv {
    margin: auto;
    height: auto;
    width: 100%;
    overflow: hidden
}

.examForm .formDiv .tabBarWrapper {
    width: 100%;
    gap: 0;
    border-radius: inherit;
    color: inherit
}

.examForm .formDiv .tabBarWrapper .tabBarSlide {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    min-width: 100%;
    height: 0;
    border-radius: inherit;
    opacity: 0;
    color: inherit
}

.examForm .formDiv .tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto;
    opacity: 1
}

.examForm .formDiv .tabBarWrapper .tabBarSlide .title {
    margin-top: 0;
    color: inherit
}

.examForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]),
.examForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: unset;
    flex-wrap: wrap;
    overflow: auto;
    margin: 0;
    color: inherit
}

.examForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]) label,
.examForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]) label {
    margin: 0;
    color: inherit
}

.examForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]) input,
.examForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]) input {
    color: inherit
}

.examForm .formDiv .tabBarWrapper .tabBarSlide .btnDiv {
    width: 100%
}

.examForm .formDiv input[type=date] {
    text-transform: lowercase !important
}

.courseListingSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    background: var(--lightGray)
}

.courseListingSection .titleDiv {
    padding-bottom: .7075rem;
    border-bottom: 1px solid var(--borderGray)
}

.courseListingSection .cardDiv {
    display: flex;
    gap: 30px 2%;
    flex-wrap: wrap;
    padding-top: 1.413rem
}

.courseListingSection .cardDiv .card {
    width: 100%
}

@media(min-width: 568px) {
    .courseListingSection .cardDiv .card {
        width: 48%
    }
}

@media(min-width: 1024px) {
    .courseListingSection .cardDiv .card {
        width: 32%
    }
}

.courseCard {
    background: var(--white);
    border-radius: var(--radius);
    padding: 5px;
    cursor: pointer;
    transition: var(--transition1)
}

.courseCard:hover {
    transform: translateY(-5px);
    box-shadow: rgba(50, 50, 93, .082) 0px 13px 27px -5px, rgba(0, 0, 0, .068) 0px 8px 16px -8px
}

.courseCard .media {
    width: 100%
}

.courseCard .media img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius)
}

.courseCard .media span {
    position: absolute;
    top: 13px;
    left: 1.413rem;
    z-index: 1;
    font-size: .878rem;
    color: var(--white);
    background: rgba(255, 255, 255, .0901960784);
    padding: 5px 10px;
    border-radius: var(--radius)
}

.courseCard .content {
    padding: 1.413rem
}

.courseCard .content .logo {
    position: absolute;
    top: 0;
    right: 1.413rem;
    transform: translateY(-65%);
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 5px solid var(--white)
}

.courseCard .content .logo[src=""] {
    display: none
}

.courseCard .content .btnDiv {
    padding-top: 5px;
    border-top: 1px solid var(--borderGray)
}

.courseCard .content .btnDiv .price {
    color: var(--color1);
    font-weight: 600
}

.onlineCourseHeroView {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    overflow: unset;
    z-index: 1;
    background: var(--white);
    border-radius: var(--radius)
}

@media(min-width: 1024px) {
    .onlineCourseHeroView {
        margin-top: 110px;
        padding-top: 100px
    }
}

.onlineCourseHeroView::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    background: #9a53bf;
    background: radial-gradient(at 98.6% 68.3%, #6c32c9 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #d1dbff 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #a35dff 0px, transparent 50%), radial-gradient(at 21% 80.7%, #6702da 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #58059c 0px, transparent 50%)
}

.onlineCourseHeroView .mainBg {
    --angle: 0deg;
    --bg1: #057685;
    --bg2: #faa83d96;
    --bg3: #18a3b6;
    --bg4: #f7db61;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: var(--color1);
    overflow: hidden
}

@property --angle {
    .onlineCourseHeroView .mainBg {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false
    }
}

.onlineCourseHeroView .mainBg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, var(--bg1), transparent 50%), radial-gradient(circle at 70% 20%, var(--bg2), transparent 50%), radial-gradient(circle at 50% 80%, var(--bg3), transparent 50%), radial-gradient(circle at 80% 70%, var(--bg4), transparent 50%);
    background-size: 300% 300%;
    background-position: center;
    animation: meshAnimation 30s infinite linear;
    transform: rotate(var(--angle));
    transition: transform .3s linear
}

.onlineCourseHeroView .mainBg svg,
.onlineCourseHeroView .mainBg img,
.onlineCourseHeroView .mainBg .bg {
    opacity: .2;
    filter: invert(2);
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: 200px;
    background-repeat: repeat
}

.onlineCourseHeroView .divider-svg {
    position: absolute;
    bottom: 0;
    right: calc(var(--section-space-x) - 10px);
    height: 100vh
}

.onlineCourseHeroView .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bg-color);
    margin-bottom: 1.413rem;
    z-index: 1
}

@media(min-width: 1024px) {
    .onlineCourseHeroView .content {
        margin: 0;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0;
        width: calc(100% - 500px);
        padding-right: var(--section-space-x)
    }
}

.onlineCourseHeroView .content div {
    max-width: 1000px
}

.onlineCourseHeroView .content .titleDiv {
    width: 100%
}

.onlineCourseHeroView .content .label {
    color: var(--color1);
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 5px
}

.onlineCourseHeroView .content .title {
    line-height: 1.1;
    margin-bottom: .7075rem
}

.onlineCourseHeroView .content .title span {
    display: block
}

.onlineCourseHeroView .content p,
.onlineCourseHeroView .content .text {
    margin: 0;
    max-width: 800px;
    font-weight: 200;
    opacity: .8
}

@media(min-width: 1024px) {

    .onlineCourseHeroView .content p,
    .onlineCourseHeroView .content .text {
        font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
        text-align: justify
    }
}

.onlineCourseHeroView .content p span,
.onlineCourseHeroView .content .text span {
    color: var(--white) !important;
    background: rgba(0, 0, 0, 0) !important;
    word-break: break-all
}

.onlineCourseHeroView .content .listDiv {
    display: flex;
    flex-wrap: wrap
}

.onlineCourseHeroView .content .listDiv li {
    width: 100%
}

@media(min-width: 1024px) {
    .onlineCourseHeroView .content .listDiv li {
        width: 50%;
        padding-right: .7075rem
    }
}

.onlineCourseHeroView .content .btnDiv {
    margin-top: 2rem;
    justify-content: center
}

@media(min-width: 1024px) {
    .onlineCourseHeroView .content .btnDiv {
        justify-content: flex-start
    }
}

.onlineCourseHeroView .content .btnDiv .actionBtn {
    align-items: center;
    gap: 25px;
    font-weight: 300;
    border: none
}

.onlineCourseHeroView .content .btnDiv .actionBtn i {
    width: clamp(50px, 4vw, 70px);
    height: clamp(50px, 4vw, 70px);
    display: flex;
    color: #ebc549;
    background: var(--color1);
    font-size: .733rem
}

.onlineCourseHeroView .content .btnDiv .actionBtn i::before {
    margin: auto
}

.onlineCourseHeroView .media {
    display: flex;
    align-items: flex-start;
    margin-top: 1.413rem;
    width: 100%;
    height: 100%
}

.onlineCourseHeroView .media img,
.onlineCourseHeroView .media video,
.onlineCourseHeroView .media iframe {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
    background: rgba(219, 219, 219, .1450980392);
    padding: 8px
}

.onlineCourseHeroView .media img source,
.onlineCourseHeroView .media video source,
.onlineCourseHeroView .media iframe source {
    width: 100%;
    height: 100%
}

.onlineCourseHeroView .actionDiv {
    width: 100%;
    background: var(--white);
    padding: .7075rem;
    border-radius: var(--radius);
    box-shadow: rgba(50, 50, 93, .25) 0px 30px 60px -12px, rgba(0, 0, 0, .3) 0px 18px 36px -18px
}

@media(min-width: 1024px) {
    .onlineCourseHeroView .actionDiv {
        width: 500px
    }
}

.onlineCourseHeroView .actionDiv .banner {
    border-radius: calc(var(--radius) - .7075rem)
}

.onlineCourseHeroView .actionDiv .highlightDiv {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.413rem;
    color: var(--black);
    overflow: hidden
}

.onlineCourseHeroView .actionDiv .highlightDiv .highlight {
    width: 100%;
    padding: .7075rem;
    border-bottom: 1px solid var(--borderGray)
}

@media(min-width: 360px) {
    .onlineCourseHeroView .actionDiv .highlightDiv .highlight {
        width: 50%
    }
}

.onlineCourseHeroView .actionDiv .highlightDiv .highlight p {
    margin: 0
}

.onlineCourseHeroView .actionDiv .highlightDiv .highlight .label {
    color: var(--gray);
    text-transform: uppercase;
    font-size: .878rem;
    font-weight: 500;
    letter-spacing: 1px
}

.onlineCourseHeroView .actionDiv .highlightDiv .highlight .value {
    font-weight: 500;
    line-height: 1.1
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection {
    padding: 0 .5rem
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .applyCoupon .label {
    color: var(--color1);
    font-weight: 500;
    margin-bottom: 8px
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .applyCoupon .couponInputDiv {
    display: flex
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .applyCoupon .couponInputDiv input {
    padding: .7075rem;
    padding-right: 100px
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .applyCoupon .couponInputDiv button {
    min-width: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    color: var(--white);
    background: var(--color1);
    border-radius: calc(var(--btnRadius) - 5px)
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .availableCoupons {
    padding: .5rem;
    background: var(--lightGray);
    border-radius: var(--radius);
    margin-top: .5rem
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .availableCoupons .label {
    margin: 0;
    color: var(--gray);
    font-size: .733rem;
    font-weight: 500
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .availableCoupons .couponList .couponItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .availableCoupons .couponList .couponItem .couponCode {
    margin: 0;
    font-weight: 500
}

.onlineCourseHeroView .actionDiv .priceDiv .couponSection .availableCoupons .couponList .couponItem button:hover {
    color: var(--white);
    background: var(--color2)
}

.onlineCourseHeroView .actionDiv .priceDiv .buyingOptions {
    padding: .5rem
}

.onlineCourseHeroView .actionDiv .priceDiv .buyingOptions .label {
    margin: 0;
    color: var(--color1);
    font-weight: 500;
    margin-bottom: 8px
}

.onlineCourseHeroView .actionDiv .priceDiv .buyingOptions .options {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.onlineCourseHeroView .actionDiv .priceDiv .buyingOptions .options .option {
    display: flex;
    padding: .5rem;
    border-radius: var(--radius);
    background: var(--lightGray)
}

.onlineCourseHeroView .actionDiv .priceDiv .buyingOptions .options .option label {
    text-wrap: wrap;
    font-size: .937rem
}

.onlineCourseHeroView .actionDiv .btnDiv {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0
}

.onlineCourseHeroView .actionDiv .btnDiv .priceBox {
    width: 50%;
    padding: 0 10px
}

.onlineCourseHeroView .actionDiv .btnDiv .priceBox .label {
    margin: 0;
    color: gray;
    font-size: .937rem;
    font-weight: 400;
    margin-bottom: 0
}

.onlineCourseHeroView .actionDiv .btnDiv .priceBox .value {
    margin: 0;
    color: var(--color1);
    font-weight: 600;
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px);
    line-height: 1
}

.onlineCourseHeroView .actionDiv .btnDiv button {
    width: 50%;
    min-width: 50%
}

body #mainContainer {
    --headeHeight: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-max-width);
    min-height: 100vh;
    padding-bottom: 60px;
    margin: 0 auto;
    background: inherit
}

@media(min-width: 1024px) {
    body #mainContainer {
        padding: 0
    }
}

body .headerSection {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: var(--container-max-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .3s all cubic-bezier(0.135, 0.9, 0.15, 1)
}

@media(min-width: 1024px) {
    body .headerSection {
        left: calc(50% - 1px);
        transform: translateX(-50%)
    }
}

body .headerSection.headerIntro .navigation {
    will-change: transforrm;
    border-bottom: 1px solid var(--lightGray);
    box-shadow: rgba(0, 0, 0, .009) 0px 10px 15px -3px, rgba(0, 0, 0, .003) 0px 4px 6px -2px
}

@media(min-width: 1024px) {
    body .headerSection.headerIntro .navigation {
        padding-top: 0
    }
}

@media(min-width: 1024px) {
    body .headerSection.headerIntro .subMenu {
        opacity: 0;
        transform: translateY(-100%)
    }
}

body .headerSection .navigation {
    clear: both;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    color: var(--text-color);
    border-radius: 0;
    transition: .9s all cubic-bezier(0.135, 0.9, 0.15, 1);
    box-shadow: rgba(0, 0, 0, 0) 0px 1px 2px 0px
}

@media(min-width: 1024px) {
    body .headerSection .navigation {
        gap: 20px;
        clear: both;
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-top: 2rem
    }
}

body .headerSection .navigation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    border-radius: inherit
}

body .headerSection .logo {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 0
}

body .headerSection .logo img {
    width: 100%;
    max-width: 170px;
    max-height: 100px;
    object-fit: contain;
    cursor: pointer
}

body .headerSection .navSection {
    padding-top: 60px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 102;
    width: clamp(200px, 100%, 500px);
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    color: var(--white);
    background: var(--color1);
    overflow: auto;
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    scroll-behavior: auto;
    transition-delay: .3s
}

@media(min-width: 768px) {
    body .headerSection .navSection {
        right: -8px;
        border-radius: 0;
        height: 100vh;
        transform: none;
        transform: translateX(120%);
        box-shadow: none
    }
}

@media(min-width: 1024px) {
    body .headerSection .navSection {
        position: relative;
        top: unset;
        left: unset;
        width: auto;
        max-width: fit-content;
        height: auto;
        max-height: auto;
        margin-right: auto;
        align-items: unset;
        justify-content: center;
        padding: 0;
        color: var(--black);
        background-color: rgba(0, 0, 0, 0);
        overflow: unset;
        transform: none;
        will-change: auto
    }
}

body .headerSection .navSection.navSectionIntro {
    transform: translateZ(0);
    transition-delay: 0ms;
    border-left: 1px solid var(--darkGray);
    box-shadow: 0px 0px 100vw 300px rgba(0, 0, 0, .208)
}

@media(min-width: 1024px) {
    body .headerSection .navSection.navSectionIntro {
        transform: none;
        border: none;
        box-shadow: none
    }
}

body .headerSection .navSection.navSectionIntro .navContainer {
    opacity: 1
}

body .headerSection .navSection .navContainer {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
    opacity: 0;
    will-change: opacity;
    transition: all .4s ease-in;
    transition-delay: .6s
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer {
        width: auto;
        height: auto;
        overflow: unset;
        align-items: center;
        flex-direction: row;
        opacity: 1
    }
}

body .headerSection .navSection .navContainer .navMenu {
    width: 100%;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu {
        width: auto;
        min-height: auto;
        overflow: unset;
        border: none
    }
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu:nth-child(1) {
        margin-right: .7075rem
    }
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu:nth-child(1) .mainMenu {
        border: 2px solid var(--borderGray);
        border-radius: var(--btnRadius);
        padding: .7075rem 1.413rem;
        padding-right: .7075rem
    }
}

body .headerSection .navSection .navContainer .navMenu:nth-child(1) .mainMenu i {
    top: 0
}

body .headerSection .navSection .navContainer .navMenu .mainMenu {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    min-height: inherit;
    display: inline-flex;
    gap: 3px;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(22.78125px, 20.6986973684px + 0.0043386513*100vw, 29.376px);
    font-weight: 500;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: noWrap;
    text-align: right;
    transition: var(--transition1);
    cursor: pointer;
    overflow: hidden
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu .mainMenu {
        font-size: .733rem;
        padding: 1.413rem 8px;
        border: none;
        text-align: center;
        justify-content: center
    }
}

@media(min-width: 1280px) {
    body .headerSection .navSection .navContainer .navMenu .mainMenu {
        font-size: .878rem
    }
}

body .headerSection .navSection .navContainer .navMenu .mainMenu i {
    top: 3px;
    opacity: .5
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu .mainMenu:hover {
        color: var(--color1)
    }
}

body .headerSection .navSection .navContainer .navMenu .activeMenu {
    opacity: 1;
    color: var(--color1)
}

body .headerSection .navSection .navContainer:hover .activeMenu {
    color: var(--header-menu-text-mob)
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer:hover .activeMenu {
        color: var(--header-menu-text-web)
    }
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer:has(.card) {
        width: 100%;
        padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        margin: 0 auto;
        position: fixed;
        top: 85%;
        left: 0
    }
}

body .headerSection .navSection .navContainer .subMenuContainer {
    width: calc(100% + 8px);
    max-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0);
    overflow: clip;
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        height: 0;
        max-height: max-content;
        width: 100%;
        min-width: 100%;
        margin: auto;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
        overflow: hidden
    }
}

body .headerSection .navSection .navContainer .subMenuContainer::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: var(--header-menu-bg-mob);
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity .5s
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer::before {
        display: none
    }
}

body .headerSection .navSection .navContainer .subMenuContainer.subMenuContainerIntro {
    max-height: clamp(200px, 60vh, 100vh);
    overflow: auto
}

body .headerSection .navSection .navContainer .subMenuContainer .subMenu {
    width: 100%;
    display: flex;
    color: inherit;
    background: rgba(0, 0, 0, 0);
    gap: 0 .5rem;
    padding: 8px
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .subMenu {
        height: auto;
        width: 100%;
        color: var(--text-color);
        background: var(--bg-color);
        border-radius: var(--btnRadius);
        border: 1px solid var(--lightGray);
        box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
        transform: translateY(-30px);
        opacity: 0;
        transition: var(--transition1)
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .subMenu a {
    transition: var(--transition1)
}

body .headerSection .navSection .navContainer .subMenuContainer .grid a {
    display: block;
    min-width: 250px;
    width: 250px;
    padding: 10px 1rem;
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--btnRadius);
    background-color: var(--lightGray);
    border: 1px solid var(--lightGray)
}

@media(min-width: 568px) {
    body .headerSection .navSection .navContainer .subMenuContainer .grid a {
        margin: 0;
        width: 50%;
        padding: 1rem
    }
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .grid a {
        width: 25%;
        font-size: 1rem;
        font-weight: 500
    }

    body .headerSection .navSection .navContainer .subMenuContainer .grid a:nth-child(4n) {
        border-right: none
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .grid a:hover {
    background-color: var(--white);
    color: var(--color1)
}

body .headerSection .navSection .navContainer .subMenuContainer .grid a:hover::after {
    background-color: var(--color1);
    transform: scale(1.2) translateY(-50%)
}

body .headerSection .navSection .navContainer .subMenuContainer .grid a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--white);
    font-family: uicons-regular-rounded !important;
    font-size: .733rem;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 10px;
    border-radius: 100%;
    background-color: #0e2756;
    transition: var(--transition1)
}

body .headerSection .navSection .navContainer .subMenuContainer .list {
    flex-direction: column
}

body .headerSection .navSection .navContainer .subMenuContainer .list a {
    display: block;
    width: 100%;
    min-width: 200px;
    padding: 1rem;
    font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px);
    font-weight: 400;
    background-color: var(--lightGray);
    border-bottom: 1px solid var(--borderGray);
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .list a {
        font-size: 1rem;
        font-weight: 500;
        padding: 10px 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0)
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .list a:nth-child(1) {
    padding-top: .7075rem;
    border-radius: calc(var(--btnRadius) - .5rem) calc(var(--btnRadius) - .5rem) 0 0
}

body .headerSection .navSection .navContainer .subMenuContainer .list a:nth-last-child(1) {
    border-radius: 0 0 calc(var(--btnRadius) - .5rem) calc(var(--btnRadius) - .5rem);
    padding-bottom: .7075rem
}

body .headerSection .navSection .navContainer .subMenuContainer .list a:hover {
    background-color: var(--white);
    color: var(--color1)
}

body .headerSection .navSection .navContainer .subMenuContainer .list a:hover::after {
    opacity: 1;
    color: var(--color2);
    transform: scale(1) translateY(-50%)
}

body .headerSection .navSection .navContainer .subMenuContainer .list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) scale(0.9);
    color: var(--gray);
    font-family: uicons-regular-rounded !important;
    font-size: .733rem;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 10px;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: var(--transition1);
    opacity: 0
}

body .headerSection .navSection .navContainer .subMenuContainer .card {
    width: 100%;
    text-align: left
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .card {
        width: auto;
        flex-wrap: nowrap
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card {
    width: 250px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    transition: var(--transition1);
    margin-bottom: .5rem;
    cursor: pointer
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .card .card {
        margin: 0;
        width: 300px
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card:hover .image::before {
    opacity: .8
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card:hover .image img {
    transform: scale(1.1)
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card:hover .image .arrow {
    background-color: var(--color1);
    transform: scale(1.3)
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card:hover .image .arrow::before {
    opacity: 0
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card * {
    cursor: inherit;
    transition: inherit
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .image {
    width: 100%;
    padding-top: 100%;
    background: var(--color1);
    border: 2px solid var(--white);
    border-radius: calc(var(--btnRadius) - .5rem);
    overflow: hidden
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .image::before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 70%;
    background: linear-gradient(0deg, rgb(0, 10, 28) 13%, rgba(255, 255, 255, 0) 100%);
    opacity: .7;
    transition: var(--transition1)
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    transition: var(--transition2)
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .image .arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    border-radius: 100%;
    will-change: transform;
    transform: rotate(-45deg)
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .image .arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .0509803922);
    border-top: 1px solid rgba(241, 246, 255, .2392156863);
    border-bottom: 1px solid rgba(252, 253, 255, .0901960784);
    box-shadow: inset 0 3px 25px -0.5px rgba(246, 250, 255, .0588235294);
    border-radius: 100%;
    transition: var(--transition1)
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .image .arrow i {
    display: flex;
    margin: auto;
    color: inherit;
    font-size: .7075rem
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .7075rem;
    transition: var(--transition1);
    z-index: 1
}

body .headerSection .navSection .navContainer .subMenuContainer .card .card .details .title {
    color: var(--color2);
    transition: var(--transition1)
}

body .headerSection .navSection .navContainer .subMenuContainer .box {
    width: 100%;
    flex-wrap: wrap;
    text-align: left;
    gap: 0;
    padding: 0;
    border-left: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .box {
        width: auto
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .box a {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transition1);
    padding-top: .7075rem;
    padding-bottom: .7075rem;
    border-bottom: 1px solid var(--borderGray);
    border-right: 1px solid var(--borderGray);
    cursor: pointer;
    transition: var(--transition1)
}

body .headerSection .navSection .navContainer .subMenuContainer .box a:hover {
    background: var(--lightGray)
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .subMenuContainer .box a {
        width: 25%;
        min-width: 25%;
        padding: 2rem
    }
}

body .headerSection .navSection .navContainer .subMenuContainer .box a * {
    cursor: inherit;
    transition: inherit
}

body .headerSection .navSection .navContainer .subMenuContainer .box a i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-items: center;
    border-radius: var(--btnRadius);
    color: var(--color1);
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    margin-bottom: .7075rem
}

body .headerSection .navSection .navContainer .subMenuContainer .box a i::before {
    margin: auto
}

body .headerSection .navSection .navContainer .subMenuContainer .box a i::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--color1);
    opacity: .05
}

body .headerSection .navSection .navContainer .subMenuContainer .box a .title {
    font-size: 20px;
    line-height: 1.1
}

body .headerSection .navSection .navContainer .subMenuContainer .box a p {
    margin: 0;
    margin-top: 10px;
    font-size: .733rem;
    font-weight: 400;
    opacity: .6
}

body .headerSection .navSection .navContainer .navMenu:hover .activeMenu {
    color: var(--black)
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu:hover .subMenuContainer {
        height: auto;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0);
        padding-top: .7075rem
    }
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu:hover .subMenuContainer::before {
        opacity: .3;
        transform: none
    }
}

body .headerSection .navSection .navContainer .navMenu:hover .subMenuContainer .subMenu {
    display: flex
}

@media(min-width: 1024px) {
    body .headerSection .navSection .navContainer .navMenu:hover .subMenuContainer .subMenu {
        transform: none;
        opacity: 1;
        transition: transform .35s, opacity 1s cubic-bezier(0.135, 0.9, 0.15, 1)
    }
}

body .headerSection .navSection .subNav {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-color);
    background: var(--darkGray);
    padding-top: .7075rem
}

@media(min-width: 1024px) {
    body .headerSection .navSection .subNav {
        width: 100%;
        height: auto;
        clear: both;
        margin: 0 auto;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        background: var(--color2);
        padding-top: 0
    }
}

body .headerSection .navSection .subNav a {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    display: flex;
    gap: 5px;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: var(--font-family1);
    letter-spacing: 1px
}

@media(min-width: 1024px) {
    body .headerSection .navSection .subNav a {
        margin: 0;
        width: auto;
        font-size: .733rem;
        font-weight: 400;
        padding: .5rem
    }
}

body .headerSection .navSection .subNav a i {
    opacity: .5
}

body .headerSection .navbar {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    display: flex;
    gap: 0 5px;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-color);
    transition: var(--transition1);
    margin-left: auto;
    padding-top: .5rem;
    padding-bottom: .5rem;
    box-shadow: rgba(50, 50, 93, .424) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
}

@media(min-width: 768px) {
    body .headerSection .navbar {
        position: relative;
        top: unset;
        left: unset;
        bottom: unset;
        z-index: 1;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        border: none;
        background: rgba(0, 0, 0, 0);
        transform: none;
        box-shadow: none
    }
}

@media(min-width: 1024px) {
    body .headerSection .navbar {
        margin: 0
    }
}

body .headerSection .navbar:hover {
    box-shadow: rgba(255, 255, 255, .148) 0px 1px 1px 0px inset, rgba(50, 50, 93, .147) 0px 50px 100px -20px, rgba(0, 0, 0, .166) 0px 30px 60px -30px
}

@media(min-width: 768px) {
    body .headerSection .navbar:hover {
        box-shadow: none
    }
}

body .headerSection .navbar a,
body .headerSection .navbar div {
    margin-top: 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: noWrap;
    transition: var(--transition1);
    overflow: hidden
}

@media(min-width: 768px) {

    body .headerSection .navbar a,
    body .headerSection .navbar div {
        min-height: auto
    }
}

body .headerSection .navbar .chatBtn {
    flex-direction: column;
    padding-left: 45px;
    align-items: flex-start;
    border: 2px solid var(--color1)
}

body .headerSection .navbar .chatBtn img {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px
}

body .headerSection .navbar .chatBtn .text {
    color: var(--color1);
    font-size: .733rem;
    font-weight: 500
}

body .headerSection .navbar .chatBtn .number {
    font-family: var(--font-family1);
    font-weight: 600;
    letter-spacing: -0.25px
}

body .headerSection .navbar .filledBtn,
body .headerSection .navbar .outlinedBtn {
    flex: 1;
    border: none;
    color: var(--black);
    font-size: 1rem;
    font-weight: 600;
    background: var(--white);
    border: 1px solid var(--color2)
}

@media(min-width: 768px) {

    body .headerSection .navbar .filledBtn,
    body .headerSection .navbar .outlinedBtn {
        font-size: .878rem
    }
}

body .headerSection .navbar .filledBtn:hover,
body .headerSection .navbar .outlinedBtn:hover {
    color: var(--white);
    background: var(--color1)
}

@media(min-width: 768px) {
    body .headerSection .navbar .searchBtn {
        display: none
    }
}

body .headerSection .profileHeader {
    height: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow: unset;
    margin-left: auto
}

@media(min-width: 768px) {
    body .headerSection .profileHeader {
        margin: 0
    }
}

body .headerSection .profileHeader:hover .profileMenu {
    opacity: 1;
    height: auto;
    padding: 1rem 0;
    border: 1px solid var(--borderGray)
}

body .headerSection .profileHeader .profileDetails {
    height: 100%;
    display: flex;
    gap: 0 10px;
    align-items: center;
    padding: 0;
    overflow: unset
}

body .headerSection .profileHeader .profileDetails .avatar {
    width: 35px;
    min-width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 2px solid var(--borderGray);
    object-fit: cover;
    object-position: top;
    overflow: hidden
}

body .headerSection .profileHeader .profileDetails .name {
    display: inline-block;
    margin: 0;
    color: var(--black);
    font-size: .878rem;
    font-weight: 600
}

body .headerSection .profileHeader .profileMenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 111;
    height: 0;
    width: 250px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    opacity: 0;
    padding: 0;
    background-color: var(--white);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: rgba(17, 12, 46, .15) 0px 48px 100px 0px;
    overflow: hidden;
    transition: var(--transition1)
}

body .headerSection .profileHeader .profileMenu a {
    width: 100%;
    display: flex;
    gap: 0 10px;
    color: var(--black);
    font-size: .937rem;
    font-weight: 600;
    padding: 1rem 1.413rem;
    border-radius: 0;
    border-bottom: 1px solid var(--borderGray);
    overflow: unset;
    cursor: pointer;
    transition: var(--transition1)
}

body .headerSection .profileHeader .profileMenu a:hover {
    color: var(--color1);
    background-color: var(--lightGray)
}

body .headerSection .profileHeader .profileMenu a:nth-last-child(1) {
    border-bottom: none
}

body .headerSection .profileHeader .profileMenu a i {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    opacity: .5
}

body .headerSection .navIcon {
    display: inline-flex;
    cursor: pointer;
    z-index: 999
}

@media(min-width: 1024px) {
    body .headerSection .navIcon {
        display: none
    }
}

body .headerSection .navIcon.navIconIntro svg {
    transform: rotate(90deg);
    fill: var(--white);
    stroke: var(--white)
}

body .headerSection .navIcon.navIconIntro svg path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg)
}

body .headerSection .navIcon.navIconIntro svg path:nth-child(2) {
    opacity: 0
}

body .headerSection .navIcon.navIconIntro svg path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg)
}

body .headerSection .navIcon.navIconIntro svg path:nth-child(4) {
    opacity: 0
}

body .headerSection .navIcon.navIconIntro svg path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg)
}

body .headerSection .navIcon.navIconIntro svg path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg)
}

body .headerSection .navIcon svg {
    width: 80px;
    height: 60px;
    pointer-events: none;
    margin: auto;
    fill: var(--black);
    stroke: var(--black);
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1)
}

body .headerSection .navIcon svg g {
    stroke-width: 4;
    stroke-linecap: round
}

body .headerSection .navIcon svg path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1)
}

body .headerSection .navIcon svg path:nth-child(1) {
    transform-origin: 36% 40%;
    fill-rule: evenodd
}

body .headerSection .navIcon svg path:nth-child(2) {
    fill: rgba(0, 0, 0, 0);
    stroke-dasharray: 29 299
}

body .headerSection .navIcon svg path:nth-child(3) {
    transform-origin: 35% 63%;
    fill-rule: evenodd
}

body .headerSection .navIcon svg path:nth-child(4) {
    stroke-dasharray: 29 299;
    fill: none
}

body .headerSection .navIcon svg path:nth-child(5) {
    transform-origin: 61% 52%;
    fill-rule: evenodd
}

body .headerSection .navIcon svg path:nth-child(6) {
    transform-origin: 62% 52%;
    fill-rule: evenodd
}

body #chatDiv {
    display: flex;
    position: fixed;
    bottom: 2rem;
    right: 2.5%;
    width: 3rem;
    height: 3rem;
    z-index: 999;
    border-radius: 100%;
    box-shadow: 0px 12px 24px 1px rgba(0, 0, 0, .25);
    transition: all .3s;
    transform: translate(none);
    animation-name: chatDiv;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

body #chatDiv #chat {
    width: 100%;
    margin: auto
}

body #chatDivOnScroll {
    display: flex;
    position: fixed;
    bottom: 2rem;
    right: 2.5%;
    width: 3rem;
    height: 3rem;
    z-index: 999;
    border-radius: 100%;
    box-shadow: 0px 12px 24px 1px rgba(0, 0, 0, .25);
    transition: all .3s;
    transform: translate(none);
    animation-name: chatDiv;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

body #chatDivOnScroll #chatScroll {
    width: 100%;
    margin: auto
}

@keyframes chatDiv {
    0% {
        -webkit-transform: none;
        transform: none
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

body .footerSection {
    margin-top: auto;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    background-color: var(--color1)
}

body .footerSection .footerLinkDiv {
    width: 100%;
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    text-align: center
}

body .footerSection .footerLinkDiv a {
    color: var(--white);
    font-family: var(--font-family1);
    font-size: .937rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem;
    transition: var(--transition1)
}

body .footerSection .footerLinkDiv a:hover {
    color: var(--color1)
}

body .footerSection .footerMain {
    width: 100%;
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .082)
}

body .footerSection .footerMain .heading {
    font-weight: 400;
    color: var(--white)
}

body .footerSection .footerMain .addressDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width: 1024px) {
    body .footerSection .footerMain .addressDiv {
        width: 300px;
        align-items: flex-start
    }
}

body .footerSection .footerMain .addressDiv .logo {
    width: 250px;
    margin-bottom: 1rem
}

body .footerSection .footerMain .addressDiv .logo img {
    width: 100%
}

body .footerSection .footerMain .addressDiv .titleDiv,
body .footerSection .footerMain .addressDiv .address {
    min-width: 350px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(245, 222, 179, .1215686275);
    text-align: center
}

@media(min-width: 1024px) {

    body .footerSection .footerMain .addressDiv .titleDiv,
    body .footerSection .footerMain .addressDiv .address {
        align-items: flex-start;
        text-align: left;
        padding: 0;
        padding-right: .7075rem;
        margin: 0;
        margin-right: .7075rem;
        border: none
    }
}

body .footerSection .footerMain .addressDiv .address {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--white)
}

body .footerSection .footerMain .addressDiv .address .label {
    margin: 0;
    color: var(--white);
    font-size: .937rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase
}

body .footerSection .footerMain .addressDiv .address p {
    max-width: 300px;
    margin-top: 5px;
    font-size: .937rem;
    font-weight: 300;
    margin-bottom: .7075rem;
    letter-spacing: .5px
}

body .footerSection .footerMain .addressDiv .address a {
    font-size: .937rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 300;
    letter-spacing: 1px
}

body .footerSection .footerMain .addressDiv .address a i {
    color: var(--color2)
}

body .footerSection .footerMain .footerMenu {
    width: auto;
    display: flex;
    flex-direction: column;
    color: var(--borderGray)
}

body .footerSection .footerMain .footerMenu .label {
    color: var(--color2);
    font-size: .878rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px
}

body .footerSection .footerMain .footerMenu a {
    color: var(--white);
    font-size: 1rem;
    font-weight: 300;
    padding: 5px 0;
    transition: var(--transition1);
    cursor: pointer;
    opacity: .8
}

body .footerSection .footerMain .footerMenu a:hover {
    color: var(--white)
}

body .footerSection .footerBottom {
    width: 100%;
    padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(245, 222, 179, .0941176471);
    padding-bottom: 1rem;
    text-align: center
}

@media(min-width: 568px) {
    body .footerSection .footerBottom {
        flex-direction: row;
        justify-content: space-between
    }
}

body .footerSection .footerBottom p,
body .footerSection .footerBottom a {
    margin: 0;
    color: var(--borderGray);
    font-size: .733rem;
    font-weight: 300;
    letter-spacing: 1px
}

body .footerSection .footerBottom a {
    transition: var(--transition1)
}

body .footerSection .footerBottom a:hover {
    color: var(--color2)
}

body .footerSection .footerBottom .smLink {
    display: flex
}

body .footerSection .footerBottom .smLink a {
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-left: .5rem;
    padding: 8px;
    border-radius: 100%;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all .3s ease-in-out;
    cursor: pointer
}

body .footerSection .footerBottom .smLink a:hover {
    border: 1px solid var(--color1)
}

body .footerSection .footerBottom .smLink a img {
    cursor: pointer
}

.enquiryForm {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;
    width: 100%;
    height: 100vh;
    display: flex;
    z-index: 999;
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: transform .7s cubic-bezier(0.77, 0, 0.175, 1);
    scroll-behavior: auto;
    transition-delay: .3s
}

.enquiryForm.enquiryFormIntro {
    transform: translateZ(0);
    transition-delay: 0ms
}

.enquiryForm.enquiryFormCloseIntro {
    transition: var(--transition2)
}

.enquiryForm .enquiryFormClose {
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 10;
    width: 50px;
    height: 50px;
    background: var(--lightGray);
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius);
    transition: var(--transition1);
    cursor: pointer
}

.enquiryForm .enquiryFormClose i {
    color: inherit;
    margin: auto;
    cursor: pointer
}

.enquiryForm .logo {
    margin: 0 auto;
    margin-bottom: .7075rem
}

.enquiryForm .formDiv {
    margin: auto;
    height: auto;
    width: 100%;
    overflow: hidden
}

.enquiryForm .formDiv .tabBarWrapper {
    width: 100%;
    gap: 0;
    border-radius: inherit;
    color: inherit
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    min-width: 100%;
    height: 0;
    border-radius: inherit;
    opacity: 0;
    color: inherit
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto;
    opacity: 1
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .title {
    margin-top: 0;
    color: inherit
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]),
.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: unset;
    flex-wrap: wrap;
    overflow: auto;
    margin: 0;
    color: inherit
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]) label,
.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]) label {
    margin: 0;
    color: inherit
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]) input,
.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]) input {
    color: inherit
}

.enquiryForm .formDiv .tabBarWrapper .tabBarSlide .btnDiv {
    width: 100%
}

.enquiryForm .formDiv input[type=date] {
    text-transform: lowercase !important
}

.formContainer {
    width: 100%;
    display: flex;
    background: var(--white);
    overflow: hidden
}

.formContainer .tabBarSlide {
    display: flex;
    flex-direction: column;
    transform: translate(0, 0);
    padding: 0
}

@media(min-width: 768px) {
    .formContainer .tabBarSlide {
        transform: unset;
        align-items: unset
    }
}

.formContainer .tabBarSlide .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%
}

.formContainer .tabBarSlide .media {
    position: relative;
    left: unset;
    top: unset;
    transform: none;
    width: 100%;
    height: 300px
}

@media(min-width: 768px) {
    .formContainer .tabBarSlide .media {
        width: 30%;
        height: unset
    }
}

.formContainer .tabBarSlide .media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: #fff;
    background: linear-gradient(180deg, rgb(255, 255, 255) 5%, rgba(255, 255, 255, 0) 100%);
    opacity: 1
}

@media(min-width: 768px) {
    .formContainer .tabBarSlide .media::before {
        width: 40%;
        height: 100%;
        background: #fff;
        background: linear-gradient(90deg, rgb(255, 255, 255) 5%, rgba(255, 255, 255, 0) 100%)
    }
}

.formContainer .tabBarSlide .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.formContainer .inputDiv:has(input:checked)+.btnDiv .filledBtn {
    background: var(--color1);
    color: var(--white);
    pointer-events: all
}

.formContainer .formWrapper {
    width: 100%;
    gap: 0;
    border-radius: inherit;
    transition: var(--transition1)
}

.formContainer .formWrapper .tabBarSlide {
    width: 100%;
    min-width: 100%;
    border-radius: inherit
}

.formContainer .formWrapper .tabBarSlide .title {
    width: 100%;
    text-align: center;
    margin: 0;
    margin-bottom: .7075rem;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    color: var(--black);
    font-family: var(--fontFamily1);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal
}

@media(min-width: 568px) {
    .formContainer .formWrapper .tabBarSlide .title {
        font-size: clamp(20.25px, 18.9142105263px + 0.0027828947*100vw, 24.48px)
    }
}

.formContainer .formWrapper .tabBarSlide label:has(input:disabled) {
    opacity: .7;
    color: var(--textGray) !important
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label {
    margin: 0;
    width: 100%;
    padding: .7075rem;
    color: var(--black);
    font-size: 18px;
    font-weight: 500;
    border: 2px solid var(--borderGray);
    border-radius: var(--btnRadius);
    text-align: left
}

@media(min-width: 568px) {
    .formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label {
        width: max-content
    }
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label:hover {
    background: var(--inputColor1)
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label:has(input:checked) {
    color: var(--color1);
    background: var(--white);
    border: 2px solid var(--color2);
    box-shadow: var(--shadow-1)
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label p {
    font-size: inherit;
    font-weight: inherit
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label input {
    --active: var(--color2);
    --focus: var(--color1);
    border-color: var(--color1);
    transform: scale(1.2)
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label input:after {
    width: 4px;
    height: 8px;
    border: 2px solid var(--white);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 2px;
    transform: rotate(var(--r, 20deg));
    border-radius: 0;
    background: rgba(0, 0, 0, 0)
}

.formContainer .formWrapper .tabBarSlide .inputDiv:has([type=radio], [type=checkbox]) label input:checked {
    --r: 43deg;
    background: var(--color2);
    border-color: var(--color2)
}

.formContainer .btnDiv {
    padding-top: 10px;
    padding-bottom: 10px;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: var(--white);
    justify-content: center;
    margin-top: 0
}

@media(min-width: 768px) {
    .formContainer .btnDiv {
        position: relative;
        bottom: unset;
        left: unset;
        z-index: unset;
        margin-top: .7075rem;
        background: rgba(0, 0, 0, 0);
        padding: 0
    }
}

.formContainer .btnDiv .backBtn {
    color: var(--black);
    border: 1px solid var(--borderGray);
    font-weight: 600
}

.formContainer .btnDiv .backBtn,
.formContainer .btnDiv .filledBtn {
    margin: 0;
    flex: 1;
    min-width: 100px;
    max-width: 250px
}

@media(min-width: 768px) {

    .formContainer .btnDiv .backBtn,
    .formContainer .btnDiv .filledBtn {
        padding: 1rem
    }
}

.formContainer .btnDiv .filledBtn {
    color: var(--textGray);
    font-weight: 600;
    background: var(--borderGray);
    border-color: rgba(0, 0, 0, 0);
    pointer-events: none
}

.authenticationPopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.authenticationPopup.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.authenticationPopup .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.authenticationPopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media(min-width: 1024px) {
    .authenticationPopup .popupWindow::before {
        display: none
    }
}

.authenticationPopup .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--black);
    border: 1px solid var(--black);
    border-top: 1px solid var(--darkGray);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media(min-width: 1024px) {
    .authenticationPopup .popupWindow::after {
        display: none
    }
}

.authenticationPopup .popupWindowClose,
.authenticationPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media(min-width: 1024px) {
    .authenticationPopup {
        position: fixed;
        bottom: 0;
        right: 100%;
        z-index: 380;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        overflow: hidden
    }

    .authenticationPopup .popupWindow {
        position: relative;
        bottom: unset;
        left: unset;
        width: 100%;
        max-width: 450px;
        min-height: 350px;
        max-height: 650px;
        padding: 2rem;
        background-color: var(--white);
        border-radius: var(--radius);
        box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
        z-index: 2;
        transition: all 375ms ease-out;
        transform: translateY(110%) scale(0.95)
    }

    .authenticationPopup .popupWindow::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 50px;
        height: 5px;
        border-radius: var(--radius);
        background-color: var(--borderGray);
        z-index: 1;
        transform: translateX(-50%);
        pointer-events: none
    }
}

@media(min-width: 1024px)and (min-width: 1024px) {
    .authenticationPopup .popupWindow::before {
        display: none
    }
}

@media(min-width: 1024px) {
    .authenticationPopup .popupWindow::after {
        content: "";
        position: absolute;
        top: -50px;
        left: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--borderGray);
        font-family: var(--icon-style) !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        padding: 5px;
        border-radius: 100%;
        background-color: var(--black);
        border: 1px solid var(--gray);
        opacity: 0;
        z-index: 1;
        transform: translateX(-50%);
        pointer-events: none;
        transition: var(--transition1)
    }
}

@media(min-width: 1024px)and (min-width: 1024px) {
    .authenticationPopup .popupWindow::after {
        display: none
    }
}

@media(min-width: 1024px) {
    .authenticationPopup .popupWindowClose {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0);
        transition: all 375ms ease-out;
        cursor: pointer
    }
}

.authenticationPopup .popupWindow {
    padding-top: 2rem
}

.authenticationPopup .popupWindow .heading {
    margin: 0;
    margin-bottom: .7075rem;
    width: 100%;
    text-align: center
}

.authenticationPopup .popupWindow .popupCloseIcon {
    display: none;
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    cursor: pointer
}

@media(min-width: 1024px) {
    .authenticationPopup .popupWindow .popupCloseIcon {
        display: flex
    }
}

.authenticationPopup .popupWindow .popupCloseIcon i {
    margin: auto;
    cursor: pointer
}

.authenticationPopup .popupWindow .btnDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.authenticationPopup .popupWindow .btnDiv a,
.authenticationPopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

.authenticationPopup .popupCloseIcon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: rgba(0, 0, 0, .541)
}

.authenticationPopup .popupWindow {
    border-radius: 1rem;
    padding: 0;
    margin-top: 20px
}

.authenticationPopup .popupWindow::before,
.authenticationPopup .popupWindow::after {
    display: none
}

.authenticationPopup .popupWindow .authenticationDiv {
    height: 100%;
    padding-top: 1.413rem;
    overflow: hidden;
    border-radius: 1rem
}

.authenticationPopup .popupWindow .heading {
    margin-bottom: 2rem
}

.authenticationPopup .popupWindow .slideNavTab {
    --tab-highlight-color: white;
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    text-align: center;
    margin-bottom: 2.83rem
}

.authenticationPopup .popupWindow .slideNavTab::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 9px);
    height: calc(100% + 7px);
    background-color: var(--lightGray);
    border-radius: 17.98rem;
    transform: translate(-50%, -50%);
    box-shadow: rgba(0, 0, 0, .05) 0px 1px 2px 0px
}

.authenticationPopup .popupWindow .slideNavTab:hover .tabMenu {
    color: var(--black)
}

.authenticationPopup .popupWindow .slideNavTab:hover .tabMenu::before {
    background-color: rgba(0, 0, 0, 0)
}

.authenticationPopup .popupWindow .slideNavTab:hover .activeTabMenu {
    color: var(--white)
}

@media(min-width: 768px) {
    .authenticationPopup .popupWindow .slideNavTab:hover .activeTabMenu {
        color: var(--black)
    }
}

.authenticationPopup .popupWindow .slideNavTab:hover .tabMenuBorder {
    opacity: 1;
    background-color: var(--white)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu {
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 13px 5px;
    border-radius: .7075rem;
    z-index: 1;
    cursor: pointer;
    transition: var(--transition1)
}

@media(min-width: 768px) {
    .authenticationPopup .popupWindow .slideNavTab .tabMenu {
        font-size: 1rem
    }
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 94%;
    border-radius: 17.98rem;
    letter-spacing: 1px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0);
    z-index: -1;
    transition: var(--transition1)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:hover {
    color: var(--color1)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:hover~.tabMenuBorder {
    opacity: 1;
    background-color: var(--white)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:active~.tabMenuBorder {
    background-color: var(--white);
    opacity: 1;
    transition: all 250ms ease-out
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu img {
    width: 25px
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu i {
    top: 1px;
    font-size: .878rem
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu i,
.authenticationPopup .popupWindow .slideNavTab .tabMenu img {
    margin-right: 10px
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1).active~.tabMenuBorder {
    transform: translateX(0%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1):hover~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1):hover~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1):focus~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1):focus~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1):active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(1):active~.active~.tabMenuBorder {
    transform: translateX(0%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2).active~.tabMenuBorder {
    transform: translateX(100%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2):hover~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2):hover~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2):focus~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2):focus~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2):active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(2):active~.active~.tabMenuBorder {
    transform: translateX(100%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3).active~.tabMenuBorder {
    transform: translateX(200%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3):hover~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3):hover~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3):focus~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3):focus~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3):active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(3):active~.active~.tabMenuBorder {
    transform: translateX(200%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4).active~.tabMenuBorder {
    transform: translateX(300%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4):hover~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4):hover~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4):focus~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4):focus~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4):active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(4):active~.active~.tabMenuBorder {
    transform: translateX(300%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5).active~.tabMenuBorder {
    transform: translateX(400%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5):hover~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5):hover~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5):focus~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5):focus~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5):active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(5):active~.active~.tabMenuBorder {
    transform: translateX(400%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6).active~.tabMenuBorder {
    transform: translateX(500%)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6):hover~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6):hover~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6):focus~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6):focus~.active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6):active~.tabMenuBorder,
.authenticationPopup .popupWindow .slideNavTab .tabMenu:nth-child(6):active~.active~.tabMenuBorder {
    transform: translateX(500%)
}

.authenticationPopup .popupWindow .slideNavTab .activeTabMenu {
    color: var(--black);
    font-weight: 500
}

.authenticationPopup .popupWindow .slideNavTab .activeTabMenu::before {
    background-color: var(--white)
}

.authenticationPopup .popupWindow .slideNavTab .activeTabMenu:hover {
    color: var(--color1)
}

.authenticationPopup .popupWindow .slideNavTab .tabMenuBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    border: 0;
    border-radius: 17.98rem;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all 375ms ease-out;
    will-change: transform, background;
    opacity: 0
}

.authenticationPopup .popupWindow .tabBarWrapper {
    min-height: 300px;
    display: flex;
    flex-wrap: nowrap;
    transition: var(--transition2) !important
}

.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide input,
.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide textarea,
.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide select {
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 500
}

.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide input::placeholder,
.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide textarea::placeholder,
.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide select::placeholder {
    color: var(--darkGray);
    font-size: 1rem;
    font-weight: 500
}

.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide .forgotPassword,
.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide .bottomLink {
    width: 100%;
    font-weight: 500;
    display: flex;
    justify-content: center;
    text-align: center
}

.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide .bottomLink {
    margin-top: 1rem
}

.authenticationPopup .popupWindow .tabBarWrapper .tabBarSlide .bottomLink span {
    color: var(--textGray);
    font-weight: 500;
    margin-left: 1rem;
    cursor: pointer
}

.authenticationPopup .popupWindow .tabBarWrapper .chooseOption {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0
}

.authenticationPopup .popupWindow .tabBarWrapper .chooseOption a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem;
    font-size: clamp(18px, 17.2421052632px + 0.0015789474*100vw, 20.4px);
    font-weight: 600;
    border-bottom: 1px solid rgba(12, 193, 0, .2392156863);
    text-align: left
}

.authenticationPopup .popupWindow .tabBarWrapper .chooseOption a:hover {
    color: var(--gray)
}

.authenticationPopup .popupWindow .tabBarWrapper .chooseOption a:hover i {
    color: var(--white);
    background-color: var(--color1);
    border: 1px solid var(--color1);
    transform: scale(1.2);
    box-shadow: rgba(0, 0, 0, .1) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px
}

.authenticationPopup .popupWindow .tabBarWrapper .chooseOption a:nth-last-child(1) {
    border-bottom: none
}

.authenticationPopup .popupWindow .tabBarWrapper .chooseOption a i {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 1px solid var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition1)
}

.authenticationPopup button {
    width: 100%
}