* {
     font-family: Verdana, Geneva, Tahoma, sans-serif; 
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     outline: none;
     border: none;
     list-style: none;  
     text-decoration: none;
     transition: all .2s linear;
}

html {
     font-size: 62.5%;
     overflow-x: hidden;
     scroll-behavior: smooth;
}

section {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem;
}

*::selection {
     background-color: #000;
     color: #f8f2f5;
}

html::-webkit-scrollbar {
     width: 1rem;
}

html::-webkit-scrollbar-track {
     background-color: transparent;
}

html::-webkit-scrollbar-thumb {
     background-color: #333;
}
.btn {
     border: .3rem solid orange;
     background: #fff;
     color: #000;
     font-weight: 600;
     font-size: 1.8rem;
     padding: 1.8rem 6rem;
     border-radius: 5rem;
}

.btn:hover {
     background-color: #000;
     color: #fff;
     border: .3rem solid #000;
}

.header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background: #fff;
     box-shadow: rgb(0 0 0 / 13%) 0 4px 16px;
}

.header .flex {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.header .flex .logo img {
     width: 20rem;
}

.header .flex .navbar ul {
     display: flex;
}

.header .flex .navbar ul li a {
     display: block;
     padding-left: 5rem;
     color: rgb(31, 27, 31);
     font-weight: 600;
     font-size: 1.5rem;
     line-height: 6rem;
     text-transform: uppercase;
}

.header .flex .navbar ul li a:hover  {
     color:#333;
}

#menu {
     font-size: 4.5rem;
     cursor: pointer;
     display: none;
}

.home  {
     background: #000;
     min-height: 65rem;
}

.scroll-bottom {
     display: flex;
     align-items: center;
     padding-bottom: 8rem;
     padding-top: 3rem;
     justify-content: center;
}

.scroll-bottom img {
     color: #fff;
     width: 7rem;
}

.home .row {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 2rem;
     padding-top: 20rem;
}

.home .row .col-left {
     flex: 1 1 40rem;
     margin-top: 18rem;
}

.home .row .col-left img {
     width: 30rem;
     padding-bottom: 3rem;
}

.home .row .col-left h2 {
     color: #fff;
     font-weight: 400;
     font-size: 2rem;
}

.home .row .col-left p {
     color: #fff;
     line-height: 3rem;
     padding-bottom: 1rem;
     font-size: 2rem;
}

.home .row .col-right {
     flex: 1 1 40rem;
}

.home .row .col-right img {
     max-width: 100%;
}

.about {
     text-align: center;
     padding-top: 5rem;
}

.about .content h3 {
     font-size: 5rem;
     text-transform: uppercase;
     padding-bottom: 3rem;
     color: #000;
}

.about .content p {
     color: #333;
     font-size: 2rem;
     padding-bottom: 5rem;
     text-align: center;
}

.services .row {
     display: flex;
     gap: 2rem;
     align-items: center;
     justify-content: space-between;
}

.services .row .box {
     text-align: center;
     padding-top: 2rem;
}

.services .row .box h2 {
     font-size: 2rem;
     text-transform: uppercase;
}

.services .row .box img {
     padding-bottom: 2rem;
     max-width: 100%;
}

.heading {
     font-size: 5rem;
     text-transform: uppercase;
     text-align: center;
}

.services {
     margin-top: 12rem;
}

.services-info .row {
     display: flex;
     justify-content: space-between;
     gap: 5rem;
}

.services-info .row .col-left {
     flex:  1 1 40rem;
     background-color: #eee;
}

.services-info .row .col-left {
     height: fit-content;
     display: flex;
     align-items: center;
     justify-content: center;
}

.services-info .row .col-left img {
     width: 100%;
     max-width: 100%;
}

.services-info .row .col-right {
     flex:  1 1 40rem;
}

.services-info .row .col-right h3 {
     color: #000;
     font-size: 3rem;
     padding-bottom: 1rem;
}

.services-info .row .col-right h2 {
     font-size: 1.6rem;
     padding-bottom: 1rem;
}


.services-info .row .col-right p {
     font-size: 1.8rem;
}

#close {
     position: absolute;
     top: 0;
     margin-top: 1rem;
     font-size: 5rem;
     transform: rotate(135deg);
     color: #000;
     right: 5%;
}

.portfolio {
     margin-top: 10rem;
     text-align: center;
}

.button {
     color: #000;
     margin-top: 5rem;
}

.portfolio .row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
     gap: 2rem;
     padding-top: 5rem;
}

.portfolio .row .box {
     text-align: center;
}

.portfolio .row .box img {
     max-width: 100%;
     padding-bottom: 3rem;
}

.portfolio .row .box h3 {
     font-size: 2rem;
}

.scroll-t {
     position: fixed;
     bottom: 7.5rem;
     right: 7rem;
     z-index: 1000;
     background: #199c68;
     padding: 15px 15px;
     border-radius: 50%;
 }
 
 .scroll-t i {
     font-size: 3rem;
     color: #fff;
 }
 
 .scroll-t:hover {
     -webkit-animation: 1s tada ease-in-out alternate;
     animation: 1s tada ease-in-out alternate;
 }
 
 @keyframes tada {
     from {
       -webkit-transform: scale3d(1, 1, 1);
       transform: scale3d(1, 1, 1);
     }
   
     10%, 20% {
       -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
       transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
     }
   
     30%, 50%, 70%, 90% {
       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
     }
   
     40%, 60%, 80% {
       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
     }
   
     to {
       -webkit-transform: scale3d(1, 1, 1);
       transform: scale3d(1, 1, 1);
     }
   }
   
.tada {
     -webkit-animation-name: tada;
     animation-name: tada;
}

footer {
     border-top: 1px solid #888;
     padding: 2rem;
     color: #888;
     text-align: center;
     font-size: 1.6rem;
} 

 footer  span {
     color: #4ac081;
} 

.project {
     margin-top: 10rem;
} 

.project h1 {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem;
     font-size: 4rem;
} 

 .project .row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(38rem, 1fr));
     gap: 2rem;
     text-align: center;
} 

 .project .row .box img {
     max-width: 100%;
     width: 100%;
     height: 90%;
} 

.project-last h3 {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem;
     font-size: 4rem;
}

.project-last .row {
     display: grid;
     text-align: center;
     gap: 2rem;
     grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

.project-last .row .box img {
     max-width: 100%;
}

.contact {
     margin-top: 7rem;
     text-align: center;
}

.contact .heading {
     font-size: 3rem;
}

.contact p {
     text-align: center;
     padding: 1rem;
}

.contact .row {
     text-align: center;
}

.contact .row  a {
     color: #333;
     font-size: 3rem;
}

 h3 {
     font-size: 2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
}

.contact .row .social {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 1rem;
     gap: 2rem;
}

.contact .row .social i {
     background: #000;
     color: #fff;
     padding: 0.6rem;
     font-size: 2.5rem;
     border-radius: 5rem;
}

.contact  p {
     color: #888;
     font-size: 1.8rem;
}

.contact .bxs-phone-call {
     font-size: 5rem;
     margin-top: 3rem;
     margin-bottom: 1rem;
     color: #fff;
     background-color: #199c68;
     padding: 1rem;
     border-radius: 5rem;
}


@media (max-width: 991px){
     html {
          font-size: 55%;
     }
}

@media (max-width: 768px){
     #menu {
          display: block;
     }

     #menu.bx-plus {
          transform: rotate(135deg);
     }

     .header .flex .navbar {
          position: absolute;
          top: 99%;
          left: 0;
          right: 0;
          background-color: #fff;
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     }

     .header .flex .navbar.active {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }

     .header .flex .navbar ul {
          flex-flow: column;
          padding: 0rem 3rem;
     }

     .header .flex .navbar ul li a {
          padding: 0rem 0;
     }

     .home .row .col-left {
          margin-top: 0;
     }

     .services .row {
          display: block;
          flex-wrap: wrap;
     }

     .project .row .box img {
          width: unset;
     }

     .services-info .row  {
          display: block;
     }

     .heading {
          font-size: 4rem;
     }

     .services-info {
          margin-top: 5rem;
     }
}

@media (max-width: 450px){
     html {
          font-size: 50%;
     }
}