@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap");

:root {
   --orange: #ff7a00;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transition: all 0.2s linear;
   text-transform: capitalize;
   font-family: "Exo 2", sans-serif;
}

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

body {
   overflow-x: hidden;
}
/*------------.heading-----------------------------*/
.heading {
   font-size: 4rem;
   text-align: center;
   letter-spacing: 1.7rem;
   color: #444;
   margin: 2rem 0;
   padding-top: 6rem;
   text-decoration: underline;
   text-decoration-style: solid;
   text-decoration-color: var(--orange);
   text-underline-offset: -1.4rem;
}
/*------------.header-----------------------------*/

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   background: #fff;
   z-index: 100;
   padding: 1rem 2rem;
   box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
}
.header .logo img {
   height: 4rem;
}

.header nav ul {
   list-style-type: none;
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin: 0;
   padding: 0;
}

.header nav ul li {
   margin: 0 1.5rem;
}

.header nav ul li a {
   font-size: 2rem;
   color: #666;
}

.header nav ul li a:hover {
   color: #000;
   text-decoration: none;
}
.header .fa-bars {
   font-size: 2.5rem;
   color: #666;
   cursor: pointer;
   display: none;
}

.fa-times {
   transform: rotate(180deg);
}

/*------------.home-----------------------------*/
.home .hero {
   min-height: 60vh;
   background: url(../img/bg-image.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   margin-left: 3rem;
}
.home .row {
   margin: 0;
}

.home .hero .text1 {
   font-size: 5rem;
   width: 45rem;
   background: #fff;
   padding: 1rem;
   text-align: center;
   opacity: 0.8;
}
.home .hero .text2 {
   font-size: 3rem;
   width: 35rem;
   background: var(--orange);
   padding: 1rem;
   text-align: center;
   opacity: 0.8;
   margin-top: 1rem;
   color: #fff;
}

/*--*/
.home .counting {
   min-height: 40vh;
   padding: 2rem 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
}

.home .counting .box {
   margin: 2rem 4rem;
   text-align: center;
}

.home .counting .box .count {
   font-size: 7rem;
   color: #444;
}

.home .counting .box h3 {
   font-size: 2rem;
   color: var(--orange);
}
/*------------.about-----------------------------*/
.about {
   min-height: 100vh;
   padding-bottom: 3rem;
}

.about .image {
   padding: 2rem;
}

.about .image img {
   height: 45rem;
   object-fit: cover;
   box-shadow: 2.5rem 2.5rem 0 1rem var(--orange);
}
.about .info {
   padding: 2rem;
   margin-top: 3rem;
}

.about .info h2 {
   color: var(--orange);
   font-size: 3rem;
}

.about .info p {
   font-size: 1.4rem;
   color: #444;
   margin: 2rem 0;
}

.about .info .icons a {
   font-size: 2rem;
   height: 4rem;
   width: 4rem;
   line-height: 4rem;
   text-align: center;
   background: #333;
   color: #fff;
   border-radius: 0.5rem;
   margin-right: 1rem;
   text-decoration: none;
}

.about .info .icons a:hover {
   background: var(--orange);
}

/*--------.service-----------------------------*/
.service {
   min-height: 100vh;
}

.service .box-container {
   width: 90%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.service .box-container .box {
   height: 25rem;
   width: 25rem;
   box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
   border-left: 0.5rem solid var(--orange);
   border-right: 0.5rem solid var(--orange);
   border-radius: 0.5rem;
   text-align: center;
   padding-top: 6rem;
   margin: 2rem 3rem;
}
.service .box-container .box .fas {
   color: var(--orange);
   font-size: 5rem;
}
.service .box-container .box p {
   color: #333;
   font-size: 1.1rem;
   margin: 2rem 0;
}

/*--------.project-----------------------------*/
.project {
   min-height: 80vh;
   background: #333;
}

.project .heading {
   color: #fff;
}
.project .box-container {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.project .box-container .box {
   height: 20rem;
   width: 30rem;
   border-radius: 0.5rem;
   margin: 2.5rem;
   overflow: hidden;
   box-shadow: 0 0.3rem 0.5rem #000;
}
.project .box-container .box img {
   height: 100%;
   width: 100%;
   object-fit: cover;
}
.project .box-container .box:hover img {
   transform: scale(1.3);
}

/*--------.contact-----------------------------*/
.contact {
   min-height: 100vh;
}
.contact-box-container {
   width: 93%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.contact-box-container .contact-box {
   height: 15rem;
   flex: 1 0 30rem;
   margin: 2rem;
   box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
   border-radius: 0.5rem;
   text-align: center;
   padding-top: 4rem;
   padding: 0 2rem;
}
.contact-box-container .contact-box i {
   color: var(--orange);
   font-size: 4rem;
}
.contact-box-container .contact-box h3 {
   font-size: 1.8rem;
   color: #444;
   margin: 2rem 0;
}
/*---*/
.contact .form-container {
   width: 90%;
   box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
   border-radius: 0.5rem;
   padding: 1rem 3rem;
   margin-bottom: 2rem;
}
.contact .form-container form input,
textarea {
   height: 4.5rem;
   padding: 0 1rem;
   margin: 2rem 0;
   font-size: 1.5rem;
   box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
   border: none;
   outline: none;
   color: #333;
}
.contact .form-container form .inputBox {
   display: flex;
   justify-content: space-between;
}

.contact .form-container form input[type="text"] {
   width: 49%;
}

.contact .form-container form input[type="email"] {
   width: 100%;
}
.contact .form-container form textarea {
   width: 100%;
   height: 20rem;
   padding: 1rem;
   resize: none;
   overflow-y: auto;
}

.contact .form-container form input[type="submit"] {
   background: var(--orange);
   width: 15rem;
   color: #fff;
   font-size: 2rem;
}

.contact .form-container form input[type="submit"]:hover {
   opacity: 0.8;
}

/*--------.footer-----------------------------*/
.footer {
   background: #333;
   text-align: center;
}
.footer .row {
   width: 100%;
   margin-left: 0;
   padding: 1rem;
}
.footer .row .col-md-3 {
   margin: 1rem 0;
}
.footer h2 {
   font-size: 2.5rem;
   color: #fff;
}
.footer .row .col-md-3 img {
   height: 5rem;
}
.footer p {
   font-size: 1.2rem;
   color: #ccc;
}
.footer .list {
   display: flex;
   flex-flow: column;
}
.footer .list a {
   color: #ccc;
   font-size: 1.7rem;
}

.footer .letter p {
   font-size: 2rem;
}
.footer .letter input[type="email"] {
   outline: none;
   border: none;
   background: none;
   padding: 0 1rem;
   color: #fff;
   height: 3rem;
   width: 100%;
   border: 0.1rem solid #fff;
   font-size: 1.5rem;
}
.footer .letter input[type="submit"] {
   outline: none;
   border: none;
   background: #fff;
   margin: 1rem 0;
   width: 10rem;
   font-size: 1.6rem;
}
.footer .letter input[type="submit"]:hover {
   background: var(--orange);
   color: #fff;
}

.footer .credit {
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 2rem;
   padding: 1rem 0;
   margin: 1rem 0;
   margin-bottom: 0;
   border-top: 0.1rem solid #aaa;
   letter-spacing: 0.2rem;
}

.footer .credit span {
   color: var(--orange);
}

/*--------media queries-----------------------------*/
@media (max-width: 991px) {
}
@media (max-width: 768px) {
   html {
      font-size: 55%;
   }
   /*------*/
   .header .fa-bars {
      display: block;
   }

   .header nav {
      position: fixed;
      top: 6rem;
      right: -120%;
      height: calc(100vh - 6rem);
      width: 100vw;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      border-top: 0.1rem solid rgba(0, 0, 0, 0.3);
   }

   .header nav ul {
      height: 100%;
      width: 33rem;
      background: #fff;
      flex-flow: column;
      justify-content: center;
      float: right;
   }

   .header nav ul li {
      margin: 1rem 0;
   }

   .header nav ul li a {
      display: block;
      padding: 0.5rem 0;
      border: 0.1rem solid rgba(0, 0, 0, 0.3);
      width: 25rem;
      border-radius: 5rem;
      text-align: center;
      text-decoration: none;
   }

   .header nav ul li a:hover {
      background: #333;
      color: #fff;
   }

   .header .nav-toggle {
      right: 0%;
   }
   /*------*/
}
@media (max-width: 450px) {
   html {
      font-size: 50%;
   }
   /*------*/
   .home .hero .text1 {
      font-size: 3.5rem;
      width: 33rem;
   }
   .home .hero .text2 {
      font-size: 2.5rem;
      width: 30rem;
   }
}