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

:root {
    /* Colors */
    --primary-color: #1d8fe2;
    --primary-color-14: #1d8fe224;
    --secondary-color: #8fe21d;
    --secondary-color-14: #8fe21d24;
    --tertiary-color: #d00058;
    --tertiary-color-14: #d0005824;
    --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(--white-color);
    background: var(--primary-color); */
}

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 */
/*----------------------------------------------------------------------------*/

/* Bootstrap button overriding */
.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-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);
}

.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;
}

@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;
}

/*----------------------------------------------------------------------------*/
/*#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 */
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#endregion 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;
}

use {
    animation: move-forever 2s linear infinite;

    &:nth-child(2) {
        animation-duration: 2.5s;
        animation-delay: -1.5s;
    }

    &: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;
    }
}