@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root{
   --blue:#00b8b8;
   --black:#333;
   --white:#fff;
   --light-color:#666;
   --light-bg:#eee;
   --border:.2rem solid rgba(0,0,0,.1);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   font-family: 'Poppins', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none !important;
   /* text-transform: capitalize; */
}

*::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

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

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

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

section{
   padding:7rem 2rem;
}


.heading{
   text-align: center;
   font-size: 4rem;
   color:var(--black);
   text-transform: uppercase;
   font-weight: bolder;
   margin-bottom: 3rem;
}

.link-btn{
   display: inline-block;
   padding:1rem 3rem;
   border-radius: .5rem;
   background-color: var(--blue);
   cursor: pointer;
   font-size: 2rem;
   color:var(--white);
}

.link-btn:hover{
   background-color: var(--black);
   color:var(--white);
}

.header{
   padding:2rem;
   border-bottom: var(--border);
}

.header.active{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border:0;
}

.header .logo{
   font-size: 2.5rem;
   font-weight: bold;
   color:var(--black);
   
}

.header .logo span{
   color:var(--blue);
}

.header .nav a{
   margin:0 1rem;
   font-size: 2rem;
   font-weight: bold;
   color:var(--black);
   text-transform: uppercase;
}

.header .nav a:hover{
   color:var(--blue);
}

#menu-btn{
   font-size: 2.5rem;
   color:var(--black);
   cursor: pointer;
   display: none;
}

.home{
   background:url(../images/home-bg.jpg) no-repeat;
   background-size: cover;
   background-position: center;
}


.home .content{
   width: 55rem;
   padding:2rem;
}

.home .content h3{
   font-size: 4.5rem;
   text-transform: uppercase;
   color:var(--black);
   text-shadow: 1px 1px 1px var(--white);
   background-color: rgba(255, 255, 255,.2);
}



.about .row{
   min-height: 50vh;
}

.about .content span{
   font-size: 2rem;
   color:var(--black);
}

.about .content h3{
   font-size: 3rem;
   color:var(--black);
   margin-top: 1rem;
}

.about .content p{
   padding:1rem 0;
   font-size: 2rem;
   color:var(--light-color);
   line-height: 2;
   text-align: justify;
}

svg {
	display: block;
	position: absolute;
	width: 800px;
	height: 532px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	overflow: visible;
  }
  
  /* text {
	fill: #222;
	fill-opacity: 0.5;
	font-size: 3em;
	filter: url(#fl-shadow);
  } */
  
  .image {
	-webkit-animation: opacity 25s infinite step-start;
			animation: opacity 25s infinite step-start;
	opacity: 0;
  }
  .image:nth-child(4n+1) {
	-webkit-animation-delay: -6.25s;
			animation-delay: -6.25s;
  }
  .image:nth-child(4n+2) {
	-webkit-animation-delay: -12.5s;
			animation-delay: -12.5s;
  }
  .image:nth-child(4n+3) {
	-webkit-animation-delay: -18.75s;
			animation-delay: -18.75s;
  }
  .image:nth-child(4n+4) {
	-webkit-animation-delay: -25s;
			animation-delay: -25s;
  }
  
  @-webkit-keyframes opacity {
	0% {
	  opacity: 1;
	}
	25% {
	  opacity: 1;
	}
	26% {
	  opacity: 0;
	}
	100% {
	  opacity: 0;
	}
  }
  
  @keyframes opacity {
	0% {
	  opacity: 1\;
	}
	25% {
	  opacity: 1;
	}
	26% {
	  opacity: 0;
	}
	100% {
	  opacity: 0;
	}
  }
  .u-line {
	fill: none;
	stroke: var(--blue);
	stroke-width: 0;
	stroke-opacity: 0;
	-webkit-animation: stroke-width-line 6.25s infinite;
			animation: stroke-width-line 6.25s infinite;
  }
  .u-line:nth-child(56n+1) {
	-webkit-animation-delay: 0.1116071429s;
			animation-delay: 0.1116071429s;
  }
  .u-line:nth-child(56n+2) {
	-webkit-animation-delay: 0.2232142857s;
			animation-delay: 0.2232142857s;
  }
  .u-line:nth-child(56n+3) {
	-webkit-animation-delay: 0.3348214286s;
			animation-delay: 0.3348214286s;
  }
  .u-line:nth-child(56n+4) {
	-webkit-animation-delay: 0.4464285714s;
			animation-delay: 0.4464285714s;
  }
  .u-line:nth-child(56n+5) {
	-webkit-animation-delay: 0.5580357143s;
			animation-delay: 0.5580357143s;
  }
  .u-line:nth-child(56n+6) {
	-webkit-animation-delay: 0.6696428571s;
			animation-delay: 0.6696428571s;
  }
  .u-line:nth-child(56n+7) {
	-webkit-animation-delay: 0.78125s;
			animation-delay: 0.78125s;
  }
  .u-line:nth-child(56n+8) {
	-webkit-animation-delay: 0.8928571429s;
			animation-delay: 0.8928571429s;
  }
  .u-line:nth-child(56n+9) {
	-webkit-animation-delay: 1.0044642857s;
			animation-delay: 1.0044642857s;
  }
  .u-line:nth-child(56n+10) {
	-webkit-animation-delay: 1.1160714286s;
			animation-delay: 1.1160714286s;
  }
  .u-line:nth-child(56n+11) {
	-webkit-animation-delay: 1.2276785714s;
			animation-delay: 1.2276785714s;
  }
  .u-line:nth-child(56n+12) {
	-webkit-animation-delay: 1.3392857143s;
			animation-delay: 1.3392857143s;
  }
  .u-line:nth-child(56n+13) {
	-webkit-animation-delay: 1.4508928571s;
			animation-delay: 1.4508928571s;
  }
  .u-line:nth-child(56n+14) {
	-webkit-animation-delay: 1.5625s;
			animation-delay: 1.5625s;
  }
  .u-line:nth-child(56n+15) {
	-webkit-animation-delay: 1.6741071429s;
			animation-delay: 1.6741071429s;
  }
  .u-line:nth-child(56n+16) {
	-webkit-animation-delay: 1.7857142857s;
			animation-delay: 1.7857142857s;
  }
  .u-line:nth-child(56n+17) {
	-webkit-animation-delay: 1.8973214286s;
			animation-delay: 1.8973214286s;
  }
  .u-line:nth-child(56n+18) {
	-webkit-animation-delay: 2.0089285714s;
			animation-delay: 2.0089285714s;
  }
  .u-line:nth-child(56n+19) {
	-webkit-animation-delay: 2.1205357143s;
			animation-delay: 2.1205357143s;
  }
  .u-line:nth-child(56n+20) {
	-webkit-animation-delay: 2.2321428571s;
			animation-delay: 2.2321428571s;
  }
  .u-line:nth-child(56n+21) {
	-webkit-animation-delay: 2.34375s;
			animation-delay: 2.34375s;
  }
  .u-line:nth-child(56n+22) {
	-webkit-animation-delay: 2.4553571429s;
			animation-delay: 2.4553571429s;
  }
  .u-line:nth-child(56n+23) {
	-webkit-animation-delay: 2.5669642857s;
			animation-delay: 2.5669642857s;
  }
  .u-line:nth-child(56n+24) {
	-webkit-animation-delay: 2.6785714286s;
			animation-delay: 2.6785714286s;
  }
  .u-line:nth-child(56n+25) {
	-webkit-animation-delay: 2.7901785714s;
			animation-delay: 2.7901785714s;
  }
  .u-line:nth-child(56n+26) {
	-webkit-animation-delay: 2.9017857143s;
			animation-delay: 2.9017857143s;
  }
  .u-line:nth-child(56n+27) {
	-webkit-animation-delay: 3.0133928571s;
			animation-delay: 3.0133928571s;
  }
  .u-line:nth-child(56n+28) {
	-webkit-animation-delay: 3.125s;
			animation-delay: 3.125s;
  }
  .u-line:nth-child(56n+29) {
	-webkit-animation-delay: 3.2366071429s;
			animation-delay: 3.2366071429s;
  }
  .u-line:nth-child(56n+30) {
	-webkit-animation-delay: 3.3482142857s;
			animation-delay: 3.3482142857s;
  }
  .u-line:nth-child(56n+31) {
	-webkit-animation-delay: 3.4598214286s;
			animation-delay: 3.4598214286s;
  }
  .u-line:nth-child(56n+32) {
	-webkit-animation-delay: 3.5714285714s;
			animation-delay: 3.5714285714s;
  }
  .u-line:nth-child(56n+33) {
	-webkit-animation-delay: 3.6830357143s;
			animation-delay: 3.6830357143s;
  }
  .u-line:nth-child(56n+34) {
	-webkit-animation-delay: 3.7946428571s;
			animation-delay: 3.7946428571s;
  }
  .u-line:nth-child(56n+35) {
	-webkit-animation-delay: 3.90625s;
			animation-delay: 3.90625s;
  }
  .u-line:nth-child(56n+36) {
	-webkit-animation-delay: 4.0178571429s;
			animation-delay: 4.0178571429s;
  }
  .u-line:nth-child(56n+37) {
	-webkit-animation-delay: 4.1294642857s;
			animation-delay: 4.1294642857s;
  }
  .u-line:nth-child(56n+38) {
	-webkit-animation-delay: 4.2410714286s;
			animation-delay: 4.2410714286s;
  }
  .u-line:nth-child(56n+39) {
	-webkit-animation-delay: 4.3526785714s;
			animation-delay: 4.3526785714s;
  }
  .u-line:nth-child(56n+40) {
	-webkit-animation-delay: 4.4642857143s;
			animation-delay: 4.4642857143s;
  }
  .u-line:nth-child(56n+41) {
	-webkit-animation-delay: 4.5758928571s;
			animation-delay: 4.5758928571s;
  }
  .u-line:nth-child(56n+42) {
	-webkit-animation-delay: 4.6875s;
			animation-delay: 4.6875s;
  }
  .u-line:nth-child(56n+43) {
	-webkit-animation-delay: 4.7991071429s;
			animation-delay: 4.7991071429s;
  }
  .u-line:nth-child(56n+44) {
	-webkit-animation-delay: 4.9107142857s;
			animation-delay: 4.9107142857s;
  }
  .u-line:nth-child(56n+45) {
	-webkit-animation-delay: 5.0223214286s;
			animation-delay: 5.0223214286s;
  }
  .u-line:nth-child(56n+46) {
	-webkit-animation-delay: 5.1339285714s;
			animation-delay: 5.1339285714s;
  }
  .u-line:nth-child(56n+47) {
	-webkit-animation-delay: 5.2455357143s;
			animation-delay: 5.2455357143s;
  }
  .u-line:nth-child(56n+48) {
	-webkit-animation-delay: 5.3571428571s;
			animation-delay: 5.3571428571s;
  }
  .u-line:nth-child(56n+49) {
	-webkit-animation-delay: 5.46875s;
			animation-delay: 5.46875s;
  }
  .u-line:nth-child(56n+50) {
	-webkit-animation-delay: 5.5803571429s;
			animation-delay: 5.5803571429s;
  }
  .u-line:nth-child(56n+51) {
	-webkit-animation-delay: 5.6919642857s;
			animation-delay: 5.6919642857s;
  }
  .u-line:nth-child(56n+52) {
	-webkit-animation-delay: 5.8035714286s;
			animation-delay: 5.8035714286s;
  }
  .u-line:nth-child(56n+53) {
	-webkit-animation-delay: 5.9151785714s;
			animation-delay: 5.9151785714s;
  }
  .u-line:nth-child(56n+54) {
	-webkit-animation-delay: 6.0267857143s;
			animation-delay: 6.0267857143s;
  }
  .u-line:nth-child(56n+55) {
	-webkit-animation-delay: 6.1383928571s;
			animation-delay: 6.1383928571s;
  }
  .u-line:nth-child(56n+56) {
	-webkit-animation-delay: 6.25s;
			animation-delay: 6.25s;
  }
  
  @keyframes stroke-width-line {
	20% {
	  stroke-width: 51;
	  stroke-opacity: 1;
	}
	60% {
	  stroke-width: 51;
	  stroke-opacity: 1;
	}
	70% {
	  stroke-width: 0;
	  stroke-opacity: 0;
	}
  }
/*   
  @keyframes stroke-width-line {
	20% {
	  stroke-width: 51;
	  stroke-opacity: 1;
	}
	60% {
	  stroke-width: 51;
	  stroke-opacity: 1;
	}
	70% {
	  stroke-width: 0;
	  stroke-opacity: 0;
	}} */
  
  /* image {
	  display: none; 
  } */
  
  .im-mask-waves-1 {
	-webkit-mask: url(#m-wavy-lines);
			mask: url(#m-wavy-lines);
  }
  
  .im-mask-waves-2 {
	-webkit-mask: url(#m-wavy-lines-vertical);
			mask: url(#m-wavy-lines-vertical);
  }
  
  .im-mask-lines {
	-webkit-mask: url(#m-lines);
			mask: url(#m-lines);
  }
  
  .im-mask-circles {
	-webkit-mask: url(#m-circles);
			mask: url(#m-circles);
  }

.services{
   background-color: var(--light-bg);
}

.services .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
}

.services .box-container .box{
   text-align: center;
   padding:2rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.services .box-container .box img{
   margin:1rem 0;
   height: 4rem;
}

.services .box-container .box h3{
   font-size: 2rem;
   padding:1rem 0;
   color:var(--black);
}

.services .box-container .box p{
   font-size: 1.5rem;
   color:var(--light-color);
   line-height: 2;
}

.reviews{
   background-color: var(--light-bg);
}

.reviews .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
}

.reviews .box-container .box{
   background-color: var(--white);
   text-align: center;
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   padding:2rem;
}

.reviews .box-container .box img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
}

.reviews .box-container .box p{
   padding:2rem 0;
   line-height: 2;
   font-size: 2rem;
   color:var(--light-color);
   margin-bottom: 0;
}

.reviews .box-container .box .stars{
   padding:.5rem 1.5rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   margin-bottom: 2rem;
   display: inline-block;
}

.reviews .box-container .box .stars i{
   font-size: 1.5rem;
   color:var(--blue);
}

.reviews .box-container .box h3{
   font-size: 2rem;
   color:var(--black);
}

.reviews .box-container .box span{
   color:var(--light-color);
   font-size: 2rem;
}

.contact form{
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:2rem;
   margin:0 auto;
   max-width: 50rem;
}

.contact form .message{
   margin-bottom: 2rem;
   border-radius: .5rem;
   background-color: var(--blue);
   padding:1.2rem 1rem;
   font-size: 1.7rem;
   color:var(--white);
   text-align: center;
}

.contact form .box{
   width: 100%;
   margin-top: 1rem;
   margin-bottom: 2rem;
   border-radius: .5rem;
   background-color: var(--white);
   padding:1.2rem 1.4rem;
   font-size: 1.7rem;
   color:var(--black);
   text-transform: none;
}

.contact form span{
   font-size: 1.7rem;
   color:var(--black);
}


.footer .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap:3rem;
}

.footer .box-container .box{
   text-align: center;
}

.footer .box-container .box i{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   line-height: 5rem;
   font-size: 2rem;
   background-color: var(--blue);
   color:var(--white);
}

.footer .box-container .box h3{
   font-size: 2rem;
   margin:2rem 0;
   color:var(--black);
}

.footer .box-container .box p{
   font-size: 2rem;
   color:var(--light-color);
   text-transform: none;
}

.footer .credit{
   text-align: center;
   border-top: var(--border);
   padding-top: 2rem;
   margin-top: 2rem;
   font-size: 2rem;
   color:var(--light-color);
}

.footer .credit p a {
   text-decoration: none;
   color:var(--blue);  
   text-shadow: 1px 1px 1px var(--light-color);
}
.footer .credit p a:hover {
   color:var(--light-bg);
   text-shadow: 1px 1px 1px var(--blue);
}







/* media queries  */

@media (max-width:991px){

   html{
      font-size: 55%;
   }

   .header .link-btn{
      display: none;
   }

   section{
      padding:5rem 2rem;
   }

}

@media (max-width:768px){

   section{
      padding:3rem 1rem;
   }

   #menu-btn{
      display: inline-block;
      transition: .2s linear;
   }

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

   .header .nav{
      position: absolute;
      top:99%; left:0; right:0;
      background-color: var(--white);
      border-top: var(--border);
      border-bottom: var(--border);
      padding:1rem 0;
      text-align: center;
      flex-flow: column;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transition: .2s linear;
   }

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

   .header .nav a{
      margin:1rem 0;
      font-size: 2rem;
   }

   .home{
      background-position: left;
   }

   .home .content{
      width: auto;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .home .content h3{
      font-size: 7rem;
   }

   .heading{
      font-size: 4rem;
   }

}