@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Play:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap";html{scroll-behavior:smooth}html,body{margin:0;padding:0;min-height:100vh;width:100%;overflow-x:hidden;position:relative;background:#031931;background:linear-gradient(190deg,#031931,#020f1f);background-repeat:no-repeat;background-attachment:fixed;background-size:cover}h1,h2,h3,h4,h5,h6{font-family:Kanit,serif}h1,h2,h3,h4,h5,h6,p,span{text-shadow:3px 3px 3px rgb(2,16,30)}p,span{font-family:Poppins,serif}#root{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}.main-content{flex:1;display:flex;align-items:center;position:relative;z-index:1}.fade-in{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity 2s ease-out,clip-path 3s ease-out;position:relative;z-index:1}.fade-in-visible{opacity:1;clip-path:inset(0 0 0 0)}.main-projects-container{background:#182d42;background:linear-gradient(0deg,#182d42,#234161);border:2px solid #3f75ae;margin-top:60px;margin-bottom:60px;padding-left:40px;padding-right:40px;padding-bottom:50px}.title-projects-row{margin-bottom:50px;border-bottom:2px solid #06a1b3}.title-projects-row h1{color:#cddbfa;font-size:50px;font-family:Kanit,serif;margin-top:30px;margin-bottom:30px}.projects-row1{border-bottom:4px solid #06a1b3}.projects-row2{border-top:4px solid #06a1b3}.projects-row1 .project-col{background-color:#23465e}.projects-row1 .project-col:nth-of-type(2){background-color:#2b6b96}.projects-row1 .project-col:nth-of-type(3){background-color:#2697c8}.projects-row1 .project-col:nth-of-type(4){background-color:#06a1b3}.projects-row2 .project-col:nth-of-type(4){background-color:#23465e}.projects-row2 .project-col:nth-of-type(3){background-color:#2b6b96}.projects-row2 .project-col:nth-of-type(2){background-color:#2697c8}.projects-row2 .project-col{background-color:#06a1b3}.projects-row1 .project-col,.projects-row2 .project-col{cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease}.projects-row1 .project-col:nth-of-type(1):hover{background-color:#2a5579;box-shadow:0 4px 15px #2a5579b3}.projects-row1 .project-col:nth-of-type(2):hover{background-color:#1f4f7f;box-shadow:0 4px 15px #1f4f7fb3}.projects-row1 .project-col:nth-of-type(3):hover{background-color:#1f7aa3;box-shadow:0 4px 15px #1f7aa3b3}.projects-row1 .project-col:nth-of-type(4):hover{background-color:#05828f;box-shadow:0 4px 15px #05828fb3}.projects-row2 .project-col:nth-of-type(4):hover{background-color:#2a5579;box-shadow:0 4px 15px #2a5579b3}.projects-row2 .project-col:nth-of-type(3):hover{background-color:#1f4f7f;box-shadow:0 4px 15px #1f4f7fb3}.projects-row2 .project-col:nth-of-type(2):hover{background-color:#1f7aa3;box-shadow:0 4px 15px #1f7aa3b3}.projects-row2 .project-col:hover{background-color:#05828f;box-shadow:0 4px 15px #05828fb3}.project-col h3{color:#e1edfa;font-family:Kanit,serif;font-size:30px;margin-top:30px}.project-col p{color:#e1edfa;font-family:Poppins,serif;font-size:20px;margin-top:15px;margin-bottom:50px;font-weight:400}.project-viewer-row{margin:100px 0}.image-container-viewer{position:relative;display:inline-block;border-radius:10px;overflow:hidden;box-shadow:6px 6px 6px 6px #112132;transition:transform .3s ease,margin .3s ease;width:100%}.image-container-viewer img{width:100%;border-radius:10px}.image-container-viewer .caption{font-family:Poppins,serif;position:absolute;bottom:0;left:0;right:0;background-color:#000000b3;color:#fff;text-align:center;padding:10px;opacity:0;transition:opacity .3s ease}.image-container-viewer:hover .caption{opacity:1}.image-container-viewer:hover{transform:scale(1.05);margin-right:20px}.project-viewer-col h1{margin:100px 0;color:#cddbfa}.project-viewer-col2 h2{color:#cddbfa;margin-left:20px;font-size:40px}.project-viewer-col2 p{width:100%;font-family:Poppins,serif;color:#cddbfa;margin-top:10px;margin-left:20px;font-size:18px}.project-viewer-col2 a{text-decoration:none;font-family:Play,serif;color:#deecfb;text-shadow:2px 2px 2px rgb(2,16,30);font-size:18px}.project-viewer-col2 svg{font-size:25px;margin-right:5px;text-shadow:2px 2px 2px rgb(2,16,30)}.project-viewer-col2 .see-more-button{margin-left:20px}.project-viewer-col2 .about-separation-bar{margin-left:50px;margin-right:30px}@media screen and (max-width: 768px){.main-projects-container{padding-left:15px;padding-right:15px}.image-container-viewer{width:108%;margin-bottom:40px}.image-container-viewer:hover{margin-right:0}.project-viewer-col2 h2{margin-top:20px;margin-left:0}.project-viewer-col2 p,.project-viewer-col2 .see-more-button{margin-left:0}.project-viewer-col2 .about-separation-bar{margin-left:auto;margin-right:auto}}.main-about-container{background:#182d42;background:linear-gradient(0deg,#182d42,#234161);border:2px solid #3f75ae;margin-top:60px;margin-bottom:60px;padding-left:40px;padding-right:40px;padding-bottom:50px}.about-row{margin-bottom:70px}.title-about-row{margin-bottom:50px;border-bottom:2px solid #06a1b3}.title-about-row h1{color:#cddbfa;font-size:50px;font-family:Kanit,serif;margin-top:30px;margin-bottom:30px}.about-col .image-container{position:relative;display:inline-block;border-radius:100px;overflow:hidden;box-shadow:6px 6px 6px 6px #112132;transition:transform .3s ease}.image-container img{border-radius:100px;width:340px;height:auto;transition:transform .3s ease}.image-container:hover .caption{opacity:1}.image-container:hover{transform:scale(1.05)}.about-col p{color:#b4c1e3;font-family:Poppins,serif;font-size:17px}.about-col span{font-size:19px;font-family:Poppins,serif;color:#cddbfa}.about-col h2{font-family:Kanit,serif;color:#cddbfa}.about-col h4{font-family:Kanit,serif;color:#cddbfa;margin-bottom:20px}.about-separation-bar{width:100%;border-bottom:2px solid #06a1b3;margin-bottom:20px;margin-top:10px}.about-col .image-container-2{position:relative;display:inline-block;border-radius:20px;overflow:hidden;box-shadow:6px 6px 6px 6px #112132;transition:transform .3s ease}.image-container-2 img{border-radius:20px;width:550px;height:400px;transition:transform .3s ease}.about-col .caption{font-family:Poppins,serif;position:absolute;bottom:0;left:0;right:0;background-color:#000000b3;color:#fff;text-align:center;padding:10px;opacity:0;transition:opacity .3s ease}.about-col .image-container-2:hover .caption{opacity:1}.about-col .image-container-2:hover{transform:scale(1.05)}#separationBarLanguages{margin-top:20px;margin-bottom:20px}@media screen and (max-width: 768px){.main-about-container{padding-left:15px;padding-right:15px}.image-container{margin-bottom:40px}.image-container img{width:100%;max-width:280px;height:auto}.image-container-2{margin-top:40px;width:90%}.image-container-2 img{width:100%;height:auto}.about-col{align-items:center!important;text-align:center!important}.about-col h2{font-size:32px}}header.main-header{width:100%;background-color:#052243d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:1000;box-shadow:0 4px 30px #0000004d;border-bottom:1px solid rgba(255,255,255,.06);transition:all .3s ease}.header-container{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.logo-link{display:flex;align-items:center;text-decoration:none}.logo-nav-img{padding:10px 5px;width:auto;height:100px;object-fit:contain;transition:height .3s ease,transform .3s ease}.logo-link:hover .logo-nav-img{transform:scale(1.03)}.desktop-nav{display:flex;align-items:center}nav a{font-family:Play,serif;text-decoration:none;font-size:22px;display:flex;align-items:center}.nav-link-div{padding:8px 14px;margin:0 10px;position:relative;overflow:hidden;color:#cddbfa;border-radius:8px;z-index:0;text-shadow:2px 2px 2px rgb(2,16,30);display:flex;align-items:center;transition:box-shadow .4s ease,color .4s ease,background-color .4s ease,transform .3s ease}.nav-link-div:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background-color:#06a1b3;border-radius:50%;transform:translate(-50%,-50%);z-index:-1;transition:width .6s ease,height .6s ease}.nav-link-div:hover{color:#fff;cursor:pointer;box-shadow:0 4px 12px #06a1b366}.nav-link-div:hover:before{width:200%;height:200%}.nav-link-div svg{display:inline-block;margin-right:8px;font-size:1.1em}.burger-btn{display:none;flex-direction:column;justify-content:space-between;width:44px;height:44px;background:#1f3a57a6;border:1px solid rgba(6,161,179,.4);border-radius:12px;padding:12px 10px;box-sizing:border-box;cursor:pointer;z-index:1005;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px #0000004d,0 0 10px #06a1b326;transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.burger-btn:hover{border-color:#06a1b3;box-shadow:0 4px 16px #06a1b366,0 0 15px #06a1b34d;background:#1f3a57e6}.burger-btn:active{transform:scale(.94)}.burger-line{display:block;width:100%;height:2.5px;background-color:#cddbfa;border-radius:4px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease,background-color .3s ease;transform-origin:center}.burger-btn.open .burger-line:nth-child(1){transform:translateY(7.5px) rotate(45deg);background-color:#00d2eb}.burger-btn.open .burger-line:nth-child(2){opacity:0;transform:scaleX(0)}.burger-btn.open .burger-line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);background-color:#00d2eb}.mobile-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#020c19b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9998;opacity:0;pointer-events:none;transition:opacity .35s ease}.mobile-backdrop.active{opacity:1;pointer-events:auto}.mobile-nav-drawer{position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100vh;background:#03162df7;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid rgba(6,161,179,.35);box-shadow:-10px 0 35px #0009,-2px 0 15px #06a1b326;z-index:9999;transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:24px 20px 30px;box-sizing:border-box;overflow-y:auto}.mobile-nav-drawer.open{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)}.drawer-title{font-family:Kanit,serif;font-size:20px;color:#cddbfa;font-weight:600;letter-spacing:.5px}.drawer-close-btn{background:#1f3a5799;border:1px solid rgba(6,161,179,.35);border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#cddbfa;font-size:18px;cursor:pointer;transition:all .3s ease}.drawer-close-btn:hover{background:#06a1b34d;border-color:#06a1b3;color:#00e5ff;transform:rotate(90deg)}.drawer-close-btn:active{transform:scale(.92) rotate(90deg)}.mobile-nav{display:flex;flex-direction:column;gap:14px;width:100%}.mobile-nav a{width:100%;text-decoration:none;font-size:19px}.mobile-nav-link{width:100%;margin:0;padding:14px 18px;font-size:19px;font-family:Play,serif;font-weight:500;background:#1f3a5773;border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;align-items:center;box-sizing:border-box;color:#cddbfa;transition:all .3s cubic-bezier(.16,1,.3,1)}.mobile-nav-link:before{display:none}.mobile-nav-link svg{color:#06a1b3;font-size:20px;margin-right:14px;margin-bottom:0;transition:transform .3s ease,color .3s ease}.mobile-nav-link:hover,.mobile-nav-link:active{background:#06a1b333;border-color:#06a1b399;color:#fff;transform:translate(6px);box-shadow:0 4px 18px #06a1b359}.mobile-nav-link:hover svg,.mobile-nav-link:active svg{color:#00e5ff;transform:scale(1.18)}@media (max-width: 768px){.header-container{padding:0 16px}.logo-nav-img{height:60px;padding:6px 0}.desktop-nav{display:none}.burger-btn{display:flex}}@media (min-width: 769px){.mobile-backdrop,.mobile-nav-drawer{display:none}}div.main-row{margin-top:50px}div.main-first-col{padding-right:30px;color:#cddbfa}div.main-first-col img{border-radius:200px;width:350px;height:auto;margin-bottom:40px}.mangodev-div{align-items:center;display:flex;margin-bottom:30px;margin-left:10px}.mangodev-div div{background-color:#06a1b3;width:70px;height:5px;margin-right:15px}.mangodev-div span{font-family:Poppins,serif;font-size:20px}div.main-first-col h1{font-size:50px;font-family:Kanit,serif}div.main-first-col h2{font-family:Kanit,serif;margin-top:20px;margin-bottom:30px}div.main-first-col p{color:#b4c1e3;font-family:Poppins,serif;font-size:17px}div.main-second-col{color:#cddbfa;padding-left:30px}.second-col-title{font-family:Kanit,serif;margin-bottom:20px;font-size:34px}.tools-col{background:#182d42;background:linear-gradient(0deg,#182d42,#234161);padding:20px 95px;margin:15px 0;transition:transform .3s ease;border:1px solid #3f75ae}.tools-col:hover{transform:scale(1.07);z-index:10}.tools-col svg{font-size:60px;margin-top:20px;margin-bottom:20px}.tools-col h4{font-family:Poppins,serif;margin:20px 0}.see-more-button{font-family:Play,serif;font-size:18px;padding:7px 15px;border:none;outline:none;background-color:transparent;text-align:center;width:auto;position:relative;overflow:hidden;text-shadow:2px 2px 2px rgb(2,16,30);color:#deecfb;z-index:0;white-space:nowrap;transition:box-shadow .7s ease,color .7s ease}.see-more-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background-color:#06a1b3;border-radius:50%;transform:translate(-50%,-50%);z-index:-1;transition:width .7s ease,height .7s ease}.see-more-button:hover{color:#fff;box-shadow:0 4px 10px #009fb080}.see-more-button:hover:before{width:200%;height:200%}@media (max-width: 768px){div.main-first-col{align-items:center;text-align:center;padding:0 20px}.mangodev-div{justify-content:center;margin-left:0}div.main-second-col{padding:0 20px;margin-top:60px;align-items:center;text-align:center}.second-col-title{text-align:center}.tools-col{padding:20px}}footer{width:100%;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;padding:15px 0;background-color:#052243d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -4px 30px #0000004d}.logo-header-img{width:auto;height:90px}footer p{color:#cddbfa;font-family:Poppins,serif;font-size:20px;margin:0 0 0 20px}.vertical-separator{width:5px;background-color:#06a1b3;height:30px;margin:0 10px}.social-media-div{margin-right:110px;margin-left:120px}.social-media-div svg{font-size:28px;color:#cddbfa;transition:.3s}.social-media-div svg:hover{color:#06a1b3;transition:.3s}@media screen and (max-width: 768px){footer{flex-direction:column;justify-content:center;gap:20px;padding:30px 0}footer p{margin:0 10px;font-size:16px;text-align:center;order:2}.logo-header-img{height:70px;margin-top:-20px;order:1}.social-media-div{margin:0;order:3}.vertical-separator{height:25px;margin:0 8px}.social-media-div svg{font-size:24px}}.main-contact-container{margin-top:80px;margin-bottom:80px;display:flex}.contact-col h1{color:#cddbfa;font-size:50px}.contact-col p{margin-top:20px;margin-bottom:40px;font-size:22px;color:#cddbfa}.social-contact-col a{font-family:Poppins,serif;font-size:23px;color:#cddbfa;text-decoration:none;margin-bottom:15px;transition:.3s}.social-contact-col a:hover{color:#06a1b3;transition:.3s}.social-contact-col svg{margin-bottom:5px;margin-right:10px}.contact-col form{margin-left:50px}.contact-col input{margin-bottom:25px;padding:10px;background-color:#1f3a57;outline:none;width:100%;border:1px solid #3f75ae;color:#cddbfa;font-family:Poppins,serif}.contact-col textarea{background-color:#1f3a57;outline:none;width:100%;padding:10px;border:1px solid #3f75ae;resize:none;color:#cddbfa;font-family:Poppins,serif;height:200px}.contact-col span{margin-top:30px;color:#cddbfa;font-size:20px}.contact-col input::placeholder{color:#607bb7}.contact-col textarea::placeholder{color:#607bb7}.contact-col input[type=submit]{font-family:Poppins,serif;width:100%;color:#cddbfa;background-color:#33659a;text-shadow:3px 3px 3px rgb(2,16,30);font-size:20px;font-weight:600;text-align:center;margin-top:20px;transition:.3s}.contact-col input[type=submit]:hover{background-color:#4990dc;transition:.3s}@media screen and (max-width: 768px){.contact-col form{margin-left:0;margin-top:40px;padding:0 15px}.main-contact-container{margin-top:40px;margin-bottom:40px;padding:0 15px}.contact-col h1{font-size:40px;text-align:center}.contact-col p,.contact-col span{font-size:18px;text-align:center}.social-contact-col{align-items:center;justify-content:center;text-align:center}.social-contact-col a{font-size:20px}}.scroll-to-top-btn{position:fixed;bottom:30px;right:30px;width:48px;height:48px;border-radius:14px;background-color:#1f3a57d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(6,161,179,.35);color:#cddbfa;display:flex;justify-content:center;align-items:center;font-size:20px;cursor:pointer;z-index:9999;box-shadow:0 8px 24px #0006,0 0 12px #06a1b326;opacity:0;pointer-events:none;transform:translateY(20px) scale(.85);transition:opacity .3s ease,transform .3s cubic-bezier(.175,.885,.32,1.275),background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;outline:none}.scroll-to-top-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.scroll-to-top-btn:hover{background-color:#06a1b3;color:#020f1f;border-color:#06a1b3;box-shadow:0 10px 25px #06a1b373,0 0 15px #06a1b34d;transform:translateY(-4px) scale(1.08)}.scroll-to-top-btn:active{transform:translateY(-1px) scale(.96);box-shadow:0 4px 12px #06a1b366}@media (max-width: 768px){.scroll-to-top-btn{bottom:20px;right:20px;width:44px;height:44px;font-size:18px;border-radius:12px}}