html {
    min-height: 100%;
    overflow-x: hidden;
}

html, body {
    width: 100%;
    font-family: 'Raleway', 'Font Awesome 5 Free' , "Font Awesome 5 Brands", sans-serif ;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

html.closed , body.closed, html.lity-active {
    overflow: hidden;
}

body {
	color: #181818;
	background: #111;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	transition: .3s ease;
}

body::-webkit-scrollbar {
    width: 0.5em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
}
 
/*這個要分theme 去改color*/
body::-webkit-scrollbar-thumb {
    border-radius: 90px;
}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #009C84;
}

::selection {
  color: #fff;
  background: #009C84;
}


/*--- Font Default ---*/

h1 {
    font-size: 60px;
    font-weight: bold;
}

@media(max-width: 768px) {
    h1 {
        font-size: 50px;
    }
}

h2 {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
}

@media(max-width: 990px) {
    h2 {
        font-size: 40px;
    }
}

h3 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
}

@media(max-width: 990px) {
    h3 {
        font-size: 28px;
    }
}

@media(max-width: 576px) {
    h3 {
        font-size: 26px;
    }
}

h4 {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 400;
    color: #fbfbfb;
}

h5 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
}

h6 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 20px;
}

small {
    font-size: 14px;
    line-height: 1.5;
}

.small {
    font-size: 12px;
    line-height: 1.5;
}

a {
    position: relative;
    text-decoration: none;
    color: inherit;
    display: inline-block;
    cursor: pointer;
}

a:focus {
    text-decoration: none;
}

a:focus, a:hover {
    color: #009B7C;
    outline: 0;
    text-decoration: none;
}

a.underline {
    position: relative;
    display: inline-block;
}

a.underline:before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #009B7C;
    transition: .3s ease;
}

a.underline:hover:before {
    position: absolute;
    width: 100%;
    transition: .3s ease;
}

.text-center {
    text-align: center;
}

.img-responsive {
    max-width: 100%;
    width: auto;
    object-fit: cover;
}

.btn.focus, .btn:focus, .btn:hover {
    color: inherit;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

.circle-btn {
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid #fff;
    background: transparent;
}

.circle-btn span {
    padding: 0 8px;
}

.box-more-btn p.link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    border-bottom: 0;
    width: fit-content;
}

.box-more-btn p.link:before {
    content: '\f0a9';
    font-weight: 900;
    color: #009B7C;
    margin-right: 6px;
    display: inline-block;
}

.box-more-btn:hover p.link {
    color: #009B7C;
    transition: .3s ease;
}

.box-more-btn p.link:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20px;
    width: 0;
    height: 2px;
    background: #009B7C;
    transition: .3s ease;
}

.box-more-btn:hover p.link:after {
    width: calc(100% - 16px);
}

.post-more a {
    color: #007076;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.post-more a:hover {
    font-weight: 600;
    color: #009B7C;
}

.post-more a:after {
    content: '\f061';
    width: 18px;
    height: 18px;
    font-weight: 900;
    text-align: center;
    color: #fff;
    background: #007076;
    margin-left: 8px;
    border-radius: 40px;
    font-size: 10px;
    flex-wrap: wrap;
    display: inline-flex;
    align-content: center;
    justify-content: center;
}

.post-more a:hover:after {
    background: #009B7C;
}

.chat-btn {
    padding: 16px 24px;
    background: #009B7C;
    border-radius: 10px;
    color: #fff;
}

.chat-btn i {
    margin: 0 4px;
}

.chat-btn:hover,
.load-more .btn-more:hover {
    background: #007076;
    color: #fff;
}

.load-more .btn-more {
    position: relative;
    width: 120px;
    padding: 14px;
    display: block;
    background: #009B7C;
    border-radius: 10px;
    color: #fff;
    margin: auto;
}


svg .theme-color {
    fill: #fbfbfb;
}


.container {
    transition: .3s ease;
}

/*@media (min-width: 1200px){*/
/*    .container {*/
/*        width: 1170px;*/
/*    }*/
/*}*/




/*---- LOGO color ----*/

.company-logo .color01,
.footer-logo .color01,
.landing-logo .color01 {
    fill: #fff;
}

.company-logo .color02,
.footer-logo .color02,
.landing-logo .color02 {
    fill: #009B7C;
}

.company-logo p,
.footer-logo p {
    margin: 0;
}

.footer-logo p > svg {
    position: relative;
    left: -16px;
    max-width: 340px;
    
}




/*--- Header ---*/

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: .3s ease;
}


.closed #header {
    background: rgb(17 17 17 / 100%);
}

.header-top {
    position: relative;
    width: 100%;
    background: rgba(24, 24, 24, 0.5);
    padding: 8px 40px;
    display: flex;
    justify-content: right;
    /*-webkit-filter: blur(3px);*/
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 9;
}

@media(max-width: 990px) {
    .header-top {
        padding: 10px 0;
    }
}

.header {
    position: relative;
    width: 100%;
    padding: 24px 40px;
}

@media(max-width: 1200px) {
    .header {
        padding: 24px 0;
    }
}

@media(max-width: 576px) {
    .header {
        padding: 16px 0;
    }
}

.company-logo {
    width: 240px;
    transition: .3s ease;
}

@media(max-width: 1024px) {
    .company-logo {
        width: 200px;
    }
    
}

@media(min-width: 1501px) {
    .header-top .container,
    .header .container {
        width: 100%;
        max-width: 1600px;
    }
}

@media(max-width: 1500px) {
    .header-top .container,
    .header .container {
        width: 100%;
    }
}

@media(max-width: 576px) {
    .company-logo {
        width: 200px;
    }
}

.menu-color .company-logo {
    /*width: 200px;*/
    width: 180px;
}

@media(max-width: 990px) {
    .menu-color .company-logo {
        width: 200px;
    }
}

@media(max-width: 576px) {
    .menu-color .company-logo {
        width: 160px;
    }
}

.menu-icon {
    position: relative;
    width: 30px;
    height: 30px;
    float: right;
    display: inline-flex;
    flex-wrap: wrap;
    top: 22px;
}

@media(min-width: 991px) {
    .menu-icon {
        display: none;
    }
}

@media(max-width: 576px) {
    .menu-icon {
        top: 10px;
    }
}


.menu-icon span {
    width: 100%;
    height: 1px;
    background: #fbfbfb;
    display: block;
    opacity: 1;
    transition: .3s ease;
}

.menu-icon.closed span:nth-child(1) {
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
}

.menu-icon.closed span:nth-child(2) {
    opacity: 0;
}

.menu-icon.closed span:nth-child(3) {
    position: absolute;
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
}

.top-btn {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    /*overflow: hidden;*/
}

.book, .login, .role {
    position: relative;
    overflow: hidden;
}

@media(max-width: 576px) {
    .book, .login {
        margin-bottom: 10px;
    }
    
}

.book.active,
.login.active,
.role.active {
    overflow: visible;
}

.book .btn:hover,
.login .btn:hover {
    background: #009B7C;
}

.drop-btn.active .circle-btn {
    color: #fbfbfb;
    background: #007076;
}

.book .circle-btn {
    background: rgb(0 155 124 / 70%);
}

.drop-btn.active .circle-btn .role-arrow {
    transform: rotate(180deg);
}

.top-btn .circle-btn {
    margin-left: 10px;
}

.top-btn .circle-btn:hover a {
    color: #fff;
}

@media(max-width: 576px) {
    .top-btn .circle-btn {
        padding: 8px;
        margin-left: 8px;
    }
    
    .top-btn .drop-btn:first-child .circle-btn {
        margin-left: 0;
    }
    
    .circle-btn span {
        font-size: 12px;
    }
}

.role-menu, .login-menu, .book-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: -24px;
    min-width: 230px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    background: #fbfbfb;
    overflow: hidden;
    opacity: 0;
	transition: 0.3s cubic-bezier(.2, 0, 0, 1.6);
	transform: scale(0.6) translateY(-20%);
	-webkit-transform: scale(0.6) translateY(-20%);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
	z-index: -99;
}

.role.active .role-menu, .login.active .login-menu, .book.active .book-menu {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    z-index: 9;
}

.role-menu a, .login-menu a, .book-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    color: #181818;
    font-size: 15px;
    font-weight: 500;
}

.role-menu a:first-child, 
.login-menu a:first-child, 
.book-menu a:first-child {
    padding: 24px 30px 16px;
}


.role-menu a:last-child,
.login-menu a:last-child,
.book-menu a:last-child {
    padding: 16px 30px 24px;
}

.role-menu a:hover, 
.login-menu a:hover, 
.book-menu a:hover {
    background: #eee;
    text-decoration: none;
}

.role-menu a.active, .login-menu a.active, .book-menu a.active {
    color: #009B7C;
    background: #eee;
}

.role-menu a.active:before, .login-menu a.active:before, .book-menu a.active:before {
    content: '\f00c';
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    color: inherit;
    margin-right: 10px;
    opacity: 1;
}

/* -- Nav -- */

#navbarNav {
    float: right;
}

@media(max-width: 990px) {
    #navbarNav {
        position: relative;
        width: 100%;
        height: 100vh;
        /*background: #111;*/
        z-index: 2;
        display: none;
    }
    
    #navbarNav .menu-list {
        width: 100%;
        height: 80vh;
        flex-wrap: wrap;
        overflow-y: auto;
    }
    
    #navbarNav .nav-item a.nav-link,
    #navbarNav .active a.nav-link {
        max-width: 100%;
        height: auto;
        padding: 24px 20px;
        font-size: 18px;
    }
}

.menu-list {
    display: none;
}

.navbar-nav {
    padding: 0;
}

.navbar-nav li {
    position: relative;
    list-style: none;
    margin: 0 16px;
}

.navbar-nav li a {
    line-height: 1.5;
    padding-bottom: 24px;
}

@media(max-width: 1200px) {
    .navbar-nav li {
        margin: 0 8px;
    }
    
    .navbar-nav li a {
        font-size: 15px;
    }
}

@media(max-width: 1024px) {
    .navbar-nav li {
        margin: 0 7px;
    }
    
    .navbar-nav li a {
        font-size: 14px;
    }
}

@media(max-width: 990px) {
    .navbar-nav {
        width: 100%;
        padding: 30px;
        margin: 0 auto;
    }
    
    .navbar-nav li {
        width: 100%;
        display: block;
        margin: 0;
        text-align: center;
        border-bottom: 1px solid #242424;
    }
}

@media(max-width: 576px) {
    .navbar-nav {
        padding: 30px 20px 30%;
    }
}

.navbar-nav>li:first-child {
    margin-left: 0;
}

.navbar-nav>li:last-child {
    margin-right: 0;
}

a.nav-link {
    position: relative;
    max-width: 160px;
    height: 80px;
    padding: 24px 4px 36px;
    display: flex;
    align-items: center;
    text-align: center;
    transition: .3s ease-in-out;
}


.navbar-nav a.nav-link:before {
    content: "";
    position: absolute;
    height: 4px;
    z-index: -1;
    bottom: 0;
    left: 0;
    opacity: 0;
    background: #009B7C;
    transition-property: bottom;
    transition: .3s ease-in-out;
}

.sub-dropdown-menu a.nav-link:before {
    display: none;
}

a.nav-link:hover {
    /*font-weight: 500;*/
}

.navbar-nav a.nav-link:hover:before {
    width: 100%;
    bottom: 4px;
    opacity: 1;
}

.navbar-nav li.active a.nav-link:before {
    width: 100%;
    bottom: 4px;
    opacity: 1;
}

.menu-color {
    background: rgba(24, 24, 24, 0.7);
    /*-webkit-filter: blur(3px);*/
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.no-menu.menu-color {
    background: transparent;
}

.sub-dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    padding: 0;
    display: none;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#navbarNav .nav-item > .sub-dropdown-menu .nav-item {
    margin: 0;
}

.sub-dropdown-menu li {
    margin: 0;
}

.sub-dropdown-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 180px;
    height: 80px !important;
    padding: 10px 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    background: rgb(0 0 0 / 80%);
    backdrop-filter: blur(5px);
}

.sub-dropdown-menu li a:hover {
    background: rgb(86 86 86 / 80%);
    backdrop-filter: blur(5px);
    color: #fff;
    text-decoration: none;
}

#navbarNav .nav-item.open > .sub-dropdown-menu {
    display: flex;
}


.sub-dropdown-menu li.active a {
    color: #009b7c;
}

@media(max-width: 990px) {
    .sub-dropdown-menu {
        position: relative;
        left: 0;
        transform: unset;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        border-radius: 0;
        background: #333;
        padding: 0;
        margin-left: 20px;
        display: flex;
    }
    
    .sub-dropdown-menu li a {
        text-align: left;
        justify-content: flex-start;
        color: #fff;
    }
    
    .sub-dropdown-menu li a:hover {
        background: #eee;
        color: #222;
        text-decoration: none;
    }
    
    .sub-dropdown-menu li.active a {
        background: #fbfbfb;
    }
}


/*-- header end--*/


/*----- Body section default -----*/

#archer {
    position: relative;
    z-index: 2;
}

.section, .registration {
    position: relative;
    padding: 50px 0;
}

.section > .row {
    padding: 40px 15px;
}

@media(max-width: 768px) {
    .section {
        padding: 30px 0;
    }
    
    .section > .row {
        padding: 24px 15px;
    }
    
    .main-page .section {
        padding: 0;
    }
}

@media(max-width: 576px) {
    .section {
        padding: 20px 0;
    }
    
    .section > .row {
        padding: 20px 15px;
    }
}

/*----- Body section default end -----*/


/*--- Landing page ---*/

#landing {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    background: #222;
}

.landing-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    transform: rotate(0) scale(1.5);
    transition: .5s ease;
    animation: bg-anim 60s linear infinite;
    animation-direction: alternate;
    z-index: 0;
    opacity: .3;
}

.landing-bg .color {
    position: absolute;
    filter: blur(80px);
    /*-webkit-filter: blur(80px);*/
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
    border-radius: 100em;
}

@media(max-width: 414px) {
    .landing-bg .color {
        filter: blur(90px);
        -webkit-backdrop-filter: blur(90px);
        /*-webkit-filter: blur(90px);*/
        backdrop-filter: blur(90px);
    }
}

@media only screen and (max-height: 600px) {
    #landing .container {
        overflow-y: auto;
    }
}

.landing-bg .color01 {
    width: 600px;
    height: 600px;
    bottom: 60px;
    left: 60px;
    background: #FFD770;
    box-shadow: 0 0 40px 50px #FFD770;
    
}

.landing-bg .color02 {
    width: 800px;
    height: 800px;
    top: 40px;
    left: 320px;
    background: #009B7C;
    box-shadow: 0 0 40px 50px #009B7C;
}

.landing-bg .color03 {
    width: 500px;
    height: 500px;
    top: 300px;
    right: 60px;
    background: #70D7FF;
    box-shadow: 0 0 40px 50px #70D7FF;
}

@keyframes bg-anim {
    40% {
       transform: rotate(180deg) scale(1.6);
       opacity: .35;
    }
    
    80% {
        transform: scale(1.5);
        opacity: .3;
    }
    
    to {
        transform: rotate(360deg) scale(1.6);
        opacity: .4;
    }
}

.landing-logo {
    display: inline-block;
    margin-left: 4px;
}

.landing-logo p {
    margin: 0;
}

.landing-logo svg {
    width: 280px;
    vertical-align: middle;
}

.landing-box-area {
    position: absolute;
    width: 100%;
    max-width: 1100px;
    top: 50%;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fbfbfb;
    transform: translate(-50%, -50%);
    margin: auto;
}



@media(max-width: 990px) {
    .landing-box-area {
        position: relative;
        /*height: 100vh;*/
        top: unset;
        left: unset;
        transform: unset;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 60px 0;
    }
    
}

.landing-box-area .title {
    width: 100%;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

@media(max-width: 990px) {
    .landing-box-area .title {
        margin-bottom: 0;
    }
}


.landing-box-area .title h6 {
    font-weight: 300;
    margin: 20px 0;
}


.landing-box {
    position: relative;
    width: calc(100% / 3 - 32px);
    height: 440px;
    border-radius: 20px;
    background-color: #181818;
    background-size:  cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: luminosity;
    overflow: hidden;
    padding: 0;
    margin: 16px;
}

@media(max-width: 990px) {
    .landing-box {
        /*width: 60%;*/
        height: 300px;
        margin: 20px auto;
    }
}

@media(max-width: 768px) {
    .landing-box {
        width: 60%;
    }
}

@media(max-width: 576px) {
    .landing-box {
        width: 80%;
        height: 340px;
    }
}

.landing-box a {
    height: 100%;
    display: block;
    cursor: pointer;
    transition: .5s ease;
}

.landing-box a:hover {
    color: inherit;
}

.landing-box img {
    position: relative;
    width: 100%;
    height: 260px;
    -webkit-filter:grayscale(1);
    margin-bottom: -100px;
    object-fit: cover;
    z-index: 0;
    transition: .5s ease;
}

.landing-box a:hover img {
    height: 220px;
    margin: 0;
    -webkit-filter:grayscale(0);
    transition: .5s ease-in;
}

@media(max-width: 990px) {
    .landing-box img {
        height: 160px;
    }
    
    .landing-box a:hover img {
        height: 130px;
    }
}


@media(max-width: 576px) {
    .landing-box img {
        height: 210px;
    }
    
    .landing-box a:hover img {
        height: 150px;
    }
}
 
.landing-box a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 261px;
    top: 0;
    background: linear-gradient(to bottom, rgba(24,24,24,0) 0%,rgba(24,24,24,1) 100%);
}

.landing-box a:hover:after {
    height: 221px;
    transition: .5s ease-in;
}

@media(max-width: 990px) {
    .landing-box a:hover:after {
        height: 130px;
    }
    
    .landing-box a:after {
        height: 161px;
    }
}

@media(max-width: 768px) {
    .landing-box a:hover:after {
        height: 150px;
    }
    
    .landing-box a:after {
        height: 211px;
    }
}

.box-text {
    position: relative;
    padding: 16px 20px 20px;
    z-index: 1; 
}

.box-text h4 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 16px;
    transform: translateY(140px);
    transition: .5s ease;
}

.landing-box a:hover .box-text h4 {
    font-size: 20px;
    transform: translateY(0);
    transition: .5s ease-in;
}

.box-text p {
    color: rgba(255,255,255,.8);
    font-size: 14px;
    transform: translateY(160px);
    transition: .5s ease;
    opacity: 0;
}

.landing-box a:hover .box-text p {
    opacity: 1;
    transform: translateY(0);
    transition: .6s ease-in;
}

.box-text span {
    color: #fbfbfb;
    font-weight: 600;
    font-size: 14px;
    transform: translateY(180px);
    transition: .5s ease;
    display: block;
    opacity: 0;
}

.landing-box a:hover .box-text span {
    opacity: 1;
    transform: translateY(0);
    transition: .7s ease-in;
}

.box-text span:before {
    content: '\f0a9';
    display: inline-block;
    margin-right: 6px;
    color: #009B7C;
    font-weight: 900;
    font-size: 14px;
}


@media only screen and (max-height: 600px){
    
    .landing-box-area .title {
        margin-bottom: 0;
    }
    
    .landing-box {
        height: 260px;
    }
    
    .landing-box img {
        height: 140px;
    }
    
    .landing-box a:after {
        height: 142px;
    }
    
    .landing-box a:hover img {
        height: 80px;
    }
    
    .landing-box a:hover:after {
        height: 81px;
    }
    
    .box-text h4 {
        transform: translateY(100px);
    }
}

/*--- Layout end ---*/


/*--- Footer ---*/

#footer {
    width: 100%;
    padding: 80px 0 60px;
    margin-top: 50px;
    background: #181818;
    color: #fbfbfb;
}

#footer .container {
    position: relative;
    margin: auto;
}


@media(min-width: 1440px) {
    #footer .container {
        width: 1440px;
    }
    
    .footer-contact,
    .footer-bottom {
        padding: 0 30px;
    }
}

@media(max-width: 990px) {
    #footer .container {
        width: 90%;
    }
}

.footer-bottom-line {
    padding: 20px 15px;
    margin-top: 40px;
    border-top: 1px solid #fbfbfb;
    display: flex;
    justify-content: space-between;
}

@media(max-width: 990px) {
    .footer-bottom-line {
        padding: 20px 0;
    }
}

.footer-bottom-line a:after {
    content: '|';
    display: inline-block;
    margin: 0 8px;
    color: #fbfbfb;
}

.footer-bottom-line a:last-child:after {
    content: '';
}

.footer-bottom {
    float: right;
}

.footer-contact p {
    font-weight: 400;
    color: #fbfbfb;
}

.footer-contact p a {
    font-weight: 500;
    border-bottom: 1px solid #009B7C;
}

.footer-logo {
    margin-bottom: 40px;
}

.footer-logo img {
    height: 50px;
    object-fit: cover;
}

#footer .sitemap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

@media(max-width: 1200px) {
    #footer .sitemap {
        justify-content: unset;
    }
    
    #footer .sitemap ul {
        margin-bottom: 30px;
    }
}

@media(max-width: 990px) {
    #footer .sitemap {
        width: 100%;
        justify-content: space-between;
        /*flex-wrap: wrap;*/
        margin: 30px 0 40px;
    }
}

.sitemap p {
    width: 100%;
}

#footer ul,
#footer li {
    list-style-type: none;
}

#footer ul {
    margin: 0 10px;
    padding: 0;
}

#footer li a {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,.8);  
    margin-bottom: 10px;
}

#footer li a:hover {
    color: #009B7C;
}

#footer li.list-title {
    font-size: 18px;
    font-weight: 600;
    color: #fbfbfb;
    margin-bottom: 10px;
}

#footer-sitemap {
    /*width: 200px;*/
}

#footer #footer-sitemap ul {
    margin: 0;
    margin-left: 16px;
}

#footer-sitemap h6 {
    margin: 10px 0;
}

#footer-sitemap h6 button {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
}

#footer-sitemap h6 button:before {
    content: '\f067';
    margin-right: 4px;
    color: inherit;
    font-size: 10px;
    display: inline-block;
    vertical-align: middle;
}

#footer-sitemap h6 button:not(.collapsed):before {
    content: '\f068';
}

#footer-sitemap h6 button:not(.collapsed) {
    color: #fff;
}

.sales-contact button {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
}

.sales-contact button::before {
    content: '\f067';
    margin-right: 4px;
    color: inherit;
    font-size: 10px;
    display: inline-block;
    vertical-align: middle;
}

.sales-contact button:not(.collapsed):before {
    content: '\f068';
}

.sales-contact button:not(.collapsed) {
    color: #fff;
}

.sales-contact-detail ul {
    margin-left: 16px !important;
    padding-left: 0;
}

.sales-contact-detail ul li {
    list-style-type: none;
    margin-bottom: 30px;
}

.sales-contact-detail li p {
    margin-bottom: 6px;
    color: #fbfbfb;
    /*color: rgba(255,255,255,.8);*/
    font-weight: 500;
}

.sales-contact-detail li .detail {
    color: rgba(255,255,255,.8);
    font-size: 14px;
    font-weight: 400;
}

.sales-contact-detail li .detail a {
    margin-bottom: 0;
    font-weight: 500 !important;
    color: #fbfbfb;
}

.sales-contact-detail li .detail a:hover {
    color: #009B7C;
}

.footer-bottom span {
    display: block;
    text-align: right;
    font-weight: 400;
    font-size: 14px;
}

@media(max-width: 990px) {
    #footer ul {
        margin: 0 0 30px;
    }
}

@media(max-width: 768px) {
    #footer ul {
        width: 50%;
    }
    
    #footer li.list-title {
        font-size: 20px;
    }
}

@media(max-width: 576px) {
    #footer ul {
        width: 100%;
    }
}

.super-about-content {
    margin: 20px 0;
}


.super-about-content h6 {
    font-weight: 600;
}

.super-about-content > div {
    margin-bottom: 20px;
    padding: 0;
    padding-right: 20px;
}

@media(max-width: 990px) {
    .super-about-content > div {
        padding: 0;
    }
    
}

/*--- Footer end ---*/




/*-- Chat Map*/


#AU-map {
  /*position: absolute;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  width: 100%;
}

.cls-1 {
  fill: url(#Degradado_sin_nombre_53-14);
}

.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19, .cls-20, .cls-21, .cls-22, .cls-23 {
  stroke: #fbfbfb;
  stroke-width: .7;
}

.cls-2 {
  fill: url(#Degradado_sin_nombre_53-15);
}

.cls-3 {
  fill: url(#Degradado_sin_nombre_53-12);
}

.cls-4 {
  fill: url(#Degradado_sin_nombre_53-13);
}

.cls-5 {
  fill: url(#Degradado_sin_nombre_53-11);
}

.cls-6 {
  fill: url(#Degradado_sin_nombre_53-10);
}

.cls-24 {
  fill: #fbfbfb;
}

.cls-7 {
  fill: url(#Degradado_sin_nombre_53-2);
}

.cls-8 {
  fill: url(#Degradado_sin_nombre_53-4);
}

.cls-9 {
  fill: url(#Degradado_sin_nombre_53-3);
}

.cls-10 {
  fill: url(#Degradado_sin_nombre_53-9);
}

.cls-11 {
  fill: url(#Degradado_sin_nombre_53-6);
}

.cls-12 {
  fill: url(#Degradado_sin_nombre_53-7);
}

.cls-13 {
  fill: url(#Degradado_sin_nombre_53-8);
}

.cls-14 {
  fill: url(#Degradado_sin_nombre_53-5);
}

.cls-15 {
  fill: url(#Degradado_sin_nombre_10-3);
}

.cls-16 {
  fill: url(#Degradado_sin_nombre_10-2);
}

.cls-17 {
  fill: url(#Degradado_sin_nombre_10-5);
}

.cls-18 {
  fill: url(#Degradado_sin_nombre_10-6);
}

.cls-19 {
  fill: url(#Degradado_sin_nombre_10-7);
}

.cls-20 {
  fill: url(#Degradado_sin_nombre_10-8);
}

.cls-21 {
  fill: url(#Degradado_sin_nombre_10-4);
}

.cls-22 {
  fill: url(#Degradado_sin_nombre_10);
}

.cls-23 {
  fill: url(#Degradado_sin_nombre_53);
}

.cls-26 {
  fill: none;
  filter: url(#drop-shadow-1);
}

path.area-link {
  cursor: pointer;
}

path.area-link:hover {
  fill: #0A4D50;
}

.chat-map {
    position: relative;
}

.chat-map .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.chat-title h3 {
    margin-bottom: 24px;
}

@media(max-width: 990px) {
    .chat-title {
        width: 90%;
        margin: 0 auto 60px;
    }
    
    .australia-image {
        width: 90%;
        /*margin: auto;*/
    }
  
}

/*--- chat Map end ---*/



/*-- Contact form --*/

.contact-us {
    position: relative;
}

.contact-us .row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 2;
}



.contact-bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    overflow: hidden;
}

.contact-bg:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    transform: translateY(-50%);
}

.contact-bg img {
    /*色彩增值*/
    mix-blend-mode: color-burn; 
    width: 100%;
    height: 860px;
    object-fit: cover;
}


.contact-detail {
    padding-left: 60px;
}

@media(max-width: 990px) {
    .contact-detail {
        width: 100%;
        order: 1;
        padding-left: 0;
        margin-bottom: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .contact-bg {
        top: 0;
        transform: unset;
    }
    
}

@media(max-width: 768px) {
    .contact-detail {
        width: 80%;
        flex-wrap: wrap;
        justify-content: left;
        margin-bottom: 0;
    }
    
    .detail-list {
        width: 100%;
    }
    
    .contact-bg img {
        height: 80vh;
    } 
}

.contact-detail .detail-list {
    margin-bottom: 60px;
}

.detail-list h4,
.detail-list p {
    margin-bottom: 10px;
    font-weight: bold;
}

.detail-list p {
    font-weight: 300;
}

.detail-list a {
    font-weight: 500;
    border-bottom: 1px solid #009B7C;
}

.contact-form {
    background: #222;
    border-radius: 40px;
    padding: 70px 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}


#booking {
    margin-top: 40px;
}

@media(max-width: 990px) {
    .contact-form {
        width: 90%;
        order: 2;
        z-index: 9;
        padding: 50px 30px 30px;
        margin: auto;
    }
    
    #booking .contact-form {
        padding: 40px 20px;
        width: 100%;
    }
}

.contact-form .row {
    justify-content: left;
    margin-bottom: 0;
}

.contact-form .contact-btn {
  font-weight: 500;
  padding: 16px 50px;
  width: 200px;
  text-align: center;
  background-color: #007076;
  color: #fbfbfb;
  border-radius: 30px;
  cursor: pointer;
  transition: all .3s ease;
  float: left;
  clear: both;
}

.contact-form .contact-btn:focus {
    outline: none;
}

.contact-form .contact-btn:after {
  content: "\f1d8";
  position: absolute;
  padding-left: 10px;
  transform: translate(0px);
  font-weight: 900;
}


.contact-form .contact-btn:hover {
  background-color: #0D816F;
  color: #fff;
}

.contact-form .contact-btn:hover:after {
  animation: flyout 2s 3;
}

@keyframes flyout {
  0% {
    transform: translate(-2px, 5px);
  }
  
  30% {
    opacity: 0;
  }
  
  40% {
    transform: translate(30px, -30px);
  }
  
  50% {
    transform: translate(-20px, 40px);
    opacity: 0;
  }
  
  80% {
    opacity: 1;
    transform: translate(0px);
  }
  
  100% {
    opacity: 1;
  }
}


.contact-form .form-field {
    position: relative;
    margin: 32px 0;
}

@media(max-width: 576px) {
    .contact-form .form-field {
        margin: 10px 0;
    }
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 45px;
    padding-left: 5px;
    padding-bottom: 0px;
    border-width: 0 0 1px 0;
    border-color: rgba(255,255,255,.8);
    border-radius: 0;
    background: transparent;
    color: rgba(255,255,255,.8);
    font-size: 16px;
    line-height: 26px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.contact-form .input-text:focus {
    outline: none;
    border-color: #fbfbfb;
}

.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
    -webkit-transform: translateY(-24px);
    -ms-transform: translateY(-24px);
    transform: translateY(-24px);
    color: #fbfbfb;
}

.contact-form .label {
    position: absolute;
    left: 14px;
    bottom: 11px;
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;
    color: rgba(255,255,255,.8);
    cursor: text;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

#Enquiry, #Title, #State {
    width: 100%;
    height: 45px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #fbfbfb;
    background: transparent;
    color: #fbfbfb;
    outline: 0;
    /*-webkit-appearance: none;*/
    -webkit-border-radius: 0;
}


#Enquiry:focus, #Title:focus, #State:focus {
    /*border: 0;*/
}

#Enquiry option {
    display: block;
}


.contact-form .form-control {
    background: transparent;
    border-radius: 16px;
    border-color: #fbfbfb;
    margin-top: 16px;
    padding: 18px;
    color: #fbfbfb;
}

.contact-form .form-control:placeholder {
    color: #777;
}

.form-control:focus {
    border-color: #009B7C;
}

.msg-label  {
    top: 11px;
    bottom: auto;
}


.form-field.has-error input {
    border-color: #a94442;
}

.contact-form .submit {
    text-align: center;
    margin: 15px 0;
    padding: 0 15px;
}

.g-recaptcha {
    float: left;
    margin-bottom: 20px;
}

@media(max-width: 990px) {
    .g-recaptcha {
        float: left;
    }
}

.g-recaptcha > div {
    width: 100% !important;
}

@media(max-width:767px) {
    .form-field {
        padding-top: 30px;
    }

    .g-recaptcha {
        -webkit-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
}


#formWidgetSubmitResultText {
    width: 100%;
    text-align: left;
    color: #86CCDD;
    margin: 20px 0;
    display: inline-block;
}




.help-block {
    display: inline-block;
    margin-left: 10px;
    color: #bf0e0e;
}

option[value=""][disabled] {
  display: none;
}

/*-- Contact form end--*/

/*-- Banner --*/

.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 1300px;
    clip-path: ellipse(150% 66% at 35% 33%);
    background: linear-gradient(260deg, #007076 25%, #002527 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .3s ease;
    overflow: hidden;
    z-index: 1;
}

@media(min-width: 1200px) {
    .banner .container {
        position: relative;
        max-width: 1440px;
        width: 100%;
        height: 100%;
        margin: auto;
    }
    
    .banner {
        clip-path: ellipse(130% 66% at 35% 33%);
    }
}

@media(max-width: 990px) {
    .banner {
        clip-path: ellipse(164% 66% at 40% 33%);
    }
}

@media(max-width: 768px) {
    .banner {
        clip-path: ellipse(164% 66% at 33% 34%);
    }
}

@media(max-width: 576px) {
    .banner {
        clip-path: ellipse(210% 66% at 33% 34%);
    }
}

.banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(17, 17, 17, 1) 0%,rgba(17, 17, 17, 0) 90%);
    opacity: .8;
}

.banner .content {
    position: absolute;
    width: 600px;
    top: 50%;
    margin-left: 20px;
    transform: translateY(-10%);
}

.adviser-banner .content {
    top: 36%;
}

.banner h1 {
    margin-bottom: 24px;
}

.banner .content h4 {
    font-weight: 300;
}

#sub-banner {
    height: 86vh;
}

#sub-banner.short-banner {
    height: 40vh;
}

#sub-banner h2 {
    text-align: center;
}

#sub-banner .content {
    width: 1000px;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
}


#sub-banner .content h4 {
    width: 100%;
}

@media(max-width: 990px) {
    #sub-banner h2 {
        max-width: 90%;
        margin: auto;
    }
}

@media(max-width: 768px) {
    
    #sub-banner {
        height: 60vh;
    }
    
    #sub-banner h2 {
        font-size: 40px;
    }
    
    .banner .content,
    #sub-banner .content {
        width: 80%;
    }
    
    #sub-banner .content {
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/*-- Banner end --*/

/*--- page section ---*/

.intro h2, .intro h3 {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 24px;
}

.intro ul {
    width: 100%;
}


#sub-page .intro h3 {
    max-width: 1000px;
}

@media(max-width: 768px) {
    .intro h2 {
        font-size: 40px;
        width: 90%;
    }
    
    .intro h3, #sub-page .intro h3 {
        width: 90%;
    }
}

.intro h6 {
    text-align: center;
}

.video-row {
    position: relative;
    z-index: 1;
    /*margin-top: -36vh;*/
}

.top-video {
    position: relative;
    width: 100%;
    max-height: 683px;
    padding-bottom: 60%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}

.video {
    position: absolute;
    top: 4%;
    left: 50%;
    width: 75.6%;
    height: 0;
    padding: 24.5%;
    overflow: hidden;
    transform: translateX(-50%);
}

.video iframe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    background-color: #000;
}

@media(mn-width: 1600px) {
    .top-video {
        top: -16vh;
    }
}

@media(max-width: 576px) {
    .video-row {
        padding-bottom: 0 !important;
        margin-top: 0;
    }
}

.section-box {
    padding: 32px 30px 42px;
    background: #222;
    margin: 60px 10px 20px;
    border-radius: 20px;
}

.section-box h4 {
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

.section-box p {
    text-align: left;
}

.section-box ul {
    margin-top: 20px;
}

.section-box li {
    margin-left: 8px;
    margin-bottom: 10px;
    text-indent: -10px;
}

.section-box li:before {
    content: '\f111';
    font-weight: 900;
    display: inline-block;
    margin-right: 10px;
    font-size: 8px;
    vertical-align: middle;
    color: #007076;
}

.contact-note {
    color: #007076;
    font-weight: 600;
    text-align: center;
}

.img-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.img-section h3 {
    text-align: left !important;
}

@media(max-width: 990px) {
    .img-section {
        flex-wrap: wrap;
    }
}

.img-section .content,
.img-section .circle-image,
.img-section .overflow-image {
    width: 50%;
}

.img-section .overflow-image {
    position: relative;
    height: 500px;
}

.overflow-image img {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

@media(max-width: 990px) {
    
    .img-section .overflow-image {
        height: auto;
        width: 90%;
        margin: 0 auto 20px;
    }
    
    .overflow-image img {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: auto;
    }
}

.img-section h6 {
    margin: 20px 0 30px;
    color: rgba(255,255,255,.8);
}

.img-section p {
    margin: 20px 0 30px;
}


.img-section a.more-link,
.icon-box-section a.more-link {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: #86CCDD;
    display: inline-flex;
    align-items: center;
}

.circle-image {
    position: relative;
}

/*.circle-image img {*/
/*    -webkit-filter:grayscale(1);*/
/*    height: 570px;*/
/*    object-fit: cover;*/
/*    object-position: -50px;*/
/*}*/

.circle-svg {
    width: 102%;
    height: 570px;
    display: block;
}

.institution-left,
.financial-left,
.investor-left {
    -webkit-clip-path: url(#leftMask);
    clip-path: url(#leftMask);
}

.institution-right,
.financial-right,
.investor-right,
.digital-right,
.software-right {
    -webkit-clip-path: url(#rightMask);
    clip-path: url(#rightMask);
}

.institution-left, .institution-right,
.financial-left, .financial-right {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.institution-left {
    /*this link comes from @Model.FieldValue("field-banner-digital-engagement-institution-image") */
    background: url('https://dash.com.au/_medias/88e17cd3-1942-43b1-b256-4dc94f82ef6e/Digital+delivery+solutions.webp') no-repeat center center;
    background-size: cover;
}

.institution-right {
    /*this link comes from @Model.FieldValue("field-banner-stockbroking-institution-image") */
    background: url('https://dash.com.au/_medias/c452eee0-53a5-4bea-9bfd-1e0c3fd1e457/Stockbroking.webp') no-repeat center center;
    background-size: cover;
}

.digital-right {
    /*this link comes from @Model.FieldValue("field-digital-advice-image") */
    background: url('https://dash.com.au/_medias/3a2e3ed6-1f19-48db-a20f-f2262209a8ce/windows-p74ndnYWRY4-unsplash.webp') no-repeat center center;
    background-size: cover;
}

.financial-01 {
    
    /*this link comes from @Model.FieldValue("field-financial-01-image") */
    background: url('https://dash.com.au/_medias/2f362a6d-2224-4ce0-9413-b5af2d62947b/financial-01.webp') no-repeat center center;
    background-size: cover;
    
}

.financial-02 {
    /*this link comes from @Model.FieldValue("field-financial-image-02") */
    background: url('https://dash.com.au/_medias/030bde21-cf48-4978-b79c-8c93ca0b20f2/financial-02-image.webp') no-repeat center center;
    background-size: cover;
}

.financial-03 {
    /*this link comes from @Model.FieldValue("field-financial-image-03") */
    background: url('https://dash.com.au/_medias/a39036e2-e4dd-4896-9f68-ec3855525d14/charlesdeluvio-rRWiVQzLm7k-unsplash.webp') no-repeat center center;
    background-size: cover;
}

.software-right {
    
    /*this link comes from @Model.FieldValue("field-financial-planning-software-image-01")*/
    background: url('https://dash.com.au/_medias/86a12e95-bbe6-4d07-b9d1-a416b76fe0b5/software-right.webp') no-repeat center center;
    background-size: cover;
}

.investor-left {
    /*this link comes from @Model.FieldValue("field-investor-home-image-01")*/
    background: url('https://dash.com.au/_medias/39700291-1aee-4442-988d-d12d2b4909bb/d0e41992-7b38-409f-9f44-9bea0c35adcb.webp') no-repeat center center;
    background-size: cover;
}

.investor-right {
    /*this link comes from @Model.FieldValue("field-investor-home-image-02")*/
    background: url('https://dash.com.au/_medias/5fb0d078-226a-4b0c-832a-e88c0e9e604b/d0e41992-7b38-409f-9f44-9bea0c35adcb.webp') no-repeat center center;
    background-size: cover;
}

.circle-image:before {
    content: '';
    position: absolute;
    width: 102%;
    height: 100%;
    left: 0;
    bottom: 0;
    transform: rotate(-140deg);
    transform-origin: 50% 50%;
    background: linear-gradient(224deg, rgba(0, 155, 124, 0.69) 18%, rgba(134, 204, 221, 0.64) 86%);
}

.img-section .circle-image:after {
    content: '';
    position: absolute;
    background: linear-gradient(328deg, rgba(0, 0, 0, 0.30) 30%, rgba(0, 0, 0, 0.00) 80%);
    width: 102%;
    height: 100%;
    left: 0;
    bottom: -24px;
    z-index: 1;
}

@media(max-width: 1200px) {
    #leftMask path, #rightMask path {
        transform: scale(.8);
    }
    
    .circle-svg,
    .circle-image:before,
    .circle-image:after {
        width: 440px;
        height: 456px;
    }
}

@media(max-width: 990px) {
    .img-section .content,
    .img-section .circle-image {
        width: 86%;
        margin: auto;
        margin-bottom: 30px;
    }
    
    .img-section .circle-image {
        order: 1;
        z-index: 1;
    }
    
    .img-section .content {
        order: 2;
        margin-left: 0;
        z-index: 2;
    }
}

@media(max-width: 768px) {
    #leftMask path, #rightMask path {
        transform: scale(.7);
    }
    
    .img-section .circle-svg,
    .img-section .circle-image:before,
    .img-section .circle-image:after {
        width: 390px;
        height: 400px;
        bottom: 0;
    }
}


@media(max-width: 576px) {
    #leftMask path, #rightMask path {
        transform: scale(.6);
    }
    
    .img-section .circle-svg,
    .img-section .circle-image:before,
    .img-section .circle-image:after {
        width: 330px;
        height: 340px;
    }
    
    .img-section .content, 
    .img-section .circle-image {
        width: 100%;
    }
}



/*.img-section.img-left .circle-image img,*/
.img-section.img-left .circle-image:after,
.img-section.img-left .circle-image:before {
    -webkit-clip-path: url(#leftMask);
    clip-path: url(#leftMask);
}

/*.img-section.img-right .circle-image img,*/
.img-section.img-right .circle-image:after,
.img-section.img-right .circle-image:before {
    -webkit-clip-path: url(#rightMask);
    clip-path: url(#rightMask);
}

.img-section.img-left .circle-image {
    margin-right: 50px;
}

.img-section.img-right .circle-image {
    margin-left: 50px;
}

@media(max-width: 768px) {
    .img-section.img-left .circle-image,
    .img-section.img-right .circle-image {
        margin: 0 auto 20px;
    }
}

a.more-link:before {
    background: rgb(134 204 221);
    content: "";
    /*inset: 0;*/
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    height: 3px;
    z-index: -1;
    bottom: -2px;
    left: 0;
    /*width: 100%;*/
    width: calc(100% - 50px);
    display: inline-block;
}

a.more-link:hover:before {
  /*transform: scaleX(.77);*/
  transform: scaleX(1);
  transform-origin: left;
}

.img-section a.more-link:after,
.icon-box-section a.more-link:after {
    content: '\f061';
    width: 32px;
    height: 32px;
    background: #222;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    margin-left: 20px;
}


/*--- page section end ---*/


/*--- Testimonials ---*/

.testimonial {
    margin-bottom: 60px;
    padding: 60px 0 90px;
}

.testimonial h3 {
    text-align: center;
    margin-bottom: 40px;
}

.testimonial p {
    color: #fbfbfb;
    font-weight: 300;
}

.testimonial p.name {
    color: #009B7C;
    font-weight: 500;
    margin-top: 20px;
}

.testimonial .swiper {
    max-width: 1440px;
    overflow: visible;
}

.testimonial .swiper-slide:not(.swiper-slide-active) {
    filter: blur(4px);
    -webkit-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: .3;
    transition: .5s ease;
}

.testimonial .swiper-slide.swiper-slide-active {
    filter: blur(0);
    -webkit-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: .5s ease;
}

.testimonial .swiper-slide {
    position: relative; 
    width: 800px;
    height: auto;
    min-height: 300px;
    margin: 0 20px;
    padding: 60px 50px;
    background: #222;
    border-radius: 40px;
    box-shadow: 0 6px 10px rgba(0,0,0,.3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.testimonial .swiper-slide:before {
    content: '\f10e';
    position: absolute;
    bottom: 0;
    right: 40px;
    font-weight: 900;
    color: rgba(255,255,255,.03);
    font-size: 100px;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 40px;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 40px;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 30px;
    color: #fbfbfb;
}


@media(max-width: 990px) {
    .testimonial .swiper-slide {
        width: 600px;
        padding: 40px 50px;
    }
}

@media(max-width: 768px) {
    .testimonial .swiper-slide {
        width: 540px;
    }
    
    .swiper-button-next, .swiper-rtl .swiper-button-prev,
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        display: none;
    }
}

@media(max-width: 576px) {
    .testimonial .swiper-slide {
        width: 84%;
        padding: 40px 36px;
    }
    
    .testimonial .swiper-slide {
        align-items: baseline;
    }
    
    .swiper-button-next, .swiper-rtl .swiper-button-prev,
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        display: none;
    }
}

.swiper-wrapper {
    cursor: pointer;
    align-items: center;
}

.swiper-pagination {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -40px;
}

.swiper-pagination-bullet {
	background: transparent;
	border: 1px solid #007076;
	border-radius: 10px;
	display: inline-block;
	height: 10px;
	opacity: 1;
	width: 24px;
    transition: 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #009B7C;
    border: 1px solid #009B7C;
    height: 12px;
    opacity: 1;
    width: 12px;
}

/*--- Testimonials end ---*/


/*--- Animation icon section ---*/


.icon-box-section {
    display: flex;
    flex-wrap: wrap;
}

.icon-box-section .underline-title {
    width: 100%;
    padding: 0 15px;
    font-size: 20px;
    font-weight: 500;
}

.underline-title h4 {
    border-bottom: 2px solid #009B7C;
    display: inline-block;
    color: #181818;
    font-weight: 600;
}

.icon-box-section h3,
.icon-box-area .title,
.section .title {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.4;
}

.section .title {
    margin-bottom: 20px;
}

.icon-box-section .title h3,
.section .title h3 {
    margin-bottom: 16px;
}

.section .title h4 {
    color: #222;
}

.border-box {
    /*background: #181818;*/
    height: auto;
    border-radius: 30px;
    padding: 0;
    transition: .3s ease;
}

.icon-box,
.icon-box-img {
    padding: 40px 30px;  
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    outline: unset;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

@media(max-width: 990px) {
    .icon-box,
    .icon-box-img {
        padding: 40px;
    }
}

.icon-box h5,
.icon-box-img h5 {
    font-weight: 500;
}

.border-box:hover {
    box-shadow: 0 6px 10px #0d0d0d;
}

.inline-1 {
    margin: 15px 12px;
}

.rotate-box.inline-1 .front {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.rotate-box.inline-1 .front > div {
    padding: 0;
}

.rotate-box.inline-1 .rotate-btn {
    right: auto;
    left: 50px;
}

@media(max-width: 768px) {
    .rotate-box.inline-1 .rotate-btn {
        left: 30px;
    }
}


.inline-2 {
    width: calc(100% / 2 - 24px);
    margin: 15px 12px;
}

.inline-3 {
    margin: 15px 12px;
    margin-top: 30px;
    width: calc(100% / 3 - 24px);
}

@media(max-width: 1100px) {
    .inline-3 {
        width: calc(100% / 2 - 20px);
        margin: 10px;
    } 
}

@media(max-width: 990px) {
    .inline-1,
    .inline-2,
    .inline-3 {
        width: 100%;
        margin: 24px auto;
    }
    
    .rotate-box-list:first-child {
        margin-top: 0;
    }
}


@media(max-width: 768px) {
    .inline-1,
    .inline-2,
    .inline-3 {
        width: 90%;
        margin: 24px auto;
    }
}

.border-box h4 {
    font-weight: bold;
}

.border-box p {
    color: rgba(255,255,255,.8);
}

.icon-animation {
    /*margin-bottom: 30px;*/
}

.icon-animation .icon svg {
    width: 64px;
    height: 64px;
}


/* border 要額外寫，不然box 的顏色會被吃掉 */
.box-border:before { 
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    inset: 0;
    border-radius: 30px; 
    padding: 0; 
    background: linear-gradient(rgba(0, 112, 118, 0), rgba(38, 218, 182, 0), rgba(0, 112, 118, 0));
    -webkit-mask: 
        linear-gradient(#181818 0 0) content-box, 
        linear-gradient(#181818 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -1; 
    opacity: 0;
    transition: .3s ease;
}

.border-box:hover .box-border:before {
    padding: 1.8px;
    background: linear-gradient(rgba(0, 112, 118, 1), rgba(38, 218, 182, 1), rgba(0, 112, 118, 1));
    /*background: linear-gradient(rgba(0, 112, 118, 1), rgb(10 244 197),rgb(86 233 204), rgba(0, 112, 118, 1));*/
    transition: .5s ease;
    z-index: 0;
    opacity: 1;
}

/*--- icon section end ---*/

/*--- Center box ---*/

.row.center-box {
    min-height: 400px;
    max-height: 600px;
    background: #222;
    border-radius: 40px;
    display: flex;
    align-items: center;
    padding: 50px 40px;
    margin: 0 15px;
    overflow: hidden;
}

@media(max-width: 576px) {
    .row.center-box {
        padding: 40px 20px;
    }
}

.center-box .right-image {
    /*background: linear-gradient(354deg, #105f64 25%, #02373a 100%);*/
    background: #fbfbfb;
    transform: rotate(16deg) translateX(100px);
    width: 56%;   
}

.center-box .right-image img {
    /*transform: scale(.95);*/
    /*padding: 30px 0;*/
}

.center-box h5 {
    color: rgba(255,255,255, .8);
    margin: 16px 0 20px;
}

.center-box a.more-link:after {
    background: #86CCDD;
    color: #222;
}


@media(max-width: 990px) {
    .center-box .right-image {
        position: absolute;
        width: 100%;
        transform: rotate(16deg) translateX(170px);
        opacity: .1;
    }
}


/*--- Center box end---*/

/*--- About us ---*/

#about-us h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
}

.rotate-box-section p {
    text-align: center;
    color: rgba(255,255,255,.8);
}

.rotate-box-list {
    width: 100%;
    margin: 32px 0;
    display: inline-block;
}

.rotate-box {
    position: relative;
    border-radius: 40px;
    /*height: 600px;*/
    height: 480px;
    padding: 50px 40px;
    display: flex;
    align-items: flex-end;
}

@media(max-width: 990px) {
    .rotate-box {
        height: 480px;
        padding: 50px 30px;
    }
}

@media(max-width: 576px) {
    .rotate-box {
        height: 360px;
        padding: 40px 24px;
    }
} 

.rotate-box:nth-child(1),
.rotate-box:nth-child(4) {
    background: #181818;
}

.rotate-box:nth-child(2),
.rotate-box:nth-child(3) {
    background: #222;
}

@media(max-width: 1200px) {
    .rotate-box h2 {
        font-size: 36px;
    }
}

@media(max-width: 990px) {
    .rotate-box h2 {
        font-size: 30px;
    }
}

.rotate-box h4 {
    color: rgba(255,255,255,.8);
    margin: 24px 0 80px;
}

.rotate-box .rotate-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 24px;
    background: #86CCDD;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1;
}

.rotate-box.inline-1 .rotate-btn {
    background: #181818;
}

.rotate-box .rotate-btn:before {
    content: '\f061';
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 20px;
    color: #222;
    opacity: 1;
}

.rotate-box .rotate-btn:after {
    content: '\f00d';
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 20px;
    color: #009B7C;
    opacity: 0;
}

.rotate-box.open {
    background: #009B7C;
    align-items: center;
}

.rotate-box.open .rotate-btn {
    background: #fff;
}

.rotate-box .rotate-btn:hover {
    background: #009B7C;
    transform: rotate(360deg);
}

.rotate-box.open .rotate-btn:before {
    opacity: 0;
}

.rotate-box.open .rotate-btn:after {
    opacity: 1;
}

.rotate-box.open .rotate-btn:hover {
    background: #fff;
    transform: rotate(360deg);
}

.rotate-box:not(.open) .back {
    opacity: 0;
    z-index: -1;
    display: none;
}

.rotate-box.open .front {
    opacity: 0;
    z-index: -1;
    display: none;
}

.rotate-box .back {
    width: 100%;
    opacity: 1;
    display: block;
    z-index: 1;
}

#about-us .rotate-box .back h3,
#about-us .rotate-box .back p {
    text-align: left;
}

/* ----- Member -----*/

.team-section {
    display: flex;
    flex-wrap: wrap;
}

.team-section h4 {
    width: 100%;
    text-align: center;
    color: #fbfbfb;
}

.team-section h4 > span {
    font-weight: bold;
    color: #009B7C;
}

.team {
    margin-bottom: 80px !important;
}

.team h3 {
    font-weight: 600;
    margin-bottom: 60px;
}

.member-list {
    display: inline-block;
}

.member {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px 0;
    background: transparent;
    border: 0;
    outline: unset;
}

.member > div {
    width: 100%;
}

.member:hover,
.member:active,
.member:focus {
    color: #fbfbfb;
}

.member .member-photo {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    overflow: hidden;
    background: #181818;
}

@media(max-width: 990px) {
    .member .member-photo {
        width: 260px;
        height: 260px;
    }
}

.member-photo:before {
    content: 'Read More';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 24, .8);
    /*-webkit-filter: blur(1px);*/
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: .3s ease;
}

.member:hover .member-photo:before {
    opacity: 1;
    transition: .3s ease;
}

.member .member-photo img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
}

.member .member-name h5 {
    width: 100%;
    text-align: center;
    font-weight: 500;
    margin: 10px auto;
}

.member .member-title p {
    text-align: center;
    font-weight: 300;
    color: rgba(255,255,255,.8);
}

/* member popup*/

.lity-content {
    position: relative;
    max-width: 900px;
    margin: auto;
}

@media(max-width: 990px) {
    .lity-content {
        max-width: none;
        width: 80%;
        
    }
}

.lity-close {
    position: absolute;
    top: -10px;
    right: -40px;
}

@media(max-width: 990px) {
    .lity-close {
        top: -30px;
        right: 60px;
    }
}

@media(max-width: 576px) {
    .lity-close {
        top: -20px;
        right: 10px;
    }
}

.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
    opacity: .6;
    transition: .3s ease;
}


.lity-close:active {
    top: -10px;
}

.memberwrap {
    margin: auto;
}

.memberdetail {
    position: relative;
    margin: auto;
    background: #fbfbfb;
    border-radius: 40px;
    color: #222;
    transition: .3s ease;
}

.memberdetail .row {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
}

@media(max-width: 990px) {
    .memberdetail .row {
        height: 70vh;
    }
}

.memberdetail .row:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 33%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    background: #054346;
    border-radius: 40px 0 0 40px;
}

@media(max-width: 990px) {
    .memberdetail .row:after {
        top: 0;
        bottom: unset;
        width: 100%;
        height: 40%;
        border-radius: 40px 40px 0 0 ;
        clip-path: polygon(0 0, 100% 0%, 100% 76%, 0 100%);
    }
}

.memberdetail .profile {
    overflow-y: auto;
    padding: 40px;
    max-height: 500px;
}

@media(max-width: 990px) {
    .memberdetail .profile {
        max-height: 35vh;
        padding: 10px 40px 40px;
        margin: 10px 0;
    }
}

@media(max-width: 990px) {
    .memberdetail .profile {
        padding: 10px 30px 30px;
    }
}

.memberdetail .profile .name {
    width: 100%;
    /*height: 40px;*/
    display: flex;
    justify-content: space-between;
}

.memberdetail .profile h3 {
    color: #181818;
    margin: 0;
}

.memberdetail .linkedin {
    border: 1px solid #007076;
    color: #007076;
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
}

.memberdetail  .linkedin:before {
    content: '\f0e1';
    font-weight: 400;
    display: inline-block;
    margin-right: 6px;
    color: #007076;
}

.memberdetail .linkedin:hover {
    background: #007076;
    color: #fff;
}

.memberdetail .linkedin:hover:before {
    color: #fff;
}

.memberdetail .profile .title {
    margin: 24px 0;
    color: #007076;
    font-weight: 600;
}

.profile .detail-content {
    margin-bottom: 30px;
    /*max-height: 400px;*/
    /*overflow-y: auto;*/
}

.profile .detail-content p {
    color: #222;
    /*font-size: 14px;*/
}

.profile .contact {
    width: 100%;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
    display: block;
}

.profile .contact:before {
    content: '';
    margin-right: 8px;
    font-weight: 900;
    color: inherit;
    display: inline-block;
}

.profile .contact a {
    color: #009B7C;
}

.profile .contact.email:before {
    content: '\f0e0';
}

.profile .contact.phone:before {
    content: '\f879';
}

.profile .contact.chat:before {
    content: '\f086';
}

.memberdetail .headshot {
    position: relative;
    right: 16px;
    bottom: 14px;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    border-radius: 40px 0 0 40px;
    padding: 0;
    display: flex;
    align-items: end;
    background: linear-gradient(180deg, #004145 0%, #009B7C 100%);
    z-index: 1;
    overflow: hidden;
}

@media(max-width: 990px) {
    .memberdetail .headshot {
        width: 100%;
        height: 40%;
        bottom: 20px;
        clip-path: polygon(0 0, 100% 0%, 100% 76%, 0 100%);
        border-radius: 40px 40px 0 0;
    }
}

@media(max-width: 414px) {
    .memberdetail .headshot {
        right: 10px;
        bottom: 14px;
    }
}

.memberdetail .headshot:before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50px;
    width: 200px;
    height: 400px;
    transform: rotate(18deg);
    background: linear-gradient(181deg, rgba(0, 155, 124, 0.20) 0.87%, rgba(0, 155, 124, 0.00) 90.16%);
    transition: .3s ease;
}

.memberdetail .headshot:after {
    content: '';
    position: absolute;
    top: 0;
    left: 230px;
    width: 300px;
    height: 400px;
    transform: rotate(18deg);
    background: linear-gradient(181deg, rgb(0 208 167 / 20%) 0.87%, rgba(0, 155, 124, 0.00) 90.16%);
    transition: .3s ease;
}

@media(max-width: 990px) {
    .memberdetail .headshot:before {
        left: 30px;
    }
    
    .memberdetail .headshot:after {
        top: -100px;
        left: 210px;
        width: 400px;
        height: 300px;
    }
}

.memberdetail .headshot img {
    height: 80%;
    object-position: -80px;
    z-index: 1;
}

#member23 .memberdetail .headshot img,
#member24 .memberdetail .headshot img {
    object-position: -40px;
}

@media(max-width: 990px) {
    .memberdetail .headshot img,
    #member23 .memberdetail .headshot img,
    #member24 .memberdetail .headshot img {
        position: absolute;
        height: 100%;
        left: 40px;
        object-position: unset;
    }
}


.inline3-team {
    max-width: 860px;
    margin: auto;
}

.client-success .member-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*--- About us end ---*/


/*--- Insights ---*/

.insight {
    margin-bottom: 60px;
    padding: 60px 0 90px;
}

@media(max-width: 576px) {
    .insight {
        padding: 40px 16px 90px;
    }
}

.insight .center-box {
    position: relative;
    width: 800px;
    height: auto;
    min-height: 300px;
    margin: 40px auto 0;
    padding: 60px 50px;
    background: #fbfbfb;
    border-radius: 40px;
    box-shadow: 0 6px 10px rgba(0,0,0,.3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

@media(max-width: 990px) {
    .insight .center-box {
        width: 90%;
    }
}

@media(max-width: 576px) {
    .insight .center-box {
        padding: 40px 30px;    
    }
}

.insight h3 a.underline {
    /*border-bottom: 1px solid #222;*/
    color: #009B7C;
}

.insight .center-box h4 {
    text-align: center;
    color: #007076;
}

.insight .center-box .more-link {
    color: #007076;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.insight .center-box .more-link:hover {
    font-weight: 600;
    color: #009B7C;
}

.insight .center-box .more-link:before {
    width: calc(100% - 24%);
}

.insight .center-box .more-link:after {
    content: '\f061';
    width: 18px;
    height: 18px;
    font-weight: 900;
    text-align: center;
    color: #fff ;
    background: #007076;
    margin-left: 8px;
    border-radius: 40px;
    font-size: 10px;
    flex-wrap: wrap;
    display: inline-flex;
    align-content: center;
    justify-content: center;
}

#cast-show-list {
    width: 100%;
    display: inline-block;
}

#searchLoadingImg {
    display: block;
    text-align: center;
}

.news-box {
    margin-bottom: 60px;
}

.post-content {
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    transition: .3s ease;
}

.post-content:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    transition: .3s ease;
}

.preview-image {
    height: 100%;
}

.preview-image img {
    width: 100%;
    height: 258px;
}


.post-title a {
    font-weight: 600;
    position: relative;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    height: 78px;
    font-size: 18px;
    margin-bottom: 16px;
}

@media(max-width: 768px) {
    .post-title a {
        height: auto;
        margin-bottom: 24px;
    }
    
    .preview-image img {
        height: auto;
    } 
}

.post-title a span {
    background: 
		linear-gradient(to right, rgba(255,255,255, 0), rgba(100, 200, 200,0)),
		linear-gradient(to right, rgba(255,255,255, 1), rgba(255,255,255, 1));
	background-size: 100% 0.1em, 0 0.1em;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
	transition: background-size .6s;
}

.post-title a:hover {
    color: #fbfbfb;
}

.post-title a:hover span {
    background-size: 0 0.1em, 100% 0.1em;
}

.post-date {
    font-size: 12px;
    font-weight: 300;
    padding: 4px 10px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.07);
    display: inline-block;
}

.post-content {
    display: flex;
    flex-wrap: wrap;
    background: #181818;
    border-radius: 20px;
}

.post-content > a {
    width: 100%;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.preview-content-all {
    padding: 20px 20px 30px;
}

.preview-content {
    color: rgba(255,255,255,.8);
    margin-bottom: 24px;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    /*min-height: 120px;*/
}

@media(max-width: 768px) {
    .post-area {
        width: 80%;
        margin: auto;
    }
    
    .preview-content {
        min-height: unset;
    }
}


#insights .post-area:nth-child(2) .news-box,
#campaign .post-area:nth-child(2) .news-box {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}

#insights .post-area:nth-child(2) .preview-image img,
#campaign .post-area:nth-child(2) .preview-image img{
    height: 100%;
}

#insights .post-area:nth-child(2) .post-content > a,
#campaign .post-area:nth-child(2) .post-content > a{
    border-radius: 0 40px 40px 0;
    overflow: hidden;
    margin-right: 40px;
}

#insights .post-area:nth-child(2) .post-title a,
#campaign .post-area:nth-child(2) .post-title a{
    font-size: 24px;
    margin: 0 0 16px;
    height: 100%;
}

#insights .post-area:nth-child(2) .post-content,
#campaign .post-area:nth-child(2) .post-content {
    flex-wrap: unset;
    align-items: center;
    background: transparent;
}

#insights .post-area:nth-child(2) .preview-content-all,
#campaign .post-area:nth-child(2) .preview-content-all {
    max-width: 500px;
}

@media(max-width: 990px) {
    
    #insights .post-area:nth-child(2) .post-content > a,
    #campaign .post-area:nth-child(2) .post-content > a {
        margin-right: 20px;    
    }
    
    #insights .post-area:nth-child(2) .preview-content-all,
    #campaign .post-area:nth-child(2) .preview-content-all {
        max-width: 42%;
    }
    
    #insights .post-area:nth-child(2) .post-title a,
    #campaign .post-area:nth-child(2) .post-title a {
        font-size: 20px;
    }
}

@media(max-width: 768px) {
    #insights .post-area:nth-child(2) .post-content,
    #campaign .post-area:nth-child(2) .post-content {
        flex-wrap: wrap;  
        background: #181818;
    }
    
    #insights .post-area:nth-child(2) .post-content > a,
    #campaign .post-area:nth-child(2) .post-content > a {
        margin: auto;    
        border-radius: 20px 20px 0 0;
    }
    
    #insights .post-area:nth-child(2) .preview-content-all,
    #campaign .post-area:nth-child(2) .preview-content-all {
        max-width: 100%;
    }
}

/*---- Article content ----*/

.article-info {
    margin-top: 60px;
}

.article-info .back-btn {
    text-align: left;
}


.article-info .back-btn i {
    font-size: 14px;
    margin-right: 10px;
    transform: translateX(0);
    transition: .2s ease;
}

.article-info .back-btn a:hover {
    color: #86CCDD;
} 

.article-info .back-btn a:hover i {
    transform: translateX(-4px);
    transition: .2s ease;
}

.article-info .date {
    text-align: center;
    color: rgba(255,255,255,.8);
}

#article-section {
    margin: 40px auto 80px;
}

.article-area {
    max-width: 86%;
    margin: auto;
}

@media(max-width: 990px) {
    .article-area {
        max-width: 90%;
    }
}

.article-area h3 {
    text-align: center;
    max-width: 720px;
    margin: auto;
    margin-bottom: 40px;
}

.article-area p,
.article-area li {
    margin-bottom: 1em;
}

.article-area img {
    max-width: 100%;
    object-fit: cover;
}

.article-area ol,
.article-area ul {
    padding-left: 24px;
}

.preview-content a,
.article-area a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}

.preview-content a:hover,
.article-area a:hover {
    color: #009B7C;
}

/*---- article content end ----*/

/*--- insights end ---*/


/*--- map ----*/

.general-contact {
    padding-top: 0;
    margin-top:  0;
}

.general-contact .contact-bg {
    transform: translateY(-55%);
}

@media(max-width: 990px) {
    .general-contact .contact-bg {
        transform: translateY(0);
    }
}

.general-contact i {
    margin-right: 10px;
    color: #fbfbfb;
}

.general-contact .detail-list {
    margin-bottom: 30px;
}

@media(max-width: 990px) {
    .general-contact .detail-list {
        width: 100%;
        margin: 16px 10px;
    }
}

.general-contact .detail-list:last-child {
    margin-bottom: 0;
}

.chat-box {
    border-radius: 20px;
    padding: 20px 30px 36px;
    background: #222;
    border: 1px solid #fbfbfb;
    margin: -60px auto 40px;
}

@media(max-width: 990px) {
    .chat-box {
        margin-bottom: 10px;
    }
}

.chat-box .icon svg {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    float: left;
}

.chat-box .icon svg .border {
    fill: #fbfbfb;
}

.chat-box h4 {
    font-weight: 600;
    margin-bottom: 20px
}

.chat-box p {
    margin: 16px 0;
}

.chat-box .circle-btn {
    border-radius: 100px;
    border: 0;
    color: #222;
    margin-top: 10px;
    background: #86CCDD;
    padding: 12px 24px;
}

.chat-box .circle-btn:hover {
    background: #009B7C;
    color: #fbfbfb;
}



/*--- Center slide ---*/

.center-slide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.center-slide > div {
    margin-bottom: 20px;
}

@media(max-width: 990px) {
    .center-slide .text-box {
        order: 2;
    }
    
    .center-slide .img-box {
        order: 1;
        margin-bottom: 40px;
    }
}

.center-slide-section {
    position: relative;
    width: 100%;
    background: #fbfbfb;
    border-radius: 40px;
    padding: 50px 40px 70px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

@media(max-width: 990px) {
    .center-slide-section {
        padding: 50px 40px 50px !important;
    }
}

@media(max-width: 768px) {
    .center-slide-section {
        width: 90%;
        margin: auto;
    }
}

@media(max-width: 576px) {
    .center-slide-section {
        padding: 30px 20px 50px !important;
    }
}

.center-slide-section h3 {
    margin-bottom: 30px;
}

.center-slide-section ul {
    list-style-type: none;
    padding-left: 15px;
}

.center-slide-section li {
    margin-left: 8px;
    margin-bottom: 16px;
    text-indent: -10px;
}

.center-slide-section li:before {
    content: '\f111';
    font-weight: 900;
    display: inline-block;
    margin-right: 10px;
    font-size: 8px;
    vertical-align: middle;
    color: #007076;
}

.center-slide-section .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
    transition: .3s ease-out;
}

.control-btn {
    position: relative;
    padding-top: 20px;
    display: flex;
}

.control-btn .swiper-button-next,
.control-btn .swiper-button-prev {
    position: relative;
    width: 36px;
    height: 36px;
    background: #009B7C;
    border-radius: 10px;
    padding: 10px;
    margin-right: 10px;
    right: unset;
    left: unset;
    text-align: center;
}

.control-btn .swiper-button-next {
    margin-right: 0;
}

.control-btn .swiper-button-next:after, .control-btn .swiper-button-prev:after {
    content: '\f061';
    font-size: 14px;
    font-weight: 900;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
}

.control-btn .swiper-button-prev:after {
    transform: rotate(180deg);
}

@media(max-width: 576px) {
    .control-btn .swiper-button-next,
    .control-btn .swiper-button-prev {
        display: flex;
        width: 44px;
        height: 44px;
    }
}


/*---- img slide ----*/

.img-slide-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.img-slide-section h3 {
    max-width: 300px;
    margin-bottom: 24px;
}

@media(max-width: 990px) {
    .img-slide-section h3 {
        max-width: 100%;
        text-align: left;
    }
}

.img-slide {
    position: relative;
    background: #fbfbfb;
    border-radius: 40px;
    padding: 50px 40px 30px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

@media(max-width: 990px) {
    .img-slide {
        width: 90%;
        margin: 20px auto;
    }
}

.img-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.img-content img {
    height: 480px;
    object-fit: cover;
}

.img-content p {
    max-width: 360px;
    text-align: center;
}

@media(max-width: 990px) {
    .img-content p {
        max-width: 100%;
    }
} 

.img-slide .control-btn {
    margin: 20px 0;
    justify-content: center;
}

.model-manager-section h3 {
    margin-bottom: 24px;
}

.model-managers-logo,
.mda-logo {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    margin-top: 30px;
}

.model-managers-logo img {
    max-height: 70px;
    margin: 16px;
    width: calc(100% / 5 - 32px);
    object-fit: contain;
}

.mda-logo img {
    max-height: 70px;
    margin: 16px;
    width: calc(100% / 6 - 32px);
    object-fit: contain;
}

@media(max-width: 990px) {
    .model-managers-logo img,
    .mda-logo img {
        width: calc(100% / 4 - 32px);
    }
}

@media(max-width: 768px) {
    .model-managers-logo img,
    .mda-logo img {
        width: calc(100% / 3 - 32px);
    }
} 


/* POP up*/

.pop-detail {
    background: #222;
    border-radius: 30px;
    padding: 40px 60px;
}

.pop-detail h4 {
    font-weight: 600;
    margin-bottom: 20px;
}

.pop-detail a {
    color: #009B7C;
    text-decoration: underline;
}

.pop-detail a:hover {
    font-weight: 600;
}

.pop-detail u {
    font-weight: 500;
}

@media(max-width: 990px) {
    .pop-detail .row {
        max-height: 600px;
        overflow: auto;
    }
}

.anim-value-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.anim-value-section .row {
    display: flex;
    flex-wrap: wrap;
}

.anim-value {
    margin: 20px 0;
}

.anim-value-box {
    background: rgba(255,255,255,.4);
    padding: 32px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    border-radius: 30px;
    height: 100%;
}

.anim-value-box .num {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: #009B7C;
}

.anim-value-box .num .value {
    font-size: 90px;
    font-weight: 600;
}

.anim-value-box .num span {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    
}

.anim-value-box h6 {
    text-align: center;
    font-weight: 600;
    color: #007076;
    margin-bottom: 24px;
}

.anim-value-box p {
    color: #181818;
}


/*---- Doc Accordion ----*/

.document-panel .container {
    max-width: 80%;
    margin: auto;
}

@media(max-width: 1100px) {
    .document-panel .container {
        max-width: 90%;
    } 
}

.card .list-header .mb-0 {
    margin-bottom: 10px;
}

.card .list-header .btn-link {
    border-bottom: 1px solid #d1d1d1;
    width: 100%;
    text-align: left;
    font-weight: 500;
    padding: 10px 0 20px;
    color: #222;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card .list-header .btn-link:after {
    content: '\f078';
    font-weight: 600;
    font-size: 16px;
}

.card .list-header .btn-link:not(.collapsed):after {
    content: '\f078';
    font-weight: 600;
    font-size: 16px;
    transform: rotate(180deg);
}

.card .list-header .btn-link:hover,
.card .list-header .btn-link:not(.collapsed) {
    color: #007076;
}

.card .list-header .btn-link:not(.collapsed) {
    font-weight: 600;
}

.pdf-list ul {
    list-style-type: none;
    padding-left: 0;
}

.pdf-list li {
    display: flex;
    align-items: baseline;
    margin-right: 16px;
    margin-bottom: 10px;
    border-bottom: 0;
    padding: 10px 0;
}

.accordion .pdf-list li {
    border-bottom: 1px solid #ddd;
    padding: 10px 10px 15px;
}

.pdf-list ul li:before {
    content: '\f15c';
    font-size: 18px;
    margin-right: 10px;
}


/*--- Footer content Theme*/

.footer-terms h3 {
    margin-top: 40px;
}

.footer-terms h4 {
    margin-top: 40px;
    color: #181818;
    display: block;
    font-weight: 600;
}

.footer-terms h5,
.footer-terms h6 {
    font-weight: 600;
    margin-top: 30px;
}

.footer-terms .list {
    margin: 20px 0;
    list-style-type: none;
}

.footer-terms .list li,
.pop-detail li {
    margin-bottom: 10px;
    text-indent: -10px;
}

.footer-terms .list li a,
.footer-terms p a,
.pop-detail li a {
    display: inline-block;
    text-indent: 0;
    text-decoration: underline;
    font-weight: 500;
}

.footer-terms .list ul li, 
.pop-detail ul li {
    list-style-type: none;
}

.footer-terms .list li:before,
.pop-detail li:before {
    content: '\f111';
    font-weight: 900;
    display: inline-block;
    margin-right: 10px;
    font-size: 8px;
    vertical-align: middle;
    color: #007076;
}

.footer-terms .footer-contact a {
    text-decoration: none;
}

.footer-terms .header-top {
    display: none;
}

.no-menu .header-top,
.no-menu .menu-icon,
.no-menu .menu {
    display: none !important;
}

/*------- Term of use List -------*/

.list-all {
    counter-reset: num 1;
}

.list-all ul {
    padding-left: 0;
    list-style-type: none;
}

.sub h5 {
    margin: 30px 0 10px;
}

.sub h5:before {
    content: counters(num, ".") ". "; 
    counter-increment: num;
    display: inline;
}

.sub a {
    text-indent: 0;
    color: #009B7C;
    text-decoration: underline;
}

.list-all .sub-list {
    counter-reset: num;
    margin-left: 25px;
    padding-left: 20px;
}


.sub-list li {
    text-indent: -25px;
    margin-bottom: 16px;
}

.sub-list li:before {
    content:counters(num, ".") "  ";
    counter-increment: num; 
}

.sub-list-child, .sub-list-child-list, .list-all p {
    margin: 10px 0;
    margin-left: 15px;
}

.sub-list-child li {
    list-style-type: lower-alpha;
    text-indent: 0;
}

.sub-list-child li:before,
.sub-list-child-list li:before {
    display: none;
    
}

.sub-list-child-list li {
    list-style-type: lower-roman;
}

/* footer theme end*/


/*--- vendor logos ---*/

.vendor-logo-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 30px 0 10px;
}

@media(max-width: 990px) {
    .vendor-logo-box {
        height: 290px;
        overflow: auto;
    }
}

@media(max-width: 768px) {
    .vendor-logo-box {
        height: 160px;
        overflow: auto;
        margin-top: 20px;
    }
}

.vendor-logo-box .v-logo {
    margin: 16px 12px;
    background: #fff;
}

.vendor-logo-box .v-logo a:hover {
    background: rgb(0 155 124 / 10%);
}

.vendor-logo-box .v-logo img {
    max-height: 80px;
    max-width: 200px;
    object-fit: cover;
}

@media(max-width: 576px) {
    .vendor-logo-box .v-logo img {
        max-height: 100%;
        max-width: 100%;
    }
}

/*-- end --*/



/*--- capabilities flow ---*/

.capabilities h4 {
    text-align: center;
    color: #222;
}

.capabilities h4 a {
    font-weight: 600;
}

.capabilities-flow {
    background: #fff;
    color: #222;
    font-weight: 600;
    margin-top: 20px;
    padding: 40px 16px 140px;
    border-radius: 40px;
}

.capabilities-flow .row {
    display: flex;
    justify-content: center;
}

.capabilities-flow h4 {
    text-align: center;
    font-weight: 600;
    color: #181818;
    border-bottom: 2px solid #009B7C;
    display: inline-block;
}

@media(max-width: 768px) {
    .capabilities-flow h4 {
        border: 0;
    }
}

.capabilities-flow .capabilities-flow-chart {
    position: relative;
    padding: 40px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
}

@media(max-width: 990px) {
    .capabilities-flow .capabilities-flow-chart {
        justify-content: right;
    }
}

.capabilities-flow .col-md-2 {
    width: calc(100% / 8);
}

.capabilities-flow .grey-cap-bg .col-md-3 {
    width: calc(100% / 5);
}


@media(max-width: 990px) {
    .capabilities-flow {
        padding: 40px 16px 20px;
    }
    
    .capabilities-flow .col-md-2, .capabilities-flow .grey-cap-bg .col-md-3{
        width: 100%;
    }
    
    .capabilities-flow .capabilities-flow-chart {
        padding-top: 20px;
    }
}

.capabilities-flow .grey-cap-bg {
    position: relative;
    width: 60%;
    /*background: #e5e8ed;*/
    border: 3px #87cdde solid;
    border-radius: 16px;
    padding: 57px 0 0;
    margin: -60px 0 0;
}

.capabilities-flow .blue-cap-bg,
.capabilities-flow .white-cap-bg {
    position: relative;
    border-radius: 16px;
    /*border: 8px solid #fff;*/
    height: 300px;
}

.capabilities-flow .flow-chart-03 .blue-cap-bg {
    height: 100%;
    padding: 50px 20px;
}

.capabilities-flow .flow-chart-03 .blue-cap-bg:before,
.capabilities-flow .flow-chart-03 .blue-cap-bg:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 90px;
    background: #009B7C;
    top: 100%;
}

.capabilities-flow .flow-chart-03 .blue-cap-bg:before {
    left: 60px;
}

.capabilities-flow .flow-chart-03 .blue-cap-bg:after {
    right: 60px;
}

@media(max-width: 990px) {
    .capabilities-flow .blue-cap-bg, .capabilities-flow .white-cap-bg {
        width: 60%;
        height: auto;
    }
    
    .capabilities-flow .flow-chart-03 .blue-cap-bg:before,
    .capabilities-flow .flow-chart-03 .blue-cap-bg:after {
        width: 141px;
        height: 2px;
        right: 100%;
        left: auto;
    }
    
    .capabilities-flow .flow-chart-03 .blue-cap-bg:before {
        top: 60px;
    }
    
    .capabilities-flow .flow-chart-03 .blue-cap-bg:after {
        top: auto;
        bottom: 60px;
    }
}

@media(max-width: 768px) {
    .capabilities-flow .blue-cap-bg, .capabilities-flow .white-cap-bg {
        width: 70%;
    }
    
    .capabilities-flow .flow-chart-03 .blue-cap-bg:before,
    .capabilities-flow .flow-chart-03 .blue-cap-bg:after {
        width: 120px;
    }
}

@media(max-width: 520px) {
    .capabilities-flow .blue-cap-bg, .capabilities-flow .white-cap-bg {
        width: 60%;
    }
    
    .capabilities-flow .flow-chart-03 .blue-cap-bg:before, 
    .capabilities-flow .flow-chart-03 .blue-cap-bg:after {
        width: 41%;
    }
}

.capabilities-flow .blue-cap-bg {
    background: #87cdde;
    padding: 100px 20px 30px;
    z-index: 1;
}

.capabilities-flow .white-cap-bg {
    background: #fff;
    padding: 100px 0 30px;
}

@media(max-width: 990px) {
    .capabilities-flow .blue-cap-bg,
    .capabilities-flow .white-cap-bg {
        padding: 30px 20px;
    }
    
}

@media(max-width: 768px) {
    .capabilities-flow .blue-cap-bg,
    .capabilities-flow .white-cap-bg {
        padding: 40px 10px 0;
    }
}

@media(max-width: 520px) {
    .capabilities-flow .blue-cap-bg,
    .capabilities-flow .white-cap-bg {
        padding: 60px 10px 20px;
    }
}

.capabilities-flow .blue-bg-text {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}


@media(max-width: 990px) {
    .capabilities-flow .grey-cap-bg {
        margin-bottom: 20px;
        margin-top: -50px;
    }
    
    .capabilities-flow .blue-bg-text {
        font-size: 20px;
    }
}

@media(max-width: 768px) {
    .capabilities-flow .grey-cap-bg {
        width: 80%;
    }
}

@media(max-width: 414px) {
    .capabilities-flow .grey-cap-bg {
        width: 90%;
    }
    
    .capabilities-flow .blue-bg-text {
        font-size: 16px;
    }
}

.capabilities-flow .grey-cap-bg:before {
    content: 'Advice Marketplace';
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 18px;
}

@media(max-width: 768px) {
    .capabilities-flow .grey-cap-bg:before {
        width: 40%;
        text-align: left;
        font-size: 16px;
        top: 16px;
    }
}

.capabilities-icon {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 2;
}

.capabilities-icon p {
    width: 100%;
    text-align: center;
    font-size: 17px;
    line-height: 1.2em;
}

.client-data-flow-chart .capabilities-icon p {
    font-size: 13px;
}

@media(max-width: 1200px) {
    .capabilities-icon p {
        font-size: 16px;
    }
}

@media(max-width: 1024px) {
    .client-data-flow-chart .capabilities-icon p {
        font-size: 13px;
    } 
}

@media(max-width: 990px) {
    .capabilities-icon {
        margin-top: 10px;
        /*margin-bottom: 20px;*/
        flex-direction: row;
        align-items: center;
        justify-content: left
    }
    
    .capabilities-flow .white-cap-bg .capabilities-icon {
        margin-bottom: 20px;
    }
    
    .capabilities-icon p {
        width: auto;
        margin-left: 20px;
        text-align: left;
    }
}

@media(max-width: 768px) {
    .capabilities-icon p {
        width: calc(100% - 100px);
    }
}

@media(max-width: 520px) {
    .capabilities-icon {
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .white-cap-bg .capabilities-icon {
        margin-bottom: 40px;
    }
    
    .capabilities-icon p {
        width: 100%;
        text-align: center;
        margin: auto;
    }
    
    .capabilities-flow .white-cap-bg .capabilities-icon {
        margin-bottom: 50px;
    }
}

.capabilities-icon span {
    font-style: italic;
    font-size: 14px;
    font-weight: 600;
}

.capabilities-icon img {
    position: relative;
    width: 80px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 100rem;
}

@media(max-width: 1200px) {
    .capabilities-icon img {
        width: 80px;
        margin-bottom: 10px;
    }
}

.client-data-flow-chart .capabilities-icon img {
    width: 60px;
    margin-bottom: 10px;
}

.capabilities-icon:after {
    content: '';
    width: 36px;
    height: 4px;
    background: #222;
    position: absolute;
    top: 40px;
    right: -18px;
    display: none;
    z-index: 1;
}

@media(max-width: 1200px) {
    .capabilities-icon:after {
        width: 20px;
        top: 40px;
        right: -10px;
    }
}

@media(max-width: 990px) {
    .capabilities-icon:after {
        display: none;
    }
    
    .capabilities-flow .col-md-2:last-child .capabilities-icon p:after {
        display: none;
    }
}

.capabilities-flow .col-md-2:last-child .capabilities-icon:after {
    display: none;
}

.capabilities-flow .cap-text {
    position: absolute;
    width: 280px;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 700;
}

.capabilities-flow .cap-text p {
    position: relative;
    margin: 0;
    padding: 16px 10px;
    background: #fff;
    border: 3px solid #88cdde;
    border-radius: 16px;
    z-index: 1;
}

@media(max-width: 990px) {
    .capabilities-flow .cap-text {
        width: 50%;
        height: 76%;
        left: -60%;
        bottom: auto;
        transform: translate(0);
    }
    
    .capabilities-flow .cap-text p {
        font-size: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .capabilities-flow .flow-chart-02 .cap-text p {
        top: auto;
        bottom: 12%;
    }
}

@media(max-width: 768px) {
    .capabilities-flow .cap-text {
        width: 37%;
        height: 80%;
        left: -40%;
        bottom: auto;
    }
}

@media(max-width: 576px) {
    .capabilities-flow .cap-text {
        width: 110px;
        left: -36%;
    }
}

@media(max-width: 520px) {
    .capabilities-flow .cap-text {
        width: 70%;
        left: -68%;
    }
}

.capabilities-flow .cap-text:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 62px);
    background: #009B7C;
}

@media(max-width: 990px) {
    .capabilities-flow .cap-text:before {
        width: 58%;
        height: 2px;
        bottom: 50%;
        left: 100%;
        transform: translate(0, -50%);
    }
}

@media(max-width: 768px) {
    .capabilities-flow .cap-text:before {
        width: 50%;
    }
}

@media(max-width: 576px) {
    .capabilities-flow .cap-text:before {
        width: 70%;
    }
}

.capabilities-flow .flow-chart-02 .cap-text {
    left: 64%;
    width: 220px;
}

.capabilities-flow .flow-chart-02 .cap-text:before {
    height: calc(100% + 100px);
}

.capabilities-flow .flow-chart-02 .cap-text:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translate(-50%, -50%);
    width: 540px;
    height: 2px;
    background: #009B7C;
    z-index: 0;
}

@media(max-width: 1200px) {
    .capabilities-flow .flow-chart-02 .cap-text:after {
        width: 460px;
        left: 20px;
    }
}

@media(max-width: 990px) {
    .capabilities-flow .flow-chart-02 .cap-text {
        left: 40px;
        width: 25%;
        height: 100%;
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:after {
        width: 2px;
        height: 53.5%;
        left: 50%;
        bottom: 50%;
        transform: translateY(-31%);
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:before {
        height: 2px;
        bottom: 13%;
        width: 220px;
        left: 50%;
    }
}

@media(max-width: 768px) {
    .capabilities-flow .flow-chart-02 .cap-text {
        left: 3%;
    }
    
    .capabilities-flow .flow-chart-02 .cap-text p {
        bottom: 20%;
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:after {
        height: 48.5%;
        transform: translateY(-34%);
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:before {
        width: 100%;
        bottom: 33%;
    }
}

@media(max-width: 576px) {
    .capabilities-flow .flow-chart-02 .cap-text {
        left: 3%;
        width: 26%;
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:before {
        width: 69%;
        left: 93%;
    }
}

@media(max-width: 520px) {
    .capabilities-flow .flow-chart-02 .cap-text {
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:before {
        width: 150%;
        left: 100%;
    }
    
    .capabilities-flow .flow-chart-02 .cap-text:after {
        height: 50%;
        transform: translateY(-37%);
    }
    
    .capabilities-flow .flow-chart-02 .cap-text p {
        bottom: 24%;
    }
}

.capabilities-flow .flow-line {
    position: relative;
}

.capabilities-flow .white-cap-bg .flow-line:before,
.capabilities-flow .blue-cap-bg.flow-line:before {
    content: '';
    position: absolute;
    width: calc(100% - 80px);
    height: 2px;
    background: #009B7C;
    z-index: 1;
}

.capabilities-flow .white-cap-bg .flow-line:before {
    top: 40px;
    left: calc(100% / 2 + 40px);
    /*transform: translateY(-50%);*/
}

@media(max-width: 990px) {
    .capabilities-flow .white-cap-bg .flow-line:before,
    .capabilities-flow .blue-cap-bg.flow-line:before {
        width: 2px;
        height: calc(100% - 80px);
    }

    .capabilities-flow .white-cap-bg .flow-line:before {
        left: 55px;
        top: calc(100% / 2 + 30px);
    }
}

@media(max-width: 576px) {
    .capabilities-flow .white-cap-bg .flow-line:before, 
    .capabilities-flow .blue-cap-bg.flow-line:before {
        height: 30%;
    }
    
}

@media(max-width: 520px) {
    .capabilities-flow .white-cap-bg .flow-line:before {
        top: calc(100% / 2 + 50px);
        left: 50%;
    }
    
}

.capabilities-flow .flow-chart-02 .white-cap-bg .flow-line:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 252px;
    top: 40px;
    left: calc(100% / 2 + 74px);
    background: #009B7C;
}

@media(max-width: 990px) {
    .capabilities-flow .flow-chart-02 .white-cap-bg .flow-line:after {
        width: 235px;
        height: 2px;
        left: -179px;
        top: 110px;
    }
}

@media(max-width: 768px) {
    .capabilities-flow .flow-chart-02 .white-cap-bg .flow-line:after {
        width: 39%;
        left: -26%;
    }
}

@media(max-width: 576px) {
    .capabilities-flow .flow-chart-02 .white-cap-bg .flow-line:after {
        width: 47%;
        left: -29%;
        top: auto;
        bottom: 6%;
    }
}

@media(max-width: 520px) {
    .capabilities-flow .flow-chart-02 .white-cap-bg .flow-line:after {
        width: 108%;
        left: -57%;
        top: auto;
        bottom: 7%;
    }
}


.capabilities-flow .blue-cap-bg.flow-line:before {
    width: 80px;
    top: 48%;
    left: 100%;
    transform: translateY(-50%);
}

@media(max-width: 990px) {
    .capabilities-flow .blue-cap-bg.flow-line:before {
        width: 2px;
        left: 18%;
        top: 280px;
        height: 44px;
    } 
}


@media(max-width: 768px) {
    .capabilities-flow .blue-cap-bg.flow-line:before {
        left: 64px;
        top: 116%;
        height: 30%;
    } 
}

@media(max-width: 520px) {
    .capabilities-flow .blue-cap-bg.flow-line:before {
        left: 50%;
    } 
}

.capabilities-flow .flow-chart-03 .cap-text {
    bottom: -140px;
}

.capabilities-flow .flow-chart-03 .cap-text:before {
    display: none;
}

.capabilities-flow .flow-chart-03 .cap-text:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 778px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: #009B7C;
}

@media(min-width: 1200px) {
    .capabilities-flow .flow-chart-03 .cap-text:after {
        width: 980px;
    }
}

@media(max-width: 990px) {
    .capabilities-flow .flow-chart-03 .cap-text {
        top: 0;
        bottom: auto;
        height: 100%;
    }
    
    .capabilities-flow .flow-chart-03 .cap-text:after {
        width: 2px;
        height: calc(100% - 120px);
    }
}

@media(max-width: 768px) {
    .capabilities-flow .flow-chart-03 .cap-text {
        left: -200px;
        width: 160px;
    }
}

@media(max-width: 520px) {
    .capabilities-flow .flow-chart-03 .cap-text {
        left: -76%;
        width: 70%;
    }
    
    .capabilities-flow .flow-chart-03 .cap-text:after {
        top: 50%;
    }
}

.box-line {
    position: relative;
    width: 20px;
    height: 50px;
}

.box-line:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #009B7C;
    left: 0;
    top: 44%;
    transform: translateY(-50%);
}

.box-line:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 244px;
    background: #009B7C;
    left: 50%;
    top: 46%;
    transform: translateX(-50%);
}

@media(max-width: 990px) {
    .box-line {
        width: 100%;
    }
    
    .box-line:before {
        width: 34%;
        left: 110px;
    }
    
    .box-line:after {
        top: 0;
        left: 50%;
    }
}

@media(max-width: 768px) {
    .box-line:before {
        width: 26%;
        left: 13%;
    }
    
    .box-line:after {
        left: 39%;
    }
}

@media(max-width: 576px) {
    .box-line:before {
        width: 26%;
        left: 13%;
    }
}

@media(max-width: 520px) {
    .box-line:before {
        width: 57%;
    }
    
    .box-line:after {
        left: 70%;
    }
}



#booking h4 {
    font-weight: 600;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
    max-width: 74%;
}

@media(max-width: 990px){
    #booking h4 {
        max-width: 90%;
    }
}
/*-- end --*/



/*--- Loading ---*/

.loaderbg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #111;
    z-index: 9999;
    animation: bg-opacity 3.4s ease forwards;
}

#logo {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  stroke: #fff;
  animation: fill 2s ease forwards 2.3s;
}

#logo path:nth-child(1) {
  stroke-dasharray: 1210;
  stroke-dashoffset: 1210;
  animation: line-anim 2s ease forwards;
}

#logo path:nth-child(2) {
  stroke-dasharray: 901;
  stroke-dashoffset: 901;
  animation: line-anim 2s ease forwards 0.4s;
}

#logo path:nth-child(3) {
  stroke-dasharray: 356;
  stroke-dashoffset: 356;
  animation: line-anim 2s ease forwards 0.6s;
}

#logo path.white-color {
  stroke-dasharray: 356;
  stroke-dashoffset: 356;
  animation: line-white 2.5s ease forwards .8s;
}

#logo path:nth-child(4) {
  stroke-dasharray: 1175;
  stroke-dashoffset: 1175;
  animation: line-anim 2s ease forwards 0.8s;
}

#logo path:nth-child(5) {
  stroke-dasharray: 1313;
  stroke-dashoffset: 1313;
  animation: line-anim 2s ease forwards 1s;
}

@keyframes bg-opacity {
    80%{
        opacity: 1;
    }
    
    100% {
        opacity: .95;
    }
}


@keyframes line-anim {
  to {
    stroke-dashoffset: 0;
    stroke: #009C84;
  }
}

@keyframes line-white {
  60% {
    fill: transparent;
    stroke: #009C84;

  }
  
  to {
    stroke-dashoffset: 0;
    stroke: #fff;
    fill: #fff;
    opacity: 1;
  }
}

@keyframes fill {
  from {
    fill: transparent;

  }
  to {
    fill: #009C84;
    opacity: 1;

  }
}


/*-- loading end ---*/

/*-- Register --*/

.registration h4 {
    font-weight: 600;
    color: inherit;
}

.registration ul {
    list-style-type: disc;
}

.registration ol {
    margin-bottom: 30px;
}

.registration ol li {
    margin-bottom: 10px;
}

.registration a {
    color: #009B7C;
}

.registration a:hover {
    text-decoration: underline;
}

#reg-img {
    max-width: 280px;
    object-fit: cover;
    margin: auto;
    margin-bottom: 40px;
}

#reg-img.reg-logo .color01 {
    fill: #000;
}

#reg-img.reg-logo .color02 {
    fill: #009B7C;
}

.reg-container {
    height: 800px;
    margin: 40px 0 3em;
}

#regform-3 {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Super simpafier*/

.super-popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}

.super-popup .overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255, .8);
    backdrop-filter: blur(2px);
}

.super-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    margin: auto;
    max-width: 900px;
    max-height: 84%;
    z-index: 9;
    display: flex;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.super-area .close {
    position: absolute;
    top: -20px;
    right: -30px;
    font-size: 24px;
    color: #222;
    opacity: 1;
}

.super-area .close:hover {
    opacity: .6;
}

.super-content {
    background: #fff;
    padding: 50px 40px;
    border-radius: 30px;
    border: 1px solid #009C84;
    box-shadow: 0 4px 10px rgba(0,0,0, .14);
    text-align: left;
    overflow-y: auto;
}

@media(max-width: 576px) {
    .super-content {
        padding: 20px 30px;
    }
}

@media(max-width: 414px) {
    .super-content {
        padding: 20px;
    }
}

.content {
    width: 100%;
}


/*--- Canvas website section ---*/

.canvasWeb-content {
    max-width: 1440px;
}

.canvasWeb-content p {
    font-size: 12px;
}

.canvasWeb-content p a {
    text-decoration: underline;
}

.canvasWeb-content .swiper-3d {
    overflow: visible;
}

.canvasWeb-content .swiper-slide {
    position: relative; 
    width: 660px;
    max-width: 100%;
    height: auto;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.canvasWeb-content .swiper-3d .swiper-slide-shadow-left,
.canvasWeb-content .swiper-3d .swiper-slide-shadow-right {
    background-image: none;
}

.traditional-circle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 60px;
}

.traditional-circle h4 {
    color: #222;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.traditional-circle .circle-left,
.traditional-circle .circle-right {
    width: 30%;
    display: flex;
    align-items: center;
    flex-flow: column;
}

.traditional-circle .left-chart,
.traditional-circle .right-chart {
    position: relative;
    width: 50%;
}

.traditional-circle .left-chart:before,
.traditional-circle .left-chart:after {
    content: '';
    position: absolute;
    transform: rotate(-40deg);
    background: #222;
}

.traditional-circle .right-chart:before,
.traditional-circle .right-chart:after {
    content: '';
    position: absolute;
    transform: rotate(40deg);
    background: #222;
}

.traditional-circle .left-chart:after,
.traditional-circle .right-chart:after {
    height: 100px;
    width: 4px;
    bottom: -90px;
}

.traditional-circle .left-chart:after {
    left: 185px;
}

.traditional-circle .right-chart:after {
    right: 185px;
}

.traditional-circle .left-chart:before,
.traditional-circle .right-chart:before {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 20px;
    height: 16px;
    bottom: -86px;
}

.traditional-circle .left-chart:before {
    left: 209px;
}


.traditional-circle .right-chart:before {
    right: 209px;
}


.traditional-circle .circle-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.traditional-circle .bottom-chart {
    position: relative;
    width: 40%;
}

.traditional-circle .chart-box {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: 10px 10px 20px;
    border: 2px solid #86CCDD;
    border-radius: 2rem;
}

.bottom-chart .logo {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bottom-chart .logo .color02 {
    fill: #009B7C;
}

.circle-chart__anim {
    display: none;
}

@media(max-width: 1024px) {
    .traditional-circle .left-chart:after {
        left: 155px;
    }
    
    .traditional-circle .right-chart:after {
        right: 155px;
    }
    
    .traditional-circle .right-chart:before {
        right: 179px;
    }
    
    .traditional-circle .left-chart:before {
        left: 179px;
    }
}


@media(max-width: 990px) {
    .traditional-circle .left-chart:after {
        left: 105px;
    }
    
    .traditional-circle .left-chart:before {
        left: 129px;
    }
    
    .traditional-circle .right-chart:after {
        right: 105px;
    }
    
    .traditional-circle .right-chart:before {
        right: 129px;
    }
    
    .traditional-circle .chart-box {
        width: 40%;
    }
}

@media(max-width: 768px) {
    .traditional-circle .circle-bottom {
        width: 100%;
        margin: 100px 0 30px;
    }
    
    .traditional-circle .chart-box {
        width: 70%;
    }
    
    .traditional-circle .bottom-chart {
        width: 40%;
    }
    
    .traditional-circle .circle-left, 
    .traditional-circle .circle-right {
        width: 40%;
    }
    
    .traditional-circle .left-chart:before,
    .traditional-circle .left-chart:after {
        transform: rotate(-20deg);
    }
    
    .traditional-circle .right-chart:before,
    .traditional-circle .right-chart:after {
        transform: rotate(20deg);
    }
    
    .traditional-circle .left-chart:after {
        bottom: -80px;
        left: 95px;
        height: 80px;
    }
    
    .traditional-circle .right-chart:after {
        bottom: -80px;
        right: 95px;
        height: 80px;
    }
    
    .traditional-circle .left-chart:before {
        left: 101px;
    }
    
    .traditional-circle .right-chart:before {
        right: 101px;
    }
}

.client-data-flow {
    position: relative;
    background: transparent;
    padding: 20px;
    border-radius: 0;
}

.client-data-flow .client-data-flow-chart {
    padding: 10px 20px;
}

.client-data-flow-chart .data-box {
    position: relative;
    display: flex;
    justify-content: center;
}

@media(max-width: 990px) {
    .client-data-flow .client-data-flow-chart {
        justify-content: center;
    }
    
    .client-data-flow-chart .data-box {
        width: 100%;
    }
}

.client-data-flow .data-box .col-md-2 {
    width: calc(100% / 6);
}

.client-data-flow-chart .top-data .col-md-2,
.client-data-flow-chart .bottom-data .col-md-2 {
    width: 50%;
    z-index: 2;
}

.client-data-flow-chart .center-data {
    width: 90%;
    background: #fff;
    border-radius: 3rem;
    padding: 60px 10px 30px;
    margin: 20px 0 30px;
}

@media(max-width: 990px) {
    .client-data-flow-chart .center-data {
        width: 70%;
        flex-flow: column;
        align-items: center;
        margin: 10px 0 20px;
    }
    
    .client-data-flow .data-box .col-md-2 {
        width: 70%;
        margin-bottom: 30px;
    }
}

@media(max-width: 576px) { 
    .client-data-flow-chart .center-data {
        width: 70%;
    }
    
    .client-data-flow .data-box .col-md-2 {
        width: 90%;
    }
}

.top-data .title,
.center-data .title {
    position: absolute;
    top: 20px;
    left: 20px;
    width: fit-content;
}

.top-data .title {
    left: 0;
}

.top-data .title p {
    text-transform: uppercase;
    color: #222;
    font-size: 22px;
    text-align: left;
}

.top-data:before,
.top-data:after,
.top-data .title:before,
.top-data .title:after {
    content: '';
    position: absolute;
    left: 10%;
    transform: translateX(-50%);
    background: #222;
}

.top-data:before,
.top-data:after {
    right: 0;
    left: auto;
    margin-top: 20px;
}

.top-data:before,
.top-data .title:before {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 20px;
    height: 16px;
    top: 410px;
}

.top-data:before {
    right: -17px;
}

.top-data:after,
.top-data .title:after {
    width: 3px;
    height: 380px;
    top: 40px;
}

@media(max-width: 990px) {
    
    .top-data .title:after,
    .top-data:after {
        height: 65em;
    }
    
    .top-data .title:before,
    .top-data:before {
        top: 67em;
    }
    
}

@media(max-width: 576px) {
    .top-data .title:after,
    .top-data:after {
        height: 70em;
    }
    
    .top-data .title:before,
    .top-data:before {
        top: 72em;
    }
    
}

@media(max-width: 425px) {
    .top-data .title:after {
        height: 74em;
    }
    
    .top-data:after {
        height: calc(74em + 20px);
    }
    
    .top-data:before,
    .top-data:after {
        margin-top: 0;
    }
    
    .top-data .title:before {
        top: 76em;
    }
    
    .top-data:before {
        top: calc(76em + 20px);
    }
    
}


.top-data .col-md-2:before,
.top-data .col-md-2:after,
.center-data:before,
.center-data:after,
.bottom-data:before,
.bottom-data:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
}

.top-data .col-md-2:before {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 20px;
    height: 16px;
    top: 170px;
}

.top-data .col-md-2:after {
    width: 3px;
    height: 60px;
    top: 120px;
}

.center-data:before,
.center-data:after {
    left: 40%;
}

.center-data:before {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 20px;
    height: 16px;
    top: 285px;
}

.center-data:after {
    width: 3px;
    height: 90px;
    top: 200px;
}

.center-data .title p {
    font-size: 16px;
    text-transform: none;
    text-align: left;
}

.center-data .col-md-2:not(:last-child) .client-data-icon:before {
    content: '';
    position: absolute;
    top: 40px;
    right: -32px;
    width: 30%;
    height: 4px;
    background: #222;
    display: block;
}

@media(max-width: 990px) {
    .center-data .col-md-2:not(:last-child) .client-data-icon:before {
        top: 86px;
        left: 38px;
        right: auto;
        width: 4px;
        height: 40%;
    }
}

@media(max-width: 990px) {
    
    .center-data:before, .center-data:after {
        left: 26%;
    }
    
    .center-data:after {
        top: auto;
        height: 100px;
        bottom: -75px;
    }
    
    .center-data:before {
        top: auto;
        bottom: -80px;
    }
}

@media(max-width: 425px) {
    
    .center-data:before, .center-data:after {
        left: 20%;
    }
    
}

.bottom-data:before,
.bottom-data:after {
    right: 40%;
    left: auto;
}

.bottom-data:before {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: rotate(180deg);
    width: 20px;
    height: 16px;
    bottom: 140px;
    right: calc(40% - 7px);
}

.bottom-data:after {
    width: 3px;
    height: 100px;
    bottom: 40px;
}

@media(max-width: 990px) {
    .client-data-icon {
        justify-content: center;
        flex-flow: column;
    }
    
    .center-data .client-data-icon {
        flex-flow: row;
        justify-content: flex-start;
    }
    
    .client-data-icon p {
        text-align: center;
    }
    
    .center-data .client-data-icon p {
        text-align: left
    }
    
    .bottom-data:before {
        bottom: 180px;
        right: calc(32% - 7px);
    }
    
    .bottom-data:after {
        bottom: 80px;
        right: 32%;
        left: auto;
    }
}


@media(max-width: 576px) {
    .client-data-icon p {
        font-size: 14px;
        font-weight: 500;
    }
    
    .center-data .client-data-icon p {
        margin-left: 20px;
    }
    
    .top-data .client-data-icon {
        margin-top: 70px;
    }
    
    .top-data .title p {
        font-size: 18px;
    }
    
    .top-data .col-md-2:after {
        top: 190px;
    }
    
    .top-data .col-md-2:before {
        top: 240px;
    }
    
    .center-data .title {
        top: 36px;
    }
    
    
}

@media(max-width: 425px) {
    
    .bottom-data:before, .bottom-data:after {
        right: 26%;
    }
    
    .bottom-data:before {
        right: calc(26% - 7px);
    }
    
    .top-data .col-md-2:after {
        top: 210px;
    }
    
    .top-data .col-md-2:before {
        top: 260px;
    }
}

#completion h3 {
    text-align: center;
}

#about-us .dash-awards {
    justify-content: center;
    gap: 20px;
    margin: 0;
}

.dash-awards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

#about-us .dash-awards img {
    height: 140px;
    margin-bottom: 10px;
}

.dash-awards img {
    height: 80px;
}

.dash-awards img.large {
    height: 110px;
    border-radius: 10px;
}

@media(max-width: 990px) {
    #about-us .dash-awards {
        margin: 20px 0;
    }
    
    #about-us .dash-awards img {
        height: 120px;
    }
    
    .dash-awards img {
        height: 70px;
    }
}


@media(max-width: 768px) {
    #about-us .dash-awards {
        margin: 20px 0;
    }
    
    #about-us .dash-awards img {
        height: 100px;
    }
    
    .dash-awards {
        gap: 16px
    }
    
    .dash-awards img {
        height: 90px;
    }
}

@media(max-width: 576px) {
    
    #about-us .dash-awards img {
        height: 80px;
    }
    
    .dash-awards img {
        height: 80px;
    }
}

.disclaimer-red {
    color: #c02020;
}


/*---- EOFY ----*/

#EOFY .table {
    width: 100%;
    overflow-x: auto;
}

#EOFY table {
    max-width: 1000px;
    margin: 40px auto;
    border: 0;
    display: block;
}

#EOFY table tr {
    border: 0;
}

#EOFY table td {
    padding: 16px;
}

#EOFY table thead td {
    font-weight: 600;
    background: #222;
    color: #fff;
}

#EOFY table thead td:not(:last-child) {
    border: 1px solid #fff;
}

#EOFY table thead td:first-child {
    border-top-left-radius: 16px;
}

#EOFY table thead td:last-child {
    border-top-right-radius: 16px;
}

#EOFY table tbody td {
    border-bottom: 2px solid #fff;
    font-size: 14px;
    background: #f4f4f4;
    transition: .3s ease;
}

#EOFY table tbody tr:hover td {
    background: rgba(0, 155, 124, .1);
    transition: .3s ease;
}

#EOFY table tbody td:not(:last-child) {
    border-right: 2px solid #fff;
}

#accordionFAQ.accordion {
    margin-top: 30px;
}

.accordion h2 {
    margin: 0;
}

#accordionFAQ.accordion button {
    position: relative;
    width: 100%;
    font-size: 16px;
    text-align: left;
    line-height: 1.5;
    outline: 0;
    border: 0;
    border-bottom: 1px solid #ddd;
    background: none;
    padding: 20px 40px 20px 20px;
    font-size: 18px;
    font-weight: 400;
    text-indent: -20px;
    color: #222;
}

#accordionFAQ.accordion button:not(.collapsed) {
    color: #009b7c;
}

#accordionFAQ.accordion button:before {
    content: 'Q: ';
    font-weight: 600;
}

#accordionFAQ.accordion button:after {
    content: '\f078';
    position: absolute;
    font-size: 14px;
    font-weight: 600;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s ease;
}

#accordionFAQ.accordion button:not(.collapsed):after {
    content: '\f077';
    transition: .3s ease;
}


#accordionFAQ .card-body {
    padding: 20px;
    background: #f4f4f4;
    
}

#accordionFAQ .card-body a {
    font-weight: 600;
    color: #009b7c;
}

#accordionFAQ .card-body a:hover {
    text-decoration: underline;
}







/*-- end --*/


/*disable btn / mask*/

a[href$='/i-am-a'] {
    pointer-events: none;
}

.svg-mask {
    position: absolute;
    z-index: -999;
}