 html {
     scroll-behavior: smooth;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -ms-overflow-style: scrollbar
 }

 *,
 *::before,
 *::after {
     -webkit-box-sizing: inherit;
     box-sizing: inherit
 }

 body {
     background: #2b1b31;
     padding: 0;
     margin: 0;
     font-family: 'Mulish', sans-serif;
     font-weight: 400;
 }

 h2,
 h4,
 h5,
 h6 {
     color: #fff;
     font-weight: 400;
     line-height: 1;
     font-size: 1.3em;
     padding: 50px;
     opacity: 0.9;
 }

 h1 {
     color: #fff;
     font-weight: 800;
     line-height: 1;
     font-size: 4em;
     padding: 50px 70px 50px 0;
     opacity: 0.8;
 }



 h3 {
     color: #fff;
     font-weight: 300;
     line-height: 1.3;
     font-size: 2em;
     padding: 0 100px 100px 50px;
     opacity: 0.9;
     margin: 0;
 }

 svg {
     margin: 120px 0 25px 50px;
 }

 a {
     color: #0083e8;
 }

 b,
 strong {
     font-weight: 600;
 }

 .logo {
     max-width: 200px;
     padding: 40px;
 }

 .logo img {
     max-width: 100%;
 }


 .project img {
     max-width: 100%;
     box-shadow: 0 0 16px 10px rgba(0, 0, 0, 0.25);
 }

 .outer {
     padding: 50px 50px 100px 50px;
     max-width: 1100px;
     margin: 0 auto;
 }

 .project {
     padding: 0 0 100px 0;
 }

 .btn {
     background: #108a00;
     padding: 15px 35px;
     margin: 15px;
     display: inline-block;
     border-radius: 100px;
     text-decoration: none;
     font-weight: 600;
     position: fixed;
     bottom: 20px;
     right: 20px;
     color: #fff;
 }

 .btn:hover {
     background: #14a800;
 }

 .footer {
     position: relative;
     bottom: 0;
     left: 0;
     background: rgb(0, 0, 0);
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
     width: 100%;
     text-align: center;
     padding: 50px 50px 150px 50px;

 }

 .footer p {
     color: #d9d9d9;
     font-size: 4.5em;
     padding: 0 0 100px;
     margin: 0 auto;
     max-width: 1024px;
     line-height: 1;
     font-weight: 700;
 }

 .footer h5 {
     padding: 20px 0;
     margin: 0;
     font-size: 3.5em;
 }



 @media screen and (min-width:200px) and (max-width:1024px) {

     h1 {
         color: #fff;
         font-weight: 800;
         line-height: 1;
         font-size: 2.5em;
         padding: 0 0 40px 0;
         opacity: 0.8;
     }

     .outer {
         padding: 0 30px 100px 30px;
         max-width: 1100px;
         margin: 0 auto;
     }

     h3 {
         color: #fff;
         font-weight: 300;
         line-height: 1.3;
         font-size: 1.5em;
         padding: 0;
         opacity: 0.8;
         margin: 0;
     }

     svg {
         margin: 80px 0 20px 0;
     }

     .project {
         padding: 0 0 50px 0;
     }

     .topbtn {
        display: none;
     }
     .footer p {
         font-size: 2em;
     }
 }


 .topbtn {
     position: fixed;
     top: 50%;
     left: 20px;
     z-index: 10;
     margin-top: -65px;
 }

 .topbtn li {
     margin-top: 10px;
     height: 50px;
     list-style: none;
     padding: 0;
 }

 .topbtn a {
     display: block;
     position: relative;
     width: 50px;
     height: 50px;
     background: #fff;
     border-radius: 100px;
     transition: opacity .6s ease-in-out;
 }

 .topbtn a.disable {
     opacity: .3;
     cursor: default;
 }

 .topbtn a.disable:hover:before {
     border-top-color: #2b1b31;
     border-bottom-color: #2b1b31;
 }

 .topbtn a:before {
     transition: .3s ease-in-out;
 }

 .topbtn a:hover:before {
     border-top-color: #2b1b31;
     border-bottom-color: #2b1b31;
 }

 .topbtn .back-to-top:before {
     content: "";
     position: absolute;
     bottom: 20px;
     left: 15px;
     width: 0;
     height: 0;
     border-bottom: 15px solid #2b1b31;
     border-right: 10px solid transparent;
     border-left: 10px solid transparent;
 }

 .topbtn .back-to-bottom:before {
     content: "";
     position: absolute;
     top: 20px;
     left: 15px;
     width: 0;
     height: 0;
     border-top: 15px solid #2b1b31;
     border-right: 10px solid transparent;
     border-left: 10px solid transparent;
 }

 @keyframes swings {
     0% {
         right: 120px;
     }

     100% {
         right: 150px;
     }
 }