@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto+Condensed:wght@300&family=Noto+Sans+SC:wght@400;700&display=swap');

/*Typo Style*/

:lang(en) {font-family: 'Montserrat', sans-serif;}

:lang(zh) {font-family: 'Noto Sans SC', sans-serif;}

p:lang(en), p:lang(zh), li:lang(zh), a  {font-weight: 300;}

p:lang(zh), li:lang(zh) {letter-spacing: 2px;}

.condensed{font-family: 'Roboto Condensed', sans-serif!important;}

h1:lang(zh) {font-size: 3em ;}

h1 {text-transform: uppercase;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin: 0 0 25px 0;font-weight: 700;text-transform: uppercase;}

a, a:hover, a:focus {text-decoration: none;-webkit-transition: all 0.2s ease-out 0s;transition: all 0.2s ease-out 0s;}

.widget-title{text-align:center;text-transform:uppercase;display: inline-block;}
.widget-title:after {content: ' '; display: block; width: calc(100% - 1em); margin: 0.2em 0 0.5em 0;}
.widget-title.text-center:after {margin-left: auto;margin-right: auto;}

@media (min-width: 768px){
.text-md-end .widget-title:after {float: right;}
.text-md-start .widget-title:after {float: left;}
}

:root {
            --primary-colour: #cfa945;
            --secondary-colour: #dae2f0;
        }

header .top-bar li a:hover {
color:var(--primary-colour);
}

.mobile-menu{
  background:var(--primary-colour);;  
}

.primary-bg{
    background:var(--primary-colour);;
}

.primary-border{
    border-color:var(--primary-colour);;
}

.secondary-bg{
    background:var(--secondary-colour);;
}

.primary-text{
    color:var(--primary-colour);;
}

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

aside:nth-child(2n) {
    background:var(--primary-colour);;
}

.swiper-button-next:after, .swiper-button-prev:after {
    color:var(--primary-colour);;
}

aside:before {
    border-top: 6em solid var(--primary-colour);;
}

.widget-title:after {
    border: 2px solid var(--secondary-colour);;
}

aside:nth-child(2n) hr.dashed {
    border-bottom: 1px dashed var(--primary-colour);;
}


/*Header Style*/

header {z-index: 5;}

header .menu-top-menu-container {display: inline;}

.site-logo{z-index: 3;}

header .custom-logo {display: block;width: 100%;height: 100%;margin: auto auto;max-width: 200px;}

.drop-block.lang {position: absolute;font-size: 2em;padding: 1.5em 0.5em;right: 0;top: 0;z-index:10;}

header .top-bar{display: inline-flex;}

.top-bar ul {padding-left: 0!important;margin-bottom: 0!important;list-style: none;}

header .top-bar li a {color: #fff;text-transform: uppercase;font-weight: bold;font-size: large;}

ul.menu {padding: 0;}

.mobile-menu ul {padding: 0;}

.toggle-nav {display: none}


@media screen and ( max-width: 767px) {

.toggle-nav {display: inline-block !important;color: #fff;transition: color linear 0.15s;z-index: 3;position: absolute;font-size: 2em;font-family: 'Montserrat', sans-serif !important;}

.toggle-nav:hover, .toggle-nav.active {text-decoration: none;color: #fff;}  

}


.main-nav {position: absolute;top: 80px;left: 0;width: 100%;z-index: 2;}

.main-nav ul {display: none;text-align: center;padding-left: 0;}

.main-nav li {display: block;float: none;padding: 1em 0em;}

.main-nav li:first-child {margin-top: 2em;}

.main-nav li a {color: #fff;}


/* Footer Style */

footer {background-color: #000;color:#fff;}

footer a{color:#fff;}
footer a:hover{color:var(--primary-colour);}

footer .table>:not(caption)>*>* {
    padding: .2rem .5rem;
}

footer .custom-logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 1em;
}

#footer-sidebar ul {list-style: none;padding-left: 0rem;line-height: 2;}

.btn-expand:after {
    content: " ";position: absolute;display: block;width: 100%;height: 100%;
    top: 0;left: -28px;z-index: -1;transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);-webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);border-radius: 0.25rem 0 0 0;
}


/* Widget and Sidebar Style */
aside:nth-child(2n), aside:nth-child(2n) h1, aside:nth-child(2n) h2, aside:nth-child(2n) h3, aside:nth-child(2n) h4, aside:nth-child(2n) h5, aside:nth-child(2n) h6{
    color: #fff;
}

aside:nth-child(2n):before {
    border-top: 6em solid #fff;
}

/*-------Form Style--------------*/



form.wpcf7-form.init {

    margin: 0;

}



input.wpcf7-form-control.wpcf7-text, select.wpcf7-form-control.wpcf7-select {

    width: 100%;

    border: 0;

    padding: 0.5em;

}



input.wpcf7-form-control.wpcf7-date.wpcf7-validates-as-required.wpcf7-validates-as-date {

    border: 0;

    padding: 0.5em;

    margin-left: 1em;

}



input.wpcf7-form-control.has-spinner.wpcf7-submit {

    width: 100%;

    border-radius: 0;

}



input.wpcf7-form-control.wpcf7-date.wpcf7-validates-as-required.wpcf7-validates-as-date {

    width: 100%;

    margin-left: 0;

    border: 0;

    padding: 0.5em;

}



textarea.wpcf7-form-control.wpcf7-textarea {

    width: 100%;

    border: 0;

}

#enquiry {
    padding: 10em 0 5em;
}

ul.service-list {margin: 0;}
.service-list li:last-child hr {display: none;}


#contact_form-2 label {
    color: #000;
}


.post-header {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    width: 100%;
    padding: 0;
    aspect-ratio: 16 / 3;
}


.featured-image{
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-position: 50% 50%;
    object-position: right;
}


.entry-title {
    position: absolute;
    color: #fff;
    font-size: clamp(1rem, 2.5vw, 2rem);
}


@media only screen and (max-width: 480px) {
    .entry-title {
        text-align: center;
        width:100%;
        bottom: 50px;
    }
}

@media only screen and (min-width: 481px) {
    .entry-title {
        width:60%;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 0 0 5%;
    }
}


.nav-tabs .nav-link {
    background-color: #eee;
}


/* ---------------------------
   Theme variables
--------------------------- */
:root{
  --arrow-color:#18214a;
  --arrow-line-thickness:2px;
  --arrow-gap:1rem; /* must match the gap-3 (≈1rem) in your flex rows */
  --arrow-opacity-line:.35;
  --arrow-opacity-head:.6;
}

/* ---------------------------
   Base step block
--------------------------- */
.flow-row .step{
  position:relative;
}

/* pseudo-elements default OFF */
.flow-row .step::after,
.flow-row .step::before{
  content:none;
  position:absolute;
  pointer-events:none;
  z-index:5;
}

/* ---------------------------
   CARD WIDTHS ON DESKTOP
   lg (≥992px): 3 per row
   (XL no longer changes; still 3 per row)
--------------------------- */
@media (min-width:992px){
  .flow-row .step{
    flex:0 0 calc(33.333% - var(--arrow-gap));
    max-width:calc(33.333% - var(--arrow-gap));
  }
}

/* =========================================================
   1) MOBILE FLOW (<992px)
   - stack vertically
   - draw ↓ after every step except the very last step
========================================================= */
@media (max-width:991.98px){

  /* All .flow-row are column direction already because of flex-column flex-lg-row,
     so we just draw arrows down from each .step to the next .step. */

  .flow-row .step::after,
  .flow-row .step::before{
    content:"";
    left:50%;
    transform:translateX(-50%);
  }

  /* vertical line down */
  .flow-row .step::after{
    bottom:-24px;
    width:var(--arrow-line-thickness);
    height:24px;
    background:var(--arrow-color);
    opacity:var(--arrow-opacity-line);
  }

  /* arrow head ↓ */
  .flow-row .step::before{
    bottom:-30px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:8px solid var(--arrow-color);
    opacity:var(--arrow-opacity-head);
  }

  /* remove arrow on very last step of the very last row */
  .flow-row:last-child .step:last-child::after,
  .flow-row:last-child .step:last-child::before{
    content:none;
  }
}

/* =========================================================
   2) DESKTOP FLOW (≥992px)
   - each .flow-row is one row (flex-lg-row)
   - .forward row flows → between cards
   - .reverse row flows ← between cards
   - ONLY draw horizontal arrows between cards that are NOT :last-child
   - For the :last-child in each row:
        - draw ↓ to the next row
        - unless it’s the last row overall, then no arrow
========================================================= */
@media (min-width:992px){

  /*************
   ROW DIRECTION
  *************/
  .flow-row.forward{
    flex-direction:row; /* normal */
    justify-content: space-between;
  }
  .flow-row.reverse{
    flex-direction:row-reverse!important; /* visually snake back */
  }

  /***************************************
   HORIZONTAL ARROWS INSIDE THE ROW ONLY
   forward rows: → arrows AFTER every step except the last
  ***************************************/
  .flow-row.forward .step:not(:last-child)::after,
  .flow-row.forward .step:not(:last-child)::before{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    z-index:5;
  }

  /* line (→) */
  .flow-row.forward .step:not(:last-child)::after{
    right:calc(-1 * var(--arrow-gap) / 2);
    width:calc(var(--arrow-gap) + 16px);
    height:var(--arrow-line-thickness);
    background:var(--arrow-color);
    opacity:var(--arrow-opacity-line);
  }

  /* head (→) */
  .flow-row.forward .step:not(:last-child)::before{
    right:calc(-1 * var(--arrow-gap) / 2 - 8px);
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:8px solid var(--arrow-color);
    opacity:var(--arrow-opacity-head);
  }

  /***************************************
   HORIZONTAL ARROWS INSIDE THE ROW ONLY
   reverse rows: ← arrows AFTER every step except the last
   (Because flex-direction: row-reverse flips visual order,
    "not(:last-child)" still means "not rightmost visually")
  ***************************************/
  .flow-row.reverse .step:not(:last-child)::after,
  .flow-row.reverse .step:not(:last-child)::before{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    z-index:5;
  }

  /* line (←) */
  .flow-row.reverse .step:not(:last-child)::after{
    left:calc(-1 * var(--arrow-gap) / 2);
    width:calc(var(--arrow-gap) + 16px);
    height:var(--arrow-line-thickness);
    background:var(--arrow-color);
    opacity:var(--arrow-opacity-line);
  }

  /* head (←) */
  .flow-row.reverse .step:not(:last-child)::before{
    left:calc(-1 * var(--arrow-gap) / 2 - 8px);
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-right:8px solid var(--arrow-color);
    opacity:var(--arrow-opacity-head);
  }

  /********************************************
   VERTICAL ARROW (↓) FROM LAST CARD OF A ROW
   - only if this row is NOT the last row overall
   - attaches to .step:last-child in that row
  ********************************************/

  /* clear any pseudo from last-child by default */
  .flow-row .step:last-child::after,
  .flow-row .step:last-child::before{
    content:none;
  }

  /* add ↓ on last-child of every row EXCEPT the final row */
  .flow-row:not(:last-child) .step:last-child::after,
  .flow-row:not(:last-child) .step:last-child::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:5;
  }

  /* the down line */
  .flow-row:not(:last-child) .step:last-child::after{
    bottom:-32px;
    width:var(--arrow-line-thickness);
    height:32px;
    background:var(--arrow-color);
    opacity:var(--arrow-opacity-line);
  }

  /* the down arrow head (↓) */
  .flow-row:not(:last-child) .step:last-child::before{
    bottom:-38px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:8px solid var(--arrow-color);
    opacity:var(--arrow-opacity-head);
  }

  /* final safeguard:
     last row's last card = no arrow at all */
  .flow-row:last-child .step:last-child::after,
  .flow-row:last-child .step:last-child::before{
    content:none;
  }
}

/* ---------------------------------
   Optional: brand accent for icons
--------------------------------- */
.mv-accent{
  color:#f5b000;
}



/* Highlight Note / Callout box */
.note-box {
    position: relative;
    border-radius: .75rem;
    padding: 1rem 1rem 1rem 3rem;
    background-color: #fef9e8;
    border: 1px solid #f5d26c;
    color: #3a2d00;
    font-size: .95rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    margin:2em 0;
}


/* Optional bold heading inside */
.note-box .note-title {
  font-weight: 600;
  color: #2a2200;
  margin-bottom: .5rem;
  font-size: 1rem;
}



 .vx-cc-grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
    /* Only go 1 column on small phones, keep 2-col for tablets */
    @media (max-width:767px){.vx-cc-grid{grid-template-columns:1fr;gap:0;}}

      .vx-cc-link{border-radius:18px;background-color:#eee;overflow:hidden;position:relative}
      @media (min-width:768px){
        .vx-cc-link:nth-child(2n+1) {
  background-color: #1a1449;
  color: #fff !important;
  background: linear-gradient(0deg, #72bcd4 0%, #1a1449 100%);
}
.vx-cc-link:nth-child(3n+1) > .vx-cc-title {
  color: #fff;
}

      }

      @media (max-width:767px){
        .vx-cc-link:nth-child(2n+1) {
  background-color: #1a1449;
  color: #fff !important;
  background: linear-gradient(0deg, #72bcd4 0%, #1a1449 100%);
  flex-direction: row-reverse;
}
.vx-cc-link:nth-child(2n+1) > .vx-cc-title {
  color: #fff;
}
.vx-cc-link { border-radius: 0; }
.vx-cc-grid > .vx-cc-link:first-child { border-radius: 18px 18px 0 0; }
.vx-cc-grid > .vx-cc-link:last-child  { border-radius: 0 0 18px 18px; }

      }

      /* Make the entire card clickable */
      .vx-cc-link{display:flex;flex-wrap:wrap;align-items:stretch;text-decoration:none;color:inherit;width:100%;height:100%}
      .vx-cc-link:focus{outline:2px solid currentColor;outline-offset:2px}

      /* Split in half: media/body */
      .vx-cc-media{display:block;overflow:hidden;}
      .vx-cc-body{min-width:0;padding:3%;margin:auto 0}
      .vx-cc-media { width: 50%; }
.vx-cc-body { width: 50%; }

      /* Force 1/1 square thumbnail */
      .vx-cc-media .vx-cc-img{width:100%;height:100%;display:block;aspect-ratio:1/1;object-fit:cover}
      .vx-cc-fallback{background:#e5e7eb;aspect-ratio:1/1;border-radius:14px}

      .vx-cc-title {
    font-size: clamp(1rem, 1vw, 2rem);
    line-height: 1.25;
    margin: 0;
}
      .vx-cc-empty{color:#6b7280}



.row .step{
    position:relative;
    background-image: linear-gradient(to top, #f2faff 0%, #ffffff 100%);
}

@media (min-width: 768px) {
#application_process .row .step:after {
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    font-size: x-large;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    top: 50%;
    right: -28px;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--primary-colour);
}
}

#application_process .row .step:before,
#application_process .row:nth-child(2n) .step:after,
#application_process .row .step.no-after:after {
    content: none;
}

#application_process .row .step:last-child:before, 
#application_process .row:nth-child(2n) .step.no-after:last-child:before{
    content: none; /* Remove pseudo-elements for the last step */
}


#application_process .row .step.no-after:before, #application_process .row:nth-child(2n) .step.no-after:before {
    content: '\f107';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    font-size: x-large;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%);
    z-index: 2;
    color: var(--primary-colour);
}

#application_process .row:nth-child(2n){
    flex-direction: row-reverse;
}

#application_process .last:before {
    display:none!important;
}


@media (min-width: 768px) {
#application_process .row:nth-child(2n) .step:before {
    content: '\f104';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    font-size: x-large;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    top: 50%;
    left: -28px;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--primary-colour);
}
}

@media (max-width: 767px) {
#application_process .row:nth-child(2n) .step:before, #application_process .row .step:after {
    content: '\f107';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    font-size: x-large;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%);
    z-index: 2;
    color: var(--primary-colour);
}
}


.header-footage {
    position: relative;
    overflow: hidden;
}

.header-footage {
    width:100%;
    height:80vh;
    object-fit: cover;    /* keep image/video proportional */
    display: block;
}

.header-description h2 {
    font-size: clamp(3rem, 4vw, 10rem);
}

.header-description p {
    font-size: clamp(1rem, 2vw, 2rem);
}

/* Large screens */
@media only screen and (min-width: 1024px) {
    header .top-bar, header .top-bar ul {
        display: flex;
        justify-content: space-between;
    }
}

/* Medium screens */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    header .top-bar, header .top-bar ul {
        display: flex;
        justify-content: space-between;
    }
}

/* Small screens */
@media only screen and (max-width: 767px) {
    .top-bar {
        display: none;
    }
    .dialog-content {
        transform: translate(-50%, -50%) scale(0.7)!important;
    }
}



.header-footage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-description {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -60%);
    z-index: 2;
}

.header-description h5 {
    font-family: "Dancing Script", cursive;
    font-size: clamp(35px, 6vw, 50px);
    color: #fff !important;
    text-align: center;
    margin: 0;
}


.header-footage:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-colour);
    mix-blend-mode: multiply;
    z-index: 1;
    opacity: 0.5;
}


@keyframes fadeMove {
    0% { opacity: 0; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, 20px); } /* Fade in + Move down */
    100% { opacity: 0; transform: translate(-50%, 0); } /* Fade out + Move up */
}

.shake {
    display: inline-block;
    animation: fadeMove 2s ease-in-out infinite;
    position:absolute;
    left:50%;
}


.shake a {
    display: inline-block;
    width: 140.0195px;
    height: 80px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/chevron-down-solid-full.svg) no-repeat center top;
    background-size: 100px auto;
    cursor: pointer;
}

li.menu-item {
    margin: 1em 0;
}