@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";html{scroll-behavior:smooth}.scroll2Top{background-color:#1976d2d9;position:fixed;bottom:20px;right:40px;width:50px;height:50px;border-radius:50%;color:#fff;font-size:25px;border:1px solid white;animation:button_to_top 1s infinite linear}.scroll2Top:hover{background-color:#1976d2}@media (max-width:991px){.scroll2Top{opacity:.5;transition:.3s}.scroll2Top:hover{opacity:1}}@keyframes button_to_top{0%,to{bottom:20px}50%{bottom:50px}}:root{--headerMainColor:#19c8fa}header{padding:0 10px;box-shadow:0 0 10px #ccc;height:65px;position:relative;background-color:var(--primaryColor)}header .container{justify-content:space-between;display:flex;align-items:center;border:rgba(63 63 70 .4)}header .container img{width:50px}header .container ul{display:flex;list-style:none}header .container ul li a{color:var(--Color);text-decoration:none;padding:20px 10px;display:block;font-size:20px;transition:.3s}header .container ul li a:hover,header .container ul li a.active{color:var(--headerMainColor);border-bottom:1px solid}header .container .menu{display:none;width:20px}header .container .menu span{background-color:#fff;height:2px;display:block;margin:3px 0;transition:.3s;border-radius:10px}header .container .menu span:first-child{width:100%}header .container .menu span:nth-child(2){width:80%;margin-left:auto;margin-right:0}header .container .menu span:last-child{width:100%}header .container .menu:hover span:nth-child(2){width:100%}header .container button{all:unset;font-size:25px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.3s}header .container button:hover{border:1px solid rgba(9,125,203);background-color:var(--primaryColor)}@media (max-width:676px){header .container ul{display:none;flex-direction:column;position:absolute;width:100%;top:45px;padding:0;margin-top:20px;transition:.3}header .container ul li a{position:relative;padding:20px}header .container ul li a.active,header .container ul li a:hover{border:0}header .container ul li a:after{content:"";position:absolute;bottom:0;width:0;height:1px;left:0;background-color:var(--headerMainColor);transition:.3s}header .container ul li a:hover:after,header .container ul li a.active:after{width:100%}header .container .menu{display:block}header .container .display{display:flex}}.hero{display:flex;width:100%;height:calc(100vh - 65px)}.hero .container{display:flex;justify-content:space-between;align-items:center}.hero .container .left{flex:1}.hero .container .left .image img{border-radius:50%;transition:.3s}.hero .container .left .image img:hover{box-shadow:2px 2px 30px #fff}.hero .container .left .text-info{margin:30px 0}.hero .container .left .text-info h1{margin:0 0 20px}.hero .container .left .text-info p{line-height:1.5;color:gray}.hero .container .left .links{display:flex;list-style:none}.hero .container .left .links a{font-size:40px;display:block;margin-right:30px;text-decoration:none;color:var(--color);border-radius:50%;transition:.3s}.hero .container .left .links a:hover{box-shadow:2px 2px 30px #fff}.hero .container .right{position:relative;width:500px;animation:top-and-down 5s linear infinite}.hero .container .right img{width:100%}@media (max-width:992px){.hero .left{text-align:center}.hero .left .links{justify-content:center}.hero .right{display:none}}@keyframes top-and-down{0%,to{top:-5%}50%{top:5%}}.main .container{display:flex;justify-content:space-between}.main .container nav{cursor:pointer;width:300px;display:flex;flex-direction:column;margin-right:20px}.main .container nav button{all:unset;border-radius:10px;padding:20px 0;border:1px solid rgba(9,125,203);text-align:center;margin-bottom:10px;opacity:.4;transition:.3s}.main .container nav button:hover,.main .container nav button.active{opacity:1}.main .container .view-projcet{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.main .container .view-projcet .card{border-radius:10px;transition:.3s;border:1px solid rgb(93,188,252)}.main .container .view-projcet .card:hover{border:1px solid rgba(9,125,203);rotate:1deg;scale:1.01;cursor:pointer}.main .container .view-projcet .card .image img{border-top-left-radius:10px;border-top-right-radius:10px;width:100%}.main .container .view-projcet .card .text-info{padding:10px}.main .container .view-projcet .card .text-info h3{margin-bottom:10px}.main .container .view-projcet .card .text-info p{color:gray;line-height:1.3;margin-bottom:10px}.main .container .view-projcet .card .text-info .icons{display:flex;align-items:center;justify-content:space-between}.main .container .view-projcet .card .text-info .icons .icon{display:flex;align-items:center;gap:20px}.main .container .view-projcet .card .text-info .icons .icon a{text-decoration:none;color:var(--Color);font-size:20px;border-radius:50%}.main .container .view-projcet .card .text-info .icons .icon a:hover{box-shadow:2px 2px 20px #fff}.main .container .view-projcet .card .text-info .icons .more{display:flex;align-items:center;gap:20px;color:#00f}.main .container .view-projcet .card .text-info .icons .more p{color:#00f;text-transform:capitalize;font-size:18px}@media (max-width: 992px){.main .container{flex-direction:column}.main .container nav{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;margin-bottom:20px}.main .container nav button{padding:10px;margin-right:10px;width:100px}}.content{padding-top:100px;padding-bottom:100px}.content .container .title h3{font-size:40px}.content .container .title h3 span{margin-right:20px}.content .container .title p{margin-top:10px;margin-bottom:50px;font-size:20px;color:gray}.content .container .box{display:flex;justify-content:space-between;align-items:center;gap:40px}.content .container .box form label{margin:20px 30px 20px 0;font-size:20px;color:gray;display:inline-block}.content .container .box form input,.content .container .box form textarea{all:unset;width:100%;padding:15px 15px 30px;display:inline-block;background-color:var(--primaryColor);border-radius:20px;border:1px solid rgb(93,188,252);margin-bottom:30px}.content .container .box form input:focus,.content .container .box form textarea:focus{border:1px solid rgba(9,125,203)}.content .container .box form textarea{height:100px}.content .container .box form button{all:unset;display:inline-block;padding:10px 20px;border:1px solid rgb(93,188,252);border-radius:10px;font-size:20px;cursor:pointer}.content .container .box form button:hover,.content .container .box form button:focus{background-color:var(--primaryColor);scale:.9}.content .container .box .image{position:relative;width:500px}.content .container .box .image img{animation:tops-and-downs 5s linear infinite;position:absolute;top:-100px;width:100%}@keyframes tops-and-downs{0%,to{top:-170px}50%{top:-110px}}@media (max-width:991px){.content .container{text-align:center}.content .container .box form{width:90%;margin-left:auto;margin-right:auto}.content .container .box form input,.content .container .box form textarea{padding:15px 0}.content .container .box .image{display:none}}footer{padding-top:40px;padding-bottom:40px}footer .container{display:flex;align-items:center;justify-content:space-between}footer .container ul{display:flex;list-style:none}footer .container ul a{color:var(--color);text-decoration:none;display:inline-block;padding:10px 20px;border:1px solid rgb(93,188,252);margin-right:10px;border-radius:10px;opacity:.4;transition:.3s}footer .container ul a:hover,footer .container ul a:focus{background-color:var(--primaryColor);scale:.9}footer .container ul a:hover,footer .container ul a.active{opacity:1}footer .container p{font-size:18px}footer .container p span{color:orange;font-weight:700}@media (max-width:991px){footer .container{flex-direction:column;gap:30px}footer .container ul{flex-wrap:wrap;justify-content:center;gap:10px}}*{box-sizing:border-box;margin:0;padding:0}:root{--primaryColor:rgb(24 24 27);--border:rgba(63 63 70 .4);--color:white}.light{--primaryColor:#fff;--SeconderyColor:rgb(24 24 27);--color:black}body{font-family:Roboto,sans-serif;background-color:var(--primaryColor);color:var(--color)}.container{border:1px solid var(--border);margin-left:auto;margin-right:auto}@media (min-width: 768px){.container{width:750px}}@media (min-width: 992px){.container{width:970px}}@media (min-width: 1200px){.container{width:1170px}}.divider{border-bottom:1px solid var(--border);margin:3rem 0}