/* ROOT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root {
   --font-heading: 'Barlow Condensed', sans-serif;
   --font-body: 'Manrope', sans-serif;

   --clr-primary: #21409A;
   --clr-primary-dark: #172E72;
   --clr-primary-deep: #0E2057;
   --clr-primary-soft: #EEF1FA;

   --clr-secondary: #8C6E2B;
   --clr-secondary-light: #AE8A3C;
   --clr-secondary-dark: #725820;
   --clr-secondary-soft: #F5F1E8;

   --clr-dark: #17202A;
   --clr-text: #505A64;
   --clr-muted: #7D8790;
   --clr-light: #F6F7F9;
   --clr-border: #E5E7EB;
   --clr-white: #FFFFFF;
   --clr-black: #000000;

   --header-height: 88px;
   --container-width: 1320px;
   --section-space: 100px;

   --transition: all .3s ease;
}


/* BASE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
   margin: 0;
   overflow-x: hidden;
   color: var(--clr-text);
   background: var(--clr-white);
   font-family: var(--font-body);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: .75rem;
   color: var(--clr-primary-deep);
   font-family: var(--font-heading);
   font-weight: 700;
   line-height: 1.08;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1875rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1.0625rem; }

p {
   margin-top: 0;
   margin-bottom: 1rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.75;
}

a {
   color: inherit;
   text-decoration: none;
   transition: var(--transition);
}

a:hover { color: var(--clr-primary); }

img {
   display: block;
   max-width: 100%;
   height: auto;
}

button, input, select, textarea { font-family: var(--font-body); }

button { border: 0; }

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


/* PAGE HERO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.page-hero {
   position: relative;
   min-height: 450px;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--clr-primary-deep);
}

.page-hero-image {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position:top;
}

.page-hero-overlay {
   position: absolute;
   inset: 0 auto 0 0;
   width: 62%;
   background: linear-gradient(105deg, rgba(8, 31, 77, .96) 0%, rgba(8, 42, 76, .90) 62%, rgba(8, 52, 77, .72) 100%);
   clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
   z-index: 1;
}

.page-hero-container {
   position: relative;
   width: 100%;
   padding-left: clamp(70px, 9vw, 160px);
   padding-right: 30px;
   z-index: 2;
}

.page-hero-content {
   width: min(580px, 47%);
   padding-top: var(--header-height);
   color: var(--clr-white);
}

.page-hero-content .section-eyebrow { color: var(--clr-secondary-light); }
.page-hero-content h1 { margin-bottom: 15px; color: var(--clr-white); }

.page-hero-content > p:not(.section-eyebrow) {
   margin-bottom: 20px;
   color: rgba(255, 255, 255, .85);
}

.page-breadcrumb {
   --bs-breadcrumb-divider-color: rgba(255, 255, 255, .45);
   --bs-breadcrumb-item-active-color: var(--clr-secondary-light);
}

.page-breadcrumb a { color: rgba(255, 255, 255, .75); }
.page-breadcrumb a:hover { color: var(--clr-white); }


/* PAGE HERO RESPONSIVE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 991.98px) {
   .page-hero { min-height: 420px; }
   .page-hero-overlay { width: 75%; }
   .page-hero-container { padding-left: 50px; padding-right: 30px; }
   .page-hero-content { width: 60%; }
}

@media (max-width: 767.98px) {
   .page-hero { min-height: 390px; }
   .page-hero-image { object-position: 65% center; }

   .page-hero-overlay {
      width: 100%;
      background: linear-gradient(90deg, rgba(8, 31, 77, .94) 0%, rgba(8, 42, 76, .84) 55%, rgba(8, 52, 77, .38) 100%);
      clip-path: none;
   }

   .page-hero-container { padding-left: 24px; padding-right: 24px; }
   .page-hero-content { width: 78%; padding-top: var(--header-height); }
}

@media (max-width: 575.98px) {
   .page-hero { min-height: 370px; }
   .page-hero-container { padding-left: 16px; padding-right: 16px; }
   .page-hero-content { width: 95%; }
}


/* FORMS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.form-label {
   margin-bottom: 8px;
   color: var(--clr-primary-deep);
   font-weight: 600;
}

.form-control,
.form-select {
   min-height: 50px;
   padding: 11px 14px;
   color: var(--clr-text);
   background-color: var(--clr-white);
   border: 1px solid rgba(33, 64, 154, .35);
   border-radius: 6px;
   transition: border-color .25s ease, box-shadow .25s ease;
}

.form-control::placeholder {
   color: var(--clr-muted);
}

.form-control:focus,
.form-select:focus {
   color: var(--clr-text);
   background-color: var(--clr-white);
   border-color: var(--clr-primary);
   box-shadow: 0 0 0 .2rem rgba(33, 64, 154, .10);
}

textarea.form-control {
   min-height: 150px;
   resize: vertical;
}

.form-text {
   margin-top: 7px;
   color: var(--clr-muted);
}


/* BUTTONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.btn-main {
   min-height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   padding: 0 23px;
   overflow: hidden;
   position: relative;
   color: var(--clr-white);
   background: var(--clr-secondary);
   border-radius: 7px;
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
   transition: var(--transition);
   z-index: 1;
}

.btn-main::before {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--clr-primary);
   transform: translateX(-101%);
   transition: transform .35s ease;
   z-index: -1;
}

.btn-main:hover { color: var(--clr-white); transform: translateY(-2px); }
.btn-main:hover::before { transform: translateX(0); }
.btn-main i { font-size: 12px; transition: transform .25s ease; }
.btn-main:hover i { transform: translateX(4px); }

/* Outline Button */

.btn-outline-main {
   min-height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   padding: 0 23px;
   overflow: hidden;
   position: relative;
   color: var(--clr-primary-deep);
   background: transparent;
   border: 1px solid var(--clr-primary-deep);
   border-radius: 7px;
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
   transition: var(--transition);
   z-index: 1;
}

.btn-outline-main::before {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--clr-primary-deep);
   transform: translateX(-101%);
   transition: transform .35s ease;
   z-index: -1;
}

.btn-outline-main:hover {
   color: var(--clr-white);
   border-color: var(--clr-primary-deep);
   transform: translateY(-2px);
}

.btn-outline-main:hover::before { transform: translateX(0); }

.btn-outline-main i { font-size: 12px; transition: transform .25s ease; }
.btn-outline-main:hover i { transform: translateX(4px); }

@media (min-width: 1200px) {
   .btn-outline-main { font-size: 14px; }
}


/* HEADER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
}

.site-navbar {
   width: fit-content;
   min-height: var(--header-height);
   padding: 0 38px;
   padding-left: clamp(70px, 9vw, 160px);
   background: var(--clr-white);
   border-bottom-right-radius: 30px;
   box-shadow: 0 8px 30px rgba(14, 32, 87, .08);
}

.site-logo {
   width: 180px;
   margin: 0 45px 0 0;
   padding: 0;
}

.site-logo img { width: 100%; height: auto; }


/* NAVIGATION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-navbar .navbar-nav { gap: 24px; }

.site-navbar .nav-link {
   padding: 10px 0 !important;
   color: var(--clr-primary-deep);
   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
}

.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--clr-secondary); }
.site-quote-item { margin-left: 12px; }

.site-quote-btn {
   min-height: 48px;
   padding-left: 22px;
   padding-right: 22px;
}


/* SERVICES DROPDOWN
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-services-dropdown {
   min-width: 310px;
   padding: 10px 0;
   border: 0;
   border-top: 3px solid var(--clr-secondary);
   border-radius: 0 0 8px 8px;
   box-shadow: 0 15px 35px rgba(14, 32, 87, .12);
}

.site-services-dropdown .dropdown-item {
   display: flex;
   align-items: center;
   gap: 13px;
   padding: 11px 20px;
   color: var(--clr-primary-deep);
   font-size: 13px;
   font-weight: 600;
}

.site-services-dropdown .dropdown-item i {
   width: 20px;
   color: var(--clr-secondary);
   text-align: center;
}

.site-services-dropdown .dropdown-item:hover { color: var(--clr-primary); background: var(--clr-secondary-soft); }
.site-navbar .dropdown-toggle::after { transition: transform .2s ease; }

@media (min-width: 992px) {
   .site-services-dropdown {
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
   }

   .site-services-dropdown.show, .site-navbar .dropdown:hover > .site-services-dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
   }

   .site-navbar .dropdown:hover > .dropdown-toggle::after, .site-navbar .dropdown-toggle.show::after {
      transform: rotate(180deg);
   }
}


/* MOBILE NAVIGATION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (min-width: 1200px) {
   .site-navbar .nav-link {
      font-size: 16px;
   }

   .site-services-dropdown .dropdown-item {
      padding: 12px 20px;
      font-size: 16px;
   }

   .site-services-dropdown .dropdown-item i {
      font-size: 14px;
   }

   .site-quote-btn {
      font-size: 14px;
   }
}

@media (max-width: 991.98px) {
   .site-navbar {
      width: 100%;
      padding: 12px 20px;
      border-radius: 0;
   }

   .site-logo { width: 155px; margin-right: 0; }

   .site-navbar-toggler {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      color: var(--clr-primary);
      background: var(--clr-secondary-soft);
      border: 0;
      border-radius: 7px;
      font-size: 19px;
      box-shadow: none !important;
   }

   .site-navbar .navbar-collapse { padding-top: 14px; }
   .site-navbar .navbar-nav { gap: 0; }
   .site-navbar .nav-link { padding: 12px 2px !important; border-bottom: 1px solid var(--clr-border); }
   .site-quote-item { margin: 16px 0 4px; }
   .site-quote-btn { width: 100%; justify-content: space-between; }

   .site-services-dropdown {
      min-width: 100%;
      margin: 5px 0 8px !important;
      border-top: 0;
      border-left: 2px solid var(--clr-secondary);
      border-radius: 0;
      box-shadow: none;
   }
}

@media (max-width: 575.98px) {
   .site-navbar { padding-left: 16px; padding-right: 16px; }
   .site-logo { width: 140px; }
}


/* SERVICE SIDEBAR
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.service-sidebar {
   position: sticky;
   top: 25px;
}

.service-sidebar-menu {
   padding: 24px;
   background: var(--clr-white);
   border: 1px solid var(--clr-secondary);
   border-radius: 8px;
   box-shadow: 0 8px 25px rgba(14, 32, 87, .07);
}

.service-sidebar-list {
   overflow: hidden;
   border-radius: 6px;
}

.service-sidebar-link {
   min-height: 54px;
   padding: 10px 14px 10px 6px;
   color: var(--clr-text);
   border-bottom: 1px solid var(--clr-border);
   transition: color .25s ease, padding-left .25s ease, background-color .25s ease;
}

.service-sidebar-link:last-child {
   border-bottom: 0;
}

.service-sidebar-icon {
   width: 26px;
   flex: 0 0 26px;
   color: var(--clr-secondary);
   text-align: center;
}

.service-sidebar-arrow {
   margin-right: 4px;
   color: var(--clr-secondary);
   font-size: .65rem;
   opacity: 0;
   transform: translateX(-4px);
   transition: opacity .25s ease, transform .25s ease;
}

.service-sidebar-link:hover,
.service-sidebar-link.active {
   padding-left: 10px;
   color: var(--clr-primary-deep);
   background: var(--clr-light);
}

.service-sidebar-link:hover .service-sidebar-arrow,
.service-sidebar-link.active .service-sidebar-arrow {
   opacity: 1;
   transform: translateX(0);
}

.service-sidebar .section-dark > i {
   color: var(--clr-secondary-light);
}

@media (max-width: 991.98px) {
   .service-sidebar {
      position: static;
   }
}


/* SECTION TITLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.section-eyebrow {
   margin-bottom: 12px;
   color: var(--clr-secondary);
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: .14em;
   line-height: 1.4;
   text-transform: uppercase;
}

.section-title { margin-bottom: 24px; color: var(--clr-primary-deep); }


/* DARK SECTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.section-dark { color: rgba(255, 255, 255, .78); background: var(--clr-primary-deep); }

.section-dark .section-title,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 {
   color: var(--clr-white);
}

.section-dark .section-eyebrow { color: var(--clr-secondary-light); }
.section-dark p { color: rgba(255, 255, 255, .72); }


/* DARK FEATURE */

.dark-feature {
   padding: 20px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 7px;
   background: rgba(255, 255, 255, .05);
}

.dark-feature i { color: var(--clr-secondary-light); }


/* LIGHT SECTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.section-light {
   color: var(--clr-text);
   background: var(--clr-light);
   border: 1px solid var(--clr-secondary);
}

.section-light .section-title,
.section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5, .section-light h6 {
   color: var(--clr-primary-deep);
}

.section-light .section-eyebrow { color: var(--clr-secondary); }


/* LIGHT FEATURE */

.light-feature {
   padding: 20px;
   background: var(--clr-white);
   border: 1px solid var(--clr-border);
   border-radius: 7px;
}

.light-feature i { color: var(--clr-secondary); }


/* FEATURE BOX
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.feature-box {
   padding: 17px 20px;
   background: var(--clr-white);
   border-left: 3px solid var(--clr-secondary);
   border-radius: 6px;
   box-shadow: 0 8px 25px rgba(14, 32, 87, .07);
   transition: transform .25s ease, box-shadow .25s ease;
}

.feature-box:hover {
   transform: translateX(4px);
   box-shadow: 0 12px 30px rgba(14, 32, 87, .11);
}

.feature-box-icon {
   width: 48px;
   height: 48px;
   flex: 0 0 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--clr-white);
   background: var(--clr-secondary);
   border-radius: 5px;
}

/* CIRCULAR VISUAL
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.circle-visual {
   position: relative;
   width: min(360px, 90%);
   aspect-ratio: 1;
   padding: 7px;
   border: 3px solid var(--clr-secondary);
   border-radius: 50%;
}

.circle-visual > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

@media (max-width: 575.98px) {
   .circle-visual { width: min(300px, 85%); }
}


/* FOOTER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-footer { color: rgba(255, 255, 255, .75); background: var(--clr-primary-deep); }
.footer-main { padding-top: 65px; padding-bottom: 55px; }

.footer-logo img { width: 210px; height: auto; }
.site-footer p, .footer-links li, .footer-contact { font-size: .875rem; }

.footer-contact address {
   color: rgba(255, 255, 255, .72);
   font-size: inherit;
   font-style: normal;
   line-height: 1.7;
}

.site-footer .footer-title { margin-bottom: 20px; color: var(--clr-white) !important; }
.site-footer p { color: rgba(255, 255, 255, .72); }

.footer-links li + li { margin-top: 10px; }

.footer-links a, .footer-contact a { color: rgba(255, 255, 255, .72); transition: color .25s ease; }
.footer-links a:hover, .footer-contact a:hover { color: var(--clr-secondary-light); }

.footer-contact i {
   width: 20px;
   flex: 0 0 20px;
   padding-top: 4px;
   color: var(--clr-secondary-light);
   text-align: center;
}

.footer-contact address {
   color: rgba(255, 255, 255, .72);
   font-style: normal;
   line-height: 1.7;
}

.footer-contact address strong { color: var(--clr-white); }
.footer-social { gap: 18px; }

.footer-social a {
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--clr-white);
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 50%;
   font-size: 1rem;
   transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.footer-social a:hover {
   color: var(--clr-primary-deep);
   background: var(--clr-secondary-light);
   border-color: var(--clr-secondary-light);
   transform: translateY(-2px);
}

/* FOOTER PARTNERS */

.footer-partners {
   background: var(--clr-white);
   border-top: 1px solid var(--clr-border);
   border-bottom: 1px solid var(--clr-border);
}

.footer-partners .footer-partners-title {
   color: var(--clr-primary-deep);
   text-align: center;
   text-transform: uppercase;
}

.footer-partner-logo-wrap {
   width: 190px;
   height: 95px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.footer-partner-logo {
   max-width: 100%;
   max-height: 78px;
   width: auto;
   height: auto;
}

.footer-partner-logo.visit-malaysia { max-height: 88px; }

@media (max-width: 575.98px) {
   .footer-partner-logo-wrap { width: 150px; height: 80px; }
   .footer-partner-logo { max-height: 64px; }
   .footer-partner-logo.visit-malaysia { max-height: 72px; }
}

/* Footer Bottom */

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom .container { padding-top: 16px; padding-bottom: 16px; }

.footer-bottom p { color: rgba(255, 255, 255, .55); font-size: .75rem; }

.footer-bottom a { color: var(--clr-secondary-light); }
.footer-bottom a:hover { color: var(--clr-white); }

@media (max-width: 767.98px) {
   .footer-main { padding-top: 50px; padding-bottom: 45px; }
   .footer-bottom .container { padding-top: 14px; padding-bottom: 14px; }
}

/* FOOTER RESPONSIVE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 991.98px) {
   .footer-brand { text-align: center; }
   .footer-contact-col { margin-top: 15px; }
   .footer-contact { max-width: 650px; }
}

@media (max-width: 767.98px) {
   .footer-main {
      padding-top: 50px;
      padding-bottom: 45px;
      row-gap: 2.75rem;
      text-align: center;
   }

   .footer-contact-col { margin-top: 0; }
   .site-footer .footer-title { margin-bottom: 16px; }
   .footer-links li + li { margin-top: 12px; }

   .footer-contact {
      max-width: 460px;
      margin: 0 auto;
      row-gap: 14px !important;
   }

   .footer-contact > div { justify-content: center; }
   .footer-contact > div > i { display: none; }
   .footer-contact address { text-align: center; }
   .footer-social { justify-content: center; }
   .footer-bottom .container { padding-top: 14px; padding-bottom: 14px; }
   .footer-bottom .row { row-gap: 6px; }
}