/*----------------------------------------------------------------------------*/
/*#region root */
/*----------------------------------------------------------------------------*/

:root {
    /* Colors */
    --primary-color: #1d8fe2;
    --primary-color-14: #dfeffb;
    --secondary-color: #8fe21d;
    --secondary-color-14: #effbdf;
    --tertiary-color: #d00058;
    --tertiary-color-14: #f8dbe7;
    --black-color: #000000;
    --white-color: #ffffff;
    --sub-color1: #FB7E51;
    --sub-color2: #FBA651;
    --sub-color3: #FFB61A;
    --sub-color4: #FF66A7;
    --sub-color5: #FB6A71;
    --sub-color6: #7D66FF;
    --sub-color7: #33CFFF;
    --sub-color8: #55DEA3;
    /* Background colours */
    --bg-body-primary: #ffffff;
    --bg-body-secondary: #f4f4f4;
    --bg-primary: #fb6a71;
    --bg-primary-14: var(--primary-color-14);
    --bg-secondary: #8fe21d;
    --bg-tertiary: var(--sub-color-5);
    /* Text colours */
    --text-color-primary: #fb6a71;
    --text-color-secondary: #000000;
    --text-color-tertiary-50: rgba(0, 0, 0, .50);
    --text-color-tertiary-30: rgba(0, 0, 0, .30);
    --text-color-tertiary: var(--sub-color-5);
    /* Font size, font weight, font family etc */
    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    --fs-h1: 60px;
    --fs-h2: 48px;
    --fs-h3: 30px;
    --fs-h4:;
    --fs-h5:;
    --fs-h6: 18px;
    --fs-16: 16px;
    --fs-p: 14px;
    --fs-small:;
    --fs-tag: #;
    --fs-logo: 30px;
    --fs-nav-link: 16px;
    --fs-button: 16px;
    /* Border */
    --border-primary: 2px solid var(--primary-color);
    --border-secondary: 0.5px solid var(text-highlight-tertiary-30);
    --border-radius-24: 24px;
    --border-radius-16: 16px;
    --border-radius-8: 8px;
    --border-radius-4: 4px;
    --border-radius-400: 400px;
    /* Shadow */
    --box-shadow-card: 0 0px 36px rgba(0, 0, 0, .10);
    --box-shadow-button: 0 0px 36px rgba(251, 106, 113, .30);
    /* Padding, margin */
    --padding-24: 24px;
    --padding-16: 16px;
    --padding-8: 8px;
    --padding-4: 4px;
    /* Gap */
    --gap-4: 4px;
    --gap-8: 8px;
    --gap-16: 16px;
    --gap-24: 24px;
}

/*----------------------------------------------------------------------------*/
/*#endregion root */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Overriding HTML Tag */
/*----------------------------------------------------------------------------*/
html,
body {
    font-family: 'Jost', sans-serif;
    font-optical-sizing: auto;
    font-weight: var(--fw-500);
    font-size: var(--fs-16);
    overflow-x: hidden;
    margin: 0 auto;
    color: var(--blakc-color);
}

    body > *,
    input,
    button,
    div,
    span {
        box-sizing: border-box;
    }

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-700);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-700);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-500);
}

h6 {
    font-size: var(--fs-h6);
    color: var(--text-color-secondary);
    font-weight: var(--fw-500);
    line-height: 30px;
}

p {
    font-size: var(--fs-h6);
    color: var(--text-color-tertiary-50);
    font-weight: var(--fw-500);
    line-height: 30px;
}

small {
    font-size: var(--fs-p) !important;
    line-height: initial !important;
    font-weight: var(--fw-400) !important;
    text-transform: none !important;
    color: var(--text-color-tertiary-50) !important;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

small {
    line-height: 10px;
    font-weight: 500;
    font-size: 8px;
    text-transform: uppercase;
    color: var(--ix-text-color3);
}

a {
    /* font-size: var(--fs-p);
    font-weight: var(--fw-400); */
    color: var(--text-color-tertiary-50);
    text-decoration: none;
    transition: all .3s;
}

    a:hover,
    a:focus {
        color: var(--bg-secondary);
    }

/* ul,
ol {
    padding: 0;
    margin: 0;
} */

/*----------------------------------------------------------------------------*/
/*#endregion Overriding HTML Tag */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Heading and Text */
/*----------------------------------------------------------------------------*/

/* Text-colour */
.text-highlight-primary {
    color: var(--primary-color);
}

.text-highlight-tertiary-30 {
    color: var(--text-color-tertiary-30);
}

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

/*----------------------------------------------------------------------------*/
/*#endregion Heading and Text */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Component - Boostrap Overriding */
/*----------------------------------------------------------------------------*/

/* Button */
.btn {
    border-radius: 100px;
    font-weight: var(--fw-700);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    height: 40px;
}

.btn-primary {
    --bs-btn-color: var(--white-color);
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: var(--secondary-color);
    --bs-btn-hover-border-color: var(--secondary-color);
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--white-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--bs-dark-25);
    --bs-btn-disabled-bg: var(--bs-dark-05);
    --bs-btn-disabled-border-color: var(--bs-dark-25);
    font-size: var(--fs-button);
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

    .btn-primary:hover {
        background-color: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
        color: var(--white-color);
    }

.btn-secondary {
    --bs-btn-color: var(--white-color);
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--white-color);
    --bs-btn-active-bg: var(--secondary-color);
    --bs-btn-active-border-color: var(--secondary-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--bs-dark-25);
    --bs-btn-disabled-bg: var(--bs-dark-05);
    --bs-btn-disabled-border-color: var(--bs-dark-25);
    font-size: var(--fs-button);
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.btn-dark {
    --bs-btn-color: var(--white-color);
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--white-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--bs-dark-25);
    --bs-btn-disabled-bg: var(--bs-dark-05);
    --bs-btn-disabled-border-color: var(--bs-dark-25);
    font-size: var(--fs-button);
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-bg: var(--bg-primary-14);
    --bs-btn-border-color: var(--bg-primary-14);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--white-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--bs-dark-25);
    --bs-btn-disabled-bg: var(--bs-dark-05);
    --bs-btn-disabled-border-color: var(--bs-dark-25);
    font-size: var(--fs-button);
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 100px;
    font-weight: var(--fw-700);
    border-width: 2px;
    height: 40px;
}

.btn-secondary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white-color);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--bs-dark-25) !important;
    background-color: var(--bs-dark-05) !important;
    border-color: var(--bs-dark-25) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--bs-dark-25) !important;
    background-color: var(--bs-dark-05) !important;
    border-color: var(--bs-dark-25) !important;
}

.btn-primary.btn-small {
    font-size: var(--fs-p);
}

.btn-brochure {
    padding: 0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    transition: all .3s;
}

    .btn-brochure a {
        color: var(--white-color);
    }

.tooltip-brochure {
    background: var(--tertiary-color);
    border: var(--tertiary-color);
    /* padding: 8px 16px;
    font-size: var(--fs-h6);
    color: var(--white-color);
    margin-right: 0;
    border-radius: 100px; */
    /* animation: tilt-shaking infinite linear 1s alternate; */
}

@keyframes tilt-shaking {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0eg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.icon-brochure {
    width: 45px;
    height: 45px;
    background: var(--tertiary-color);
    border: var(--tertiary-color);
    font-size: 24px;
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .icon-brochure:hover,
    .icon-brochure:hover ~ .tooltip-brochure {
        background: var(--primary-color);
        border: var(--primary-color);
    }

/* Pagination */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 100px;
    color: var(--primary-color);
    background-color: var(--primary-color-14);
}

.page-link {
    color: var(--black-color);
    width: 48px;
    height: 48px;
    padding: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h6);
    border-radius: 100px;
    color: var(--primary-color);
    background-color: var(--white-color);
    border: none;
}

    .page-link:hover,
    .page-link:focus,
    .page-item:first-child .page-link:hover,
    .page-item:last-child .page-link:hover,
    .page-item:first-child .page-link:focus,
    .page-item:last-child .page-link:focus {
        z-index: 2;
        color: var(--white-color);
        background-color: var(--primary-color);
        border: none;
    }

    .active > .page-link,
    .page-link.active {
        color: var(--white-color);
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        border: none;
    }

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1500px;
    }
}

/*----------------------------------------------------------------------------*/
/*#endregion Component - Boostrap Overriding */




/*----------------------------------------------------------------------------*/
/*#region Navigation bar */
/*----------------------------------------------------------------------------*/

/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
    margin-bottom: 1rem;
}

.navbar .dropdown-menu {
    border: none;
    background-color: white;
}

.collapse.navbar-collapse {
    background: white;
}

.dropdown-toggle::after {
    display: none;
}

.navbar {
    box-shadow: none;
    z-index: 9999;
    padding: var(--padding-16) 0;
}

    .navbar.scrolled {
        box-shadow: var(--box-shadow-card);
        transition: all .3s;
    }

.navbar-nav,
.navbar-nav .nav-item {
    position: relative;
    transition: all .3s;
}

    .navbar-nav .nav-item .nav-link {
        color: var(--black-color);
        transition: all .3s;
        font-size: var(--fs-nav-link);
        font-weight: var(--fw-500);
        padding: 12px 16px;
        position: relative;
        width: fit-content;
    }

        .navbar-nav .active > .nav-link,
        .navbar-nav .nav-item .nav-link.active,
        .navbar-nav .nav-item .nav-link.show,
        .navbar-nav .show > .nav-link {
            color: var(--primary-color);
            font-weight: 700;
            width: fit-content;
            position: relative;
            background: var(--primary-color-14);
            overflow: hidden;
            border-radius: var(--border-radius-4);
        }

        .navbar-nav .nav-item .nav-link:before {
            content: "";
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 4px;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .3s;
        }

        .navbar-nav .nav-item .nav-link:hover {
            color: var(--secondary-color);
        }

            .navbar-nav .nav-item .nav-link:hover:before {
                transform: scaleX(1);
                transform-origin: left;
                background: var(--secondary-color);
            }

        .navbar-nav .nav-item .nav-link.active:before {
            transform: scaleX(1);
            transform-origin: left;
            background: var(--primary-color);
        }

.navbar-right {
    width: 180px;
}

.navbar-toggler {
    border: 0px;
    color: var(--primary-color);
}

    .navbar-toggler img {
        width: 36px;
        height: 36px;
        filter: brightness(0) saturate(100%) invert(38%) sepia(21%) saturate(5961%) hue-rotate(187deg) brightness(106%) contrast(77%);
    }

.icon-sticky {
    font-size: 24px;
    width: initial;
}

/*----------------------------------------------------------------------------*/
/*#endregion Navigation bar */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Index sticky button */
/*----------------------------------------------------------------------------*/
#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 24px;
    border: none;
    outline: none;
    color: var(--white-color);
    cursor: pointer;
    width: 45px;
    height: 45px;
    transition: all .3s;
    border-radius: 50%;
    background: var(--primary-color);
}

    #topBtn:hover,
    #topBtn:active,
    #topBtn:focus {
        background: var(--secondary-color);
        color: var(--white-color);
    }

/*----------------------------------------------------------------------------*/
/*#endregion Index sticky button */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Form input elements (Input, Select etc) */
/*----------------------------------------------------------------------------*/

.input-group {
    max-width: 650px;
    box-shadow: var(--box-shadow-card);
    border-radius: 100px;
    overflow: hidden;
}

.form-control {
    height: 56px;
    border-radius: 100px;
    padding: 24px;
    font-size: var(--fs-16);
    color: var(--text-color-tertiary-30);
    border: none;
}

    .form-control:focus {
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        /* border-color: #86b7fe; */
        outline: 0;
        box-shadow: none;
    }

/*----------------------------------------------------------------------------*/
/*#endregion Form input elements (Input, Select etc) */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Tag */
/*----------------------------------------------------------------------------*/

.tag {
    font-size: var(--fs-p);
    font-weight: var(--fw-600);
    width: fit-content;
    border-radius: 100px;
    padding: 4px 16px;
}

    .tag.active {
        color: var(--white-color);
        background: var(--secondary-color);
    }

    .tag.primary {
        color: var(--white-color);
        background: var(--primary-color);
    }

    .tag.secondary {
        color: var(--tertiary-color);
        background: var(--tertiary-color-14);
    }

/*----------------------------------------------------------------------------*/
/*#endregion Tag */
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Section break */
/*----------------------------------------------------------------------------*/

.section-break {
    height: 150px;
}

.section-break-s {
    height: 60px;
}

.section-break-xs {
    height: 40px;
}

/*----------------------------------------------------------------------------*/
/*#endregion Section break */
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Footer */
/*----------------------------------------------------------------------------*/

a.icon-footer img {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

a.icon-footer {
    color: var(--white-color);
    background: var(--primary-color);
    width: 28px;
    height: 28px;
    font-size: var(--fs-button);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

    a.icon-footer:hover,
    a.icon-footer:focus {
        color: var(--white-color);
        background: var(--secondary-color);
    }

.footer-container {
    background: var(--bg-body-secondary);
}

    .footer-container .navbar-nav {
        flex-direction: unset;
    }

/*----------------------------------------------------------------------------*/
/*#endregion Footer */
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Wave animation */
/*----------------------------------------------------------------------------*/

.wave-flow {
    width: 100vw;
    /* position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 17vw;
    height: 17vw;
    overflow: hidden; */
}

    .wave-flow svg {
        width: 100vw;
        height: 109px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 0;
    }

use {
    animation: move-forever 12s linear infinite;
    &:nth-child(2)

{
    animation-duration: 7s;
    animation-delay: 0s;
}

&:nth-child(1) {
    animation-duration: 5s;
}

}

@keyframes move-forever {
    0% {
        transform: translate(-2px, 0)
    }

    100% {
        transform: translate(0px, 0)
    }
}

/*----------------------------------------------------------------------------*/
/*#endregion Wave animation */
/*----------------------------------------------------------------------------*/

@media screen and (min-width: 992px) {
    .navbar .dropdown-menu {
        visibility: hidden;
        opacity: 0;
        width: 330px;
        /* left: 61%;
                top: 70px; */
        display: block;
        transition: visibility 0s, opacity 0.3s linear;
        margin: auto;
        border-radius: 0px;
        padding: 20px 30px;
        box-shadow: var(--box-shadow-card);
        z-index: 99999;
        border: none;
        background-color: #fff !important;
    }

    .navbar .dropdown:hover .dropdown-menu,
    .navbar .dropdown .dropdown-menu:hover {
        display: block;
        visibility: visible;
        opacity: 1;
        transition: visibility 0s, opacity 0.3s linear;
    }

    .navbar .dropdown-menu {
        background-color: white;
    }

    .collapse.navbar-collapse {
        background: none !important;
        padding: initial !important;
    }
}

@media screen and (max-width: 992px) {
    .navbar-nav .nav-item .nav-link {
        padding: 5px 10px;
    }

    .section-break {
        height: 80px;
    }
}

@media screen and (max-width: 576px) {
    :root {
        --fs-h1: 48px;
    }
}