@import url(https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;800&family=Passion+One&family=Poppins:wght@500;600;700&family=Roboto:wght@100;400;500&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500&display=swap);.header-wrapper{margin:140px 0 280px;min-height:40vh;text-align:center;width:100%}@media only screen and (max-width:900px){.header-wrapper{margin:60px 0 120px}}.casestudytxt{color:#724600;display:block;font-weight:800;letter-spacing:-1px;line-height:100%;margin-top:20px;padding-bottom:10px;text-transform:uppercase}@media only screen and (max-width:1200px){.casestudytxt{margin-top:40px}}.header-logo{color:#f8c822;display:block;font-family:Kanit,sans-serif;font-size:120px;font-weight:800;letter-spacing:-.5px;text-shadow:0 4px 0 #c05300,0 8px 0 #be3f00,0 12px 0 #ad3a00,0 16px 0 #9c3400;word-spacing:20px}.header-logo>span{left:-5px;position:relative;text-align:center;z-index:0}@media only screen and (max-width:1200px){.header-logo{font-size:80px;letter-spacing:-7px;line-height:100%}}.contact-bar{display:flex;justify-content:center;margin-top:40px;width:100%}@media only screen and (max-width:900px){.contact-bar{margin-top:70px}}.contact-bar>.MuiLink-root,.contact-bar>.icon-link{margin:0 20px;text-decoration:none}@media only screen and (max-width:600px){.contact-bar>.MuiLink-root,.contact-bar>.icon-link{margin:0 15px}}@media only screen and (max-width:450px){.contact-bar>.MuiLink-root,.contact-bar>.icon-link{margin:0 10px}}@media only screen and (max-width:400px){.contact-bar>.MuiLink-root,.contact-bar>.icon-link{margin:0 8px}}.contact-bar>.MuiLink-root .MuiButton-root,.contact-bar>.icon-link .MuiButton-root{transform:scale(1.5)}.contact-bar>.MuiLink-root .MuiButton-root svg,.contact-bar>.icon-link .MuiButton-root svg{font-size:1.5rem}@media only screen and (max-width:900px){.contact-bar>.MuiLink-root .MuiButton-root,.contact-bar>.icon-link .MuiButton-root{transform:scale(1.05)}}@media only screen and (max-width:450px){.contact-bar>.MuiLink-root .MuiButton-root,.contact-bar>.icon-link .MuiButton-root{transform:scale(.9)}}@media only screen and (max-width:400px){.contact-bar>.MuiLink-root .MuiButton-root,.contact-bar>.icon-link .MuiButton-root{transform:scale(.8)}}.fade-in{animation-duration:.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;opacity:1;position:relative}@keyframes fadeInOpacity{0%{opacity:0;top:20px}to{opacity:1;top:0}}.fade-in-delay{animation-duration:1s;animation-iteration-count:1;animation-name:fadeInOpacityWithDelay;animation-timing-function:ease-in;opacity:1;position:relative}@keyframes fadeInOpacityWithDelay{0%{opacity:0;top:20px}50%{opacity:0;top:20px}to{opacity:1;top:0}}.img-bg{background-image:url(/static/media/main_bg_1.c2315e15303be64b12b0.webp);background-position:50%;content:"";display:block;height:100%;left:0;position:fixed;width:100%;z-index:0}.timeline-page{margin:-300px auto 0;max-width:1200px;padding:40px 20px 100px;position:relative}@media(max-width:768px){.timeline-page{margin-top:-200px;padding:20px 15px 60px}}.timeline-title{color:#f8c822;font-family:Kanit,sans-serif;font-size:4rem;font-weight:800;letter-spacing:-1px;margin-bottom:10px;text-align:center;text-shadow:0 2px 0 #c05300,0 4px 0 #be3f00,0 6px 0 #ad3a00}@media(max-width:768px){.timeline-title{font-size:2rem;text-shadow:0 1px 0 #c05300,0 2px 0 #be3f00,0 3px 0 #ad3a00}}.timeline-subtitle{color:#fffc;font-size:1.2rem;font-weight:500;margin-bottom:80px;text-align:center}@media(max-width:768px){.timeline-subtitle{font-size:.9rem;margin-bottom:40px}}.timeline-container{position:relative}.timeline-container:before{background:#f8c82266;bottom:0;box-shadow:0 0 20px #f8c82233;content:"";left:50%;position:absolute;top:0;transform:translateX(-50%);width:4px}@media(max-width:768px){.timeline-container:before{left:20px;width:3px}}.timeline-item{align-items:flex-start;display:flex;gap:0;margin-bottom:100px;position:relative}@media(max-width:768px){.timeline-item{flex-direction:column;margin-bottom:50px;padding-left:0}}.timeline-item:after{background:#f8c822;background:var(--accent-color,#f8c822);content:"";display:none;height:3px;position:absolute;top:38px;width:0;z-index:2}@media(max-width:768px){.timeline-item:after{top:30px;width:0}}.timeline-item.left:after{right:calc(50% + 40px)}@media(max-width:768px){.timeline-item.left:after{left:47px;right:auto}}.timeline-item.right:after{left:calc(50% + 40px)}@media(max-width:768px){.timeline-item.right:after{left:47px}}.timeline-item.left{justify-content:flex-end;padding-right:calc(50% + 40px)}@media(max-width:768px){.timeline-item.left{justify-content:flex-start;padding-left:60px;padding-right:0}}.timeline-item.left .timeline-dot{border-radius:0 50% 50% 0;margin-left:4px;margin-top:4px}@media(max-width:768px){.timeline-item.left .timeline-dot{border-radius:50%;margin-left:-4px}}.timeline-item.left .timeline-content{border-radius:0 12px 12px 12px}@media(max-width:768px){.timeline-item.left .timeline-content{border-radius:12px}}.timeline-item.right{justify-content:flex-start;padding-left:calc(50% + 40px)}@media(max-width:768px){.timeline-item.right{padding-left:60px}}.timeline-item.right .timeline-dot{border-radius:50% 0 0 50%}@media(max-width:768px){.timeline-item.right .timeline-dot{border-radius:50%}}.timeline-item.right .timeline-content{border-radius:12px 0 12px 12px}@media(max-width:768px){.timeline-item.right .timeline-content{border-radius:12px}}.timeline-dot{align-items:center;background:#f8c822;background:var(--accent-color,#f8c822);border-radius:50%;box-shadow:0 0 0 4px #f8c822,0 4px 12px #0006;box-shadow:0 0 0 4px var(--accent-color,#f8c822),0 4px 12px #0006;color:#000;display:flex;font-family:Kanit,sans-serif;font-size:1.5rem;font-weight:800;height:80px;justify-content:center;letter-spacing:-1px;position:absolute;top:0;width:80px;z-index:3}@media(max-width:768px){.timeline-dot{border:3px solid #000c;box-shadow:0 0 0 3px #f8c822,0 2px 8px #0006;box-shadow:0 0 0 3px var(--accent-color,#f8c822),0 2px 8px #0006;font-size:.75rem;height:32px;left:4px!important;top:0;width:32px}}@media(min-width:769px){.timeline-dot{left:50%!important;right:auto!important;transform:translateX(-50%)}}.timeline-connector{background:#f8c822;background:var(--accent-color,#f8c822);height:calc(100% - 40px);left:50%;opacity:.3;position:absolute;top:40px;transform:translateX(-50%);transform-origin:top;width:4px;z-index:1}@media(max-width:768px){.timeline-connector{left:30px}}.timeline-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0009;border:3px solid #f8c822;border:3px solid var(--accent-color,#f8c822);border-radius:12px;box-shadow:0 8px 32px #0006,inset 0 1px 0 #ffffff1a;max-width:500px;padding:20px 30px;position:relative;text-align:left;transition:transform .3s ease,box-shadow .3s ease}.timeline-item.left .timeline-content{border-radius:12px 0 12px 12px}.timeline-item.right .timeline-content{border-radius:0 12px 12px 12px;margin-top:-4px}.timeline-content:hover{box-shadow:0 12px 40px #00000080,0 0 30px #f8c822;box-shadow:0 12px 40px #00000080,0 0 30px var(--accent-color,#f8c822);transform:translateY(-4px)}@media(max-width:768px){.timeline-content{border-width:2px;max-width:100%;padding:12px 16px}.timeline-item.left .timeline-content,.timeline-item.right .timeline-content{border-radius:12px;margin-top:0}}.timeline-header{align-items:center;border-bottom:2px solid #f8c822;border-bottom:2px solid var(--accent-color,#f8c822);display:flex;gap:15px;justify-content:space-between;margin-bottom:20px;padding-bottom:15px}@media(max-width:768px){.timeline-header{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:12px;padding-bottom:10px}}.timeline-period{background:#f8c822;background:var(--accent-color,#f8c822);border-radius:6px;color:#000;flex-shrink:0;font-size:.85rem;font-weight:700;letter-spacing:.5px;padding:6px 12px;text-transform:uppercase}@media(max-width:768px){.timeline-period{font-size:.7rem;padding:4px 8px}}.timeline-company{color:#f8c822;color:var(--accent-color,#f8c822);flex-grow:1;font-family:Kanit,sans-serif;font-size:1.8rem;font-weight:800;margin:0;text-shadow:2px 2px 4px #00000080}@media(max-width:768px){.timeline-company{font-size:1.3rem}}.timeline-role{color:#fffffff2;font-size:1.2rem;font-weight:600;margin:10px 0 5px}@media(max-width:768px){.timeline-role{font-size:1rem;margin:8px 0 4px}}.timeline-location{color:#ffffffb3;font-size:.9rem;font-style:italic}@media(max-width:768px){.timeline-location{font-size:.8rem}}.timeline-projects{margin-top:20px}@media(max-width:768px){.timeline-projects{margin-top:12px}}.project-section{margin-bottom:25px}.project-section:last-child{margin-bottom:0}@media(max-width:768px){.project-section{margin-bottom:15px}}.project-name{border-left:3px solid #f8c822;border-left:3px solid var(--accent-color,#f8c822);color:#f8c822;color:var(--accent-color,#f8c822);font-size:1.1rem;font-weight:700;margin-bottom:10px;padding-left:15px}@media(max-width:768px){.project-name{border-left-width:2px;font-size:1rem;margin-bottom:8px;padding-left:10px}}.timeline-highlights{list-style:none;margin:15px 0 0;padding:0}.timeline-highlights li{color:#ffffffe6;font-size:.95rem;line-height:1.6;margin-bottom:12px;padding-left:25px;position:relative}.timeline-highlights li:before{color:#f8c822;color:var(--accent-color,#f8c822);content:"▸";font-size:1.2rem;font-weight:700;left:0;position:absolute}@media(max-width:768px){.timeline-highlights li{font-size:.85rem;line-height:1.5;margin-bottom:8px;padding-left:18px}.timeline-highlights li:before{font-size:1rem}}html{scroll-behavior:smooth}.collage-gallery{background:#0000;margin:-100px auto 0;max-width:800px;padding:0;position:relative;width:100%}@media(max-width:767px){.collage-gallery{margin-top:0;padding:20px 10px}}.collage-gallery .gallery-grid{grid-gap:8px;display:grid;gap:8px;grid-auto-flow:dense;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:0;width:100%}@media(max-width:767px){.collage-gallery .gallery-grid{gap:6px;grid-template-columns:repeat(2,1fr)}}@media(min-width:768px){.collage-gallery .gallery-grid{gap:8px;grid-template-columns:repeat(4,1fr)}}@media(min-width:1200px){.collage-gallery .gallery-grid{gap:8px;grid-template-columns:repeat(6,1fr)}}.collage-gallery .gallery-tile{background:#0000001a;border-radius:8px;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;cursor:pointer;overflow:hidden;position:relative;transition:all .3s ease}.collage-gallery .gallery-tile:hover{box-shadow:0 20px 25px #00000026,0 10px 10px #0000001a}.collage-gallery .gallery-tile .tile-inner{height:100%;overflow:hidden;position:relative;width:100%}.collage-gallery .gallery-tile .tile-inner img{display:block;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease;width:100%}.collage-gallery .gallery-tile .tile-inner:hover img{transform:scale(1.05)}.collage-gallery .tile-small{aspect-ratio:1/1;grid-column:span 1;grid-row:span 1}@media(max-width:767px){.collage-gallery .tile-small{aspect-ratio:4/3;grid-column:span 1}}.collage-gallery .tile-medium{aspect-ratio:1/1;grid-column:span 2;grid-row:span 2}@media(max-width:767px){.collage-gallery .tile-medium{aspect-ratio:1/1;grid-column:span 2;grid-row:span 2}}.collage-gallery .tile-medium-tall{aspect-ratio:2/3;grid-column:span 2;grid-row:span 3}@media(max-width:767px){.collage-gallery .tile-medium-tall{aspect-ratio:3/4;grid-column:span 2;grid-row:span 2}}.collage-gallery .tile-tall{aspect-ratio:1/2;grid-column:span 2;grid-row:span 4}@media(max-width:767px){.collage-gallery .tile-tall{aspect-ratio:2/3;grid-column:span 2;grid-row:span 3}}.collage-gallery .tile-wide{aspect-ratio:3/2;grid-column:span 3;grid-row:span 2}@media(max-width:767px){.collage-gallery .tile-wide{aspect-ratio:4/3;grid-column:span 2;grid-row:span 2}}.collage-gallery .tile-large{aspect-ratio:4/3;grid-column:span 4;grid-row:span 3}@media(max-width:767px){.collage-gallery .tile-large{aspect-ratio:16/9;grid-column:span 2;grid-row:span 2}}.collage-gallery .gallery-tile:before{background:linear-gradient(135deg,#ffffff0d,#0000001a);bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;z-index:1}.collage-gallery .gallery-tile:hover:before{opacity:1}@media(max-width:767px){.collage-gallery{padding:0}.collage-gallery .gallery-grid{gap:8px;grid-template-columns:repeat(2,1fr)}}.lightbox{align-items:center;animation:lightboxFadeIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000f2;bottom:0;cursor:pointer;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:9999}@keyframes lightboxFadeIn{0%{opacity:0}to{opacity:1}}.lightbox .lightbox-content{align-items:center;animation:lightboxZoomIn .3s ease;cursor:default;display:flex;justify-content:center;max-height:95vh;max-width:600px;min-width:600px;overflow-x:hidden;overflow-y:auto;position:relative}@media(max-width:767px){.lightbox .lightbox-content{max-width:90vw;min-width:90vw}}@keyframes lightboxZoomIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.lightbox .lightbox-content img{border-radius:4px;box-shadow:0 20px 60px #00000080;height:auto;max-width:600px;object-fit:contain;width:100%}@media(max-width:767px){.lightbox .lightbox-content img{max-width:90vw}}.lightbox .lightbox-close{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000b3;border:2px solid #fffc;border-radius:50%;box-shadow:0 2px 8px #0000004d;color:#fff;cursor:pointer;display:flex;font-size:32px;height:50px;justify-content:center;line-height:1;padding:0;position:absolute;right:0;top:-50px;transition:all .2s ease;width:50px}@media(max-width:767px){.lightbox .lightbox-close{font-size:24px;height:40px;right:20px;top:20px;width:40px}}.lightbox .lightbox-close:hover{background:#000000e6;border-color:#fff;transform:rotate(90deg)}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#001b20f2;background-attachment:fixed;background-color:linear-gradient(0deg,#ffe53d,#feae01 35%,#ffe53d);background-position:50%;background-repeat:no-repeat;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}@media only screen and (min-width:1401px){body{padding:0 30px}}@media only screen and (max-width:1400px){body{padding:0 80px}}@media only screen and (max-width:900px){body{padding:0}}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
/*# sourceMappingURL=main.d814afa2.css.map*/