@charset "UTF-8";

/* =========================================
   01. Google Fonts
========================================= */
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

/* =========================================
   02. Variables
========================================= */
:root {
  /* Colors */
  --primary:#111;
  --secondary:#555;
  --border:rgba(17, 17, 17, 0.10);
  --bg:#EDECE8;
  --black:#000;
  --white:#FFF;
  --text-muted:#666;
  --border-light:#DADADA;
  --overlay-dark:rgba(0,0,0,0.45);

  /* Loader bg fallback */
  --action: var(--black);

  /* Fonts */
  --font_bai:"Bai Jamjuree", sans-serif;

  /* Z-Index scale */
  --z-progress:99;
  --z-overlay:900;
  --z-header:9999;
  --z-drawer:99999;
  --z-loader:100000;

  /* Typography */
  --fs-10:10px; --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; 
  --fs-28:28px; --fs-30:30px; --fs-35:35px; --fs-40:40px; --fs-42:42px; --fs-48:48px; --fs-50:50px; 
  --fs-60:60px; --fs-70:70px; --fs-75:75px; --fs-80:80px; --fs-90:90px; --fs-100:100px; --fs-150:150px;

  --lh-1:1;
  --lh-16:16px; --lh-18:18px; --lh-20:20px; --lh-22:22px; --lh-24:24px; --lh-26:26px;
  --lh-30:30px; --lh-40:40px; --lh-45:45px; --lh-50:50px; --lh-80:80px; --lh-145:145px;

  --ls--0_48:-0.48px; --ls--0_5:-0.5px; --ls--0_8:-0.8px; --ls--1_2:-1.2px; --ls--2:-2px; --ls--2_5:-2.5px; --ls--10:-10px;

  /* Spacing Tokens */
  --sp-0:0; --sp-3:3px; --sp-5:5px; --sp-8:8px; --sp-10:10px;
  --sp-12:12px; --sp-14:14px; --sp-16:16px; --sp-18:18px; --sp-20:20px; --sp-25:25px; --sp-30:30px; 
  --sp-35:35px; --sp-40:40px; --sp-45:45px; --sp-50:50px; --sp-60:60px; --sp-70:70px; --sp-80:80px;
  --sp-100:100px; --sp-130:130px; --sp-150:150px; --sp-180:180px; --sp-200:200px; --sp-250:250px; --sp-270:270px; --sp-300:300px; 
  --sp-340:340px; --sp-400:400px; --sp-500:500px; --sp-560:560px; --sp-600:600px; --sp-700:700px; --sp-800:800px; --sp-1890:1890px;

  /* Radius */
  --radius-2:2px; --radius-5:5px; --radius-50:50px; --radius-500:500px;

  /* Motion */
  --dur-200:0.2s; --dur-300:0.3s; --dur-350:0.35s; --dur-400:0.4s; --dur-450:0.45s; --dur-500:0.5s;

  --ease:ease; --ease-in-out:ease-in-out; --linear:linear;

  /* Global Radius Sync */
  --radius-card:10px; --radius-card-hover:10px; --radius-img:var(--radius-card);
}

/* =========================================
   03. Reset & Base
========================================= */
* { margin:0; padding:0; }
*,*::before,*::after { box-sizing:border-box; }

ul,ol,p,h1,h2,h3,h4,h5,h6,img { margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family:var(--font_bai);
  line-height:1;
  font-size:var(--fs-16);
  font-weight:500;
  letter-spacing:var(--ls--0_48);
  color:var(--primary);
}

h1,h2,h3,h4,h5,h6 {
  color:var(--primary);
  line-height:1.2;
  font-weight:500;
}

img { max-width: 100%; height: auto; display: block; border-radius:var(--radius-img); }

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

button { background-color:transparent; border:0; }
button,input,textarea,select { font:inherit; }

:focus-visible { outline:2px solid rgba(17,17,17,.5); outline-offset:2px; }
strong { font-weight:500; }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================
   04. Typography
========================================= */
h1{font-size:var(--fs-48);}
h2{font-size:var(--fs-40);}
h3{font-size:var(--fs-30);}
h4{font-size:var(--fs-24);}
h5{font-size:var(--fs-20);}
h6{font-size:var(--fs-18);}

/* =========================================
   05. Language Switch
========================================= */
.lang-en,.lang-zh { transition:opacity var(--dur-200) var(--ease); }
[data-site-lang="en"] .lang-zh,
[data-site-lang="zh"] .lang-en { display:none !important; }

/* =========================================
   06. Layout & Utilities
========================================= */
main { display:inline-block; width:100%; overflow:hidden; }

.container { --bs-gutter-x: var(--sp-30); }
.rr-container-1890 { max-width:var(--sp-1890); }

.rr-pos-rel { position:relative; }
.rr-ov-hidden { overflow:hidden; }
.rr-bg-light-gray { background-color:var(--bg); }

hr { margin:0; border-top:1px solid var(--border); opacity:1; }

/* =========================================
   07. Scrollbar
========================================= */
::-webkit-scrollbar{width:var(--sp-5);}
::-webkit-scrollbar-track{background:#d6d6d6;}
::-webkit-scrollbar-thumb{background:#888;}
::-webkit-scrollbar-thumb:hover{background:#555;}

/* =========================================
   08. Section Spacing
========================================= */
.section-spacing{
  --pt: var(--sp-180);
  padding: var(--pt) 0;
}

.section-spacing-140{
  --pt: var(--sp-150);
  padding: var(--pt) 0;
}

.section-spacing-top-140{
  --pt: var(--sp-150);
  padding-top: var(--pt);
}

/* Responsive scaling */
@media (max-width:1919px){
  .section-spacing,
  .section-spacing-140,
  .section-spacing-top-140{ --pt: var(--sp-100); }
}
@media (max-width:1399px){
  .section-spacing,
  .section-spacing-140,
  .section-spacing-top-140{ --pt: var(--sp-80); }
}
@media (max-width:991px){
  .section-spacing,
  .section-spacing-140,
  .section-spacing-top-140{ --pt: var(--sp-60); }
}

/* =========================================
   09. Side Info & Offcanvas
========================================= */
.offcanvas-overlay{
  position:fixed;height:100%;width:100%;
  background:#000;z-index:var(--z-overlay);
  top:0;right:0;opacity:0;visibility:hidden;
  transition:all var(--dur-500);
}

.side-info-close{
  font-size:var(--fs-20);
  transition:all var(--dur-300) var(--linear);
  color:var(--black);
  width:var(--sp-40);height:var(--sp-40);
  border:1px solid var(--black);
  border-radius:var(--radius-5);
  line-height:38px;
}
.side-info-close:hover{ transform:rotate(90deg); }

.side-info{
  background:var(--white);
  padding:var(--sp-40) var(--sp-45);
  position:fixed; right:0; top:0;
  width:var(--sp-500); height:100%;
  transform:translateX(calc(100% + 80px));
  transition:transform var(--dur-450) var(--ease-in-out), opacity var(--dur-450) var(--ease-in-out);
  z-index:var(--z-drawer);
  overflow-y:scroll;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.side-info ::-webkit-scrollbar{ display:none; }
.side-info.info-open{ opacity:1; transform:translateX(0); }

@media (max-width:1199px){ .side-info{ width:var(--sp-500); } }
@media (max-width:575px){ .side-info{ width:var(--sp-250); padding:var(--sp-30) var(--sp-20);} }

/* =========================================
   10. Header & Mobile Menu
========================================= */
.offset-header{ display:flex; justify-content:space-between; align-items:center; }

.mobile-menu{ margin-top:var(--sp-40); padding-bottom:var(--sp-50); }
.mobile-menu.mean-container .mean-nav{ background:none; margin-top:0; }

.mobile-menu.mean-container .mean-nav > ul{
  width:100%; list-style-type:none; display:block !important;
}
.mobile-menu.mean-container .mean-nav > ul > li:last-child > a{
  border-bottom:1px solid var(--border);
}

.mobile-menu.mean-container .mean-nav .new{
  font-size:var(--fs-10);
  font-weight:600;
  background:#FFA38E;
  color:#999;
  padding:var(--sp-3) var(--sp-8);
  line-height:1;
  display:flex;
  align-items:center;
  border-radius:var(--radius-2);
}

.mobile-menu.mean-container .mean-nav ul li a{
  width:100%;
  padding:var(--sp-16) 0;
  font-weight:500;
  font-size:var(--fs-18);
  line-height:1;
  color:var(--primary);
  text-transform:capitalize;
  border-top:1px solid var(--border);
  display:flex;
  gap:var(--sp-8);
  justify-content:flex-start;
  align-items:center;
  outline:none;
  transition:transform var(--dur-400) var(--ease), box-shadow var(--dur-400) var(--ease);
}
.mobile-menu.mean-container .mean-nav ul li a:hover{ color:var(--primary); }

.mobile-menu.mean-container .mean-nav ul li a.mean-expand{
  height:48px;
  justify-content:end;
  font-weight:300;
  border:none !important;
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover{
  background:rgba(255,255,255,.1);
}

/* =========================================
   11. Preloader & Progress
========================================= */
.loader-wrap{
  position:fixed; height:100vh; width:100vw;
  left:0; top:0; right:0;
  display:flex; overflow:hidden;
  align-items:center; justify-content:center;
  background:var(--action, var(--black));
  z-index:var(--z-loader);
}
.loader-wrap svg{
  position:absolute; top:0;
  width:100vw; height:110vh;
  fill:#000;
}
.loader-wrap .loader-wrap-heading .load-text{
  font-size:var(--fs-100);
  font-weight:800;
  text-transform:uppercase;
  color:var(--white);
  z-index:20;
}
.load-text span{ animation:loading 1s infinite alternate; }
.load-text span:nth-child(1){animation-delay:0s;}
.load-text span:nth-child(2){animation-delay:.1s;}
.load-text span:nth-child(3){animation-delay:.2s;}
.load-text span:nth-child(4){animation-delay:.3s;}
.load-text span:nth-child(5){animation-delay:.4s;}
.load-text span:nth-child(6){animation-delay:.5s;}

@keyframes loading { 0%{opacity:1;} 100%{opacity:0;} }

.progress-wrap{
  position:fixed;
  right:var(--sp-20); bottom:var(--sp-20);
  height:var(--sp-50); width:var(--sp-50);
  cursor:pointer;
  display:block;
  border-radius:var(--radius-50);
  z-index:var(--z-progress);
  opacity:0; visibility:hidden;
  transform:translateY(-100px);
  transition:all 300ms linear;
}
.progress-wrap.active-progress{
  opacity:1; visibility:visible;
  transform:translateY(0);
}

/* =========================================
   12. Media/Card radius leak prevention
========================================= */
.works__thumb,
.works-section__thumb,
.services__thumb,
.about-overview__thumb,
.projects__item{
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:border-radius var(--dur-300) var(--ease);
}
.works__thumb:hover,
.works-section__thumb:hover,
.services__thumb:hover,
.about-overview__thumb:hover,
.projects__item:hover{
  border-radius:var(--radius-card-hover);
}

/* Optional card catch-all */
.card,[class*="card"]{
  border-radius:var(--radius-card);
  transition:border-radius var(--dur-300) var(--ease);
}
.card:hover,[class*="card"]:hover{ border-radius:var(--radius-card-hover); }

/* =========================================
   13. Section Titles
========================================= */
.section-title__wrapper{
  gap:var(--sp-30);
  display:grid;
  grid-template-columns:var(--sp-400) var(--sp-800) 1fr;
}
.section-title__wrapper .section-sub-title{
  font-size:var(--fs-16);
  font-weight:500;
  margin-top:var(--sp-10);
  line-height:var(--lh-20);
  margin-left:var(--sp-50);
  position:relative;
  letter-spacing:var(--ls--0_48);
}
.section-title__wrapper .section-title{
  font-size:var(--fs-50);
  font-weight:500;
  line-height:var(--lh-50);
  letter-spacing:var(--ls--2_5);
}
.section-title__wrapper .desc{ margin-top:var(--sp-10); }

.section-subtitle__wrap .subtitle{
  font-size:var(--fs-16);
  font-weight:450;
  line-height:var(--lh-20);
  color:var(--primary);
}
.section-subtitle__wrap .white{ color:var(--white); }

.section-title__wrap{ display:flex; justify-content:space-between; }
.section-title__wrap.project{ padding:var(--sp-100) 0 var(--sp-80); }
.section-title__wrap.work{ display:block; text-align:center; }

.section-title__wrap .mission-title{
  display:block;
  padding-bottom:var(--sp-130);
  text-align:center;
  margin:0 auto;
}
.section-title__wrap .section-title{
  font-weight:300;
  font-size:var(--fs-150);
  line-height:var(--lh-145);
  color:var(--black);
  text-transform:uppercase;
}
.section-title__wrap .section-title span{
  display:block;
  text-align:right;
  margin-top:-15px;
  padding-left:var(--sp-500);
}
.section-title__wrap .number-text{
  font-weight:300;
  font-size:var(--fs-150);
  line-height:var(--lh-24);
  padding-top:var(--sp-60);
  color:var(--black);
  letter-spacing:-0.03em;
}

.bar-icon{
  width:var(--sp-30);
  height:18px;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  justify-content:space-between;
  transition:color var(--dur-200) var(--ease);
}
.bar-icon span{
  width:100%;
  height:2px;
  display:inline-block;
  background:var(--primary);
  transition:color var(--dur-200) var(--ease);
}

/* =========================================
   14. Responsive Media Queries
========================================= */
@media (max-width:1919px){
  .section-title__wrapper{ grid-template-columns:400px 650px 1fr; }
  .section-title__wrap .number-text{ font-size:var(--fs-100); }
}
@media (max-width:1399px){
  .section-title__wrapper{ grid-template-columns:300px 500px 1fr; }
  .section-title__wrap .section-title span{ padding-left:var(--sp-270); }
  .section-title__wrap .section-title{ font-size:var(--fs-75); line-height:var(--sp-100); }
  .section-title__wrap .number-text{ font-size:var(--fs-75); }
}
@media (max-width:1199px){
  .section-title__wrapper{ grid-template-columns:130px var(--sp-500) 1fr; }
  .section-title__wrap .section-title{ font-size:var(--fs-60); line-height:88px; }
  .section-title__wrap .number-text{ font-size:var(--fs-60); }
}
@media (max-width:991px){
  .section-title__wrapper{ grid-template-columns:1fr; }
  .section-title__wrapper .section-title{ margin-top:0; letter-spacing:0; }
  .section-title__wrapper .section-title br{ display:none; }
  .section-title__wrapper .desc{ margin-top:0; }

  .section-subtitle__wrap.overview{ margin-top:0; padding-left:var(--sp-10); white-space:nowrap; }
  .section-title__wrap .section-title span{ padding-left:var(--sp-200); }
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand{ height:25px; }
}
@media (max-width:767px){
  .g-0{ padding-right:var(--sp-16); padding-left:var(--sp-16); }
  .row.g-0{ padding-right:0; padding-left:0; }

  .loader-wrap .loader-wrap-heading .load-text{ font-size:var(--fs-50); }
  .section-subtitle__wrap.overview{ margin-top:var(--sp-20); }
  .section-title__wrap .section-title span{ padding-left:var(--sp-150); }
  .section-title__wrap .section-title{ font-size:var(--fs-42); line-height:var(--lh-50); }
  .section-title__wrap .number-text{ font-size:var(--fs-50); }

  .mobile-menu.mean-container .mean-nav ul li a{ font-size:var(--fs-20); }
  .mobile-menu.mean-container .mean-nav ul li a.mean-expand{ height:50px; }
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand{ height:22px; }
}
@media (max-width:575px){
  .loader-wrap .loader-wrap-heading .load-text{ font-size:var(--fs-40); }
  .section-title__wrapper{ gap:var(--sp-20); }
  .section-title__wrapper .section-title{ font-size:var(--fs-30); line-height:40px; }
  .section-title__wrap{ flex-wrap:wrap; }
  .section-title__wrap.project{ padding:var(--sp-40) 0; }
  .section-title__wrap .mission-title{ padding-bottom:var(--sp-60); }
  .section-title__wrap .section-title span{ padding-left:0; text-align:left; }
  .section-title__wrap .section-title{ font-size:var(--fs-30); line-height:var(--lh-50); }
  .section-title__wrap .number-text{ font-size:var(--fs-35); }
}

/* br hiding: scoped ONLY */
@media (max-width:767px){
  .hero-section__title br,
  .section-title__wrapper .section-title br,
  .services__desc br{ display:none; }
}

/* =========================================
   15. Header & Menu
========================================= */
.header-area{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:var(--z-header);
  background:rgba(237,236,232,.8);
  backdrop-filter:blur(5px);
  transition:background var(--dur-300) var(--ease);
}
.header-area__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-50);
}
.header-area .header__nav{ margin-left:auto; }
.header-area .header-right{
  display:flex;
  align-items:center;
  gap:var(--sp-20);
}

/* Menu Base */
.main-menu > ul{ display:flex; }
.main-menu li{ position:relative; list-style:none; }

.main-menu li a{
  display:flex;
  align-items:center;
  font-weight:400;
  font-size:var(--fs-18);
  line-height:1;
  color:var(--primary);
  padding:var(--sp-40) var(--sp-16);
  text-transform:capitalize;
  transition:color var(--dur-300) var(--ease);
}
.header-area .main-menu li a{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-16);
  color:var(--black);
  padding:var(--sp-16) var(--sp-20);
}
.main-menu > ul > li:hover > a,
.header-area .main-menu li a:hover{ color:var(--secondary); }

/* Header Buttons & Toggles */
.header-area .rr-btn-primary{
  border:none;
  padding:var(--sp-16) var(--sp-20);
  color:var(--black);
  background:var(--bg);
}
.header-area .rr-btn-primary .text span,
.header-area .rr-btn-primary .right-icon{ color:var(--white); }

.header-area .header-right .side-toggle .bar-icon{
  width:35px; height:15px; overflow:visible;
}
.header-area .header-right .side-toggle .bar-icon span{
  height:2px;
  border-radius:var(--radius-500);
  display:block;
}
.header-area .header-right .side-toggle .bar-icon span:nth-child(2){
  margin-left:var(--sp-10);
}

@media (max-width:575px){
  .header-area .header-right .side-toggle{
    border-left:none;
    margin-left:0;
    padding:var(--sp-16) var(--sp-20);
  }
  .header-area .rr-btn-primary{ display:none; }
}

/* =========================================
   16. Hero Section
========================================= */
:root{
  --hero-pt: clamp(400px, 24vw, 600px);
  --hero-pb: var(--sp-50);
  --hero-gutter: var(--sp-30);
  --hero-title-size: clamp(35px, 8vw, 150px);
  --hero-title-ls: clamp(-2px, -0.8vw, -10px);
  --hero-desc-max: 190px;
  --hero-desc-top: clamp(90px, 16vw, 600px);
}

.hero-section__content{
  margin: 0 auto;
  padding: var(--hero-pt) 0 var(--hero-pb);
}

.hero-section__title{
  line-height: 1; 
  font-size: var(--hero-title-size);
  font-weight: 500;
  text-align: center;
  letter-spacing: var(--hero-title-ls);
  color: var(--primary);
  text-wrap: balance;
}

.hero-section__bottom{
  display:flex;
  margin: 0 var(--hero-gutter);
  align-items:center;
  justify-content:space-between;
  padding-bottom: var(--sp-18);
  gap: var(--sp-16);
}

.hero-section__bottom span{
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-20);
  color: var(--primary);
}

.hero-section__thumb {
  position: relative;
  overflow: hidden; 
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-section__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0,0,0);
  will-change: transform;
}

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

.hero-section__desc{
  position: absolute;
  top: var(--hero-desc-top);
  right: var(--hero-gutter);
  font-size: var(--fs-12);
  max-width: var(--hero-desc-max);
  line-height: var(--lh-20);
  text-align: right;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

@media (max-width: 1399px){
  .hero-section__desc{
    right: var(--sp-30);
  }
}

@media (max-width: 575px){
  .hero-section__desc{
    position: absolute; 
	height: 100svh;
    bottom: var(--sp-20); 
    right: var(--sp-20);
    left: auto;
    max-width: calc(100% - var(--sp-40));
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    text-align: left;
    font-size: var(--fs-14);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-section__thumb img{
    transition: none !important;
  }
}

/* =========================================
   17. About Overview
========================================= */
.about-overview__thumb{ position:relative; }
.about-overview__thumb img{ width:100%; height:100%; object-fit:cover; }

.about-overview__wrap{
  display:grid;
  gap:var(--sp-150);
  grid-template-columns:var(--sp-600) 84px 1fr;
}
@media (max-width:1919px){ .about-overview__wrap{ gap:var(--sp-60);} }
@media (max-width:1399px){ .about-overview__wrap{ gap:var(--sp-40); grid-template-columns:var(--sp-500) 84px 1fr;} }
@media (max-width:1199px){ .about-overview__wrap{ gap:var(--sp-25);} }
@media (max-width:991px){ .about-overview__wrap{ gap:var(--sp-16); grid-template-columns:var(--sp-340) 0 1fr;} }
@media (max-width:767px){ .about-overview__wrap{ grid-template-columns:1fr;} }

.about-overview__content{
  display:flex;
  flex-direction:column;
  gap:var(--sp-340);
  max-width:var(--sp-800);
  padding-top:32px;
  text-align:left;
}
@media (max-width:1199px){ .about-overview__content{ gap:var(--sp-40);} }
@media (max-width:767px){ .about-overview__content{ padding-top:0;} }

.about-overview__title{
  font-size:var(--fs-35);
  font-weight:500;
  line-height:var(--lh-50);
  margin-bottom:var(--sp-50);
  letter-spacing:var(--ls--2);
  color:var(--primary);
}
@media (max-width:1399px){ .about-overview__title{ font-size:var(--fs-42);} }
@media (max-width:1199px){ .about-overview__title{ font-size:34px; line-height:46px; letter-spacing:0;} }
@media (max-width:991px){ .about-overview__title{ font-size:var(--fs-28); line-height:35px; margin-bottom:25px;} }
@media (max-width:767px){ .about-overview__title{ padding-top:var(--sp-10);} }
@media (max-width:575px){ .about-overview__title{ font-size:25px; line-height:33px;} }

.about-overview__desc{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  max-width:var(--sp-600);
  color:var(--secondary);
}
@media (max-width:1919px){ .about-overview__desc{ max-width:100%; } }
.about-overview__desc.one{ margin-bottom:var(--sp-20); }

.about-overview__counter{ display:flex; align-items:center; }
@media (max-width:575px){ .about-overview__counter{ flex-wrap:wrap;} }

.about-overview__counter-item{
  padding:0 var(--sp-50);
  border-right:1px solid var(--border);
}
.about-overview__counter-item:first-child{ padding-left:0; }
.about-overview__counter-item:last-child{ padding-right:0; border-right:none; }

@media (max-width:1919px){ .about-overview__counter-item{ padding:0 var(--sp-16);} }
@media (max-width:1399px){ .about-overview__counter-item{ padding:0 var(--sp-20);} }
@media (max-width:1199px){ .about-overview__counter-item{ padding:0 12px;} }
@media (max-width:575px){ .about-overview__counter-item{ border-right:0;} }

.about-overview__counter-item h2{
  font-size:var(--fs-90);
  font-weight:600;
  line-height:var(--lh-80);
  color:var(--primary);
  letter-spacing:var(--ls--2);
}
@media (max-width:1399px){ .about-overview__counter-item h2{ font-size:var(--fs-48); letter-spacing:0;} }
@media (max-width:1199px){ .about-overview__counter-item h2{ font-size:31px;} }

.about-overview__counter-item p{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-22);
  color:var(--secondary);
}
@media (max-width:1199px){ .about-overview__counter-item p{ font-size:15px;} }

.about-overview__btn{ max-width:var(--sp-50); margin-top:var(--sp-30); }
.about-overview__icon svg{ position:absolute; top:var(--sp-30); left:var(--sp-30); z-index:2; }

/* =========================================
   18. About Sub Banner
========================================= */
.about-sub-banner__thumb{ position:relative; }
.about-sub-banner__thumb img{ width:100%; height:auto; }

.about-sub-banner__info{
  position:absolute;
  left:var(--sp-10);
  bottom:var(--sp-10);
  display:flex;
  gap:var(--sp-40);
  max-width:530px;
  padding:var(--sp-25) var(--sp-25) var(--sp-25) var(--sp-30);
  background:var(--white);
  border-radius:var(--radius-5);
}
@media (max-width:767px){
  .about-sub-banner__info{ position:inherit; left:0; bottom:0; max-width:100%; }
}
@media (max-width:575px){ .about-sub-banner__info{ flex-wrap:nowrap; } }

.about-sub-banner__item{ position:relative; }

.about-sub-banner__title,
.about-sub-banner__title span{
  font-size:var(--fs-30);
  line-height:var(--lh-30);
  color:var(--black);
}
.about-sub-banner__title{ font-weight:400; }
.about-sub-banner__title span{ font-weight:700; }
.about-sub-banner__title span sup{ top:-10px; left:-4px; }
@media (max-width:991px){
  .about-sub-banner__title,
  .about-sub-banner__title span{ font-size:var(--fs-28); }
}

.about-sub-banner__subtext{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  color:var(--text-muted);
  padding-top:var(--sp-30);
}

.about-sub-banner__tagline{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-30);
  text-align:right;
  color:var(--black);
  margin-bottom:var(--sp-12);
}

/* =========================================
   19. Services
========================================= */
.services__thumb{ position:relative; }
.services__thumb img{ width:100%; height:auto; object-fit:cover; }

.services__item{ text-align:right; }
.services__item:first-child,
.services__content:nth-child(2){ text-align:left; }

.services__item:nth-child(2){ padding-top:var(--sp-150); }
@media (max-width:1199px){ .services__item:nth-child(2){ padding-bottom:var(--sp-80);} }
@media (max-width:991px){ .services__item:nth-child(2){ padding-bottom:var(--sp-60);} }
@media (max-width:767px){ .services__item:nth-child(2){ padding-bottom:var(--sp-40);} }

.services__wrapper{
  display:grid;
  gap:var(--sp-300);
  justify-content:end;
  grid-template-columns:1fr var(--sp-800);
}
.services__wrapper:nth-child(2){ text-align:right; }

@media (max-width:1919px){ .services__wrapper{ gap:var(--sp-180); grid-template-columns:1fr var(--sp-700);} }
@media (max-width:1399px){ .services__wrapper{ gap:var(--sp-100); grid-template-columns:1fr var(--sp-600);} }
@media (max-width:1199px){ .services__wrapper{ gap:87px; grid-template-columns:1fr var(--sp-500);} }
@media (max-width:991px){ .services__wrapper{ gap:var(--sp-60); grid-template-columns:1fr var(--sp-340);} }
@media (max-width:767px){ .services__wrapper{ grid-template-columns:1fr;} }
@media (max-width:575px){ .services__wrapper{ gap:var(--sp-40);} }

.services__wrap .services__item{
  display:flex;
  flex-direction:column;
  gap:var(--sp-270);
}
@media (max-width:1199px){ .services__wrap .services__item{ gap:var(--sp-130);} }
@media (max-width:991px){ .services__wrap .services__item{ gap:var(--sp-80);} }
@media (max-width:767px){ .services__wrap .services__item{ gap:var(--sp-20);} }

.services__wrap-box .services__item:first-child{ text-align:right; }

.services__title{
  font-size:var(--fs-35);
  font-weight:500;
  margin:var(--sp-30) 0 var(--sp-5);
  letter-spacing:var(--ls--2);
  transition:color var(--dur-300) var(--ease);
}
.services__title:hover{ color:var(--secondary); }

@media (max-width:1199px){ .services__title{ font-size:var(--fs-40);} }
@media (max-width:991px){
  .services__title{ font-size:var(--fs-30); line-height:var(--lh-45); margin-top:28px; letter-spacing:0; }
}
@media (max-width:767px){ .services__title{ margin-top:var(--sp-40);} }
@media (max-width:575px){ .services__title{ font-size:var(--fs-24);} }

.services__number{
  position:absolute;
  left:-22px;
  bottom:var(--sp-10);
  display:block;
  transform:rotate(-90deg);
}
.services__number.one{
  left:auto;
  right:-22px;
  display:inline-block;
  transform:none;
}
@media (max-width:1919px){ .services__number.one{ right:-20px;} }
@media (max-width:1399px){ .services__number.one{ right:-22px;} }
@media (max-width:767px){
  .services__number{ left:0; bottom:-20px; transform:rotate(0); }
  .services__number.one{ left:0; right:auto; }
}
@media (max-width:575px){ .services__number{ bottom:-24px;} }

.services__desc{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--secondary);
}

/* =========================================
   20. Works & Projects
========================================= */
.works-section__wrapper{ position:relative; }

.works-section__subtext{
  position:absolute;
  right:9.5%;
  width:100%;
  display:block;
  text-align:center;
  text-transform:uppercase;
  color:var(--text-muted);
}
@media (max-width:1919px){ .works-section__subtext{ right:6.9%; } }
@media (max-width:1399px){ .works-section__subtext{ right:5.5%; } }
@media (max-width:1199px){ .works-section__subtext{ right:8.5%; } }
@media (max-width:991px){ .works-section__subtext{ right:-3.5%; } }
@media (max-width:767px){ .works-section__subtext{ left:0; text-align:right; } }
@media (max-width:575px){ .works-section__subtext{ padding-right:0; } }

.works-section__wrap{
  display:grid;
  gap:var(--sp-100) var(--sp-20);
  justify-content:space-between;
  grid-template-columns:repeat(3, 2fr);
}
@media (max-width:767px){
  .works-section__wrap{ gap:var(--sp-30) var(--sp-16); grid-template-columns:repeat(2, 2fr); }
}
@media (max-width:575px){ .works-section__wrap{ grid-template-columns:1fr; } }

.works-section__thumb,.works__thumb{ overflow:hidden; }
.works-section__thumb img,.works__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:all var(--dur-500) var(--ease-in-out);
}
.works-section__thumb img:hover,.works__thumb img:hover{ transform:scale(1.1); }

.work-hover-overlay{
  position:absolute;
  inset:0;
  background:var(--overlay-dark);
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity var(--dur-350) var(--ease);
}
.work-hover-inner h3{
  margin:var(--sp-50);
  font-size:var(--fs-16);
  color:var(--white);
  line-height:var(--lh-24);
}
.works__thumb:hover .work-hover-overlay,
.works__thumb:hover .work-hover-inner{
  opacity:1;
  transform:translateY(0);
}

.works-section .title{
  font-size:var(--fs-20);
  font-weight:500;
  margin-top:var(--sp-12);
  line-height:var(--lh-24);
  color:var(--primary);
  transition:all var(--dur-300) var(--ease-in-out);
}
.works-section .title:hover a{ color:var(--secondary); }

.works-section .meta .tag{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-24);
  color:var(--primary);
  display:inline-block;
}
.works-section .meta .date{
  display:block;
  font-size:var(--fs-20);
  font-weight:500;
  line-height:var(--lh-24);
  color:var(--primary);
}

.works__content{
  display:flex;
  margin-top:var(--sp-14);
  align-items:center;
  justify-content:space-between;
}
.works__title{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--black);
  transition:all var(--dur-300) var(--ease-in-out);
}
.works__title:hover{ color:var(--secondary); }

.works__wrap-one{
  display:grid;
  gap:var(--sp-20);
  grid-template-columns:repeat(3, var(--sp-560));
}
@media (max-width:1919px){ .works__wrap-one{ grid-template-columns:repeat(3, var(--sp-500)); } }
@media (max-width:1399px){ .works__wrap-one{ grid-template-columns:repeat(3, 360px);} }
@media (max-width:1199px){ .works__wrap-one{ grid-template-columns:repeat(3, 330px);} }
@media (max-width:991px){ .works__wrap-one{ grid-template-columns:1fr 1fr;} }
@media (max-width:575px){ .works__wrap-one{ grid-template-columns:1fr;} }

.works__sub-title{
  font-size:var(--fs-14);
  font-weight:500;
  line-height:var(--lh-24);
  color:var(--black);
  margin-bottom:var(--sp-8);
  text-transform:uppercase;
}
.works__item.one{ padding-left:81px; display:block; }
@media (max-width:1919px){ .works__item.one{ padding-left:0;} }

.works__btn{ margin-top:var(--sp-40); }
@media (max-width:575px){ .works__btn{ margin-top:var(--sp-25);} }

.works__btn .rr-btn-primary{ padding:var(--sp-16) 28.3px; border-radius:inherit; }
.works__btn .rr-btn-primary i{ transform:rotate(-51deg); }
.works__btn .rr-btn-primary .text span{ text-transform:inherit; }

/* Projects */
.projects__item{ position:relative; }
.projects .swiper-slide-active .projects__item .title,
.projects__item:hover .title{ transform:translate(0,0); }

.projects__item .title{
  position:absolute;
  left:var(--sp-20);
  bottom:var(--sp-20);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-26);
  color:var(--black);
  transition:all var(--dur-300);
  letter-spacing:var(--ls--1_2);
  transform:translate(0, 100px);
}
.projects__item .title:hover a{ color:var(--white); }

/* =========================================
   21. Awards
========================================= */
.awards-list__wrapper{
  display:grid;
  gap:var(--sp-30);
  grid-template-columns:150px 1fr 200px;
}
@media (max-width:1399px){ .awards-list__wrapper{ grid-template-columns:250px 1fr 355px; } }
@media (max-width:1199px){ .awards-list__wrapper{ grid-template-columns:150px 1fr 300px; } }
@media (max-width:991px){ .awards-list__wrapper{ grid-template-columns:1fr; } }

.awards-list__wrapper .awards-list__box{ display:flex; }

.awards-list__wrapper .awards-list__box .sub-title{
  position:relative;
  padding-left:var(--sp-50);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--primary);
  letter-spacing:var(--ls--0_48);
}
.awards-list__wrapper .awards-list__box .awards-list{ list-style:none; }

.awards-list__wrapper .awards-list__box .awards-list li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-10);
  color:var(--text-muted);
  font-size:var(--fs-40);
  font-weight:500;
  line-height:var(--lh-40);
  letter-spacing:var(--ls--2_5);
}
.awards-list__wrapper .awards-list__box .awards-list li:not(:last-child){ margin-bottom:var(--sp-30); }
.awards-list__wrapper .awards-list__box .awards-list li.active{ color:var(--primary); }

@media (max-width:1199px){ .awards-list__wrapper .awards-list__box .awards-list li{ font-size:var(--fs-30); } }
@media (max-width:575px){
  .awards-list__wrapper .awards-list__box .awards-list li{
    font-size:var(--fs-20);
    line-height:var(--lh-20);
    letter-spacing:var(--ls--0_5);
  }
}

.awards-list__wrapper .awards-list__box .awards-list li .award-title{
  font-size:inherit; line-height:inherit; font-weight:inherit; letter-spacing:inherit;
}
.awards-list__wrapper .awards-list__box .awards-list li .award-sub,
.awards-list__wrapper .awards-list__box .awards-list li span{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  letter-spacing:var(--ls--0_48);
}
.awards-list__wrapper .awards-list__box .awards-list li .award-sub{ color:var(--text-muted); }
.awards-list__wrapper .awards-list__box .thumb{ margin-top:auto; }
.awards-list__wrapper .awards-list__box .thumb img{ width:100%; height:100%; object-fit:cover; }

/* =========================================
   22. Footer
========================================= */
.footer-widget-wrapper{
  display:grid;
  grid-template-columns:645px 405px 405px auto;
}
@media (max-width:1919px){ .footer-widget-wrapper{ grid-template-columns:repeat(4, 1fr);} }
@media (max-width:767px){ .footer-widget-wrapper{ gap:var(--sp-30) 0; grid-template-columns:repeat(2, 1fr);} }
@media (max-width:575px){ .footer-widget-wrapper{ gap:0; grid-template-columns:1fr;} }

.footer-widget-box{
  display:flex;
  padding:var(--sp-35) 0 var(--sp-40);
  flex-direction:column;
}
@media (max-width:991px){ .footer-widget-box{ padding-bottom:var(--sp-20);} }
@media (max-width:767px){ .footer-widget-box{ padding-bottom:var(--sp-10);} }

.footer-widget-box:not(:last-child){ border-right:1px solid var(--white); }
@media (max-width:767px){ .footer-widget-box:not(:last-child){ border-right:none; } }

.footer-widget-box:not(:first-child){ padding-left:var(--sp-40); }
@media (max-width:1399px){ .footer-widget-box:not(:first-child){ padding-left:var(--sp-30);} }
@media (max-width:991px){ .footer-widget-box:not(:first-child){ padding-left:var(--sp-16);} }
@media (max-width:767px){ .footer-widget-box:not(:first-child){ padding-left:0;} }

.footer-widget-box .title{
  color:var(--text-muted);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  letter-spacing:var(--ls--0_48);
}
@media (max-width:575px){ .footer-widget-box .title{ margin-bottom:var(--sp-16);} }

.footer-widget-box .copyright-text{ margin-top:var(--sp-250); }
@media (max-width:1399px){ .footer-widget-box .copyright-text{ margin-top:var(--sp-200);} }
@media (max-width:575px){ .footer-widget-box .copyright-text{ margin-top:var(--sp-50);} }

.footer-widget-box .copyright-text .text{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  color:var(--primary);
  letter-spacing:var(--ls--0_48);
}

.footer-widget-box .footer-nav-list{
  margin-top:auto;
  list-style:none;
}

.footer-widget-box .footer-nav-list li{
  color:var(--primary);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  letter-spacing:var(--ls--0_48);
}

.footer-widget-box .footer-nav-list li a{
  position:relative;
  display:inline-block;
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-30);
  color:var(--primary);
  letter-spacing:var(--ls--0_48);
  overflow:hidden;
}

.footer-widget-box .footer-nav-list li a span{
  display:inline-block;
  transform:translateY(0%);
  transition:transform var(--dur-300) var(--ease);
}
.footer-widget-box .footer-nav-list li a::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:100%;
  width:100%;
  color:var(--primary);
  transition:top var(--dur-300) var(--ease);
}
.footer-widget-box .footer-nav-list li a:hover span{ transform:translateY(-100%); }
.footer-widget-box .footer-nav-list li a:hover::after{ top:0; }