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

:root {
   --color: #6c5ce7;
}

* {
   font-family: "Poppins", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   text-transform: capitalize;
   transition: all 0.2s linear;
}
/*------------*/
*::selection {
   background-color: var(--color);
   color: #fff;
}

::-webkit-scrollbar {
   height: 0.5rem;
   width: 1rem;
}

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

::-webkit-scrollbar-thumb {
   background-color: var(--color);
}

/*------------*/
html {
   font-size: 62.5%;
}

body {
   overflow-x: hidden;
}
/*----.heading--------*/
.heading {
   margin: 2rem;
   padding-top: 6rem;
   display: inline-block;
   font-size: 3.5rem;
   color: var(--color);
   position: relative;
   letter-spacing: 0.2rem;
}
.heading::before,
.heading::after {
   content: "";
   position: absolute;
   height: 2.5rem;
   width: 2.5rem;
   border-top: 0.4rem solid var(--color);
   border-left: 0.4rem solid var(--color);
}
.heading::before {
   top: 5.8rem;
   left: -2rem;
}

.heading::after {
   bottom: -0.5rem;
   right: -2rem;
   transform: rotate(180deg);
}
/*----.btn--------*/
.btn {
   outline: none;
   border: none;
   border-radius: 5rem;
   background: var(--color);
   color: #fff;
   cursor: pointer;
   height: 3.5rem;
   width: 15rem;
   font-size: 1.7rem;
   box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
}

.btn:hover {
   letter-spacing: 0.1rem;
   opacity: 0.8;
}

/*------------*/
/*--------.header------------------------------*/
.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 1rem 2rem;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
}
.header .logo {
   font-size: 2.5rem;
   color: #fff;
}

.header .logo i {
   padding: 0 0.5rem;
}

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

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

.header .navbar ul li a {
   font-size: 2rem;
   color: #fff;
}
.header .navbar ul li a:hover {
   color: #ccc;
}
.header .fa-bars {
   color: #fff;
   cursor: pointer;
   font-size: 3rem;
   display: none;
}

/*--------.home------------------------------*/
.home {
   min-height: 100vh;
   width: 100vw;
   background: linear-gradient(purple, var(--color));
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column;
   text-align: center;
   padding: 0 1rem;
   position: relative;
   overflow: hidden !important;
}
.home .banner {
   color: #fff;
   font-size: 5rem;
   text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3);
}

.home .slogan {
   color: #eee;
   font-size: 2.5rem;
   font-weight: 400;
}

.home button {
   height: 4rem;
   width: 18rem;
   background: #fff;
   color: #444;
   cursor: pointer;
   border: none;
   outline: none;
   margin-top: 1rem;
   font-size: 2rem;
   font-weight: 400;
   box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3);
}

.home button:hover {
   letter-spacing: 0.1rem;
}

.home .wave {
   position: absolute;
   bottom: -0.5rem;
   left: 0;
   height: 11rem;
   width: 100%;
   background: url(../img/wave.png);
   background-size: 100rem 11rem;
   background-repeat: repeat-x;
   animation: waves 10s linear infinite;
}

.home .wave2 {
   animation-direction: reverse;
   opacity: 0.2;
}

.home .wave3 {
   animation-duration: 4s;
   opacity: 0.5;
}

@keyframes waves {
   0% {
      background-position-x: 0;
   }
   100% {
      background-position-x: 100rem;
   }
}

.home .fa-cog {
   position: absolute;
   font-size: 30rem;
   opacity: 0.15;
   color: #fff;
   animation: rotate 10s linear infinite;
}

.home .nut1 {
   top: 10%;
   left: -15rem;
}

.home .nut2 {
   bottom: 23%;
   right: -13rem;
   animation-direction: reverse;
}

@keyframes rotate {
   100% {
      transform: rotate(360deg);
   }
}

/*--------.about------------------------------*/
.about {
   min-height: 100vh;
   width: 100vw;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.about .row {
   display: flex;
   align-items: center;
   justify-content: space-around;
   padding: 0 4rem;
}

.about .row .content {
   text-align: left;
}

.about .row .image img {
   width: 50vw;
}

.about .row .content h3 {
   font-size: 3rem;
   color: var(--color);
}

.about .row .content p {
   font-size: 1.5rem;
   color: #333;
   padding: 1rem 0;
}

.about::before,
.about::after {
   content: "";
   position: absolute;
   z-index: -1;
   opacity: 0.2;
   border-radius: 50%;
}

.about::before {
   height: 50rem;
   width: 50rem;
   background: #ccc;
   bottom: -10rem;
   left: -10rem;
}

.about::after {
   height: 60rem;
   width: 60rem;
   background: var(--color);
   top: -10rem;
   right: -10rem;
}
/*------.service------------------------------*/
.service {
   width: 100vw;
   text-align: center;
}

.service .row {
   margin: 2rem 0;
   padding: 0 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.service .row .image img {
   width: 50vw;
   height: 55vh;
}

.service .row .content {
   text-align: left;
   padding: 0 3rem;
}

.service .row .content h3 {
   font-size: 3rem;
   color: var(--color);
}

.service .row .content p {
   font-size: 1.5rem;
   color: #333;
   padding: 1rem 0;
}
/*--------.team------------------------------*/
.team {
   min-height: 100vh;
   width: 100vw;
   text-align: center;
   background-color: #222;
}

.team .heading {
   color: #fff;
}

.team .heading::before,
.team .heading::after {
   border-color: #fff;
}
.team .row {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
}
.team .row .card {
   height: 35rem;
   width: 25rem;
   background: #fff;
   text-align: center;
   margin: 7rem 2rem;
   position: relative;
   overflow: hidden;
   -webkit-box-reflect: below 0.2rem linear-gradient(transparent 70%, #0004);
}
.team .row .card .image {
   margin: 1rem 0;
   padding-top: 4rem;
}
.team .row .card .image img {
   height: 13rem;
   width: 13rem;
   border-radius: 50%;
   border: 0.5rem solid #fff;
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
   object-fit: cover;
}
.team .row .card .info h3 {
   font-size: 2rem;
   color: #333;
}

.team .row .card .info span {
   font-size: 1.8rem;
   color: var(--color);
}

.team .row .card .info .icons a {
   margin-top: 4rem;
   padding: 0 1rem;
   font-size: 2rem;
   color: #333;
}

.team .row .card .info .icons a:hover {
   color: var(--color);
}
.team .row .card::before,
.team .row .card::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   height: 15rem;
   width: 15rem;
   z-index: -1;
}

.team .row .card::before {
   background: var(--color);
   top: -3rem;
   right: -4rem;
}

.team .row .card::after {
   background: #ccc;
   bottom: -3rem;
   left: -4rem;
}

/*------.contact------------------------------*/
.contact {
   min-height: 100vh;
   width: 100vw;
   text-align: center;
}

.contact .row {
   display: flex;
   align-items: center;
   justify-content: center;
}

.contact .row .image img {
   height: 70vh;
   width: 50vw;
}
.contact .row .form-container {
   width: 50%;
   text-align: left;
   padding: 0 5rem;
}
.contact .row .form-container input,
textarea {
   outline: none;
   border: none;
   height: 4rem;
   background: none;
   border-radius: 0.5rem;
   box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
   padding: 0 1rem;
   margin: 1rem 0;
   font-size: 1.6rem;
}
.contact .row .form-container .inputBox {
   width: 100%;
   display: flex;
   justify-content: space-between;
}
.contact .row .form-container .inputBox input[type="text"] {
   width: 49%;
}
.contact .row .form-container input[type="email"] {
   width: 100%;
}
.contact .row .form-container textarea {
   width: 100%;
   height: 20rem;
   padding: 1rem;
   resize: none;
}
.contact .row .form-container input[type="submit"] {
   background-color: var(--color);
   color: #fff;
   cursor: pointer;
   height: 4rem;
   width: 10rem;
}

.contact .row .form-container input[type="submit"]:hover {
   opacity: 0.8;
}
/*------.faq------------------------------*/
.faq {
   min-height: 100vh;
   width: 100vw;
   text-align: center;
   padding: 0 2rem;
}
.faq .row {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 2rem;
}

.faq .row .image img {
   height: 70vh;
   width: 50vw;
}

.faq .row .accordion-container {
   width: 50%;
   text-align: left;
}
.faq .row .accordion-container .accordion .accordion-header {
   background-color: var(--color);
   margin: 1rem 0;
   box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
   cursor: pointer;
}
.faq .row .accordion-container .accordion .accordion-header span {
   display: inline-block;
   text-align: center;
   height: 4rem;
   width: 5rem;
   line-height: 4rem;
   font-size: 2rem;
   background: #fff;
   color: #333;
   clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.faq .row .accordion-container .accordion .accordion-header h3 {
   display: inline;
   color: #fff;
   font-weight: 400;
   padding-left: 0.5rem;
   font-size: 1.5rem;
}
.faq .row .accordion-container .accordion .accordion-body {
   padding: 1rem;
   color: #444;
   box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
   font-size: 1.3rem;
   display: none;
}
.faq .row .accordion-container .accordion:nth-child(1) .accordion-body {
   display: block;
}

/*------footer------------------------------*/
.footer {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 2rem;
   margin-top: 1rem;
   background: var(--color);
}

.footer h1 {
   color: #fff;
   letter-spacing: 0.1rem;
   font-weight: 400;
}

.footer .icons a {
   color: #fff;
   font-size: 1.8rem;
   padding: 0 1rem;
}

/*------media queries------------------------------*/
@media (max-width: 991px) {
}
@media (max-width: 768px) {
   html {
      font-size: 55%;
   }
   /*------*/
   .header .fa-bars {
      display: block;
   }
   .header .navbar {
      position: fixed;
      top: -120%;
      left: 0;
      height: auto;
      width: 100%;
      background-color: #fff;
      z-index: 1000;
      border-top: 0.1rem solid rgba(0, 0, 0, 0.3);
   }
   .header .navbar ul {
      height: 100%;
      width: 100%;
      flex-flow: column;
   }

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

   .header .navbar ul li a {
      color: #444;
      font-size: 2.4rem;
   }
   /*-js starts-*/
   .header .fa-times {
      transform: rotate(180deg);
   }
   .header .nav-toggle {
      top: 5.8rem;
   }
   /*-js ends-*/
   /*------*/
   .home .banner {
      font-size: 4rem;
   }

   .home .slogan {
      font-size: 1.7rem;
   }
   /*------*/
   .about .row {
      flex-flow: column-reverse;
      padding: 0 2rem;
   }
   .about .row .image img {
      width: 100vw;
   }
   /*------*/
   .service .row {
      flex-flow: column-reverse;
   }

   .service .row:nth-child(even) {
      flex-flow: column;
   }

   .service .row .image img {
      width: 100vw;
   }

   .service .row .content {
      padding: 0;
   }
   /*------*/
   .contact .row {
      flex-flow: column;
   }

   .contact .row .image img {
      width: 100vw;
   }

   .contact .row .form-container {
      width: 100%;
      padding: 0 1.5rem;
   }
   /*------*/
   .faq {
      padding: 0;
   }

   .faq .row {
      padding: 0 1rem;
      flex-flow: column;
   }

   .faq .row .image img {
      width: 100vw;
   }

   .faq .row .accordion-container {
      width: 100%;
   }
}
@media (max-width: 550px) {
   html {
      font-size: 50%;
   }
   /*------*/
   .footer{
      flex-flow: column;
    }
    .footer h1{
      text-align: center;
    }
    .footer .icons{
      padding:2rem 0;
    }
}