@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;height:100%;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:100%}.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}.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}header{width:100%;display:flex;background-color:#052243d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);justify-content:space-between;position:sticky;top:0;z-index:1000;box-shadow:0 4px 30px #0000004d;border-bottom:1px solid rgba(255,255,255,.05);transition:all .3s ease}nav{display:flex;align-items:center}.logo-nav-img{padding:10px 5px;width:auto;height:120px}nav a{font-family:Play,serif;text-decoration:none;font-size:24px}.nav-link-div{padding:6px 10px;margin:0 15px;position:relative;overflow:hidden;color:#cddbfa;z-index:0;text-shadow:2px 2px 2px rgb(2,16,30);transition:box-shadow .7s ease,color .7s 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 .7s ease,height .7s ease}.nav-link-div:hover{color:#fff;cursor:pointer;box-shadow:0 4px 10px #009fb080}.nav-link-div:hover:before{width:200%;height:200%}.nav-link-div svg{align-items:center;margin-right:10px;margin-bottom:5px}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%}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:120px}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}.up-button{position:fixed;bottom:25px;right:25px;z-index:9999;background-color:#1f3a57;border-radius:15px;padding:14px;transition:.3s;box-shadow:0 4px 15px #0006;border:1px solid rgba(255,255,255,.1)}.up-button svg{font-size:25px}.up-button svg:hover{color:#cddbfa}.up-button:hover{cursor:pointer;background-color:#334f6b;transition:.3s}.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}