/* CUSTOM PROPERTY */
:root{
    --fontFamily-open-sans: 'Open Sans', sans-serif;
    --light-color:rgb(47, 47, 47);
    --main-bg:#55bb68;
    --main-b:#273c89;
    --secound-bg:whitesmoke;
    --box-shadow: 0 -0.2rem 1.5rem rgba(0,0,0,0.1);
    --linear-gradient: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.3450806347929797) 35%, rgb(0 212 255 / 43%) 100%);
    --pd:5rem 8% 6rem;
}
/* #RESET */
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li { list-style: none;}

a{ text-decoration: none; 
    color: inherit;
}



 input,
 button{
    background:none;
    border: none;
    font: inherit;
 }

 input{outline: none;}

 button{ cursor: pointer;}

 address{font-style: normal;}

 *{
    font-family: var(--fontFamily-open-sans);
    text-transform: capitalize;
    transition: all .2s linear;
 }
 html {
    scroll-behavior: smooth;
 }

img{
  max-width: 100%;
  display: block;
 }

 /*  */

 .whatsapp{
  background-color:#3ebd4e;
  color: white;
  position: fixed;
  top: 90dvh;
  right:  20px;
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  z-index: 50000;
  font-size: 15px;
  box-shadow: 0px 0px 4px 0px #c1c1c171;
 }
 .whatsapp a .fa-whatsapp{
  order: 1;
  padding-right: 5px;
 }

/* section{
   padding: 2rem 8%;
} */
 /* START HEADER */
 .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  z-index: 100000;
  box-shadow: var(--box-shadow);
}
.header .logo {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bolder;
}
.logo > img {
width: 170px;

}
.header .navbar a{
  color: var(--light-color);
  font-size: 1.7rem;
  font-size: 15px;
  padding: .5rem 1.5rem;
  transition: all .5s;
}
/* 
.header .navbar a:hover{
  color: white;
  background-color: var(--main-bg);
  border-radius: 20px;
} */

.header .navbar a.active
{
  color: white;
  background-color: var(--main-bg);
  border-radius: 20px;
}
.header .icons {
  cursor: pointer;
}
.header .icons .fa-envelope,
.header .icons .fas { 
 width: 40px;
 height: 40px;
 line-height: 30px;
 text-align: center;
 background-color: var(--secound-bg);
 padding: 5px;
 border-radius: 50%;
}
.header .icons .fa-envelope:hover,
.header .icons .fas:hover{
 background-color: var(--main-bg);
 color: white;
 transform: rotate(360deg);
}

.header .icons #menu-bars{
 display: none;
}

.header .icons .fa-envelope{
 margin-right:10px ;
}
 /* END HEADER */

 /* media queries */

 @media (max-width:991px) {
   .header {
      padding: 1rem 6%;
   }
 }
 @media (max-width:768px) {
   .header .icons #menu-bars{
      display: inline-block;
    }
    .header .navbar {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      text-align: center;
      border-bottom: .1rem solid rgba(0, 0, 0, .2);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    .header .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .header .navbar a {
      background-color: var(--secound-bg);
      display: block;
      padding: .8rem;
    }
 }

 /* top slider */
 .overlay{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.3450806347929797) 35%, rgba(0,212,255,0) 100%);
 }


 .top-home .all-home {
   position: relative;
   width: 100%;
   overflow: hidden;
   height: 100%;
 }

 #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  background-color: rgba(0, 0, 0, 0.193);
  background: url(../img/github.svg);
}
 .top-home .all-home .content {
  text-transform: uppercase;
   position: absolute;
   z-index: 1000;
   left: 125px;
   top: 50px;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
   color: white;
 }

 .top-home .all-home .content span {
    font-size: 20px;
    position: relative;
 }

 .top-home .all-home .content span::before{
  content: "";
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: var(--main-bg);
 }

 .top-home .all-home .content h1 {
  font-size: 55px;
}
.top-home .all-home .content p {
  font-size: 20px;
}

.top-home .all-home .content .btn {
  font-size: 20px;
  margin: 20px 0px;
  border-radius: .3rem;
  padding: 5px 20px;
  background-color: var(--main-bg);
}
.top-home .all-home .content .btn:hover{
  background-color: #308a40
}
 .top-home .all-home .image {
   width: 100%;
   background-color: rgb(21, 70, 70);
   height: 100dvh;
   overflow: hidden;
 }
 .top-home .all-home .image img{
   width: 100%;
   height: 150%;
   object-fit: cover;
 }

 .top-home .all-home .video {
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: 0 -70px;
  filter: grayscale(30%);
 }


 /* footer */
 .footer-content {
  display: flex;
  flex-wrap: wrap;
  color: white;
  padding: 30px 20px;
  background-color: black;
 }

 .footer-content .box-1,.box-3{
  display: flex;
  padding: 10px;
  font-size: 15px;
  flex-direction: column;
  align-items: flex-start;
  line-height: 2;
 }

 .box-2 {
  display: grid;
  padding: 10px;
  width: 400px;
  font-size: 15px;
  grid-template-areas: 
  "three three three"
  "one two two";
  align-items: center;
 }
 .box-2-1{
  grid-area: one;
 }
 .box-2-2{
  grid-area: two;
 }
 .box-2-1, .box-2-2 {
  display: flex;
  flex-direction: column;
 }
 .box-2 a {
  padding: 5px 10px;
  border-radius: 20px;
 }
 .box-2 a:hover{
  background-color: var(--main-bg);

 }
 .footer-content h3{
  font-size: 20px;
  line-height: 2;
  grid-area: three;
 }
 .footer-content .box-1 img {
  margin-bottom: 20px;
  width: 300px;
 }
 .footer-content .box-3 a{
  margin-left: 5px;
}


 /* footer icone */

 .socail{
  padding: 5px 100px;
  background-color: var(--main-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2;
 }
 .socail p{
  color: white;
 }
 .socail .footer-icone i{
  background: black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  color: white;
  font-size: 10px;
 }

 /* page about us */
 .lebel {
  /* background-color: #bcffb0; */
  background: -webkit-linear-gradient(106deg, rgb(114, 210, 254) 0%, rgb(129 185 110) 35%, rgba(0,212,255,1) 100%);
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 12px;
  font-size: 16px;
}
/* Porduct Detils */
.product-content{
  position: relative;
  width: 100%;
  height: 250px;
  background: url(../images/get/t.png);
  background-position: 31% 76%;
  margin-top: 70px;
}

.product-content p {
  font-size: 40px;
  color: white;
}
.center-content{
  padding: var(--pd);

}
.de-products .all{
  display: grid;
  grid-template-areas: 
  ". . img  pro .";
  align-items: center;
  grid-template-rows: 1fr;
  gap: 20px;
  padding: var(--pd);
}

.pro-image {
  grid-area: img;
  max-width: 300px;
}
.pro-image img{
  max-width: 100%;
  object-fit: cover;
}
.pro.content {
  grid-area: pro;
}
.pro.content .content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pro.content .content p{
  font-size: 30px;
  font-weight: 500;
}
.pro.content .content p span{
  font-size: 14px;
  margin-left: 5px;
  color: rgb(158, 158, 158);
}
.pro.content .content .fu {
  border-bottom: 1px solid var(--main-bg);
  padding-bottom: 20px;
}

.pro.content .content .fu h3{
  background: -webkit-linear-gradient(106deg, rgb(114, 210, 254) 0%, rgb(129 185 110) 35%, rgba(0,212,255,1) 100%);;
  color: rgb(255, 255, 255);
  padding: 10px 0 10px 10px;;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.pro.content .content .fu h3 a {
  color: var(--main-b);
  background-color: white;
  padding: 10px;

}
.pro.content .content .fu h3 a:hover {
    color: white;
    background-color: var(--main-b);
}
.pro.content .content .fu li {
  padding-top: 10px;
  font-size: 13px;
  list-style-type:circle;
  color: #787878;
}
@media (max-width:991px) {
  .pro.content .content p{
    font-size: 20px;
  }
  .pro.content .content .fu h3{
    font-size: 12px;
  }
  .de-products .all{

    grid-template-areas: 
    "img img  pro .";

  }
  
}
@media (max-width:710px) {
  .de-products .all{
    justify-items: center;
    grid-template-areas: 
    "img img img"
    "pro pro pro";
    gap: 10px;
  }
  
}