@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--bodyBgColor:#000;--bodyColor:#fff;--conColor:#18181B;--borderColor:#e3e3e324;--titleColor:#fff;--subTitleColor:#e3e3e3b3;--bgNavColor:#292929;--greenColor:#30a13f;--headerImgShadow:#fff;--progColor:#fff;--buttomBgMainColor:#323232;--buttomMainColor:#ffffff;--cardTitleColor:#fff;--cardSubtitleColor:#e3e3e3b3;--cardGreenColor:#30a13f;--messageBgColor:#e3e3e3b3;--inputBgColor:var(--subTitleColor);--buttomFormColor:#ffffffea}.light{--bodyBgColor:#fff;--bodyColor:#000;--conColor:#eeeeee;--borderColor:#313131;--titleColor:#000;--subTitleColor:#313131b3;--bgNavColor:#e7e7e7;--greenColor:#003107;--headerImgShadow:#000000;--progColor:#fdfff500;--buttomMainColor:#ffffff;--crdColor:#353535;--messageBgColor:#ffffff00;--inputBgColor:#fff}*{margin:0;padding:0}*,*:before,*:after{box-sizing:inherit}html{font-family:Roboto,serif;box-sizing:border-box;scrollbar-color:white;scroll-behavior:smooth}::-webkit-scrollbar{width:.8rem;box-shadow:inset 0 0 2.5px .9px #fff;border-radius:20px}::-webkit-scrollbar-track{border-radius:20px}::-webkit-scrollbar-thumb{background:#fff;border-radius:20px;border:1px solid var(--greenColor)}body{background-color:var(--bodyBgColor);color:var(--bodyColor)}.container{border:2px solid var(--borderColor);width:80%;margin-left:auto;margin-right:auto;background-color:var(--conColor);padding:0 3rem}.divider{border-bottom:1px solid var(--borderColor);margin:3rem 0}li{list-style:none}a{text-decoration:none;color:initial;transition:.2s}.flex{display:flex;align-items:center}.border{border:1px solid red}button{all:unset;cursor:pointer;transition:.5s}button:active{scale:.8}img{width:22px}.scroll2Top{background-color:#000;opacity:.4;border:1px solid white;width:2.5rem;height:2.5rem;border-radius:50%;position:fixed;bottom:2rem;right:3%;text-align:center;transition:.3s;animation:scroll2Top .3s}.scroll2Top:hover{opacity:1}@keyframes scroll2Top{0%{bottom:0rem}to{bottom:2rem}}@media (max-width:1000px){.container{width:90%;padding:0 1rem}}@media (max-width:700px){.container{width:98%;padding:0 1rem}.scroll2Top{width:2rem;height:2rem}.scroll2Top:hover{opacity:1;width:2.1rem;height:2.1rem}}section.hero{margin-top:2rem}section.hero div.left-section{flex-grow:1}section.hero div.parent-avatar img.avatar{width:88px;background-color:var(--bodyColor);border-radius:50%;border:1px solid black;box-shadow:0 2px 4px #000000d8;transition:.6s}section.hero div.parent-avatar img.avatar:hover{border:none;box-shadow:none;background:linear-gradient(to bottom,#ffffff00 50%,var(--bodyColor) 100%)}section.hero h1.title{font-size:2.2rem;margin:20px 0;color:var(--titleColor)}section.hero p.sub-title{font-size:1.2rem;margin:20px 0 32px;color:var(--subTitleColor);width:60%;line-height:1.7rem}section.hero div.icons{gap:1rem}section.hero div.icons div.icon img{width:32px;background-color:var(--subTitleColor);border-radius:50%;border:2px solid black;transition:.3s;padding:1px;box-shadow:0 2px 4px #000000d8;cursor:pointer}section.hero div.icons div.icon img:hover{background-color:#fff;width:35px}@media (max-width:600px){section.hero div.animation{display:none}}header.flex{justify-content:space-between;padding:0 2.4rem;margin:1rem}header.flex button{all:unset;background-color:var(--subTitleColor);padding:5px;border-radius:50%;width:22px;height:22px;border:1px solid #000}header.flex button:active{scale:.8}header.flex button:hover{background-color:var(--titleColor);scale:1.2}header.flex button.menu{display:none}header.flex nav{background-color:var(--bgNavColor);padding:.77rem 1.6rem;border-radius:55px;box-shadow:0 2px 4px #000000d8}header.flex ul.flex{gap:16px}header.flex ul.flex li a{color:var(--titleColor);opacity:.8;font-size:.88rem;font-weight:500}header.flex ul.flex li a:hover{color:var(--greenColor);opacity:1;font-size:.9rem;letter-spacing:1px}header.flex button{font-size:1.2rem}header.flex button.them{all:unset}header.flex button.them img{cursor:pointer;width:50px;box-shadow:0 2px 4px #000000d8;border-radius:50%;transition:.5s}header.flex button.them img:active{scale:.8}header.flex button.them img:hover{width:50px;box-shadow:0 2px 4px var(--headerImgShadow);scale:1.1}header.flex div.fixed{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#9c9c9c44;z-index:11;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}header.flex div.fixed ul.modal{scale:1;width:85%;margin-left:auto;margin-right:auto;margin-top:2rem;border-radius:1rem;padding:1rem 2rem;background-color:var(--conColor);animation:modalScale .3s}@keyframes modalScale{0%{scale:.2}80%{scale:1.2}to{scale:1}}header.flex div.fixed ul.modal li{border-bottom:2px solid var(--borderColor);padding-bottom:.77rem;padding-top:.5rem}header.flex div.fixed ul.modal li:first-child{text-align:right;border-bottom:none;padding-bottom:0;padding-top:.2rem;transition:.5s}header.flex div.fixed ul.modal li img{transition:.5s}header.flex div.fixed ul.modal li img:hover{rotate:180deg;scale:1.2}header.flex div.fixed ul.modal li:last-child{border-bottom:none;padding-bottom:.77rem;padding-top:.5rem}header.flex div.fixed ul.modal li a{color:var(--titleColor)}header.flex div.fixed ul.modal li a:hover{color:var(--greenColor);opacity:1;font-size:.9rem;letter-spacing:1px}@media (max-width:700px){header.flex nav{display:none}header.flex button.menu{display:block}}main.flex{gap:2rem;align-items:start}main.flex section.left-section.flex{flex-direction:column;gap:10px}main.flex section.left-section.flex button{background-color:var(--buttomBgMainColor);color:var(--buttomMainColor);width:10rem;padding:.75rem 0;text-align:center;font-size:1.2rem;font-weight:500;text-transform:capitalize;opacity:.5;transition:.3s}main.flex section.left-section.flex button:hover{opacity:1}main.flex section.left-section.flex button.active{opacity:1;font-weight:700;letter-spacing:.6px;padding:.8rem 0;border:1px solid var(--greenColor);border-radius:5px}main.flex section.right-section.flex{flex-wrap:wrap;gap:1rem;justify-content:center}main.flex section.right-section .card{border:1px solid gray;transition:.3s;box-shadow:0 2px 8px #000000d8;border-radius:5px;background:linear-gradient(black 80%,var(--cardGreenColor) 100%);animation:card .5s}@keyframes card{0%{scale:.2}90%{scale:1.1}to{scale:1}}main.flex section.right-section .card:hover{border:1px solid var(--greenColor);scale:1.05;rotate:1deg;cursor:pointer}main.flex section.right-section .card img{border-radius:5px;transition:.3s}main.flex section.right-section .card .box{padding:1rem .4rem}main.flex section.right-section .card .box .title{color:var(--cardTitleColor)}main.flex section.right-section .card .box .sub-title{color:var(--cardSubtitleColor);font-size:.8rem;margin:.7rem 0}main.flex section.right-section .card .box .icons{justify-content:space-between}main.flex section.right-section .card .box .icons img{background-color:var(--cardSubtitleColor);padding:1px;border-radius:50%;transition:.3s;cursor:pointer}main.flex section.right-section .card .box .icons img:hover{background-color:#fff;padding:1px;border-radius:5px}main.flex section.right-section .card .box .icons .more{color:var(--subTitleColor);transition:.3s;cursor:pointer}main.flex section.right-section .card .box .icons .more:hover{color:#fff;letter-spacing:.1rem;font-size:1.1rem;padding:1px;border-radius:5px}@media (max-width:600px){main.flex{flex-direction:column;gap:2rem;align-items:center}main.flex section.left-section.flex{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}main.flex section.left-section.flex button{width:5rem;padding:.75rem .4rem;font-size:.8rem}}section.contact-us h1.title img{width:30px;background-color:var(--messageBgColor);border-radius:10%;transition:.3s;margin-right:1rem}section.contact-us h1.title img:hover{background-color:#fff;rotate:10deg}section.contact-us h1.title{font-size:2.1rem;color:var(--titleColor);margin-bottom:1rem}section.contact-us p.sub-title{color:var(--subTitleColor);margin-bottom:2rem}section.contact-us .succeeded{color:var(--greenColor)}section.contact-us .errors{color:red}section.contact-us label{color:var(--subTitleColor)}section.contact-us #email,section.contact-us #message{all:unset;background-color:var(--inputBgColor);border:2px solid black;width:16rem;padding:.5rem .7rem;margin-left:1rem;border-radius:5px;transition:.3s}section.contact-us #email:focus,section.contact-us #message:focus{border:2px solid var(--greenColor);scale:1.05}section.contact-us #email:hover,section.contact-us #message:hover{border:2px solid var(--greenColor)}section.contact-us #message{min-height:9rem;resize:vertical}section.contact-us .submit{background-color:var(--buttomFormColor);color:var(--greenColor);padding:.75rem 1.75rem;text-align:center;font-size:1.2rem;font-weight:500;text-transform:capitalize;opacity:.7;transition:.3s;margin-top:1.8rem;border:2px solid var(--greenColor)}section.contact-us .submit:hover{opacity:1;scale:.95}section.contact-us div.animation{margin-left:auto}@media (max-width:700px){section.contact-us form{display:flex;flex-direction:column;width:90%;margin-left:auto;margin-right:auto}section.contact-us form div.flex{flex-direction:column;align-items:start}section.contact-us #email,section.contact-us #message{width:100%;margin:0;margin-top:1rem;padding:.5rem 0}section.contact-us .submit{width:30%;margin-left:auto;margin-right:auto}section.contact-us div.animation{display:none}}footer.flex{justify-content:space-between;padding-bottom:1.8rem}footer.flex ul.flex{gap:1rem}footer.flex ul.flex a{color:var(--subTitleColor);font-size:.9rem;transition:.3s}footer.flex ul.flex a:hover{color:var(--greenColor);font-size:1rem;letter-spacing:.1rem;font-weight:700}footer.flex p{color:var(--subTitleColor);font-size:.9rem;transition:.3s}@media (max-width:800px){footer.flex{flex-direction:column;gap:1.5rem}}.prog{box-shadow:0 2px 8px #000000d8;justify-content:space-between;padding:15px 15%}.section1 .langBox{width:300px}.section1 img{width:80px;background-color:var(--progColor);border-radius:5px;padding:5px;margin:.5rem;transition:.3s}img:hover{scale:1.1;border-radius:15px}.section2 .anim{width:120px;background-color:var(--progColor);border-radius:5px;padding:5px;margin:.5rem;transition:.3s}.anim:hover{scale:1.1;border-radius:50%}